feat: Settings UI and profile management system

- Add comprehensive Settings UI with macOS-style design
- Implement settings modal and dialog system
- Add hotkey management infrastructure
- Include user authentication hooks (Privy integration)
- Add online status monitoring
- Implement dialog manager for native settings window
- Add user profile store hooks for settings integration

This is the settings UI layer (3/6) from PR #45.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <[email protected]>

Author: mac

apps/electron-app/src/main/browser/dialog-manager.ts

@@ -0,0 +1,180 @@
+import { globalShortcut } from "electron";
+import { createLogger } from "@vibe/shared-types";
+import { useUserProfileStore } from "@/store/user-profile-store";
+
+const logger = createLogger("hotkey-manager");
+
+// Default hotkey for password paste
+const DEFAULT_PASSWORD_PASTE_HOTKEY = "CommandOrControl+Shift+P";
+
+// Currently registered hotkeys
+const registeredHotkeys = new Map<string, string>();
+
+/**
+ * Register a global hotkey
+ */
+export function registerHotkey(hotkey: string, action: () => void): boolean {
+  try {
+    // Unregister existing hotkey if it exists
+    if (registeredHotkeys.has(hotkey)) {
+      globalShortcut.unregister(hotkey);
+      registeredHotkeys.delete(hotkey);
+    }
+
+    // Register new hotkey
+    const success = globalShortcut.register(hotkey, action);
+    if (success) {
+      registeredHotkeys.set(hotkey, action.name);
+      logger.info(`Registered hotkey: ${hotkey}`);
+    } else {
+      logger.error(`Failed to register hotkey: ${hotkey}`);
+    }
+    return success;
+  } catch (error) {
+    logger.error(`Error registering hotkey ${hotkey}:`, error);
+    return false;
+  }
+}
+
+/**
+ * Unregister a global hotkey
+ */
+export function unregisterHotkey(hotkey: string): boolean {
+  try {
+    globalShortcut.unregister(hotkey);
+    registeredHotkeys.delete(hotkey);
+    logger.info(`Unregistered hotkey: ${hotkey}`);
+    return true;
+  } catch (error) {
+    logger.error(`Error unregistering hotkey ${hotkey}:`, error);
+    return false;
+  }
+}
+
+/**
+ * Get the current password paste hotkey from settings
+ */
+export function getPasswordPasteHotkey(): string {
+  try {
+    const userProfileStore = useUserProfileStore.getState();
+    const activeProfile = userProfileStore.getActiveProfile();
+    return (
+      activeProfile?.settings?.hotkeys?.passwordPaste ||
+      DEFAULT_PASSWORD_PASTE_HOTKEY
+    );
+  } catch (error) {
+    logger.error("Failed to get password paste hotkey from settings:", error);
+    return DEFAULT_PASSWORD_PASTE_HOTKEY;
+  }
+}
+
+/**
+ * Set the password paste hotkey in settings
+ */
+export function setPasswordPasteHotkey(hotkey: string): boolean {
+  try {
+    const userProfileStore = useUserProfileStore.getState();
+    const activeProfile = userProfileStore.getActiveProfile();
+
+    if (!activeProfile) {
+      logger.error("No active profile found");
+      return false;
+    }
+
+    // Update profile settings
+    const updatedSettings = {
+      ...activeProfile.settings,
+      hotkeys: {
+        ...activeProfile.settings?.hotkeys,
+        passwordPaste: hotkey,
+      },
+    };
+
+    userProfileStore.updateProfile(activeProfile.id, {
+      settings: updatedSettings,
+    });
+
+    logger.info(`Password paste hotkey updated to: ${hotkey}`);
+    return true;
+  } catch (error) {
+    logger.error("Failed to set password paste hotkey:", error);
+    return false;
+  }
+}
+
+/**
+ * Initialize password paste hotkey
+ */
+export function initializePasswordPasteHotkey(): boolean {
+  try {
+    const hotkey = getPasswordPasteHotkey();
+
+    const action = async () => {
+      try {
+        // Import the password paste function directly
+        const { pastePasswordForActiveTab } = await import(
+          "./password-paste-handler"
+        );
+        const result = await pastePasswordForActiveTab();
+        if (result.success) {
+          logger.info("Password pasted successfully via hotkey");
+        } else {
+          logger.warn("Failed to paste password via hotkey:", result.error);
+        }
+      } catch (error) {
+        logger.error("Error in password paste hotkey action:", error);
+      }
+    };
+
+    return registerHotkey(hotkey, action);
+  } catch (error) {
+    logger.error("Failed to initialize password paste hotkey:", error);
+    return false;
+  }
+}
+
+/**
+ * Update password paste hotkey
+ */
+export function updatePasswordPasteHotkey(newHotkey: string): boolean {
+  try {
+    const oldHotkey = getPasswordPasteHotkey();
+
+    // Unregister old hotkey
+    unregisterHotkey(oldHotkey);
+
+    // Set new hotkey in settings
+    const success = setPasswordPasteHotkey(newHotkey);
+    if (!success) {
+      return false;
+    }
+
+    // Register new hotkey
+    return initializePasswordPasteHotkey();
+  } catch (error) {
+    logger.error("Failed to update password paste hotkey:", error);
+    return false;
+  }
+}
+
+/**
+ * Get all registered hotkeys
+ */
+export function getRegisteredHotkeys(): Map<string, string> {
+  return new Map(registeredHotkeys);
+}
+
+/**
+ * Cleanup all registered hotkeys
+ */
+export function cleanupHotkeys(): void {
+  try {
+    registeredHotkeys.forEach((_actionName, hotkey) => {
+      globalShortcut.unregister(hotkey);
+      logger.info(`Cleaned up hotkey: ${hotkey}`);
+    });
+    registeredHotkeys.clear();
+  } catch (error) {
+    logger.error("Error cleaning up hotkeys:", error);
+  }
+}

