feat(deps): sprinkle @formkit/auto-animate on rail lists

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>

src/components/alerts/alert-rail.tsx

@@ -2,6 +2,7 @@
 
 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';
@@ -18,6 +19,11 @@ export function AlertRail() {
   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"
@@ -47,7 +53,7 @@ export function AlertRail() {
       ) : visible.length === 0 ? (
         <AlertCardEmpty />
       ) : (
-        <div className="space-y-2">
+        <div ref={animateRef} className="space-y-2">
           {visible.map((a) => (
             <AlertCard key={a.id} alert={a} />
           ))}