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/stream-members-overlay.tsx

@@ -1,24 +1,24 @@
-import { useCallback, useEffect, useMemo } from "react";
-import { createPortal } from "react-dom";
-import { X, UserPlus, Globe, Users, Lock } from "lucide-react";
-import { Avatar, AvatarFallback } from "@/components/ui/avatar";
-import { ScrollArea } from "@/components/ui/scroll-area";
+import { useCallback, useEffect, useMemo } from 'react';
+import { createPortal } from 'react-dom';
+import { X, UserPlus, Globe, Users, Lock } from 'lucide-react';
+import { Avatar, AvatarFallback } from '@/components/ui/avatar';
+import { ScrollArea } from '@/components/ui/scroll-area';
 import {
   buildCustomVisibility,
   buildNetworkVisibility,
   parseVisibleTo,
-} from "@/lib/stream-visibility";
-import { updateParticleVisibleTo } from "@/lib/firestore-particles";
-import { particlePath, toFirestoreDocPath } from "@/lib/particle-path";
-import { useNetwork } from "@/hooks/use-networks";
-import { cn, getInitials } from "@/lib/utils";
-import { resolveHumanDisplay } from "@/lib/humans";
-import type { Particle } from "@/api/types";
-import { useSuspendPlayback } from "@/hooks/use-suspend-playback";
+} from '@/lib/stream-visibility';
+import { updateParticleVisibleTo } from '@/lib/firestore-particles';
+import { particlePath, toFirestoreDocPath } from '@/lib/particle-path';
+import { useNetwork } from '@/hooks/use-networks';
+import { cn, getInitials } from '@/lib/utils';
+import { resolveHumanDisplay } from '@/lib/humans';
+import type { Particle } from '@/api/types';
+import { useSuspendPlayback } from '@/hooks/use-suspend-playback';
 
 interface StreamMembersOverlayProps {
   networkId: string;
-  streamParticle: Particle & { type: "stream" };
+  streamParticle: Particle & { type: 'stream' };
   isCreator: boolean;
   onClose: () => void;
 }
