From 70a117d0db6f5ce7c3ee70d847826eaf84b57810 Mon Sep 17 00:00:00 2001
From: npeter83 <npeter83+claude@gmail.com>
Date: Fri, 26 Jun 2026 00:00:21 +0200
Subject: [PATCH] fix(messages): make the dock new-message flash actually
 visible
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The ring-based flash relied on ring-accent and a CSS transition that never
restarted on a repeat message, so it was effectively invisible. Replace it with
a keyed inset-glow overlay (animation replays on every flash counter bump, and
inset shadow isn't clipped by the window's overflow-hidden) — flashes whether
the window is expanded, freshly auto-opened, or minimised.
---
 frontend/src/components/ChatDock.tsx | 22 ++++++----------------
 frontend/src/index.css               | 10 ++++++++++
 2 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/frontend/src/components/ChatDock.tsx b/frontend/src/components/ChatDock.tsx
index 12fff57..87dbb0d 100644
--- a/frontend/src/components/ChatDock.tsx
+++ b/frontend/src/components/ChatDock.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { useQueryClient } from "@tanstack/react-query";
 import { ChevronDown, ChevronUp, X } from "lucide-react";
@@ -51,22 +51,12 @@ export default function ChatDock({ meId }: { meId: number }) {
 
 function ChatWindow({ chat, meId }: { chat: DockChat; meId: number }) {
   const { t } = useTranslation();
-  const [flashing, setFlashing] = useState(false);
-
-  // One-shot attention flash whenever a new message bumps the counter.
-  useEffect(() => {
-    if (chat.flash <= 0) return;
-    setFlashing(true);
-    const id = setTimeout(() => setFlashing(false), 800);
-    return () => clearTimeout(id);
-  }, [chat.flash]);
-
   return (
-    <div
-      className={`pointer-events-auto w-80 max-w-[calc(100vw-2rem)] glass rounded-2xl shadow-2xl flex flex-col overflow-hidden transition-all duration-300 ${
-        flashing ? "ring-2 ring-accent" : "ring-0"
-      }`}
-    >
+    <div className="pointer-events-auto relative w-80 max-w-[calc(100vw-2rem)] glass rounded-2xl shadow-2xl flex flex-col overflow-hidden">
+      {/* One-shot attention flash on a new message; keyed by the counter so it replays each time. */}
+      {chat.flash > 0 && (
+        <div key={chat.flash} className="chat-flash pointer-events-none absolute inset-0 rounded-2xl z-10" />
+      )}
       <div className="flex items-center gap-2 px-3 py-2 border-b border-border bg-card/50">
         <button
           onClick={() => toggleMinimize(chat.partnerId)}
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 59a35fa..6a03dfe 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -151,6 +151,16 @@ html[data-perf="1"] body {
   from { opacity: 0; transform: translateY(-6px) scale(0.97); }
   to { opacity: 1; transform: none; }
 }
+/* One-shot attention flash for a chat dock window on a new message. Inset glow so the
+   window's own overflow-hidden doesn't clip it; pulses twice then fades. */
+@keyframes chatFlash {
+  0% { box-shadow: inset 0 0 0 0 transparent; }
+  18% { box-shadow: inset 0 0 0 3px var(--accent), inset 0 0 22px 0 color-mix(in srgb, var(--accent) 55%, transparent); }
+  40% { box-shadow: inset 0 0 0 1px transparent; }
+  62% { box-shadow: inset 0 0 0 3px var(--accent), inset 0 0 22px 0 color-mix(in srgb, var(--accent) 55%, transparent); }
+  100% { box-shadow: inset 0 0 0 0 transparent; }
+}
+.chat-flash { animation: chatFlash 1.1s ease-out; }
 
 /* ===== Color schemes (accent + neutrals), each with dark + light ===== */