feat(frontend): content micro-animations — stagger, button press, toast polish

- animate-stagger utility + staggerDelay() helper; lists now rise in sequence
  (recordings grid, moderation rows, message list, media queue, dashboard tiles).
- Button gets a subtle active:scale-[0.97] press feedback.
- Toaster: toast-in slide-up, tone-accent border, rounded hover-close target.
- All motion is reduced-motion aware (killed under prefers-reduced-motion).
This commit is contained in:
asepharyana
2026-08-18 11:01:00 +07:00
parent 0cb0b82fb1
commit 217ecc1aa1
10 changed files with 74 additions and 14 deletions
@@ -28,6 +28,7 @@ import {
} from "@/hooks";
import { formatDuration } from "@/lib/format";
import type { MediaState } from "@/lib/types";
import { staggerDelay } from "@/lib/utils";
import { useWebSocket } from "@/lib/ws/context";
export function MediaView({ initialStatus }: { initialStatus?: MediaState }) {
@@ -205,7 +206,8 @@ export function MediaView({ initialStatus }: { initialStatus?: MediaState }) {
{queueList.map((item, i) => (
<div
key={`${item.source}-${i}`}
className="flex items-center gap-3 rounded-[10px] border border-hairline bg-white/5 px-3 py-2.5"
className="animate-stagger flex items-center gap-3 rounded-[10px] border border-hairline bg-white/5 px-3 py-2.5"
style={staggerDelay(i)}
>
<span className="mono w-5 text-ink-faint">{i + 1}</span>
<div className="min-w-0 flex-1">