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/components/Avatar.tsx

@@ -1,9 +1,9 @@
-import { Text, View } from "react-native";
-import type { Human } from "@/api/types";
-import { resolveHumanDisplay } from "@/lib/humans";
-import { cn } from "@/lib/utils";
+import { Text, View } from 'react-native';
+import type { Human } from '@/api/types';
+import { resolveHumanDisplay } from '@/lib/humans';
+import { cn } from '@/lib/utils';
 
-type Size = "xs" | "sm" | "md";
+type Size = 'xs' | 'sm' | 'md';
 
 interface AvatarProps {
   humanId: string | null | undefined;
@@ -17,9 +17,9 @@ interface AvatarProps {
 }
 
 const sizeMap: Record<Size, { box: string; text: string; ring: number }> = {
-  xs: { box: "h-6 w-6", text: "text-[9px]", ring: 1.5 },
-  sm: { box: "h-9 w-9", text: "text-xs", ring: 2 },
-  md: { box: "h-10 w-10", text: "text-sm", ring: 2 },
+  xs: { box: 'h-6 w-6', text: 'text-[9px]', ring: 1.5 },
+  sm: { box: 'h-9 w-9', text: 'text-xs', ring: 2 },
+  md: { box: 'h-10 w-10', text: 'text-sm', ring: 2 },
 };
 
 /**
@@ -30,7 +30,7 @@ const sizeMap: Record<Size, { box: string; text: string; ring: number }> = {
 export function Avatar({
   humanId,
   humans,
-  size = "sm",
+  size = 'sm',
   online = false,
   stackBg,
   className,
@@ -41,7 +41,7 @@ export function Avatar({
   return (
     <View
       className={cn(
-        "bg-black/15 items-center justify-center rounded-full",
+        'bg-black/15 items-center justify-center rounded-full',
         dims.box,
         className,
       )}
@@ -49,10 +49,10 @@ export function Avatar({
         // Online ring is the priority; if not online, show the stack
         // separator ring (if requested) so adjacent avatars stay distinct.
         borderWidth: online ? dims.ring : stackBg ? dims.ring : 0,
-        borderColor: online ? "#22c55e" : stackBg ?? "transparent",
+        borderColor: online ? '#22c55e' : (stackBg ?? 'transparent'),
       }}
     >
-      <Text className={cn("text-white font-semibold", dims.text)}>
+      <Text className={cn('text-white font-semibold', dims.text)}>
         {initials}
       </Text>
     </View>