refactor: reorganize imports and improve code formatting in SoundboardPage component

src/pages/SoundboardPage.tsx

@@ -1,16 +1,16 @@
-import React, { useState, useEffect } from 'react';
+import { AddUrlDialog } from '@/components/AddUrlDialog'
-import { Card, CardContent } from '@/components/ui/card';
+import { Button } from '@/components/ui/button'
-import { Button } from '@/components/ui/button';
+import { Card, CardContent } from '@/components/ui/card'
-import { Play, Square, Plus, Clock, Weight } from 'lucide-react';
+import { useAddUrlShortcut } from '@/hooks/use-keyboard-shortcuts'
-import { toast } from 'sonner';
+import { useTheme } from '@/hooks/use-theme'
-import { apiService } from '@/services/api';
+import { formatDuration } from '@/lib/format-duration'
-import { AddUrlDialog } from '@/components/AddUrlDialog';
+import { formatSize } from '@/lib/format-size'
-import { useAddUrlShortcut } from '@/hooks/use-keyboard-shortcuts';
+import { cn } from '@/lib/utils'
-import { formatDuration } from '@/lib/format-duration';
+import { apiService } from '@/services/api'
-import { cn } from '@/lib/utils';
+import NumberFlow from '@number-flow/react'
-import NumberFlow from '@number-flow/react';
+import { Clock, Play, Plus, Square, Weight } from 'lucide-react'
-import { formatSize } from '@/lib/format-size';
+import React, { useEffect, useState } from 'react'
-import { useTheme } from 'next-themes';
+import { toast } from 'sonner'
 
 const lightModeColors = [
   'bg-red-600/30 hover:bg-red-600/40 text-red-900 border-red-600/20',
@@ -43,33 +43,37 @@ const darkModeColors = [
 ]
 
 interface Sound {
-  id: number;
+  id: number
-  name: string;
+  name: string
-  filename: string;
+  filename: string
-  type: string;
+  type: string
-  duration: number;
+  duration: number
-  size: number;
+  size: number
-  play_count: number;
+  play_count: number
-  is_normalized: boolean;
+  is_normalized: boolean
-  normalized_filename?: string;
+  normalized_filename?: string
 }
 
 interface SoundCardProps {
-  sound: Sound;
+  sound: Sound
-  onPlay: (soundId: number) => void;
+  onPlay: (soundId: number) => void
-  colorClasses: string;
+  colorClasses: string
 }
 
-const SoundCard: React.FC<SoundCardProps> = ({ sound, onPlay, colorClasses }) => {
+const SoundCard: React.FC<SoundCardProps> = ({
+  sound,
+  onPlay,
+  colorClasses,
+}) => {
   const handlePlay = () => {
-    onPlay(sound.id);
+    onPlay(sound.id)
-  };
+  }
 
   return (
     <Card
       onClick={handlePlay}
       className={cn(
-        'py-2 transition-all duration-100 border-0 shadow-sm cursor-pointer active:scale-95',
+        'py-2 transition-all duration-100 shadow-sm cursor-pointer active:scale-95',
         colorClasses,
       )}
     >
@@ -91,33 +95,33 @@ const SoundCard: React.FC<SoundCardProps> = ({ sound, onPlay, colorClasses }) =>
         </div>
       </CardContent>
     </Card>
-  );
+  )
-};
+}
 
 export function SoundboardPage() {
-  const [sounds, setSounds] = useState<Sound[]>([]);
+  const [sounds, setSounds] = useState<Sound[]>([])
-  const [loading, setLoading] = useState(true);
+  const [loading, setLoading] = useState(true)
-  const [error, setError] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null)
-  const [searchTerm, setSearchTerm] = useState('');
+  const [searchTerm, setSearchTerm] = useState('')
-  const [addUrlDialogOpen, setAddUrlDialogOpen] = useState(false);
+  const [addUrlDialogOpen, setAddUrlDialogOpen] = useState(false)
   const [currentColors, setCurrentColors] = useState<string[]>(lightModeColors)
 
   // Setup keyboard shortcut for CTRL+U
-  useAddUrlShortcut(() => setAddUrlDialogOpen(true));
+  useAddUrlShortcut(() => setAddUrlDialogOpen(true))
 
   useEffect(() => {
-    fetchSounds();
+    fetchSounds()
-  }, []);
+  }, [])
 
