peter/siftlode
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(messages): make the dock new-message flash actually visible

Browse source 
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.
This commit is contained in:
npeter83 2026-06-26 00:00:21 +02:00
parent 963afa33a6
commit 70a117d0db
2 changed files with 16 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

22
frontend/src/components/ChatDock.tsx
View file

@ -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)}