From d97148641825621b390cad0fbed9fa2d7bf2640d Mon Sep 17 00:00:00 2001
From: Danny Avila <danny@librechat.ai>
Date: Wed, 26 Nov 2025 19:11:20 -0500
Subject: [PATCH] =?UTF-8?q?=F0=9F=96=8A=EF=B8=8F=20fix:=20Add=20left=20bor?=
 =?UTF-8?q?der=20accent=20to=20active=20conversation=20for=20WCAG=201.4.11?=
 =?UTF-8?q?=20compliance=20(#10696)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The active conversation state previously failed WCAG 1.4.11 Non-text Contrast
requirements (~1.2:1 contrast ratio). Added a left border indicator using
border-xheavy which provides 6:1+ contrast in both light and dark modes.

- Add border-l-2 with border-xheavy color for active state
- Conditionally apply rounded-r-lg (active) vs rounded-lg (inactive)
- Use transition-[background-color] to prevent border/radius animation glitch
---
 client/src/components/Conversations/Convo.tsx     | 6 ++++--
 client/src/components/Conversations/ConvoLink.tsx | 5 +----
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/client/src/components/Conversations/Convo.tsx b/client/src/components/Conversations/Convo.tsx
index 1a43c23332..d4808089c4 100644
--- a/client/src/components/Conversations/Convo.tsx
+++ b/client/src/components/Conversations/Convo.tsx
@@ -132,8 +132,10 @@ export default function Conversation({ conversation, retainView, toggleNav }: Co
   return (
     <div
       className={cn(
-        'group relative flex h-12 w-full items-center rounded-lg transition-colors duration-200 md:h-9',
-        isActiveConvo ? 'bg-surface-active-alt' : 'hover:bg-surface-active-alt',
+        'group relative flex h-12 w-full items-center border-l-2 transition-[background-color] duration-200 md:h-9',
+        isActiveConvo
+          ? 'rounded-r-lg border-l-border-xheavy bg-surface-active-alt'
+          : 'rounded-lg border-l-transparent hover:bg-surface-active-alt',
       )}
       role="button"
       tabIndex={renaming ? -1 : 0}
diff --git a/client/src/components/Conversations/ConvoLink.tsx b/client/src/components/Conversations/ConvoLink.tsx
index e75c6bc2e7..68c16594a5 100644
--- a/client/src/components/Conversations/ConvoLink.tsx
+++ b/client/src/components/Conversations/ConvoLink.tsx
@@ -30,10 +30,7 @@ const ConvoLink: React.FC<ConvoLinkProps> = ({
     >
       {children}
       <div
-        className={cn(
-          'relative flex-1 grow overflow-hidden whitespace-nowrap',
-          isActiveConvo && 'italic',
-        )}
+        className="relative flex-1 grow overflow-hidden whitespace-nowrap"
         style={{ textOverflow: 'clip' }}
         onDoubleClick={(e) => {
           if (isSmallScreen) {