feat: add UI scale setting (Normal / Small / Compact) by arifszn · Pull Request #301 · robinebers/openusage

arifszn · 2026-03-16T10:59:52Z

Summary

Adds a UI Scale setting with three options — Normal, Small, and Compact — that adjusts font size and spacing across the entire UI.

Setting lives in Settings → UI Scale as a radio button group (matching existing settings style)
Preference persists across restarts via Tauri's LazyStore
Scales all rem-based font sizes and spacing proportionally via a single CSS rule:
- Normal — default (16px)
- Small — 14px
- Compact — 11px

Screenshots

Normal	Small	Compact

Implementation

src/lib/settings.ts — UIScale type, UI_SCALE_OPTIONS, loadUIScale / saveUIScale
src/stores/app-preferences-store.ts — uiScale state + setUIScale
src/hooks/app/use-settings-compact.ts — applies small or compact class on <html>
src/hooks/app/use-settings-bootstrap.ts — loads setting on startup
src/hooks/app/use-settings-display-actions.ts — handleUIScaleChange
src/index.css — html.small { font-size: 14px }, html.compact { font-size: 11px }
src/pages/settings.tsx — UI Scale section with Normal / Small / Compact radio buttons

Test plan

Select Small — UI immediately scales down slightly
Select Compact — UI scales down more noticeably
Select Normal — UI returns to default
Restart app — preference persists

Adds a Compact Mode toggle to the Settings panel that reduces font size and spacing across the entire UI for users who prefer a denser layout. - Persist compact mode preference via Tauri LazyStore (settings.json) - Apply/remove `compact` class on <html> via useSettingsCompact hook - Scale all rem-based font sizes and spacing down with a single CSS rule - Wire setting through store, bootstrap, display actions, and settings page

cubic-dev-ai

No issues found across 9 files

Since this is your first cubic review, here's how it works:

cubic automatically reviews your code and comments on bugs and improvements
Teach cubic by replying to its comments. cubic learns from your replies and gets better over time
Add one-off context when rerunning by tagging @cubic-dev-ai with guidance or docs links (including llms.txt)
Ask questions if you need clarification on any suggestion

davidarny · 2026-03-16T15:51:49Z

Thanks @arifszn , great idea!

For me it seems like half-compact mode, as the difference is not that large.

Maybe we can reduce spacing/font sizes even more, so that difference would be more obvious?

What do you think?

arifszn · 2026-03-16T16:01:10Z

Thanks @arifszn , great idea!

For me it seems like half-compact mode, as the difference is not that large.

Maybe we can reduce spacing/font sizes even more, so that difference would be more obvious?

What do you think?

Thanks for the feedback, @davidarny! Totally agree, the current difference is subtle.

Two ideas to make it more flexible — either a slider for fine-grained control, or three fixed options: Normal, Small, and Compact. The slider is more flexible, but the three-option approach feels cleaner and more intentional for a settings UI.

What do you prefer? Happy to update the PR accordingly!

davidarny · 2026-03-16T16:04:45Z

@arifszn three options way makes more sense for me. Much less complexity in the code and will fit for most of users.

Slider though is good too, but IMHO a bit like overkill for an app 😅

Replaces the single compact mode checkbox with three UI scale options (Normal, Small, Compact) using the same radio button pattern as other settings. Font sizes: Small = 14px, Compact = 11px.

cubic-dev-ai

1 issue found across 9 files (changes from recent commits).

Prompt for AI agents (unresolved issues)


Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.


<file name="src/lib/settings.ts">

<violation number="1" location="src/lib/settings.ts:316">
P2: Legacy persisted `compactMode` values are not migrated/read, causing existing users to lose their compact UI preference after upgrade.</violation>
</file>

_{Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.}

src/lib/settings.ts

arifszn · 2026-03-17T11:33:36Z

@arifszn three options way makes more sense for me. Much less complexity in the code and will fit for most of users.

Slider though is good too, but IMHO a bit like overkill for an app 😅

@davidarny done.

validatedev · 2026-03-17T22:04:09Z

@codex review

Copilot

Pull request overview

Adds a persisted UI Scale preference (Normal / Small / Compact) that globally scales the app UI by changing the root html font size and wiring the setting through the existing settings state/actions flow.

Changes:

Introduces UIScale setting model + persistence helpers (loadUIScale / saveUIScale) and adds uiScale to the app preferences store.
Loads UI scale on startup and applies it by toggling small/compact classes on the <html> element.
Adds a new “UI Scale” radio-button section in Settings and wires it to analytics + persistence.

Reviewed changes

