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>
This commit is contained in:
2026-05-12 18:38:28 +02:00
parent a65aadc530
commit 9455ff9981
5 changed files with 28 additions and 3 deletions

8
pnpm-lock.yaml generated
View File

@@ -22,6 +22,9 @@ importers:
'@dnd-kit/utilities':
specifier: ^3.2.2
version: 3.2.2(react@19.2.6)
'@formkit/auto-animate':
specifier: ^0.9.0
version: 0.9.0
'@hookform/resolvers':
specifier: ^5.2.2
version: 5.2.2(react-hook-form@7.75.0(react@19.2.6))
@@ -786,6 +789,9 @@ packages:
'@floating-ui/utils@0.2.11':
resolution: {integrity: sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg==}
'@formkit/auto-animate@0.9.0':
resolution: {integrity: sha512-VhP4zEAacXS3dfTpJpJ88QdLqMTcabMg0jwpOSxZ/VzfQVfl3GkZSCZThhGC5uhq/TxPHPzW0dzr4H9Bb1OgKA==}
'@hookform/devtools@4.4.0':
resolution: {integrity: sha512-Mtlic+uigoYBPXlfvPBfiYYUZuyMrD3pTjDpVIhL6eCZTvQkHsKBSKeZCvXWUZr8fqrkzDg27N+ZuazLKq6Vmg==}
peerDependencies:
@@ -5890,6 +5896,8 @@ snapshots:
'@floating-ui/utils@0.2.11': {}
'@formkit/auto-animate@0.9.0': {}
'@hookform/devtools@4.4.0(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
dependencies:
'@emotion/react': 11.14.0(@types/react@19.2.14)(react@19.2.6)