fix: persist auto-play setting

js/src/features/layout.tsx

@@ -2,7 +2,7 @@ import { WindowControls } from "@/components/window-controls";
 import { Button } from "@/components/ui/button";
 import { useNavigate, useParams } from "react-router-dom";
 import { Home, Settings, Users, Volume2, VolumeOff } from "lucide-react";
-import { Toggle } from "@/components/ui/toggle";
+import { Switch } from "@/components/ui/switch";
 import { useAutoplayStore } from "@/stores/autoplay-store";
 import {
   Breadcrumb,
@@ -17,7 +17,8 @@ import { useNetworks } from "@/hooks/use-networks";
 import { particlePath } from "@/lib/particle-path";
 import { useParticle } from "@/hooks/use-particle";
 import type { Particle } from "@/api/types";
-import { PropsWithChildren } from "react";
+import { PropsWithChildren, useCallback } from "react";
+import { toast } from "sonner";
 
 function getParticleDisplayName(particle: Particle): string {
   switch (particle.type) {
@@ -59,16 +60,24 @@ function AutoplayToggle() {
   const muted = useAutoplayStore((s) => s.muted);
   const toggleMuted = useAutoplayStore((s) => s.toggleMuted);
 
+  const handleToggle = useCallback(() => {
+    toggleMuted();
+    if (muted) {
+      toast.success("Auto-play enabled");
+    } else {
+      toast.info("Auto-play disabled");
+    }
+  }, [toggleMuted, muted]);
+
   return (
-    <Toggle
-      size="sm"
-      pressed={!muted}
-      onPressedChange={toggleMuted}
-      className="no-drag"
-      aria-label={muted ? "Unmute autoplay" : "Mute autoplay"}
-    >
-      {muted ? <VolumeOff className="size-3.5" /> : <Volume2 className="size-3.5" />}
-    </Toggle>
+    <div className="no-drag flex items-center gap-1.5">
+      {muted ? <VolumeOff className="size-3.5 text-muted-foreground" /> : <Volume2 className="size-3.5" />}
+      <Switch
+        checked={!muted}
+        onCheckedChange={handleToggle}
+        aria-label={muted ? "Unmute autoplay" : "Mute autoplay"}
+      />
+    </div>
   );
 }