WIP Working on player

web/src/components/Sidebar.tsx

@@ -6,6 +6,7 @@ import { api } from "../api/client";
 import { logout } from "../api/auth";
 import { getInitials } from "../utils";
 import type { MemberRead } from "../api/auth";
+import { usePlayerStore } from "../stores/playerStore";
 
 // ── Icons (inline SVG) ──────────────────────────────────────────────────────
 function IconWaveform() {
@@ -168,6 +169,10 @@ export function Sidebar({ children }: { children: React.ReactNode }) {
   const isSettings = location.pathname.startsWith("/settings");
   const isBandSettings = !!matchPath("/bands/:bandId/settings/*", location.pathname);
   const bandSettingsPanel = matchPath("/bands/:bandId/settings/:panel", location.pathname)?.params?.panel ?? null;
+  
+  // Player state
+  const { currentSongId, currentBandId: playerBandId, isPlaying: isPlayerPlaying } = usePlayerStore();
+  const hasActiveSong = !!currentSongId && !!playerBandId;
 
   // Close dropdown on outside click
   useEffect(() => {
@@ -429,9 +434,13 @@ export function Sidebar({ children }: { children: React.ReactNode }) {
               <NavItem
                 icon={<IconPlay />}
                 label="Player"
-                active={isPlayer}
-                onClick={() => {}}
-                disabled={!isPlayer}
+                active={hasActiveSong && (isPlayer || isPlayerPlaying)}
+                onClick={() => {
+                  if (hasActiveSong) {
+                    navigate(`/bands/${playerBandId}/songs/${currentSongId}`);
+                  }
+                }}
+                disabled={!hasActiveSong}
               />
             </>
           )}