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/compose/recording-overlay.tsx

@@ -1,16 +1,17 @@
-import { useEffect, useRef, useState } from "react";
-import { Paperclip } from "lucide-react";
-import type { RecordingMode } from "@/hooks/use-recording-mode";
-import { AudioLevelBars } from "@/components/audio/audio-level-bars";
-import { useAudioSource } from "@/components/audio/use-audio-source";
-import { AttachmentStrip } from "@/features/compose/attachment-strip";
-import type { PendingAttachment } from "@/features/compose/attachment-strip";
-import { cn } from "@/lib/utils";
-import { Button } from "@/components/ui/button";
-import { useComposeIntentStore } from "@/stores/compose-intent-store";
+import { useEffect, useRef, useState } from 'react';
+import { Paperclip } from 'lucide-react';
+import type { RecordingMode } from '@/hooks/use-recording-mode';
+import { AudioLevelBars } from '@/components/audio/audio-level-bars';
+import { useAudioSource } from '@/components/audio/use-audio-source';
+import { useObjectUrl } from '@/hooks/use-object-url';
+import { AttachmentStrip } from '@/features/compose/attachment-strip';
+import type { PendingAttachment } from '@/features/compose/attachment-strip';
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
+import { useComposeIntentStore } from '@/stores/compose-intent-store';
 
 interface RecordingOverlayProps {
-  step: "recording" | "reviewing";
+  step: 'recording' | 'reviewing';
   mediaStream: MediaStream | null;
   recordingMode: RecordingMode;
   reviewBlob: Blob | null;
@@ -29,7 +30,7 @@ interface RecordingOverlayProps {
   /** Mirror the video horizontally. Defaults to true (selfie-view for webcam). */
   mirror?: boolean;
   /** How video fills its container. Defaults to "cover". Use "contain" for screen recordings. */
-  objectFit?: "cover" | "contain";
+  objectFit?: 'cover' | 'contain';
 }
 
 function RecordingTimer() {
@@ -44,7 +45,7 @@ function RecordingTimer() {
 
   const minutes = Math.floor(elapsed / 60);
   const seconds = elapsed % 60;
-  const display = `${minutes}:${seconds.toString().padStart(2, "0")}`;
+  const display = `${minutes}:${seconds.toString().padStart(2, '0')}`;
 
   return (
     <div className="flex items-center gap-2">
@@ -58,30 +59,18 @@ function ReviewPlayback({
   blob,
   isVideo,
   mirror = true,
-  objectFit = "cover",
+  objectFit = 'cover',
 }: {
   blob: Blob;
   isVideo: boolean;
   mirror?: boolean;
-  objectFit?: "cover" | "contain";
+  objectFit?: 'cover' | 'contain';
 }) {
-  const urlRef = useRef<string | null>(null);
-  const [objectUrl, setObjectUrl] = useState<string | null>(null);
+  const objectUrl = useObjectUrl(blob);
   const audioElRef = useRef<HTMLAudioElement | null>(null);
   const [audioEl, setAudioEl] = useState<HTMLAudioElement | null>(null);
   const audioSource = useAudioSource(isVideo ? null : audioEl);
 
-  useEffect(() => {
-    const url = URL.createObjectURL(blob);
-    urlRef.current = url;
-    setObjectUrl(url);
-
-    return () => {
-      URL.revokeObjectURL(url);
-      urlRef.current = null;
-    };
-  }, [blob]);
-
   if (!objectUrl) return null;
 
   if (isVideo) {
@@ -91,7 +80,7 @@ function ReviewPlayback({
         autoPlay
         loop
         playsInline
-        className={`absolute inset-0 h-full w-full ${objectFit === "contain" ? "object-contain" : "object-cover"}${mirror ? " -scale-x-100" : ""}`}
+        className={`absolute inset-0 h-full w-full ${objectFit === 'contain' ? 'object-contain' : 'object-cover'}${mirror ? ' -scale-x-100' : ''}`}
       />
     );
   }
@@ -129,14 +118,14 @@ export function RecordingOverlay({
   isDragging,
   dropZoneProps,
   mirror = true,
-  objectFit = "cover",
+  objectFit = 'cover',
 }: RecordingOverlayProps) {
   const videoRef = useRef<HTMLVideoElement>(null);
   const recordingAudioSource = useAudioSource(mediaStream ?? null);
 
   // Set video srcObject for live preview
   useEffect(() => {
-    if (videoRef.current && mediaStream && recordingMode === "video") {
+    if (videoRef.current && mediaStream && recordingMode === 'video') {
       videoRef.current.srcObject = mediaStream;
     }
   }, [mediaStream, recordingMode]);
@@ -148,16 +137,16 @@ export function RecordingOverlay({
     return () => clearTimeout(timeout);
   }, [error, onClose]);
 
-  const isReviewing = step === "reviewing";
-  const isRecording = step === "recording";
+  const isReviewing = step === 'reviewing';
+  const isRecording = step === 'recording';
   const isLoading = isRecording && !mediaStream;
   const requestIntent = useComposeIntentStore((s) => s.request);
 
   return (
     <div
       className={cn(
-        "absolute inset-0 z-50 flex flex-col items-center justify-center bg-black/90",
-        isReviewing && isDragging && "ring-2 ring-inset ring-white/30",
+        'absolute inset-0 z-50 flex flex-col items-center justify-center bg-black/90',
+        isReviewing && isDragging && 'ring-2 ring-inset ring-white/30',
       )}
       {...(isReviewing ? dropZoneProps : {})}
     >
@@ -165,15 +154,15 @@ export function RecordingOverlay({
       {isLoading && (
         <div className="z-10 flex flex-col items-center gap-2">
           <span className="animate-pulse text-sm text-white/60">
-            {recordingMode === "video"
-              ? "Starting camera..."
-              : "Starting mic..."}
+            {recordingMode === 'video'
+              ? 'Starting camera...'
+              : 'Starting mic...'}
           </span>
         </div>
       )}
 
       {/* Camera preview (video mode, recording) */}
-      {isRecording && recordingMode === "video" && mediaStream && (
+      {isRecording && recordingMode === 'video' && mediaStream && (
         <video
           ref={videoRef}
           muted
@@ -187,7 +176,7 @@ export function RecordingOverlay({
       {isReviewing && reviewBlob && (
         <ReviewPlayback
           blob={reviewBlob}
-          isVideo={recordingMode === "video"}
+          isVideo={recordingMode === 'video'}
           mirror={mirror}
           objectFit={objectFit}
         />
@@ -221,28 +210,29 @@ export function RecordingOverlay({
         <div className="absolute bottom-4 z-10 flex items-center gap-4 text-sm text-white/50">
           <button
             type="button"
-            onClick={() => requestIntent("stop")}
+            onClick={() => requestIntent('stop')}
             className="cursor-pointer rounded transition-colors hover:text-white/80"
             title="Finish recording (or release `)"
           >
-            Release{" "}
+            Release{' '}
             <kbd className="rounded bg-white/10 px-1.5 py-0.5 font-mono text-xs">
               `
-            </kbd>{" "}
+            </kbd>{' '}
             to review
           </button>
           <button
             type="button"
-            onClick={() => requestIntent("cancel")}
+            onClick={() => requestIntent('cancel')}
             className="cursor-pointer rounded transition-colors hover:text-white/80"
             title="Discard recording (or press Esc / Q)"
           >
             <kbd className="rounded bg-white/10 px-1.5 py-0.5 font-mono text-xs">
               Esc
-            </kbd>{" or "}
+            </kbd>
+            {' or '}
             <kbd className="rounded bg-white/10 px-1.5 py-0.5 font-mono text-xs">
               Q
-            </kbd>{" "}
+            </kbd>{' '}
             to cancel
           </button>
         </div>
@@ -262,27 +252,28 @@ export function RecordingOverlay({
           <div className="flex items-center gap-4 text-sm text-white/50">
             <button
               type="button"
-              onClick={() => requestIntent("send")}
+              onClick={() => requestIntent('send')}
               className="cursor-pointer rounded transition-colors hover:text-white/80"
               title="Send (or press Enter)"
             >
               <kbd className="rounded bg-white/10 px-1.5 py-0.5 font-mono text-xs">
                 Enter
-              </kbd>{" "}
+              </kbd>{' '}
               next
             </button>
             <button
               type="button"
-              onClick={() => requestIntent("cancel")}
+              onClick={() => requestIntent('cancel')}
               className="cursor-pointer rounded transition-colors hover:text-white/80"
               title="Discard (or press Esc / Q)"
             >
               <kbd className="rounded bg-white/10 px-1.5 py-0.5 font-mono text-xs">
                 Esc
-              </kbd>{" or "}
+              </kbd>
+              {' or '}
               <kbd className="rounded bg-white/10 px-1.5 py-0.5 font-mono text-xs">
                 Q
-              </kbd>{" "}
+              </kbd>{' '}
               to cancel
             </button>
             <span>
@@ -299,17 +290,12 @@ export function RecordingOverlay({
                 attach
               </Button>
             </span>
-
           </div>
         </div>
       )}
 
       {/* Error state */}
-      {error && (
-        <div className="z-10 text-sm text-red-400">
-          {error}
-        </div>
-      )}
+      {error && <div className="z-10 text-sm text-red-400">{error}</div>}
     </div>
   );
 }