feat: allow toggling eavesdropping

js/src/features/layout.tsx

@@ -1,7 +1,9 @@
 import { WindowControls } from "@/components/window-controls";
 import { Button } from "@/components/ui/button";
-import { Outlet, useLocation, useNavigate, useParams } from "react-router-dom";
-import { Home, Settings } from "lucide-react";
+import { useNavigate, useParams } from "react-router-dom";
+import { Home, Settings, Volume2, VolumeOff } from "lucide-react";
+import { Toggle } from "@/components/ui/toggle";
+import { useAutoplayStore } from "@/stores/autoplay-store";
 import {
   Breadcrumb,
   BreadcrumbItem,
@@ -53,6 +55,23 @@ function NetworkBreadcrumbContent({ networkId }: { networkId: string }) {
   );
 }
 
+function AutoplayToggle() {
+  const muted = useAutoplayStore((s) => s.muted);
+  const toggleMuted = useAutoplayStore((s) => s.toggleMuted);
+
+  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>
+  );
+}
+
 function TopBar() {
   const navigate = useNavigate();
   const { networkId, "*": rest } = useParams();
@@ -116,6 +135,8 @@ function TopBar() {
 
       <div className="flex-1" />
 
+      <AutoplayToggle />
+
       <Button
         variant="ghost"
         size="sm"