Skip to content

fix(desktop): collapse v2 sidebar count + actions into one slot #3842

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Kitenite merged 11 commits into from
Apr 28, 2026
Merged

fix(desktop): collapse v2 sidebar count + actions into one slot #3842

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
1239735
fix(desktop): collapse v2 sidebar count + actions into one slot
Kitenite Apr 28, 2026
9990de3
fix(desktop): indent v2 sidebar group header to match workspace rows
Kitenite Apr 28, 2026
7851a1a
fix(desktop): ensure v2 sidebar group count is visible at rest
Kitenite Apr 28, 2026
cbe0537
fix(desktop): nudge group header indent below workspace level
Kitenite Apr 28, 2026
764e47a
fix(desktop): align v2 sidebar group header with project row spacing
Kitenite Apr 28, 2026
1a1ca41
fix(desktop): align v2 sidebar group header indent with workspace rows
Kitenite Apr 28, 2026
2b02355
fix(desktop): indent grouped workspaces deeper than ungrouped ones
Kitenite Apr 28, 2026
3373194
fix(desktop): address bot review on v2 sidebar count/action slot
Kitenite Apr 28, 2026
b4fa4df
fix(desktop): swap count/action via display instead of stacked opacity
Kitenite Apr 28, 2026
8ac6408
fix(desktop): swap thumbnail/chevron via display for project row cons…
Kitenite Apr 28, 2026
abc7700
fix(desktop): keep v2 sidebar count visible when row is self-focused
Kitenite Apr 28, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
66 changes: 34 additions & 32 deletions ...idebarProjectSection/components/DashboardSidebarProjectRow/DashboardSidebarProjectRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,17 +70,15 @@ export const DashboardSidebarProjectRow = forwardRef<
{...props}
>
<div className="flex min-w-0 flex-1 items-center gap-2 py-0.5">
<div className="relative shrink-0 size-5 flex items-center justify-center">
<span className="group-hover:opacity-0 transition-opacity duration-150">
<ProjectThumbnail
projectName={projectName}
githubOwner={githubOwner}
className="size-4"
/>
</span>
<div className="flex size-5 shrink-0 items-center justify-center">
<ProjectThumbnail
projectName={projectName}
githubOwner={githubOwner}
className="size-4 group-hover:hidden"
/>
<HiChevronRight
className={cn(
"absolute inset-0 m-auto size-4 text-muted-foreground opacity-0 group-hover:opacity-100 transition-all duration-150",
"hidden size-4 text-muted-foreground transition-transform group-hover:block",
!isCollapsed && "rotate-90",
)}
/>
Expand All @@ -96,31 +94,35 @@ export const DashboardSidebarProjectRow = forwardRef<
) : (
<span className="truncate">{projectName}</span>
)}
{!isRenaming && (
<span className="shrink-0 text-xs font-normal tabular-nums text-muted-foreground">
({totalWorkspaceCount})
</span>
)}
</div>

<Tooltip delayDuration={500}>
<TooltipTrigger asChild>
<button
type="button"
onClick={(event) => {
event.stopPropagation();
onNewWorkspace();
}}
onContextMenu={(event) => event.stopPropagation()}
className="p-1 rounded hover:bg-muted transition-colors shrink-0 ml-1"
>
<HiMiniPlus className="size-4 text-muted-foreground" />
</button>
</TooltipTrigger>
<TooltipContent side="bottom" sideOffset={4}>
New workspace
</TooltipContent>
</Tooltip>
{!isRenaming && (
<div className="ml-1 flex size-6 shrink-0 items-center justify-center">
<Tooltip delayDuration={500}>
<TooltipTrigger asChild>
<button
type="button"
onClick={(event) => {
event.stopPropagation();
onNewWorkspace();
}}
onKeyDown={(event) => event.stopPropagation()}
onContextMenu={(event) => event.stopPropagation()}
Comment thread
cubic-dev-ai[bot] marked this conversation as resolved.
aria-label="New workspace"
className="hidden size-full items-center justify-center rounded transition-colors hover:bg-muted group-hover:flex group-has-[:focus]:flex focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
>
Comment thread
coderabbitai[bot] marked this conversation as resolved.
<HiMiniPlus className="size-4 text-muted-foreground" />
</button>
</TooltipTrigger>
<TooltipContent side="bottom" sideOffset={4}>
New workspace
</TooltipContent>
</Tooltip>
<span className="text-[10px] font-normal tabular-nums text-muted-foreground group-hover:hidden group-has-[:focus]:hidden">
{totalWorkspaceCount}
</span>
</div>
)}
</div>
);
},
Expand Down
41 changes: 24 additions & 17 deletions ...SidebarSection/components/DashboardSidebarSectionHeader/DashboardSidebarSectionHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,13 +58,13 @@ export const DashboardSidebarSectionHeader = forwardRef<
}
}
className={cn(
"group flex min-h-8 w-full items-center pl-0.5 pr-2 py-1.5 text-[13px] font-medium",
"group flex min-h-8 w-full items-center pl-5 pr-2 py-1.5 text-[13px] font-medium",
"text-muted-foreground hover:bg-muted/50 transition-colors",
className,
)}
{...props}
>
<div className="grid h-5 w-5 shrink-0 cursor-grab items-center justify-center active:cursor-grabbing [&>*]:col-start-1 [&>*]:row-start-1">
<div className="mr-2 grid h-5 w-5 shrink-0 cursor-grab items-center justify-center active:cursor-grabbing [&>*]:col-start-1 [&>*]:row-start-1">
<HiChevronRight
className={cn(
"size-3 text-muted-foreground transition-[opacity,transform] duration-150 group-hover:opacity-0",
Expand All @@ -86,24 +86,31 @@ export const DashboardSidebarSectionHeader = forwardRef<
) : (
<span className="truncate">{section.name}</span>
)}

