@lobehub/lobehub 2.0.0-next.241 → 2.0.0-next.243

package/apps/desktop/src/main/core/browser/WindowStateManager.ts

@@ -0,0 +1,180 @@
+import Electron, { BrowserWindow, screen } from 'electron';
+
+import { createLogger } from '@/utils/logger';
+
+import type { App } from '../App';
+
+const logger = createLogger('core:WindowStateManager');
+
+export interface WindowState {
+  height?: number;
+  width?: number;
+  x?: number;
+  y?: number;
+}
+
+export interface WindowStateManagerOptions {
+  identifier: string;
+  keepAlive?: boolean;
+}
+
+/**
+ * Manages window state persistence and close behavior
+ */
+export class WindowStateManager {
+  private readonly app: App;
+  private readonly identifier: string;
+  private readonly stateKey: string;
+  private readonly keepAlive: boolean;
+
+  constructor(app: App, options: WindowStateManagerOptions) {
+    this.app = app;
+    this.identifier = options.identifier;
+    this.stateKey = `windowSize_${options.identifier}`;
+    this.keepAlive = options.keepAlive ?? false;
+  }
+
+  // ==================== State Persistence ====================
+
+  /**
+   * Load saved window state from persistent storage
+   */
+  loadState(): WindowState | undefined {
+    return this.app.storeManager.get(this.stateKey as any) as WindowState | undefined;
+  }
+
+  /**
+   * Save current window bounds to persistent storage
+   */
+  saveState(browserWindow: BrowserWindow, context: 'quit' | 'close' | 'hide' = 'close'): void {
+    try {
+      const bounds = browserWindow.getBounds();
+      const state: WindowState = {
+        height: bounds.height,
+        width: bounds.width,
+        x: bounds.x,
+        y: bounds.y,
+      };
+      logger.debug(
+        `[${this.identifier}] Saving window state on ${context}: ${JSON.stringify(state)}`,
+      );
+      this.app.storeManager.set(this.stateKey as any, state);
+    } catch (error) {
+      logger.error(`[${this.identifier}] Failed to save window state on ${context}:`, error);
+    }
+  }
+
+  // ==================== State Resolution ====================
+
+  /**
+   * Resolve window state by merging saved state with fallback,
+   * ensuring position is within visible screen bounds
+   */
+  resolveState(fallback: { height?: number; width?: number }): WindowState {
+    const savedState = this.loadState();
+    return this.resolveWindowState(savedState, fallback);
+  }
+
+  private resolveWindowState(
+    savedState: WindowState | undefined,
+    fallbackState: { height?: number; width?: number },
+  ): WindowState {
+    const width = savedState?.width ?? fallbackState.width;
+    const height = savedState?.height ?? fallbackState.height;
+    const resolvedState: WindowState = { height, width };
+
+    const hasPosition = Number.isFinite(savedState?.x) && Number.isFinite(savedState?.y);
+    if (!hasPosition) return resolvedState;
+
+    const x = savedState?.x as number;
+    const y = savedState?.y as number;
+
+    const targetDisplay = screen.getDisplayMatching({
+      height: height ?? 0,
+      width: width ?? 0,
+      x,
+      y,
+    });
+
+    const workArea = targetDisplay?.workArea ?? screen.getPrimaryDisplay().workArea;
+    const resolvedWidth = typeof width === 'number' ? Math.min(width, workArea.width) : width;
+    const resolvedHeight = typeof height === 'number' ? Math.min(height, workArea.height) : height;
+
+    const maxX = workArea.x + Math.max(0, workArea.width - (resolvedWidth ?? 0));
+    const maxY = workArea.y + Math.max(0, workArea.height - (resolvedHeight ?? 0));
+
+    return {
+      height: resolvedHeight,
+      width: resolvedWidth,
+      x: this.clampNumber(x, workArea.x, maxX),
+      y: this.clampNumber(y, workArea.y, maxY),
+    };
+  }
+
+  private clampNumber(value: number, min: number, max: number): number {
+    return Math.min(Math.max(value, min), max);
+  }
+
+  // ==================== Close Event Handling ====================
+
+  /**
+   * Create a close event handler for the browser window
+   * Returns a handler function and a cleanup function
+   */
+  createCloseHandler(
+    browserWindow: BrowserWindow,
+    callbacks: {
+      onCleanup: () => void;
+      onHide: () => void;
+    },
+  ): (e: Electron.Event) => void {
+    return (e: Electron.Event) => {
+      logger.debug(`Window 'close' event triggered for: ${this.identifier}`);
+      logger.debug(
+        `[${this.identifier}] State during close event: isQuiting=${this.app.isQuiting}, keepAlive=${this.keepAlive}`,
+      );
+
+      if (this.app.isQuiting) {
+        this.handleCloseOnQuit(browserWindow, callbacks.onCleanup);
+        return;
+      }
+
+      if (this.keepAlive) {
+        this.handleCloseWithKeepAlive(e, callbacks.onHide);
+      } else {
+        this.handleCloseNormally(browserWindow, callbacks.onCleanup);
+      }
+    };
+  }
+
+  /**
+   * Handle close when application is quitting - save state and cleanup
+   */
+  private handleCloseOnQuit(browserWindow: BrowserWindow, onCleanup: () => void): void {
+    logger.debug(`[${this.identifier}] App is quitting, allowing window to close naturally.`);
+    this.saveState(browserWindow, 'quit');
+    onCleanup();
+  }
+
+  /**
+   * Handle close when keepAlive is enabled - prevent close and hide instead
+   */
+  private handleCloseWithKeepAlive(e: Electron.Event, onHide: () => void): void {
+    logger.debug(
+      `[${this.identifier}] keepAlive is true, preventing default close and hiding window.`,
+    );
+    e.preventDefault();
+    onHide();
+  }
+
+  /**
+   * Handle normal close - save state, cleanup, and allow window to close
+   */
+  private handleCloseNormally(browserWindow: BrowserWindow, onCleanup: () => void): void {
+    logger.debug(
+      `[${this.identifier}] keepAlive is false, allowing window to close. Saving state...`,
+    );
+    this.saveState(browserWindow, 'close');
+    onCleanup();
+  }
+}

