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/desktop/src/features/network-selector.tsx

@@ -1,12 +1,12 @@
-import { useState } from "react";
-import { useNavigate } from "react-router-dom";
-import { Check, Plus, Settings, Users } from "lucide-react";
-import { toast } from "sonner";
-import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { Small } from "@/components/ui/typography";
-import { Avatar, AvatarFallback } from "@/components/ui/avatar";
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Check, Plus, Settings, Users } from 'lucide-react';
+import { toast } from 'sonner';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { Small } from '@/components/ui/typography';
+import { Avatar, AvatarFallback } from '@/components/ui/avatar';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
 import {
   Dialog,
   DialogContent,
@@ -14,16 +14,19 @@ import {
   DialogFooter,
   DialogHeader,
   DialogTitle,
-} from "@/components/ui/dialog";
-import { Input } from "@/components/ui/input";
-import { ScrollArea } from "@/components/ui/scroll-area";
-import { Separator } from "@/components/ui/separator";
-import { useNetworks } from "@/hooks/use-networks";
-import { useMyInvitations, useAcceptInvitation } from "@/hooks/use-member-management";
-import { apiClient } from "@/api/client";
-import { Progress } from "@/components/ui/progress";
-import { toUserMessage } from "@/lib/errors";
-import type { Network, Invitation } from "@/api/types";
+} from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { Separator } from '@/components/ui/separator';
+import { useNetworks } from '@/hooks/use-networks';
+import {
+  useMyInvitations,
+  useAcceptInvitation,
+} from '@/hooks/use-member-management';
+import { apiClient } from '@/api/client';
+import { Progress } from '@/components/ui/progress';
+import { toUserMessage } from '@/lib/errors';
+import type { Network, Invitation } from '@/api/types';
 
 function NetworkRow({
   network,
@@ -53,7 +56,7 @@ function NetworkRow({
         <div className="text-muted-foreground flex items-center gap-1">
           <Users className="size-3" />
           <Small className="text-muted-foreground">
-            {memberCount} {memberCount === 1 ? "member" : "members"}
+            {memberCount} {memberCount === 1 ? 'member' : 'members'}
           </Small>
         </div>
       </div>
@@ -66,7 +69,7 @@ function NetworkRow({
           onSettingsClick();
         }}
         onKeyDown={(e) => {
-          if (e.key === "Enter" || e.key === " ") {
+          if (e.key === 'Enter' || e.key === ' ') {
             e.stopPropagation();
             onSettingsClick();
           }
@@ -109,7 +112,7 @@ function InvitationRow({ invitation }: { invitation: Invitation }) {
         disabled={acceptInvitation.isPending}
       >
         <Check className="mr-1 size-3.5" />
-        {acceptInvitation.isPending ? "Joining..." : "Accept"}
+        {acceptInvitation.isPending ? 'Joining...' : 'Accept'}
       </Button>
     </div>
   );
@@ -122,7 +125,7 @@ function CreateNetworkDialog({
   open: boolean;
   onOpenChange: (open: boolean) => void;
 }) {
-  const [name, setName] = useState("");
+  const [name, setName] = useState('');
   const navigate = useNavigate();
   const queryClient = useQueryClient();
 
@@ -130,10 +133,10 @@ function CreateNetworkDialog({
     mutationFn: (networkName: string) =>
       apiClient.createNetwork({ name: networkName }),
     onSuccess: (network) => {
-      queryClient.invalidateQueries({ queryKey: ["networks"] });
+      queryClient.invalidateQueries({ queryKey: ['networks'] });
       toast.success(`Created ${network.name}`);
       onOpenChange(false);
-      setName("");
+      setName('');
       navigate(`/${network.id}/settings`);
     },
   });
@@ -150,7 +153,10 @@ function CreateNetworkDialog({
       <DialogContent>
         <DialogHeader>
           <DialogTitle>Create a Network</DialogTitle>
-          <DialogDescription>Caution: creating a network will create a new billing account. If your team already has a network, ask them for an invite.</DialogDescription>
+          <DialogDescription>
+            Caution: creating a network will create a new billing account. If
+            your team already has a network, ask them for an invite.
+          </DialogDescription>
         </DialogHeader>
         <form onSubmit={handleSubmit}>
           <div className="py-4">
@@ -173,7 +179,7 @@ function CreateNetworkDialog({
               type="submit"
               disabled={!name.trim() || createNetwork.isPending}
             >
-              {createNetwork.isPending ? "Creating..." : "Create"}
+              {createNetwork.isPending ? 'Creating...' : 'Create'}
             </Button>
           </DialogFooter>
         </form>
@@ -212,10 +218,13 @@ export default function NetworkSelector() {
     return (
       <div className="mx-auto flex h-full max-w-sm flex-col items-center justify-center gap-4 px-4 text-center">
         <p className="text-muted-foreground">
-          You don't have access to any networks yet. Create one or ask your admin for an invite.
+          You don't have access to any networks yet. Create one or ask your
+          admin for an invite.
         </p>
         <div className="flex flex-row gap-1">
-          <Button variant="outline" onClick={() => refetch()}>Refresh</Button>
+          <Button variant="outline" onClick={() => refetch()}>
+            Refresh
+          </Button>
           <Button onClick={() => setCreateDialogOpen(true)}>
             <Plus className="mr-1 size-3.5" />
             Create Network
@@ -267,9 +276,7 @@ export default function NetworkSelector() {
                   <NetworkRow
                     network={network}
                     onClick={() => navigate(`/${network.id}`)}
-                    onSettingsClick={() =>
-                      navigate(`/${network.id}/settings`)
-                    }
+                    onSettingsClick={() => navigate(`/${network.id}/settings`)}
                   />
                   {index < networks.length - 1 && (
                     <Separator className="mx-4" />