From f3ddceecfce14c0f6370edb9c0a52216d8437e50 Mon Sep 17 00:00:00 2001
From: talksik <patel.arjun50@gmail.com>
Date: Wed, 25 Mar 2026 16:03:14 -0700
Subject: [PATCH] fix: persist auto-play setting

---
 js/src/components/ui/switch.tsx | 31 +++++++++++++++++++++++++++++++
 js/src/features/layout.tsx      | 31 ++++++++++++++++++++-----------
 js/src/stores/autoplay-store.ts | 22 +++++++++++++++++++++-
 3 files changed, 72 insertions(+), 12 deletions(-)
 create mode 100644 js/src/components/ui/switch.tsx

diff --git a/js/src/components/ui/switch.tsx b/js/src/components/ui/switch.tsx
new file mode 100644
index 0000000..877dbc8
--- /dev/null
+++ b/js/src/components/ui/switch.tsx
@@ -0,0 +1,31 @@
+import * as React from "react"
+import { Switch as SwitchPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Switch({
+  className,
+  size = "default",
+  ...props
+}: React.ComponentProps<typeof SwitchPrimitive.Root> & {
+  size?: "sm" | "default"
+}) {
+  return (
+    <SwitchPrimitive.Root
+      data-slot="switch"
+      data-size={size}
+      className={cn(
+        "peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80 data-disabled:cursor-not-allowed data-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        data-slot="switch-thumb"
+        className="pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] dark:data-checked:bg-primary-foreground group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 dark:data-unchecked:bg-foreground"
+      />
+    </SwitchPrimitive.Root>
+  )
+}
+
+export { Switch }
diff --git a/js/src/features/layout.tsx b/js/src/features/layout.tsx
index 12f99f8..b8903b6 100644
--- a/js/src/features/layout.tsx
+++ b/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>
   );
 }
 
diff --git a/js/src/stores/autoplay-store.ts b/js/src/stores/autoplay-store.ts
index b974e5f..5d4e34d 100644
--- a/js/src/stores/autoplay-store.ts
+++ b/js/src/stores/autoplay-store.ts
@@ -3,6 +3,24 @@ import type { Particle } from "@/api/types";
 
 type MediaParticle = Extract<Particle, { type: "media" }>;
 
+const STORAGE_KEY = "llink:autoplay-muted";
+
+function loadMuted(): boolean {
+  try {
+    return localStorage.getItem(STORAGE_KEY) === "true";
+  } catch {
+    return false;
+  }
+}
+
+function saveMuted(muted: boolean) {
+  try {
+    localStorage.setItem(STORAGE_KEY, String(muted));
+  } catch {
+    // Storage unavailable
+  }
+}
+
 interface AutoplayState {
   /** The media particle currently being autoplayed, null when idle */
   activeParticle: MediaParticle | null;
@@ -21,7 +39,7 @@ interface AutoplayState {
 export const useAutoplayStore = create<AutoplayState>((set, get) => ({
   activeParticle: null,
   streamId: null,
-  muted: false,
+  muted: loadMuted(),
   play: (particle, streamId) => {
     if (get().muted) return;
     set({ activeParticle: particle, streamId });
@@ -32,8 +50,10 @@ export const useAutoplayStore = create<AutoplayState>((set, get) => ({
     // If muting, also stop any current playback
     if (!wasMuted) {
       set({ muted: true, activeParticle: null, streamId: null });
+      saveMuted(true);
     } else {
       set({ muted: false });
+      saveMuted(false);
     }
   },
 }));