package/apps/desktop/src/main/core/browser/WindowThemeManager.ts

@@ -0,0 +1,167 @@
+import { BrowserWindow, nativeTheme } from 'electron';
+import { join } from 'node:path';
+
+import { buildDir } from '@/const/dir';
+import { isDev, isWindows } from '@/const/env';
+import {
+  BACKGROUND_DARK,
+  BACKGROUND_LIGHT,
+  SYMBOL_COLOR_DARK,
+  SYMBOL_COLOR_LIGHT,
+  THEME_CHANGE_DELAY,
+  TITLE_BAR_HEIGHT,
+} from '@/const/theme';
+import { createLogger } from '@/utils/logger';
+
+const logger = createLogger('core:WindowThemeManager');
+
+interface WindowsThemeConfig {
+  backgroundColor: string;
+  icon?: string;
+  titleBarOverlay: {
+    color: string;
+    height: number;
+    symbolColor: string;
+  };
+  titleBarStyle: 'hidden';
+}
+
+/**
+ * Manages window theme configuration and visual effects
+ */
+export class WindowThemeManager {
+  private readonly identifier: string;
+  private browserWindow?: BrowserWindow;
+  private listenerSetup = false;
+  private boundHandleThemeChange: () => void;
+
+  constructor(identifier: string) {
+    this.identifier = identifier;
+    this.boundHandleThemeChange = this.handleThemeChange.bind(this);
+  }
+
+  // ==================== Lifecycle ====================
+
+  /**
+   * Attach to a browser window and setup theme handling
+   */
+  attach(browserWindow: BrowserWindow): void {
+    this.browserWindow = browserWindow;
+    this.setupThemeListener();
+    this.applyVisualEffects();
+  }
+
+  /**
+   * Cleanup theme listener when window is destroyed
+   */
+  cleanup(): void {
+    if (this.listenerSetup) {
+      nativeTheme.off('updated', this.boundHandleThemeChange);
+      this.listenerSetup = false;
+      logger.debug(`[${this.identifier}] Theme listener cleaned up.`);
+    }
+    this.browserWindow = undefined;
+  }
+
+  // ==================== Theme Configuration ====================
+
+  /**
+   * Get current dark mode state
+   */
+  get isDarkMode(): boolean {
+    return nativeTheme.shouldUseDarkColors;
+  }
+
+  /**
+   * Get platform-specific theme configuration for window creation
+   */
+  getPlatformConfig(): Partial<WindowsThemeConfig> {
+    if (isWindows) {
+      return this.getWindowsConfig(this.isDarkMode);
+    }
+    return {};
+  }
+
+  /**
+   * Get Windows-specific theme configuration
+   */
+  private getWindowsConfig(isDarkMode: boolean): WindowsThemeConfig {
+    return {
+      backgroundColor: isDarkMode ? BACKGROUND_DARK : BACKGROUND_LIGHT,
+      icon: isDev ? join(buildDir, 'icon-dev.ico') : undefined,
+      titleBarOverlay: {
+        color: isDarkMode ? BACKGROUND_DARK : BACKGROUND_LIGHT,
+        height: TITLE_BAR_HEIGHT,
+        symbolColor: isDarkMode ? SYMBOL_COLOR_DARK : SYMBOL_COLOR_LIGHT,
+      },
+      titleBarStyle: 'hidden',
+    };
+  }
+
+  // ==================== Theme Listener ====================
+
+  private setupThemeListener(): void {
+    if (this.listenerSetup) return;
+
+    nativeTheme.on('updated', this.boundHandleThemeChange);
+    this.listenerSetup = true;
+    logger.debug(`[${this.identifier}] Theme listener setup.`);
+  }
+
+  private handleThemeChange(): void {
+    logger.debug(`[${this.identifier}] System theme changed, reapplying visual effects.`);
+    setTimeout(() => {
+      this.applyVisualEffects();
+    }, THEME_CHANGE_DELAY);
+  }
+
+  /**
+   * Handle application theme mode change (called from BrowserManager)
+   */
+  handleAppThemeChange(): void {
+    logger.debug(`[${this.identifier}] App theme mode changed, reapplying visual effects.`);
+    setTimeout(() => {
+      this.applyVisualEffects();
+    }, THEME_CHANGE_DELAY);
+  }
+
+  // ==================== Visual Effects ====================
+
+  /**
+   * Apply visual effects based on current theme
+   */
+  applyVisualEffects(): void {
+    if (!this.browserWindow || this.browserWindow.isDestroyed()) return;
+
+    logger.debug(`[${this.identifier}] Applying visual effects for platform`);
+    const isDarkMode = this.isDarkMode;
+
+    try {
+      if (isWindows) {
+        this.applyWindowsVisualEffects(isDarkMode);
+      }
+
+      logger.debug(
+        `[${this.identifier}] Visual effects applied successfully (dark mode: ${isDarkMode})`,
+      );
+    } catch (error) {
+      logger.error(`[${this.identifier}] Failed to apply visual effects:`, error);
+    }
+  }
+
+  /**
+   * Manually reapply visual effects
+   */
+  reapplyVisualEffects(): void {
+    logger.debug(`[${this.identifier}] Manually reapplying visual effects.`);
+    this.applyVisualEffects();
+  }
+
+  private applyWindowsVisualEffects(isDarkMode: boolean): void {
+    if (!this.browserWindow) return;
+
+    const config = this.getWindowsConfig(isDarkMode);
+    this.browserWindow.setBackgroundColor(config.backgroundColor);
+    this.browserWindow.setTitleBarOverlay(config.titleBarOverlay);
+  }
+}

