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/shared/notes-list.tsx

@@ -4,6 +4,7 @@ import { useState } from 'react';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { formatDistanceToNow } from 'date-fns';
 import { Lock, Pencil, Trash2, Send, Loader2 } from 'lucide-react';
+import { useAutoAnimate } from '@formkit/auto-animate/react';
 
 import { Button } from '@/components/ui/button';
 import { Textarea } from '@/components/ui/textarea';
@@ -133,6 +134,10 @@ export function NotesList({ entityType, entityId, currentUserId, aggregate }: No
   const listEndpoint = aggregateOn ? `${baseEndpoint}?aggregate=true` : baseEndpoint;
   const queryKey = [entityType, entityId, 'notes', aggregateOn ? 'aggregated' : 'own'];
 
+  // Smooth animation when notes are added / edited / deleted — replaces
+  // the abrupt re-render with a per-row fade/slide.
+  const [animateRef] = useAutoAnimate<HTMLDivElement>();
+
   const { data: notes = [], isLoading } = useQuery<Note[]>({
     queryKey,
     queryFn: () => apiFetch<{ data: Note[] }>(listEndpoint).then((r) => r.data),
@@ -241,7 +246,7 @@ export function NotesList({ entityType, entityId, currentUserId, aggregate }: No
       ) : notes.length === 0 ? (
         <div className="text-center py-8 text-muted-foreground">No notes yet</div>
       ) : (
-        <div className="space-y-3">
+        <div ref={animateRef} className="space-y-3">
           {(groupBySource ? sortByGroup(notes) : notes).map((note) => (
             <div key={note.id} className="flex gap-3 p-3 rounded-lg border bg-card">
               <Avatar className="h-8 w-8 shrink-0">