From 7e6f799acb4db33dca46d80a911106d49bacbb3d Mon Sep 17 00:00:00 2001
From: Wes <wesbillman@users.noreply.github.com>
Date: Wed, 25 Mar 2026 15:25:02 -0700
Subject: [PATCH] fix(desktop): align DM close button and unread indicator
 hover states (#184)

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
---
 desktop/src/features/sidebar/ui/SidebarSection.tsx | 11 ++++++++++-
 desktop/src/shared/ui/sidebar.tsx                  |  2 +-
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/desktop/src/features/sidebar/ui/SidebarSection.tsx b/desktop/src/features/sidebar/ui/SidebarSection.tsx
index b1a2a9514..50a6d5cff 100644
--- a/desktop/src/features/sidebar/ui/SidebarSection.tsx
+++ b/desktop/src/features/sidebar/ui/SidebarSection.tsx
@@ -159,7 +159,7 @@ export function ChannelMenuButton({
         presenceStatus={presenceStatus}
       />
       <span className="min-w-0 flex-1 truncate">{resolvedLabel}</span>
-      {hasUnread && !isActive ? (
+      {hasUnread && !isActive && channel.channelType !== "dm" ? (
         <span
           aria-hidden="true"
           className="ml-auto h-2.5 w-2.5 shrink-0 rounded-full bg-primary group-hover/menu-item:hidden"
@@ -221,6 +221,15 @@ export function SidebarSection({
                   presenceStatus={presenceByChannelId?.[channel.id]}
                   onSelectChannel={onSelectChannel}
                 />
+                {channel.channelType === "dm" &&
+                unreadChannelIds.has(channel.id) &&
+                !(isActiveChannel && selectedChannelId === channel.id) ? (
+                  <span
+                    aria-hidden="true"
+                    className="absolute right-[9px] top-1/2 h-2.5 w-2.5 -translate-y-1/2 rounded-full bg-primary group-hover/menu-item:hidden"
+                    data-testid={`channel-unread-${channel.name}`}
+                  />
+                ) : null}
                 {channel.channelType === "dm" && onHideDm ? (
                   <SidebarMenuAction
                     aria-label="Close direct message"
diff --git a/desktop/src/shared/ui/sidebar.tsx b/desktop/src/shared/ui/sidebar.tsx
index 85a883236..adfb6d368 100644
--- a/desktop/src/shared/ui/sidebar.tsx
+++ b/desktop/src/shared/ui/sidebar.tsx
@@ -622,7 +622,7 @@ const SidebarMenuAction = React.forwardRef<
         "peer-data-[size=lg]/menu-button:top-2.5",
         "group-data-[collapsible=icon]:hidden",
         showOnHover &&
-          "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-primary-foreground md:opacity-0",
+          "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-primary-foreground peer-data-[active=true]/menu-button:hover:text-sidebar-accent-foreground md:opacity-0",
         className,
       )}
       {...props}