feat: initial ui redesign from demo

components.json

@@ -1,15 +1,17 @@
 {
   "$schema": "https://ui.shadcn.com/schema.json",
-  "style": "new-york",
+  "style": "radix-lyra",
   "rsc": false,
   "tsx": true,
   "tailwind": {
     "config": "",
     "css": "src/index.css",
-    "baseColor": "zinc",
+    "baseColor": "neutral",
     "cssVariables": true,
     "prefix": ""
   },
+  "iconLibrary": "lucide",
+  "rtl": false,
   "aliases": {
     "components": "@/components",
     "utils": "@/lib/utils",
@@ -17,5 +19,7 @@
     "lib": "@/lib",
     "hooks": "@/hooks"
   },
-  "iconLibrary": "lucide"
+  "menuColor": "default",
+  "menuAccent": "subtle",
+  "registries": {}
 }

package.json

@@ -77,6 +77,7 @@
     "@electron/notarize": "^3.1.1",
     "@electron/rebuild": "^4.0.4",
     "@eslint/js": "^9.0.0",
+    "@fontsource-variable/jetbrains-mono": "^5.2.8",
     "@hookform/resolvers": "^5.2.2",
     "@monaco-editor/react": "^4.7.0",
     "@radix-ui/react-accordion": "^1.2.12",
@@ -140,6 +141,7 @@
     "lucide-react": "^1.11.0",
     "next-themes": "^0.4.6",
     "prettier": "3.8.3",
+    "radix-ui": "^1.4.3",
     "react": "^19.2.5",
     "react-cytoscapejs": "^2.0.0",
     "react-dom": "^19.2.5",
@@ -157,12 +159,16 @@
     "react-xtermjs": "^1.0.10",
     "recharts": "^3.8.1",
     "remark-gfm": "^4.0.1",
+    "shadcn": "^4.7.0",
+    "sharp": "^0.34.5",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.5.0",
     "tailwindcss": "^4.2.4",
+    "tw-animate-css": "^1.4.0",
     "typescript": "~6.0.3",
     "typescript-eslint": "^8.59.0",
     "vite": "^8.0.10",
