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/particles/transcript-overlay.tsx

@@ -1,8 +1,8 @@
-import { useMemo, useRef } from "react";
-import type { Transcript } from "@/api/types";
+import { useMemo, useState } from 'react';
+import type { Transcript } from '@/api/types';
 
-type Sentence = Transcript["paragraphs"][number]["sentences"][number];
-type Word = Transcript["words"][number];
+type Sentence = Transcript['paragraphs'][number]['sentences'][number];
+type Word = Transcript['words'][number];
 
 const CHUNK_SIZE = 9;
 
@@ -41,42 +41,50 @@ export function TranscriptOverlay({
   const activeWord =
     activeWordIndex !== null ? transcript.words[activeWordIndex] : null;
 
-  // Remember the last spoken word so highlights hold during pauses
-  const lastSpokenWordRef = useRef<Word | null>(null);
-  if (activeWord) {
-    lastSpokenWordRef.current = activeWord;
+  // Remember the last spoken word so highlights hold during pauses.
+  const [lastSpokenWord, setLastSpokenWord] = useState<Word | null>(null);
+  if (activeWord && activeWord !== lastSpokenWord) {
+    setLastSpokenWord(activeWord);
   }
-  const highlightWord = activeWord ?? lastSpokenWordRef.current;
+  const highlightWord = activeWord ?? lastSpokenWord;
 
-  const lastChunkRef = useRef<Word[] | null>(null);
-
-  // Find which chunk contains the active word, holding the last one during pauses
-  const activeChunk = useMemo(() => {
-    if (activeWord) {
-      for (const chunk of chunks) {
-        if (chunk.some((w) => w.start === activeWord.start && w.end === activeWord.end)) {
-          lastChunkRef.current = chunk;
-          return chunk;
-        }
-      }
-    }
-    // No active word (speaker pausing) — hold the last chunk
-    if (lastChunkRef.current && chunks.some((c) => c === lastChunkRef.current)) {
-      return lastChunkRef.current;
-    }
-    // Sentence changed, last chunk no longer valid — use first chunk
-    const fallback = chunks[0] ?? null;
-    lastChunkRef.current = fallback;
-    return fallback;
+  // The chunk currently being spoken (null during a pause or if not found).
+  const spokenChunk = useMemo(() => {
+    if (!activeWord) return null;
+    return (
+      chunks.find((chunk) =>
+        chunk.some(
+          (w) => w.start === activeWord.start && w.end === activeWord.end,
+        ),
+      ) ?? null
+    );
   }, [chunks, activeWord]);
 
+  // Resolve which chunk to display: the spoken one, else hold the last one while
+  // it's still part of the current sentence, else fall back to the first chunk.
+  const [lastChunk, setLastChunk] = useState<Word[] | null>(null);
+  let activeChunk: Word[] | null;
+  if (spokenChunk) {
+    activeChunk = spokenChunk;
+  } else if (lastChunk && chunks.includes(lastChunk)) {
+    activeChunk = lastChunk;
+  } else {
+    activeChunk = chunks[0] ?? null;
+  }
+  if (activeChunk !== lastChunk) {
+    setLastChunk(activeChunk);
+  }
+
   if (!activeSentence || !activeChunk || activeChunk.length === 0) return null;
 
   return (
-    <div className={centered
-      ? "absolute inset-0 flex items-center justify-center px-6"
-      : "absolute bottom-15 left-0 right-0 flex justify-center px-6"
-    }>
+    <div
+      className={
+        centered
+          ? 'absolute inset-0 flex items-center justify-center px-6'
+          : 'absolute bottom-15 left-0 right-0 flex justify-center px-6'
+      }
+    >
       <p className="rounded-lg px-5 py-3 text-2xl text-center max-w-lg">
         {activeChunk.map((word, i) => {
           const isSpoken =
@@ -87,11 +95,11 @@ export function TranscriptOverlay({
               key={`${word.start}-${i}`}
               className={
                 isSpoken
-                  ? "text-white font-medium transition-colors duration-150"
-                  : "text-white/40 transition-colors duration-150"
+                  ? 'text-white font-medium transition-colors duration-150'
+                  : 'text-white/40 transition-colors duration-150'
               }
             >
-              {i > 0 ? " " : ""}
+              {i > 0 ? ' ' : ''}
               {word.word}
             </span>
           );