Add Sonner-based notifications and UX polish

components/sound-toggle.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { Volume2, VolumeX } from "lucide-react";
+import { toast } from "sonner";
 
 import { useSound } from "@/components/sound-provider";
 import { Button, type ButtonProps } from "@/components/ui/button";
@@ -9,6 +10,8 @@ import { cn } from "@/lib/utils";
 type SoundToggleProps = {
   ariaLabel?: string;
   mutedAriaLabel?: string;
+  mutedToastLabel?: string;
+  unmutedToastLabel?: string;
   variant?: ButtonProps["variant"];
   className?: string;
   iconClassName?: string;
@@ -17,18 +20,25 @@ type SoundToggleProps = {
 export function SoundToggle({
   ariaLabel = "Mute sounds",
   mutedAriaLabel = "Unmute sounds",
+  mutedToastLabel = "Sound muted",
+  unmutedToastLabel = "Sound enabled",
   variant = "outline",
   className,
   iconClassName,
 }: SoundToggleProps) {
   const { isMuted, toggleMuted } = useSound();
 
+  const handleToggle = () => {
+    toggleMuted();
+    toast(isMuted ? unmutedToastLabel : mutedToastLabel);
+  };
+
   return (
     <Button
       type="button"
       variant={variant}
       size="icon"
-      onClick={toggleMuted}
+      onClick={handleToggle}
       aria-label={isMuted ? mutedAriaLabel : ariaLabel}
       aria-pressed={isMuted}
       className={cn("group cursor-pointer", className)}