feat: refactoring

furumi-node-player/client/src/components/MainPanel.tsx

@@ -1,7 +1,18 @@
 import type { MouseEvent as ReactMouseEvent } from 'react'
+import { useAppDispatch, useAppSelector } from '../store'
+import {
+  selectPlayingOrigIdx,
+  selectQueueItems,
+  selectQueueOrder,
+  selectQueueScrollSignal,
+  selectRepeatAll,
+  selectShuffle,
+  toggleRepeat,
+  toggleShuffle,
+} from '../store/slices/queueSlice'
 import { Breadcrumbs } from './Breadcrumbs'
 import { LibraryList } from './LibraryList'
-import { QueueList, type QueueItem } from './QueueList'
+import { QueueList } from './QueueList'
 
 export type Crumb = { label: string; action?: () => void }
 
@@ -21,13 +32,10 @@ type MainPanelProps = {
   libraryLoading: boolean
   libraryError: string | null
   libraryItems: LibraryListItem[]
-  queueItemsView: QueueItem[]
-  queueOrderView: number[]
-  queuePlayingOrigIdxView: number
-  queueScrollSignal: number
   onQueuePlay: (origIdx: number) => void
   onQueueRemove: (origIdx: number) => void
   onQueueMove: (fromPos: number, toPos: number) => void
+  onClearQueue: () => void
 }
 
 export function MainPanel({
@@ -35,14 +43,19 @@ export function MainPanel({
   libraryLoading,
   libraryError,
   libraryItems,
-  queueItemsView,
-  queueOrderView,
-  queuePlayingOrigIdxView,
-  queueScrollSignal,
   onQueuePlay,
   onQueueRemove,
   onQueueMove,
+  onClearQueue,
 }: MainPanelProps) {
+  const dispatch = useAppDispatch()
+  const queueItemsView = useAppSelector(selectQueueItems)
+  const queueOrderView = useAppSelector(selectQueueOrder)
+  const queuePlayingOrigIdxView = useAppSelector(selectPlayingOrigIdx)
+  const queueScrollSignal = useAppSelector(selectQueueScrollSignal)
+  const shuffle = useAppSelector(selectShuffle)
+  const repeatAll = useAppSelector(selectRepeatAll)
+
   return (
     <div className="main">
       <div className="sidebar-overlay" id="sidebarOverlay" />
@@ -58,13 +71,21 @@ export function MainPanel({
         <div className="queue-header">
           <span>Queue</span>
           <div className="queue-actions">
-            <button className="queue-btn active" id="btnShuffle">
+            <button
+              type="button"
+              className={`queue-btn${shuffle ? ' active' : ''}`}
+              onClick={() => dispatch(toggleShuffle())}
+            >
               Shuffle
             </button>
-            <button className="queue-btn active" id="btnRepeat">
+            <button
+              type="button"
+              className={`queue-btn${repeatAll ? ' active' : ''}`}
+              onClick={() => dispatch(toggleRepeat())}
+            >
               Repeat
             </button>
-            <button className="queue-btn" id="btnClearQueue">
+            <button type="button" className="queue-btn" onClick={onClearQueue}>
               Clear
             </button>
           </div>