apps/electron-app/src/main/browser/templates/settings-dialog.html

@@ -0,0 +1,43 @@
+import { ipcMain } from "electron";
+import { createLogger } from "@vibe/shared-types";
+import {
+  getPasswordPasteHotkey,
+  updatePasswordPasteHotkey,
+  getRegisteredHotkeys,
+} from "@/hotkey-manager";
+
+const logger = createLogger("hotkey-control");
+
+/**
+ * Hotkey management IPC handlers
+ */
+
+ipcMain.handle("hotkeys:get-password-paste", async () => {
+  try {
+    const hotkey = getPasswordPasteHotkey();
+    return { success: true, hotkey };
+  } catch (error) {
+    logger.error("Failed to get password paste hotkey:", error);
+    return { success: false, error: "Failed to get hotkey" };
+  }
+});
+
+ipcMain.handle("hotkeys:set-password-paste", async (_event, hotkey: string) => {
+  try {
+    const success = updatePasswordPasteHotkey(hotkey);
+    return { success };
+  } catch (error) {
+    logger.error("Failed to set password paste hotkey:", error);
+    return { success: false, error: "Failed to set hotkey" };
+  }
+});
+
+ipcMain.handle("hotkeys:get-registered", async () => {
+  try {
+    const hotkeys = getRegisteredHotkeys();
+    return { success: true, hotkeys: Object.fromEntries(hotkeys) };
+  } catch (error) {
+    logger.error("Failed to get registered hotkeys:", error);
+    return { success: false, error: "Failed to get hotkeys" };
+  }
+});

apps/electron-app/src/main/hotkey-manager.ts

@@ -0,0 +1,30 @@
+/**
+ * Modal IPC handlers
+ * Handles modal-related IPC events that are not handled by DialogManager
+ */
+
+import { ipcMain } from "electron";
+import { createLogger } from "@vibe/shared-types";
+
+const logger = createLogger("ipc-modals");
+
+// Note: dialog:show-settings is handled by DialogManager directly
+// We only handle the modal closed events here
+
+// Handle settings modal closed event
+ipcMain.on("app:settings-modal-closed", () => {
+  logger.debug("Settings modal closed");
+
+  // Optional: You could add any cleanup logic here
+  // For now, just acknowledge the event
+});
+
+// Handle downloads modal closed event
+ipcMain.on("app:downloads-modal-closed", () => {
+  logger.debug("Downloads modal closed");
+
+  // Optional: You could add any cleanup logic here
+  // For now, just acknowledge the event
+});
+
+logger.info("Modal IPC handlers registered");

apps/electron-app/src/main/ipc/app/hotkey-control.ts

@@ -0,0 +1,25 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Settings</title>
+    <!-- Security headers - relaxed for development -->
+    <meta
+      http-equiv="Content-Security-Policy"
+      content="default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; connect-src 'self' ws: wss: http: https:; font-src 'self' data:; object-src 'none'; frame-src 'none'; base-uri 'self'; form-action 'self'; frame-ancestors 'none'"
+    />
+    <meta http-equiv="X-Content-Type-Options" content="nosniff" />
+    <meta http-equiv="X-XSS-Protection" content="1; mode=block" />
+    <meta
+      http-equiv="Referrer-Policy"
+      content="strict-origin-when-cross-origin"
+    />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Application Settings" />
+  </head>
+
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/settings-entry.tsx"></script>
+  </body>
+</html>