feat: integrate sonner for toast notifications across multiple pages

src/pages/SoundboardPage.tsx

@@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
 import { Play, Square, Volume2 } from 'lucide-react';
+import { toast } from 'sonner';
 import { apiService } from '@/services/api';
 
 interface Sound {
@@ -87,6 +88,7 @@ export function SoundboardPage() {
       setSounds(data.sounds || []);
     } catch (err) {
       setError('Failed to load sounds');
+      toast.error('Failed to load sounds');
       console.error('Error fetching sounds:', err);
     } finally {
       setLoading(false);
@@ -104,6 +106,7 @@ export function SoundboardPage() {
       }, 1000);
     } catch (err) {
       setError('Failed to play sound');
+      toast.error('Failed to play sound');
       console.error('Error playing sound:', err);
       setPlayingSound(null);
     }
@@ -113,8 +116,10 @@ export function SoundboardPage() {
     try {
       await apiService.post('/api/soundboard/stop-all');
       setPlayingSound(null);
+      toast.success('All sounds stopped');
     } catch (err) {
       setError('Failed to stop sounds');
+      toast.error('Failed to stop sounds');
       console.error('Error stopping sounds:', err);
     }
   };
@@ -124,9 +129,10 @@ export function SoundboardPage() {
       const response = await apiService.post('/api/soundboard/force-stop');
       const data = await response.json();
       setPlayingSound(null);
-      alert(`Force stopped ${data.stopped_count} sound instances`);
+      toast.success(`Force stopped ${data.stopped_count} sound instances`);
     } catch (err) {
       setError('Failed to force stop sounds');
+      toast.error('Failed to force stop sounds');
       console.error('Error force stopping sounds:', err);
     }
   };