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/stream-view/StreamActionsSheet.tsx

@@ -1,27 +1,27 @@
-import { useState } from "react";
-import { Pressable, Text, View } from "react-native";
+import { useState } from 'react';
+import { Pressable, Text, View } from 'react-native';
 import {
   CircleCheckBig,
   CircleDot,
   Pencil,
   Trash2,
   Users,
-} from "lucide-react-native";
-import { cn } from "@/lib/utils";
-import { BottomSheet } from "@/components/BottomSheet";
+} from 'lucide-react-native';
+import { cn } from '@/lib/utils';
+import { BottomSheet } from '@/components/BottomSheet';
 
 export type StreamActionId =
-  | "toggle-status"
-  | "rename"
-  | "members"
-  | "edit-particle"
-  | "delete-particle";
+  | 'toggle-status'
+  | 'rename'
+  | 'members'
+  | 'edit-particle'
+  | 'delete-particle';
 
 interface StreamActionsSheetProps {
   open: boolean;
   onClose: () => void;
   onSelect: (action: StreamActionId) => void;
-  streamStatus: "open" | "closed";
+  streamStatus: 'open' | 'closed';
   isCreator: boolean;
   /** True when the *current* particle is a text particle this user authored. */
   canEditParticle: boolean;
@@ -63,34 +63,32 @@ export function StreamActionsSheet({
       <View className="py-2">
         <ActionRow
           icon={
-            streamStatus === "open" ? (
+            streamStatus === 'open' ? (
               <CircleCheckBig color="white" size={20} />
             ) : (
               <CircleDot color="#22c55e" size={20} />
             )
           }
-          label={
-            streamStatus === "open" ? "Close stream" : "Reopen stream"
-          }
-          onPress={() => choose("toggle-status")}
+          label={streamStatus === 'open' ? 'Close stream' : 'Reopen stream'}
+          onPress={() => choose('toggle-status')}
         />
         <ActionRow
           icon={<Users color="white" size={20} />}
           label="Members"
-          onPress={() => choose("members")}
+          onPress={() => choose('members')}
         />
         {isCreator ? (
           <ActionRow
             icon={<Pencil color="white" size={20} />}
             label="Rename stream"
-            onPress={() => choose("rename")}
+            onPress={() => choose('rename')}
           />
         ) : null}
         {canEditParticle ? (
           <ActionRow
             icon={<Pencil color="white" size={20} />}
             label="Edit particle"
-            onPress={() => choose("edit-particle")}
+            onPress={() => choose('edit-particle')}
           />
         ) : null}
         {canDeleteParticle ? (
@@ -98,7 +96,7 @@ export function StreamActionsSheet({
             icon={<Trash2 color="#ef4444" size={20} />}
             label="Delete particle"
             tone="destructive"
-            onPress={() => choose("delete-particle")}
+            onPress={() => choose('delete-particle')}
           />
         ) : null}
       </View>
@@ -119,12 +117,12 @@ function ActionRow({
   icon,
   label,
   onPress,
-  tone = "default",
+  tone = 'default',
 }: {
   icon: React.ReactNode;
   label: string;
   onPress: () => void;
-  tone?: "default" | "destructive";
+  tone?: 'default' | 'destructive';
 }) {
   return (
     <Pressable
@@ -134,8 +132,8 @@ function ActionRow({
       <View className="w-6 items-center">{icon}</View>
       <Text
         className={cn(
-          "text-base",
-          tone === "destructive" ? "text-red-400" : "text-white",
+          'text-base',
+          tone === 'destructive' ? 'text-red-400' : 'text-white',
         )}
       >
         {label}