From 9d71e805b0f73f6434874e2e4f0ee9a8bf3d911a Mon Sep 17 00:00:00 2001
From: Taylor Ho <taylorkmho@gmail.com>
Date: Wed, 5 Aug 2026 14:59:06 -0700
Subject: [PATCH 1/3] fix(desktop): clarify selected community rail state

- Replace selected and hover fills with primary outlines while preserving icon background, text color, opacity, and radius across states.
- Keep transparent outline geometry at rest for smooth color transitions and add spacing so adjacent outlines do not overlap.
- Increase community rail tooltip clearance and cover active, inactive, and hover presentation invariants in Playwright.

Co-authored-by: Taylor Ho <taylorkmho@gmail.com>
Signed-off-by: Taylor Ho <taylorkmho@gmail.com>
---
 .../src/features/sidebar/ui/CommunityRail.tsx | 19 ++++----
 desktop/tests/e2e/community-rail.spec.ts      | 46 +++++++++++++++++++
 2 files changed, 56 insertions(+), 9 deletions(-)

diff --git a/desktop/src/features/sidebar/ui/CommunityRail.tsx b/desktop/src/features/sidebar/ui/CommunityRail.tsx
index 26a0b324e0..a572bb8eb6 100644
--- a/desktop/src/features/sidebar/ui/CommunityRail.tsx
+++ b/desktop/src/features/sidebar/ui/CommunityRail.tsx
@@ -106,7 +106,7 @@ function CommunityButton({
   dragAttributes?: React.HTMLAttributes<HTMLElement>;
   isDragging?: boolean;
 }) {
-  const { mentionCount, showBadge, showDot, pending, badgeLabel } =
+  const { mentionCount, showBadge, showDot, badgeLabel } =
     communityRailIndicators(unread);
 
   const tooltipLabel = showBadge
@@ -135,11 +135,8 @@ function CommunityButton({
             >
               <span
                 className={cn(
-                  "flex h-9 w-9 items-center justify-center overflow-hidden rounded-2xl text-xs font-semibold transition-all",
-                  isActive
-                    ? "rounded-xl bg-primary text-primary-foreground"
-                    : "bg-sidebar-accent/60 text-sidebar-foreground/80 hover:rounded-xl hover:bg-primary/80 hover:text-primary-foreground",
-                  pending && !isActive && "opacity-60",
+                  "flex h-9 w-9 items-center justify-center overflow-hidden rounded-xl bg-sidebar-accent/60 text-xs font-semibold text-sidebar-foreground/80 outline-2 outline-offset-2 outline-primary/0 transition-[outline-color]",
+                  isActive ? "outline-primary" : "hover:outline-primary/50",
                 )}
               >
                 {iconUrl ? (
@@ -172,7 +169,9 @@ function CommunityButton({
             </button>
           </ContextMenuTrigger>
         </TooltipTrigger>
-        <TooltipContent side="right">{tooltipLabel}</TooltipContent>
+        <TooltipContent side="right" sideOffset={8}>
+          {tooltipLabel}
+        </TooltipContent>
       </Tooltip>
       <ContextMenuContent data-testid={`community-rail-menu-${community.id}`}>
         {menu}
@@ -368,7 +367,7 @@ export function CommunityRail({
   return (
     <nav
       aria-label="Communities"
-      className="relative z-0 flex w-14 shrink-0 flex-col items-center gap-2 overflow-y-auto bg-sidebar px-2.5 pb-5 pt-[calc(var(--buzz-top-chrome-height,40px)+7px)]"
+      className="relative z-0 flex w-14 shrink-0 flex-col items-center gap-2.5 overflow-y-auto bg-sidebar px-2.5 pb-5 pt-[calc(var(--buzz-top-chrome-height,40px)+7px)]"
       data-testid="community-rail"
     >
       <DndContext
@@ -418,7 +417,9 @@ export function CommunityRail({
             <Plus className="h-4 w-4" />
           </button>
         </TooltipTrigger>
-        <TooltipContent side="right">Add community</TooltipContent>
+        <TooltipContent side="right" sideOffset={8}>
+          Add community
+        </TooltipContent>
       </Tooltip>
       <EditCommunityDialog
         onOpenChange={(open) => {
diff --git a/desktop/tests/e2e/community-rail.spec.ts b/desktop/tests/e2e/community-rail.spec.ts
index 19bcfc23e5..33f4808cd8 100644
--- a/desktop/tests/e2e/community-rail.spec.ts
+++ b/desktop/tests/e2e/community-rail.spec.ts
@@ -73,6 +73,52 @@ test.describe("community rail", () => {
       "opacity",
       "1",
     );
+    await expect(buttonB.locator(":scope > span").first()).toHaveCSS(
+      "opacity",
+      "1",
+    );
+    const [activeStyle, inactiveStyle] = await Promise.all(
+      [buttonA, buttonB].map((button) =>
+        button
+          .locator(":scope > span")
+          .first()
+          .evaluate((element) => {
+            const style = getComputedStyle(element);
+            return {
+              backgroundColor: style.backgroundColor,
+              borderRadius: style.borderRadius,
+              color: style.color,
+              outlineStyle: style.outlineStyle,
+              outlineWidth: style.outlineWidth,
+            };
+          }),
+      ),
+    );
+    expect(activeStyle.backgroundColor).toBe(inactiveStyle.backgroundColor);
+    expect(activeStyle.borderRadius).toBe(inactiveStyle.borderRadius);
+    expect(activeStyle.borderRadius).toBe("12px");
+    expect(activeStyle.color).toBe(inactiveStyle.color);
+    expect(activeStyle.outlineStyle).toBe("solid");
+    expect(activeStyle.outlineWidth).toBe("2px");
+    expect(inactiveStyle.outlineStyle).toBe("solid");
+    expect(inactiveStyle.outlineWidth).toBe("2px");
+
+    const inactiveIcon = buttonB.locator(":scope > span").first();
+    await buttonB.hover();
+    await expect(inactiveIcon).toHaveCSS("outline-width", "2px");
+    const hoverStyle = await inactiveIcon.evaluate((element) => {
+      const style = getComputedStyle(element);
+      return {
+        backgroundColor: style.backgroundColor,
+        borderRadius: style.borderRadius,
+        color: style.color,
+        outlineStyle: style.outlineStyle,
+      };
+    });
+    expect(hoverStyle.backgroundColor).toBe(inactiveStyle.backgroundColor);
+    expect(hoverStyle.borderRadius).toBe(inactiveStyle.borderRadius);
+    expect(hoverStyle.color).toBe(inactiveStyle.color);
+    expect(hoverStyle.outlineStyle).toBe("solid");
 
     // The add-community affordance lives at the bottom of the rail.
     await expect(page.getByTestId("community-rail-add")).toBeVisible();

From d95decd5b5982213b815c638478c5b8058a66d8b Mon Sep 17 00:00:00 2001
From: Taylor Ho <taylorkmho@gmail.com>
Date: Wed, 5 Aug 2026 15:12:32 -0700
Subject: [PATCH 2/3] fix(desktop): preserve pending community opacity

Restore the subdued loading treatment for inactive communities without changing the new outline-based selected and hover states.

Co-authored-by: Taylor Ho <taylorkmho@gmail.com>
Signed-off-by: Taylor Ho <taylorkmho@gmail.com>
---
 desktop/src/features/sidebar/ui/CommunityRail.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/desktop/src/features/sidebar/ui/CommunityRail.tsx b/desktop/src/features/sidebar/ui/CommunityRail.tsx
index a572bb8eb6..d5a8e0e89b 100644
--- a/desktop/src/features/sidebar/ui/CommunityRail.tsx
+++ b/desktop/src/features/sidebar/ui/CommunityRail.tsx
@@ -106,7 +106,7 @@ function CommunityButton({
   dragAttributes?: React.HTMLAttributes<HTMLElement>;
   isDragging?: boolean;
 }) {
-  const { mentionCount, showBadge, showDot, badgeLabel } =
+  const { mentionCount, showBadge, showDot, pending, badgeLabel } =
     communityRailIndicators(unread);
 
   const tooltipLabel = showBadge
@@ -137,6 +137,7 @@ function CommunityButton({
                 className={cn(
                   "flex h-9 w-9 items-center justify-center overflow-hidden rounded-xl bg-sidebar-accent/60 text-xs font-semibold text-sidebar-foreground/80 outline-2 outline-offset-2 outline-primary/0 transition-[outline-color]",
                   isActive ? "outline-primary" : "hover:outline-primary/50",
+                  pending && !isActive && "opacity-60",
                 )}
               >
                 {iconUrl ? (

From c0024ccc1e426bd3920ca9e941a72c3a0b9fc334 Mon Sep 17 00:00:00 2001
From: Taylor Ho <taylorkmho@gmail.com>
Date: Wed, 5 Aug 2026 15:22:44 -0700
Subject: [PATCH 3/3] fix(desktop): keep community tiles fully opaque

Do not dim community icons while background unread observation initializes; reserve opacity changes for explicit drag feedback.

Co-authored-by: Taylor Ho <taylorkmho@gmail.com>
Signed-off-by: Taylor Ho <taylorkmho@gmail.com>
---
 desktop/src/features/sidebar/ui/CommunityRail.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/desktop/src/features/sidebar/ui/CommunityRail.tsx b/desktop/src/features/sidebar/ui/CommunityRail.tsx
index d5a8e0e89b..a572bb8eb6 100644
--- a/desktop/src/features/sidebar/ui/CommunityRail.tsx
+++ b/desktop/src/features/sidebar/ui/CommunityRail.tsx
@@ -106,7 +106,7 @@ function CommunityButton({
   dragAttributes?: React.HTMLAttributes<HTMLElement>;
   isDragging?: boolean;
 }) {
-  const { mentionCount, showBadge, showDot, pending, badgeLabel } =
+  const { mentionCount, showBadge, showDot, badgeLabel } =
     communityRailIndicators(unread);
 
   const tooltipLabel = showBadge
@@ -137,7 +137,6 @@ function CommunityButton({
                 className={cn(
                   "flex h-9 w-9 items-center justify-center overflow-hidden rounded-xl bg-sidebar-accent/60 text-xs font-semibold text-sidebar-foreground/80 outline-2 outline-offset-2 outline-primary/0 transition-[outline-color]",
                   isActive ? "outline-primary" : "hover:outline-primary/50",
-                  pending && !isActive && "opacity-60",
                 )}
               >
                 {iconUrl ? (