wip(mobile): lint and format

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>

js/mobile/src/features/networks/NetworkListScreen.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useState } from "react";
+import { useCallback, useState } from 'react';
 import {
   ActivityIndicator,
   FlatList,
@@ -6,24 +6,24 @@ import {
   RefreshControl,
   Text,
   View,
-} from "react-native";
-import { SafeAreaView } from "react-native-safe-area-context";
-import type { Network } from "@/api/types";
-import { useNetworks } from "@/hooks/use-networks";
-import { useAuthStore } from "@/stores/auth-store";
-import { toUserMessage } from "@/lib/errors";
-import type { RootStackScreenProps } from "@/navigation/types";
-import { FlowyLogo } from "@/components/FlowyLogo";
-import { ListSeparator } from "@/components/ListSeparator";
-import { Drawer } from "./Drawer";
+} from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import type { Network } from '@/api/types';
+import { useNetworks } from '@/hooks/use-networks';
+import { useAuthStore } from '@/stores/auth-store';
+import { toUserMessage } from '@/lib/errors';
+import type { RootStackScreenProps } from '@/navigation/types';
+import { FlowyLogo } from '@/components/FlowyLogo';
+import { ListSeparator } from '@/components/ListSeparator';
+import { Drawer } from './Drawer';
 
 export function NetworkListScreen({
   navigation,
-}: RootStackScreenProps<"NetworkList">) {
+}: RootStackScreenProps<'NetworkList'>) {
   const [drawerOpen, setDrawerOpen] = useState(false);
   const { data, isLoading, refetch, error } = useNetworks();
   const user = useAuthStore((s) => s.user);
-  const initials = user?.email_prefix.slice(0, 2).toUpperCase() ?? "??";
+  const initials = user?.email_prefix.slice(0, 2).toUpperCase() ?? '??';
 
   // Local refreshing state — driving RefreshControl from react-query's
   // isRefetching can leave the native spinner visually stuck after the
@@ -39,7 +39,7 @@ export function NetworkListScreen({
   }, [refetch]);
 
   return (
-    <SafeAreaView className="flex-1 bg-background" edges={["top"]}>
+    <SafeAreaView className="flex-1 bg-background" edges={['top']}>
       <View className="flex-row items-center justify-between px-4 py-3 border-b border-border">
         <Pressable
           onPress={() => setDrawerOpen(true)}
@@ -81,7 +81,7 @@ export function NetworkListScreen({
             <NetworkCard
               network={item}
               onPress={() =>
-                navigation.navigate("StreamList", { networkId: item.id })
+                navigation.navigate('StreamList', { networkId: item.id })
               }
             />
           )}
@@ -91,8 +91,8 @@ export function NetworkListScreen({
       <Drawer
         open={drawerOpen}
         onClose={() => setDrawerOpen(false)}
-        onNavigateAccount={() => navigation.navigate("Account")}
-        onNavigateSettings={() => navigation.navigate("Settings")}
+        onNavigateAccount={() => navigation.navigate('Account')}
+        onNavigateSettings={() => navigation.navigate('Settings')}
       />
     </SafeAreaView>
   );
@@ -115,8 +115,8 @@ function NetworkCard({
           {network.name}
         </Text>
         <Text className="text-muted-foreground text-sm">
-          {network.humans.length}{" "}
-          {network.humans.length === 1 ? "member" : "members"}
+          {network.humans.length}{' '}
+          {network.humans.length === 1 ? 'member' : 'members'}
         </Text>
       </View>
       <Text className="text-muted-foreground text-xl">›</Text>
@@ -128,7 +128,7 @@ function EmptyState() {
   return (
     <View className="flex-1 items-center justify-center px-6">
       <Text className="text-foreground text-lg font-medium text-center">
-        You aren't in any networks yet.
+        You aren’t in any networks yet.
       </Text>
       <Text className="text-muted-foreground mt-2 text-center">
         Ask a friend for an invite, or create one on desktop.