From 439c03749182495ee09f85a73423dd17e7ccda61 Mon Sep 17 00:00:00 2001
From: Wes <wesbillman@users.noreply.github.com>
Date: Mon, 17 Aug 2026 15:49:31 -0600
Subject: [PATCH] fix(desktop): align preview sidebar row styling (#6163)

## Summary

- apply the inactive primary-navigation opacity treatment to every
sidebar destination, including Pulse, Projects, and Workflows
- remove the duplicated Inbox and Agents conditionals so future gated
rows inherit the same hierarchy
- add E2E coverage for all inactive rows and restoration to full opacity
when selected

## Validation

- `pnpm --dir desktop build:e2e`
- `pnpm --dir desktop exec playwright test badge.spec.ts --grep "primary
navigation rows share the same inactive emphasis" --project=smoke`
- pre-push hook: desktop check, typecheck, and 4,984 unit tests

Signed-off-by: Wes <wesbillman@users.noreply.github.com>
Co-authored-by: Carl <c7ebe626f000404285d3686e1dc74cc07cc60a9754a150041ba132e14bd3e2ec@buzz.block.builderlab.xyz>
---
 .../sidebar/ui/AppSidebarPinnedHeader.tsx     | 26 +++-----------
 .../src/shared/styles/globals/components.css  |  9 +++++
 desktop/tests/e2e/badge.spec.ts               | 34 +++++++++++++++++++
 3 files changed, 48 insertions(+), 21 deletions(-)

diff --git a/desktop/src/features/sidebar/ui/AppSidebarPinnedHeader.tsx b/desktop/src/features/sidebar/ui/AppSidebarPinnedHeader.tsx
index 4a618fcf0a..3631af15c9 100644
--- a/desktop/src/features/sidebar/ui/AppSidebarPinnedHeader.tsx
+++ b/desktop/src/features/sidebar/ui/AppSidebarPinnedHeader.tsx
@@ -101,7 +101,7 @@ export function AppSidebarPrimaryMenu({
       data-tauri-drag-region
       data-testid="sidebar-primary-menu"
     >
-      <SidebarMenu className="pb-2">
+      <SidebarMenu className="sidebar-primary-menu pb-2">
         <SidebarMenuItem>
           <SidebarMenuButton
             className="data-[active=true]:font-normal"
@@ -110,16 +110,8 @@ export function AppSidebarPrimaryMenu({
             tooltip="Inbox"
             type="button"
           >
-            <Inbox
-              className={
-                selectedView !== "home" ? "h-4 w-4 opacity-80" : "h-4 w-4"
-              }
-            />
-            <SidebarMenuLabel
-              className={selectedView !== "home" ? "opacity-80" : undefined}
-            >
-              Inbox
-            </SidebarMenuLabel>
+            <Inbox className="h-4 w-4" />
+            <SidebarMenuLabel>Inbox</SidebarMenuLabel>
           </SidebarMenuButton>
           {homeBadgeCount > 0 ? (
             <SidebarMenuBadge
@@ -167,16 +159,8 @@ export function AppSidebarPrimaryMenu({
             tooltip="Agents"
             type="button"
           >
-            <Bot
-              className={
-                selectedView !== "agents" ? "h-4 w-4 opacity-80" : "h-4 w-4"
-              }
-            />
-            <SidebarMenuLabel
-              className={selectedView !== "agents" ? "opacity-80" : undefined}
-            >
-              Agents
-            </SidebarMenuLabel>
+            <Bot className="h-4 w-4" />
+            <SidebarMenuLabel>Agents</SidebarMenuLabel>
           </SidebarMenuButton>
         </SidebarMenuItem>
         <FeatureGate feature="workflows">
diff --git a/desktop/src/shared/styles/globals/components.css b/desktop/src/shared/styles/globals/components.css
index 172c1b180c..f206539a93 100644
--- a/desktop/src/shared/styles/globals/components.css
+++ b/desktop/src/shared/styles/globals/components.css
@@ -1,4 +1,13 @@
 @layer components {
+  /* Primary navigation rows share one inactive hierarchy, including preview
+   * features that can appear between the permanent destinations. Keeping the
+   * treatment on the menu prevents newly gated rows from silently rendering
+   * at stronger emphasis than Inbox and Agents. */
+  .sidebar-primary-menu [data-sidebar="menu-button"]:not([data-active="true"])
+    > :is(svg, [data-sidebar="menu-label"]) {
+    opacity: 0.8;
+  }
+
   .buzz-side-panel-enter {
     animation: buzz-side-panel-enter 260ms cubic-bezier(0.32, 0.72, 0, 1) both;
     transform-origin: right center;
diff --git a/desktop/tests/e2e/badge.spec.ts b/desktop/tests/e2e/badge.spec.ts
index 98bb2dadef..f1b618b0d6 100644
--- a/desktop/tests/e2e/badge.spec.ts
+++ b/desktop/tests/e2e/badge.spec.ts
@@ -105,6 +105,40 @@ test("selected Inbox and Agents rows keep their highlight without bold text", as
   await expect(agents).toHaveCSS("font-weight", "400");
 });
 
+test("primary navigation rows share the same inactive emphasis", async ({
+  page,
+}) => {
+  await page.goto("/");
+  await page.getByTestId("channel-general").click();
+
+  const primaryMenu = page.getByTestId("sidebar-primary-menu");
+  const inactiveRows = [
+    primaryMenu.getByRole("button", { name: "Inbox", exact: true }),
+    page.getByTestId("open-pulse-view"),
+    page.getByTestId("open-projects-view"),
+    page.getByTestId("open-agents-view"),
+    page.getByTestId("open-workflows-view"),
+  ];
+
+  for (const row of inactiveRows) {
+    await expect(row).toHaveAttribute("data-active", "false");
+    await expect(row.locator("[data-sidebar=menu-label]")).toHaveCSS(
+      "opacity",
+      "0.8",
+    );
+    await expect(row.locator("svg")).toHaveCSS("opacity", "0.8");
+  }
+
+  const pulse = page.getByTestId("open-pulse-view");
+  await pulse.click();
+  await expect(pulse).toHaveAttribute("data-active", "true");
+  await expect(pulse.locator("[data-sidebar=menu-label]")).toHaveCSS(
+    "opacity",
+    "1",
+  );
+  await expect(pulse.locator("svg")).toHaveCSS("opacity", "1");
+});
+
 test("hovering a channel keeps its text color", async ({ page }) => {
   await page.goto("/");
   const channel = page.getByTestId("channel-engineering");