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/streams/NewStreamScreen.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useState } from "react";
+import { useMemo, useState } from 'react';
 import {
   KeyboardAvoidingView,
   Platform,
@@ -6,24 +6,24 @@ import {
   Text,
   TextInput,
   View,
-} from "react-native";
-import { SafeAreaView } from "react-native-safe-area-context";
-import { StatusBar } from "expo-status-bar";
-import { ChevronRight, Globe, Lock, X } from "lucide-react-native";
-import { toast } from "sonner-native";
-import { ComposeDock } from "@/features/compose/ComposeDock";
-import { useNetwork } from "@/hooks/use-networks";
-import { particlePath } from "@/lib/particle-path";
-import { generateRandomName } from "@/lib/random-name";
-import { createStreamWithFirstParticle } from "@/lib/upload";
-import { toUserMessage } from "@/lib/errors";
+} from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { StatusBar } from 'expo-status-bar';
+import { ChevronRight, Globe, Lock, X } from 'lucide-react-native';
+import { toast } from 'sonner-native';
+import { ComposeDock } from '@/features/compose/ComposeDock';
+import { useNetwork } from '@/hooks/use-networks';
+import { particlePath } from '@/lib/particle-path';
+import { generateRandomName } from '@/lib/random-name';
+import { createStreamWithFirstParticle } from '@/lib/upload';
+import { toUserMessage } from '@/lib/errors';
 import {
   buildNetworkVisibility,
   parseVisibleTo,
-} from "@/lib/stream-visibility";
-import { useAuthStore } from "@/stores/auth-store";
-import type { RootStackScreenProps } from "@/navigation/types";
-import { VisibilityPickerSheet } from "./VisibilityPickerSheet";
+} from '@/lib/stream-visibility';
+import { useAuthStore } from '@/stores/auth-store';
+import type { RootStackScreenProps } from '@/navigation/types';
+import { VisibilityPickerSheet } from './VisibilityPickerSheet';
 
 const STREAM_NAME_MAX = 60;
 
@@ -35,13 +35,13 @@ const STREAM_NAME_MAX = 60;
 export function NewStreamScreen({
   route,
   navigation,
-}: RootStackScreenProps<"NewStream">) {
+}: RootStackScreenProps<'NewStream'>) {
   const { networkId } = route.params;
   const network = useNetwork(networkId);
   const userId = useAuthStore((s) => s.user?.id);
 
   const suggestion = useMemo(() => generateRandomName(), []);
-  const [name, setName] = useState("");
+  const [name, setName] = useState('');
   const [visibleTo, setVisibleTo] = useState<string[]>(() =>
     buildNetworkVisibility(networkId),
   );
@@ -50,18 +50,18 @@ export function NewStreamScreen({
   const effectiveName = name.trim() || suggestion;
 
   const handleStreamCreated = (streamId: string) => {
-    navigation.replace("StreamView", { networkId, streamId });
+    navigation.replace('StreamView', { networkId, streamId });
   };
 
   const submitText = async (content: string) => {
-    if (!userId) throw new Error("Not signed in.");
+    if (!userId) throw new Error('Not signed in.');
     try {
       const { streamId } = await createStreamWithFirstParticle({
         networkId,
         name: effectiveName,
         visibleTo,
         createdByHumanId: userId,
-        firstParticle: { type: "text", content },
+        firstParticle: { type: 'text', content },
       });
       handleStreamCreated(streamId);
     } catch (err) {
@@ -79,9 +79,9 @@ export function NewStreamScreen({
     fileUri: string;
     mimeType: string;
     durationMs: number;
-    source: "camera" | "screen";
+    source: 'camera' | 'screen';
   }) => {
-    if (!userId) throw new Error("Not signed in.");
+    if (!userId) throw new Error('Not signed in.');
     try {
       const { streamId } = await createStreamWithFirstParticle({
         networkId,
@@ -89,7 +89,7 @@ export function NewStreamScreen({
         visibleTo,
         createdByHumanId: userId,
         firstParticle: {
-          type: "media",
+          type: 'media',
           fileUri,
           mimeType,
           durationMs,
@@ -107,17 +107,17 @@ export function NewStreamScreen({
 
   const visibility = parseVisibleTo(visibleTo, networkId);
   const visibleSummary =
-    visibility.mode === "network"
-      ? `Everyone in ${network?.name ?? "this network"}`
+    visibility.mode === 'network'
+      ? `Everyone in ${network?.name ?? 'this network'}`
       : `${visibility.humanIds.length} ${
-          visibility.humanIds.length === 1 ? "person" : "people"
+          visibility.humanIds.length === 1 ? 'person' : 'people'
         }`;
 
   return (
     <View className="flex-1 bg-black">
       <StatusBar style="light" />
 
-      <SafeAreaView edges={["top"]}>
+      <SafeAreaView edges={['top']}>
         <View className="flex-row items-center justify-between px-4 pt-3 pb-2">
           <Pressable
             onPress={() => navigation.goBack()}
@@ -126,15 +126,13 @@ export function NewStreamScreen({
           >
             <X color="white" size={22} strokeWidth={1.8} />
           </Pressable>
-          <Text className="text-white text-base font-semibold">
-            New stream
-          </Text>
+          <Text className="text-white text-base font-semibold">New stream</Text>
           <View style={{ width: 22 }} />
         </View>
       </SafeAreaView>
 
       <KeyboardAvoidingView
-        behavior={Platform.OS === "ios" ? "padding" : undefined}
+        behavior={Platform.OS === 'ios' ? 'padding' : undefined}
         className="flex-1"
       >
         <View className="flex-1 px-6 pt-4">
@@ -159,8 +157,12 @@ export function NewStreamScreen({
             onPress={() => setPickerOpen(true)}
             className="bg-white/10 active:bg-white/15 rounded-xl px-4 py-3 flex-row items-center gap-3"
           >
-            {visibility.mode === "network" ? (
-              <Globe color="rgba(255,255,255,0.7)" size={18} strokeWidth={1.6} />
+            {visibility.mode === 'network' ? (
+              <Globe
+                color="rgba(255,255,255,0.7)"
+                size={18}
+                strokeWidth={1.6}
+              />
             ) : (
               <Lock color="rgba(255,255,255,0.7)" size={18} strokeWidth={1.6} />
             )}
@@ -176,7 +178,7 @@ export function NewStreamScreen({
 
           <View className="mt-6 px-1">
             <Text className="text-white/50 text-sm">
-              Hold the button below to record a voice or video message — that's
+              Hold the button below to record a voice or video message — that’s
               the first particle in your new stream.
             </Text>
           </View>