From 44f052f4c5a0f21c99af585a4adca8d79a1abbf7 Mon Sep 17 00:00:00 2001
From: dotta <dotta@example.com>
Date: Sat, 28 Mar 2026 15:45:44 -0500
Subject: [PATCH] Fix inbox selection highlight to show on individual items

Replace outline approach (blended with card border, invisible) with:
- 3px blue left-border bar (absolute positioned, like Gmail)
- Subtle tinted background with forced transparent children so the
  highlight shows through opaque child backgrounds

Co-Authored-By: Paperclip <noreply@paperclip.ing>
---
 ui/src/pages/Inbox.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/ui/src/pages/Inbox.tsx b/ui/src/pages/Inbox.tsx
index 9e0b4983..24c42dad 100644
--- a/ui/src/pages/Inbox.tsx
+++ b/ui/src/pages/Inbox.tsx
@@ -1233,9 +1233,15 @@ export function Inbox() {
                   <div
                     key={`sel-${key}`}
                     data-inbox-item
-                    className={isSelected ? "bg-primary/10 outline outline-2 -outline-offset-2 outline-primary/30" : ""}
+                    className={cn(
+                      "relative",
+                      isSelected && "bg-primary/[0.06] [&>*]:bg-transparent",
+                    )}
                     onClick={() => setSelectedIndex(index)}
                   >
+                    {isSelected && (
+                      <div className="absolute inset-y-0 left-0 w-[3px] bg-primary rounded-r-sm" />
+                    )}
                     {child}
                   </div>
                 );