Skip to content

feat(desktop): add interface scale slider in Appearance settings - #4520

Open
Dr3ladwyn wants to merge 1 commit into
block:mainfrom
Dr3ladwyn:feat/desktop-interface-scale-slider
Open

feat(desktop): add interface scale slider in Appearance settings#4520
Dr3ladwyn wants to merge 1 commit into
block:mainfrom
Dr3ladwyn:feat/desktop-interface-scale-slider

Conversation

@Dr3ladwyn

Copy link
Copy Markdown

Summary

Adds a visible Interface scale control under Settings → Appearance so users can enlarge or shrink the desktop UI without relying on keyboard shortcuts.

Text zoom already existed via Cmd/Ctrl + / − / 0 (root <html> font-size + buzz:text-scale in localStorage). This PR surfaces that same preference as a slider and keeps keyboard shortcuts in sync.

None found for an existing issue/PR tracking an Appearance UI scale slider (searched open issues/PRs for zoom / text-scale / interface scale). Happy to open a tracking issue if maintainers prefer that first.

Motivation

Keyboard-only zoom is easy to miss, and many users (especially accessibility / high-DPI) look for a settings slider. This makes scale discoverable next to theme controls.

Implementation

  • Extract a shared device-level text-scale store (desktop/src/shared/lib/textScale.ts) with:
    • presets 75%–150% (aligned with existing min/max and keyboard steps)
    • persistence under buzz:text-scale
    • root rem application (native webview zoom stays pinned at 1)
  • React hook useTextScale so Settings and shortcuts share one source of truth
  • Refactor useWebviewZoomShortcuts to call the shared store
  • Appearance UI: slider, live percent label, Reset
  • Unit tests for storage, snap/clamp, and step/reset behavior

How to test

  1. Run the desktop app (just desktop-dev or just dev).
  2. Open Settings → Appearance.
  3. Drag Interface scale between 75% and 150% — UI rem text/layout should scale; percent label updates.
  4. Click Reset — returns to 100%.
  5. Use Cmd/Ctrl + / − / 0 — slider value updates to match (and vice versa).
  6. Restart the app — scale preference persists.

Screenshots

Please add before/after screenshots from a local build (required for UI PRs). Path: Settings → Appearance, top of the section.

Checklist

  • Focused change (desktop text-scale only)
  • Unit tests for new preference module
  • DCO sign-off on commit
  • Local just ci / desktop checks (not fully run in this environment; unit tests for textScale pass)
  • Screenshots attached after local verify

Expose the existing text-scale preference (Cmd/Ctrl +/- / 0) as a
slider under Settings → Appearance so users can adjust UI scale without
relying on keyboard shortcuts.

- Extract a shared textScale store (persist, apply root rem scale, presets)
- Wire keyboard zoom shortcuts through the shared store
- Add Interface scale control with percent label and Reset
- Add unit tests for storage, clamp/snap, and step behavior

Signed-off-by: Dreladwyn <59955879+Dr3ladwyn@users.noreply.github.com>
Copilot AI review requested due to automatic review settings August 3, 2026 12:36
@Dr3ladwyn
Dr3ladwyn requested a review from a team as a code owner August 3, 2026 12:36

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants