infra: add linting and formatting for js projects (#230)

* wip

* wip

* wip

* format

* wip(mobile): lint and format

* cleanup

* nits

* nits

* idiomatic react

* nit

* format all root files

js/desktop/src/features/settings/audio-video-settings-page.tsx

@@ -1,30 +1,30 @@
-import { useEffect, useMemo, useRef, useState } from "react";
-import { useNavigate } from "react-router-dom";
-import { ArrowLeft, VideoOff } from "lucide-react";
-import { WindowControls } from "@/components/window-controls";
-import { Button } from "@/components/ui/button";
-import { ScrollArea } from "@/components/ui/scroll-area";
-import { Muted } from "@/components/ui/typography";
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { ArrowLeft, VideoOff } from 'lucide-react';
+import { WindowControls } from '@/components/window-controls';
+import { Button } from '@/components/ui/button';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { Muted } from '@/components/ui/typography';
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "@/components/ui/select";
-import { AudioLevelBars } from "@/components/audio/audio-level-bars";
-import { useAudioSource } from "@/components/audio/use-audio-source";
-import { useMediaDevices } from "@/hooks/use-media-devices";
+} from '@/components/ui/select';
+import { AudioLevelBars } from '@/components/audio/audio-level-bars';
+import { useAudioSource } from '@/components/audio/use-audio-source';
+import { useMediaDevices } from '@/hooks/use-media-devices';
 import {
   resolveEffectiveDeviceId,
   isSavedDeviceAvailable,
-} from "@/hooks/use-effective-device-id";
+} from '@/hooks/use-effective-device-id';
 import {
   useMediaDevicesStore,
   type SavedDevice,
-} from "@/stores/media-devices-store";
+} from '@/stores/media-devices-store';
 
-const SYSTEM_DEFAULT = "__system_default__";
+const SYSTEM_DEFAULT = '__system_default__';
 
 function usePreviewStream(
   enabled: boolean,
@@ -34,12 +34,19 @@ function usePreviewStream(
 ): { stream: MediaStream | null; error: string | null } {
   const [stream, setStream] = useState<MediaStream | null>(null);
   const [error, setError] = useState<string | null>(null);
+  const [prevEnabled, setPrevEnabled] = useState(enabled);
 
-  useEffect(() => {
+  // Clear the preview when disabled
+  if (enabled !== prevEnabled) {
+    setPrevEnabled(enabled);
     if (!enabled) {
       setStream(null);
-      return;
+      setError(null);
     }
+  }
+
+  useEffect(() => {
+    if (!enabled) return;
 
     let cancelled = false;
     let active: MediaStream | null = null;
@@ -67,7 +74,9 @@ function usePreviewStream(
       .catch((err: unknown) => {
         if (cancelled) return;
         setStream(null);
-        setError(err instanceof Error ? err.message : "Unable to access devices");
+        setError(
+          err instanceof Error ? err.message : 'Unable to access devices',
+        );
       });
 
     return () => {
@@ -81,7 +90,7 @@ function usePreviewStream(
 
 function deviceLabel(d: MediaDeviceInfo, index: number): string {
   if (d.label) return d.label;
-  const kind = d.kind === "audioinput" ? "Microphone" : "Camera";
+  const kind = d.kind === 'audioinput' ? 'Microphone' : 'Camera';
   return `${kind} ${index + 1}`;
 }
 
@@ -207,7 +216,7 @@ export default function AudioVideoSettingsPage() {
   );
 
   const cameraAvailable = videoInputs.length > 0;
-  const permissionGranted = permissionState === "granted";
+  const permissionGranted = permissionState === 'granted';
 
   const { stream, error: previewError } = usePreviewStream(
     permissionGranted,
@@ -280,7 +289,7 @@ export default function AudioVideoSettingsPage() {
               saved={camera}
               onChange={setCamera}
               placeholder={
-                videoInputs.length === 0 ? "No cameras found" : "System default"
+                videoInputs.length === 0 ? 'No cameras found' : 'System default'
               }
             />
             <CameraPreview stream={permissionGranted ? stream : null} />
@@ -291,7 +300,7 @@ export default function AudioVideoSettingsPage() {
             )}
           </div>
 
-          {(previewError || (deviceError && permissionState === "denied")) && (
+          {(previewError || (deviceError && permissionState === 'denied')) && (
             <Muted className="text-destructive text-[11px]">
               {previewError ?? deviceError}
             </Muted>