From facf994694896f8409789b1ea28bba6b746c3db1 Mon Sep 17 00:00:00 2001
From: dotta <dotta@example.com>
Date: Sat, 28 Mar 2026 16:49:04 -0500
Subject: [PATCH] Align inbox click selection styling

Co-Authored-By: Paperclip <noreply@paperclip.ing>
---
 ui/src/components/IssueRow.test.tsx | 84 +++++++++++++++++++++++++++++
 ui/src/components/IssueRow.tsx      |  6 ++-
 ui/src/pages/Inbox.tsx              |  1 +
 3 files changed, 90 insertions(+), 1 deletion(-)
 create mode 100644 ui/src/components/IssueRow.test.tsx

diff --git a/ui/src/components/IssueRow.test.tsx b/ui/src/components/IssueRow.test.tsx
new file mode 100644
index 00000000..e5276c7f
--- /dev/null
+++ b/ui/src/components/IssueRow.test.tsx
@@ -0,0 +1,84 @@
+// @vitest-environment jsdom
+
+import { act } from "react";
+import { createRoot } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { IssueRow } from "./IssueRow";
+
+vi.mock("@/lib/router", () => ({
+  Link: ({ children, className, ...props }: React.ComponentProps<"a">) => (
+    <a className={className} {...props}>{children}</a>
+  ),
+}));
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+(globalThis as any).IS_REACT_ACT_ENVIRONMENT = true;
+
+describe("IssueRow", () => {
+  let container: HTMLDivElement;
+
+  beforeEach(() => {
+    container = document.createElement("div");
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    container.remove();
+  });
+
+  it("suppresses accent hover styling when the row is selected", () => {
+    const root = createRoot(container);
+    const issue = {
+      id: "issue-1",
+      identifier: "PAP-1",
+      companyId: "company-1",
+      projectId: null,
+      projectWorkspaceId: null,
+      goalId: null,
+      parentId: null,
+      title: "Inbox item",
+      description: null,
+      status: "todo",
+      priority: "medium",
+      assigneeAgentId: null,
+      assigneeUserId: null,
+      createdByAgentId: null,
+      createdByUserId: null,
+      issueNumber: 1,
+      requestDepth: 0,
+      billingCode: null,
+      assigneeAdapterOverrides: null,
+      executionWorkspaceId: null,
+      executionWorkspacePreference: null,
+      executionWorkspaceSettings: null,
+      checkoutRunId: null,
+      executionRunId: null,
+      executionAgentNameKey: null,
+      executionLockedAt: null,
+      startedAt: null,
+      completedAt: null,
+      cancelledAt: null,
+      hiddenAt: null,
+      createdAt: new Date("2026-03-11T00:00:00.000Z"),
+      updatedAt: new Date("2026-03-11T00:00:00.000Z"),
+      labels: [],
+      labelIds: [],
+      myLastTouchAt: null,
+      lastExternalCommentAt: null,
+      isUnreadForMe: false,
+    } as const;
+
+    act(() => {
+      root.render(<IssueRow issue={issue} selected />);
+    });
+
+    const link = container.querySelector("[data-inbox-issue-link]") as HTMLAnchorElement | null;
+    expect(link).not.toBeNull();
+    expect(link?.className).toContain("hover:bg-transparent");
+    expect(link?.className).not.toContain("hover:bg-accent/50");
+
+    act(() => {
+      root.unmount();
+    });
+  });
+});
diff --git a/ui/src/components/IssueRow.tsx b/ui/src/components/IssueRow.tsx
index f23736fa..bcb3f2b2 100644
--- a/ui/src/components/IssueRow.tsx
+++ b/ui/src/components/IssueRow.tsx
@@ -11,6 +11,7 @@ type UnreadState = "hidden" | "visible" | "fading";
 interface IssueRowProps {
   issue: Issue;
   issueLinkState?: unknown;
+  selected?: boolean;
   mobileLeading?: ReactNode;
   desktopMetaLeading?: ReactNode;
   desktopLeadingSpacer?: boolean;
@@ -27,6 +28,7 @@ interface IssueRowProps {
 export function IssueRow({
   issue,
   issueLinkState,
+  selected = false,
   mobileLeading,
   desktopMetaLeading,
   desktopLeadingSpacer = false,
@@ -48,8 +50,10 @@ export function IssueRow({
     <Link
       to={createIssueDetailPath(issuePathId, issueLinkState)}
       state={issueLinkState}
+      data-inbox-issue-link
       className={cn(
-        "group flex items-start gap-2 border-b border-border py-2.5 pl-2 pr-3 text-sm no-underline text-inherit transition-colors hover:bg-accent/50 last:border-b-0 sm:items-center sm:py-2 sm:pl-1",
+        "group flex items-start gap-2 border-b border-border py-2.5 pl-2 pr-3 text-sm no-underline text-inherit transition-colors last:border-b-0 sm:items-center sm:py-2 sm:pl-1",
+        selected ? "hover:bg-transparent" : "hover:bg-accent/50",
         className,
       )}
     >
diff --git a/ui/src/pages/Inbox.tsx b/ui/src/pages/Inbox.tsx
index e84bf7ae..fc3ca0fa 100644
--- a/ui/src/pages/Inbox.tsx
+++ b/ui/src/pages/Inbox.tsx
@@ -1375,6 +1375,7 @@ export function Inbox() {
                     key={`issue:${issue.id}`}
                     issue={issue}
                     issueLinkState={issueLinkState}
+                    selected={isSelected}
                     className={
                       isArchiving
                         ? "pointer-events-none -translate-x-4 scale-[0.98] opacity-0 transition-all duration-200 ease-out"