fix: add switchable liquid glass mode

[davidarny]

Summary

• add Glass as a separate app theme mode instead of keeping liquid glass always enabled
• toggle the native macOS liquid-glass effect from the frontend theme hook via a dedicated Tauri command
• restore solid panel styling for System/Light/Dark and keep the glass shell only for Glass mode
• tighten the panel/nav shell geometry so the border, divider, and hover surfaces do not bleed into each other

Screenshots

Verification

• cargo check
• bun run build
• bun run test --run src/lib/settings.test.ts src/pages/settings.test.tsx src/hooks/app/use-settings-display-actions.test.ts src/App.test.tsx
• bun run test --run src/components/side-nav.test.tsx src/App.test.tsx

Notes

• Skipped bun run test:coverage per request.

[robinebers]

I really like this, thank you @davidarny!

• I think we should make the window a little less wide now
• The gray no longer really works now, and it probably should be either a lighter gray or even white
• Text can rely on the normal/bold to create hierarchy
• Probably need to adjust the remaining UI elements, like the settings and the bars, to appear more glassy

This is amazing progress though, am gonna jump into this a bit.

Would love to collect some feedback, gonna make a post.

[sayuru-akash]

Hello @robinebers, is this still a work in progress? I just saw this and thought it gave a great look. +1

[davidarny]

@sayuru-akash kind of yes, still needs a little bit of UI polishing. Will take care of it after a vacation.

[davidarny]

@validatedev @robinebers made some UI fixes. Please take a look.

[augmentcode]

🤖 Augment PR Summary

Summary: This PR makes the new “liquid glass” look an explicit, switchable theme mode rather than always-on.

Changes:

• Adds a new glass value to ThemeMode and exposes it in Settings UI/tests.
• Updates the theme hook to toggle a glass root class and, in Tauri, invoke a new backend command to enable/disable native liquid-glass.
• Introduces a Tauri set_liquid_glass_enabled command and initializes the tauri-plugin-liquid-glass plugin.
• Refactors macOS WebKit configuration to keep the WKWebView transparent (and optionally disable inactive scheduling on macOS 14+).
• Restores solid panel styling for System/Light/Dark while keeping the “glassy” shell for Glass mode; adjusts panel geometry and some settings surfaces.
• Reduces the configured window width from 400 to 380.

Technical Notes: Adds plugin capability liquid-glass:default and expands objc2 feature flags to support the new macOS WebKit/window customization.

_{🤖 Was this summary useful? React with 👍 or 👎}

[augmentcode]

Review completed. 3 suggestions posted.

Comment augment review to trigger a new review at any time.

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 447429682c

ℹ️ 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".

[cubic-dev-ai]

2 issues found across 19 files

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/components/app/app-shell.tsx">

<violation number="1" location="src/components/app/app-shell.tsx:68">
P2: Restore `tabIndex={-1}` on the panel container so `usePanel` can programmatically focus it.</violation>
</file>

<file name="src-tauri/tauri.conf.json">

<violation number="1" location="src-tauri/tauri.conf.json:17">
P2: This initial width of `380` will likely be overridden at runtime — `usePanel` hard-codes `PANEL_WIDTH = 400` and calls `currentWindow.setSize(...)`. Either update `PANEL_WIDTH` in the `usePanel` hook to match `380`, or keep this config at `400` to avoid a visible resize flash on launch.</violation>
</file>

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

[validatedev]

Tried your PR with different settings. No legibility issues + looks very cool! Would be my default setting. Love it!