package/apps/desktop/src/main/core/browser/__tests__/WindowStateManager.test.ts

@@ -0,0 +1,237 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import type { App as AppCore } from '../../App';
+import { WindowStateManager } from '../WindowStateManager';
+
+// Use vi.hoisted to define mocks before hoisting
+const { mockScreen } = vi.hoisted(() => ({
+  mockScreen: {
+    getDisplayMatching: vi.fn().mockReturnValue({
+      workArea: { height: 1080, width: 1920, x: 0, y: 0 },
+    }),
+    getPrimaryDisplay: vi.fn().mockReturnValue({
+      workArea: { height: 1080, width: 1920, x: 0, y: 0 },
+    }),
+  },
+}));
+
+vi.mock('electron', () => ({
+  screen: mockScreen,
+}));
+
+vi.mock('@/utils/logger', () => ({
+  createLogger: () => ({
+    debug: vi.fn(),
+    error: vi.fn(),
+    info: vi.fn(),
+    warn: vi.fn(),
+  }),
+}));
+
+describe('WindowStateManager', () => {
+  let manager: WindowStateManager;
+  let mockApp: AppCore;
+  let mockStoreManagerGet: ReturnType<typeof vi.fn>;
+  let mockStoreManagerSet: ReturnType<typeof vi.fn>;
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+
+    mockStoreManagerGet = vi.fn().mockReturnValue(undefined);
+    mockStoreManagerSet = vi.fn();
+
+    mockApp = {
+      isQuiting: false,
+      storeManager: {
+        get: mockStoreManagerGet,
+        set: mockStoreManagerSet,
+      },
+    } as unknown as AppCore;
+
+    manager = new WindowStateManager(mockApp, {
+      identifier: 'test-window',
+      keepAlive: false,
+    });
+  });
+
+  describe('loadState', () => {
+    it('should load state from store', () => {
+      const savedState = { height: 700, width: 900, x: 100, y: 100 };
+      mockStoreManagerGet.mockReturnValue(savedState);
+
+      const state = manager.loadState();
+
+      expect(mockStoreManagerGet).toHaveBeenCalledWith('windowSize_test-window');
+      expect(state).toEqual(savedState);
+    });
+
+    it('should return undefined when no saved state', () => {
+      mockStoreManagerGet.mockReturnValue(undefined);
+
+      const state = manager.loadState();
+
+      expect(state).toBeUndefined();
+    });
+  });
+
+  describe('saveState', () => {
+    it('should save window bounds to store', () => {
+      const mockBrowserWindow = {
+        getBounds: vi.fn().mockReturnValue({ height: 600, width: 800, x: 50, y: 50 }),
+      } as any;
+
+      manager.saveState(mockBrowserWindow, 'close');
+
+      expect(mockStoreManagerSet).toHaveBeenCalledWith('windowSize_test-window', {
+        height: 600,
+        width: 800,
+        x: 50,
+        y: 50,
+      });
+    });
+
+    it('should handle errors gracefully', () => {
+      const mockBrowserWindow = {
+        getBounds: vi.fn().mockImplementation(() => {
+          throw new Error('Window destroyed');
+        }),
+      } as any;
+
+      // Should not throw
+      expect(() => manager.saveState(mockBrowserWindow, 'close')).not.toThrow();
+    });
+  });
+
+  describe('resolveState', () => {
+    it('should use fallback when no saved state', () => {
+      mockStoreManagerGet.mockReturnValue(undefined);
+
+      const state = manager.resolveState({ height: 600, width: 800 });
+
+      expect(state).toEqual({ height: 600, width: 800 });
+    });
+
+    it('should use saved size over fallback', () => {
+      mockStoreManagerGet.mockReturnValue({ height: 700, width: 900 });
+
+      const state = manager.resolveState({ height: 600, width: 800 });
+
+      expect(state).toEqual({ height: 700, width: 900 });
+    });
+
+    it('should restore saved position when valid', () => {
+      mockStoreManagerGet.mockReturnValue({ height: 700, width: 900, x: 100, y: 100 });
+
+      const state = manager.resolveState({ height: 600, width: 800 });
+
+      expect(state).toEqual({ height: 700, width: 900, x: 100, y: 100 });
+    });
+
+    it('should clamp position to screen bounds', () => {
+      mockStoreManagerGet.mockReturnValue({ height: 700, width: 900, x: 2000, y: 1500 });
+
+      const state = manager.resolveState({ height: 600, width: 800 });
+
+      // x should be clamped: maxX = 0 + max(0, 1920 - 900) = 1020
+      // y should be clamped: maxY = 0 + max(0, 1080 - 700) = 380
+      expect(state.x).toBe(1020);
+      expect(state.y).toBe(380);
+    });
+
+    it('should clamp size to screen bounds', () => {
+      mockScreen.getDisplayMatching.mockReturnValueOnce({
+        workArea: { height: 800, width: 1200, x: 0, y: 0 },
+      });
+      mockStoreManagerGet.mockReturnValue({ height: 1200, width: 2000, x: 0, y: 0 });
+
+      const state = manager.resolveState({ height: 600, width: 800 });
+
+      expect(state.width).toBe(1200);
+      expect(state.height).toBe(800);
+    });
+
+    it('should use primary display when no matching display found', () => {
+      mockScreen.getDisplayMatching.mockReturnValueOnce(null);
+      mockStoreManagerGet.mockReturnValue({ height: 700, width: 900, x: 100, y: 100 });
+
+      const state = manager.resolveState({ height: 600, width: 800 });
+
+      expect(mockScreen.getPrimaryDisplay).toHaveBeenCalled();
+      expect(state).toBeDefined();
+    });
+  });
+
+  describe('createCloseHandler', () => {
+    let mockBrowserWindow: any;
+    let onCleanup: ReturnType<typeof vi.fn>;
+    let onHide: ReturnType<typeof vi.fn>;
+
+    beforeEach(() => {
+      mockBrowserWindow = {
+        getBounds: vi.fn().mockReturnValue({ height: 600, width: 800, x: 0, y: 0 }),
+      };
+      onCleanup = vi.fn();
+      onHide = vi.fn();
+    });
+
+    describe('when app is quitting', () => {
+      beforeEach(() => {
+        (mockApp as any).isQuiting = true;
+      });
+
+      it('should save state and call cleanup', () => {
+        const handler = manager.createCloseHandler(mockBrowserWindow, { onCleanup, onHide });
+        const mockEvent = { preventDefault: vi.fn() };
+
+        handler(mockEvent as any);
+
+        expect(mockStoreManagerSet).toHaveBeenCalledWith('windowSize_test-window', {
+          height: 600,
+          width: 800,
+          x: 0,
+          y: 0,
+        });
+        expect(onCleanup).toHaveBeenCalled();
+        expect(mockEvent.preventDefault).not.toHaveBeenCalled();
+      });
+    });
+
+    describe('when keepAlive is true', () => {
+      beforeEach(() => {
+        manager = new WindowStateManager(mockApp, {
+          identifier: 'test-window',
+          keepAlive: true,
+        });
+      });
+
+      it('should prevent close and call hide', () => {
+        const handler = manager.createCloseHandler(mockBrowserWindow, { onCleanup, onHide });
+        const mockEvent = { preventDefault: vi.fn() };
+
+        handler(mockEvent as any);
+
+        expect(mockEvent.preventDefault).toHaveBeenCalled();
+        expect(onHide).toHaveBeenCalled();
+        expect(mockStoreManagerSet).not.toHaveBeenCalled();
+      });
+    });
+
+    describe('when keepAlive is false (normal close)', () => {
+      it('should save state and call cleanup', () => {
+        const handler = manager.createCloseHandler(mockBrowserWindow, { onCleanup, onHide });
+        const mockEvent = { preventDefault: vi.fn() };
+
+        handler(mockEvent as any);
+
+        expect(mockStoreManagerSet).toHaveBeenCalledWith('windowSize_test-window', {
+          height: 600,
+          width: 800,
+          x: 0,
+          y: 0,
+        });
+        expect(onCleanup).toHaveBeenCalled();
+        expect(mockEvent.preventDefault).not.toHaveBeenCalled();
+      });
+    });
+  });
+});