refactor: sidebar

apps/ui/eslint.config.mjs

@@ -5,6 +5,18 @@ import tsParser from "@typescript-eslint/parser";
 
 const eslintConfig = defineConfig([
   js.configs.recommended,
+  {
+    files: ["**/*.mjs", "**/*.cjs"],
+    languageOptions: {
+      globals: {
+        console: "readonly",
+        process: "readonly",
+        require: "readonly",
+        __dirname: "readonly",
+        __filename: "readonly",
+      },
+    },
+  },
   {
     files: ["**/*.ts", "**/*.tsx"],
     languageOptions: {
@@ -13,6 +25,70 @@ const eslintConfig = defineConfig([
         ecmaVersion: "latest",
         sourceType: "module",
       },
+      globals: {
+        // Browser/DOM APIs
+        window: "readonly",
+        document: "readonly",
+        navigator: "readonly",
+        Navigator: "readonly",
+        localStorage: "readonly",
+        sessionStorage: "readonly",
+        fetch: "readonly",
+        WebSocket: "readonly",
+        File: "readonly",
+        FileList: "readonly",
+        FileReader: "readonly",
+        Blob: "readonly",
+        atob: "readonly",
+        crypto: "readonly",
+        prompt: "readonly",
+        confirm: "readonly",
+        getComputedStyle: "readonly",
+        requestAnimationFrame: "readonly",
+        // DOM Element Types
+        HTMLElement: "readonly",
+        HTMLInputElement: "readonly",
+        HTMLDivElement: "readonly",
+        HTMLButtonElement: "readonly",
+        HTMLSpanElement: "readonly",
+        HTMLTextAreaElement: "readonly",
+        HTMLHeadingElement: "readonly",
+        HTMLParagraphElement: "readonly",
+        HTMLImageElement: "readonly",
+        Element: "readonly",
+        // Event Types
+        Event: "readonly",
+        KeyboardEvent: "readonly",
+        DragEvent: "readonly",
+        PointerEvent: "readonly",
+        CustomEvent: "readonly",
+        ClipboardEvent: "readonly",
+        WheelEvent: "readonly",
+        DataTransfer: "readonly",
+        // Web APIs
+        ResizeObserver: "readonly",
+        AbortSignal: "readonly",
+        Audio: "readonly",
+        ScrollBehavior: "readonly",
+        // Timers
+        setTimeout: "readonly",
+        setInterval: "readonly",
+        clearTimeout: "readonly",
+        clearInterval: "readonly",
+        // Node.js (for scripts and Electron)
+        process: "readonly",
+        require: "readonly",
+        __dirname: "readonly",
+        __filename: "readonly",
+        NodeJS: "readonly",
+        // React
+        React: "readonly",
+        JSX: "readonly",
+        // Electron
+        Electron: "readonly",
+        // Console
+        console: "readonly",
+      },
     },
     plugins: {
       "@typescript-eslint": ts,

apps/ui/src/App.tsx → apps/ui/src/app.tsx

@@ -1,15 +1,15 @@
-import { useState, useCallback } from "react";
-import { RouterProvider } from "@tanstack/react-router";
-import { router } from "./utils/router";
-import { SplashScreen } from "./components/splash-screen";
-import { useSettingsMigration } from "./hooks/use-settings-migration";
-import "./styles/global.css";
-import "./styles/theme-imports";
+import { useState, useCallback } from 'react';
+import { RouterProvider } from '@tanstack/react-router';
+import { router } from './utils/router';
+import { SplashScreen } from './components/splash-screen';
+import { useSettingsMigration } from './hooks/use-settings-migration';
+import './styles/global.css';
+import './styles/theme-imports';
 
 export default function App() {
   const [showSplash, setShowSplash] = useState(() => {
     // Only show splash once per session
-    if (sessionStorage.getItem("automaker-splash-shown")) {
+    if (sessionStorage.getItem('automaker-splash-shown')) {
       return false;
     }
     return true;
@@ -18,11 +18,11 @@ export default function App() {
   // Run settings migration on startup (localStorage -> file storage)
   const migrationState = useSettingsMigration();
   if (migrationState.migrated) {
-    console.log("[App] Settings migrated to file storage");
+    console.log('[App] Settings migrated to file storage');
   }
 
   const handleSplashComplete = useCallback(() => {
-    sessionStorage.setItem("automaker-splash-shown", "true");
+    sessionStorage.setItem('automaker-splash-shown', 'true');
     setShowSplash(false);
   }, []);
 

apps/ui/src/components/delete-all-archived-sessions-dialog.tsx → apps/ui/src/components/dialogs/delete-all-archived-sessions-dialog.tsx

@@ -1,14 +1,13 @@
-
 import {
   Dialog,
   DialogContent,
   DialogDescription,
   DialogFooter,
   DialogHeader,
   DialogTitle,
-} from "@/components/ui/dialog";
-import { Button } from "@/components/ui/button";
-import { Trash2 } from "lucide-react";
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Trash2 } from 'lucide-react';
 
 interface DeleteAllArchivedSessionsDialogProps {
   open: boolean;
@@ -29,8 +28,7 @@ export function DeleteAllArchivedSessionsDialog({
         <DialogHeader>
           <DialogTitle>Delete All Archived Sessions</DialogTitle>
           <DialogDescription>
-            Are you sure you want to delete all archived sessions? This action
-            cannot be undone.
+            Are you sure you want to delete all archived sessions? This action cannot be undone.
             {archivedCount > 0 && (
               <span className="block mt-2 text-yellow-500">
                 {archivedCount} session(s) will be deleted.

apps/ui/src/components/delete-session-dialog.tsx → apps/ui/src/components/dialogs/delete-session-dialog.tsx

@@ -1,6 +1,6 @@
-import { MessageSquare } from "lucide-react";
-import { DeleteConfirmDialog } from "@/components/ui/delete-confirm-dialog";
-import type { SessionListItem } from "@/types/electron";
+import { MessageSquare } from 'lucide-react';
+import { DeleteConfirmDialog } from '@/components/ui/delete-confirm-dialog';
+import type { SessionListItem } from '@/types/electron';
 
 interface DeleteSessionDialogProps {
   open: boolean;
@@ -38,12 +38,8 @@ export function DeleteSessionDialog({
             <MessageSquare className="w-5 h-5 text-brand-500" />
           </div>
           <div className="min-w-0">
-            <p className="font-medium text-foreground truncate">
-              {session.name}
-            </p>
-            <p className="text-xs text-muted-foreground">
-              {session.messageCount} messages
-            </p>
+            <p className="font-medium text-foreground truncate">{session.name}</p>
+            <p className="text-xs text-muted-foreground">{session.messageCount} messages</p>
           </div>
         </div>
       )}