feat: add UI scale setting (Normal / Small / Compact)

src/App.tsx

@@ -9,6 +9,7 @@ import { useSettingsPluginActions } from "@/hooks/app/use-settings-plugin-action
 import { useSettingsPluginList } from "@/hooks/app/use-settings-plugin-list"
 import { useSettingsSystemActions } from "@/hooks/app/use-settings-system-actions"
 import { useSettingsTheme } from "@/hooks/app/use-settings-theme"
+import { useSettingsUIScale } from "@/hooks/app/use-settings-ui-scale"
 import { useTrayIcon } from "@/hooks/app/use-tray-icon"
 import { track } from "@/lib/analytics"
 import { REFRESH_COOLDOWN_MS, savePluginSettings } from "@/lib/settings"
@@ -58,6 +59,8 @@ function App() {
     setResetTimerDisplayMode,
     setGlobalShortcut,
     setStartOnLogin,
+    uiScale,
+    setUIScale,
   } = useAppPreferencesStore(
     useShallow((state) => ({
       autoUpdateInterval: state.autoUpdateInterval,
@@ -72,6 +75,8 @@ function App() {
       setResetTimerDisplayMode: state.setResetTimerDisplayMode,
       setGlobalShortcut: state.setGlobalShortcut,
       setStartOnLogin: state.setStartOnLogin,
+      uiScale: state.uiScale,
+      setUIScale: state.setUIScale,
     }))
   )
 
@@ -120,25 +125,29 @@ function App() {
     setResetTimerDisplayMode,
     setGlobalShortcut,
     setStartOnLogin,
+    setUIScale,
     setLoadingForPlugins,
     setErrorForPlugins,
     startBatch,
   })
 
   useSettingsTheme(themeMode)
+  useSettingsUIScale(uiScale)
 
   const {
     handleThemeModeChange,
     handleDisplayModeChange,
     handleResetTimerDisplayModeChange,
     handleResetTimerDisplayModeToggle,
     handleMenubarIconStyleChange,
+    handleUIScaleChange,
   } = useSettingsDisplayActions({
     setThemeMode,
     setDisplayMode,
     resetTimerDisplayMode,
     setResetTimerDisplayMode,
     setMenubarIconStyle,
+    setUIScale,
     scheduleTrayIconUpdate,
   })
 
@@ -250,6 +259,7 @@ function App() {
         traySettingsPreview,
         onGlobalShortcutChange: handleGlobalShortcutChange,
         onStartOnLoginChange: handleStartOnLoginChange,
+        onUIScaleChange: handleUIScaleChange,
       }}
     />
   )

src/components/app/app-content.tsx