+    "vite-plugin-svgr": "^5.2.0",
     "zod": "^4.3.6"
   },
   "lint-staged": {

scripts/generate-icons.mjs

@@ -0,0 +1,117 @@
+import sharp from 'sharp';
+import { readFileSync, writeFileSync, mkdirSync } from 'fs';
+import { join, dirname } from 'path';
+import { fileURLToPath } from 'url';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const root = join(__dirname, '..');
+const publicDir = join(root, 'public');
+const iconsDir = join(publicDir, 'icons');
+
+mkdirSync(iconsDir, { recursive: true });
+
+const svgBuffer = readFileSync(join(publicDir, 'icon.svg'));
+
+const pngSizes = [16, 24, 32, 48, 64, 128, 256, 512, 1024];
+
+console.log('Generating PNG icons...');
+await Promise.all(
+  pngSizes.map(size =>
+    sharp(svgBuffer)
+      .resize(size, size)
+      .png()
+      .toFile(join(iconsDir, `${size}x${size}.png`))
+      .then(() => console.log(`  ✓ icons/${size}x${size}.png`))
+  )
+);
+
+// icon.png (1024x1024) for Linux electron-builder
+await sharp(svgBuffer).resize(1024, 1024).png().toFile(join(publicDir, 'icon.png'));
+console.log('  ✓ icon.png');
+
+// icon-mac.png (512x512) for macOS
+await sharp(svgBuffer).resize(512, 512).png().toFile(join(publicDir, 'icon-mac.png'));
+console.log('  ✓ icon-mac.png');
+
+// full-icon.png (1024x1024) used in app UI
+await sharp(svgBuffer).resize(1024, 1024).png().toFile(join(publicDir, 'full-icon.png'));
+console.log('  ✓ full-icon.png');
+
+// favicon.ico — embed 16, 32, 48 px layers
+console.log('Generating favicon.ico...');
+const icoSizes = [16, 32, 48];
+const icoBuffers = await Promise.all(
+  icoSizes.map(size =>
+    sharp(svgBuffer).resize(size, size).png().toBuffer()
+  )
+);
+writeFileSync(join(publicDir, 'favicon.ico'), buildIco(icoBuffers, icoSizes));
+console.log('  ✓ favicon.ico');
+
+// icon.ico — embed 16, 32, 48, 64, 128, 256 px layers
+console.log('Generating icon.ico...');
+const winSizes = [16, 32, 48, 64, 128, 256];
+const winBuffers = await Promise.all(
+  winSizes.map(size =>
+    sharp(svgBuffer).resize(size, size).png().toBuffer()
+  )
+);
+writeFileSync(join(publicDir, 'icon.ico'), buildIco(winBuffers, winSizes));
+console.log('  ✓ icon.ico');
+
+// icons/icon.ico and icons/icon.icns placeholders (stubs pointing to source)
+// electron-builder generates .icns; copy the 1024 PNG as icons/icon.png for reference
+await sharp(svgBuffer).resize(1024, 1024).png().toFile(join(iconsDir, 'icon.ico').replace('icon.ico', '1024x1024.png'));
+// Copy icon.ico and icon.icns into icons/ as well
+import { copyFileSync } from 'fs';
+copyFileSync(join(publicDir, 'icon.ico'), join(iconsDir, 'icon.ico'));
+console.log('  ✓ icons/icon.ico');
+
+console.log('\nDone! Note: icon.icns requires macOS tools (iconutil). Use electron-builder on macOS to generate it.');
+
+/**
+ * Builds a minimal ICO file from PNG buffers.
+ * @param {Buffer[]} pngBuffers
+ * @param {number[]} sizes
+ * @returns {Buffer}
+ */
+function buildIco(pngBuffers, sizes) {
+  const count = pngBuffers.length;
+  const headerSize = 6;
+  const dirEntrySize = 16;
+  const dirSize = headerSize + count * dirEntrySize;
+
+  let offset = dirSize;
+  const entries = pngBuffers.map((buf, i) => {
+    const size = sizes[i];
+    const entry = { size, width: size > 255 ? 0 : size, height: size > 255 ? 0 : size, buf, offset };
+    offset += buf.length;
+    return entry;
+  });
+
+  const totalSize = offset;
+  const ico = Buffer.alloc(totalSize);
+
+  // ICO header
+  ico.writeUInt16LE(0, 0);      // reserved
+  ico.writeUInt16LE(1, 2);      // type: 1 = ICO
+  ico.writeUInt16LE(count, 4);  // image count
+
+  // Directory entries
+  entries.forEach((e, i) => {
+    const base = headerSize + i * dirEntrySize;
+    ico.writeUInt8(e.width, base);       // width (0 = 256)
+    ico.writeUInt8(e.height, base + 1);  // height (0 = 256)
+    ico.writeUInt8(0, base + 2);         // color count
+    ico.writeUInt8(0, base + 3);         // reserved
+    ico.writeUInt16LE(1, base + 4);      // planes
+    ico.writeUInt16LE(32, base + 6);     // bit count
+    ico.writeUInt32LE(e.buf.length, base + 8);  // size of image data
+    ico.writeUInt32LE(e.offset, base + 12);     // offset of image data
+  });
+
+  // Image data
+  entries.forEach(e => e.buf.copy(ico, e.offset));
+
+  return ico;
+}

src/backend/database/db/index.ts

@@ -1044,6 +1044,23 @@ const migrateSchema = () => {
     { column: "host_key_changed_count", sql: "ALTER TABLE ssh_data ADD COLUMN host_key_changed_count INTEGER NOT NULL DEFAULT 0" },
     { column: "mac_address", sql: "ALTER TABLE ssh_data ADD COLUMN mac_address TEXT" },
     { column: "port_knock_sequence", sql: "ALTER TABLE ssh_data ADD COLUMN port_knock_sequence TEXT" },
+    { column: "enable_ssh", sql: "ALTER TABLE ssh_data ADD COLUMN enable_ssh INTEGER NOT NULL DEFAULT 1" },
+    { column: "enable_rdp", sql: "ALTER TABLE ssh_data ADD COLUMN enable_rdp INTEGER NOT NULL DEFAULT 0" },
+    { column: "enable_vnc", sql: "ALTER TABLE ssh_data ADD COLUMN enable_vnc INTEGER NOT NULL DEFAULT 0" },
+    { column: "enable_telnet", sql: "ALTER TABLE ssh_data ADD COLUMN enable_telnet INTEGER NOT NULL DEFAULT 0" },
+    { column: "ssh_port", sql: "ALTER TABLE ssh_data ADD COLUMN ssh_port INTEGER DEFAULT 22" },
+    { column: "rdp_port", sql: "ALTER TABLE ssh_data ADD COLUMN rdp_port INTEGER DEFAULT 3389" },
+    { column: "vnc_port", sql: "ALTER TABLE ssh_data ADD COLUMN vnc_port INTEGER DEFAULT 5900" },
+    { column: "telnet_port", sql: "ALTER TABLE ssh_data ADD COLUMN telnet_port INTEGER DEFAULT 23" },
+    { column: "rdp_user", sql: "ALTER TABLE ssh_data ADD COLUMN rdp_user TEXT" },
+    { column: "rdp_password", sql: "ALTER TABLE ssh_data ADD COLUMN rdp_password TEXT" },
+    { column: "rdp_domain", sql: "ALTER TABLE ssh_data ADD COLUMN rdp_domain TEXT" },
+    { column: "rdp_security", sql: "ALTER TABLE ssh_data ADD COLUMN rdp_security TEXT" },
+    { column: "rdp_ignore_cert", sql: "ALTER TABLE ssh_data ADD COLUMN rdp_ignore_cert INTEGER DEFAULT 0" },
+    { column: "vnc_password", sql: "ALTER TABLE ssh_data ADD COLUMN vnc_password TEXT" },
+    { column: "vnc_user", sql: "ALTER TABLE ssh_data ADD COLUMN vnc_user TEXT" },
+    { column: "telnet_user", sql: "ALTER TABLE ssh_data ADD COLUMN telnet_user TEXT" },
+    { column: "telnet_password", sql: "ALTER TABLE ssh_data ADD COLUMN telnet_password TEXT" },
   ];
 
   for (const migration of sshDataMigrations) {

src/backend/database/db/schema.ts

@@ -129,6 +129,28 @@ export const hosts = sqliteTable("ssh_data", {
   terminalConfig: text("terminal_config"),
   quickActions: text("quick_actions"),
   notes: text("notes"),
+  enableSsh: integer("enable_ssh", { mode: "boolean" }).notNull().default(true),
+  enableRdp: integer("enable_rdp", { mode: "boolean" }).notNull().default(false),
+  enableVnc: integer("enable_vnc", { mode: "boolean" }).notNull().default(false),
+  enableTelnet: integer("enable_telnet", { mode: "boolean" }).notNull().default(false),
+
+  sshPort: integer("ssh_port").default(22),
+  rdpPort: integer("rdp_port").default(3389),
+  vncPort: integer("vnc_port").default(5900),
+  telnetPort: integer("telnet_port").default(23),
+
+  rdpUser: text("rdp_user"),
+  rdpPassword: text("rdp_password"),
+  rdpDomain: text("rdp_domain"),
+  rdpSecurity: text("rdp_security"),
+  rdpIgnoreCert: integer("rdp_ignore_cert", { mode: "boolean" }).default(false),
+
+  vncPassword: text("vnc_password"),
+  vncUser: text("vnc_user"),
+
+  telnetUser: text("telnet_user"),
+  telnetPassword: text("telnet_password"),
+
   domain: text("domain"),
   security: text("security"),
   ignoreCert: integer("ignore_cert", { mode: "boolean" }).default(false),

src/backend/database/routes/host.ts

@@ -252,6 +252,9 @@ const SENSITIVE_FIELDS = [
   "autostartKey",
   "autostartKeyPassword",
   "socks5Password",
+  "rdpPassword",
+  "vncPassword",
+  "telnetPassword",
 ];
 
 function stripSensitiveFields(
@@ -288,6 +291,23 @@ function transformHostResponse(
     showTunnelInSidebar: !!host.showTunnelInSidebar,
     showDockerInSidebar: !!host.showDockerInSidebar,
     showServerStatsInSidebar: !!host.showServerStatsInSidebar,
+    enableSsh: host.enableSsh !== undefined ? !!host.enableSsh : true,
+    enableRdp: !!host.enableRdp,
+    enableVnc: !!host.enableVnc,
+    enableTelnet: !!host.enableTelnet,
+    sshPort: host.sshPort ?? host.port ?? 22,
+    rdpPort: host.rdpPort ?? 3389,
+    vncPort: host.vncPort ?? 5900,
+    telnetPort: host.telnetPort ?? 23,
+    rdpUser: host.rdpUser || undefined,
+    rdpDomain: host.rdpDomain || undefined,
+    rdpSecurity: host.rdpSecurity || undefined,
+    rdpIgnoreCert: !!host.rdpIgnoreCert,
+    vncUser: host.vncUser || undefined,
+    telnetUser: host.telnetUser || undefined,
+    hasRdpPassword: !!host.rdpPassword,
+    hasVncPassword: !!host.vncPassword,
+    hasTelnetPassword: !!host.telnetPassword,
     tunnelConnections: host.tunnelConnections
       ? JSON.parse(host.tunnelConnections as string)
       : [],
@@ -593,6 +613,23 @@ router.post(
       portKnockSequence,
       overrideCredentialUsername,
       macAddress,
+      enableSsh,
+      enableRdp,
+      enableVnc,
+      enableTelnet,
+      sshPort,
+      rdpPort,
+      vncPort,
+      telnetPort,
+      rdpUser,
+      rdpPassword,
+      rdpDomain,
+      rdpSecurity,
+      rdpIgnoreCert,
+      vncPassword,
+      vncUser,
+      telnetUser,
+      telnetPassword,
     } = hostData;
     databaseLogger.info("Creating SSH host", {
       operation: "host_create",
@@ -685,6 +722,20 @@ router.post(
       portKnockSequence: portKnockSequence
         ? JSON.stringify(portKnockSequence)
         : null,
+      enableSsh: enableSsh !== false ? 1 : 0,
+      enableRdp: enableRdp ? 1 : 0,
+      enableVnc: enableVnc ? 1 : 0,
+      enableTelnet: enableTelnet ? 1 : 0,
+      sshPort: sshPort || port || 22,
+      rdpPort: rdpPort || 3389,
+      vncPort: vncPort || 5900,
+      telnetPort: telnetPort || 23,
+      rdpUser: rdpUser || null,
+      rdpDomain: rdpDomain || null,
+      rdpSecurity: rdpSecurity || null,
+      rdpIgnoreCert: rdpIgnoreCert ? 1 : 0,
+      vncUser: vncUser || null,
+      telnetUser: telnetUser || null,
     };
 
     // For non-SSH hosts (RDP, VNC, Telnet), always save password if provided
@@ -743,6 +794,10 @@ router.post(
       sshDataObj.keyType = null;
     }
 
+    sshDataObj.rdpPassword = rdpPassword || null;
+    sshDataObj.vncPassword = vncPassword || null;
+    sshDataObj.telnetPassword = telnetPassword || null;
+
     try {
       const result = await SimpleDBOps.insert(
         hosts,
@@ -1092,6 +1147,23 @@ router.put(
       portKnockSequence,
       overrideCredentialUsername,
       macAddress,
+      enableSsh,
+      enableRdp,
+      enableVnc,
+      enableTelnet,
+      sshPort,
+      rdpPort,
+      vncPort,
+      telnetPort,
+      rdpUser,
+      rdpPassword,
+      rdpDomain,
+      rdpSecurity,
+      rdpIgnoreCert,
+      vncPassword,
+      vncUser,
+      telnetUser,
+      telnetPassword,
     } = hostData;
     databaseLogger.info("Updating SSH host", {
       operation: "host_update",
@@ -1181,6 +1253,20 @@ router.put(
       portKnockSequence: portKnockSequence
         ? JSON.stringify(portKnockSequence)
         : null,
+      enableSsh: enableSsh !== false ? 1 : 0,
+      enableRdp: enableRdp ? 1 : 0,
+      enableVnc: enableVnc ? 1 : 0,
+      enableTelnet: enableTelnet ? 1 : 0,
+      sshPort: sshPort || port || 22,
+      rdpPort: rdpPort || 3389,
+      vncPort: vncPort || 5900,
+      telnetPort: telnetPort || 23,
+      rdpUser: rdpUser || null,
+      rdpDomain: rdpDomain || null,
+      rdpSecurity: rdpSecurity || null,
+      rdpIgnoreCert: rdpIgnoreCert ? 1 : 0,
+      vncUser: vncUser || null,
+      telnetUser: telnetUser || null,
     };
 
     // For non-SSH hosts (RDP, VNC, Telnet), always save password if provided
@@ -1249,6 +1335,11 @@ router.put(
       sshDataObj.keyType = null;
     }
 
+    if (rdpPassword !== undefined) sshDataObj.rdpPassword = rdpPassword || null;
+    if (vncPassword !== undefined) sshDataObj.vncPassword = vncPassword || null;
+    if (telnetPassword !== undefined)
+      sshDataObj.telnetPassword = telnetPassword || null;
+
     try {
       const accessInfo = await permissionManager.canAccessHost(
         userId,

src/backend/ssh/server-stats.ts

@@ -676,7 +676,18 @@ interface StatsConfig {
 }
 
 const DEFAULT_STATS_CONFIG: StatsConfig = {
-  enabledWidgets: ["cpu", "memory", "disk", "network", "uptime", "system"],
+  enabledWidgets: [
+    "cpu",
+    "memory",
+    "disk",
+    "network",
+    "uptime",
+    "system",
+    "login_stats",
+    "processes",
+    "ports",
+    "firewall",
+  ],
   statusCheckEnabled: true,
   statusCheckInterval: 60,
   metricsEnabled: true,

src/backend/swagger.ts

@@ -1,161 +0,0 @@
-import swaggerJSDoc from "@deadendjs/swagger-jsdoc";
-import path from "path";
-import { fileURLToPath } from "url";
-import { promises as fs } from "fs";
-import { systemLogger } from "./utils/logger.js";
-
-interface SwaggerOptions {
-  definition: object;
-  apis: string[];
-}
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-
-const projectRoot = path.join(__dirname, "..", "..", "..");
-
-const swaggerOptions: SwaggerOptions = {
-  definition: {
-    openapi: "3.0.3",
-    info: {
-      title: "Termix API",
-      version: "0.0.0",
-      description: "Termix Backend API Reference",
-    },
-    servers: [
-      {
-        url: "http://localhost:30001",
-        description: "Main database and authentication server",
-      },
-      {
-        url: "http://localhost:30003",
-        description: "SSH tunnel management server",
-      },
-      {
-        url: "http://localhost:30004",
-        description: "SSH file manager server",
-      },
-      {
-        url: "http://localhost:30005",
-        description: "Server statistics and monitoring server",
-      },
-      {
-        url: "http://localhost:30006",
-        description: "Dashboard server",
-      },
-      {
-        url: "http://localhost:30007",
-        description: "Docker management server",
-      },
-    ],
-    components: {
-      securitySchemes: {
-        bearerAuth: {
-          type: "http",
-          scheme: "bearer",
-          bearerFormat: "JWT",
-        },
-      },
-      schemas: {
-        Error: {
-          type: "object",
-          properties: {
-            error: { type: "string" },
-            details: { type: "string" },
-          },
-        },
-      },
-    },
-    security: [
-      {
-        bearerAuth: [],
-      },
-    ],
-    tags: [
-      {
-        name: "Alerts",
-        description: "System alerts and notifications management",
-      },
-      {
-        name: "Credentials",
-        description: "SSH credential management",
-      },
-      {
-        name: "Network Topology",
-        description: "Network topology visualization and management",
-      },
-      {
-        name: "RBAC",
-        description: "Role-based access control for host sharing",
-      },
-      {
-        name: "Snippets",
-        description: "Command snippet management",
-      },
-      {
-        name: "Terminal",
-        description: "Terminal command history",
-      },
-      {
-        name: "Users",
-        description: "User management and authentication",
-      },
-      {
-        name: "Dashboard",
-        description: "Dashboard statistics and activity",
-      },
-      {
-        name: "Docker",
-        description: "Docker container management",
-      },
-      {
-        name: "SSH Tunnels",
-        description: "SSH tunnel connection management",
-      },
-      {
-        name: "Server Stats",
-        description: "Server status monitoring and metrics collection",
-      },
-      {
-        name: "File Manager",
-        description: "SSH file management operations",
-      },
-    ],
-  },
-  apis: [
-    path.join(projectRoot, "src", "backend", "database", "routes", "*.ts"),
-    path.join(projectRoot, "src", "backend", "dashboard.ts"),
-    path.join(projectRoot, "src", "backend", "ssh", "*.ts"),
-  ],
-};
-
-async function generateOpenAPISpec() {
-  try {
-    systemLogger.info("Generating OpenAPI specification", {
-      operation: "openapi_generate_start",
-    });
-
-    const swaggerSpec = await swaggerJSDoc(swaggerOptions);
-
-    const outputPath = path.join(projectRoot, "openapi.json");
-
-    await fs.writeFile(
-      outputPath,
-      JSON.stringify(swaggerSpec, null, 2),
-      "utf-8",
-    );
-
-    systemLogger.success("OpenAPI specification generated", {
-      operation: "openapi_generate_success",
-    });
-  } catch (error) {
-    systemLogger.error("Failed to generate OpenAPI specification", error, {
-      operation: "openapi_generation",
-    });
-    process.exit(1);
-  }
-}
-
-generateOpenAPISpec();
-
-export { swaggerOptions, generateOpenAPISpec };

src/backend/utils/field-crypto.ts

@@ -30,6 +30,10 @@ class FieldCrypto {
       "autostartPassword",
       "autostartKey",
       "autostartKeyPassword",
+      "socks5Password",
+      "rdpPassword",
+      "vncPassword",
+      "telnetPassword",
     ]),
     ssh_credentials: new Set([
       "password",

src/backend/utils/lazy-field-encryption.ts

@@ -267,6 +267,10 @@ export class LazyFieldEncryption {
     autostartPassword: "autostart_password",
     autostartKey: "autostart_key",
     autostartKeyPassword: "autostart_key_password",
+    socks5Password: "socks5_password",
+    rdpPassword: "rdp_password",
+    vncPassword: "vnc_password",
+    telnetPassword: "telnet_password",
     totpSecret: "totp_secret",
     totpBackupCodes: "totp_backup_codes",
     clientSecret: "client_secret",

src/backend/utils/user-data-import.ts

@@ -1,492 +0,0 @@
-import { getDb } from "../database/db/index.js";
-import {
-  users,
-  hosts,
-  sshCredentials,
-  fileManagerRecent,
-  fileManagerPinned,
-  fileManagerShortcuts,
-  dismissedAlerts,
-} from "../database/db/schema.js";
-import { eq, and } from "drizzle-orm";
-import { DataCrypto } from "./data-crypto.js";
-import { UserDataExport, type UserExportData } from "./user-data-export.js";
-import { databaseLogger } from "./logger.js";
-
-interface ImportOptions {
-  replaceExisting?: boolean;
-  skipCredentials?: boolean;
-  skipFileManagerData?: boolean;
-  dryRun?: boolean;
-}
-
-interface ImportResult {
-  success: boolean;
-  summary: {
-    sshHostsImported: number;
-    sshCredentialsImported: number;
-    fileManagerItemsImported: number;
-    dismissedAlertsImported: number;
-    skippedItems: number;
-    errors: string[];
-  };
-  dryRun: boolean;
-}
-
-class UserDataImport {
-  static async importUserData(
-    targetUserId: string,
-    exportData: UserExportData,
-    options: ImportOptions = {},
-  ): Promise<ImportResult> {
-    const {
-      replaceExisting = false,
-      skipCredentials = false,
-      skipFileManagerData = false,
-      dryRun = false,
-    } = options;
-
-    try {
-      const targetUser = await getDb()
-        .select()
-        .from(users)
-        .where(eq(users.id, targetUserId));
-      if (!targetUser || targetUser.length === 0) {
-        throw new Error(`Target user not found: ${targetUserId}`);
-      }
-
-      const validation = UserDataExport.validateExportData(exportData);
-      if (!validation.valid) {
-        throw new Error(`Invalid export data: ${validation.errors.join(", ")}`);
-      }
-
-      let userDataKey: Buffer | null = null;
-      if (exportData.metadata.encrypted) {
-        userDataKey = DataCrypto.getUserDataKey(targetUserId);
-        if (!userDataKey) {
-          throw new Error(
-            "Target user data not unlocked - password required for encrypted import",
-          );
-        }
-      }
-
-      const result: ImportResult = {
-        success: false,
-        summary: {
-          sshHostsImported: 0,
-          sshCredentialsImported: 0,
-          fileManagerItemsImported: 0,
-          dismissedAlertsImported: 0,
-          skippedItems: 0,
-          errors: [],
-        },
-        dryRun,
-      };
-
-      if (
-        exportData.userData.sshHosts &&
-        exportData.userData.sshHosts.length > 0
-      ) {
-        const importStats = await this.importSshHosts(
-          targetUserId,
-          exportData.userData.sshHosts as Record<string, unknown>[],
-          { replaceExisting, dryRun, userDataKey },
-        );
-        result.summary.sshHostsImported = importStats.imported;
-        result.summary.skippedItems += importStats.skipped;
-        result.summary.errors.push(...importStats.errors);
-      }
-
-      if (
-        !skipCredentials &&
-        exportData.userData.sshCredentials &&
-        exportData.userData.sshCredentials.length > 0
-      ) {
-        const importStats = await this.importSshCredentials(
-          targetUserId,
-          exportData.userData.sshCredentials as Record<string, unknown>[],
-          { replaceExisting, dryRun, userDataKey },
-        );
-        result.summary.sshCredentialsImported = importStats.imported;
-        result.summary.skippedItems += importStats.skipped;
-        result.summary.errors.push(...importStats.errors);
-      }
-
-      if (!skipFileManagerData && exportData.userData.fileManagerData) {
-        const importStats = await this.importFileManagerData(
-          targetUserId,
-          exportData.userData.fileManagerData,
-          { replaceExisting, dryRun },
-        );
-        result.summary.fileManagerItemsImported = importStats.imported;
-        result.summary.skippedItems += importStats.skipped;
-        result.summary.errors.push(...importStats.errors);
-      }
-
-      if (
-        exportData.userData.dismissedAlerts &&
-        exportData.userData.dismissedAlerts.length > 0
-      ) {
-        const importStats = await this.importDismissedAlerts(
-          targetUserId,
-          exportData.userData.dismissedAlerts as Record<string, unknown>[],
-          { replaceExisting, dryRun },
-        );
-        result.summary.dismissedAlertsImported = importStats.imported;
-        result.summary.skippedItems += importStats.skipped;
-        result.summary.errors.push(...importStats.errors);
-      }
-
-      result.success = result.summary.errors.length === 0;
-
-      databaseLogger.success("User data import completed", {
-        operation: "user_data_import_complete",
-        targetUserId,
-        dryRun,
-        ...result.summary,
-      });
-
-      return result;
-    } catch (error) {
-      databaseLogger.error("User data import failed", error, {
-        operation: "user_data_import_failed",
-        targetUserId,
-        dryRun,
-      });
-      throw error;
-    }
-  }
-
-  private static async importSshHosts(
-    targetUserId: string,
-    sshHosts: Record<string, unknown>[],
-    options: {
-      replaceExisting: boolean;
-      dryRun: boolean;
-      userDataKey: Buffer | null;
-    },
-  ) {
-    let imported = 0;
-    let skipped = 0;
-    const errors: string[] = [];
-
-    for (const host of sshHosts) {
-      try {
-        if (options.dryRun) {
-          imported++;
-          continue;
-        }
-
-        const existing = await getDb()
-          .select()
-          .from(hosts)
-          .where(
-            and(
-              eq(hosts.userId, targetUserId),
-              eq(hosts.ip, host.ip as string),
-              eq(hosts.port, host.port as number),
-              eq(hosts.username, host.username as string),
-            ),
-          );
-
-        if (existing.length > 0 && !options.replaceExisting) {
-          skipped++;
-          continue;
-        }
-
-        const newHostData: Record<string, unknown> = {
-          ...host,
-          userId: targetUserId,
-          updatedAt: new Date().toISOString(),
-        };
-
-        if (existing.length === 0) {
-          newHostData.createdAt = new Date().toISOString();
-        }
-
-        let processedHostData: Record<string, unknown> = newHostData;
-        if (options.userDataKey) {
-          processedHostData = DataCrypto.encryptRecord(
-            "ssh_data",
-            newHostData,
-            targetUserId,
-            options.userDataKey,
-          ) as Record<string, unknown>;
-        }
-
-        delete processedHostData.id;
-
-        if (existing.length > 0 && options.replaceExisting) {
-          await getDb()
-            .update(hosts)
-            .set(processedHostData as unknown as typeof hosts.$inferInsert)
-            .where(eq(hosts.id, existing[0].id));
-        } else {
-          await getDb()
-            .insert(hosts)
-            .values(processedHostData as unknown as typeof hosts.$inferInsert);
-        }
-        imported++;
-      } catch (error) {
-        errors.push(
-          `SSH host import failed: ${error instanceof Error ? error.message : "Unknown error"}`,
-        );
-        skipped++;
-      }
-    }
-
-    return { imported, skipped, errors };
-  }
-
-  private static async importSshCredentials(
-    targetUserId: string,
-    credentials: Record<string, unknown>[],
-    options: {
-      replaceExisting: boolean;
-      dryRun: boolean;
-      userDataKey: Buffer | null;
-    },
-  ) {
-    let imported = 0;
-    let skipped = 0;
-    const errors: string[] = [];
-
-    for (const credential of credentials) {
-      try {
-        if (options.dryRun) {
-          imported++;
-          continue;
-        }
-
-        const existing = await getDb()
-          .select()
-          .from(sshCredentials)
-          .where(
-            and(
-              eq(sshCredentials.userId, targetUserId),
-              eq(sshCredentials.name, credential.name as string),
-            ),
-          );
-
-        if (existing.length > 0 && !options.replaceExisting) {
-          skipped++;
-          continue;
-        }
-
-        const newCredentialData: Record<string, unknown> = {
-          ...credential,
-          userId: targetUserId,
-          updatedAt: new Date().toISOString(),
-        };
-
-        if (existing.length === 0) {
-          newCredentialData.usageCount = 0;
-          newCredentialData.lastUsed = null;
-          newCredentialData.createdAt = new Date().toISOString();
-        }
-
-        let processedCredentialData: Record<string, unknown> =
-          newCredentialData;
-        if (options.userDataKey) {
-          processedCredentialData = DataCrypto.encryptRecord(
-            "ssh_credentials",
-            newCredentialData,
-            targetUserId,
-            options.userDataKey,
-          ) as Record<string, unknown>;
-        }
-
-        delete processedCredentialData.id;
-
-        if (existing.length > 0 && options.replaceExisting) {
-          await getDb()
-            .update(sshCredentials)
-            .set(
-              processedCredentialData as unknown as typeof sshCredentials.$inferInsert,
-            )
-            .where(eq(sshCredentials.id, existing[0].id));
-        } else {
-          await getDb()
-            .insert(sshCredentials)
-            .values(
-              processedCredentialData as unknown as typeof sshCredentials.$inferInsert,
-            );
-        }
-        imported++;
-      } catch (error) {
-        errors.push(
-          `SSH credential import failed: ${error instanceof Error ? error.message : "Unknown error"}`,
-        );
-        skipped++;
-      }
-    }
-
-    return { imported, skipped, errors };
-  }
-
-  private static async importFileManagerData(
-    targetUserId: string,
-    fileManagerData: Record<string, unknown>,
-    options: { replaceExisting: boolean; dryRun: boolean },
-  ) {
-    let imported = 0;
-    let skipped = 0;
-    const errors: string[] = [];
-
-    try {
-      if (fileManagerData.recent && Array.isArray(fileManagerData.recent)) {
-        for (const item of fileManagerData.recent) {
-          try {
-            if (!options.dryRun) {
-              const newItem = {
-                ...item,
-                id: undefined,
-                userId: targetUserId,
-                lastOpened: new Date().toISOString(),
-              };
-              await getDb().insert(fileManagerRecent).values(newItem);
-            }
-            imported++;
-          } catch (error) {
-            errors.push(
-              `Recent file import failed: ${error instanceof Error ? error.message : "Unknown error"}`,
-            );
-            skipped++;
-          }
-        }
-      }
-
-      if (fileManagerData.pinned && Array.isArray(fileManagerData.pinned)) {
-        for (const item of fileManagerData.pinned) {
-          try {
-            if (!options.dryRun) {
-              const newItem = {
-                ...item,
-                id: undefined,
-                userId: targetUserId,
-                pinnedAt: new Date().toISOString(),
-              };
-              await getDb().insert(fileManagerPinned).values(newItem);
-            }
-            imported++;
-          } catch (error) {
-            errors.push(
-              `Pinned file import failed: ${error instanceof Error ? error.message : "Unknown error"}`,
-            );
-            skipped++;
-          }
-        }
-      }
-
-      if (
-        fileManagerData.shortcuts &&
-        Array.isArray(fileManagerData.shortcuts)
-      ) {
-        for (const item of fileManagerData.shortcuts) {
-          try {
-            if (!options.dryRun) {
-              const newItem = {
-                ...item,
-                id: undefined,
-                userId: targetUserId,
-                createdAt: new Date().toISOString(),
-              };
-              await getDb().insert(fileManagerShortcuts).values(newItem);
-            }
-            imported++;
-          } catch (error) {
-            errors.push(
-              `Shortcut import failed: ${error instanceof Error ? error.message : "Unknown error"}`,
-            );
-            skipped++;
-          }
-        }
-      }
-    } catch (error) {
-      errors.push(
-        `File manager data import failed: ${error instanceof Error ? error.message : "Unknown error"}`,
-      );
-    }
-
-    return { imported, skipped, errors };
-  }
-
-  private static async importDismissedAlerts(
-    targetUserId: string,
-    alerts: Record<string, unknown>[],
-    options: { replaceExisting: boolean; dryRun: boolean },
-  ) {
-    let imported = 0;
-    let skipped = 0;
-    const errors: string[] = [];
-
-    for (const alert of alerts) {
-      try {
-        if (options.dryRun) {
-          imported++;
-          continue;
-        }
-
-        const existing = await getDb()
-          .select()
-          .from(dismissedAlerts)
-          .where(
-            and(
-              eq(dismissedAlerts.userId, targetUserId),
-              eq(dismissedAlerts.alertId, alert.alertId as string),
-            ),
-          );
-
-        if (existing.length > 0 && !options.replaceExisting) {
-          skipped++;
-          continue;
-        }
-
-        const newAlert = {
-          ...alert,
-          id: undefined,
-          userId: targetUserId,
-          dismissedAt: new Date().toISOString(),
-        };
-
-        if (existing.length > 0 && options.replaceExisting) {
-          await getDb()
-            .update(dismissedAlerts)
-            .set(newAlert as typeof dismissedAlerts.$inferInsert)
-            .where(eq(dismissedAlerts.id, existing[0].id));
-        } else {
-          await getDb()
-            .insert(dismissedAlerts)
-            .values(newAlert as typeof dismissedAlerts.$inferInsert);
-        }
-
-        imported++;
-      } catch (error) {
-        errors.push(
-          `Dismissed alert import failed: ${error instanceof Error ? error.message : "Unknown error"}`,
-        );
-        skipped++;
-      }
-    }
-
-    return { imported, skipped, errors };
-  }
-
-  static async importUserDataFromJSON(
-    targetUserId: string,
-    jsonData: string,
-    options: ImportOptions = {},
-  ): Promise<ImportResult> {
-    try {
-      const exportData: UserExportData = JSON.parse(jsonData);
-      return await this.importUserData(targetUserId, exportData, options);
-    } catch (error) {
-      if (error instanceof SyntaxError) {
-        throw new Error("Invalid JSON format in import data", { cause: error });
-      }
-      throw error;
-    }
-  }
-}
-
-export { UserDataImport, type ImportOptions, type ImportResult };

src/components/ui/button.tsx

@@ -1,62 +0,0 @@
-/* eslint-disable react-refresh/only-export-components */
-import * as React from "react";
-import { Slot } from "@radix-ui/react-slot";
-import { cva, type VariantProps } from "class-variance-authority";
-
-import { cn } from "@/lib/utils";
-
-const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all duration-100 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive active:scale-95",
-  {
-    variants: {
-      variant: {
-        default:
-          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
-        destructive:
-          "bg-destructive text-foreground shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
-        outline:
-          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
-        secondary:
-          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
-        ghost:
-          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
-        link: "text-primary underline-offset-4 hover:underline",
-      },
-      size: {
-        default: "h-9 px-4 py-2 has-[>svg]:px-3",
-        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
-        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
-        icon: "size-9",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  },
-);
-
-export interface ButtonProps
-  extends React.ComponentProps<"button">, VariantProps<typeof buttonVariants> {
-  asChild?: boolean;
-}
-
-function Button({
-  className,
-  variant,
-  size,
-  asChild = false,
-  ...props
-}: ButtonProps) {
-  const Comp = asChild ? Slot : "button";
-
-  return (
-    <Comp
-      data-slot="button"
-      className={cn(buttonVariants({ variant, size, className }))}
-      {...props}
-    />
-  );
-}
-
-export { Button, buttonVariants, type ButtonProps };

src/components/ui/chart.tsx

@@ -1,24 +0,0 @@
-import * as React from "react";
-import * as RechartsPrimitive from "recharts";
-
-import { cn } from "@/lib/utils";
-
-// Chart Container
-const ChartContainer = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => {
-  return (
-    <div
-      ref={ref}
-      className={cn(
-        "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
-        className,
-      )}
-      {...props}
-    />
-  );
-});
-ChartContainer.displayName = "ChartContainer";
-
-export { ChartContainer, RechartsPrimitive };

src/components/ui/command.tsx

@@ -1,184 +0,0 @@
-"use client";
-
-import * as React from "react";
-import { Command as CommandPrimitive } from "cmdk";
-import { SearchIcon } from "lucide-react";
-
-import { cn } from "@/lib/utils";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
-
-function Command({
-  className,
-  ...props
-}: React.ComponentProps<typeof CommandPrimitive>) {
-  return (
-    <CommandPrimitive
-      data-slot="command"
-      className={cn(
-        "bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function CommandDialog({
-  title = "Command Palette",
-  description = "Search for a command to run...",
-  children,
-  className,
-  showCloseButton = true,
-  ...props
-}: React.ComponentProps<typeof Dialog> & {
-  title?: string;
-  description?: string;
-  className?: string;
-  showCloseButton?: boolean;
-}) {
-  return (
-    <Dialog {...props}>
-      <DialogHeader className="sr-only">
-        <DialogTitle>{title}</DialogTitle>
-        <DialogDescription>{description}</DialogDescription>
-      </DialogHeader>
-      <DialogContent
-        className={cn("overflow-hidden p-0", className)}
-        showCloseButton={showCloseButton}
-      >
-        <Command className="[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
-          {children}
-        </Command>
-      </DialogContent>
-    </Dialog>
-  );
-}
-
-function CommandInput({
-  className,
-  ...props
-}: React.ComponentProps<typeof CommandPrimitive.Input>) {
-  return (
-    <div
-      data-slot="command-input-wrapper"
-      className="flex h-9 items-center gap-2 border-b px-3"
-    >
-      <SearchIcon className="size-4 shrink-0 opacity-50" />
-      <CommandPrimitive.Input
-        data-slot="command-input"
-        className={cn(
-          "placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
-          className,
-        )}
-        {...props}
-      />
-    </div>
-  );
-}
-
-function CommandList({
-  className,
-  ...props
-}: React.ComponentProps<typeof CommandPrimitive.List>) {
-  return (
-    <CommandPrimitive.List
-      data-slot="command-list"
-      className={cn(
-        "max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto thin-scrollbar",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function CommandEmpty({
-  ...props
-}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
-  return (
-    <CommandPrimitive.Empty
-      data-slot="command-empty"
-      className="py-6 text-center text-sm"
-      {...props}
-    />
-  );
-}
-
-function CommandGroup({
-  className,
-  ...props
-}: React.ComponentProps<typeof CommandPrimitive.Group>) {
-  return (
-    <CommandPrimitive.Group
-      data-slot="command-group"
-      className={cn(
-        "text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function CommandSeparator({
-  className,
-  ...props
-}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
-  return (
-    <CommandPrimitive.Separator
-      data-slot="command-separator"
-      className={cn("bg-border -mx-1 h-px", className)}
-      {...props}
-    />
-  );
-}
-
-function CommandItem({
-  className,
-  ...props
-}: React.ComponentProps<typeof CommandPrimitive.Item>) {
-  return (
-    <CommandPrimitive.Item
-      data-slot="command-item"
-      className={cn(
-        "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function CommandShortcut({
-  className,
-  ...props
-}: React.ComponentProps<"span">) {
-  return (
-    <span
-      data-slot="command-shortcut"
-      className={cn(
-        "text-muted-foreground ml-auto text-xs tracking-widest",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-export {
-  Command,
-  CommandDialog,
-  CommandInput,
-  CommandList,
-  CommandEmpty,
-  CommandGroup,
-  CommandItem,
-  CommandShortcut,
-  CommandSeparator,
-};

src/components/ui/dropdown-menu.tsx

@@ -1,198 +0,0 @@
-import * as React from "react";
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
-import { CheckIcon, ChevronRightIcon, Circle } from "lucide-react";
-
-import { cn } from "@/lib/utils";
-
-const DropdownMenu = DropdownMenuPrimitive.Root;
-
-const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
-
-const DropdownMenuGroup = DropdownMenuPrimitive.Group;
-
-const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
-
-const DropdownMenuSub = DropdownMenuPrimitive.Sub;
-
-const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
-
-const DropdownMenuSubTrigger = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
-    inset?: boolean;
-  }
->(({ className, inset, children, ...props }, ref) => (
-  <DropdownMenuPrimitive.SubTrigger
-    ref={ref}
-    className={cn(
-      "focus:bg-accent data-[state=open]:bg-accent flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none",
-      inset && "pl-8",
-      className,
-    )}
-    {...props}
-  >
-    {children}
-    <ChevronRightIcon className="ml-auto h-4 w-4" />
-  </DropdownMenuPrimitive.SubTrigger>
-));
-DropdownMenuSubTrigger.displayName =
-  DropdownMenuPrimitive.SubTrigger.displayName;
-
-const DropdownMenuSubContent = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
->(({ className, ...props }, ref) => (
-  <DropdownMenuPrimitive.SubContent
-    ref={ref}
-    className={cn(
-      "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-lg",
-      className,
-    )}
-    {...props}
-  />
-));
-DropdownMenuSubContent.displayName =
-  DropdownMenuPrimitive.SubContent.displayName;
-
-const DropdownMenuContent = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
-  <DropdownMenuPrimitive.Portal>
-    <DropdownMenuPrimitive.Content
-      ref={ref}
-      sideOffset={sideOffset}
-      className={cn(
-        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-md",
-        className,
-      )}
-      {...props}
-    />
-  </DropdownMenuPrimitive.Portal>
-));
-DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
-
-const DropdownMenuItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
-    inset?: boolean;
-  }
->(({ className, inset, ...props }, ref) => (
-  <DropdownMenuPrimitive.Item
-    ref={ref}
-    className={cn(
-      "focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      inset && "pl-8",
-      className,
-    )}
-    {...props}
-  />
-));
-DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
-
-const DropdownMenuCheckboxItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
->(({ className, children, checked, ...props }, ref) => (
-  <DropdownMenuPrimitive.CheckboxItem
-    ref={ref}
-    className={cn(
-      "focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className,
-    )}
-    checked={checked}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <DropdownMenuPrimitive.ItemIndicator>
-        <CheckIcon className="h-4 w-4" />
-      </DropdownMenuPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </DropdownMenuPrimitive.CheckboxItem>
-));
-DropdownMenuCheckboxItem.displayName =
-  DropdownMenuPrimitive.CheckboxItem.displayName;
-
-const DropdownMenuRadioItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
->(({ className, children, ...props }, ref) => (
-  <DropdownMenuPrimitive.RadioItem
-    ref={ref}
-    className={cn(
-      "focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className,
-    )}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <DropdownMenuPrimitive.ItemIndicator>
-        <Circle className="h-4 w-4 fill-current" />
-      </DropdownMenuPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </DropdownMenuPrimitive.RadioItem>
-));
-DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
-
-const DropdownMenuLabel = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
-    inset?: boolean;
-  }
->(({ className, inset, ...props }, ref) => (
-  <DropdownMenuPrimitive.Label
-    ref={ref}
-    className={cn(
-      "px-2 py-1.5 text-sm font-semibold",
-      inset && "pl-8",
-      className,
-    )}
-    {...props}
-  />
-));
-DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
-
-const DropdownMenuSeparator = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <DropdownMenuPrimitive.Separator
-    ref={ref}
-    className={cn("bg-muted -mx-1 my-1 h-px", className)}
-    {...props}
-  />
-));
-DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
-
-const DropdownMenuShortcut = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLSpanElement>) => {
-  return (
-    <span
-      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
-      {...props}
-    />
-  );
-};
-DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
-
-export {
-  DropdownMenu,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuCheckboxItem,
-  DropdownMenuRadioItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuGroup,
-  DropdownMenuPortal,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuRadioGroup,
-};

src/components/ui/input.tsx

@@ -1,21 +0,0 @@
-import * as React from "react";
-
-import { cn } from "@/lib/utils";
-
-function Input({ className, type, ...props }: React.ComponentProps<"input">) {
-  return (
-    <input
-      type={type}
-      data-slot="input"
-      className={cn(
-        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground bg-elevated dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border px-3 py-1 text-base shadow-xs transition-[color,box-shadow] duration-200 outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
-        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-export { Input };

src/components/ui/kbd.tsx

@@ -1,59 +0,0 @@
-import { type ComponentProps, type ReactNode } from "react";
-import { cn } from "@/lib/utils";
-
-export type KbdProps = ComponentProps<"span"> & {
-  children: ReactNode;
-};
-
-export const Kbd = ({ className, children, ...props }: KbdProps) => (
-  <span
-    className={cn(
-      "inline-flex select-none items-center rounded-md border px-2 py-1 text-[10px] font-mono font-medium relative",
-      "bg-linear-to-b from-gray-100 to-gray-200 border-gray-300 shadow-[0_2px_0_#ccc,0_3px_2px_rgba(0,0,0,0.25)]",
-      "dark:from-zinc-800 dark:to-zinc-900 dark:border-zinc-700 dark:shadow-[0_2px_0_#222,0_3px_2px_rgba(0,0,0,0.4)]",
-      "dark:text-zinc-200",
-      className,
-    )}
-    {...props}
-  >
-    {children}
-  </span>
-);
-
-export type KbdKeyProps = ComponentProps<"span"> & {
-  "aria-label"?: string;
-  className?: string;
-};
-
-export const KbdKey = ({ className, children, ...props }: KbdKeyProps) => (
-  <span
-    className={cn(
-      "px-1 py-px rounded-sm select-none text-[10px] font-mono font-medium bg-transparent",
-      className,
-    )}
-    {...props}
-  >
-    {children}
-  </span>
-);
-
-export type KbdSeparatorProps = ComponentProps<"span"> & {
-  children?: ReactNode;
-  className?: string;
-};
-
-export const KbdSeparator = ({
-  className,
-  children = "+",
-  ...props
-}: KbdSeparatorProps) => (
-  <span
-    className={cn(
-      "text-muted-foreground/70 text-[10px] mx-0.5 select-none pointer-events-none",
-      className,
-    )}
-    {...props}
-  >
-    {children}
-  </span>
-);

src/components/ui/progress.tsx

@@ -1,29 +0,0 @@
-import * as React from "react";
-import * as ProgressPrimitive from "@radix-ui/react-progress";
-
-import { cn } from "@/lib/utils";
-
-function Progress({
-  className,
-  value,
-  ...props
-}: React.ComponentProps<typeof ProgressPrimitive.Root>) {
-  return (
-    <ProgressPrimitive.Root
-      data-slot="progress"
-      className={cn(
-        "bg-primary/20 relative h-2 w-full overflow-hidden rounded-full",
-        className,
-      )}
-      {...props}
-    >
-      <ProgressPrimitive.Indicator
-        data-slot="progress-indicator"
-        className="bg-primary h-full w-full flex-1 transition-all"
-        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
-      />
-    </ProgressPrimitive.Root>
-  );
-}
-
-export { Progress };

src/components/ui/resizable.tsx

@@ -1,58 +0,0 @@
-import * as React from "react";
-import { GripVerticalIcon } from "lucide-react";
-import {
-  Group as ResizableGroup,
-  Panel as ResizablePrimitivePanel,
-  Separator as ResizableSeparator,
-} from "react-resizable-panels";
-
-import { cn } from "@/lib/utils";
-
-function ResizablePanelGroup({
-  className,
-  ...props
-}: React.ComponentProps<typeof ResizableGroup>) {
-  return (
-    <ResizableGroup
-      data-slot="resizable-panel-group"
-      className={cn(
-        "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function ResizablePanel({
-  ...props
-}: React.ComponentProps<typeof ResizablePrimitivePanel>) {
-  return <ResizablePrimitivePanel data-slot="resizable-panel" {...props} />;
-}
-
-function ResizableHandle({
-  withHandle,
-  className,
-  ...props
-}: React.ComponentProps<typeof ResizableSeparator> & {
-  withHandle?: boolean;
-}) {
-  return (
-    <ResizableSeparator
-      data-slot="resizable-handle"
-      className={cn(
-        "relative flex w-1 items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-1 data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90 bg-edge-hover hover:bg-interact active:bg-pressed transition-colors duration-150",
-        className,
-      )}
-      {...props}
-    >
-      {withHandle && (
-        <div className="bg-edge-hover hover:bg-interact active:bg-pressed z-10 flex h-4 w-3 items-center justify-center rounded-xs border transition-colors duration-150">
-          <GripVerticalIcon className="size-2.5" />
-        </div>
-      )}
-    </ResizableSeparator>
-  );
-}
-
-export { ResizablePanelGroup, ResizablePanel, ResizableHandle };

src/components/ui/sonner.tsx

@@ -1,68 +0,0 @@
-import { useTheme } from "@/components/theme-provider";
-import { Toaster as Sonner, type ToasterProps, toast } from "sonner";
-import { useRef } from "react";
-
-const Toaster = ({ ...props }: ToasterProps) => {
-  const { theme = "system" } = useTheme();
-  const lastToastRef = useRef<{ text: string; timestamp: number } | null>(null);
-
-  const originalToast = toast;
-
-  const rateLimitedToast = (
-    message: string,
-    options?: Record<string, unknown>,
-  ) => {
-    const now = Date.now();
-    const lastToast = lastToastRef.current;
-
-    if (
-      lastToast &&
-      lastToast.text === message &&
-      now - lastToast.timestamp < 1000
-    ) {
-      return;
-    }
-
-    lastToastRef.current = { text: message, timestamp: now };
-    return originalToast(message, options);
-  };
-
-  Object.assign(toast, {
-    success: (message: string, options?: Record<string, unknown>) =>
-      rateLimitedToast(message, { ...options, type: "success" }),
-    error: (message: string, options?: Record<string, unknown>) =>
-      rateLimitedToast(message, { ...options, type: "error" }),
-    warning: (message: string, options?: Record<string, unknown>) =>
-      rateLimitedToast(message, { ...options, type: "warning" }),
-    info: (message: string, options?: Record<string, unknown>) =>
-      rateLimitedToast(message, { ...options, type: "info" }),
-    message: rateLimitedToast,
-  });
-
-  const darkCustomThemes = [
-    "dracula",
-    "gentlemansChoice",
-    "midnightEspresso",
-    "catppuccinMocha",
-  ];
-  const sonnerTheme: ToasterProps["theme"] = darkCustomThemes.includes(theme)
-    ? "dark"
-    : (theme as ToasterProps["theme"]);
-
-  return (
-    <Sonner
-      theme={sonnerTheme}
-      className="toaster group"
-      style={
-        {
-          "--normal-bg": "var(--popover)",
-          "--normal-text": "var(--popover-foreground)",
-          "--normal-border": "var(--border)",
-        } as React.CSSProperties
-      }
-      {...props}
-    />
-  );
-};
-
-export { Toaster };

src/components/ui/tooltip.tsx

@@ -1,60 +0,0 @@
-"use client";
-
-import * as React from "react";
-import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-
-import { cn } from "@/lib/utils";
-
-function TooltipProvider({
-  delayDuration = 0,
-  ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
-  return (
-    <TooltipPrimitive.Provider
-      data-slot="tooltip-provider"
-      delayDuration={delayDuration}
-      {...props}
-    />
-  );
-}
-
-function Tooltip({
-  ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
-  return (
-    <TooltipProvider>
-      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
-    </TooltipProvider>
-  );
-}
-
-function TooltipTrigger({
-  ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
-  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
-}
-
-function TooltipContent({
-  className,
-  sideOffset = 4,
-  children,
-  ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
-  return (
-    <TooltipPrimitive.Portal>
-      <TooltipPrimitive.Content
-        data-slot="tooltip-content"
-        sideOffset={sideOffset}
-        className={cn(
-          "bg-elevated text-foreground border border-edge-medium shadow-lg animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
-          className,
-        )}
-        {...props}
-      >
-        {children}
-      </TooltipPrimitive.Content>
-    </TooltipPrimitive.Portal>
-  );
-}
-
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

src/index.css

@@ -1,559 +0,0 @@
-@import "tailwindcss";
-
-@custom-variant dark (&:is(.dark *));
-
-:root {
-  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: var(--foreground);
-  background-color: var(--bg-base);
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  --radius: 0.625rem;
-  --background: #ffffff;
-  --foreground: #18181b;
-  --card: #ffffff;
-  --card-foreground: #18181b;
-  --popover: #ffffff;
-  --popover-foreground: #18181b;
-  --primary: #27272a;
-  --primary-foreground: #fafafa;
-  --secondary: #f4f4f5;
-  --secondary-foreground: #27272a;
-  --muted: #f4f4f5;
-  --muted-foreground: #71717a;
-  --accent: #f4f4f5;
-  --accent-foreground: #27272a;
-  --destructive: #dc2626;
-  --border: #e4e4e7;
-  --input: #e4e4e7;
-  --ring: #a1a1aa;
-  --chart-1: #e76e50;
-  --chart-2: #2a9d8f;
-  --chart-3: #264653;
-  --chart-4: #e9c46a;
-  --chart-5: #f4a261;
-  --sidebar: #f9f9f9;
-  --sidebar-foreground: #18181b;
-  --sidebar-primary: #27272a;
-  --sidebar-primary-foreground: #fafafa;
-  --sidebar-accent: #f4f4f5;
-  --sidebar-accent-foreground: #27272a;
-  --sidebar-border: #e4e4e7;
-  --sidebar-ring: #a1a1aa;
-
-  --bg-base: #fcfcfc;
-  --bg-elevated: #ffffff;
-  --bg-surface: #f3f4f6;
-  --bg-surface-hover: #e5e7eb;
-  --bg-input: #ffffff;
-  --bg-deepest: #e5e7eb;
-  --bg-header: #eeeeef;
-  --bg-button: #f3f4f6;
-  --bg-active: #e5e7eb;
-  --bg-light: #fafafa;
-  --bg-subtle: #f5f5f5;
-  --bg-interact: #d1d5db;
-  --border-base: #e5e7eb;
-  --border-panel: #d1d5db;
-  --border-subtle: #f3f4f6;
-  --border-medium: #d1d5db;
-  --bg-hover: #f3f4f6;
-  --bg-hover-alt: #e5e7eb;
-  --bg-pressed: #d1d5db;
-  --border-hover: #d1d5db;
-  --border-active: #9ca3af;
-
-  --foreground-secondary: #334155;
-  --foreground-subtle: #94a3b8;
-
-  --scrollbar-thumb: #c1c1c3;
-  --scrollbar-thumb-hover: #a1a1a3;
-  --scrollbar-track: #f3f4f6;
-
-  --bg-overlay: rgba(0, 0, 0, 0.5);
-}
-
-@theme inline {
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
-  --color-popover: var(--popover);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-destructive: var(--destructive);
-  --color-border: var(--border);
-  --color-input: var(--input);
-  --color-ring: var(--ring);
-  --color-chart-1: var(--chart-1);
-  --color-chart-2: var(--chart-2);
-  --color-chart-3: var(--chart-3);
-  --color-chart-4: var(--chart-4);
-  --color-chart-5: var(--chart-5);
-  --color-sidebar: var(--sidebar);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-ring: var(--sidebar-ring);
-
-  --color-dark-bg: #18181b;
-  --color-dark-bg-darker: #0e0e10;
-  --color-dark-bg-darkest: #09090b;
-  --color-dark-bg-input: #222225;
-  --color-dark-bg-button: #23232a;
-  --color-dark-bg-active: #1d1d1f;
-  --color-dark-bg-header: #131316;
-  --color-dark-border: #303032;
-  --color-dark-border-active: #2d2d30;
-  --color-dark-border-hover: #434345;
-  --color-dark-hover: #2d2d30;
-  --color-dark-active: #2a2a2c;
-  --color-dark-pressed: #1a1a1c;
-  --color-dark-hover-alt: #2a2a2d;
-  --color-dark-border-light: #5a5a5d;
-  --color-dark-bg-light: #141416;
-  --color-dark-border-medium: #373739;
-  --color-dark-bg-very-light: #101014;
-  --color-dark-bg-panel: #1b1b1e;
-  --color-dark-border-panel: #222224;
-  --color-dark-bg-panel-hover: #232327;
-
-  --color-canvas: var(--bg-base);
-  --color-elevated: var(--bg-elevated);
-  --color-surface: var(--bg-surface);
-  --color-surface-hover: var(--bg-surface-hover);
-  --color-field: var(--bg-input);
-  --color-deepest: var(--bg-deepest);
-  --color-header: var(--bg-header);
-  --color-button: var(--bg-button);
-  --color-active: var(--bg-active);
-  --color-light: var(--bg-light);
-  --color-subtle: var(--bg-subtle);
-  --color-interact: var(--bg-interact);
-  --color-hover: var(--bg-hover);
-  --color-hover-alt: var(--bg-hover-alt);
-  --color-pressed: var(--bg-pressed);
-
-  --color-edge: var(--border-base);
-  --color-edge-panel: var(--border-panel);
-  --color-edge-subtle: var(--border-subtle);
-  --color-edge-medium: var(--border-medium);
-  --color-edge-hover: var(--border-hover);
-  --color-edge-active: var(--border-active);
-
-  --color-foreground-secondary: var(--foreground-secondary);
-  --color-foreground-subtle: var(--foreground-subtle);
-
-  --color-overlay: var(--bg-overlay);
-}
-
-.dark {
-  --background: #09090b;
-  --foreground: #fafafa;
-  --card: #18181b;
-  --card-foreground: #fafafa;
-  --popover: #27272a;
-  --popover-foreground: #fafafa;
-  --primary: #e4e4e7;
-  --primary-foreground: #27272a;
-  --secondary: #3f3f46;
-  --secondary-foreground: #fafafa;
-  --muted: #27272a;
-  --muted-foreground: #9ca3af;
-  --accent: #3f3f46;
-  --accent-foreground: #fafafa;
-  --destructive: #f87171;
-  --border: #ffffff1a;
-  --input: #ffffff26;
-  --ring: #71717a;
-  --chart-1: #3b82f6;
-  --chart-2: #34d399;
-  --chart-3: #f4a261;
-  --chart-4: #a855f7;
-  --chart-5: #f43f5e;
-  --sidebar: #18181b;
-  --sidebar-foreground: #fafafa;
-  --sidebar-primary: #3b82f6;
-  --sidebar-primary-foreground: #fafafa;
-  --sidebar-accent: #3f3f46;
-  --sidebar-accent-foreground: #fafafa;
-  --sidebar-border: #ffffff1a;
-  --sidebar-ring: #71717a;
-
-  --bg-base: #18181b;
-  --bg-elevated: #0e0e10;
-  --bg-surface: #1b1b1e;
-  --bg-surface-hover: #232327;
-  --bg-input: #222225;
-  --bg-deepest: #09090b;
-  --bg-header: #131316;
-  --bg-button: #23232a;
-  --bg-active: #1d1d1f;
-  --bg-light: #141416;
-  --bg-subtle: #101014;
-  --bg-interact: #2a2a2c;
-  --border-base: #303032;
-  --border-panel: #222224;
-  --border-subtle: #5a5a5d;
-  --border-medium: #373739;
-  --bg-hover: #2d2d30;
-  --bg-hover-alt: #2a2a2d;
-  --bg-pressed: #1a1a1c;
-  --border-hover: #434345;
-  --border-active: #2d2d30;
-
-  --foreground-secondary: #d1d5db;
-  --foreground-subtle: #6b7280;
-
-  --scrollbar-thumb: #434345;
-  --scrollbar-thumb-hover: #5a5a5d;
-  --scrollbar-track: #18181b;
-
-  --bg-overlay: rgba(0, 0, 0, 0.7);
-}
-
-.dracula {
-  --background: #282a36;
-  --foreground: #ffffff;
-  --card: #343746;
-  --card-foreground: #ffffff;
-  --popover: #343746;
-  --popover-foreground: #ffffff;
-  --primary: #ffffff;
-  --primary-foreground: #282a36;
-  --secondary: #44475a;
-  --secondary-foreground: #ffffff;
-  --muted: #343746;
-  --muted-foreground: #a6accd;
-  --accent: #44475a;
-  --accent-foreground: #ffffff;
-  --destructive: #ff5555;
-  --border: #44475a;
-  --input: #343746;
-  --ring: #8be9fd;
-  --chart-1: #8be9fd;
-  --chart-2: #50fa7b;
-  --chart-3: #ffb86c;
-  --chart-4: #bd93f9;
-  --chart-5: #ff79c6;
-  --sidebar: #1e1f29;
-  --sidebar-foreground: #ffffff;
-  --sidebar-primary: #8be9fd;
-  --sidebar-primary-foreground: #1e1f29;
-  --sidebar-accent: #44475a;
-  --sidebar-accent-foreground: #ffffff;
-  --sidebar-border: #44475a;
-  --sidebar-ring: #8be9fd;
-
-  --bg-base: #282a36;
-  --bg-elevated: #343746;
-  --bg-surface: #343746;
-  --bg-surface-hover: #44475a;
-  --bg-input: #343746;
-  --bg-deepest: #1e1f29;
-  --bg-header: #1e1f29;
-  --bg-button: #343746;
-  --bg-active: #44475a;
-  --bg-light: #343746;
-  --bg-subtle: #1e1f29;
-  --bg-interact: #44475a;
-  --border-base: #44475a;
-  --border-panel: #1e1f29;
-  --border-subtle: #44475a;
-  --border-medium: #44475a;
-  --bg-hover: #44475a;
-  --bg-hover-alt: #44475a;
-  --bg-pressed: #1e1f29;
-  --border-hover: #6272a4;
-  --border-active: #8be9fd;
-
-  --foreground-secondary: #a6accd;
-  --foreground-subtle: #6272a4;
-
-  --scrollbar-thumb: #44475a;
-  --scrollbar-thumb-hover: #6272a4;
-  --scrollbar-track: #282a36;
-
-  --bg-overlay: rgba(0, 0, 0, 0.8);
-}
-
-.gentlemansChoice {
-  --background: #1a1c1a;
-  --foreground: #d1c7a3;
-  --card: #2a2c2a;
-  --card-foreground: #d1c7a3;
-  --popover: #2a2c2a;
-  --popover-foreground: #d1c7a3;
-  --primary: #d1c7a3;
-  --primary-foreground: #1a1c1a;
-  --secondary: #3e4437;
-  --secondary-foreground: #d1c7a3;
-  --muted: #2a2c2a;
-  --muted-foreground: #8e8463;
-  --accent: #3e4437;
-  --accent-foreground: #d1c7a3;
-  --destructive: #9d3a3a;
-  --border: #3e4437;
-  --input: #2a2c2a;
-  --ring: #5a7a3a;
-  --chart-1: #5a7a3a;
-  --chart-2: #3a5a7a;
-  --chart-3: #b39a3a;
-  --chart-4: #7a3a5a;
-  --chart-5: #3a7a7a;
-  --sidebar: #151715;
-  --sidebar-foreground: #d1c7a3;
-  --sidebar-primary: #5a7a3a;
-  --sidebar-primary-foreground: #151715;
-  --sidebar-accent: #3e4437;
-  --sidebar-accent-foreground: #d1c7a3;
-  --sidebar-border: #3e4437;
-  --sidebar-ring: #5a7a3a;
-
-  --bg-base: #1a1c1a;
-  --bg-elevated: #2a2c2a;
-  --bg-surface: #2a2c2a;
-  --bg-surface-hover: #3e4437;
-  --bg-input: #2a2c2a;
-  --bg-deepest: #151715;
-  --bg-header: #151715;
-  --bg-button: #2a2c2a;
-  --bg-active: #3e4437;
-  --bg-light: #2a2c2a;
-  --bg-subtle: #151715;
-  --bg-interact: #3e4437;
-  --border-base: #3e4437;
-  --border-panel: #151715;
-  --border-subtle: #3e4437;
-  --border-medium: #3e4437;
-  --bg-hover: #3e4437;
-  --bg-hover-alt: #3e4437;
-  --bg-pressed: #151715;
-  --border-hover: #5a7a3a;
-  --border-active: #d1c7a3;
-
-  --foreground-secondary: #8e8463;
-  --foreground-subtle: #5e5841;
-
-  --scrollbar-thumb: #3e4437;
-  --scrollbar-thumb-hover: #5e5841;
-  --scrollbar-track: #1a1c1a;
-
-  --bg-overlay: rgba(0, 0, 0, 0.8);
-}
-
-.midnightEspresso {
-  --background: #120f0d;
-  --foreground: #ceb195;
-  --card: #1f1a17;
-  --card-foreground: #ceb195;
-  --popover: #1f1a17;
-  --popover-foreground: #ceb195;
-  --primary: #ceb195;
-  --primary-foreground: #120f0d;
-  --secondary: #3d2b1f;
-  --secondary-foreground: #ceb195;
-  --muted: #1f1a17;
-  --muted-foreground: #9a8a7a;
-  --accent: #3d2b1f;
-  --accent-foreground: #ceb195;
-  --destructive: #a05a4a;
-  --border: #3d2b1f;
-  --input: #1f1a17;
-  --ring: #7a8a5a;
-  --chart-1: #7a8a5a;
-  --chart-2: #5a7a9a;
-  --chart-3: #b08a4a;
-  --chart-4: #8a5a7a;
-  --chart-5: #5a8a8a;
-  --sidebar: #0d0b0a;
-  --sidebar-foreground: #ceb195;
-  --sidebar-primary: #7a8a5a;
-  --sidebar-primary-foreground: #0d0b0a;
-  --sidebar-accent: #3d2b1f;
-  --sidebar-accent-foreground: #ceb195;
-  --sidebar-border: #3d2b1f;
-  --sidebar-ring: #7a8a5a;
-
-  --bg-base: #120f0d;
-  --bg-elevated: #1f1a17;
-  --bg-surface: #1f1a17;
-  --bg-surface-hover: #3d2b1f;
-  --bg-input: #1f1a17;
-  --bg-deepest: #0d0b0a;
-  --bg-header: #0d0b0a;
-  --bg-button: #1f1a17;
-  --bg-active: #3d2b1f;
-  --bg-light: #1f1a17;
-  --bg-subtle: #0d0b0a;
-  --bg-interact: #3d2b1f;
-  --border-base: #3d2b1f;
-  --border-panel: #0d0b0a;
-  --border-subtle: #3d2b1f;
-  --border-medium: #3d2b1f;
-  --bg-hover: #3d2b1f;
-  --bg-hover-alt: #3d2b1f;
-  --bg-pressed: #0d0b0a;
-  --border-hover: #7a8a5a;
-  --border-active: #ceb195;
-
-  --foreground-secondary: #9a8a7a;
-  --foreground-subtle: #6a5a4a;
-
-  --scrollbar-thumb: #3d2b1f;
-  --scrollbar-thumb-hover: #6a5a4a;
-  --scrollbar-track: #120f0d;
-
-  --bg-overlay: rgba(0, 0, 0, 0.8);
-}
-
-.catppuccinMocha {
-  --background: #1e1e2e;
-  --foreground: #cdd6f4;
-  --card: #181825;
-  --card-foreground: #cdd6f4;
-  --popover: #181825;
-  --popover-foreground: #cdd6f4;
-  --primary: #cdd6f4;
-  --primary-foreground: #1e1e2e;
-  --secondary: #313244;
-  --secondary-foreground: #cdd6f4;
-  --muted: #181825;
-  --muted-foreground: #a6adc8;
-  --accent: #313244;
-  --accent-foreground: #cdd6f4;
-  --destructive: #f38ba8;
-  --border: #313244;
-  --input: #181825;
-  --ring: #89b4fa;
-  --chart-1: #89b4fa;
-  --chart-2: #a6e3a1;
-  --chart-3: #f9e2af;
-  --chart-4: #f5c2e7;
-  --chart-5: #94e2d5;
-  --sidebar: #11111b;
-  --sidebar-foreground: #cdd6f4;
-  --sidebar-primary: #89b4fa;
-  --sidebar-primary-foreground: #11111b;
-  --sidebar-accent: #313244;
-  --sidebar-accent-foreground: #cdd6f4;
-  --sidebar-border: #313244;
-  --sidebar-ring: #89b4fa;
-
-  --bg-base: #1e1e2e;
-  --bg-elevated: #181825;
-  --bg-surface: #181825;
-  --bg-surface-hover: #313244;
-  --bg-input: #181825;
-  --bg-deepest: #11111b;
-  --bg-header: #11111b;
-  --bg-button: #181825;
-  --bg-active: #313244;
-  --bg-light: #181825;
-  --bg-subtle: #11111b;
-  --bg-interact: #313244;
-  --border-base: #313244;
-  --border-panel: #11111b;
-  --border-subtle: #313244;
-  --border-medium: #313244;
-  --bg-hover: #313244;
-  --bg-hover-alt: #313244;
-  --bg-pressed: #11111b;
-  --border-hover: #89b4fa;
-  --border-active: #cdd6f4;
-
-  --foreground-secondary: #a6adc8;
-  --foreground-subtle: #7f849c;
-
-  --scrollbar-thumb: #313244;
-  --scrollbar-thumb-hover: #45475a;
-  --scrollbar-track: #1e1e2e;
-
-  --bg-overlay: rgba(0, 0, 0, 0.8);
-}
-
-@layer base {
-  html,
-  body {
-    height: 100%;
-  }
-
-  * {
-    @apply border-border outline-ring/50;
-  }
-
-  body {
-    @apply bg-background text-foreground;
-  }
-}
-
-.thin-scrollbar {
-  scrollbar-width: thin;
-  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
-}
-
-.thin-scrollbar::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
-}
-
-.thin-scrollbar::-webkit-scrollbar-track {
-  background: var(--scrollbar-track);
-}
-
-.thin-scrollbar::-webkit-scrollbar-thumb {
-  background: var(--scrollbar-thumb);
-  border-radius: 3px;
-}
-
-.thin-scrollbar::-webkit-scrollbar-thumb:hover {
-  background: var(--scrollbar-thumb-hover);
-}
-
-.skinny-scrollbar {
-  scrollbar-width: thin;
-  scrollbar-color: var(--scrollbar-thumb) transparent;
-}
-
-.skinny-scrollbar::-webkit-scrollbar {
-  width: 4px;
-  height: 4px;
-}
-
-.skinny-scrollbar::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-.skinny-scrollbar::-webkit-scrollbar-thumb {
-  background: var(--scrollbar-thumb);
-  border-radius: 2px;
-}
-
-.skinny-scrollbar::-webkit-scrollbar-thumb:hover {
-  background: var(--scrollbar-thumb-hover);
-}
-
-.h-fade {
-  mask-image: linear-gradient(transparent, #000 6%, #000 94%, transparent);
-}

src/main.tsx

@@ -1,53 +1,88 @@
 /* eslint-disable react-refresh/only-export-components */
 import { prepareClientCacheVersion } from "@/lib/client-cache-version";
-import { StrictMode, Suspense, lazy, useEffect, useState, useRef } from "react";
+import { StrictMode, Suspense, lazy, useState, useRef, useEffect } from "react";
 import { createRoot } from "react-dom/client";
-import "./index.css";
+import "./ui/index.css";
 import { ThemeProvider } from "@/components/theme-provider";
-import "./i18n/i18n";
+import "./ui/i18n/i18n";
 import { isElectron } from "@/lib/electron";
+import { Toaster } from "@/components/sonner";
+import { Auth, getStoredAuth, clearStoredAuth } from "@/auth/Auth";
+import { applyAccentColor, applyFontSize } from "@/lib/theme";
+import type { FontSizeId } from "@/types/ui-types";
+import { useServiceWorker } from "@/hooks/use-service-worker";
 
-const DesktopApp = lazy(() => import("@/ui/desktop/DesktopApp.tsx"));
-const MobileApp = lazy(() =>
-  import("@/ui/mobile/MobileApp.tsx").then((module) => ({
-    default: module.MobileApp,
-  })),
-);
-const HostManagerApp = lazy(
-  () => import("./ui/desktop/apps/host-manager/HostManagerApp.tsx"),
-);
-const TerminalApp = lazy(
-  () => import("./ui/desktop/apps/features/terminal/TerminalApp.tsx"),
+const AppShell = lazy(() =>
+  import("@/AppShell").then((m) => ({ default: m.AppShell })),
 );
+
+// Full-screen apps opened via query params (e.g. from external links or Electron)
+const TerminalApp = lazy(() => import("@/features/terminal/TerminalApp"));
 const FileManagerApp = lazy(
-  () => import("./ui/desktop/apps/features/file-manager/FileManagerApp.tsx"),
-);
-const TunnelApp = lazy(
-  () => import("./ui/desktop/apps/features/tunnel/TunnelApp.tsx"),
+  () => import("@/features/file-manager/FileManagerApp"),
 );
+const TunnelApp = lazy(() => import("@/features/tunnel/TunnelApp"));
 const ServerStatsApp = lazy(
-  () => import("./ui/desktop/apps/features/server-stats/ServerStatsApp.tsx"),
-);
-const DockerApp = lazy(
-  () => import("./ui/desktop/apps/features/docker/DockerApp.tsx"),
-);
-const GuacamoleApp = lazy(
-  () => import("@/ui/desktop/apps/features/guacamole/GuacamoleApp.tsx"),
+  () => import("@/features/server-stats/ServerStatsApp"),
 );
+const DockerApp = lazy(() => import("@/features/docker/DockerApp"));
+const GuacamoleApp = lazy(() => import("@/features/guacamole/GuacamoleApp"));
+
 const ElectronVersionCheck = lazy(() =>
-  import("@/ui/desktop/user/ElectronVersionCheck.tsx").then((module) => ({
+  import("@/user/ElectronVersionCheck").then((module) => ({
     default: module.ElectronVersionCheck,
   })),
 );
 
-const FullscreenApp: React.FC = () => {
+type Phase = "idle-auth" | "fading-in" | "idle-app" | "fading-out";
+
+function useWindowWidth() {
+  const [width, setWidth] = useState(window.innerWidth);
+  const lastSwitchTime = useRef(0);
+  const isCurrentlyMobile = useRef(window.innerWidth < 768);
+  const hasSwitchedOnce = useRef(false);
+
+  useEffect(() => {
+    let timeoutId: number;
+    const handleResize = () => {
+      clearTimeout(timeoutId);
+      timeoutId = setTimeout(() => {
+        const newWidth = window.innerWidth;
+        const newIsMobile = newWidth < 768;
+        const now = Date.now();
+        if (hasSwitchedOnce.current && now - lastSwitchTime.current < 10000) {
+          setWidth(newWidth);
+          return;
+        }
+        if (
+          newIsMobile !== isCurrentlyMobile.current &&
+          now - lastSwitchTime.current > 5000
+        ) {
+          lastSwitchTime.current = now;
+          isCurrentlyMobile.current = newIsMobile;
+          hasSwitchedOnce.current = true;
+          setWidth(newWidth);
+        } else {
+          setWidth(newWidth);
+        }
+      }, 2000);
+    };
+    window.addEventListener("resize", handleResize);
+    return () => {
+      clearTimeout(timeoutId);
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+
+  return width;
+}
+
+function FullscreenApp() {
   const searchParams = new URLSearchParams(window.location.search);
   const view = searchParams.get("view");
   const hostId = searchParams.get("hostId");
 
   switch (view) {
-    case "host-manager":
-      return <HostManagerApp />;
     case "terminal":
       return <TerminalApp hostId={hostId || undefined} />;
     case "file-manager":
@@ -63,53 +98,83 @@ const FullscreenApp: React.FC = () => {
     case "telnet":
       return <GuacamoleApp hostId={hostId || undefined} />;
     default:
-      return <DesktopApp />;
+      return null;
+  }
 }
-};
-import { useServiceWorker } from "@/hooks/use-service-worker";
 
-function useWindowWidth() {
-  const [width, setWidth] = useState(window.innerWidth);
-  const lastSwitchTime = useRef(0);
-  const isCurrentlyMobile = useRef(window.innerWidth < 768);
-  const hasSwitchedOnce = useRef(false);
+function App() {
+  const stored = getStoredAuth();
+  const [phase, setPhase] = useState<Phase>(
+    stored?.loggedIn ? "idle-app" : "idle-auth",
+  );
+  const [authUsername, setAuthUsername] = useState(stored?.username ?? "");
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   useEffect(() => {
-    let timeoutId: NodeJS.Timeout;
-    const handleResize = () => {
-      clearTimeout(timeoutId);
-      timeoutId = setTimeout(() => {
-        const newWidth = window.innerWidth;
-        const newIsMobile = newWidth < 768;
-        const now = Date.now();
-
-        if (hasSwitchedOnce.current && now - lastSwitchTime.current < 10000) {
-          setWidth(newWidth);
-          return;
-        }
-
-        if (
-          newIsMobile !== isCurrentlyMobile.current &&
-          now - lastSwitchTime.current > 5000
-        ) {
-          lastSwitchTime.current = now;
-          isCurrentlyMobile.current = newIsMobile;
-          hasSwitchedOnce.current = true;
-          setWidth(newWidth);
-        } else {
-          setWidth(newWidth);
-        }
-      }, 2000);
-    };
-    window.addEventListener("resize", handleResize);
-
+    const savedAccent = localStorage.getItem("termix-accent");
+    if (savedAccent) applyAccentColor(savedAccent);
+    const savedSize = localStorage.getItem(
+      "termix-font-size",
+    ) as FontSizeId | null;
+    applyFontSize(savedSize ?? "lg");
     return () => {
-      clearTimeout(timeoutId);
-      window.removeEventListener("resize", handleResize);
+      if (timerRef.current) clearTimeout(timerRef.current);
     };
   }, []);
 
-  return width;
+  function handleLogin(u: string) {
+    setAuthUsername(u);
+    setPhase("fading-in");
+    timerRef.current = setTimeout(() => setPhase("idle-app"), 450);
+  }
+
+  function handleLogout() {
+    clearStoredAuth();
+    setPhase("fading-out");
+    timerRef.current = setTimeout(() => {
+      setAuthUsername("");
+      setPhase("idle-auth");
+    }, 450);
+  }
+
+  const showApp =
+    phase === "idle-app" || phase === "fading-in" || phase === "fading-out";
+  const showAuth =
+    phase === "idle-auth" || phase === "fading-in" || phase === "fading-out";
+  const appOpacity = phase === "idle-app" ? 1 : 0;
+  const authOpacity = phase === "idle-auth" ? 1 : 0;
+
+  return (
+    <>
+      {showApp && (
+        <div
+          className="fixed inset-0 z-0 transition-opacity duration-[450ms] ease-in-out"
+          style={{
+            opacity: appOpacity,
+            pointerEvents: phase === "idle-app" ? "auto" : "none",
+          }}
+        >
+          <Suspense fallback={null}>
+            <AppShell username={authUsername} onLogout={handleLogout} />
+          </Suspense>
+        </div>
+      )}
+
+      {showAuth && (
+        <div
+          className="fixed inset-0 z-10 transition-opacity duration-[450ms] ease-in-out"
+          style={{
+            opacity: authOpacity,
+            pointerEvents: phase === "idle-auth" ? "auto" : "none",
+          }}
+        >
+          <Auth onLogin={handleLogin} />
+        </div>
+      )}
+
+      <Toaster position="bottom-right" />
+    </>
+  );
 }
 
 function RootApp() {
@@ -125,63 +190,28 @@ function RootApp() {
     (window as Window & { opera?: string }).opera ||
     "";
   const isTermixMobile = /Termix-Mobile/.test(userAgent);
-
   const searchParams = new URLSearchParams(window.location.search);
   const isFullscreen = searchParams.has("view");
 
-  const renderApp = () => {
   if (isFullscreen) {
-      return <FullscreenApp />;
-    }
-
-    if (isElectron()) {
-      return <DesktopApp />;
-    }
-
-    if (isTermixMobile) {
-      return <MobileApp key="mobile" />;
-    }
-
-    return isMobile ? <MobileApp key="mobile" /> : <DesktopApp key="desktop" />;
-  };
-
     return (
-    <>
-      {!isFullscreen && (
-        <div
-          className="fixed inset-0 pointer-events-none"
-          style={{
-            backgroundColor: "var(--bg-base)",
-            backgroundImage: `linear-gradient(
-              135deg,
-              transparent 0%,
-              transparent 49%,
-              rgba(128, 128, 128, 0.03) 49%,
-              rgba(128, 128, 128, 0.03) 51%,
-              transparent 51%,
-              transparent 100%
-            )`,
-            backgroundSize: "80px 80px",
-            zIndex: 0,
-          }}
-        />
-      )}
-      <div className="relative min-h-screen" style={{ zIndex: 1 }}>
-        {isElectron() && showVersionCheck && !isFullscreen ? (
       <Suspense fallback={null}>
-            <ElectronVersionCheck
-              onContinue={() => setShowVersionCheck(false)}
-              isAuthenticated={false}
-            />
+        <FullscreenApp />
       </Suspense>
-        ) : (
-          <Suspense fallback={null}>{renderApp()}</Suspense>
-        )}
-      </div>
-    </>
     );
   }
 
+  if (isElectron() && showVersionCheck) {
+    return (
+      <Suspense fallback={null}>
+        <ElectronVersionCheck onContinue={() => setShowVersionCheck(false)} />
+      </Suspense>
+    );
+  }
+
+  return <App />;
+}
+
 prepareClientCacheVersion().finally(() => {
   createRoot(document.getElementById("root")!).render(
     <StrictMode>

src/ui/AppShell.tsx

@@ -0,0 +1,608 @@
+import { Separator } from "@/components/separator";
+import { Button } from "@/components/button";
+import { Sheet, SheetContent } from "@/components/sheet";
+import { ChevronLeft, ChevronRight, Maximize2 } from "lucide-react";
+import { useState, useRef, useCallback, useEffect } from "react";
+import { useIsMobile } from "@/hooks/use-mobile";
+import { MobileBottomBar } from "@/shell/MobileBottomBar";
+import { CommandPalette } from "@/shell/CommandPalette";
+import { AppRail } from "@/sidebar/AppRail";
+import type { RailView } from "@/sidebar/AppRail";
+import { HostsPanel } from "@/sidebar/HostsPanel";
+import { QuickConnectPanel } from "@/sidebar/QuickConnectPanel";
+import { SshToolsPanel } from "@/sidebar/SshToolsPanel";
+import { SnippetsPanel } from "@/sidebar/SnippetsPanel";
+import { HistoryPanel } from "@/sidebar/HistoryPanel";
+import { SplitScreenPanel } from "@/sidebar/SplitScreenPanel";
+import { UserProfilePanel } from "@/sidebar/UserProfilePanel";
+import { AdminSettingsPanel } from "@/sidebar/AdminSettingsPanel";
+import { SplitView } from "@/shell/SplitView";
+import { TabBar } from "@/shell/TabBar";
+import type {
+  Tab,
+  TabType,
+  Host,
+  SplitMode,
+  HostFolder,
+} from "@/types/ui-types";
+import { getSSHHosts } from "@/main-axios";
+import type { SSHHostWithStatus } from "@/main-axios";
+
+function sshHostToHost(h: SSHHostWithStatus): Host {
+  return {
+    id: String(h.id),
+    name: h.name,
+    username: h.username,
+    ip: h.ip,
+    port: h.port,
+    folder: h.folder ?? "",
+    online: h.status === "online",
+    cpu: 0,
+    ram: 0,
+    lastAccess: "",
+    tags: h.tags ?? [],
+    authType: h.authType,
+    password: h.password,
+    key: typeof h.key === "string" ? h.key : undefined,
+    keyPassword: h.keyPassword,
+    keyType: h.keyType,
+    credentialId: h.credentialId != null ? String(h.credentialId) : undefined,
+    notes: h.notes,
+    pin: h.pin ?? false,
+    macAddress: h.macAddress,
+    enableTerminal: h.enableTerminal ?? true,
+    enableTunnel: h.enableTunnel ?? false,
+    enableFileManager: h.enableFileManager ?? false,
+    enableDocker: h.enableDocker ?? false,
+    enableSsh: h.connectionType === "ssh" || !h.connectionType,
+    enableRdp: h.connectionType === "rdp",
+    enableVnc: h.connectionType === "vnc",
+    enableTelnet: h.connectionType === "telnet",
+    sshPort: h.port,
+    rdpPort: 3389,
+    vncPort: 5900,
+    telnetPort: 23,
+    quickActions: (h.quickActions ?? []).map((a) => ({
+      name: a.name,
+      snippetId: String(a.snippetId),
+    })),
+    serverTunnels: [],
+    defaultPath: h.defaultPath,
+    terminalConfig: h.terminalConfig as Host["terminalConfig"],
+    useSocks5: h.useSocks5,
+    socks5Host: h.socks5Host,
+    socks5Port: h.socks5Port,
+    socks5Username: h.socks5Username,
+    socks5Password: h.socks5Password,
+  };
+}
+
+function buildHostTree(hosts: SSHHostWithStatus[]): HostFolder {
+  const root: HostFolder = { name: "root", children: [] };
+  const folderMap = new Map<string, HostFolder>();
+  const getOrCreateFolder = (path: string): HostFolder => {
+    if (folderMap.has(path)) return folderMap.get(path)!;
+    const parts = path.split(" / ");
+    let current = root;
+    let accumulated = "";
+    for (const part of parts) {
+      accumulated = accumulated ? `${accumulated} / ${part}` : part;
+      if (!folderMap.has(accumulated)) {
+        const folder: HostFolder = { name: part, children: [] };
+        folderMap.set(accumulated, folder);
+        current.children.push(folder);
+      }
+      current = folderMap.get(accumulated)!;
+    }
+    return current;
+  };
+  for (const h of hosts) {
+    const host = sshHostToHost(h);
+    if (h.folder) {
+      getOrCreateFolder(h.folder).children.push(host);
+    } else {
+      root.children.push(host);
+    }
+  }
+  return root;
+}
+export { tabIcon, renderTabContent } from "@/shell/tabUtils";
+import { renderTabContent } from "@/shell/tabUtils";
+
+const DASHBOARD_TAB: Tab = {
+  id: "dashboard",
+  type: "dashboard",
+  label: "Dashboard",
+};
+
+const SINGLETON_TAB_LABELS: Partial<Record<TabType, string>> = {
+  "host-manager": "Host Manager",
+  docker: "Docker",
+  tunnel: "Tunnels",
+};
+
+// ─── AppShell ────────────────────────────────────────────────────────────────
+
+export function AppShell({
+  username,
+  onLogout,
+}: {
+  username: string;
+  onLogout: () => void;
+}) {
+  const [tabs, setTabs] = useState<Tab[]>([DASHBOARD_TAB]);
+  const [activeTabId, setActiveTabId] = useState("dashboard");
+  const [commandPaletteOpen, setCommandPaletteOpen] = useState(false);
+  const [splitMode, setSplitMode] = useState<SplitMode>("none");
+  const [paneTabIds, setPaneTabIds] = useState<(string | null)[]>(
+    Array(6).fill(null),
+  );
+  const [realHostTree, setRealHostTree] = useState<HostFolder | null>(null);
+  const [allHosts, setAllHosts] = useState<Host[]>([]);
+
+  const [sidebarOpen, setSidebarOpen] = useState(true);
+  const [railView, setRailView] = useState<RailView>("hosts");
+  const [profileDropdownOpen, setProfileDropdownOpen] = useState(false);
+  const [hostManagerExpanded, setHostManagerExpanded] = useState(false);
+  const [sidebarWidth, setSidebarWidth] = useState(256);
+  const [sidebarDragging, setSidebarDragging] = useState(false);
+
+  const isMobile = useIsMobile();
+
+  // Close the sidebar when switching to mobile (it becomes a sheet overlay)
+  useEffect(() => {
+    if (isMobile) setSidebarOpen(false);
+  }, [isMobile]);
+
+  const pendingHostManagerEditId = useRef<string | null>(null);
+  const pendingHostManagerAction = useRef<"add-host" | "add-credential" | null>(
+    null,
+  );
+  const lastShiftTime = useRef(0);
+
+  const sidebarTitle: Record<RailView, string> = {
+    hosts: "Hosts",
+    "quick-connect": "Quick Connect",
+    "ssh-tools": "SSH Tools",
+    snippets: "Snippets",
+    history: "History",
+    "split-screen": "Split Screen",
+    "user-profile": "User Profile",
+    "admin-settings": "Admin Settings",
+  };
+
+  // Double-shift opens command palette
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.code === "ShiftLeft") {
+        const now = Date.now();
+        if (now - lastShiftTime.current < 300)
+          setCommandPaletteOpen((prev) => !prev);
+        lastShiftTime.current = now;
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, []);
+
+  useEffect(() => {
+    const handle = () => onLogout();
+    window.addEventListener("termix:logout", handle);
+    return () => window.removeEventListener("termix:logout", handle);
+  }, [onLogout]);
+
+  // Load real hosts from API
+  const loadHosts = useCallback(async () => {
+    try {
+      const raw = await getSSHHosts();
+      const converted = raw.map(sshHostToHost);
+      setAllHosts(converted);
+      setRealHostTree(buildHostTree(raw));
+    } catch {
+      // Keep empty state on error
+    }
+  }, []);
+
+  useEffect(() => {
+    loadHosts();
+  }, [loadHosts]);
+
+  // Sync tab host data when allHosts updates (e.g. after editing terminal theme in host settings)
+  useEffect(() => {
+    if (allHosts.length === 0) return;
+    setTabs((prev) =>
+      prev.map((t) =>
+        t.host
+          ? { ...t, host: allHosts.find((h) => h.id === t.host!.id) ?? t.host }
+          : t,
+      ),
+    );
+  }, [allHosts]);
+
+  // Let HostManager trigger tab opens via custom event
+  useEffect(() => {
+    const handle = (e: Event) => {
+      const { hostId, type } = (
+        e as CustomEvent<{ hostId: string; type?: TabType }>
+      ).detail;
+      const host = allHosts.find((h) => h.id === hostId);
+      if (host) connectHost(host, type);
+    };
+    window.addEventListener("termix:open-tab", handle);
+    return () => window.removeEventListener("termix:open-tab", handle);
+  }, [tabs, allHosts]);
+
+  // ─── Tab management ──────────────────────────────────────────────────────
+
+  function openTab(host: Host, type: TabType) {
+    setTabs((prev) => {
+      const same = prev.filter(
+        (t) =>
+          t.type === type && t.label.replace(/ \(\d+\)$/, "") === host.name,
+      );
+      if (same.length === 0) {
+        const tab = {
+          id: `${host.name}-${type}`,
+          type,
+          label: host.name,
+          host,
+        };
+        setActiveTabId(tab.id);
+        return [...prev, tab];
+      }
+      const next = prev.map((t) =>
+        t.id === same[0].id && !/\(\d+\)$/.test(t.label)
+          ? { ...t, label: `${host.name} (1)`, host }
+          : t,
+      );
+      const tab = {
+        id: `${host.name}-${type}-${Date.now()}`,
+        type,
+        label: `${host.name} (${same.length + 1})`,
+        host,
+      };
+      setActiveTabId(tab.id);
+      return [...next, tab];
+    });
+  }
+
+  function connectHost(host: Host, preferredType?: TabType) {
+    const type: TabType =
+      preferredType ??
+      (host.enableSsh
+        ? "terminal"
+        : host.enableRdp
+          ? "rdp"
+          : host.enableVnc
+            ? "vnc"
+            : host.enableTelnet
+              ? "telnet"
+              : "terminal");
+    openTab(host, type);
+  }
+
+  function openSingletonTab(type: TabType, pendingEvent?: string) {
+    if (type === "host-manager") {
+      if (pendingEvent === "host-manager:add-host")
+        pendingHostManagerAction.current = "add-host";
+      else if (pendingEvent === "host-manager:add-credential")
+        pendingHostManagerAction.current = "add-credential";
+
+      setHostManagerExpanded(true);
+      setSidebarOpen(true);
+      setRailView("hosts");
+
+      if (pendingEvent) {
+        // Use a small delay to ensure HostManager is mounted if it wasn't already,
+        // and to allow the current render cycle to complete.
+        setTimeout(() => {
+          window.dispatchEvent(new CustomEvent(pendingEvent));
+        }, 0);
+      }
+      return;
+    }
+    if (type === "user-profile" || type === "admin-settings") {
+      handleRailClick(type as RailView);
+      return;
+    }
+    const id = type;
+    setTabs((prev) => {
+      if (prev.find((t) => t.id === id)) return prev;
+      return [...prev, { id, type, label: SINGLETON_TAB_LABELS[type] ?? type }];
+    });
+    setActiveTabId(id);
+  }
+
+  function closeTab(id: string) {
+    setTabs((prev) => {
+      const next = prev.filter((t) => t.id !== id);
+      if (id === activeTabId) setActiveTabId(next[next.length - 1].id);
+      return next;
+    });
+  }
+
+  // ─── Rail / sidebar ──────────────────────────────────────────────────────
+
+  function handleRailClick(view: RailView) {
+    if (railView === view && sidebarOpen) {
+      setSidebarOpen(false);
+    } else {
+      setRailView(view);
+      setSidebarOpen(true);
+    }
+  }
+
+  function editHostInManager(host: Host) {
+    pendingHostManagerEditId.current = host.id;
+    setHostManagerExpanded(true);
+    setSidebarOpen(true);
+    setRailView("hosts");
+  }
+
+  const onSidebarMouseDown = useCallback(
+    (e: React.MouseEvent) => {
+      e.preventDefault();
+      setSidebarDragging(true);
+      const startX = e.clientX;
+      const startW = sidebarWidth;
+      function onMove(ev: MouseEvent) {
+        setSidebarWidth(
+          Math.max(160, Math.min(480, startW + ev.clientX - startX)),
+        );
+      }
+      function onUp() {
+        setSidebarDragging(false);
+        window.removeEventListener("mousemove", onMove);
+        window.removeEventListener("mouseup", onUp);
+      }
+      window.addEventListener("mousemove", onMove);
+      window.addEventListener("mouseup", onUp);
+    },
+    [sidebarWidth],
+  );
+
+  const activeTab = tabs.find((t) => t.id === activeTabId)!;
+  const isSplit = splitMode !== "none";
+  const terminalTabs = tabs.filter((t) => t.type === "terminal");
+
+  // Sidebar panel content — shared between desktop inline sidebar and mobile sheet
+  const sidebarPanelContent = (
+    <div className="flex flex-col flex-1 min-h-0 overflow-hidden">
+      {railView === "hosts" && (
+        <HostsPanel
+          expanded={hostManagerExpanded}
+          onExpand={() => setHostManagerExpanded(true)}
+          onCollapse={() => {
+            setHostManagerExpanded(false);
+            loadHosts();
+          }}
+          pendingEditId={pendingHostManagerEditId}
+          pendingAction={pendingHostManagerAction}
+          onOpenTab={(host, type) => {
+            connectHost(host, type);
+            if (isMobile) setSidebarOpen(false);
+          }}
+          onEditHost={editHostInManager}
+          hostTree={realHostTree ?? undefined}
+        />
+      )}
+
+      {railView === "quick-connect" && <QuickConnectPanel />}
+
+      {railView === "ssh-tools" && (
+        <div className="flex-1 min-h-0 overflow-y-auto">
+          <SshToolsPanel
+            terminalTabs={terminalTabs}
+            activeTabId={activeTabId}
+          />
+        </div>
+      )}
+
+      {railView === "snippets" && (
+        <div className="flex-1 min-h-0 overflow-y-auto">
+          <SnippetsPanel
+            terminalTabs={terminalTabs}
+            activeTabId={activeTabId}
+          />
+        </div>
+      )}
+
+      {railView === "history" && (
+        <div className="flex flex-col flex-1 min-h-0 overflow-y-auto">
+          <HistoryPanel terminalTabs={terminalTabs} activeTabId={activeTabId} />
+        </div>
+      )}
+
+      {railView === "split-screen" && (
+        <div className="flex-1 min-h-0 overflow-y-auto">
+          <SplitScreenPanel
+            tabs={tabs}
+            splitMode={splitMode}
+            setSplitMode={setSplitMode}
+            paneTabIds={paneTabIds}
+            setPaneTabIds={setPaneTabIds}
+          />
+        </div>
+      )}
+
+      {railView === "user-profile" && (
+        <div className="flex-1 min-h-0 overflow-y-auto">
+          <UserProfilePanel username={username} onLogout={onLogout} />
+        </div>
+      )}
+
+      {railView === "admin-settings" && (
+        <div className="flex-1 min-h-0 overflow-y-auto">
+          <AdminSettingsPanel />
+        </div>
+      )}
+    </div>
+  );
+
+  // Sidebar header — shared
+  const sidebarHeader = (
+    <div className="flex flex-row items-center border-b border-border h-12.5 shrink-0">
+      <span className="flex-1 text-base font-bold tracking-tight text-foreground px-3">
+        {sidebarTitle[railView]}
+      </span>
+      {!hostManagerExpanded && !isMobile && (
+        <>
+          <Separator orientation="vertical" />
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-full w-12.5 rounded-none text-muted-foreground hover:text-foreground"
+            title="Reset width"
+            onClick={() => setSidebarWidth(256)}
+          >
+            <Maximize2 className="size-3.5" />
+          </Button>
+        </>
+      )}
+      <Separator orientation="vertical" />
+      <Button
+        variant="ghost"
+        size="icon"
+        className="h-full w-12.5 rounded-none text-muted-foreground hover:text-foreground"
+        onClick={() => {
+          setSidebarOpen(false);
+          setHostManagerExpanded(false);
+        }}
+      >
+        <ChevronLeft className="size-4" />
+      </Button>
+    </div>
+  );
+
+  return (
+    <>
+      <div className="flex w-screen bg-background" style={{ height: "100dvh" }}>
+        {/* Skinny icon rail — desktop only, hidden on mobile */}
+        <AppRail
+          railView={railView}
+          sidebarOpen={sidebarOpen}
+          splitMode={splitMode}
+          username={username}
+          profileDropdownOpen={profileDropdownOpen}
+          onProfileDropdownChange={setProfileDropdownOpen}
+          onRailClick={handleRailClick}
+          onLogout={onLogout}
+        />
+
+        {/* Desktop: inline resizable sidebar */}
+        {!isMobile && (
+          <div
+            className={`relative flex flex-col bg-sidebar shrink-0 overflow-hidden ${sidebarOpen ? `border-r transition-colors ${sidebarDragging ? "border-accent-brand/60" : "border-border"}` : ""}`}
+            style={{
+              width: sidebarOpen
+                ? hostManagerExpanded && railView === "hosts"
+                  ? 720
+                  : sidebarWidth
+                : 0,
+              transition: sidebarDragging ? "none" : "width 0.2s",
+            }}
+          >
+            {sidebarHeader}
+            {sidebarPanelContent}
+
+            {sidebarOpen && !(hostManagerExpanded && railView === "hosts") && (
+              <div
+                onMouseDown={onSidebarMouseDown}
+                className={`absolute right-0 top-0 bottom-0 w-1 cursor-col-resize z-30 transition-colors ${sidebarDragging ? "bg-accent-brand/60" : "hover:bg-accent-brand/40"}`}
+              />
+            )}
+          </div>
+        )}
+
+        {/* Mobile: sidebar as overlay sheet */}
+        {isMobile && (
+          <Sheet
+            open={sidebarOpen}
+            onOpenChange={(open) => {
+              setSidebarOpen(open);
+              if (!open) setHostManagerExpanded(false);
+            }}
+          >
+            <SheetContent
+              side="left"
+              showCloseButton={false}
+              className="p-0 flex flex-col w-[min(85vw,360px)] max-w-full bg-sidebar border-r border-border gap-0"
+              style={{ height: "100dvh" }}
+            >
+              {sidebarHeader}
+              {sidebarPanelContent}
+            </SheetContent>
+          </Sheet>
+        )}
+
+        {/* Main content area */}
+        <div
+          className={`relative flex flex-col flex-1 min-w-0 overflow-hidden transition-all duration-200 ${!isMobile && !sidebarOpen ? "pl-6" : ""}`}
+        >
+          {!isMobile && !sidebarOpen && (
+            <button
+              onClick={() => setSidebarOpen(true)}
+              title="Open Sidebar"
+              className="absolute left-0 top-0 bottom-0 z-20 flex items-center justify-center w-6 bg-sidebar border-r border-border text-muted-foreground hover:text-accent-brand hover:bg-accent-brand/5 transition-colors"
+            >
+              <ChevronRight className="size-3.5" />
+            </button>
+          )}
+          <div className="flex flex-col flex-1 min-w-0 min-h-0 overflow-hidden">
+            <TabBar
+              tabs={tabs}
+              activeTabId={activeTabId}
+              onSetActiveTab={setActiveTabId}
+              onCloseTab={closeTab}
+              onReorderTabs={setTabs}
+            />
+            <div className="flex flex-col flex-1 min-h-0 overflow-hidden">
+              {isSplit && !isMobile ? (
+                <SplitView
+                  tabs={tabs}
+                  paneTabIds={paneTabIds}
+                  splitMode={splitMode}
+                  onOpenSingletonTab={openSingletonTab}
+                  onOpenTab={openTab}
+                />
+              ) : activeTab ? (
+                renderTabContent(activeTab, openSingletonTab, openTab)
+              ) : null}
+            </div>
+          </div>
+
+          {/* Bottom nav bar — mobile only */}
+          <MobileBottomBar
+            railView={railView}
+            sidebarOpen={sidebarOpen}
+            splitMode={splitMode}
+            onRailClick={handleRailClick}
+          />
+        </div>
+      </div>
+
+      <CommandPalette
+        isOpen={commandPaletteOpen}
+        setIsOpen={setCommandPaletteOpen}
+        hosts={allHosts}
+        onOpenTab={(type, label, pendingEvent) => {
+          if (
+            [
+              "dashboard",
+              "host-manager",
+              "user-profile",
+              "admin-settings",
+              "docker",
+              "tunnel",
+            ].includes(type)
+          ) {
+            openSingletonTab(type, pendingEvent);
+          } else if (label) {
+            const host = allHosts.find((h) => h.name === label);
+            if (host) openTab(host, type);
+          }
+        }}
+      />
+    </>
+  );
+}

src/ui/admin/AdminSettings.tsx

@@ -1,12 +1,12 @@
 import React from "react";
-import { useSidebar } from "@/components/ui/sidebar.tsx";
-import { Separator } from "@/components/ui/separator.tsx";
+import { useSidebar } from "@/components/sidebar.tsx";
+import { Separator } from "@/components/separator.tsx";
 import {
   Tabs,
   TabsContent,
   TabsList,
   TabsTrigger,
-} from "@/components/ui/tabs.tsx";
+} from "@/components/tabs.tsx";
 import { Shield, Users, Database, Clock, Key } from "lucide-react";
 import { toast } from "sonner";
 import { useTranslation } from "react-i18next";
@@ -21,15 +21,15 @@ import {
   isElectron,
   getSessions,
   unlinkOIDCFromPasswordAccount,
-} from "@/ui/main-axios.ts";
-import { SimpleLoader } from "@/ui/desktop/navigation/animations/SimpleLoader.tsx";
-import { RolesTab } from "@/ui/desktop/apps/admin/tabs/RolesTab.tsx";
-import { GeneralSettingsTab } from "@/ui/desktop/apps/admin/tabs/GeneralSettingsTab.tsx";
-import { OIDCSettingsTab } from "@/ui/desktop/apps/admin/tabs/OIDCSettingsTab.tsx";
-import { UserManagementTab } from "@/ui/desktop/apps/admin/tabs/UserManagementTab.tsx";
-import { SessionManagementTab } from "@/ui/desktop/apps/admin/tabs/SessionManagementTab.tsx";
-import { DatabaseSecurityTab } from "@/ui/desktop/apps/admin/tabs/DatabaseSecurityTab.tsx";
-import { ApiKeysTab } from "@/ui/desktop/apps/admin/tabs/ApiKeysTab.tsx";
+} from "@/main-axios.ts";
+import { SimpleLoader } from "@/lib/SimpleLoader.tsx";
+import { RolesTab } from "@/admin/tabs/RolesTab.tsx";
+import { GeneralSettingsTab } from "@/admin/tabs/GeneralSettingsTab.tsx";
+import { OIDCSettingsTab } from "@/admin/tabs/OIDCSettingsTab.tsx";
+import { UserManagementTab } from "@/admin/tabs/UserManagementTab.tsx";
+import { SessionManagementTab } from "@/admin/tabs/SessionManagementTab.tsx";
+import { DatabaseSecurityTab } from "@/admin/tabs/DatabaseSecurityTab.tsx";
+import { ApiKeysTab } from "@/admin/tabs/ApiKeysTab.tsx";
 import { CreateUserDialog } from "./dialogs/CreateUserDialog.tsx";
 import { UserEditDialog } from "./dialogs/UserEditDialog.tsx";
 import { LinkAccountDialog } from "./dialogs/LinkAccountDialog.tsx";

src/ui/admin/dialogs/CreateUserDialog.tsx

@@ -6,16 +6,16 @@ import {
   DialogHeader,
   DialogTitle,
   DialogFooter,
-} from "@/components/ui/dialog.tsx";
-import { Button } from "@/components/ui/button.tsx";
-import { Label } from "@/components/ui/label.tsx";
-import { Input } from "@/components/ui/input.tsx";
-import { PasswordInput } from "@/components/ui/password-input.tsx";
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert.tsx";
+} from "@/components/dialog.tsx";
+import { Button } from "@/components/button.tsx";
+import { Label } from "@/components/label.tsx";
+import { Input } from "@/components/input.tsx";
+import { PasswordInput } from "@/components/password-input.tsx";
+import { Alert, AlertDescription, AlertTitle } from "@/components/alert.tsx";
 import { useTranslation } from "react-i18next";
 import { UserPlus, AlertCircle } from "lucide-react";
 import { toast } from "sonner";
-import { registerUser } from "@/ui/main-axios.ts";
+import { registerUser } from "@/main-axios.ts";
 
 interface CreateUserDialogProps {
   open: boolean;

src/ui/admin/dialogs/LinkAccountDialog.tsx

@@ -6,15 +6,15 @@ import {
   DialogFooter,
   DialogHeader,
   DialogTitle,
-} from "@/components/ui/dialog.tsx";
-import { Button } from "@/components/ui/button.tsx";
-import { Label } from "@/components/ui/label.tsx";
-import { Input } from "@/components/ui/input.tsx";
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert.tsx";
+} from "@/components/dialog.tsx";
+import { Button } from "@/components/button.tsx";
+import { Label } from "@/components/label.tsx";
+import { Input } from "@/components/input.tsx";
+import { Alert, AlertDescription, AlertTitle } from "@/components/alert.tsx";
 import { useTranslation } from "react-i18next";
 import { Link2 } from "lucide-react";
 import { toast } from "sonner";
-import { linkOIDCToPasswordAccount } from "@/ui/main-axios.ts";
+import { linkOIDCToPasswordAccount } from "@/main-axios.ts";
 
 interface LinkAccountDialogProps {
   open: boolean;

src/ui/admin/dialogs/UserEditDialog.tsx

@@ -5,13 +5,13 @@ import {
   DialogDescription,
   DialogHeader,
   DialogTitle,
-} from "@/components/ui/dialog.tsx";
-import { Button } from "@/components/ui/button.tsx";
-import { Label } from "@/components/ui/label.tsx";
-import { Badge } from "@/components/ui/badge.tsx";
-import { Switch } from "@/components/ui/switch.tsx";
-import { Separator } from "@/components/ui/separator.tsx";
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert.tsx";
+} from "@/components/dialog.tsx";
+import { Button } from "@/components/button.tsx";
+import { Label } from "@/components/label.tsx";
+import { Badge } from "@/components/badge.tsx";
+import { Switch } from "@/components/switch.tsx";
+import { Separator } from "@/components/separator.tsx";
+import { Alert, AlertDescription, AlertTitle } from "@/components/alert.tsx";
 import { useTranslation } from "react-i18next";
 import {
   UserCog,
@@ -34,7 +34,7 @@ import {
   deleteUser,
   type UserRole,
   type Role,
-} from "@/ui/main-axios.ts";
+} from "@/main-axios.ts";
 
 interface User {
   id: string;

src/ui/admin/tabs/ApiKeysTab.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Button } from "@/components/ui/button.tsx";
+import { Button } from "@/components/button.tsx";
 import {
   Table,
   TableBody,
@@ -7,7 +7,7 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-} from "@/components/ui/table.tsx";
+} from "@/components/table.tsx";
 import {
   Dialog,
   DialogContent,
@@ -15,12 +15,12 @@ import {
   DialogFooter,
   DialogHeader,
   DialogTitle,
-} from "@/components/ui/dialog.tsx";
+} from "@/components/dialog.tsx";
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from "@/components/ui/popover.tsx";
+} from "@/components/popover.tsx";
 import {
   Command,
   CommandEmpty,
@@ -28,11 +28,11 @@ import {
   CommandInput,
   CommandItem,
   CommandList,
-} from "@/components/ui/command.tsx";
-import { Input } from "@/components/ui/input.tsx";
-import { Label } from "@/components/ui/label.tsx";
-import { Badge } from "@/components/ui/badge.tsx";
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert.tsx";
+} from "@/components/command.tsx";
+import { Input } from "@/components/input.tsx";
+import { Label } from "@/components/label.tsx";
+import { Badge } from "@/components/badge.tsx";
+import { Alert, AlertDescription, AlertTitle } from "@/components/alert.tsx";
 import {
   Key,
   Plus,
@@ -54,7 +54,7 @@ import {
   getUserList,
   type ApiKey,
   type CreatedApiKey,
-} from "@/ui/main-axios.ts";
+} from "@/main-axios.ts";
 
 interface UserOption {
   id: string;

src/ui/admin/tabs/DatabaseSecurityTab.tsx

@@ -1,9 +1,9 @@
 import React from "react";
-import { Button } from "@/components/ui/button.tsx";
+import { Button } from "@/components/button.tsx";
 import { Download, Upload } from "lucide-react";
 import { useTranslation } from "react-i18next";
 import { toast } from "sonner";
-import { isElectron } from "@/ui/main-axios.ts";
+import { isElectron } from "@/main-axios.ts";
 import { getBasePath } from "@/lib/base-path";
 
 export function DatabaseSecurityTab(): React.ReactElement {

src/ui/admin/tabs/GeneralSettingsTab.tsx

@@ -1,13 +1,13 @@
 import React from "react";
-import { Checkbox } from "@/components/ui/checkbox.tsx";
-import { Input } from "@/components/ui/input.tsx";
+import { Checkbox } from "@/components/checkbox.tsx";
+import { Input } from "@/components/input.tsx";
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "@/components/ui/select.tsx";
+} from "@/components/select.tsx";
 import { useTranslation } from "react-i18next";
 import { toast } from "sonner";
 import { useConfirmation } from "@/hooks/use-confirmation.ts";
@@ -23,8 +23,8 @@ import {
   updateLogLevel,
   getSessionTimeout,
   updateSessionTimeout,
-} from "@/ui/main-axios.ts";
-import { Button } from "@/components/ui/button.tsx";
+} from "@/main-axios.ts";
+import { Button } from "@/components/button.tsx";
 
 interface GeneralSettingsTabProps {
   allowRegistration: boolean;

src/ui/admin/tabs/OIDCSettingsTab.tsx

@@ -1,14 +1,14 @@
 import React from "react";
-import { Button } from "@/components/ui/button.tsx";
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert.tsx";
-import { Input } from "@/components/ui/input.tsx";
-import { PasswordInput } from "@/components/ui/password-input.tsx";
-import { Label } from "@/components/ui/label.tsx";
+import { Button } from "@/components/button.tsx";
+import { Alert, AlertDescription, AlertTitle } from "@/components/alert.tsx";
+import { Input } from "@/components/input.tsx";
+import { PasswordInput } from "@/components/password-input.tsx";
+import { Label } from "@/components/label.tsx";
 import { useTranslation } from "react-i18next";
 import { toast } from "sonner";
 import { useConfirmation } from "@/hooks/use-confirmation.ts";
-import { Textarea } from "@/components/ui/textarea.tsx";
-import { updateOIDCConfig, disableOIDCConfig } from "@/ui/main-axios.ts";
+import { Textarea } from "@/components/textarea.tsx";
+import { updateOIDCConfig, disableOIDCConfig } from "@/main-axios.ts";
 
 interface OIDCSettingsTabProps {
   allowPasswordLogin: boolean;

src/ui/admin/tabs/RolesTab.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Button } from "@/components/ui/button.tsx";
+import { Button } from "@/components/button.tsx";
 import {
   Dialog,
   DialogContent,
@@ -7,7 +7,7 @@ import {
   DialogFooter,
   DialogHeader,
   DialogTitle,
-} from "@/components/ui/dialog.tsx";
+} from "@/components/dialog.tsx";
 import {
   Table,
   TableBody,
@@ -15,11 +15,11 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-} from "@/components/ui/table.tsx";
-import { Input } from "@/components/ui/input.tsx";
-import { Label } from "@/components/ui/label.tsx";
-import { Textarea } from "@/components/ui/textarea.tsx";
-import { Badge } from "@/components/ui/badge.tsx";
+} from "@/components/table.tsx";
+import { Input } from "@/components/input.tsx";
+import { Label } from "@/components/label.tsx";
+import { Textarea } from "@/components/textarea.tsx";
+import { Badge } from "@/components/badge.tsx";
 import { Shield, Plus, Edit, Trash2 } from "lucide-react";
 import { toast } from "sonner";
 import { useTranslation } from "react-i18next";
@@ -30,7 +30,7 @@ import {
   updateRole,
   deleteRole,
   type Role,
-} from "@/ui/main-axios.ts";
+} from "@/main-axios.ts";
 
 export function RolesTab(): React.ReactElement {
   const { t } = useTranslation();

src/ui/admin/tabs/SessionManagementTab.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Button } from "@/components/ui/button.tsx";
+import { Button } from "@/components/button.tsx";
 import {
   Table,
   TableBody,
@@ -7,12 +7,12 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-} from "@/components/ui/table.tsx";
+} from "@/components/table.tsx";
 import { Monitor, Smartphone, Globe, Trash2 } from "lucide-react";
 import { useTranslation } from "react-i18next";
 import { toast } from "sonner";
 import { useConfirmation } from "@/hooks/use-confirmation.ts";
-import { revokeSession, revokeAllUserSessions } from "@/ui/main-axios.ts";
+import { revokeSession, revokeAllUserSessions } from "@/main-axios.ts";
 
 interface Session {
   id: string;

src/ui/admin/tabs/UserManagementTab.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Button } from "@/components/ui/button.tsx";
+import { Button } from "@/components/button.tsx";
 import {
   Table,
   TableBody,
@@ -7,12 +7,12 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-} from "@/components/ui/table.tsx";
+} from "@/components/table.tsx";
 import { UserPlus, Edit, Trash2, Link2, Unlink } from "lucide-react";
 import { useTranslation } from "react-i18next";
 import { toast } from "sonner";
 import { useConfirmation } from "@/hooks/use-confirmation.ts";
-import { deleteUser } from "@/ui/main-axios.ts";
+import { deleteUser } from "@/main-axios.ts";
 
 interface User {
   id: string;

src/ui/auth/ElectronLoginForm.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useRef, useCallback } from "react";
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert.tsx";
+import { Alert, AlertDescription, AlertTitle } from "@/components/alert.tsx";
 import { useTranslation } from "react-i18next";
 import { AlertCircle, Loader2, ArrowLeft, RefreshCw } from "lucide-react";
 

src/ui/auth/ElectronServerConfig.tsx

@@ -1,8 +1,8 @@
 import React, { useState, useEffect } from "react";
-import { Button } from "@/components/ui/button.tsx";
-import { Input } from "@/components/ui/input.tsx";
-import { Label } from "@/components/ui/label.tsx";
-import { Alert, AlertTitle, AlertDescription } from "@/components/ui/alert.tsx";
+import { Button } from "@/components/button.tsx";
+import { Input } from "@/components/input.tsx";
+import { Label } from "@/components/label.tsx";
+import { Alert, AlertTitle, AlertDescription } from "@/components/alert.tsx";
 import { useTranslation } from "react-i18next";
 import {
   getServerConfig,
@@ -10,7 +10,7 @@ import {
   getEmbeddedServerStatus,
   setEmbeddedMode,
   type ServerConfig,
-} from "@/ui/main-axios.ts";
+} from "@/main-axios.ts";
 import { Server, Monitor, Loader2 } from "lucide-react";
 import { useTheme } from "@/components/theme-provider";
 

src/ui/auth/LoginPage.tsx

@@ -1,13 +1,13 @@
 import React, { useState, useEffect, useCallback } from "react";
-import { Button } from "@/components/ui/button.tsx";
-import { Input } from "@/components/ui/input.tsx";
-import { PasswordInput } from "@/components/ui/password-input.tsx";
-import { Label } from "@/components/ui/label.tsx";
-import { Checkbox } from "@/components/ui/checkbox.tsx";
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert.tsx";
-import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs.tsx";
+import { Button } from "@/components/button.tsx";
+import { Input } from "@/components/input.tsx";
+import { PasswordInput } from "@/components/password-input.tsx";
+import { Label } from "@/components/label.tsx";
+import { Checkbox } from "@/components/checkbox.tsx";
+import { Alert, AlertDescription, AlertTitle } from "@/components/alert.tsx";
+import { Tabs, TabsList, TabsTrigger } from "@/components/tabs.tsx";
 import { useTranslation } from "react-i18next";
-import { LanguageSwitcher } from "@/ui/desktop/user/LanguageSwitcher.tsx";
+import { LanguageSwitcher } from "@/user/LanguageSwitcher.tsx";
 import { toast } from "sonner";
 import { Sun, Moon, Monitor } from "lucide-react";
 import { useTheme } from "@/components/theme-provider";
@@ -28,9 +28,9 @@ import {
   saveServerConfig,
   isElectron,
   getEmbeddedServerStatus,
-} from "../../main-axios.ts";
-import { ElectronServerConfig as ServerConfigComponent } from "@/ui/desktop/authentication/ElectronServerConfig.tsx";
-import { ElectronLoginForm } from "@/ui/desktop/authentication/ElectronLoginForm.tsx";
+} from "@/main-axios";
+import { ElectronServerConfig as ServerConfigComponent } from "@/auth/ElectronServerConfig.tsx";
+import { ElectronLoginForm } from "@/auth/ElectronLoginForm.tsx";
 
 function isMissingServerConfigError(error: unknown): boolean {
   if (!(error instanceof Error)) {

src/ui/components/alert-dialog.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
 
 import { cn } from "@/lib/utils";
-import { buttonVariants } from "@/components/ui/button";
+import { buttonVariants } from "@/components/button";
 
 function AlertDialog({
   ...props

src/ui/components/button-group.tsx

@@ -1,6 +1,11 @@
-import { Children, ReactElement, cloneElement, isValidElement } from "react";
+import {
+  Children,
+  type ReactElement,
+  cloneElement,
+  isValidElement,
+} from "react";
 
-import { type ButtonProps } from "@/components/ui/button";
+import { type ButtonProps } from "@/components/button";
 import { cn } from "@/lib/utils";
 
 interface ButtonGroupProps {

src/ui/components/button.tsx

@@ -0,0 +1,68 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { Slot } from "radix-ui";
+
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+  "group/button inline-flex shrink-0 items-center justify-center rounded-none border border-transparent bg-clip-padding text-xs font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-1 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+        outline:
+          "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+        ghost:
+          "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
+        destructive:
+          "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default:
+          "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        xs: "h-6 gap-1 rounded-none px-2 text-xs has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-7 gap-1 rounded-none px-2.5 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+        lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        icon: "size-8",
+        "icon-xs": "size-6 rounded-none [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "size-7 rounded-none",
+        "icon-lg": "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+  }) {
+  const Comp = asChild ? Slot.Root : "button";
+
+  return (
+    <Comp
+      data-slot="button"
+      data-variant={variant}
+      data-size={size}
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  );
+}
+
+export type ButtonProps = React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & { asChild?: boolean };
+
+export { Button, buttonVariants };

src/ui/components/card.tsx

@@ -2,12 +2,17 @@ import * as React from "react";
 
 import { cn } from "@/lib/utils";
 
-function Card({ className, ...props }: React.ComponentProps<"div">) {
+function Card({
+  className,
+  size = "default",
+  ...props
+}: React.ComponentProps<"div"> & { size?: "default" | "sm" }) {
   return (
     <div
       data-slot="card"
+      data-size={size}
       className={cn(
-        "bg-elevated text-foreground flex flex-col gap-6 rounded-lg border-2 border-edge py-6 shadow-sm",
+        "group/card flex flex-col gap-4 overflow-hidden rounded-none bg-card py-4 text-xs/relaxed text-card-foreground border border-foreground/10 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-2 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-none *:[img:last-child]:rounded-none",
         className,
       )}
       {...props}
@@ -20,7 +25,7 @@ function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="card-header"
       className={cn(
-        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        "group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-none px-4 group-data-[size=sm]/card:px-3 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3",
         className,
       )}
       {...props}
@@ -32,7 +37,10 @@ function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="card-title"
-      className={cn("leading-none font-semibold", className)}
+      className={cn(
+        "font-heading text-sm font-medium group-data-[size=sm]/card:text-sm",
+        className,
+      )}
       {...props}
     />
   );
@@ -42,7 +50,7 @@ function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="card-description"
-      className={cn("text-muted-foreground text-sm", className)}
+      className={cn("text-xs/relaxed text-muted-foreground", className)}
       {...props}
     />
   );
@@ -65,7 +73,7 @@ function CardContent({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="card-content"
-      className={cn("px-6", className)}
+      className={cn("px-4 group-data-[size=sm]/card:px-3", className)}
       {...props}
     />
   );
@@ -75,7 +83,10 @@ function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="card-footer"
-      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+      className={cn(
+        "flex items-center rounded-none border-t p-4 group-data-[size=sm]/card:p-3",
+        className,
+      )}
       {...props}
     />
   );

src/ui/components/command.tsx

@@ -0,0 +1,130 @@
+import * as React from "react";
+import { Search } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+const Command = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "flex h-full w-full flex-col overflow-hidden rounded-none bg-popover text-popover-foreground",
+      className,
+    )}
+    {...props}
+  />
+));
+Command.displayName = "Command";
+
+const CommandInput = React.forwardRef<
+  HTMLInputElement,
+  React.InputHTMLAttributes<HTMLInputElement>
+>(({ className, ...props }, ref) => (
+  <div
+    className="flex items-center border-b border-border px-3"
+    cm-input-wrapper=""
+  >
+    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+    <input
+      ref={ref}
+      className={cn(
+        "flex h-11 w-full rounded-none bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    />
+  </div>
+));
+CommandInput.displayName = "CommandInput";
+
+const CommandList = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
+    {...props}
+  />
+));
+CommandList.displayName = "CommandList";
+
+const CommandGroup = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & { heading?: string }
+>(({ className, heading, children, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "overflow-hidden p-1 text-foreground [&_[cm-group-heading]]:px-2 [&_[cm-group-heading]]:py-1.5 [&_[cm-group-heading]]:text-xs [&_[cm-group-heading]]:font-medium [&_[cm-group-heading]]:text-muted-foreground",
+      className,
+    )}
+    {...props}
+  >
+    {heading && <div cm-group-heading="">{heading}</div>}
+    {children}
+  </div>
+));
+CommandGroup.displayName = "CommandGroup";
+
+const CommandSeparator = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("-mx-1 h-px bg-border", className)} {...props} />
+));
+CommandSeparator.displayName = "CommandSeparator";
+
+const CommandItem = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & { onSelect?: () => void }
+>(({ className, onSelect, ...props }, ref) => (
+  <div
+    ref={ref}
+    onClick={onSelect}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-muted hover:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 transition-colors",
+      className,
+    )}
+    {...props}
+  />
+));
+CommandItem.displayName = "CommandItem";
+
+const CommandEmpty = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("py-6 text-center text-sm text-muted-foreground", className)}
+    {...props}
+  />
+));
+CommandEmpty.displayName = "CommandEmpty";
+
+const CommandShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => (
+  <span
+    className={cn(
+      "ml-auto text-xs tracking-widest text-muted-foreground",
+      className,
+    )}
+    {...props}
+  />
+);
+CommandShortcut.displayName = "CommandShortcut";
+
+export {
+  Command,
+  CommandInput,
+  CommandList,
+  CommandGroup,
+  CommandItem,
+  CommandSeparator,
+  CommandEmpty,
+  CommandShortcut,
+};

src/ui/components/dialog.tsx

@@ -1,8 +1,9 @@
 import * as React from "react";
-import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { XIcon } from "lucide-react";
+import { Dialog as DialogPrimitive } from "radix-ui";
 
 import { cn } from "@/lib/utils";
+import { Button } from "@/components/button";
+import { XIcon } from "lucide-react";
 
 function Dialog({
   ...props
@@ -36,7 +37,7 @@ function DialogOverlay({
     <DialogPrimitive.Overlay
       data-slot="dialog-overlay"
       className={cn(
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-overlay",
+        "fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
         className,
       )}
       {...props}
@@ -53,24 +54,27 @@ function DialogContent({
   showCloseButton?: boolean;
 }) {
   return (
-    <DialogPortal data-slot="dialog-portal">
+    <DialogPortal>
       <DialogOverlay />
       <DialogPrimitive.Content
         data-slot="dialog-content"
         className={cn(
-          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          "fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-none bg-popover p-4 text-xs/relaxed text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
           className,
         )}
         {...props}
       >
         {children}
         {showCloseButton && (
-          <DialogPrimitive.Close
-            data-slot="dialog-close"
-            className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+          <DialogPrimitive.Close data-slot="dialog-close" asChild>
+            <Button
+              variant="ghost"
+              className="absolute top-2 right-2"
+              size="icon-sm"
             >
               <XIcon />
               <span className="sr-only">Close</span>
+            </Button>
           </DialogPrimitive.Close>
         )}
       </DialogPrimitive.Content>
@@ -82,13 +86,20 @@ function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="dialog-header"
-      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      className={cn("flex flex-col gap-1 text-left", className)}
       {...props}
     />
   );
 }
 
-function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+function DialogFooter({
+  className,
+  showCloseButton = false,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & {
+  showCloseButton?: boolean;
+}) {
   return (
     <div
       data-slot="dialog-footer"
@@ -97,7 +108,14 @@ function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
         className,
       )}
       {...props}
-    />
+    >
+      {children}
+      {showCloseButton && (
+        <DialogPrimitive.Close asChild>
+          <Button variant="outline">Close</Button>
+        </DialogPrimitive.Close>
+      )}
+    </div>
   );
 }
 
@@ -108,7 +126,7 @@ function DialogTitle({
   return (
     <DialogPrimitive.Title
       data-slot="dialog-title"
-      className={cn("text-lg leading-none font-semibold", className)}
+      className={cn("font-heading text-sm font-medium", className)}
       {...props}
     />
   );
@@ -121,7 +139,10 @@ function DialogDescription({
   return (
     <DialogPrimitive.Description
       data-slot="dialog-description"
-      className={cn("text-muted-foreground text-sm", className)}
+      className={cn(
+        "text-xs/relaxed text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
+        className,
+      )}
       {...props}
     />
   );

src/ui/components/dropdown-menu.tsx

@@ -0,0 +1,271 @@
+import * as React from "react";
+import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
+
+import { cn } from "@/lib/utils";
+import { CheckIcon, ChevronRightIcon } from "lucide-react";
+
+function DropdownMenu({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
+}
+
+function DropdownMenuPortal({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+  return (
+    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+  );
+}
+
+function DropdownMenuTrigger({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+  return (
+    <DropdownMenuPrimitive.Trigger
+      data-slot="dropdown-menu-trigger"
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuContent({
+  className,
+  align = "start",
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        data-slot="dropdown-menu-content"
+        sideOffset={sideOffset}
+        align={align}
+        className={cn(
+          "z-50 max-h-(--radix-dropdown-menu-content-available-height) w-(--radix-dropdown-menu-trigger-width) min-w-32 origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-none bg-popover text-popover-foreground shadow-md ring-1 ring-border duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:overflow-hidden data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          className,
+        )}
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
+  );
+}
+
+function DropdownMenuGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+  return (
+    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+  );
+}
+
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+  inset?: boolean;
+  variant?: "default" | "destructive";
+}) {
+  return (
+    <DropdownMenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "group/dropdown-menu-item relative flex cursor-default items-center gap-2 rounded-none px-2 py-2 text-xs outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem> & {
+  inset?: boolean;
+}) {
+  return (
+    <DropdownMenuPrimitive.CheckboxItem
+      data-slot="dropdown-menu-checkbox-item"
+      data-inset={inset}
+      className={cn(
+        "relative flex cursor-default items-center gap-2 rounded-none py-2 pr-8 pl-2 text-xs outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span
+        className="pointer-events-none absolute right-2 flex items-center justify-center"
+        data-slot="dropdown-menu-checkbox-item-indicator"
+      >
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CheckIcon />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.CheckboxItem>
+  );
+}
+
+function DropdownMenuRadioGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
+  return (
+    <DropdownMenuPrimitive.RadioGroup
+      data-slot="dropdown-menu-radio-group"
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuRadioItem({
+  className,
+  children,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem> & {
+  inset?: boolean;
+}) {
+  return (
+    <DropdownMenuPrimitive.RadioItem
+      data-slot="dropdown-menu-radio-item"
+      data-inset={inset}
+      className={cn(
+        "relative flex cursor-default items-center gap-2 rounded-none py-2 pr-8 pl-2 text-xs outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    >
+      <span
+        className="pointer-events-none absolute right-2 flex items-center justify-center"
+        data-slot="dropdown-menu-radio-item-indicator"
+      >
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CheckIcon />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.RadioItem>
+  );
+}
+
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+  inset?: boolean;
+}) {
+  return (
+    <DropdownMenuPrimitive.Label
+      data-slot="dropdown-menu-label"
+      data-inset={inset}
+      className={cn(
+        "px-2 py-2 text-xs text-muted-foreground data-inset:pl-7",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+  return (
+    <DropdownMenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      className={cn("-mx-1 h-px bg-border", className)}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="dropdown-menu-shortcut"
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuSub({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />;
+}
+
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+  inset?: boolean;
+}) {
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "flex cursor-default items-center gap-2 rounded-none px-2 py-2 text-xs outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto" />
+    </DropdownMenuPrimitive.SubTrigger>
+  );
+}
+
+function DropdownMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+  return (
+    <DropdownMenuPrimitive.SubContent
+      data-slot="dropdown-menu-sub-content"
+      className={cn(
+        "z-50 min-w-[96px] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-none bg-popover text-popover-foreground shadow-lg ring-1 ring-border duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+};

src/ui/components/form.tsx

@@ -13,7 +13,7 @@ import {
 } from "react-hook-form";
 
 import { cn } from "@/lib/utils";
-import { Label } from "@/components/ui/label";
+import { Label } from "@/components/label";
 
 const Form = FormProvider;
 

src/ui/components/input.tsx

@@ -0,0 +1,19 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "h-8 w-full min-w-0 rounded-none border border-input bg-transparent px-2.5 py-1 text-xs transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-xs file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-1 aria-invalid:ring-destructive/20 md:text-xs dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Input };

src/ui/components/kbd.tsx

@@ -0,0 +1,40 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+export interface KbdProps extends React.HTMLAttributes<HTMLElement> {}
+
+const Kbd = React.forwardRef<HTMLElement, KbdProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <kbd
+        ref={ref}
+        className={cn(
+          "pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded-none border border-border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100",
+          className,
+        )}
+        {...props}
+      />
+    );
+  },
+);
+Kbd.displayName = "Kbd";
+
+const KbdKey = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => (
+  <span className={cn("", className)} {...props} />
+);
+KbdKey.displayName = "KbdKey";
+
+const KbdSeparator = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => (
+  <span className={cn("text-muted-foreground/50", className)} {...props}>
+    +
+  </span>
+);
+KbdSeparator.displayName = "KbdSeparator";
+
+export { Kbd, KbdKey, KbdSeparator };

src/ui/components/password-input.tsx

@@ -2,7 +2,7 @@
 
 import * as React from "react";
 import { Eye, EyeOff } from "lucide-react";
-import { Input } from "@/components/ui/input";
+import { Input } from "@/components/input";
 import { cn } from "@/lib/utils";
 
 type PasswordInputProps = React.InputHTMLAttributes<HTMLInputElement>;

src/ui/components/section-card.tsx

@@ -0,0 +1,82 @@
+import { useState } from "react";
+import type React from "react";
+
+export function SectionCard({
+  title,
+  icon,
+  action,
+  children,
+}: {
+  title: string;
+  icon: React.ReactNode;
+  action?: React.ReactNode;
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="flex flex-col border border-border bg-card">
+      <div className="flex items-center gap-2 px-4 py-2.5 border-b border-border shrink-0">
+        <span className="text-muted-foreground">{icon}</span>
+        <span className="text-xs font-semibold uppercase tracking-widest text-muted-foreground flex-1">
+          {title}
+        </span>
+        {action && <div className="ml-auto">{action}</div>}
+      </div>
+      <div className="px-3 md:px-4 py-1">{children}</div>
+    </div>
+  );
+}
+
+export function SettingRow({
+  label,
+  badge,
+  description,
+  children,
+}: {
+  label: string;
+  badge?: string;
+  description?: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="flex items-center justify-between py-3 border-b border-border last:border-0">
+      <div className="flex flex-col gap-0.5">
+        <div className="flex items-center gap-1.5">
+          <span className="text-sm font-medium">{label}</span>
+          {badge && (
+            <span className="text-[10px] font-bold text-yellow-500 border border-yellow-500/40 px-1">
+              {badge}
+            </span>
+          )}
+        </div>
+        {description && (
+          <span className="text-xs text-muted-foreground">{description}</span>
+        )}
+      </div>
+      <div className="shrink-0 ml-4 md:ml-8">{children}</div>
+    </div>
+  );
+}
+
+export function FakeSwitch({
+  defaultChecked = false,
+  onChange,
+}: {
+  defaultChecked?: boolean;
+  onChange?: (v: boolean) => void;
+}) {
+  const [on, setOn] = useState(defaultChecked);
+  return (
+    <button
+      onClick={() => {
+        const next = !on;
+        setOn(next);
+        onChange?.(next);
+      }}
+      className={`relative inline-flex h-5 w-9 shrink-0 cursor-pointer items-center border-2 transition-colors ${on ? "bg-accent-brand border-accent-brand" : "bg-muted border-border"}`}
+    >
+      <span
+        className={`pointer-events-none inline-block h-3 w-3 bg-background shadow-sm transition-transform ${on ? "translate-x-4" : "translate-x-0.5"}`}
+      />
+    </button>
+  );
+}

src/ui/components/separator.tsx

@@ -1,7 +1,5 @@
-"use client";
-
 import * as React from "react";
-import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import { Separator as SeparatorPrimitive } from "radix-ui";
 
 import { cn } from "@/lib/utils";
 
@@ -17,7 +15,7 @@ function Separator({
       decorative={decorative}
       orientation={orientation}
       className={cn(
-        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        "shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
         className,
       )}
       {...props}

src/ui/components/shadcn-io/status/index.tsx

@@ -1,5 +1,5 @@
 import type { ComponentProps, HTMLAttributes } from "react";
-import { Badge } from "@/components/ui/badge";
+import { Badge } from "@/components/badge";
 import { cn } from "@/lib/utils";
 import { useTranslation } from "react-i18next";
 

src/ui/components/sheet.tsx

@@ -1,8 +1,9 @@
 import * as React from "react";
-import * as SheetPrimitive from "@radix-ui/react-dialog";
-import { XIcon } from "lucide-react";
+import { Dialog as SheetPrimitive } from "radix-ui";
 
 import { cn } from "@/lib/utils";
+import { Button } from "@/components/button";
+import { XIcon } from "lucide-react";
 
 function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
   return <SheetPrimitive.Root data-slot="sheet" {...props} />;
@@ -34,7 +35,7 @@ function SheetOverlay({
     <SheetPrimitive.Overlay
       data-slot="sheet-overlay"
       className={cn(
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-overlay data-[state=closed]:pointer-events-none",
+        "fixed inset-0 z-50 bg-black/10 text-xs/relaxed duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
         className,
       )}
       {...props}
@@ -46,34 +47,37 @@ function SheetContent({
   className,
   children,
   side = "right",
+  showCloseButton = true,
   ...props
 }: React.ComponentProps<typeof SheetPrimitive.Content> & {
   side?: "top" | "right" | "bottom" | "left";
+  showCloseButton?: boolean;
 }) {
   return (
     <SheetPortal>
       <SheetOverlay />
       <SheetPrimitive.Content
         data-slot="sheet-content"
+        data-side={side}
         className={cn(
-          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=closed]:pointer-events-none",
-          side === "right" &&
-            "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l",
-          side === "left" &&
-            "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r",
-          side === "top" &&
-            "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
-          side === "bottom" &&
-            "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
+          "fixed z-50 flex flex-col bg-popover bg-clip-padding text-xs/relaxed text-popover-foreground shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-[side=bottom]:data-open:slide-in-from-bottom-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:animate-out data-closed:fade-out-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=right]:data-closed:slide-out-to-right-10 data-[side=top]:data-closed:slide-out-to-top-10",
           className,
         )}
         {...props}
       >
         {children}
-        <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
-          <XIcon className="size-4" />
+        {showCloseButton && (
+          <SheetPrimitive.Close data-slot="sheet-close" asChild>
+            <Button
+              variant="ghost"
+              className="absolute top-3 right-3"
+              size="icon-sm"
+            >
+              <XIcon />
               <span className="sr-only">Close</span>
+            </Button>
           </SheetPrimitive.Close>
+        )}
       </SheetPrimitive.Content>
     </SheetPortal>
   );
@@ -83,7 +87,7 @@ function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="sheet-header"
-      className={cn("flex flex-col gap-1.5 p-4", className)}
+      className={cn("flex flex-col gap-0.5 p-4", className)}
       {...props}
     />
   );
@@ -106,7 +110,10 @@ function SheetTitle({
   return (
     <SheetPrimitive.Title
       data-slot="sheet-title"
-      className={cn("text-foreground font-semibold", className)}
+      className={cn(
+        "font-heading text-sm font-medium text-foreground",
+        className,
+      )}
       {...props}
     />
   );
@@ -119,7 +126,7 @@ function SheetDescription({
   return (
     <SheetPrimitive.Description
       data-slot="sheet-description"
-      className={cn("text-muted-foreground text-sm", className)}
+      className={cn("text-xs/relaxed text-muted-foreground", className)}
       {...props}
     />
   );

src/ui/components/sidebar.tsx

@@ -1,25 +1,29 @@
-/* eslint-disable react-refresh/only-export-components */
+"use client";
+
 import * as React from "react";
-import { Slot } from "@radix-ui/react-slot";
 import { cva, type VariantProps } from "class-variance-authority";
-import { PanelLeftIcon } from "lucide-react";
+import { Slot } from "radix-ui";
 
 import { useIsMobile } from "@/hooks/use-mobile";
 import { cn } from "@/lib/utils";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Separator } from "@/components/ui/separator";
-import { Skeleton } from "@/components/ui/skeleton";
+import { Button } from "@/components/button";
+import { Input } from "@/components/input";
+import { Separator } from "@/components/separator";
 import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from "@/components/sheet";
+import { Skeleton } from "@/components/skeleton";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/tooltip";
+import { PanelLeftIcon } from "lucide-react";
 
 const SIDEBAR_COOKIE_NAME = "sidebar_state";
 const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
 const SIDEBAR_WIDTH = "16rem";
+const SIDEBAR_WIDTH_MOBILE = "18rem";
 const SIDEBAR_WIDTH_ICON = "3rem";
 const SIDEBAR_KEYBOARD_SHORTCUT = "b";
 
@@ -119,7 +123,6 @@ function SidebarProvider({
 
   return (
     <SidebarContext.Provider value={contextValue}>
-      <TooltipProvider delayDuration={0}>
       <div
         data-slot="sidebar-wrapper"
         style={
@@ -130,14 +133,13 @@ function SidebarProvider({
           } as React.CSSProperties
         }
         className={cn(
-            "group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full",
+          "group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar",
           className,
         )}
         {...props}
       >
         {children}
       </div>
-      </TooltipProvider>
     </SidebarContext.Provider>
   );
 }
@@ -148,20 +150,21 @@ function Sidebar({
   collapsible = "offcanvas",
   className,
   children,
+  dir,
   ...props
 }: React.ComponentProps<"div"> & {
   side?: "left" | "right";
   variant?: "sidebar" | "floating" | "inset";
   collapsible?: "offcanvas" | "icon" | "none";
 }) {
-  const { state } = useSidebar();
+  const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
 
   if (collapsible === "none") {
     return (
       <div
         data-slot="sidebar"
         className={cn(
-          "bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col",
+          "flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground",
           className,
         )}
         {...props}
@@ -171,41 +174,42 @@ function Sidebar({
     );
   }
 
-  // Commented out mobile behavior to keep sidebar always visible
-  // if (isMobile) {
-  //   return (
-  //     <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
-  //       <SheetContent
-  //         data-sidebar="sidebar"
-  //         data-slot="sidebar"
-  //         data-mobile="true"
-  //         className="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
-  //         style={
-  //           {
-  //             "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
-  //           } as React.CSSProperties
-  //         }
-  //         side={side}
-  //       >
-  //         <SheetHeader className="sr-only">
-  //           <SheetTitle>Sidebar</SheetTitle>
-  //           <SheetDescription>Displays the mobile sidebar.</SheetDescription>
-  //         </SheetHeader>
-  //         <div className="flex h-full w-full flex-col">{children}</div>
-  //       </SheetContent>
-  //     </Sheet>
-  //   )
-  // }
+  if (isMobile) {
+    return (
+      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
+        <SheetContent
+          dir={dir}
+          data-sidebar="sidebar"
+          data-slot="sidebar"
+          data-mobile="true"
+          className="w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
+          style={
+            {
+              "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
+            } as React.CSSProperties
+          }
+          side={side}
+        >
+          <SheetHeader className="sr-only">
+            <SheetTitle>Sidebar</SheetTitle>
+            <SheetDescription>Displays the mobile sidebar.</SheetDescription>
+          </SheetHeader>
+          <div className="flex h-full w-full flex-col">{children}</div>
+        </SheetContent>
+      </Sheet>
+    );
+  }
 
   return (
     <div
-      className="group peer text-sidebar-foreground block"
+      className="group peer hidden text-sidebar-foreground md:block"
       data-state={state}
       data-collapsible={state === "collapsed" ? collapsible : ""}
       data-variant={variant}
       data-side={side}
       data-slot="sidebar"
     >
+      {/* This is what handles the sidebar gap on desktop */}
       <div
         data-slot="sidebar-gap"
         className={cn(
@@ -219,11 +223,9 @@ function Sidebar({
       />
       <div
         data-slot="sidebar-container"
+        data-side={side}
         className={cn(
-          "fixed inset-y-0 z-10 flex h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear",
-          side === "left"
-            ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
-            : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
+          "fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex",
           // Adjust the padding for floating and inset variants.
           variant === "floating" || variant === "inset"
             ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
@@ -235,7 +237,7 @@ function Sidebar({
         <div
           data-sidebar="sidebar"
           data-slot="sidebar-inner"
-          className="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border-2 group-data-[variant=floating]:shadow-sm"
+          className="flex size-full flex-col bg-sidebar group-data-[variant=floating]:rounded-none group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 group-data-[variant=floating]:ring-sidebar-border"
         >
           {children}
         </div>
@@ -256,8 +258,8 @@ function SidebarTrigger({
       data-sidebar="trigger"
       data-slot="sidebar-trigger"
       variant="ghost"
-      size="icon"
-      className={cn("size-7", className)}
+      size="icon-sm"
+      className={cn(className)}
       onClick={(event) => {
         onClick?.(event);
         toggleSidebar();
@@ -282,10 +284,10 @@ function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
       onClick={toggleSidebar}
       title="Toggle Sidebar"
       className={cn(
-        "hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex",
+        "absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] hover:after:bg-sidebar-border sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2",
         "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
         "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
-        "hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full",
+        "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-sidebar",
         "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
         "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
         className,
@@ -300,8 +302,7 @@ function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
     <main
       data-slot="sidebar-inset"
       className={cn(
-        "bg-background relative flex w-full flex-1 flex-col",
-        "md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
+        "relative flex w-full flex-1 flex-col bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-none md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
         className,
       )}
       {...props}
@@ -317,7 +318,7 @@ function SidebarInput({
     <Input
       data-slot="sidebar-input"
       data-sidebar="input"
-      className={cn("bg-background h-8 w-full shadow-none", className)}
+      className={cn("h-8 w-full bg-background shadow-none", className)}
       {...props}
     />
   );
@@ -353,7 +354,7 @@ function SidebarSeparator({
     <Separator
       data-slot="sidebar-separator"
       data-sidebar="separator"
-      className={cn("bg-sidebar-border mx-2 w-auto", className)}
+      className={cn("mx-2 w-auto bg-sidebar-border", className)}
       {...props}
     />
   );
@@ -365,7 +366,7 @@ function SidebarContent({ className, ...props }: React.ComponentProps<"div">) {
       data-slot="sidebar-content"
       data-sidebar="content"
       className={cn(
-        "flex min-h-0 flex-1 flex-col gap-2 overflow-auto thin-scrollbar group-data-[collapsible=icon]:overflow-hidden",
+        "no-scrollbar flex min-h-0 flex-1 flex-col gap-0 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
         className,
       )}
       {...props}
@@ -389,15 +390,14 @@ function SidebarGroupLabel({
   asChild = false,
   ...props
 }: React.ComponentProps<"div"> & { asChild?: boolean }) {
-  const Comp = asChild ? Slot : "div";
+  const Comp = asChild ? Slot.Root : "div";
 
   return (
     <Comp
       data-slot="sidebar-group-label"
       data-sidebar="group-label"
       className={cn(
-        "text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
-        "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
+        "flex h-8 shrink-0 items-center rounded-none px-2 text-xs text-sidebar-foreground/70 ring-sidebar-ring outline-hidden transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
         className,
       )}
       {...props}
@@ -410,17 +410,14 @@ function SidebarGroupAction({
   asChild = false,
   ...props
 }: React.ComponentProps<"button"> & { asChild?: boolean }) {
-  const Comp = asChild ? Slot : "button";
+  const Comp = asChild ? Slot.Root : "button";
 
   return (
     <Comp
       data-slot="sidebar-group-action"
       data-sidebar="group-action"
       className={cn(
-        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
-        // Increases the hit area of the button on mobile.
-        "after:absolute after:-inset-2 md:after:hidden",
-        "group-data-[collapsible=icon]:hidden",
+        "absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-none p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0",
         className,
       )}
       {...props}
@@ -436,7 +433,7 @@ function SidebarGroupContent({
     <div
       data-slot="sidebar-group-content"
       data-sidebar="group-content"
-      className={cn("w-full text-sm", className)}
+      className={cn("w-full text-xs", className)}
       {...props}
     />
   );
@@ -447,7 +444,7 @@ function SidebarMenu({ className, ...props }: React.ComponentProps<"ul">) {
     <ul
       data-slot="sidebar-menu"
       data-sidebar="menu"
-      className={cn("flex w-full min-w-0 flex-col gap-1", className)}
+      className={cn("flex w-full min-w-0 flex-col gap-0", className)}
       {...props}
     />
   );
@@ -465,7 +462,7 @@ function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {
 }
 
 const sidebarMenuButtonVariants = cva(
-  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+  "peer/menu-button group/menu-button flex w-full items-center gap-2 overflow-hidden rounded-none p-2 text-left text-xs ring-sidebar-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:font-medium data-active:text-sidebar-accent-foreground [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate",
   {
     variants: {
       variant: {
@@ -474,9 +471,9 @@ const sidebarMenuButtonVariants = cva(
           "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
       },
       size: {
-        default: "h-8 text-sm",
+        default: "h-8 text-xs",
         sm: "h-7 text-xs",
-        lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!",
+        lg: "h-12 text-xs group-data-[collapsible=icon]:p-0!",
       },
     },
     defaultVariants: {
@@ -499,7 +496,7 @@ function SidebarMenuButton({
   isActive?: boolean;
   tooltip?: string | React.ComponentProps<typeof TooltipContent>;
 } & VariantProps<typeof sidebarMenuButtonVariants>) {
-  const Comp = asChild ? Slot : "button";
+  const Comp = asChild ? Slot.Root : "button";
   const { isMobile, state } = useSidebar();
 
   const button = (
@@ -545,22 +542,16 @@ function SidebarMenuAction({
   asChild?: boolean;
   showOnHover?: boolean;
 }) {
-  const Comp = asChild ? Slot : "button";
+  const Comp = asChild ? Slot.Root : "button";
 
   return (
     <Comp
       data-slot="sidebar-menu-action"
       data-sidebar="menu-action"
       className={cn(
-        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
-        // Increases the hit area of the button on mobile.
-        "after:absolute after:-inset-2 md:after:hidden",
-        "peer-data-[size=sm]/menu-button:top-1",
-        "peer-data-[size=default]/menu-button:top-1.5",
-        "peer-data-[size=lg]/menu-button:top-2.5",
-        "group-data-[collapsible=icon]:hidden",
+        "absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-none p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0",
         showOnHover &&
-          "peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0",
+          "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-active/menu-button:text-sidebar-accent-foreground aria-expanded:opacity-100 md:opacity-0",
         className,
       )}
       {...props}
@@ -577,12 +568,7 @@ function SidebarMenuBadge({
       data-slot="sidebar-menu-badge"
       data-sidebar="menu-badge"
       className={cn(
-        "text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none",
-        "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
-        "peer-data-[size=sm]/menu-button:top-1",
-        "peer-data-[size=default]/menu-button:top-1.5",
-        "peer-data-[size=lg]/menu-button:top-2.5",
-        "group-data-[collapsible=icon]:hidden",
+        "pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-none px-1 text-xs font-medium text-sidebar-foreground tabular-nums select-none group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 peer-data-active/menu-button:text-sidebar-accent-foreground",
         className,
       )}
       {...props}
@@ -606,12 +592,12 @@ function SidebarMenuSkeleton({
     <div
       data-slot="sidebar-menu-skeleton"
       data-sidebar="menu-skeleton"
-      className={cn("flex h-8 items-center gap-2 rounded-md px-2", className)}
+      className={cn("flex h-8 items-center gap-2 rounded-none px-2", className)}
       {...props}
     >
       {showIcon && (
         <Skeleton
-          className="size-4 rounded-md"
+          className="size-4 rounded-none"
           data-sidebar="menu-skeleton-icon"
         />
       )}
@@ -634,8 +620,7 @@ function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">) {
       data-slot="sidebar-menu-sub"
       data-sidebar="menu-sub"
       className={cn(
-        "border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5",
-        "group-data-[collapsible=icon]:hidden",
+        "mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5 group-data-[collapsible=icon]:hidden",
         className,
       )}
       {...props}
@@ -668,7 +653,7 @@ function SidebarMenuSubButton({
   size?: "sm" | "md";
   isActive?: boolean;
 }) {
-  const Comp = asChild ? Slot : "a";
+  const Comp = asChild ? Slot.Root : "a";
 
   return (
     <Comp
@@ -677,11 +662,7 @@ function SidebarMenuSubButton({
       data-size={size}
       data-active={isActive}
       className={cn(
-        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
-        "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
-        size === "sm" && "text-xs",
-        size === "md" && "text-sm",
-        "group-data-[collapsible=icon]:hidden",
+        "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-none px-2 text-sidebar-foreground ring-sidebar-ring outline-hidden group-data-[collapsible=icon]:hidden hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[size=md]:text-xs data-[size=sm]:text-xs data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
         className,
       )}
       {...props}

src/ui/components/skeleton.tsx

@@ -4,7 +4,7 @@ function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="skeleton"
-      className={cn("bg-accent animate-pulse rounded-md", className)}
+      className={cn("animate-pulse rounded-none bg-muted", className)}
       {...props}
     />
   );

src/ui/components/sonner.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import { useTheme } from "@/components/theme-provider";
+import { Toaster as Sonner } from "sonner";
+
+type ToasterProps = React.ComponentProps<typeof Sonner>;
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme();
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      toastOptions={{
+        classNames: {
+          toast:
+            "group toast group-[.toaster]:bg-card group-[.toaster]:text-card-foreground group-[.toaster]:border-border group-[.toaster]:rounded-none! group-[.toaster]:shadow-lg group-[.toaster]:font-mono",
+          description: "group-[.toast]:text-muted-foreground",
+          actionButton:
+            "group-[.toast]:bg-accent-brand group-[.toast]:text-white group-[.toast]:font-semibold",
+          cancelButton:
+            "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
+          success:
+            "group-[.toast]:!text-accent-brand group-[.toast]:!border-accent-brand/30",
+          info: "group-[.toast]:!text-accent-brand group-[.toast]:!border-accent-brand/30",
+          error:
+            "group-[.toast]:!text-destructive group-[.toast]:!border-destructive/30",
+        },
+      }}
+      style={
+        {
+          "--radius": "0px",
+          "--normal-bg": "var(--card)",
+          "--normal-border": "var(--border)",
+          "--normal-text": "var(--card-foreground)",
+          "--success-bg": "var(--card)",
+          "--success-border": "var(--border)",
+          "--success-text": "var(--color-accent-brand)",
+          "--info-bg": "var(--card)",
+          "--info-border": "var(--border)",
+          "--info-text": "var(--color-accent-brand)",
+          "--error-bg": "var(--card)",
+          "--error-border": "var(--border)",
+          "--error-text": "var(--destructive)",
+        } as React.CSSProperties
+      }
+      {...props}
+    />
+  );
+};
+
+export { Toaster };