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/mobile/src/features/networks/Drawer.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from "react";
+import { useEffect, useState } from 'react';
 import {
   Animated,
   Dimensions,
@@ -7,15 +7,15 @@ import {
   Pressable,
   Text,
   View,
-} from "react-native";
+} from 'react-native';
 import {
   initialWindowMetrics,
   SafeAreaProvider,
   SafeAreaView,
-} from "react-native-safe-area-context";
-import { useAuthStore } from "@/stores/auth-store";
+} from 'react-native-safe-area-context';
+import { useAuthStore } from '@/stores/auth-store';
 
-const SCREEN_WIDTH = Dimensions.get("window").width;
+const SCREEN_WIDTH = Dimensions.get('window').width;
 const DRAWER_WIDTH = Math.min(320, Math.round(SCREEN_WIDTH * 0.82));
 const ANIM_MS = 220;
 
@@ -26,13 +26,11 @@ interface DrawerProps {
   onNavigateSettings: () => void;
 }
 
-export function Drawer({
-  open,
-  onClose,
-  onNavigateAccount,
-}: DrawerProps) {
-  const translateX = useRef(new Animated.Value(-DRAWER_WIDTH)).current;
-  const backdropOpacity = useRef(new Animated.Value(0)).current;
+export function Drawer({ open, onClose, onNavigateAccount }: DrawerProps) {
+  // Lazy-init so each Animated.Value is created once; the setters are never
+  // called — the values are mutated internally by the native driver.
+  const [translateX] = useState(() => new Animated.Value(-DRAWER_WIDTH));
+  const [backdropOpacity] = useState(() => new Animated.Value(0));
 
   useEffect(() => {
     Animated.parallel([
@@ -55,7 +53,7 @@ export function Drawer({
   const signOut = useAuthStore((s) => s.signOut);
   const isSigningOut = useAuthStore((s) => s.isSigningOut);
 
-  const initials = user?.email_prefix.slice(0, 2).toUpperCase() ?? "??";
+  const initials = user?.email_prefix.slice(0, 2).toUpperCase() ?? '??';
 
   return (
     <Modal
@@ -69,68 +67,68 @@ export function Drawer({
           inside reports {0,0,0,0} on the first frame and content snaps from
           the status bar down to the safe area once metrics resolve. */}
       <SafeAreaProvider initialMetrics={initialWindowMetrics}>
-      <View className="flex-1">
-        <Animated.View
-          pointerEvents={open ? "auto" : "none"}
-          style={{ opacity: backdropOpacity }}
-          className="absolute inset-0 bg-black"
-        >
-          <Pressable className="flex-1" onPress={onClose} />
-        </Animated.View>
+        <View className="flex-1">
+          <Animated.View
+            pointerEvents={open ? 'auto' : 'none'}
+            style={{ opacity: backdropOpacity }}
+            className="absolute inset-0 bg-black"
+          >
+            <Pressable className="flex-1" onPress={onClose} />
+          </Animated.View>
 
-        <Animated.View
-          style={{
-            width: DRAWER_WIDTH,
-            transform: [{ translateX }],
-          }}
-          className="absolute left-0 top-0 bottom-0 bg-sidebar"
-        >
-          <SafeAreaView edges={["top", "bottom", "left"]} className="flex-1">
-            <View className="border-sidebar-border border-b px-5 py-5 flex-row items-center gap-3">
-              <View className="bg-sidebar-accent h-10 w-10 items-center justify-center rounded-full">
-                <Text className="text-sidebar-accent-foreground text-sm font-semibold">
-                  {initials}
-                </Text>
+          <Animated.View
+            style={{
+              width: DRAWER_WIDTH,
+              transform: [{ translateX }],
+            }}
+            className="absolute left-0 top-0 bottom-0 bg-sidebar"
+          >
+            <SafeAreaView edges={['top', 'bottom', 'left']} className="flex-1">
+              <View className="border-sidebar-border border-b px-5 py-5 flex-row items-center gap-3">
+                <View className="bg-sidebar-accent h-10 w-10 items-center justify-center rounded-full">
+                  <Text className="text-sidebar-accent-foreground text-sm font-semibold">
+                    {initials}
+                  </Text>
+                </View>
+                <View className="flex-1">
+                  <Text
+                    className="text-sidebar-foreground text-base font-medium"
+                    numberOfLines={1}
+                  >
+                    {user?.email_prefix ?? ''}
+                  </Text>
+                  <Text
+                    className="text-muted-foreground text-xs"
+                    numberOfLines={1}
+                  >
+                    {user?.email ?? ''}
+                  </Text>
+                </View>
               </View>
-              <View className="flex-1">
-                <Text
-                  className="text-sidebar-foreground text-base font-medium"
-                  numberOfLines={1}
-                >
-                  {user?.email_prefix ?? ""}
-                </Text>
-                <Text
-                  className="text-muted-foreground text-xs"
-                  numberOfLines={1}
-                >
-                  {user?.email ?? ""}
-                </Text>
+
+              <View className="flex-1 py-2">
+                <DrawerRow
+                  label="Account"
+                  onPress={() => {
+                    onClose();
+                    onNavigateAccount();
+                  }}
+                />
               </View>
-            </View>
 
-            <View className="flex-1 py-2">
-              <DrawerRow
-                label="Account"
-                onPress={() => {
-                  onClose();
-                  onNavigateAccount();
-                }}
-              />
-            </View>
-
-            <View className="border-sidebar-border border-t px-2 py-2">
-              <DrawerRow
-                label={isSigningOut ? "Signing out..." : "Sign out"}
-                disabled={isSigningOut}
-                onPress={() => {
-                  void signOut();
-                }}
-                tone="destructive"
-              />
-            </View>
-          </SafeAreaView>
-        </Animated.View>
-      </View>
+              <View className="border-sidebar-border border-t px-2 py-2">
+                <DrawerRow
+                  label={isSigningOut ? 'Signing out...' : 'Sign out'}
+                  disabled={isSigningOut}
+                  onPress={() => {
+                    void signOut();
+                  }}
+                  tone="destructive"
+                />
+              </View>
+            </SafeAreaView>
+          </Animated.View>
+        </View>
       </SafeAreaProvider>
     </Modal>
   );
@@ -140,12 +138,12 @@ function DrawerRow({
   label,
   onPress,
   disabled,
-  tone = "default",
+  tone = 'default',
 }: {
   label: string;
   onPress: () => void;
   disabled?: boolean;
-  tone?: "default" | "destructive";
+  tone?: 'default' | 'destructive';
 }) {
   return (
     <Pressable
@@ -155,10 +153,10 @@ function DrawerRow({
     >
       <Text
         className={`text-base font-medium ${
-          tone === "destructive"
-            ? "text-destructive"
-            : "text-sidebar-foreground"
-        } ${disabled ? "opacity-50" : ""}`}
+          tone === 'destructive'
+            ? 'text-destructive'
+            : 'text-sidebar-foreground'
+        } ${disabled ? 'opacity-50' : ''}`}
       >
         {label}
       </Text>