From b44353fa5d5123df5901bc8777fb75adcb3fb18a Mon Sep 17 00:00:00 2001
From: Julius Marminge <julius0216@outlook.com>
Date: Thu, 26 Feb 2026 17:29:30 -0800
Subject: [PATCH] Enhance active sidebar thread styling

- Add stronger active-state visuals for thread rows (accent bg, ring, medium text)
- Improve active thread timestamp contrast for better readability
---
 apps/web/src/components/Sidebar.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/components/Sidebar.tsx b/apps/web/src/components/Sidebar.tsx
index 99dcdb62ef3..2e4d9023887 100644
--- a/apps/web/src/components/Sidebar.tsx
+++ b/apps/web/src/components/Sidebar.tsx
@@ -578,7 +578,9 @@ export default function Sidebar() {
                                 size="sm"
                                 isActive={isActive}
                                 className={`h-7 w-full translate-x-0 justify-start px-2 text-left hover:bg-accent hover:text-foreground ${
-                                  isActive ? "text-foreground" : "text-muted-foreground"
+                                  isActive
+                                    ? "bg-accent/85 text-foreground font-medium ring-1 ring-border/70 dark:bg-accent/55 dark:ring-border/50"
+                                    : "text-muted-foreground"
                                 }`}
                                 onClick={() => {
                                   void navigate({
@@ -624,7 +626,11 @@ export default function Sidebar() {
                                       />
                                     </span>
                                   )}
-                                  <span className="text-[10px] text-muted-foreground/40">
+                                  <span
+                                    className={`text-[10px] ${
+                                      isActive ? "text-foreground/65" : "text-muted-foreground/40"
+                                    }`}
+                                  >
                                     {formatRelativeTime(thread.createdAt)}
                                   </span>
                                 </div>