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 { useTranslation } from "react-i18next";
import { useQueryClient } from "@tanstack/react-query"; import { useQueryClient } from "@tanstack/react-query";
import { ChevronDown, ChevronUp, X } from "lucide-react"; 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 }) { function ChatWindow({ chat, meId }: { chat: DockChat; meId: number }) {
const { t } = useTranslation(); 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 ( return (
<div <div className="pointer-events-auto relative w-80 max-w-[calc(100vw-2rem)] glass rounded-2xl shadow-2xl flex flex-col overflow-hidden">
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 ${ {/* One-shot attention flash on a new message; keyed by the counter so it replays each time. */}
flashing ? "ring-2 ring-accent" : "ring-0" {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"> <div className="flex items-center gap-2 px-3 py-2 border-b border-border bg-card/50">
<button <button
onClick={() => toggleMinimize(chat.partnerId)} onClick={() => toggleMinimize(chat.partnerId)}

10
frontend/src/index.css
View file

@ -151,6 +151,16 @@ html[data-perf="1"] body {
from { opacity: 0; transform: translateY(-6px) scale(0.97); } from { opacity: 0; transform: translateY(-6px) scale(0.97); }
to { opacity: 1; transform: none; } 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 ===== */ /* ===== Color schemes (accent + neutrals), each with dark + light ===== */