Matt
9455ff9981
Adds smooth fade+slide animations when list items enter/leave on the three highest-visibility realtime surfaces: - alert-rail.tsx — socket-driven alerts appearing / dismissed. - my-reminders-rail.tsx — reminders completed / arriving via realtime. - notes-list.tsx — notes added / edited / deleted. One-line `useAutoAnimate()` hook per site, no CSS, ~2kb gzip. Replaces the jarring "row just appears/disappears" pattern with a per-item transition. Skipped on pipeline-board (kanban) — combining auto-animate with @dnd-kit's SortableContext causes double-animation glitches because both libraries fight to animate the same layout shift. Verified: tsc clean, vitest 1293/1293 pass. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
73 lines
2.6 KiB
TypeScript
73 lines
2.6 KiB
TypeScript
'use client';
|
|
|
|
import Link from 'next/link';
|
|
import { ArrowRight } from 'lucide-react';
|
|
import { useAutoAnimate } from '@formkit/auto-animate/react';
|
|
|
|
import { useUIStore } from '@/stores/ui-store';
|
|
import { Skeleton } from '@/components/ui/skeleton';
|
|
import { AlertCard, AlertCardEmpty } from './alert-card';
|
|
import { useAlertList, useAlertRealtime } from './use-alerts';
|
|
|
|
export function AlertRail() {
|
|
const portSlug = useUIStore((s) => s.currentPortSlug);
|
|
const { data, isLoading } = useAlertList('open');
|
|
useAlertRealtime();
|
|
|
|
const alerts = data?.data ?? [];
|
|
// Show first 5 in the rail; surplus pushes user to the full /alerts page.
|
|
const visible = alerts.slice(0, 5);
|
|
const overflow = Math.max(alerts.length - visible.length, 0);
|
|
|
|
// Smooth enter/leave for alerts as new ones arrive via socket realtime
|
|
// and stale ones get dismissed — replaces the jarring "card just
|
|
// appears/disappears" with a subtle fade+slide.
|
|
const [animateRef] = useAutoAnimate<HTMLDivElement>();
|
|
|
|
return (
|
|
<section
|
|
data-testid="alert-rail"
|
|
aria-label="Active alerts"
|
|
// Natural height - the parent aside no longer forces 100% of the
|
|
// dashboard grid row, so the rail can sit compactly under Reminders
|
|
// without bleeding down into the Recent Activity panel below.
|
|
className="flex flex-col gap-3"
|
|
>
|
|
<div className="flex items-baseline justify-between">
|
|
<h2 className="text-sm font-semibold tracking-tight">Alerts</h2>
|
|
<Link
|
|
href={portSlug ? (`/${portSlug}/inbox#alerts` as never) : ('/inbox#alerts' as never)}
|
|
className="text-xs text-muted-foreground hover:text-foreground"
|
|
>
|
|
View all
|
|
<ArrowRight className="ml-1 inline h-3 w-3" aria-hidden />
|
|
</Link>
|
|
</div>
|
|
|
|
{isLoading ? (
|
|
<div className="space-y-2">
|
|
<Skeleton className="h-16 w-full" />
|
|
<Skeleton className="h-16 w-full" />
|
|
<Skeleton className="h-16 w-full" />
|
|
</div>
|
|
) : visible.length === 0 ? (
|
|
<AlertCardEmpty />
|
|
) : (
|
|
<div ref={animateRef} className="space-y-2">
|
|
{visible.map((a) => (
|
|
<AlertCard key={a.id} alert={a} />
|
|
))}
|
|
{overflow > 0 ? (
|
|
<Link
|
|
href={portSlug ? (`/${portSlug}/inbox#alerts` as never) : ('/inbox#alerts' as never)}
|
|
className="block rounded-lg border border-dashed border-border px-3 py-2 text-center text-xs text-muted-foreground transition-colors hover:bg-accent"
|
|
>
|
|
+{overflow} more - view all
|
|
</Link>
|
|
) : null}
|
|
</div>
|
|
)}
|
|
</section>
|
|
);
|
|
}
|