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 { Card, CardContent } from '@/components/ui/card';
-import { Button } from '@/components/ui/button';
-import { Play, Square, Plus, Clock, Weight } from 'lucide-react';
-import { toast } from 'sonner';
-import { apiService } from '@/services/api';
-import { AddUrlDialog } from '@/components/AddUrlDialog';
-import { useAddUrlShortcut } from '@/hooks/use-keyboard-shortcuts';
-import { formatDuration } from '@/lib/format-duration';
-import { cn } from '@/lib/utils';
-import NumberFlow from '@number-flow/react';
-import { formatSize } from '@/lib/format-size';
-import { useTheme } from 'next-themes';
+import { AddUrlDialog } from '@/components/AddUrlDialog'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent } from '@/components/ui/card'
+import { useAddUrlShortcut } from '@/hooks/use-keyboard-shortcuts'
+import { useTheme } from '@/hooks/use-theme'
+import { formatDuration } from '@/lib/format-duration'
+import { formatSize } from '@/lib/format-size'
+import { cn } from '@/lib/utils'
+import { apiService } from '@/services/api'
+import NumberFlow from '@number-flow/react'
+import { Clock, Play, Plus, Square, Weight } from 'lucide-react'
+import React, { useEffect, useState } from 'react'
+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;
-  name: string;
-  filename: string;
-  type: string;
-  duration: number;
-  size: number;
-  play_count: number;
-  is_normalized: boolean;
-  normalized_filename?: string;
+  id: number
+  name: string
+  filename: string
+  type: string
+  duration: number
+  size: number
+  play_count: number
+  is_normalized: boolean
+  normalized_filename?: string
 }
 
 interface SoundCardProps {
-  sound: Sound;
-  onPlay: (soundId: number) => void;
-  colorClasses: string;
+  sound: Sound
+  onPlay: (soundId: number) => void
+  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 [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-  const [searchTerm, setSearchTerm] = useState('');
-  const [addUrlDialogOpen, setAddUrlDialogOpen] = useState(false);
+  const [sounds, setSounds] = useState<Sound[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [searchTerm, setSearchTerm] = useState('')
+  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);
-      const response = await apiService.get('/api/soundboard/sounds?type=SDB');
-      const data = await response.json();
-      setSounds(data.sounds || []);
-    } catch (err) {
-      setError('Failed to load sounds');
-      toast.error('Failed to load sounds');
+      setLoading(true)
+      const response = await apiService.get('/api/soundboard/sounds?type=SDB')
+      const data = await response.json()
+      setSounds(data.sounds || [])
+    } catch {
+      setError('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`);
-    } catch (err) {
-      setError('Failed to play sound');
-      toast.error('Failed to play sound');
+      await apiService.post(`/api/soundboard/sounds/${soundId}/play`)
+    } catch {
+      setError('Failed to play sound')
+      toast.error('Failed to play sound')
     }
-  };
+  }
 
   const handleStopAll = async () => {
     try {
-      await apiService.post('/api/soundboard/stop-all');
-      toast.success('All sounds stopped');
-    } catch (err) {
-      setError('Failed to stop sounds');
-      toast.error('Failed to stop sounds');
+      await apiService.post('/api/soundboard/stop-all')
+      toast.success('All sounds stopped')
+    } catch {
+      setError('Failed to stop sounds')
+      toast.error('Failed to stop sounds')
     }
-  };
+  }
 
   const handleForceStopAll = async () => {
     try {
-      const response = await apiService.post('/api/soundboard/force-stop');
-      const data = await response.json();
-      toast.success(`Force stopped ${data.stopped_count} sound instances`);
-    } catch (err) {
-      setError('Failed to force stop sounds');
-      toast.error('Failed to force stop sounds');
+      const response = await apiService.post('/api/soundboard/force-stop')
+      const data = await response.json()
+      toast.success(`Force stopped ${data.stopped_count} sound instances`)
+    } catch {
+      setError('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 (
@@ -193,9 +197,9 @@ export function SoundboardPage() {
       <div className="flex items-center justify-between">
         <h1 className="text-2xl font-bold">Soundboard</h1>
         <div className="flex gap-2">
-          <Button 
-            onClick={() => setAddUrlDialogOpen(true)} 
-            variant="outline" 
+          <Button
+            onClick={() => setAddUrlDialogOpen(true)}
+            variant="outline"
             size="sm"
             title="Add URL (Ctrl+U)"
           >
@@ -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,16 +251,18 @@ 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>
       )}
 
       {/* Add URL Dialog */}
-      <AddUrlDialog 
-        open={addUrlDialogOpen} 
-        onOpenChange={setAddUrlDialogOpen} 
+      <AddUrlDialog
+        open={addUrlDialogOpen}
+        onOpenChange={setAddUrlDialogOpen}
       />
     </div>
-  );
-}
+  )
+}