fix(ui): center toggle knob, surface hidden widget during STT, polish UI#3
Open
Lionvsx wants to merge 5 commits into
Open
fix(ui): center toggle knob, surface hidden widget during STT, polish UI#3Lionvsx wants to merge 5 commits into
Lionvsx wants to merge 5 commits into
Conversation
- Toggle: center the knob via flexbox padding instead of magic offsets, stop the shadow being clipped, add focus-visible ring + reduced-motion - Widget: show the hidden island while recording and restore the configured visibility on idle; respect widgetVisible at startup - Polish: tabular-nums stats, balanced headings, font smoothing, global reduced-motion, animated Select dropdown with focus-visible Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Warning Review limit reached
More reviews will be available in 41 minutes and 45 seconds. Learn how PR review limits work. Your organization has run out of usage credits. Purchase more in the billing tab. ⌛ How to resolve this issue?After more reviews become available, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available. Please see our Fair Usage Limits Policy for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (3)
WalkthroughAgent pipeline now calls widget.show() on recording and restore_visibility() on idle; startup respects persisted ChangesWidget visibility and UI/UX enhancements
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested reviewers
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
This comment has been minimized.
This comment has been minimized.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src-tauri/src/agent/pipeline.rs`:
- Around line 487-523: The file is too large; extract the state-emission and
widget-visibility helpers into a new submodule to reduce pipeline.rs size.
Create a new module (e.g., widget_visibility or state_emission) and move
emit_state, show_widget, and restore_widget_visibility there, exporting them
(pub(crate) or pub as appropriate); ensure the new module imports AppHandle,
AppState, and serde_json and that restore_widget_visibility still accesses
app_handle.state::<AppState>() and db.get_config("widgetVisible"). In
pipeline.rs, add a mod declaration and replace the local functions with use
statements calling the moved functions (or call them via the module path),
adjusting visibility and any references to AppHandle/AppState so compilation
passes. Ensure unit tests and callers are updated to reference the new module
names.
In `@src/index.css`:
- Around line 31-32: Stylelint is failing because the custom at-rule "`@theme`" is
unknown and the value for text-rendering uses mixed case; fix by either
allowlisting the at-rule name "theme" in your Stylelint config (add "theme" to
the scss/at-rule-no-unknown ignoreAtRules list) or add a file/block-level
disable (e.g. disable scss/at-rule-no-unknown for this file) and change the
text-rendering value in src/index.css from "optimizeLegibility" to all lowercase
"optimizelegibility" so it satisfies the value-keyword-case rule.
In `@src/shared/components/toggle.tsx`:
- Line 22: The switch can render without an accessible name because aria-label
is bound to the optional prop `label`; update the Toggle component so every
instance always has an accessible name: if `label` is provided use it for
aria-label, otherwise render a visually-hidden label element (e.g., a <span>
with a generated unique id) and set `aria-labelledby` on the switch to that id,
or alternatively compute a sensible default string and set `aria-label` to it;
locate the logic in the Toggle component where `aria-label={label}` is set and
implement the fallback (unique id generation + hidden label or default
aria-label) so unlabeled usages still expose an accessible name.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 96fc1ca7-53b8-446d-876f-98f93bbd417b
📒 Files selected for processing (6)
src-tauri/src/agent/pipeline.rssrc-tauri/src/lib.rssrc/dashboard/stats/stats-row.tsxsrc/index.csssrc/shared/components/select/select.tsxsrc/shared/components/toggle.tsx
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
There was a problem hiding this comment.
No issues found across 6 files
Confidence score: 5/5
- Automated review surfaced no issues in the provided summaries.
- No files require special attention.
Auto-approved: The changes are well-isolated UI improvements (toggle centering, select animation, CSS polish) plus a targeted backend fix to force-show the widget during recording while respecting the user's hide preference afterward; the logic is straightforward, uses existing patterns, and has no impact on...
Re-trigger cubic
Tauri's show() on the macOS NSPanel calls makeKeyAndOrderFront, which made the widget the key window and broke paste injection (the simulated Cmd+V had no text field to land in). Surface the widget with order_front_regardless() / order_out() instead, and skip re-showing an already-visible widget. Also relocate parse_retention_bytes into the transcripts storage module to keep pipeline.rs under the 500-line cap. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src-tauri/src/window/widget.rs`:
- Around line 10-57: The macOS-specific NSPanel calls in show() and
restore_visibility() must be executed on AppKit's main thread; wrap the
tauri_nspanel::ManagerExt calls (the get_webview_panel(...) ->
panel.order_front_regardless() in show and panel.order_out(None) in
restore_visibility) inside app_handle.run_on_main_thread(|| { ... }) so the
panel operations run on the main thread (keep using app_handle.get_webview_panel
and the same early-return logic, just move the ManagerExt calls into the
run_on_main_thread closure).
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 96f5a82e-2725-486f-ae01-31b9b36b2849
📒 Files selected for processing (3)
src-tauri/src/agent/pipeline.rssrc-tauri/src/storage/transcripts.rssrc-tauri/src/window/widget.rs
There was a problem hiding this comment.
1 issue found across 3 files (changes from recent commits).
Reply with feedback, questions, or to request a fix.
Fix all with cubic | Re-trigger cubic
#5) * style(ui): full-product Emil design pass — tokens, focus, motion, a11y Foundation + product-wide polish following Emil Kowalski's design engineering principles. Visual/interaction only — no behavior changes. Tokens (index.css): elevation scale (shadow-card/popover/overlay), z-index scale, macOS window-control colors, modal/fade keyframes. Shared components: Button gains focus-visible ring, press feedback and a link variant; Modal gains role/aria-modal, focus trap + restore, scroll lock and an entrance animation; Card uses the elevation token (+optional interactive lift); Badge/SearchableSelect/PeriodSelector/ModelCard get focus-visible, ease-out and motion-reduce; dropdowns share the popover shadow + pop-in. Shell & pages: sidebar/onboarding/profiles no longer shift layout on active states (constant font-weight); transition-all replaced with named properties; focus-visible added to nav, list items, tabs and footer buttons; inline accent text-buttons routed through Button link variant. dupe-ignore: register the new "link" variant string (matches existing ghost/secondary entries). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * fix(ui): address PR review comments + premium redesign wave 1 Review fixes: - widget.rs: hop NSPanel show/hide to the main thread via run_on_main_thread (calling AppKit from the hotkey background thread crashed on every recording) - toggle: add `ariaLabel` prop so switches with an external label still expose an accessible name; pass it at all three call sites - modal: keep onClose in a ref so focus restoration only runs on close (not on every re-render); make initial focus fall back to the panel; exclude disabled controls from the focus-trap selector Other: - use-fft-bars: gate the rAF loop on `active` so it idles instead of running at 60fps for the app's lifetime (fixes idle CPU/heap churn) - native macOS traffic lights (titleBarStyle Overlay) + premium redesign of Dashboard/Settings (PageHeader, icon stat cards, spacing, type scale) Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
…them run_on_main_thread returns a Result; ignoring it meant a failed dispatch would silently drop a widget show/hide with no signal. Log the error so a failure to surface or restore the island during STT is diagnosable. Addresses cubic review comment (widget.rs:16, P2). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/shared/components/modal.tsx`:
- Around line 76-79: The dialog can be unnamed because aria-label is set
directly from the optional title; update the Modal component so the dialog
always has an accessible name: if a consumer provides an explicit ariaLabel prop
use that; else if title exists generate/assign an id to the title element and
set aria-labelledby to that id; otherwise do not leave aria-label undefined —
provide a sensible fallback (e.g., "Dialog" or require ariaLabel) or throw a
runtime/dev warning. Change references around the role="dialog" element and the
title render (the title variable / renderTitle function) to use the title id or
ariaLabel logic so assistive tech always receives a proper accessible name.
- Around line 46-60: The Tab key handler in the modal (the block that queries
panel.querySelectorAll<HTMLElement>(FOCUSABLE) and uses first/last) fails to
trap focus when document.activeElement is outside the panel; update the handler
to detect when the active element is not contained in the panel (use
panel.contains(document.activeElement)) and, on a Tab event, preventDefault and
move focus into the dialog (focus first when Tab, focus last when Shift+Tab) so
keyboard navigation cannot escape the modal; keep the existing wrap behavior for
the edge cases where activeElement is first or last.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 20d0a279-2d07-40aa-98ca-2dee95755984
📒 Files selected for processing (42)
.doctor/dupe-ignoresrc-tauri/src/window/widget.rssrc-tauri/tauri.conf.jsonsrc/dashboard/dashboard-page.tsxsrc/dashboard/stats/stat-cards.tssrc/dashboard/stats/stat-placeholders.tssrc/dashboard/stats/stats-row.tsxsrc/index.csssrc/layout/main-layout.tsxsrc/layout/sidebar.tsxsrc/onboarding/onboarding-layout.tsxsrc/onboarding/steps/step-microphone.tsxsrc/profiles/list/profile-list-item.tsxsrc/profiles/llm/llm-model-selector.tsxsrc/profiles/profiles-page.tsxsrc/settings/about/about-section.tsxsrc/settings/data/data-section.tsxsrc/settings/debug-section.tsxsrc/settings/general/general-section.tsxsrc/settings/llm/llm-model-download-row.tsxsrc/settings/llm/llm-section.tsxsrc/settings/settings-page.tsxsrc/settings/speech/speech-model-modal.tsxsrc/settings/speech/speech-section.tsxsrc/settings/widget/widget-section.tsxsrc/shared/components/badge/badge.tsxsrc/shared/components/button/button-size-styles.tssrc/shared/components/button/button-variant-styles.tssrc/shared/components/button/button.tsxsrc/shared/components/card.tsxsrc/shared/components/modal-focusable-selector.tssrc/shared/components/modal.tsxsrc/shared/components/model-card/model-card.tsxsrc/shared/components/page-header.tsxsrc/shared/components/period-selector.tsxsrc/shared/components/searchable-select/searchable-select.tsxsrc/shared/components/toggle.tsxsrc/transcripts/transcript-item.tsxsrc/transcripts/transcripts-page.tsxsrc/widget/hooks/use-fft-bars.tssrc/widget/idle-bar.tsxsrc/widget/widget-app.tsx
💤 Files with no reviewable changes (1)
- src/dashboard/stats/stat-placeholders.ts
✅ Files skipped from review due to trivial changes (14)
- src/shared/components/badge/badge.tsx
- src/settings/debug-section.tsx
- src/settings/data/data-section.tsx
- src/layout/main-layout.tsx
- src/shared/components/modal-focusable-selector.ts
- src/profiles/profiles-page.tsx
- src/settings/llm/llm-section.tsx
- src/settings/speech/speech-section.tsx
- src/widget/widget-app.tsx
- src/dashboard/stats/stat-cards.ts
- src/shared/components/page-header.tsx
- .doctor/dupe-ignore
- src/settings/speech/speech-model-modal.tsx
- src/settings/llm/llm-model-download-row.tsx
🚧 Files skipped from review as they are similar to previous changes (2)
- src/shared/components/toggle.tsx
- src-tauri/src/window/widget.rs
…a11y name - Add a minimal Tailwind-v4-aware .stylelintrc.json so external `npx stylelint` runs (e.g. CodeRabbit) stop false-flagging `@theme` as an unknown at-rule. The project lints CSS via neither CI nor pre-push; this only fixes tooling. - Toggle: make props a union requiring `label` OR `ariaLabel`, so a switch without an accessible name is now a compile-time error (all call sites already pass one). Addresses CodeRabbit comments on src/index.css and src/shared/components/toggle.tsx. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
There was a problem hiding this comment.
0 issues found across 42 files (changes from recent commits).
Requires human review: This PR modifies widget visibility logic tied to pipeline state, changes window configuration in tauri.conf.json (decorations, titleBarStyle, transparency), adds platform-specific NSPanel handling, and reworks shared UI components—these touch critical paths that need human judgment to verify...
Re-trigger cubic
There was a problem hiding this comment.
0 issues found across 2 files (changes from recent commits).
Requires human review: This PR modifies core application logic including widget visibility during recording, window configuration in tauri.conf.json, and Rust backend functions in pipeline.rs and widget.rs, which could break critical UX and platform-specific behavior, so it requires human review despite the AI finding no
Re-trigger cubic
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Addresses three issues raised on the settings/widget UI:
Changes
1. Toggle knob positioning (
src/shared/components/toggle.tsx)items-center+ symmetricpx-0.5padding instead of a hardcodedmt-0.5/translate-x-[22px]. Travel is now exactlytranslate-x-5(the 20px of free space).overflow-hiddenso the knob shadow is no longer clipped.focus-visiblering,aria-label,motion-reducesupport, and a layered knob shadow.2. Widget activates during STT (
src-tauri/src/agent/pipeline.rs,src-tauri/src/lib.rs)emit_state:show_widget()onrecording,restore_widget_visibility()onidle(re-hides only whenwidgetVisible=false). The island now surfaces for the full recording → processing → success cycle, then disappears again.widgetVisibleinstead of always showing.3. UI polish
index.css:-moz-osx-font-smoothing,optimizeLegibility, balanced/tighter headings,.tabular-numsutility, globalprefers-reduced-motionreset,pop-inkeyframe.select.tsx:focus-visiblering,ease-out+motion-reducetransitions, origin-aware entrance animation, softer layered shadow.stats-row.tsx: dashboard figures usetabular-numsto avoid jitter.Testing
cargo checkpasses (only pre-existing warnings).node_modulesnot installed in this checkout sotscwas not run.Note
The force-show is scoped to the recording cycle. Setup failures before recording starts (mic permission, model not loaded) won't surface a hidden widget — open to changing this if desired.
🤖 Generated with Claude Code