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/StreamCard.tsx

@@ -1,17 +1,17 @@
-import { memo, useMemo } from "react";
-import { Pressable, Text, View } from "react-native";
-import { Headphones } from "lucide-react-native";
-import type { Particle, StreamProperties } from "@/api/types";
-import { isParticleDeleted } from "@/api/types";
-import { RelativeTimestamp } from "@/components/RelativeTimestamp";
-import { useLiveLatestChild } from "@/hooks/use-particle";
-import { useNetwork } from "@/hooks/use-networks";
-import { particlePath } from "@/lib/particle-path";
-import { cn, getInitials } from "@/lib/utils";
-import { useAuthStore } from "@/stores/auth-store";
+import { memo, useMemo } from 'react';
+import { Pressable, Text, View } from 'react-native';
+import { Headphones } from 'lucide-react-native';
+import type { Particle, StreamProperties } from '@/api/types';
+import { isParticleDeleted } from '@/api/types';
+import { RelativeTimestamp } from '@/components/RelativeTimestamp';
+import { useLiveLatestChild } from '@/hooks/use-particle';
+import { useNetwork } from '@/hooks/use-networks';
+import { particlePath } from '@/lib/particle-path';
+import { cn, getInitials } from '@/lib/utils';
+import { useAuthStore } from '@/stores/auth-store';
 
 interface StreamCardProps {
-  particle: Particle & { type: "stream"; properties: StreamProperties };
+  particle: Particle & { type: 'stream'; properties: StreamProperties };
   networkId: string;
   onPress: () => void;
 }
@@ -28,12 +28,12 @@ export const StreamCard = memo(function StreamCard({
 }: StreamCardProps) {
   const streamPath = particlePath(networkId, [particle.id]);
   const { latestChild } = useLiveLatestChild(streamPath);
-  const userId = useAuthStore((s) => s.user?.id) ?? "";
+  const userId = useAuthStore((s) => s.user?.id) ?? '';
   const network = useNetwork(networkId);
 
   const isDM =
     particle.visible_to.length === 2 &&
-    particle.visible_to.every((v) => v.startsWith("human:"));
+    particle.visible_to.every((v) => v.startsWith('human:'));
 
   const initials = useMemo(() => {
     if (isDM) {
@@ -41,7 +41,7 @@ export const StreamCard = memo(function StreamCard({
         (v) => v !== `human:${userId}`,
       );
       if (otherEntry) {
-        const otherId = otherEntry.replace("human:", "");
+        const otherId = otherEntry.replace('human:', '');
         const otherHuman = network?.humans?.find((h) => h.id === otherId);
         if (otherHuman) return getInitials(otherHuman.email);
       }
@@ -73,45 +73,45 @@ export const StreamCard = memo(function StreamCard({
   }, [latestChild, particle.playback_markers, userId]);
 
   const previewLabel = useMemo(() => {
-    if (!latestChild) return "No messages yet";
-    if (isParticleDeleted(latestChild)) return "Message deleted";
+    if (!latestChild) return 'No messages yet';
+    if (isParticleDeleted(latestChild)) return 'Message deleted';
     switch (latestChild.type) {
-      case "media": {
+      case 'media': {
         const mime = latestChild.properties.mime_type;
-        if (mime.startsWith("image/")) return "Photo";
+        if (mime.startsWith('image/')) return 'Photo';
         const transcriptText = latestChild.properties.transcript?.transcript;
         if (transcriptText) return transcriptText;
-        return mime.startsWith("audio/") ? "Voice note" : "Video clip";
+        return mime.startsWith('audio/') ? 'Voice note' : 'Video clip';
       }
-      case "text":
+      case 'text':
         return latestChild.properties.content;
-      case "file":
+      case 'file':
         return latestChild.properties.filename;
-      case "quest":
+      case 'quest':
         return latestChild.properties.title;
-      case "paper":
+      case 'paper':
         return latestChild.properties.title;
       default:
-        return "Update";
+        return 'Update';
     }
   }, [latestChild]);
 
   return (
     <Pressable
       onPress={onPress}
-      android_ripple={{ color: "rgba(0,0,0,0.05)" }}
+      android_ripple={{ color: 'rgba(0,0,0,0.05)' }}
       className="bg-card flex-row items-center gap-3 px-4 py-3 active:bg-accent"
     >
       <View
         className={cn(
-          "h-10 w-10 items-center justify-center rounded-full",
-          isUnseen ? "bg-primary" : "bg-muted",
+          'h-10 w-10 items-center justify-center rounded-full',
+          isUnseen ? 'bg-primary' : 'bg-muted',
         )}
       >
         <Text
           className={cn(
-            "text-xs font-semibold",
-            isUnseen ? "text-primary-foreground" : "text-muted-foreground",
+            'text-xs font-semibold',
+            isUnseen ? 'text-primary-foreground' : 'text-muted-foreground',
           )}
         >
           {initials}
@@ -122,10 +122,10 @@ export const StreamCard = memo(function StreamCard({
         <Text
           numberOfLines={1}
           className={cn(
-            "text-base",
+            'text-base',
             isUnseen
-              ? "text-foreground font-semibold"
-              : "text-foreground font-medium",
+              ? 'text-foreground font-semibold'
+              : 'text-foreground font-medium',
           )}
         >
           {particle.properties.name}
@@ -143,8 +143,8 @@ export const StreamCard = memo(function StreamCard({
           <RelativeTimestamp
             date={latestChild.created_at}
             className={cn(
-              "text-xs",
-              isUnseen ? "text-primary" : "text-muted-foreground",
+              'text-xs',
+              isUnseen ? 'text-primary' : 'text-muted-foreground',
             )}
           />
         ) : null}