{!isRenaming && (
<span className="shrink-0 text-[10px] font-normal tabular-nums">
({section.workspaces.length})
</span>
)}
</div>

{!isRenaming && actions ? (
// biome-ignore lint/a11y/noStaticElementInteractions: Nested action controls handle their own semantics; this wrapper only isolates events from the header toggle.
<div
className="flex items-center"
onClick={(event) => event.stopPropagation()}
onKeyDown={(event) => event.stopPropagation()}
>
{actions}
{!isRenaming && (
<div className="ml-1 flex size-5 shrink-0 items-center justify-center">
{actions ? (
// biome-ignore lint/a11y/noStaticElementInteractions: Nested action controls handle their own semantics; this wrapper only isolates events from the header toggle.
<div
className="peer hidden size-full items-center justify-center group-hover:flex group-has-[:focus]:flex has-[[data-state=open]]:flex"
Copy link
Copy Markdown
Contributor

@cubic-dev-ai cubic-dev-ai Bot Apr 28, 2026

Choose a reason for hiding this comment

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

P2: Using group-has-[:focus] here breaks keyboard reveal when the header itself is focused; keep group-focus-within so actions become reachable via Tab.

Prompt for AI agents 
Check if this issue is valid — if so, understand the root cause and fix it. At apps/desktop/src/renderer/routes/_authenticated/_dashboard/components/DashboardSidebar/components/DashboardSidebarSection/components/DashboardSidebarSectionHeader/DashboardSidebarSectionHeader.tsx, line 96:

<comment>Using `group-has-[:focus]` here breaks keyboard reveal when the header itself is focused; keep `group-focus-within` so actions become reachable via Tab.</comment>

<file context>
@@ -93,7 +93,7 @@ export const DashboardSidebarSectionHeader = forwardRef<
 							// biome-ignore lint/a11y/noStaticElementInteractions: Nested action controls handle their own semantics; this wrapper only isolates events from the header toggle.
 							<div
-								className="peer hidden size-full items-center justify-center group-hover:flex group-focus-within:flex has-[[data-state=open]]:flex"
+								className="peer hidden size-full items-center justify-center group-hover:flex group-has-[:focus]:flex has-[[data-state=open]]:flex"
 								onClick={(event) => event.stopPropagation()}
 								onKeyDown={(event) => event.stopPropagation()}
</file context>
Suggested change
className="peer hidden size-full items-center justify-center group-hover:flex group-has-[:focus]:flex has-[[data-state=open]]:flex"
className="peer hidden size-full items-center justify-center group-hover:flex group-focus-within:flex has-[[data-state=open]]:flex"

onClick={(event) => event.stopPropagation()}
onKeyDown={(event) => event.stopPropagation()}
>
{actions}
</div>
) : null}
<span
className={cn(
"text-[10px] font-normal tabular-nums text-muted-foreground",
actions &&
"group-hover:hidden group-has-[:focus]:hidden peer-has-[[data-state=open]]:hidden",
)}
>
{section.workspaces.length}
</span>
</div>
) : null}
)}
</div>
);
},
Expand Down
1 change: 1 addition & 0 deletions ...shboardSidebar/components/DashboardSidebarWorkspaceItem/DashboardSidebarWorkspaceItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -222,6 +222,7 @@ export function DashboardSidebarWorkspaceItem({
shortcutLabel={shortcutLabel}
diffStats={isPending ? null : diffStats}
workspaceStatus={workspaceStatus}
isInSection={isInSection}
onClick={isPending ? handlePendingClick : handleClick}
onDoubleClick={isPending ? undefined : startRename}
onRemoveFromSidebarClick={handleRemoveFromSidebar}
Expand Down
5 changes: 4 additions & 1 deletion .../components/DashboardSidebarExpandedWorkspaceRow/DashboardSidebarExpandedWorkspaceRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@ interface DashboardSidebarExpandedWorkspaceRowProps
shortcutLabel?: string;
diffStats: DiffStats | null;
workspaceStatus?: ActivePaneStatus | null;
isInSection?: boolean;
onClick?: () => void;
onDoubleClick?: () => void;
onCloseWorkspaceClick: () => void;
Expand All @@ -62,6 +63,7 @@ export const DashboardSidebarExpandedWorkspaceRow = forwardRef<
shortcutLabel,
diffStats,
workspaceStatus = null,
isInSection = false,
onClick,
onDoubleClick,
onCloseWorkspaceClick,
Expand Down Expand Up @@ -128,7 +130,8 @@ export const DashboardSidebarExpandedWorkspaceRow = forwardRef<
}}
onDoubleClick={onDoubleClick}
className={cn(
"relative flex w-full items-center pl-5 pr-2 text-left text-sm",
"relative flex w-full items-center pr-2 text-left text-sm",
isInSection ? "pl-7" : "pl-5",
onClick &&
(isActive
? "cursor-pointer hover:bg-muted"
Expand Down
Loading