feat: implement new compact player components for controls, progress, and track info

src/components/player/CompactPlayerTrackInfo.tsx

@@ -0,0 +1,62 @@
+import { Button } from '@/components/ui/button'
+import { filesService } from '@/lib/api/services/files'
+import type { PlayerState } from '@/lib/api/services/player'
+import { cn } from '@/lib/utils'
+import { Maximize2, Music } from 'lucide-react'
+import { memo } from 'react'
+
+interface CompactPlayerTrackInfoProps {
+  currentSound: PlayerState['current_sound']
+  playlistName?: string
+  onExpand: () => void
+}
+
+export const CompactPlayerTrackInfo = memo(function CompactPlayerTrackInfo({
+  currentSound,
+  playlistName,
+  onExpand,
+}: CompactPlayerTrackInfoProps) {
+  return (
+    <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">
+        {currentSound?.thumbnail ? (
+          <img
+            src={filesService.getThumbnailUrl(currentSound.id)}
+            alt={currentSound.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',
+            currentSound?.thumbnail ? 'hidden' : 'block',
+          )}
+        />
+      </div>
+      <div className="flex-1 min-w-0">
+        <div className="text-sm font-medium truncate">
+          {currentSound?.name || 'No track selected'}
+        </div>
+        <div className="text-xs text-muted-foreground">
+          {playlistName}
+        </div>
+      </div>
+      <Button
+        size="sm"
+        variant="ghost"
+        onClick={onExpand}
+        className="h-6 w-6 p-0 flex-shrink-0"
+        title="Expand Player"
+      >
+        <Maximize2 className="h-3 w-3" />
+      </Button>
+    </div>
+  )
+})