feat(desktop): indent workspaces under projects in v2 sidebar#3835
feat(desktop): indent workspaces under projects in v2 sidebar#3835
Conversation
|
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)
📝 WalkthroughWalkthroughA left padding value is increased from Changes
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~2 minutes Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 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 increases the left padding of the expanded workspace row in the v2 desktop sidebar from Confidence Score: 5/5Safe to merge — single Tailwind padding change with no logic impact. The entire diff is a one-character Tailwind class change ( No files require special attention.
|
| Filename | Overview |
|---|---|
| apps/desktop/src/renderer/routes/_authenticated/_dashboard/components/DashboardSidebar/components/DashboardSidebarWorkspaceItem/components/DashboardSidebarExpandedWorkspaceRow/DashboardSidebarExpandedWorkspaceRow.tsx | Single-line Tailwind change: left padding on the workspace row increased from pl-3 (12px) to pl-5 (20px) to visually nest workspaces under their parent project header in the v2 sidebar. |
Flowchart
%%{init: {'theme': 'neutral'}}%%
flowchart TD
A[DashboardSidebar] --> B[DashboardSidebarWorkspaceItem]
B --> C[DashboardSidebarExpandedWorkspaceRow]
C --> D["Outer div\npl-3 → pl-5 (this PR)"]
D --> E[Active stripe\nabsolute left-0\nunaffected by padding]
D --> F[Workspace icon\n+ name label]
D --> G[Action buttons\nclose / remove]
Reviews (1): Last reviewed commit: "feat(desktop): indent workspaces under p..." | Re-trigger Greptile
🧹 Preview Cleanup CompleteThe following preview resources have been cleaned up:
Thank you for your contribution! 🎉 |
Sections sat at pl-0.5 while workspaces under them were at pl-5 (from #3835). The section header now reads as if it's at the same level as the project row instead of grouping the workspaces beneath it. Bump the header to pl-5 so groups align with their workspaces under the project.
* fix(desktop): collapse v2 sidebar count + actions into one slot In the project row and section header, the workspace count sat next to the title and the action button (new-workspace "+" / section-actions ellipsis) lived as a separate end-aligned control. The actions were hidden until hover, but the count was always visible — so the right edge had two competing elements at different times. Put count and action in the same slot at the row's end: count visible at rest, action overlays it on hover/focus. Drops the parens around the count and shrinks the project-row count from text-xs to text-[10px] to match the section header. Builds on the v2 sidebar work in #3813 (cc @saddlepaddle). * fix(desktop): indent v2 sidebar group header to match workspace rows Sections sat at pl-0.5 while workspaces under them were at pl-5 (from #3835). The section header now reads as if it's at the same level as the project row instead of grouping the workspaces beneath it. Bump the header to pl-5 so groups align with their workspaces under the project. * fix(desktop): ensure v2 sidebar group count is visible at rest The count span sat in DOM order before the absolute action wrapper, so the wrapper rendered on top of it. Even with the action button at opacity-0, the wrapper could swallow hover/focus that should belong to the count. Render the action wrapper first, the count after with relative positioning so it's the top layer, and add pointer-events-none so the action's hover target stays clean. Also pin text-muted-foreground explicitly to match the project row. * fix(desktop): nudge group header indent below workspace level Section was matching workspace at pl-5, which read as 'sibling' instead of 'parent'. Drop to pl-4 so the group sits one notch shallower than its workspaces. * fix(desktop): align v2 sidebar group header with project row spacing Bring the section header to pl-3 (matches project row) and add mr-2 between the chevron/grip slot and the title so the icon-to-text gap mirrors the project row's gap-2. * fix(desktop): align v2 sidebar group header indent with workspace rows Move section header from pl-3 to pl-5 so its chevron/grip aligns with the workspace icon column underneath it. * fix(desktop): indent grouped workspaces deeper than ungrouped ones Workspaces inside a section share the same pl-5 indent as ungrouped workspaces, so the section nesting reads flat. Plumb the existing isInSection prop through to the row and bump grouped workspaces from pl-5 to pl-7. * fix(desktop): address bot review on v2 sidebar count/action slot Three valid points from PR review: - Project row "+" button: Enter/Space keydown bubbles to the row's collapse handler before the synthesized click fires. Add onKeyDown stopPropagation so keyboard activation doesn't toggle the row. - Project row "+" overlay: opacity-0 doesn't disable pointer events, so clicking the count area at rest can accidentally create a workspace. Add pointer-events-none at rest, re-enable on hover / focus-within / focus-visible. - Section header count: the fade-on-hover ran unconditionally, but the action overlay only renders when actions is truthy. When actions is absent the slot would go blank on hover. Gate the fade classes on actions. * fix(desktop): swap count/action via display instead of stacked opacity Replaced the opacity layering (count opacity-0 + action opacity-100 on hover, with pointer-events-none gating to keep the count clickable) with a true display swap. Only one of the two is rendered at a time, so the count slot is never a transparent ghost over the button. For the section header, the dropdown trigger has data-state=open when its menu is open, which can persist after the row loses hover/focus. The action wrapper now stays visible via has-[[data-state=open]]:flex, and the count hides via peer-has-[[data-state=open]]:hidden so the open state still wins over the count. * fix(desktop): swap thumbnail/chevron via display for project row consistency The thumbnail-at-rest / chevron-on-hover swap at the start of the project row was still using stacked opacities while the count/action slot at the row's end now uses display swap. Convert the icon slot to match — thumbnail is hidden on group-hover, chevron is hidden by default and shown on group-hover. One pattern across the row. * fix(desktop): keep v2 sidebar count visible when row is self-focused Project and section rows are role=button tabIndex=0, so clicking them (e.g., to collapse a section) gives the row itself :focus. group-focus-within matches that self-focus, which made the count hide and stay hidden — most visibly when collapsing a section that contains the active workspace: the user clicks the header, focus stays on it, and the count never returns until they click somewhere else. Switch to group-has-[:focus]: it only matches when a *descendant* has focus (e.g., the rename input or the dropdown trigger), not when the row itself is focused. Same swap on the action wrapper / + button so the action only appears when the user actually focuses into the row's interactive bits.
Summary
pl-3→pl-5) to the v2 sidebar workspace row so workspaces visually nest under their parent project.Test plan
Summary by cubic
Indents workspace rows under their parent project in the v2 desktop sidebar by increasing left padding from
pl-3topl-5for clearer hierarchy.Written for commit 9983b45. Summary will update on new commits. Review in cubic
Summary by CodeRabbit