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

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>