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 committed 2026-08-18 11:01:00 +07:00
1 parent 0cb0b82fb1
commit 217ecc1aa1
10 files changed
+74 -14

No files matched your search

@@ -37,6 +37,7 @@ import type {
ModerationActionType,
ModerationStats,
} from "@/lib/types";
import { staggerDelay } from "@/lib/utils";
const ACTION_ICON: Record<ModerationActionType, React.ReactNode> = {
delete_message: <Trash2 className="size-3.5" />,
@@ -217,8 +218,8 @@ export function ModerationView({
}
/>
<div className="max-h-[60vh] space-y-1.5 overflow-y-auto pr-1">
{(actions ?? []).map((a) => (
<ActionRow key={a.id} a={a} />
{(actions ?? []).map((a, i) => (
<ActionRow key={a.id} a={a} index={i} />
))}
{(actions ?? []).length === 0 && (
<div className="py-10 text-center text-xs text-ink-faint">
@@ -232,7 +233,7 @@ export function ModerationView({
);
}
function ActionRow({ a }: { a: ModerationAction }) {
function ActionRow({ a, index = 0 }: { a: ModerationAction; index?: number }) {
const tone =
a.status === "executed"
? "signal"
@@ -243,7 +244,10 @@ function ActionRow({ a }: { a: ModerationAction }) {
<AlertTriangle className="size-3.5" />
);
return (
<div className="flex items-start gap-3 rounded-[10px] border border-hairline bg-white/[0.03] p-3">
<div
className="animate-stagger flex items-start gap-3 rounded-[10px] border border-hairline bg-white/[0.03] p-3"
style={staggerDelay(index)}
>
<span
className={`mt-0.5 ${tone === "vermilion" ? "text-vermilion" : tone === "amber" ? "text-amber" : "text-signal"}`}
>