Copilot reviewed 9 out of 9 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
src/lib/settings.ts	Adds `UIScale` type, options, defaults, and load/save functions backed by LazyStore.
src/stores/app-preferences-store.ts	Stores `uiScale` in zustand and exposes `setUIScale`.
src/hooks/app/use-settings-bootstrap.ts	Loads `uiScale` on startup and applies to preferences state.
src/hooks/app/use-settings-display-actions.ts	Adds `handleUIScaleChange` to track + persist changes.
src/hooks/app/use-settings-compact.ts	Applies the UI scale by toggling `small`/`compact` classes on `<html>`.
src/index.css	Adds `html.small` / `html.compact` root font-size overrides.
src/pages/settings.tsx	Adds Settings UI section for UI Scale selection.
src/components/app/app-content.tsx	Plumbs `uiScale` and `onUIScaleChange` into `SettingsPage`.
src/App.tsx	Wires bootstrap + actions + HTML class application for UI scale.

Comments suppressed due to low confidence (1)

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

useSettingsBootstrap now depends on DEFAULT_UI_SCALE, loadUIScale, and a required setUIScale argument, but the existing unit test src/hooks/app/use-settings-bootstrap.test.ts currently omits setUIScale in createArgs() and its @/lib/settings mock does not provide DEFAULT_UI_SCALE / loadUIScale. This will break the test suite. Update the test args + mocks and add coverage for loading/fallback behavior of the UI scale setting.

type UseSettingsBootstrapArgs = {
  setPluginSettings: (value: PluginSettings | null) => void
  setPluginsMeta: (value: PluginMeta[]) => void
  setAutoUpdateInterval: (value: AutoUpdateIntervalMinutes) => void
  setThemeMode: (value: ThemeMode) => void
  setDisplayMode: (value: DisplayMode) => void
  setResetTimerDisplayMode: (value: ResetTimerDisplayMode) => void
  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>
}

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

You can also share your feedback on Copilot code review. Take the survey.

src/lib/settings.ts

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

src/index.css

+/* UI scale: reduce font size and spacing globally */
+html.small {
+  font-size: 14px;
+}
+html.compact {
+  font-size: 11px;
+}


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

chatgpt-codex-connector · 2026-03-17T22:08:01Z

Codex Review: Didn't find any major issues. 🎉

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

davidarny

Hey @arifszn , please check copilot review comments. Overall looks good!

- Add isUIScale() type-guard to settings.ts (consistent with other guards) - Rename useSettingsCompact → useSettingsUIScale for clarity - Add saveUIScale mock and handleUIScaleChange test to display-actions tests

arifszn · 2026-03-20T06:30:21Z

Hey @arifszn , please check copilot review comments. Overall looks good!

@davidarny done.

github-actions bot added the core label Mar 16, 2026

cubic-dev-ai bot reviewed Mar 16, 2026

View reviewed changes

feat: replace compact mode toggle with Normal/Small/Compact options

8674bb4

Replaces the single compact mode checkbox with three UI scale options (Normal, Small, Compact) using the same radio button pattern as other settings. Font sizes: Small = 14px, Compact = 11px.

arifszn requested review from davidarny, robinebers and validatedev as code owners March 16, 2026 16:23

arifszn changed the title ~~feat: add compact mode setting~~ feat: add UI scale setting (Normal / Small / Compact) Mar 16, 2026

cubic-dev-ai bot reviewed Mar 16, 2026

View reviewed changes

src/lib/settings.ts Show resolved Hide resolved

validatedev requested a review from Copilot March 17, 2026 22:04

Copilot started reviewing on behalf of validatedev March 17, 2026 22:04 View session

Copilot AI reviewed Mar 17, 2026

View reviewed changes

davidarny requested changes Mar 18, 2026

View reviewed changes

arifszn added 2 commits March 18, 2026 15:06

test: update bootstrap test for uiScale setting

6d57630

refactor: address review feedback on UI scale implementation

fab6249

- Add isUIScale() type-guard to settings.ts (consistent with other guards) - Rename useSettingsCompact → useSettingsUIScale for clarity - Add saveUIScale mock and handleUIScaleChange test to display-actions tests

arifszn requested a review from davidarny March 18, 2026 09:12

Conversation

arifszn commented Mar 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Screenshots

Implementation

Test plan

Uh oh!

cubic-dev-ai bot left a comment

Choose a reason for hiding this comment

Uh oh!

davidarny commented Mar 16, 2026

Uh oh!

arifszn commented Mar 16, 2026

Uh oh!

davidarny commented Mar 16, 2026

Uh oh!

cubic-dev-ai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

arifszn commented Mar 17, 2026

Uh oh!

validatedev commented Mar 17, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

chatgpt-codex-connector bot commented Mar 17, 2026

Uh oh!

davidarny left a comment

Choose a reason for hiding this comment

Uh oh!

arifszn commented Mar 20, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

arifszn commented Mar 16, 2026 •

edited

Loading