@@ -14,6 +14,7 @@ import type {
   MenubarIconStyle,
   ResetTimerDisplayMode,
   ThemeMode,
+  UIScale,
 } from "@/lib/settings"
 
 type AppContentDerivedProps = {
@@ -35,6 +36,7 @@ export type AppContentActionProps = {
   traySettingsPreview: TraySettingsPreview
   onGlobalShortcutChange: (value: GlobalShortcut) => void
   onStartOnLoginChange: (value: boolean) => void
+  onUIScaleChange: (value: UIScale) => void
 }
 
 export type AppContentProps = AppContentDerivedProps & AppContentActionProps
@@ -55,6 +57,7 @@ export function AppContent({
   traySettingsPreview,
   onGlobalShortcutChange,
   onStartOnLoginChange,
+  onUIScaleChange,
 }: AppContentProps) {
   const { activeView } = useAppUiStore(
     useShallow((state) => ({
@@ -70,6 +73,7 @@ export function AppContent({
     globalShortcut,
     themeMode,
     startOnLogin,
+    uiScale,
   } = useAppPreferencesStore(
     useShallow((state) => ({
       displayMode: state.displayMode,
@@ -79,6 +83,7 @@ export function AppContent({
       globalShortcut: state.globalShortcut,
       themeMode: state.themeMode,
       startOnLogin: state.startOnLogin,
+      uiScale: state.uiScale,
     }))
   )
 
@@ -115,6 +120,8 @@ export function AppContent({
         onGlobalShortcutChange={onGlobalShortcutChange}
         startOnLogin={startOnLogin}
         onStartOnLoginChange={onStartOnLoginChange}
+        uiScale={uiScale}
+        onUIScaleChange={onUIScaleChange}
       />
     )
   }

src/hooks/app/use-settings-bootstrap.test.ts

@@ -17,6 +17,7 @@ const {
   loadResetTimerDisplayModeMock,
   loadStartOnLoginMock,
   loadThemeModeMock,
+  loadUIScaleMock,
   migrateLegacyTraySettingsMock,
   normalizePluginSettingsMock,
   savePluginSettingsMock,
@@ -36,6 +37,7 @@ const {
   loadResetTimerDisplayModeMock: vi.fn(),
   loadStartOnLoginMock: vi.fn(),
   loadThemeModeMock: vi.fn(),
+  loadUIScaleMock: vi.fn(),
   migrateLegacyTraySettingsMock: vi.fn(),
   normalizePluginSettingsMock: vi.fn(),
   savePluginSettingsMock: vi.fn(),
@@ -61,6 +63,7 @@ vi.mock("@/lib/settings", () => ({
   DEFAULT_RESET_TIMER_DISPLAY_MODE: "relative",
   DEFAULT_START_ON_LOGIN: false,
   DEFAULT_THEME_MODE: "system",
+  DEFAULT_UI_SCALE: "normal",
   getEnabledPluginIds: getEnabledPluginIdsMock,
   loadAutoUpdateInterval: loadAutoUpdateIntervalMock,
   loadDisplayMode: loadDisplayModeMock,
@@ -70,6 +73,7 @@ vi.mock("@/lib/settings", () => ({
   loadResetTimerDisplayMode: loadResetTimerDisplayModeMock,
   loadStartOnLogin: loadStartOnLoginMock,
   loadThemeMode: loadThemeModeMock,
+  loadUIScale: loadUIScaleMock,
   migrateLegacyTraySettings: migrateLegacyTraySettingsMock,
   normalizePluginSettings: normalizePluginSettingsMock,
   savePluginSettings: savePluginSettingsMock,
@@ -88,6 +92,7 @@ function createArgs() {
     setGlobalShortcut: vi.fn(),
     setStartOnLogin: vi.fn(),
     setMenubarIconStyle: vi.fn(),
+    setUIScale: vi.fn(),
     setLoadingForPlugins: vi.fn(),
     setErrorForPlugins: vi.fn(),
     startBatch: vi.fn().mockResolvedValue(undefined),
@@ -111,6 +116,7 @@ describe("useSettingsBootstrap", () => {
     loadResetTimerDisplayModeMock.mockReset()
     loadStartOnLoginMock.mockReset()
     loadThemeModeMock.mockReset()
+    loadUIScaleMock.mockReset()
     migrateLegacyTraySettingsMock.mockReset()
     normalizePluginSettingsMock.mockReset()
     savePluginSettingsMock.mockReset()
@@ -137,6 +143,7 @@ describe("useSettingsBootstrap", () => {
     loadGlobalShortcutMock.mockResolvedValue("CommandOrControl+Shift+O")
     loadMenubarIconStyleMock.mockResolvedValue("provider")
     loadStartOnLoginMock.mockResolvedValue(true)
+    loadUIScaleMock.mockResolvedValue("normal")
     migrateLegacyTraySettingsMock.mockResolvedValue(undefined)
     savePluginSettingsMock.mockResolvedValue(undefined)
     getEnabledPluginIdsMock.mockReturnValue(["codex"])
@@ -152,6 +159,25 @@ describe("useSettingsBootstrap", () => {
     expect(enableAutostartMock).not.toHaveBeenCalled()
   })
 
+  it("falls back to default UI scale when loading fails", async () => {
+    const uiScaleError = new Error("ui scale unavailable")
+    const errorSpy = vi.spyOn(console, "error").mockImplementation(() => {})
+    loadUIScaleMock.mockRejectedValueOnce(uiScaleError)
+    const args = createArgs()
+
+    renderHook(() => useSettingsBootstrap(args))
+
+    await waitFor(() => {
+      expect(errorSpy).toHaveBeenCalledWith(
+        "Failed to load UI scale:",
+        uiScaleError
+      )
+      expect(args.setUIScale).toHaveBeenCalledWith("normal")
+    })
+
+    errorSpy.mockRestore()
+  })
+
   it("falls back to default reset timer mode when loading fails", async () => {
     const resetModeError = new Error("reset timer mode unavailable")
     const errorSpy = vi.spyOn(console, "error").mockImplementation(() => {})

src/hooks/app/use-settings-bootstrap.ts

@@ -9,6 +9,7 @@ import type { PluginMeta } from "@/lib/plugin-types"
 import {
   arePluginSettingsEqual,
   DEFAULT_AUTO_UPDATE_INTERVAL,
+  DEFAULT_UI_SCALE,
   DEFAULT_DISPLAY_MODE,
   DEFAULT_GLOBAL_SHORTCUT,
   DEFAULT_MENUBAR_ICON_STYLE,
@@ -17,6 +18,7 @@ import {
   DEFAULT_THEME_MODE,
   getEnabledPluginIds,
   loadAutoUpdateInterval,
+  loadUIScale,
   loadDisplayMode,
   loadGlobalShortcut,
   loadMenubarIconStyle,
@@ -34,6 +36,7 @@ import {
   type PluginSettings,
   type ResetTimerDisplayMode,
   type ThemeMode,
+  type UIScale,
 } from "@/lib/settings"
 
 type UseSettingsBootstrapArgs = {
@@ -46,6 +49,7 @@ type UseSettingsBootstrapArgs = {
   setGlobalShortcut: (value: GlobalShortcut) => void
   setStartOnLogin: (value: boolean) => void
   setMenubarIconStyle: (value: MenubarIconStyle) => void
+  setUIScale: (value: UIScale) => void
   setLoadingForPlugins: (ids: string[]) => void
   setErrorForPlugins: (ids: string[], error: string) => void
   startBatch: (pluginIds?: string[]) => Promise<string[] | undefined>
@@ -61,6 +65,7 @@ export function useSettingsBootstrap({
   setGlobalShortcut,
   setStartOnLogin,
   setMenubarIconStyle,
+  setUIScale,
   setLoadingForPlugins,
   setErrorForPlugins,
   startBatch,
@@ -153,6 +158,13 @@ export function useSettingsBootstrap({
           console.error("Failed to load menubar icon style:", error)
         }
 
+        let storedUIScale = DEFAULT_UI_SCALE
+        try {
+          storedUIScale = await loadUIScale()
+        } catch (error) {
+          console.error("Failed to load UI scale:", error)
+        }
+
         if (isMounted) {
           setPluginSettings(normalized)
           setAutoUpdateInterval(storedInterval)
@@ -162,6 +174,7 @@ export function useSettingsBootstrap({
           setGlobalShortcut(storedGlobalShortcut)
           setStartOnLogin(storedStartOnLogin)
           setMenubarIconStyle(storedMenubarIconStyle)
+          setUIScale(storedUIScale)
 
           const enabledIds = getEnabledPluginIds(normalized)
           setLoadingForPlugins(enabledIds)
@@ -187,6 +200,7 @@ export function useSettingsBootstrap({
   }, [
     applyStartOnLogin,
     setAutoUpdateInterval,
+    setUIScale,
     setDisplayMode,
     setErrorForPlugins,
     setGlobalShortcut,

src/hooks/app/use-settings-display-actions.test.ts

@@ -6,11 +6,13 @@ const {
   saveDisplayModeMock,
   saveResetTimerDisplayModeMock,
   saveThemeModeMock,
+  saveUIScaleMock,
 } = vi.hoisted(() => ({
   trackMock: vi.fn(),
   saveThemeModeMock: vi.fn(),
   saveDisplayModeMock: vi.fn(),
   saveResetTimerDisplayModeMock: vi.fn(),
+  saveUIScaleMock: vi.fn(),
 }))
 
 vi.mock("@/lib/analytics", () => ({
@@ -21,6 +23,7 @@ vi.mock("@/lib/settings", () => ({
   saveThemeMode: saveThemeModeMock,
   saveDisplayMode: saveDisplayModeMock,
   saveResetTimerDisplayMode: saveResetTimerDisplayModeMock,
+  saveUIScale: saveUIScaleMock,
 }))
 
 import { useSettingsDisplayActions } from "@/hooks/app/use-settings-display-actions"
@@ -31,15 +34,18 @@ describe("useSettingsDisplayActions", () => {
     saveThemeModeMock.mockReset()
     saveDisplayModeMock.mockReset()
     saveResetTimerDisplayModeMock.mockReset()
+    saveUIScaleMock.mockReset()
     saveThemeModeMock.mockResolvedValue(undefined)
     saveDisplayModeMock.mockResolvedValue(undefined)
     saveResetTimerDisplayModeMock.mockResolvedValue(undefined)
+    saveUIScaleMock.mockResolvedValue(undefined)
   })
 
   it("tracks and applies display-related setting changes", () => {
     const setThemeMode = vi.fn()
     const setDisplayMode = vi.fn()
     const setResetTimerDisplayMode = vi.fn()
+    const setUIScale = vi.fn()
     const scheduleTrayIconUpdate = vi.fn()
 
     const { result } = renderHook(() =>
@@ -48,6 +54,7 @@ describe("useSettingsDisplayActions", () => {
         setDisplayMode,
         resetTimerDisplayMode: "relative",
         setResetTimerDisplayMode,
+        setUIScale,
         scheduleTrayIconUpdate,
       })
     )
@@ -88,6 +95,7 @@ describe("useSettingsDisplayActions", () => {
           setDisplayMode: vi.fn(),
           resetTimerDisplayMode: mode,
           setResetTimerDisplayMode,
+          setUIScale: vi.fn(),
           scheduleTrayIconUpdate: vi.fn(),
         }),
       { initialProps: { mode: "relative" as const } }
@@ -120,6 +128,7 @@ describe("useSettingsDisplayActions", () => {
         setDisplayMode: vi.fn(),
         resetTimerDisplayMode: "relative",
         setResetTimerDisplayMode: vi.fn(),
+        setUIScale: vi.fn(),
         scheduleTrayIconUpdate: vi.fn(),
       })
     )
@@ -138,4 +147,30 @@ describe("useSettingsDisplayActions", () => {
 
     errorSpy.mockRestore()
   })
+
+  it("tracks and persists UI scale change", async () => {
+    const setUIScale = vi.fn()
+
+    const { result } = renderHook(() =>
+      useSettingsDisplayActions({
+        setThemeMode: vi.fn(),
+        setDisplayMode: vi.fn(),
+        resetTimerDisplayMode: "relative",
+        setResetTimerDisplayMode: vi.fn(),
+        setUIScale,
+        scheduleTrayIconUpdate: vi.fn(),
+      })
+    )
+
+    act(() => {
+      result.current.handleUIScaleChange("compact")
+    })
+
+    expect(trackMock).toHaveBeenCalledWith("setting_changed", { setting: "ui_scale", value: "compact" })
+    expect(setUIScale).toHaveBeenCalledWith("compact")
+
+    await waitFor(() => {
+      expect(saveUIScaleMock).toHaveBeenCalledWith("compact")
+    })
+  })
 })