Skip to content

feat(desktop): indent workspaces under projects in v2 sidebar#3835

Merged
Kitenite merged 1 commit intomainfrom
indent-workspaces-sidebar
Apr 28, 2026
Merged

feat(desktop): indent workspaces under projects in v2 sidebar#3835
Kitenite merged 1 commit intomainfrom
indent-workspaces-sidebar

Conversation

@Kitenite
Copy link
Copy Markdown
Collaborator

@Kitenite Kitenite commented Apr 28, 2026

Summary

  • Adds left padding (pl-3pl-5) to the v2 sidebar workspace row so workspaces visually nest under their parent project.

Test plan

  • Open the v2 desktop sidebar and confirm workspaces sit indented relative to the project header
  • Confirm workspaces inside sections still look correct
  • Confirm active/hover/drag styles still render correctly

Summary by cubic

Indents workspace rows under their parent project in the v2 desktop sidebar by increasing left padding from pl-3 to pl-5 for clearer hierarchy.

Written for commit 9983b45. Summary will update on new commits. Review in cubic

Summary by CodeRabbit

  • Style
    • Adjusted left padding in the dashboard sidebar's workspace section for improved visual spacing and layout alignment.

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented Apr 28, 2026

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 43cd7258-09c4-4b68-819c-4deb7744ab5b

📥 Commits

Reviewing files that changed from the base of the PR and between 89285e4 and 9983b45.

📒 Files selected for processing (1)
  • apps/desktop/src/renderer/routes/_authenticated/_dashboard/components/DashboardSidebar/components/DashboardSidebarWorkspaceItem/components/DashboardSidebarExpandedWorkspaceRow/DashboardSidebarExpandedWorkspaceRow.tsx

📝 Walkthrough

Walkthrough

A left padding value is increased from pl-3 to pl-5 in the DashboardSidebarExpandedWorkspaceRow component's main row container, adjusting the horizontal spacing of the element within its layout.

Changes

Cohort / File(s) Summary
Layout Spacing Adjustment
apps/desktop/src/renderer/routes/_authenticated/_dashboard/components/DashboardSidebar/components/DashboardSidebarWorkspaceItem/components/DashboardSidebarExpandedWorkspaceRow/DashboardSidebarExpandedWorkspaceRow.tsx
Increased left padding from pl-3 to pl-5 on the main clickable row container for adjusted horizontal spacing.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

Poem

🐰 A hop to the right, a shift in the space,
Where padding grows wider, more breathing place,
One line, one change, so simple and neat,
The sidebar now dances with prettier feet! ✨

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Title check ✅ Passed The title accurately summarizes the main change: increasing workspace indentation in the v2 sidebar to nest them under projects.
Description check ✅ Passed The description includes a clear summary of the change, a test plan, and sufficient context despite missing some optional template sections.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch indent-workspaces-sidebar

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.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@greptile-apps
Copy link
Copy Markdown

greptile-apps Bot commented Apr 28, 2026

Greptile Summary

This PR increases the left padding of the expanded workspace row in the v2 desktop sidebar from pl-3 to pl-5, creating a visual indentation that nests workspaces under their parent project header. The change is isolated to a single Tailwind class on the outermost div of DashboardSidebarExpandedWorkspaceRow; the absolutely-positioned active-stripe (left-0) is unaffected by padding and will continue to render at the row's left edge.

Confidence Score: 5/5

Safe to merge — single Tailwind padding change with no logic impact.

The entire diff is a one-character Tailwind class change (pl-3pl-5). No logic, state, or accessibility properties are altered. The absolutely-positioned active stripe remains unaffected. No P1 or P0 findings.

No files require special attention.

Important Files Changed

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]
Loading

Reviews (1): Last reviewed commit: "feat(desktop): indent workspaces under p..." | Re-trigger Greptile

Copy link
Copy Markdown
Contributor

@cubic-dev-ai cubic-dev-ai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No issues found across 1 file

@Kitenite Kitenite merged commit 725c633 into main Apr 28, 2026
7 checks passed
@Kitenite Kitenite deleted the indent-workspaces-sidebar branch April 28, 2026 18:14
@github-actions
Copy link
Copy Markdown
Contributor

🧹 Preview Cleanup Complete

The following preview resources have been cleaned up:

  • ⚠️ Neon database branch

Thank you for your contribution! 🎉

Kitenite added a commit that referenced this pull request Apr 28, 2026
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.
Kitenite added a commit that referenced this pull request Apr 28, 2026
* 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.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant