fix: recording mode not using shared state

js/src/features/compose/compose-overlay.tsx

@@ -1,7 +1,6 @@
 import { useCallback, useEffect, useEffectEvent, useRef, useState } from "react";
 import { useAuthStore } from "@/stores/auth-store";
 import { useCreateParticle, useCreateStreamParticle } from "@/hooks/use-create-particle";
-import { useRecordingMode } from "@/hooks/use-recording-mode";
 import { useRecorder } from "@/features/compose/use-recorder";
 import { particlePath } from "@/lib/particle-path";
 import type { ParticlePath } from "@/lib/particle-path";
@@ -9,6 +8,7 @@ import { RecordingOverlay } from "@/features/compose/recording-overlay";
 import { TextComposeStep } from "@/features/compose/text-compose-step";
 import { ConfigureStreamStep } from "@/features/compose/configure-stream-step";
 import { apiClient } from "@/api/client";
+import { useMediaSettingsStore } from "@/stores/media-settings-store";
 
 type ComposeStep = "idle" | "recording" | "reviewing" | "typing" | "configuring";
 
@@ -36,7 +36,7 @@ export function ComposeOverlay({
   const [reviewDurationMs, setReviewDurationMs] = useState(0);
   const [reviewMimeType, setReviewMimeType] = useState<string | null>(null);
 
-  const [recordingMode] = useRecordingMode();
+  const recordingMode = useMediaSettingsStore((s) => s.recordingMode);
   const userEmail = useAuthStore((s) => s.user?.email);
   const createParticle = useCreateParticle();
   const createStream = useCreateStreamParticle();

js/src/features/compose/controls-indicator.tsx

@@ -1,13 +1,14 @@
 import { Video, Mic } from "lucide-react";
-import { useRecordingMode } from "@/hooks/use-recording-mode";
 import { cn } from "@/lib/utils";
+import { useMediaSettingsStore } from "@/stores/media-settings-store";
 import { Button } from "@/components/ui/button";
 
 interface ControlsIndicatorProps {
   type: "reply" | "new";
 }
 export default function ControlsIndicator({ type }: ControlsIndicatorProps) {
-  const [recordingMode, setRecordingMode] = useRecordingMode();
+  const recordingMode = useMediaSettingsStore((s) => s.recordingMode);
+  const setRecordingMode = useMediaSettingsStore((s) => s.setRecordingMode);
 
   return (
     <div className="flex items-center gap-2 text-xs">

js/src/stores/media-settings-store.ts

@@ -0,0 +1,21 @@
+import { create } from "zustand";
+
+export type RecordingMode = "video" | "audio";
+
+const KEY = "llink:recording-mode";
+
+interface MediaSettingsState {
+  recordingMode: RecordingMode;
+  setRecordingMode: (mode: RecordingMode) => void;
+}
+
+export const useMediaSettingsStore = create<MediaSettingsState>((set) => ({
+  recordingMode: (() => {
+    const stored = localStorage.getItem(KEY);
+    return stored === "audio" ? "audio" : "video";
+  })(),
+  setRecordingMode: (mode) => {
+    localStorage.setItem(KEY, mode);
+    set({ recordingMode: mode });
+  },
+}));