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/settings-page.tsx

@@ -1,22 +1,32 @@
-import { useEffect, useState } from "react";
-import { useNavigate } from "react-router-dom";
-import { ChevronRight, LogOut, User, Info, Shield, Mail, Mic, LifeBuoy, FileText, Volume2 } from "lucide-react";
-import { Avatar, AvatarFallback } from "@/components/ui/avatar";
-import { Separator } from "@/components/ui/separator";
-import { Switch } from "@/components/ui/switch";
-import { WindowControls } from "@/components/window-controls";
-import { Button } from "@/components/ui/button";
-import { Muted } from "@/components/ui/typography";
-import { ScrollArea } from "@/components/ui/scroll-area";
-import { CopyableEmail } from "@/components/copyable-email";
-import { useAuthStore } from "@/stores/auth-store";
-import { useSoundEffectsStore } from "@/stores/sound-effects-store";
-import { apiClient } from "@/api/client";
-import { logError, toUserMessage } from "@/lib/errors";
-import { toast } from "sonner";
-import { PRIVACY_URL, SUPPORT_EMAIL, TERMS_URL } from "@/lib/constants";
-import { ArrowLeft } from "lucide-react";
-import { platform } from "@/lib/platform";
+import { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import {
+  ChevronRight,
+  LogOut,
+  Info,
+  Shield,
+  Mail,
+  Mic,
+  LifeBuoy,
+  FileText,
+  Volume2,
+  ArrowLeft,
+} from 'lucide-react';
+import { Avatar, AvatarFallback } from '@/components/ui/avatar';
+import { Separator } from '@/components/ui/separator';
+import { Switch } from '@/components/ui/switch';
+import { WindowControls } from '@/components/window-controls';
+import { Button } from '@/components/ui/button';
+import { Muted } from '@/components/ui/typography';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { CopyableEmail } from '@/components/copyable-email';
+import { useAuthStore } from '@/stores/auth-store';
+import { useSoundEffectsStore } from '@/stores/sound-effects-store';
+import { apiClient } from '@/api/client';
+import { logError, toUserMessage } from '@/lib/errors';
+import { toast } from 'sonner';
+import { PRIVACY_URL, SUPPORT_EMAIL, TERMS_URL } from '@/lib/constants';
+import { platform } from '@/lib/platform';
 
 interface SettingsRowProps {
   icon: React.ReactNode;
@@ -37,7 +47,7 @@ function SettingsRow({
     <button
       type="button"
       onClick={onClick}
-      className={`flex w-full items-center gap-3 px-4 py-3 text-left transition-colors hover:bg-accent ${destructive ? "text-destructive" : ""}`}
+      className={`flex w-full items-center gap-3 px-4 py-3 text-left transition-colors hover:bg-accent ${destructive ? 'text-destructive' : ''}`}
     >
       <span className="text-muted-foreground flex size-5 items-center justify-center">
         {icon}
@@ -86,21 +96,25 @@ export default function SettingsPage() {
   const handleToggleEmailNotifications = async (checked: boolean) => {
     setEmailNotifications(checked);
     useAuthStore.setState((state) => ({
-      user: state.user ? { ...state.user, email_notifications_enabled: checked } : null,
+      user: state.user
+        ? { ...state.user, email_notifications_enabled: checked }
+        : null,
     }));
     try {
       await apiClient.updateSettings({ email_notifications_enabled: checked });
     } catch (err) {
       setEmailNotifications(!checked);
       useAuthStore.setState((state) => ({
-        user: state.user ? { ...state.user, email_notifications_enabled: !checked } : null,
+        user: state.user
+          ? { ...state.user, email_notifications_enabled: !checked }
+          : null,
       }));
       toast.error(toUserMessage(err));
-      logError(err, { scope: "settings.emailNotifications" });
+      logError(err, { scope: 'settings.emailNotifications' });
     }
   };
 
-  const initials = user?.email_prefix?.slice(0, 2).toUpperCase() ?? "?";
+  const initials = user?.email_prefix?.slice(0, 2).toUpperCase() ?? '?';
 
   return (
     <div className="flex h-screen flex-col">
@@ -127,9 +141,7 @@ export default function SettingsPage() {
             </AvatarFallback>
           </Avatar>
           <div className="min-w-0 flex-1">
-            <p className="truncate text-sm font-medium">
-              {user?.email_prefix}
-            </p>
+            <p className="truncate text-sm font-medium">{user?.email_prefix}</p>
             <Muted className="text-xs">{user?.email}</Muted>
           </div>
         </div>
@@ -171,7 +183,7 @@ export default function SettingsPage() {
           <SettingsRow
             icon={<Mic className="size-4" />}
             label="Audio & Video"
-            onClick={() => navigate("/settings/audio-video")}
+            onClick={() => navigate('/settings/audio-video')}
           />
         </SettingsGroup>