From d6b0714b4eb0c63634f9a3c90426b8d005666a4b Mon Sep 17 00:00:00 2001
From: Linus Rath <139418639+rathlinus@users.noreply.github.com>
Date: Sat, 28 Mar 2026 00:42:42 +0100
Subject: [PATCH] fix: match hover action background to selected row state

---
 components/email/email-hover-actions.tsx | 18 +++++++++++++++---
 components/email/email-list-item.tsx     |  1 +
 components/email/thread-list-item.tsx    |  2 ++
 3 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/components/email/email-hover-actions.tsx b/components/email/email-hover-actions.tsx
index 3d8a9441..7c17334d 100644
--- a/components/email/email-hover-actions.tsx
+++ b/components/email/email-hover-actions.tsx
@@ -9,6 +9,7 @@ import { useTranslations } from "next-intl";
 
 interface EmailHoverActionsProps {
   email: Email;
+  backgroundClassName?: string;
   onToggleStar?: () => void;
   onMarkAsRead?: (read: boolean) => void;
   onDelete?: () => void;
@@ -63,6 +64,7 @@ const CORNER_CLASSES = {
 
 export function EmailHoverActions({
   email,
+  backgroundClassName = "bg-muted",
   onToggleStar,
   onMarkAsRead,
   onDelete,
@@ -77,6 +79,7 @@ export function EmailHoverActions({
 
   const isUnread = !email.keywords?.$seen;
   const isStarred = email.keywords?.$flagged;
+  const hoverBackgroundClassName = backgroundClassName;
 
   if (hoverActions.length === 0) return null;
 
@@ -144,7 +147,10 @@ export function EmailHoverActions({
           CORNER_CLASSES[hoverActionsCorner],
         )}
       >
-        <div className="flex items-center gap-0.5 bg-muted rounded-lg px-1.5 py-0.5 shadow-md border border-border">
+        <div className={cn(
+          "flex items-center gap-0.5 rounded-lg px-1.5 py-0.5 shadow-md border border-border",
+          hoverBackgroundClassName,
+        )}>
           {actionButtons}
         </div>
       </div>
@@ -155,8 +161,14 @@ export function EmailHoverActions({
     <div
       className="absolute right-0 top-0 bottom-0 z-10 hidden group-hover:flex items-center"
     >
-      <div className="w-8 h-full bg-gradient-to-r from-transparent to-muted" />
-      <div className="flex items-center gap-0.5 h-full bg-muted pr-3 pl-0.5">
+      <div
+        className={cn("w-8 h-full", hoverBackgroundClassName)}
+        style={{
+          WebkitMaskImage: "linear-gradient(to right, transparent, black)",
+          maskImage: "linear-gradient(to right, transparent, black)",
+        }}
+      />
+      <div className={cn("flex items-center gap-0.5 h-full pr-3 pl-0.5", hoverBackgroundClassName)}>
         {actionButtons}
       </div>
     </div>
diff --git a/components/email/email-list-item.tsx b/components/email/email-list-item.tsx
index b0d5461e..5863557e 100644
--- a/components/email/email-list-item.tsx
+++ b/components/email/email-list-item.tsx
@@ -242,6 +242,7 @@ export function EmailListItem({ email, selected, onClick, onContextMenu, onToggl
       {/* Hover Quick Actions */}
       <EmailHoverActions
         email={email}
+        backgroundClassName={colorTag ? colorTag : (selected ? "bg-selection" : "bg-muted")}
         onToggleStar={onToggleStar}
         onMarkAsRead={onMarkAsRead}
         onDelete={onDelete}
diff --git a/components/email/thread-list-item.tsx b/components/email/thread-list-item.tsx
index 87a3b332..9d3201c8 100644
--- a/components/email/thread-list-item.tsx
+++ b/components/email/thread-list-item.tsx
@@ -247,6 +247,7 @@ const SingleEmailItem = React.forwardRef<HTMLDivElement, SingleEmailItemProps>(
         {/* Hover Quick Actions */}
         <EmailHoverActions
           email={email}
+          backgroundClassName={resolvedColorTag ? resolvedColorTag : (selected ? "bg-accent" : "bg-muted")}
           onToggleStar={onToggleStar}
           onMarkAsRead={onMarkAsRead}
           onDelete={onDelete}
@@ -559,6 +560,7 @@ export const ThreadListItem = React.forwardRef<HTMLDivElement, ThreadListItemPro
           {/* Hover Quick Actions for thread header */}
           <EmailHoverActions
             email={latestEmail}
+            backgroundClassName={colorTag ? colorTag : (isSelected ? "bg-accent" : "bg-muted")}
             onToggleStar={onToggleStar ? () => onToggleStar(latestEmail) : undefined}
             onMarkAsRead={onMarkAsRead ? (read) => onMarkAsRead(latestEmail, read) : undefined}
             onDelete={onDelete ? () => onDelete(latestEmail) : undefined}