feat: add StopSoundsButton component to control sound playback in the sidebar

src/components/AppSidebar.tsx

@@ -18,6 +18,7 @@ import {
 import { CreditsNav } from './nav/CreditsNav'
 import { NavGroup } from './nav/NavGroup'
 import { NavItem } from './nav/NavItem'
+import { StopSoundsButton } from './nav/StopSoundsButton'
 import { UserNav } from './nav/UserNav'
 import { CompactPlayer } from './player/CompactPlayer'
 
@@ -67,6 +68,8 @@ export function AppSidebar({ showCompactPlayer = false }: AppSidebarProps) {
             <Separator className="mb-1 group-data-[collapsible=icon]:hidden" />
           </>
         )}
+        <StopSoundsButton />
+        <Separator className="mb-1 group-data-[collapsible=icon]:hidden" />
         <CreditsNav user={user} />
         <Separator className="mb-1 group-data-[collapsible=icon]:hidden" />
         <UserNav user={user} logout={logout} />

src/components/nav/StopSoundsButton.tsx

@@ -0,0 +1,44 @@
+import { useState } from 'react'
+import { Square } from 'lucide-react'
+import { SidebarMenu, SidebarMenuButton, SidebarMenuItem } from '@/components/ui/sidebar'
+import { soundsService } from '@/lib/api/services/sounds'
+import { toast } from 'sonner'
+
+export function StopSoundsButton() {
+  const [isLoading, setIsLoading] = useState(false)
+
+  const handleStopSounds = async () => {
+    setIsLoading(true)
+    try {
+      await soundsService.stopSounds()
+      toast.success('All sounds stopped')
+    } catch (error) {
+      toast.error(
+        `Failed to stop sounds: ${error instanceof Error ? error.message : 'Unknown error'}`
+      )
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  const tooltipText = isLoading ? 'Stopping sounds...' : 'Stop All Sounds'
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <SidebarMenuButton
+          size="lg"
+          onClick={handleStopSounds}
+          disabled={isLoading}
+          tooltip={tooltipText}
+          className="group-data-[collapsible=icon]:justify-center text-red-600 hover:text-red-700 hover:bg-red-50 dark:text-red-400 dark:hover:text-red-300 dark:hover:bg-red-950/50"
+        >
+          <Square className="h-5 w-5 fill-current" />
+          <span className="font-semibold group-data-[collapsible=icon]:hidden">
+            {isLoading ? 'Stopping...' : 'Stop All Sounds'}
+          </span>
+        </SidebarMenuButton>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  )
+}