From 83091ceb4c942c4bd014cd5d7a9619b82d2df574 Mon Sep 17 00:00:00 2001 From: i-trytoohard Date: Sat, 20 Jun 2026 21:17:39 +0530 Subject: [PATCH] fix(sidebar): always show project row action icons (#346) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix(sidebar): always show project row action icons The hover-reveal mechanism (opacity-0 → group-hover/menu-item:opacity-100) was not reliably triggering in the Electron app — icons never appeared on hover. Instead of debugging CSS :hover group propagation in Chromium, make the action icons always visible. Changes: - Remove opacity-0/opacity-100 hover gating from the action cluster div - Change button padding from hover-gated pr-[84px] to always pr-[84px] - Hide the session count badge (it was only shown when icons were hidden) - Keep z-10 on the action cluster so session rows don't paint over it Reported by phylolver(vaibhaav). * fix(sidebar): correct inverted collapsed-count class The count badge was set to hidden-by-default but shown-as-grid in collapsed/icon mode — the opposite of correct. In icon mode there's no room for a count badge and the action cluster is hidden anyway. Since the action icons are now always visible and permanently replace the count, the badge should be hidden in all states. Reported by phylolver(vaibhaav). --------- Co-authored-by: AO Bot --- .../src/renderer/components/Sidebar.test.tsx | 11 +++-------- frontend/src/renderer/components/Sidebar.tsx | 17 +++++++---------- 2 files changed, 10 insertions(+), 18 deletions(-) diff --git a/frontend/src/renderer/components/Sidebar.test.tsx b/frontend/src/renderer/components/Sidebar.test.tsx index 37ec61def..0ff3b2dc1 100644 --- a/frontend/src/renderer/components/Sidebar.test.tsx +++ b/frontend/src/renderer/components/Sidebar.test.tsx @@ -97,18 +97,13 @@ describe("Sidebar", () => { expect(navigateMock).toHaveBeenCalledWith({ to: "/projects/$projectId", params: { projectId: "proj-1" } }); }); - it("hides the worker count in every state that reveals project actions", () => { + it("always shows action icons and reserves padding for them", () => { renderSidebar(); const projectRow = screen.getByText("Project One").closest("button"); - const count = screen.getByText("0"); if (!projectRow) throw new Error("Project row button not found"); - expect(projectRow).toHaveClass("group-hover/menu-item:pr-[84px]"); - expect(projectRow).toHaveClass("group-focus-within/menu-item:pr-[84px]"); - expect(projectRow).toHaveClass("group-has-data-[state=open]/menu-item:pr-[84px]"); - expect(count).toHaveClass("group-hover/menu-item:opacity-0"); - expect(count).toHaveClass("group-focus-within/menu-item:opacity-0"); - expect(count).toHaveClass("group-has-data-[state=open]/menu-item:opacity-0"); + // Padding is always reserved for the action cluster (not hover-gated) + expect(projectRow).toHaveClass("pr-[84px]"); }); }); diff --git a/frontend/src/renderer/components/Sidebar.tsx b/frontend/src/renderer/components/Sidebar.tsx index a218649da..dff796291 100644 --- a/frontend/src/renderer/components/Sidebar.tsx +++ b/frontend/src/renderer/components/Sidebar.tsx @@ -465,10 +465,9 @@ function ProjectItem({ "before:absolute before:top-2 before:bottom-2 before:left-0 before:w-px before:rounded-full before:bg-transparent", "hover:bg-interactive-hover hover:text-foreground active:bg-interactive-hover active:text-foreground", "data-[active=true]:bg-interactive-active data-[active=true]:font-semibold data-[active=true]:text-foreground data-[active=true]:before:bg-accent", - // Make room for the hover actions (dashboard, orchestrator, kebab) - // when the row is hovered, focused, or its menu is open (the - // absolutely-positioned cluster replaces the count). - "group-hover/menu-item:pr-[84px] group-focus-within/menu-item:pr-[84px] group-has-data-[state=open]/menu-item:pr-[84px]", + // Always reserve room for the action cluster (dashboard, + // orchestrator, kebab) — icons are always visible, not hover-gated. + "pr-[84px]", // Icon rail: the old 36px letter tile. "group-data-[collapsible=icon]:size-9! group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:rounded-lg group-data-[collapsible=icon]:p-0! group-data-[collapsible=icon]:font-semibold", )} @@ -483,18 +482,16 @@ function ProjectItem({ /> {workspace.name.charAt(0).toUpperCase()} {workspace.name} - + {sessions.length} - {/* Per-project hover actions: dashboard board, orchestrator, and a kebab - menu. The cluster reveals on row hover/focus (or while the kebab is - open), replacing the session count, and stays hidden in the icon rail. */} + {/* Per-project actions: dashboard board, orchestrator, and a kebab + menu. Always visible (not hover-gated) to avoid CSS :hover group + propagation issues in Electron's Chromium. Hidden in the icon rail. */}