feat: implement compact player and enhance display mode management in AppLayout and Player components

src/components/AppLayout.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react'
 import { SidebarProvider, SidebarInset, SidebarTrigger } from '@/components/ui/sidebar'
 import { AppSidebar } from './AppSidebar'
 import { Separator } from '@/components/ui/separator'
@@ -9,7 +10,7 @@ import {
   BreadcrumbPage,
   BreadcrumbSeparator,
 } from '@/components/ui/breadcrumb'
-import { Player } from './player/Player'
+import { Player, type PlayerDisplayMode } from './player/Player'
 
 interface AppLayoutProps {
   children: React.ReactNode
@@ -22,9 +23,20 @@ interface AppLayoutProps {
 }
 
 export function AppLayout({ children, breadcrumb }: AppLayoutProps) {
+  const [playerDisplayMode, setPlayerDisplayMode] = useState<PlayerDisplayMode>(() => {
+    // Initialize from localStorage or default to 'normal'
+    if (typeof window !== 'undefined') {
+      const saved = localStorage.getItem('playerDisplayMode') as PlayerDisplayMode
+      return saved && ['normal', 'minimized', 'maximized', 'sidebar'].includes(saved) ? saved : 'normal'
+    }
+    return 'normal'
+  })
+
+  // Note: localStorage is managed by the Player component
+
   return (
     <SidebarProvider>
-      <AppSidebar />
+      <AppSidebar showCompactPlayer={playerDisplayMode === 'sidebar'} />
       <SidebarInset>
         <header className="flex h-16 shrink-0 items-center gap-2">
           <div className="flex items-center gap-2 px-4">
@@ -58,7 +70,9 @@ export function AppLayout({ children, breadcrumb }: AppLayoutProps) {
           {children}
         </div>
       </SidebarInset>
-      <Player />
+      <Player 
+        onPlayerModeChange={setPlayerDisplayMode}
+      />
     </SidebarProvider>
   )
 }

src/components/AppSidebar.tsx

@@ -16,9 +16,15 @@ import {
 import { NavGroup } from './nav/NavGroup'
 import { NavItem } from './nav/NavItem'
 import { UserNav } from './nav/UserNav'
+import { CompactPlayer } from './player/CompactPlayer'
+import { Separator } from '@/components/ui/separator'
 import { useAuth } from '@/contexts/AuthContext'
 
-export function AppSidebar() {
+interface AppSidebarProps {
+  showCompactPlayer?: boolean
+}
+
+export function AppSidebar({ showCompactPlayer = false }: AppSidebarProps) {
   const { user, logout } = useAuth()
 
   if (!user) return null
@@ -49,6 +55,14 @@ export function AppSidebar() {
       </SidebarContent>
 
       <SidebarFooter>
+        {showCompactPlayer && (
+          <>
+            <div className="p-2">
+              <CompactPlayer />
+            </div>
+            <Separator className="mb-2" />
+          </>
+        )}
         <UserNav user={user} logout={logout} />
       </SidebarFooter>
 

src/components/player/CompactPlayer.tsx

@@ -0,0 +1,237 @@
+import { useState, useEffect, useCallback } from 'react'
+import { Button } from '@/components/ui/button'
+import { Progress } from '@/components/ui/progress'
+import { 
+  Play, 
+  Pause, 
+  SkipBack, 
+  SkipForward, 
+  Volume2, 
+  VolumeX,
+  Music,
+  Maximize2
+} from 'lucide-react'
+import { playerService, type PlayerState, type MessageResponse } from '@/lib/api/services/player'
+import { filesService } from '@/lib/api/services/files'
+import { playerEvents, PLAYER_EVENTS } from '@/lib/events'
+import { toast } from 'sonner'
+import { cn } from '@/lib/utils'
+import { formatDuration } from '@/utils/format-duration'
+
+interface CompactPlayerProps {
+  className?: string
+}
+
+export function CompactPlayer({ className }: CompactPlayerProps) {
+  const [state, setState] = useState<PlayerState>({
+    status: 'stopped',
+    mode: 'continuous',
+    volume: 80,
+    position: 0
+  })
+  const [isLoading, setIsLoading] = useState(false)
+
+  // Load initial state
+  useEffect(() => {
+    const loadState = async () => {
+      try {
+        const initialState = await playerService.getState()
+        setState(initialState)
+      } catch (error) {
+        console.error('Failed to load player state:', error)
+      }
+    }
+    loadState()
+  }, [])
+
+  // Listen for player state updates
+  useEffect(() => {
+    const handlePlayerState = (newState: PlayerState) => {
+      setState(newState)
+    }
+
+    playerEvents.on(PLAYER_EVENTS.PLAYER_STATE, handlePlayerState)
+
+    return () => {
+      playerEvents.off(PLAYER_EVENTS.PLAYER_STATE, handlePlayerState)
+    }
+  }, [])
+
+  const executeAction = useCallback(async (action: () => Promise<void | MessageResponse>, actionName: string) => {
+    setIsLoading(true)
+    try {
+      await action()
+    } catch (error) {
+      console.error(`Failed to ${actionName}:`, error)
+      toast.error(`Failed to ${actionName}`)
+    } finally {
+      setIsLoading(false)
+    }
+  }, [])
+
+  const handlePlayPause = useCallback(() => {
+    if (state.status === 'playing') {
+      executeAction(playerService.pause, 'pause')
+    } else {
+      executeAction(playerService.play, 'play')
+    }
+  }, [state.status, executeAction])
+
+  const handlePrevious = useCallback(() => {
+    executeAction(playerService.previous, 'go to previous track')
+  }, [executeAction])
+
+  const handleNext = useCallback(() => {
+    executeAction(playerService.next, 'go to next track')
+  }, [executeAction])
+
+  const handleVolumeToggle = useCallback(() => {
+    if (state.volume === 0) {
+      executeAction(() => playerService.setVolume(50), 'unmute')
+    } else {
+      executeAction(() => playerService.setVolume(0), 'mute')
+    }
+  }, [state.volume, executeAction])
+
+  // Don't show if no current sound
+  if (!state.current_sound) {
+    return null
+  }
+
+  return (
+    <div className={cn("w-full", className)}>
+      {/* Collapsed state - only play/pause button */}
+      <div className="group-data-[collapsible=icon]:flex group-data-[collapsible=icon]:justify-center hidden">
+        <Button
+          size="sm"
+          variant="ghost"
+          onClick={handlePlayPause}
+          disabled={isLoading}
+          className="h-8 w-8 p-0"
+          title={state.status === 'playing' ? 'Pause' : 'Play'}
+        >
+          {state.status === 'playing' ? (
+            <Pause className="h-4 w-4" />
+          ) : (
+            <Play className="h-4 w-4" />
+          )}
+        </Button>
+      </div>
+
+      {/* Expanded state - full player */}
+      <div className="group-data-[collapsible=icon]:hidden">
+        {/* Track Info */}
+        <div className="flex items-center gap-2 mb-3 px-1">
+          <div className="flex-shrink-0 w-8 h-8 bg-muted rounded flex items-center justify-center overflow-hidden">
+            {state.current_sound?.thumbnail ? (
+              <img 
+                src={filesService.getThumbnailUrl(state.current_sound.id)} 
+                alt={state.current_sound.name}
+                className="w-full h-full object-cover"
+                onError={(e) => {
+                  // Hide image and show music icon if thumbnail fails to load
+                  const target = e.target as HTMLImageElement
+                  target.style.display = 'none'
+                  const musicIcon = target.nextElementSibling as HTMLElement
+                  if (musicIcon) musicIcon.style.display = 'block'
+                }}
+              />
+            ) : null}
+            <Music 
+              className={cn(
+                "h-4 w-4 text-muted-foreground",
+                state.current_sound?.thumbnail ? "hidden" : "block"
+              )} 
+            />
+          </div>
+          <div className="flex-1 min-w-0">
+            <div className="text-sm font-medium truncate">
+              {state.current_sound.name}
+            </div>
+            <div className="text-xs text-muted-foreground">
+              {state.playlist?.name}
+            </div>
+          </div>
+          <Button
+            size="sm"
+            variant="ghost"
+            onClick={() => {
+              const expandFn = (window as unknown as { __expandPlayerFromSidebar?: () => void }).__expandPlayerFromSidebar
+              if (expandFn) expandFn()
+            }}
+            className="h-6 w-6 p-0 flex-shrink-0"
+            title="Expand Player"
+          >
+            <Maximize2 className="h-3 w-3" />
+          </Button>
+        </div>
+
+        {/* Progress Bar */}
+        <div className="mb-3">
+          <Progress
+            value={(state.position / (state.duration || 1)) * 100}
+            className="w-full h-1"
+          />
+          <div className="flex justify-between text-xs text-muted-foreground mt-1">
+            <span>{formatDuration(state.position)}</span>
+            <span>{formatDuration(state.duration || 0)}</span>
+          </div>
+        </div>
+
+        {/* Controls */}
+        <div className="flex items-center justify-between gap-1">
+          <Button
+            size="sm"
+            variant="ghost"
+            onClick={handlePrevious}
+            disabled={isLoading}
+            className="h-7 w-7 p-0"
+            title="Previous"
+          >
+            <SkipBack className="h-3 w-3" />
+          </Button>
+          
+          <Button
+            size="sm"
+            variant="ghost"
+            onClick={handlePlayPause}
+            disabled={isLoading}
+            className="h-8 w-8 p-0"
+            title={state.status === 'playing' ? 'Pause' : 'Play'}
+          >
+            {state.status === 'playing' ? (
+              <Pause className="h-4 w-4" />
+            ) : (
+              <Play className="h-4 w-4" />
+            )}
+          </Button>
+
+          <Button
+            size="sm"
+            variant="ghost"
+            onClick={handleNext}
+            disabled={isLoading}
+            className="h-7 w-7 p-0"
+            title="Next"
+          >
+            <SkipForward className="h-3 w-3" />
+          </Button>
+
+          <Button
+            size="sm"
+            variant="ghost"
+            onClick={handleVolumeToggle}
+            className="h-7 w-7 p-0"
+            title={state.volume === 0 ? 'Unmute' : 'Mute'}
+          >
+            {state.volume === 0 ? (
+              <VolumeX className="h-3 w-3" />
+            ) : (
+              <Volume2 className="h-3 w-3" />
+            )}
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}

src/components/player/Player.tsx

@@ -34,20 +34,37 @@ import { cn } from '@/lib/utils'
 import { formatDuration } from '@/utils/format-duration'
 import { Playlist } from './Playlist'
 
-export type PlayerDisplayMode = 'normal' | 'minimized' | 'maximized'
+export type PlayerDisplayMode = 'normal' | 'minimized' | 'maximized' | 'sidebar'
 
 interface PlayerProps {
   className?: string
+  onPlayerModeChange?: (mode: PlayerDisplayMode) => void
 }
 
-export function Player({ className }: PlayerProps) {
+export function Player({ className, onPlayerModeChange }: PlayerProps) {
   const [state, setState] = useState<PlayerState>({
     status: 'stopped',
     mode: 'continuous',
     volume: 80,
     position: 0
   })
-  const [displayMode, setDisplayMode] = useState<PlayerDisplayMode>('normal')
+  const [displayMode, setDisplayMode] = useState<PlayerDisplayMode>(() => {
+    // Initialize from localStorage or default to 'normal'
+    if (typeof window !== 'undefined') {
+      const saved = localStorage.getItem('playerDisplayMode') as PlayerDisplayMode
+      return saved && ['normal', 'minimized', 'maximized', 'sidebar'].includes(saved) ? saved : 'normal'
+    }
+    return 'normal'
+  })
+  
+  // Notify parent when display mode changes and save to localStorage
+  useEffect(() => {
+    onPlayerModeChange?.(displayMode)
+    // Save to localStorage
+    if (typeof window !== 'undefined') {
+      localStorage.setItem('playerDisplayMode', displayMode)
+    }
+  }, [displayMode, onPlayerModeChange])
   const [showPlaylist, setShowPlaylist] = useState(false)
   const [isLoading, setIsLoading] = useState(false)
   const [isMuted, setIsMuted] = useState(false)
@@ -187,12 +204,18 @@ export function Player({ className }: PlayerProps) {
     }
   }
 
+  const expandFromSidebar = useCallback(() => {
+    setDisplayMode('normal')
+  }, [])
+
   const getPlayerPosition = () => {
     switch (displayMode) {
       case 'minimized':
         return 'fixed bottom-4 right-4 z-50'
       case 'maximized':
         return 'fixed inset-0 z-50 bg-background'
+      case 'sidebar':
+        return 'hidden' // Hidden when in sidebar mode
       default:
         return 'fixed bottom-4 right-4 z-50'
     }
@@ -263,9 +286,9 @@ export function Player({ className }: PlayerProps) {
           <Button
             size="sm"
             variant="ghost"
-            onClick={() => setDisplayMode('minimized')}
+            onClick={() => setDisplayMode('sidebar')}
             className="h-6 w-6 p-0 hover:bg-muted"
-            title="Minimize"
+            title="Minimize to Sidebar"
           >
             <Minimize2 className="h-3 w-3" />
           </Button>
@@ -682,6 +705,16 @@ export function Player({ className }: PlayerProps) {
     </div>
   )
 
+  // Expose expand function for external use
+  useEffect(() => {
+    // Store expand function globally so sidebar can access it
+    const windowWithExpand = window as unknown as { __expandPlayerFromSidebar?: () => void }
+    windowWithExpand.__expandPlayerFromSidebar = expandFromSidebar
+    return () => {
+      delete windowWithExpand.__expandPlayerFromSidebar
+    }
+  }, [expandFromSidebar])
+
   if (!state) return null
 
   return (