From d37c04c82cdfd5f726a09edf977bc29232f52cf8 Mon Sep 17 00:00:00 2001
From: Jinjing <6427696+AmethystLiang@users.noreply.github.com>
Date: Sun, 25 Oct 2026 16:45:52 -0700
Subject: [PATCH] Fix notification bell layout (#33683)

* Fix notification bell layout and isolate Vite tsconfig resolution

* Move Vite tsconfig fix out of notification bell PR
---
 .../src/components/sidebar/SidebarHeader.tsx  | 13 +++++-----
 .../sidebar-activity-status-layout.spec.ts    | 24 +++++++++++++++----
 2 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/src/renderer/src/components/sidebar/SidebarHeader.tsx b/src/renderer/src/components/sidebar/SidebarHeader.tsx
index 3195e76cbc0..5c854e5c5d0 100644
--- a/src/renderer/src/components/sidebar/SidebarHeader.tsx
+++ b/src/renderer/src/components/sidebar/SidebarHeader.tsx
@@ -84,22 +84,23 @@ const SidebarHeader = React.memo(function SidebarHeader({
                     variant="ghost"
                     size="icon-xs"
                     className={cn(
-                      'text-muted-foreground',
-                      agentsViewActive && 'bg-primary/15 text-primary hover:bg-primary/20'
+                      'w-8 text-muted-foreground',
+                      agentsViewActive &&
+                        'bg-foreground/10 text-foreground hover:bg-foreground/15 dark:hover:bg-foreground/15'
                     )}
                     aria-label={activityLabel}
                     aria-pressed={agentsViewActive}
                     aria-describedby={activityBadgeId}
                     onClick={() => setSidebarBody?.(agentsViewActive ? 'workspaces' : 'agents')}
                   >
-                    <span className="relative size-6 shrink-0">
-                      <Bell className="absolute left-0 top-1.5 size-3" />
+                    <span className="relative h-5 w-6 shrink-0">
+                      <Bell className="absolute left-0 top-1 size-3" />
                       <span
                         className="pointer-events-none absolute inset-0"
                         id={activityBadgeId}
                         aria-label={`${activityStatusLabel}: ${activityCount}`}
                       >
-                        <span className="absolute right-0 top-px flex h-2 w-3 items-center justify-center">
+                        <span className="absolute right-0 top-0 flex h-2 w-3 items-center justify-center">
                           {counts.attention > 0 ? (
                             <AgentQuestionIcon className="size-2" />
                           ) : (
@@ -111,7 +112,7 @@ const SidebarHeader = React.memo(function SidebarHeader({
                             />
                           )}
                         </span>
-                        <span className="absolute right-0 top-3 flex h-2.5 w-3 items-center justify-center">
+                        <span className="absolute right-0 top-2.5 flex h-2.5 w-3 items-center justify-center">
                           <span
                             className={cn(
                               'icon-superscript-count',
diff --git a/tests/e2e/sidebar-activity-status-layout.spec.ts b/tests/e2e/sidebar-activity-status-layout.spec.ts
index 9b4b3029fe7..05f85230c5d 100644
--- a/tests/e2e/sidebar-activity-status-layout.spec.ts
+++ b/tests/e2e/sidebar-activity-status-layout.spec.ts
@@ -16,6 +16,7 @@ type CountTypography = {
 const CASES = [
   { state: 'idle', count: 0 },
   { state: 'working', count: 1 },
+  { state: 'working', count: 4 },
   { state: 'working', count: 12 },
   { state: 'working', count: 88 },
   { state: 'working', count: 99 },
@@ -122,7 +123,7 @@ async function expectActivityGeometry(
     }
   })
 
-  expect(geometry.button.width, 'The control must keep its existing width').toBe(24)
+  expect(geometry.button.width, 'The control must leave room for horizontal padding').toBe(32)
   expect(geometry.button.height, 'The control must keep its existing height').toBe(24)
   expect(
     Math.abs(geometry.status.centerX - geometry.count.centerX),
@@ -131,14 +132,14 @@ async function expectActivityGeometry(
   expect(geometry.status.bottom, 'The status must clear the count').toBeLessThanOrEqual(
     geometry.countLineBox.top + 0.25
   )
-  expect(geometry.bell.left, 'The bell must retain its left anchor').toBe(geometry.button.left)
+  expect(geometry.bell.left, 'The bell must have horizontal padding').toBe(geometry.button.left + 4)
   expect(geometry.bell.top, 'The bell must retain its vertical position').toBe(
     geometry.button.top + 6
   )
   expect(geometry.bell.width, 'The bell must retain its existing size').toBe(12)
   expect(geometry.bell.height, 'The bell must retain its existing size').toBe(12)
   expect(geometry.countSlot.centerX, 'The count slot must retain its side column').toBe(
-    geometry.button.right - 6
+    geometry.button.right - 10
   )
   expect(geometry.count.width, 'The count text must be rendered').toBeGreaterThan(0)
   expect(geometry.count.width, 'Keep wider digits within a slight overhang').toBeLessThanOrEqual(
@@ -182,7 +183,7 @@ async function expectActivityGeometry(
 for (const theme of ['dark', 'light'] as const) {
   test(`activity side-column counts align with their status and preserve the control size (${theme})`, async ({
     orcaPage
-  }) => {
+  }, testInfo) => {
     await waitForSessionReady(orcaPage)
     const worktreeId = await waitForActiveWorktree(orcaPage)
     await orcaPage.evaluate(
@@ -245,6 +246,20 @@ for (const theme of ['dark', 'light'] as const) {
         name: sidebarBody === 'agents' ? 'Turn off activity view' : 'View activity',
         exact: true
       })
+      await expect(button).toHaveAttribute('aria-pressed', String(sidebarBody === 'agents'))
+      await orcaPage.mouse.move(0, 0)
+      const background = await button.evaluate(
+        (element) => getComputedStyle(element).backgroundColor
+      )
+      if (sidebarBody === 'agents') {
+        expect(background, 'The selected activity control must retain a visible fill').not.toBe(
+          'rgba(0, 0, 0, 0)'
+        )
+      } else {
+        expect(background, 'The inactive activity control must stay unfilled').toBe(
+          'rgba(0, 0, 0, 0)'
+        )
+      }
       for (const { state, count } of CASES) {
         await test.step(`${sidebarBody}: ${state} ${count}`, async () => {
           await seedActivity(orcaPage, worktreeId, state, count)
@@ -257,6 +272,7 @@ for (const theme of ['dark', 'light'] as const) {
           )
         })
       }
+      await button.screenshot({ path: testInfo.outputPath(`${theme}-${sidebarBody}.png`) })
     }
   })
 }