From 64226f76c19642cb4282510d5e5e38065400cff9 Mon Sep 17 00:00:00 2001
From: JSC <jschoisy@carea5.com>
Date: Tue, 19 Aug 2025 22:58:38 +0200
Subject: [PATCH] feat: add StopSoundsButton component to control sound
 playback in the sidebar

---
 src/components/AppSidebar.tsx           |  3 ++
 src/components/nav/StopSoundsButton.tsx | 44 +++++++++++++++++++++++++
 2 files changed, 47 insertions(+)
 create mode 100644 src/components/nav/StopSoundsButton.tsx

diff --git a/src/components/AppSidebar.tsx b/src/components/AppSidebar.tsx
index d57abb8..ddd01a4 100644
--- a/src/components/AppSidebar.tsx
+++ b/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} />
diff --git a/src/components/nav/StopSoundsButton.tsx b/src/components/nav/StopSoundsButton.tsx
new file mode 100644
index 0000000..bc13dc0
--- /dev/null
+++ b/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>
+  )
+}
\ No newline at end of file