-  const { resolvedTheme } = useTheme()
+  const { theme } = useTheme()
 
   useEffect(() => {
-    if (resolvedTheme === 'dark') {
+    if (theme === 'dark') {
       setCurrentColors(darkModeColors)
     } else {
       setCurrentColors(lightModeColors)
     }
-  }, [resolvedTheme])
+  }, [theme])
 
   const getSoundColor = (soundIdx: number) => {
     const index = soundIdx % currentColors.length
@@ -126,58 +130,58 @@ export function SoundboardPage() {
 
   const fetchSounds = async () => {
     try {
-      setLoading(true);
+      setLoading(true)
-      const response = await apiService.get('/api/soundboard/sounds?type=SDB');
+      const response = await apiService.get('/api/soundboard/sounds?type=SDB')
-      const data = await response.json();
+      const data = await response.json()
-      setSounds(data.sounds || []);
+      setSounds(data.sounds || [])
-    } catch (err) {
+    } catch {
-      setError('Failed to load sounds');
+      setError('Failed to load sounds')
-      toast.error('Failed to load sounds');
+      toast.error('Failed to load sounds')
     } finally {
-      setLoading(false);
+      setLoading(false)
     }
-  };
+  }
 
   const handlePlaySound = async (soundId: number) => {
     try {
-      await apiService.post(`/api/soundboard/sounds/${soundId}/play`);
+      await apiService.post(`/api/soundboard/sounds/${soundId}/play`)
-    } catch (err) {
+    } catch {
-      setError('Failed to play sound');
+      setError('Failed to play sound')
-      toast.error('Failed to play sound');
+      toast.error('Failed to play sound')
     }
-  };
+  }
 
   const handleStopAll = async () => {
     try {
-      await apiService.post('/api/soundboard/stop-all');
+      await apiService.post('/api/soundboard/stop-all')
-      toast.success('All sounds stopped');
+      toast.success('All sounds stopped')
-    } catch (err) {
+    } catch {
-      setError('Failed to stop sounds');
+      setError('Failed to stop sounds')
-      toast.error('Failed to stop sounds');
+      toast.error('Failed to stop sounds')
     }
-  };
+  }
 
   const handleForceStopAll = async () => {
     try {
-      const response = await apiService.post('/api/soundboard/force-stop');
+      const response = await apiService.post('/api/soundboard/force-stop')
-      const data = await response.json();
+      const data = await response.json()
-      toast.success(`Force stopped ${data.stopped_count} sound instances`);
+      toast.success(`Force stopped ${data.stopped_count} sound instances`)
-    } catch (err) {
+    } catch {
-      setError('Failed to force stop sounds');
+      setError('Failed to force stop sounds')
-      toast.error('Failed to force stop sounds');
+      toast.error('Failed to force stop sounds')
     }
-  };
+  }
 
   const filteredSounds = sounds.filter(sound =>
-    sound.name.toLowerCase().includes(searchTerm.toLowerCase())
+    sound.name.toLowerCase().includes(searchTerm.toLowerCase()),
-  );
+  )
 
   if (loading) {
     return (
       <div className="flex justify-center items-center h-64">
         <div className="text-lg">Loading sounds...</div>
       </div>
-    );
+    )
   }
 
   if (error) {
@@ -185,7 +189,7 @@ export function SoundboardPage() {
       <div className="flex justify-center items-center h-64">
         <div className="text-lg text-red-500">{error}</div>
       </div>
-    );
+    )
   }
 
   return (
@@ -206,7 +210,12 @@ export function SoundboardPage() {
             <Square size={16} className="mr-2" />
             Stop All
           </Button>
-          <Button onClick={handleForceStopAll} variant="outline" size="sm" className="text-red-600">
+          <Button
+            onClick={handleForceStopAll}
+            variant="outline"
+            size="sm"
+            className="text-red-600"
+          >
             <Square size={16} className="mr-2" />
             Force Stop
           </Button>
@@ -219,7 +228,7 @@ export function SoundboardPage() {
             type="text"
             placeholder="Search sounds..."
             value={searchTerm}
-            onChange={(e) => setSearchTerm(e.target.value)}
+            onChange={e => setSearchTerm(e.target.value)}
             className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
           />
         </div>
@@ -228,7 +237,7 @@ export function SoundboardPage() {
         </div>
       </div>
 
-      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4">
+      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-3">
         {filteredSounds.map((sound, idx) => (
           <SoundCard
             key={sound.id}
@@ -242,7 +251,9 @@ export function SoundboardPage() {
       {filteredSounds.length === 0 && (
         <div className="text-center py-12">
           <div className="text-lg text-muted-foreground">
-            {searchTerm ? 'No sounds found matching your search.' : 'No sounds available.'}
+            {searchTerm
+              ? 'No sounds found matching your search.'
+              : 'No sounds available.'}
           </div>
         </div>
       )}
@@ -253,5 +264,5 @@ export function SoundboardPage() {
         onOpenChange={setAddUrlDialogOpen}
       />
     </div>
-  );
+  )
 }