feat(desktop): show PR state as sidebar workspace icon#3694
Conversation
Replace the host-type icon in the v2 dashboard sidebar with a PR state icon (open/merged/closed/draft), colored by state, when a workspace has an associated pull request. Clicking the icon opens the PR on GitHub. Drop the now-redundant bottom-right PR badge, and make the diff stats only colorize when the workspace is active.
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
📝 WalkthroughWalkthroughExpanded workspace row and icon components now surface pull request state, render PR-specific icons/colors, and let users open PR URLs via an Electron TRPC mutation; diff-stats styling was simplified. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Renderer as ExpandedWorkspaceRow (renderer)
participant TRPC as electronTrpc.external (client)
participant Main as Electron Main
User->>Renderer: Click PR icon / press Enter or Space
Renderer->>Renderer: stopPropagation(), handleKeyboard()
Renderer->>TRPC: mutation.openUrl({ url: pullRequest.url })
TRPC->>Main: IPC request to open external URL
Main->>Main: open external browser to pullRequest.url
Main-->>TRPC: IPC response
TRPC-->>Renderer: mutation result
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Poem
🚥 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 docstrings
🧪 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 |
Greptile SummaryThis PR replaces the host-type icon in the expanded dashboard sidebar row with a PR-state icon (open/merged/closed/draft) coloured by state when a PR exists, and removes the now-redundant bottom-right Confidence Score: 5/5Safe to merge; all remaining findings are minor cosmetic P2 suggestions. The logic is correct — all four PR states are handled, event propagation is stopped, the fallback host icon path is preserved, and the diff-stat colour change is intentional. The two inline comments are purely cosmetic (hover token visibility on active rows, and tooltip capitalisation); neither is a functional defect. No files require special attention. As a follow-up, DashboardSidebarWorkspaceStatusBadge (and its index.ts barrel) can be deleted since it is no longer imported anywhere.
|
| Filename | Overview |
|---|---|
| apps/desktop/src/renderer/routes/_authenticated/_dashboard/components/DashboardSidebar/components/DashboardSidebarWorkspaceItem/components/DashboardSidebarExpandedWorkspaceRow/DashboardSidebarExpandedWorkspaceRow.tsx | Replaces the host-type icon with a clickable PR-state icon (button) when a PR exists; removes the bottom-right StatusBadge; minor UX gap: hover state on the PR button is invisible when the row is active. |
| apps/desktop/src/renderer/routes/_authenticated/_dashboard/components/DashboardSidebar/components/DashboardSidebarWorkspaceItem/components/DashboardSidebarWorkspaceIcon/DashboardSidebarWorkspaceIcon.tsx | Adds pullRequestState prop and PR_ICON_BY_STATE/PR_COLOR_BY_STATE lookup tables; renames renderHostIcon → renderPrimaryIcon; logic is correct and all four PR states are handled. |
| apps/desktop/src/renderer/routes/_authenticated/_dashboard/components/DashboardSidebar/components/DashboardSidebarWorkspaceItem/components/DashboardSidebarWorkspaceDiffStats/DashboardSidebarWorkspaceDiffStats.tsx | Removes the conditional pill background and makes +/- text color conditional on isActive; cn import correctly removed; change matches the PR description. |
Prompt To Fix All With AI
This is a comment left during a code review.
Path: apps/desktop/src/renderer/routes/_authenticated/_dashboard/components/DashboardSidebar/components/DashboardSidebarWorkspaceItem/components/DashboardSidebarExpandedWorkspaceRow/DashboardSidebarExpandedWorkspaceRow.tsx
Line: 132
Comment:
**No hover feedback on active rows**
The PR icon button uses `hover:bg-muted`, but active rows already have `bg-muted` as their row background — so hovering the button on an active row produces no visual change. Consider using a slightly stronger hover token (e.g. `hover:bg-foreground/10`) so the button hitbox is still visible when the row is active.
```suggestion
className="relative mr-2.5 flex size-5 shrink-0 cursor-pointer items-center justify-center rounded hover:bg-foreground/10"
```
How can I resolve this? If you propose a fix, please make it concise.
---
This is a comment left during a code review.
Path: apps/desktop/src/renderer/routes/_authenticated/_dashboard/components/DashboardSidebar/components/DashboardSidebarWorkspaceItem/components/DashboardSidebarExpandedWorkspaceRow/DashboardSidebarExpandedWorkspaceRow.tsx
Line: 162-163
Comment:
**PR state displayed raw/lowercase in tooltip**
The tooltip renders `{pullRequest.state}` directly (e.g. "open", "closed", "draft"), which shows lowercase internal enum values to users. Consider capitalising or mapping these to human-friendly labels to match the polished copy used elsewhere in the UI (e.g. "Open", "Merged", "Closed", "Draft").
How can I resolve this? If you propose a fix, please make it concise.Reviews (1): Last reviewed commit: "feat(desktop): show PR state as sidebar ..." | Re-trigger Greptile
| openUrl.mutate(pullRequest.url); | ||
| }} | ||
| aria-label={`Open pull request #${pullRequest.number}`} | ||
| className="relative mr-2.5 flex size-5 shrink-0 cursor-pointer items-center justify-center rounded hover:bg-muted" |
There was a problem hiding this comment.
No hover feedback on active rows
The PR icon button uses hover:bg-muted, but active rows already have bg-muted as their row background — so hovering the button on an active row produces no visual change. Consider using a slightly stronger hover token (e.g. hover:bg-foreground/10) so the button hitbox is still visible when the row is active.
| className="relative mr-2.5 flex size-5 shrink-0 cursor-pointer items-center justify-center rounded hover:bg-muted" | |
| className="relative mr-2.5 flex size-5 shrink-0 cursor-pointer items-center justify-center rounded hover:bg-foreground/10" |
Prompt To Fix With AI
This is a comment left during a code review.
Path: apps/desktop/src/renderer/routes/_authenticated/_dashboard/components/DashboardSidebar/components/DashboardSidebarWorkspaceItem/components/DashboardSidebarExpandedWorkspaceRow/DashboardSidebarExpandedWorkspaceRow.tsx
Line: 132
Comment:
**No hover feedback on active rows**
The PR icon button uses `hover:bg-muted`, but active rows already have `bg-muted` as their row background — so hovering the button on an active row produces no visual change. Consider using a slightly stronger hover token (e.g. `hover:bg-foreground/10`) so the button hitbox is still visible when the row is active.
```suggestion
className="relative mr-2.5 flex size-5 shrink-0 cursor-pointer items-center justify-center rounded hover:bg-foreground/10"
```
How can I resolve this? If you propose a fix, please make it concise.| PR #{pullRequest.number} — {pullRequest.state} | ||
| </p> |
There was a problem hiding this comment.
PR state displayed raw/lowercase in tooltip
The tooltip renders {pullRequest.state} directly (e.g. "open", "closed", "draft"), which shows lowercase internal enum values to users. Consider capitalising or mapping these to human-friendly labels to match the polished copy used elsewhere in the UI (e.g. "Open", "Merged", "Closed", "Draft").
Prompt To Fix With AI
This is a comment left during a code review.
Path: apps/desktop/src/renderer/routes/_authenticated/_dashboard/components/DashboardSidebar/components/DashboardSidebarWorkspaceItem/components/DashboardSidebarExpandedWorkspaceRow/DashboardSidebarExpandedWorkspaceRow.tsx
Line: 162-163
Comment:
**PR state displayed raw/lowercase in tooltip**
The tooltip renders `{pullRequest.state}` directly (e.g. "open", "closed", "draft"), which shows lowercase internal enum values to users. Consider capitalising or mapping these to human-friendly labels to match the polished copy used elsewhere in the UI (e.g. "Open", "Merged", "Closed", "Draft").
How can I resolve this? If you propose a fix, please make it concise.Note: 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!
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (3)
apps/desktop/src/renderer/routes/_authenticated/_dashboard/components/DashboardSidebar/components/DashboardSidebarWorkspaceItem/components/DashboardSidebarWorkspaceDiffStats/DashboardSidebarWorkspaceDiffStats.tsx (1)
14-14: Minor: leftoverrounded px-1.5no longer serves a purpose.Now that the conditional background has been removed,
roundedandpx-1.5have no visual effect (no border, no background). Consider dropping them to keep the container classes honest, or keeppx-1.5only if you rely on the horizontal inset for layout.♻️ Proposed tidy-up
- className="flex h-5 w-fit shrink-0 items-center justify-self-end rounded px-1.5 text-[10px] font-mono tabular-nums transition-[opacity,visibility] group-hover:opacity-0 group-hover:invisible" + className="flex h-5 w-fit shrink-0 items-center justify-self-end text-[10px] font-mono tabular-nums transition-[opacity,visibility] group-hover:opacity-0 group-hover:invisible"🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/desktop/src/renderer/routes/_authenticated/_dashboard/components/DashboardSidebar/components/DashboardSidebarWorkspaceItem/components/DashboardSidebarWorkspaceDiffStats/DashboardSidebarWorkspaceDiffStats.tsx` at line 14, In DashboardSidebarWorkspaceDiffStats (the component in DashboardSidebarWorkspaceDiffStats.tsx) remove the now-unused Tailwind utilities "rounded" and "px-1.5" from the className string on the container since the conditional background was removed; if horizontal padding is required for layout keep only "px-1.5", otherwise drop both to keep the class list honest and minimal.apps/desktop/src/renderer/routes/_authenticated/_dashboard/components/DashboardSidebar/components/DashboardSidebarWorkspaceItem/components/DashboardSidebarExpandedWorkspaceRow/DashboardSidebarExpandedWorkspaceRow.tsx (1)
159-167: Consider formatting the raw PR state in the tooltip.
pullRequest.stateis rendered directly (e.g.PR#123— open/PR#123— draft). A capitalized/humanized form (Open,Draft,Merged,Closed) would read more naturally in a tooltip.✨ Proposed refactor
- <p className="text-xs font-medium"> - PR #{pullRequest.number} — {pullRequest.state} - </p> + <p className="text-xs font-medium"> + PR #{pullRequest.number} —{" "} + {pullRequest.state.charAt(0).toUpperCase() + + pullRequest.state.slice(1)} + </p>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/desktop/src/renderer/routes/_authenticated/_dashboard/components/DashboardSidebar/components/DashboardSidebarWorkspaceItem/components/DashboardSidebarExpandedWorkspaceRow/DashboardSidebarExpandedWorkspaceRow.tsx` around lines 159 - 167, The PR state is shown raw in DashboardSidebarExpandedWorkspaceRow as pullRequest.state; update the rendering to display a human-friendly, capitalized form (e.g., "Open", "Draft", "Merged", "Closed") instead of the raw lowercase; implement a small mapping or helper function (e.g., humanizePrState(state) or a STATE_LABELS map) and use it where pullRequest.state is interpolated so the tooltip and PR line show the humanized label.apps/desktop/src/renderer/routes/_authenticated/_dashboard/components/DashboardSidebar/components/DashboardSidebarWorkspaceItem/components/DashboardSidebarWorkspaceIcon/DashboardSidebarWorkspaceIcon.tsx (1)
34-46: UseLuGitPullRequestClosedfor improved icon semantics.
LuCircleDottypically represents open issues on GitHub rather than closed pull requests. UsingLuGitPullRequestClosedmakes the icon semantically accurate and more intuitive when paired with the red color state.🎨 Proposed refactor
import { - LuCircleDot, LuCloud, LuCloudOff, LuGitMerge, LuGitPullRequest, + LuGitPullRequestClosed, LuGitPullRequestDraft, } from "react-icons/lu"; @@ const PR_ICON_BY_STATE = { open: LuGitPullRequest, merged: LuGitMerge, - closed: LuCircleDot, + closed: LuGitPullRequestClosed, draft: LuGitPullRequestDraft, } as const;🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/desktop/src/renderer/routes/_authenticated/_dashboard/components/DashboardSidebar/components/DashboardSidebarWorkspaceItem/components/DashboardSidebarWorkspaceIcon/DashboardSidebarWorkspaceIcon.tsx` around lines 34 - 46, Replace the semantic mismatch in PR_ICON_BY_STATE by swapping LuCircleDot with LuGitPullRequestClosed: update the PR_ICON_BY_STATE mapping (and its import) so the "closed" key uses LuGitPullRequestClosed instead of LuCircleDot, keeping PR_COLOR_BY_STATE unchanged; ensure the new icon is imported where DashboardSidebarWorkspaceIcon is defined (replace or add the LuGitPullRequestClosed import and remove LuCircleDot if no longer used).
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In
`@apps/desktop/src/renderer/routes/_authenticated/_dashboard/components/DashboardSidebar/components/DashboardSidebarWorkspaceItem/components/DashboardSidebarExpandedWorkspaceRow/DashboardSidebarExpandedWorkspaceRow.tsx`:
- Around line 124-143: The PR icon's inner button only stops click propagation,
so keyboard activation still bubbles key events to the parent row's onKeyDown
(in DashboardSidebarExpandedWorkspaceRow) and triggers the workspace click; add
an onKeyDown handler to the button that calls event.stopPropagation() (and
optionally event.nativeEvent.stopImmediatePropagation() if needed) to prevent
the parent row's onKeyDown from running on Enter/Space key presses, ensuring
keyboard activation only opens the PR and does not activate the workspace.
---
Nitpick comments:
In
`@apps/desktop/src/renderer/routes/_authenticated/_dashboard/components/DashboardSidebar/components/DashboardSidebarWorkspaceItem/components/DashboardSidebarExpandedWorkspaceRow/DashboardSidebarExpandedWorkspaceRow.tsx`:
- Around line 159-167: The PR state is shown raw in
DashboardSidebarExpandedWorkspaceRow as pullRequest.state; update the rendering
to display a human-friendly, capitalized form (e.g., "Open", "Draft", "Merged",
"Closed") instead of the raw lowercase; implement a small mapping or helper
function (e.g., humanizePrState(state) or a STATE_LABELS map) and use it where
pullRequest.state is interpolated so the tooltip and PR line show the humanized
label.
In
`@apps/desktop/src/renderer/routes/_authenticated/_dashboard/components/DashboardSidebar/components/DashboardSidebarWorkspaceItem/components/DashboardSidebarWorkspaceDiffStats/DashboardSidebarWorkspaceDiffStats.tsx`:
- Line 14: In DashboardSidebarWorkspaceDiffStats (the component in
DashboardSidebarWorkspaceDiffStats.tsx) remove the now-unused Tailwind utilities
"rounded" and "px-1.5" from the className string on the container since the
conditional background was removed; if horizontal padding is required for layout
keep only "px-1.5", otherwise drop both to keep the class list honest and
minimal.
In
`@apps/desktop/src/renderer/routes/_authenticated/_dashboard/components/DashboardSidebar/components/DashboardSidebarWorkspaceItem/components/DashboardSidebarWorkspaceIcon/DashboardSidebarWorkspaceIcon.tsx`:
- Around line 34-46: Replace the semantic mismatch in PR_ICON_BY_STATE by
swapping LuCircleDot with LuGitPullRequestClosed: update the PR_ICON_BY_STATE
mapping (and its import) so the "closed" key uses LuGitPullRequestClosed instead
of LuCircleDot, keeping PR_COLOR_BY_STATE unchanged; ensure the new icon is
imported where DashboardSidebarWorkspaceIcon is defined (replace or add the
LuGitPullRequestClosed import and remove LuCircleDot if no longer used).
🪄 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: defaults
Review profile: CHILL
Plan: Pro
Run ID: c5c2e43f-bb21-4805-9aa1-67a831f41393
📒 Files selected for processing (3)
apps/desktop/src/renderer/routes/_authenticated/_dashboard/components/DashboardSidebar/components/DashboardSidebarWorkspaceItem/components/DashboardSidebarExpandedWorkspaceRow/DashboardSidebarExpandedWorkspaceRow.tsxapps/desktop/src/renderer/routes/_authenticated/_dashboard/components/DashboardSidebar/components/DashboardSidebarWorkspaceItem/components/DashboardSidebarWorkspaceDiffStats/DashboardSidebarWorkspaceDiffStats.tsxapps/desktop/src/renderer/routes/_authenticated/_dashboard/components/DashboardSidebar/components/DashboardSidebarWorkspaceItem/components/DashboardSidebarWorkspaceIcon/DashboardSidebarWorkspaceIcon.tsx
There was a problem hiding this comment.
1 issue found across 3 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="apps/desktop/src/renderer/routes/_authenticated/_dashboard/components/DashboardSidebar/components/DashboardSidebarWorkspaceItem/components/DashboardSidebarExpandedWorkspaceRow/DashboardSidebarExpandedWorkspaceRow.tsx">
<violation number="1" location="apps/desktop/src/renderer/routes/_authenticated/_dashboard/components/DashboardSidebar/components/DashboardSidebarWorkspaceItem/components/DashboardSidebarExpandedWorkspaceRow/DashboardSidebarExpandedWorkspaceRow.tsx:125">
P2: The PR button stops propagation only on `click`, but keyboard activation (Enter/Space) fires a `keydown` event that bubbles to the parent row's `onKeyDown` handler, which also calls `onClick()`. This means keyboard users will both open the PR URL and switch workspaces. Add an `onKeyDown` handler that stops propagation for Enter and Space.</violation>
</file>
Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.
- Stop keydown propagation on the PR icon button so keyboard activation (Enter/Space) does not also trigger the parent row's workspace click. - Use hover:bg-foreground/10 on the PR icon button so hover is visible even when the row is active (which already has bg-muted). - Humanize PR state in the icon tooltip (Open/Merged/Closed/Draft). - Drop the stale rounded class from the diff-stats container now that its background is gone. - Use LuGitPullRequestClosed instead of LuCircleDot for closed PRs.
There was a problem hiding this comment.
🧹 Nitpick comments (1)
apps/desktop/src/renderer/routes/_authenticated/_dashboard/components/DashboardSidebar/components/DashboardSidebarWorkspaceItem/components/DashboardSidebarWorkspaceIcon/DashboardSidebarWorkspaceIcon.tsx (1)
62-71: Minor: PR icon size differs from cloud/host icons.
size-3.5for the PR icon vssize-4forLuCloud/LuCloudOffwill cause a ~2px footprint shift when a row transitions between "no PR" and "has PR" states. If that's intentional for visual balance (PR glyphs are denser), feel free to ignore; otherwise consider unifying tosize-4to avoid layout jitter.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/desktop/src/renderer/routes/_authenticated/_dashboard/components/DashboardSidebar/components/DashboardSidebarWorkspaceItem/components/DashboardSidebarWorkspaceIcon/DashboardSidebarWorkspaceIcon.tsx` around lines 62 - 71, The PR icon in renderPrimaryIcon uses className "size-3.5" causing a footprint mismatch with the cloud icons (LuCloud/LuCloudOff) which use "size-4"; update the PR icon sizing to "size-4" for consistency by changing the className applied to the PrIcon in renderPrimaryIcon (referencing PR_ICON_BY_STATE and PR_COLOR_BY_STATE) so the PR glyph uses the same size class as the cloud icons and prevents layout jitter when toggling between PR/no-PR states.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In
`@apps/desktop/src/renderer/routes/_authenticated/_dashboard/components/DashboardSidebar/components/DashboardSidebarWorkspaceItem/components/DashboardSidebarWorkspaceIcon/DashboardSidebarWorkspaceIcon.tsx`:
- Around line 62-71: The PR icon in renderPrimaryIcon uses className "size-3.5"
causing a footprint mismatch with the cloud icons (LuCloud/LuCloudOff) which use
"size-4"; update the PR icon sizing to "size-4" for consistency by changing the
className applied to the PrIcon in renderPrimaryIcon (referencing
PR_ICON_BY_STATE and PR_COLOR_BY_STATE) so the PR glyph uses the same size class
as the cloud icons and prevents layout jitter when toggling between PR/no-PR
states.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 80356b31-b067-4ea7-ad7f-a375f694b7f4
📒 Files selected for processing (3)
apps/desktop/src/renderer/routes/_authenticated/_dashboard/components/DashboardSidebar/components/DashboardSidebarWorkspaceItem/components/DashboardSidebarExpandedWorkspaceRow/DashboardSidebarExpandedWorkspaceRow.tsxapps/desktop/src/renderer/routes/_authenticated/_dashboard/components/DashboardSidebar/components/DashboardSidebarWorkspaceItem/components/DashboardSidebarWorkspaceDiffStats/DashboardSidebarWorkspaceDiffStats.tsxapps/desktop/src/renderer/routes/_authenticated/_dashboard/components/DashboardSidebar/components/DashboardSidebarWorkspaceItem/components/DashboardSidebarWorkspaceIcon/DashboardSidebarWorkspaceIcon.tsx
✅ Files skipped from review due to trivial changes (1)
- apps/desktop/src/renderer/routes/_authenticated/_dashboard/components/DashboardSidebar/components/DashboardSidebarWorkspaceItem/components/DashboardSidebarWorkspaceDiffStats/DashboardSidebarWorkspaceDiffStats.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
- apps/desktop/src/renderer/routes/_authenticated/_dashboard/components/DashboardSidebar/components/DashboardSidebarWorkspaceItem/components/DashboardSidebarExpandedWorkspaceRow/DashboardSidebarExpandedWorkspaceRow.tsx
🧹 Preview Cleanup CompleteThe following preview resources have been cleaned up:
Thank you for your contribution! 🎉 |
Summary
+N -M) only colorize green/red when the workspace is active; inactive rows use muted text with no pill background.Test plan
+/-numbers and transparent background; active row has colored numbers.Summary by cubic
Show PR state as the workspace icon in the sidebar, color-coded by state, and open the PR on click. Removes the old PR badge and makes diff stats only colorize for the active workspace.
New Features
Bug Fixes
Written for commit 5955928. Summary will update on new commits.
Summary by CodeRabbit
New Features
UI Changes