Frontend UI improvements and polish#1474
Merged
richiemcilroy merged 7 commits intomainfrom Dec 30, 2025
Merged
Conversation
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Additional Comments (2)
-
apps/desktop/src/components/Mode.tsx, line 126 (link)style: Inconsistent ring color - uses
ring-blue-10instead ofring-blue-500like other active statesNote: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!
-
apps/desktop/src/components/Mode.tsx, line 140 (link)style: Same ring color inconsistency - should use
ring-blue-500to match other active statesNote: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!
11 files reviewed, 5 comments
| class="flex flex-row gap-2 items-center px-2 w-full h-10 rounded-lg transition-colors cursor-default disabled:opacity-70 bg-gray-3 disabled:text-gray-11 KSelect" | ||
| class="flex flex-row gap-2 items-center px-2 w-full h-[42px] rounded-lg transition-colors cursor-default disabled:opacity-70 bg-gray-3 disabled:text-gray-11 KSelect" | ||
| PillComponent={InfoPill} | ||
| icon={<IconPhMonitorBold class="text-gray-10 size-4" />} |
Contributor
There was a problem hiding this comment.
syntax: IconPhMonitorBold is not imported - this will cause a runtime error
Prompt To Fix With AI
This is a comment left during a code review.
Path: apps/desktop/src/routes/(window-chrome)/new-main/SystemAudio.tsx
Line: 17:17
Comment:
**syntax:** `IconPhMonitorBold` is not imported - this will cause a runtime error
How can I resolve this? If you propose a fix, please make it concise.
Comment on lines
+18
to
+32
| icon: IconCapInstant, | ||
| }, | ||
| { | ||
| mode: "studio" as RecordingMode, | ||
| title: "Studio", | ||
| description: | ||
| "Record locally in the highest quality for editing later. Perfect for creating polished content with effects and transitions.", | ||
| icon: IconCapFilmCut, | ||
| }, | ||
| { | ||
| mode: "screenshot" as RecordingMode, | ||
| title: "Screenshot", | ||
| description: | ||
| "Capture and annotate screenshots instantly. Great for quick captures, bug reports, and visual communication.", | ||
| icon: IconCapScreenshot, |
Contributor
There was a problem hiding this comment.
logic: Missing icon imports: IconCapInstant, IconCapFilmCut, and IconCapScreenshot are referenced but not imported
Suggested change
| icon: IconCapInstant, | |
| }, | |
| { | |
| mode: "studio" as RecordingMode, | |
| title: "Studio", | |
| description: | |
| "Record locally in the highest quality for editing later. Perfect for creating polished content with effects and transitions.", | |
| icon: IconCapFilmCut, | |
| }, | |
| { | |
| mode: "screenshot" as RecordingMode, | |
| title: "Screenshot", | |
| description: | |
| "Capture and annotate screenshots instantly. Great for quick captures, bug reports, and visual communication.", | |
| icon: IconCapScreenshot, | |
| import { cx } from "cva"; | |
| import { For } from "solid-js"; | |
| import { Transition } from "solid-transition-group"; | |
| import { commands, type RecordingMode } from "~/utils/tauri"; | |
| import IconLucideArrowLeft from "~icons/lucide/arrow-left"; | |
| import IconCapInstant from "~icons/cap/instant"; | |
| import IconCapFilmCut from "~icons/cap/film-cut"; | |
| import IconCapScreenshot from "~icons/cap/screenshot"; | |
| import { useRecordingOptions } from "../OptionsContext"; |
Prompt To Fix With AI
This is a comment left during a code review.
Path: apps/desktop/src/routes/(window-chrome)/new-main/ModeInfoPanel.tsx
Line: 18:32
Comment:
**logic:** Missing icon imports: `IconCapInstant`, `IconCapFilmCut`, and `IconCapScreenshot` are referenced but not imported
```suggestion
import { cx } from "cva";
import { For } from "solid-js";
import { Transition } from "solid-transition-group";
import { commands, type RecordingMode } from "~/utils/tauri";
import IconLucideArrowLeft from "~icons/lucide/arrow-left";
import IconCapInstant from "~icons/cap/instant";
import IconCapFilmCut from "~icons/cap/film-cut";
import IconCapScreenshot from "~icons/cap/screenshot";
import { useRecordingOptions } from "../OptionsContext";
```
How can I resolve this? If you propose a fix, please make it concise.| > | ||
| {isSelected() && ( | ||
| <div class="absolute top-2 right-2 flex items-center justify-center size-4 rounded-full bg-blue-9"> | ||
| <IconLucideCheck class="size-2.5 text-white" /> |
Contributor
There was a problem hiding this comment.
logic: Missing import for IconLucideCheck - will cause runtime error when mode is selected
Suggested change
| <IconLucideCheck class="size-2.5 text-white" /> | |
| import { cx } from "cva"; | |
| import { For } from "solid-js"; | |
| import { Transition } from "solid-transition-group"; | |
| import { commands, type RecordingMode } from "~/utils/tauri"; | |
| import IconLucideArrowLeft from "~icons/lucide/arrow-left"; | |
| import IconLucideCheck from "~icons/lucide/check"; | |
| import { useRecordingOptions } from "../OptionsContext"; |
Prompt To Fix With AI
This is a comment left during a code review.
Path: apps/desktop/src/routes/(window-chrome)/new-main/ModeInfoPanel.tsx
Line: 88:88
Comment:
**logic:** Missing import for `IconLucideCheck` - will cause runtime error when mode is selected
```suggestion
import { cx } from "cva";
import { For } from "solid-js";
import { Transition } from "solid-transition-group";
import { commands, type RecordingMode } from "~/utils/tauri";
import IconLucideArrowLeft from "~icons/lucide/arrow-left";
import IconLucideCheck from "~icons/lucide/check";
import { useRecordingOptions } from "../OptionsContext";
```
How can I resolve this? If you propose a fix, please make it concise.
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.
Greptile Summary
Important Files Changed
apps/desktop/src/routes/(window-chrome)/new-main/ModeInfoPanel.tsxapps/desktop/src-tauri/src/windows.rsConfidence score: 2/5
apps/desktop/src/routes/(window-chrome)/new-main/ModeInfoPanel.tsxwhich needs all missing icon imports resolved before mergeSequence Diagram
sequenceDiagram participant User participant Frontend participant ShowCapWindow participant CapWindowId participant WebviewWindowBuilder participant TauriWindow User->>Frontend: "Click to open window" Frontend->>ShowCapWindow: "show(app)" ShowCapWindow->>CapWindowId: "id(app)" CapWindowId-->>ShowCapWindow: "window identifier" ShowCapWindow->>CapWindowId: "get(app)" alt Window exists CapWindowId-->>ShowCapWindow: "existing window" ShowCapWindow->>TauriWindow: "show(), unminimize(), set_focus()" TauriWindow-->>User: "Window displayed" else Window doesn't exist ShowCapWindow->>ShowCapWindow: "window_builder(app, url)" ShowCapWindow->>WebviewWindowBuilder: "configure size, theme, flags" WebviewWindowBuilder->>TauriWindow: "build()" TauriWindow-->>ShowCapWindow: "new window" ShowCapWindow->>TauriWindow: "add_traffic_lights() (macOS)" ShowCapWindow-->>User: "Window displayed" endContext used:
dashboard- CLAUDE.md (source)dashboard- AGENTS.md (source)