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/huddle_window/HuddleApp.tsx

@@ -42,7 +42,9 @@ export function HuddleApp() {
   if (!connection) {
     return (
       <div className="flex h-screen items-center justify-center bg-background text-foreground">
-        <p className="text-muted-foreground text-sm">Missing huddle connection data.</p>
+        <p className="text-muted-foreground text-sm">
+          Missing huddle connection data.
+        </p>
       </div>
     );
   }
@@ -67,7 +69,10 @@ function HuddleContent() {
   const room = useRoomContext();
   const [showPicker, setShowPicker] = useState(false);
   const [isSharing, setIsSharing] = useState(false);
-  const [widgetState, setWidgetState] = useState({ showChat: false, unreadMessages: 0 });
+  const [widgetState, setWidgetState] = useState({
+    showChat: false,
+    unreadMessages: 0,
+  });
 
   const tracks = useTracks(
     [
@@ -98,8 +103,13 @@ function HuddleContent() {
       screenShareTracks.some((t) => t.publication.isSubscribed) &&
       lastAutoPin.current === null
     ) {
-      layoutContext.pin.dispatch?.({ msg: 'set_pin', trackReference: screenShareTracks[0] });
-      lastAutoPin.current = { trackSid: screenShareTracks[0].publication.trackSid };
+      layoutContext.pin.dispatch?.({
+        msg: 'set_pin',
+        trackReference: screenShareTracks[0],
+      });
+      lastAutoPin.current = {
+        trackSid: screenShareTracks[0].publication.trackSid,
+      };
     } else if (
       lastAutoPin.current &&
       !screenShareTracks.some(
@@ -109,14 +119,14 @@ function HuddleContent() {
       layoutContext.pin.dispatch?.({ msg: 'clear_pin' });
       lastAutoPin.current = null;
     }
-  }, [
-    screenShareTracks.map((t) => `${t.publication.trackSid}_${t.publication.isSubscribed}`).join(),
-  ]);
+  }, [layoutContext.pin, screenShareTracks]);
 
   // Sync isSharing state with actual track state
   useEffect(() => {
     const onLocalTrackUnpublished = () => {
-      const pub = room.localParticipant.getTrackPublication(Track.Source.ScreenShare);
+      const pub = room.localParticipant.getTrackPublication(
+        Track.Source.ScreenShare,
+      );
       if (!pub) setIsSharing(false);
     };
     room.on(RoomEvent.LocalTrackUnpublished, onLocalTrackUnpublished);
@@ -125,6 +135,17 @@ function HuddleContent() {
     };
   }, [room]);
 
+  const stopScreenShare = useCallback(async () => {
+    const pub = room.localParticipant.getTrackPublication(
+      Track.Source.ScreenShare,
+    );
+    if (pub?.track) {
+      await room.localParticipant.unpublishTrack(pub.track.mediaStreamTrack);
+      pub.track.stop();
+    }
+    setIsSharing(false);
+  }, [room]);
+
   const handleScreenShare = useCallback(
     async (sourceId: string) => {
       setShowPicker(false);
@@ -145,24 +166,18 @@ function HuddleContent() {
         setIsSharing(true);
         videoTrack.onended = () => stopScreenShare();
       } catch (err) {
-        logError(err, { scope: "huddle.screenShare" });
+        logError(err, { scope: 'huddle.screenShare' });
       }
     },
-    [room],
+    [room, stopScreenShare],
   );
 
-  const stopScreenShare = useCallback(async () => {
-    const pub = room.localParticipant.getTrackPublication(Track.Source.ScreenShare);
-    if (pub?.track) {
-      await room.localParticipant.unpublishTrack(pub.track.mediaStreamTrack);
-      pub.track.stop();
-    }
-    setIsSharing(false);
-  }, [room]);
-
   return (
     <div className="lk-video-conference">
-      <LayoutContextProvider value={layoutContext} onWidgetChange={setWidgetState}>
+      <LayoutContextProvider
+        value={layoutContext}
+        onWidgetChange={setWidgetState}
+      >
         <div className="lk-video-conference-inner">
           {focusTrack ? (
             <div className="lk-focus-layout-wrapper">

js/desktop/src/huddle_window/renderer.tsx

@@ -5,5 +5,7 @@ import '@/styles/globals.css';
 
 initSentryRenderer();
 
-const root = createRoot(document.getElementById('root')!);
+const container = document.getElementById('root');
+if (!container) throw new Error('Root element #root not found');
+const root = createRoot(container);
 root.render(<HuddleApp />);