@@ -29,12 +29,15 @@ export function StreamMembersOverlay({
   isCreator,
   onClose,
 }: StreamMembersOverlayProps) {
-  useSuspendPlayback(true, "stream-members");
+  useSuspendPlayback(true, 'stream-members');
 
   const network = useNetwork(networkId);
   const humans = network?.humans ?? [];
   const creatorId = streamParticle.created_by_human_id;
-  const visibility = parseVisibleTo(streamParticle.visible_to, networkId);
+  const visibility = useMemo(
+    () => parseVisibleTo(streamParticle.visible_to, networkId),
+    [streamParticle.visible_to, networkId],
+  );
 
   const docPath = useMemo(
     () => toFirestoreDocPath(particlePath(networkId, [streamParticle.id])),
@@ -42,7 +45,7 @@ export function StreamMembersOverlay({
   );
 
   const memberIds =
-    visibility.mode === "network"
+    visibility.mode === 'network'
       ? humans.map((h) => h.id)
       : visibility.humanIds;
   const memberSet = new Set(memberIds);
@@ -58,7 +61,7 @@ export function StreamMembersOverlay({
 
   const removeMember = useCallback(
     (id: string) => {
-      if (visibility.mode !== "custom") return;
+      if (visibility.mode !== 'custom') return;
       if (id === creatorId) return;
       const next = visibility.humanIds.filter((x) => x !== id);
       if (next.length === 0) return;
@@ -69,7 +72,7 @@ export function StreamMembersOverlay({
 
   const addMember = useCallback(
     (id: string) => {
-      if (visibility.mode !== "custom") return;
+      if (visibility.mode !== 'custom') return;
       void updateParticleVisibleTo(
         docPath,
         buildCustomVisibility([...visibility.humanIds, id]),
@@ -80,14 +83,15 @@ export function StreamMembersOverlay({
 
   useEffect(() => {
     const handler = (e: KeyboardEvent) => {
-      if (e.key === "Escape") {
+      if (e.key === 'Escape') {
         e.preventDefault();
         e.stopPropagation();
         onClose();
       }
     };
-    window.addEventListener("keydown", handler, { capture: true });
-    return () => window.removeEventListener("keydown", handler, { capture: true });
+    window.addEventListener('keydown', handler, { capture: true });
+    return () =>
+      window.removeEventListener('keydown', handler, { capture: true });
   }, [onClose]);
 
   return createPortal(
@@ -103,7 +107,7 @@ export function StreamMembersOverlay({
           <span className="text-xs text-white/30">
             <kbd className="rounded bg-white/10 px-1.5 py-0.5 font-mono text-xs">
               Esc
-            </kbd>{" "}
+            </kbd>{' '}
             to close
           </span>
         </div>
@@ -116,13 +120,13 @@ export function StreamMembersOverlay({
           {isCreator ? (
             <div className="grid grid-cols-2 gap-1 rounded-lg bg-white/5 p-1">
               <VisibilityPill
-                active={visibility.mode === "network"}
+                active={visibility.mode === 'network'}
                 icon={<Globe className="size-3.5" />}
                 label="Network-wide"
                 onClick={setNetworkWide}
               />
               <VisibilityPill
-                active={visibility.mode === "custom"}
+                active={visibility.mode === 'custom'}
                 icon={<Lock className="size-3.5" />}
                 label="Specific people"
                 onClick={setCustomOnlyCreator}
@@ -130,10 +134,10 @@ export function StreamMembersOverlay({
             </div>
           ) : (
             <div className="flex items-center gap-2 text-sm text-white/70">
-              {visibility.mode === "network" ? (
+              {visibility.mode === 'network' ? (
                 <>
                   <Globe className="size-3.5 text-white/40" />
-                  <span>Everyone in {network?.name ?? "network"}</span>
+                  <span>Everyone in {network?.name ?? 'network'}</span>
                 </>
               ) : (
                 <>
@@ -148,7 +152,7 @@ export function StreamMembersOverlay({
         {/* Member list */}
         <section className="flex min-h-0 flex-1 flex-col">
           <h3 className="mb-2 text-[10px] font-medium uppercase tracking-widest text-white/30">
-            {visibility.mode === "network" ? "Has access" : "People"}{" "}
+            {visibility.mode === 'network' ? 'Has access' : 'People'}{' '}
             <span className="ml-1 text-white/20">{memberIds.length}</span>
           </h3>
           <ScrollArea className="min-h-0 flex-1">
@@ -157,7 +161,7 @@ export function StreamMembersOverlay({
                 const display = resolveHumanDisplay(id, humans);
                 const isCreatorRow = id === creatorId;
                 const canRemove =
-                  isCreator && visibility.mode === "custom" && !isCreatorRow;
+                  isCreator && visibility.mode === 'custom' && !isCreatorRow;
                 return (
                   <li
                     key={id}
@@ -170,8 +174,8 @@ export function StreamMembersOverlay({
                     </Avatar>
                     <span
                       className={cn(
-                        "flex-1 truncate",
-                        !display.exists && "italic text-white/40",
+                        'flex-1 truncate',
+                        !display.exists && 'italic text-white/40',
                       )}
                     >
                       {display.displayName}
@@ -199,44 +203,50 @@ export function StreamMembersOverlay({
         </section>
 
         {/* Add */}
-        {isCreator && visibility.mode === "custom" && availableToAdd.length > 0 && (
-          <section className="mt-4 border-t border-white/5 pt-4">
-            <h3 className="mb-2 flex items-center gap-1.5 text-[10px] font-medium uppercase tracking-widest text-white/30">
-              <UserPlus className="size-3" />
-              Add people
-            </h3>
-            <ScrollArea className="max-h-32">
-              <ul className="flex flex-col gap-0.5 pr-2">
-                {availableToAdd.map((human) => (
-                  <li key={human.id}>
-                    <button
-                      type="button"
-                      onClick={() => addMember(human.id)}
-                      className={cn(
-                        "flex w-full items-center gap-2.5 rounded px-2 py-1.5 text-left text-sm text-white/70 transition-colors hover:bg-white/5",
-                      )}
-                    >
-                      <Avatar size="sm">
-                        <AvatarFallback className="text-[10px]">
-                          {getInitials(human.email)}
-                        </AvatarFallback>
-                      </Avatar>
-                      <span className="flex-1 truncate">{human.email_prefix}</span>
-                      <UserPlus className="size-3.5 text-white/30" />
-                    </button>
-                  </li>
-                ))}
-              </ul>
-            </ScrollArea>
-          </section>
-        )}
+        {isCreator &&
+          visibility.mode === 'custom' &&
+          availableToAdd.length > 0 && (
+            <section className="mt-4 border-t border-white/5 pt-4">
+              <h3 className="mb-2 flex items-center gap-1.5 text-[10px] font-medium uppercase tracking-widest text-white/30">
+                <UserPlus className="size-3" />
+                Add people
+              </h3>
+              <ScrollArea className="max-h-32">
+                <ul className="flex flex-col gap-0.5 pr-2">
+                  {availableToAdd.map((human) => (
+                    <li key={human.id}>
+                      <button
+                        type="button"
+                        onClick={() => addMember(human.id)}
+                        className={cn(
+                          'flex w-full items-center gap-2.5 rounded px-2 py-1.5 text-left text-sm text-white/70 transition-colors hover:bg-white/5',
+                        )}
+                      >
+                        <Avatar size="sm">
+                          <AvatarFallback className="text-[10px]">
+                            {getInitials(human.email)}
+                          </AvatarFallback>
+                        </Avatar>
+                        <span className="flex-1 truncate">
+                          {human.email_prefix}
+                        </span>
+                        <UserPlus className="size-3.5 text-white/30" />
+                      </button>
+                    </li>
+                  ))}
+                </ul>
+              </ScrollArea>
+            </section>
+          )}
 
-        {isCreator && visibility.mode === "custom" && availableToAdd.length === 0 && (
-          <p className="mt-4 text-center text-xs text-white/30">
-            <Users className="mr-1 inline size-3" />
-            Everyone in the network is already a member
-          </p>
-        )}
+        {isCreator &&
+          visibility.mode === 'custom' &&
+          availableToAdd.length === 0 && (
+            <p className="mt-4 text-center text-xs text-white/30">
+              <Users className="mr-1 inline size-3" />
+              Everyone in the network is already a member
+            </p>
+          )}
       </div>
     </div>,
     document.body,
@@ -259,10 +269,10 @@ function VisibilityPill({
       type="button"
       onClick={onClick}
       className={cn(
-        "flex items-center justify-center gap-1.5 rounded-md px-2 py-1.5 text-xs transition-colors",
+        'flex items-center justify-center gap-1.5 rounded-md px-2 py-1.5 text-xs transition-colors',
         active
-          ? "bg-white/10 text-white/90"
-          : "text-white/50 hover:text-white/80",
+          ? 'bg-white/10 text-white/90'
+          : 'text-white/50 hover:text-white/80',
       )}
     >
       {icon}