From 60a67a9f3b3bf33a42ae0d2071b2979afa9d9144 Mon Sep 17 00:00:00 2001
From: klopez4212 <klopez4212@gmail.com>
Date: Sat, 4 Jul 2026 10:17:47 +0100
Subject: [PATCH] Keep sidebar shimmer titles readable and truncating

Two fixes to the working-chat shimmer in the sidebar:

- New buzz-shimmer-accent variant: the title keeps its normal text
  color and a primary-colored band sweeps across it, instead of the
  default treatment that dims the base text to make the highlight
  read.
- The shimmer class now lives on the truncating span itself (the
  MarkerLabel pattern), so long names ellipsize normally. The archive
  slot is zero-width until hover/focus, giving the title the full row
  and only shrinking to make room for the button on demand.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 desktop/src/features/chats/ui/ChatListItem.tsx | 18 ++++++++++++++----
 .../src/shared/styles/globals/animations.css   | 12 ++++++++++++
 2 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/desktop/src/features/chats/ui/ChatListItem.tsx b/desktop/src/features/chats/ui/ChatListItem.tsx
index 9e4c96251..a89cbd1b3 100644
--- a/desktop/src/features/chats/ui/ChatListItem.tsx
+++ b/desktop/src/features/chats/ui/ChatListItem.tsx
@@ -10,7 +10,6 @@ import {
   ContextMenuSeparator,
   ContextMenuTrigger,
 } from "@/shared/ui/context-menu";
-import { Shimmer } from "@/shared/ui/Shimmer";
 
 export function ChatListHeader() {
   return (
@@ -83,8 +82,17 @@ export function ChatListItem({
         onClick={() => onSelectChat(chat.id)}
         type="button"
       >
-        <span className="min-w-0 flex-1 truncate font-medium">
-          {isAgentRunning ? <Shimmer>{name}</Shimmer> : name}
+        <span
+          className={cn(
+            "min-w-0 flex-1 truncate font-medium",
+            // Shimmer class + overlay live on the truncating span itself
+            // (same pattern as MarkerLabel) so long names keep their
+            // ellipsis while the band sweeps the visible text.
+            isAgentRunning && "buzz-shimmer buzz-shimmer-accent",
+          )}
+          data-shimmer-text={isAgentRunning ? name : undefined}
+        >
+          {name}
         </span>
         {isPinned ? (
           <Pin
@@ -99,7 +107,9 @@ export function ChatListItem({
         ) : null}
       </button>
       {onArchiveChat ? (
-        <div className="relative flex h-6 w-6 shrink-0 items-center justify-center">
+        // Zero-width until hover/focus so the title gets the full row; the
+        // slot expands to make room for the archive button on demand.
+        <div className="relative flex h-6 w-0 shrink-0 items-center justify-center overflow-hidden transition-[width] duration-150 group-focus-within/chat-row:w-6 group-hover/chat-row:w-6">
           <Button
             aria-label={`Archive ${name}`}
             className={cn(
diff --git a/desktop/src/shared/styles/globals/animations.css b/desktop/src/shared/styles/globals/animations.css
index 0cba5d1a9..ad7dfe69b 100644
--- a/desktop/src/shared/styles/globals/animations.css
+++ b/desktop/src/shared/styles/globals/animations.css
@@ -195,12 +195,24 @@
   }
 }
 
+/* Accent variant: keeps the text at its normal color and sweeps a
+   primary-colored band across it, for places (sidebar titles) where the
+   default dimmed-base treatment reads as a de-emphasized row. */
+.buzz-shimmer-accent {
+  --buzz-shimmer-highlight: hsl(var(--primary));
+  color: inherit;
+}
+
 @media (prefers-reduced-motion: reduce) {
   .buzz-shimmer,
   .shimmer {
     color: hsl(var(--muted-foreground));
   }
 
+  .buzz-shimmer-accent {
+    color: inherit;
+  }
+
   .buzz-shimmer::before,
   .shimmer::before {
     animation: none;