From 217ecc1aa1eb2fbbc0b4e2837eef77ab3c9c1772 Mon Sep 17 00:00:00 2001
From: asepharyana <superaseph@gmail.com>
Date: Tue, 18 Aug 2026 11:01:00 +0700
Subject: [PATCH] =?UTF-8?q?feat(frontend):=20content=20micro-animations=20?=
 =?UTF-8?q?=E2=80=94=20stagger,=20button=20press,=20toast=20polish?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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).
---
 .../src/app/(dashboard)/dashboard/view.tsx    |  9 ++++++++
 .../src/app/(dashboard)/media/view.tsx        |  4 +++-
 .../src/app/(dashboard)/messages/view.tsx     |  6 +++--
 .../src/app/(dashboard)/moderation/view.tsx   | 12 ++++++----
 .../src/app/(dashboard)/recordings/view.tsx   |  6 +++--
 services/frontend/src/app/globals.css         | 23 ++++++++++++++++++-
 .../src/components/primitives/button.tsx      |  2 +-
 .../src/components/primitives/toast.tsx       | 10 +++++---
 .../src/components/shared/section.tsx         |  3 +++
 services/frontend/src/lib/utils.ts            | 13 +++++++++++
 10 files changed, 74 insertions(+), 14 deletions(-)

diff --git a/services/frontend/src/app/(dashboard)/dashboard/view.tsx b/services/frontend/src/app/(dashboard)/dashboard/view.tsx
index ef060b9..5e870ee 100644
--- a/services/frontend/src/app/(dashboard)/dashboard/view.tsx
+++ b/services/frontend/src/app/(dashboard)/dashboard/view.tsx
@@ -29,6 +29,7 @@ import {
 } from "@/hooks";
 import { formatNumber } from "@/lib/format";
 import type { DashboardStats } from "@/lib/types";
+import { staggerDelay } from "@/lib/utils";
 
 function deriveSignal(stats?: DashboardStats) {
   if (!stats) return { tone: "signal" as const, label: "nominal" };
@@ -113,23 +114,31 @@ export function DashboardView({
             value={formatNumber(s.total_messages)}
             tone="signal"
             icon={<MessageSquare className="size-3.5" />}
+            className="animate-stagger"
+            style={staggerDelay(0)}
           />
           <MetricTile
             label="Flagged"
             value={formatNumber(s.total_flagged)}
             tone={s.total_flagged > 0 ? "vermilion" : "neutral"}
             hint={`${s.today_flagged} today`}
+            className="animate-stagger"
+            style={staggerDelay(1)}
           />
           <MetricTile
             label="Active 24h"
             value={formatNumber(s.active_users_24h)}
             tone="signal"
             icon={<Users className="size-3.5" />}
+            className="animate-stagger"
+            style={staggerDelay(2)}
           />
           <MetricTile
             label="Voice clips"
             value={formatNumber(s.total_voice_recordings)}
             icon={<Mic className="size-3.5" />}
+            className="animate-stagger"
+            style={staggerDelay(3)}
           />
         </div>
       </GlassPanel>
diff --git a/services/frontend/src/app/(dashboard)/media/view.tsx b/services/frontend/src/app/(dashboard)/media/view.tsx
index d413ee6..3a19cb2 100644
--- a/services/frontend/src/app/(dashboard)/media/view.tsx
+++ b/services/frontend/src/app/(dashboard)/media/view.tsx
@@ -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">
diff --git a/services/frontend/src/app/(dashboard)/messages/view.tsx b/services/frontend/src/app/(dashboard)/messages/view.tsx
index 1105ab4..fa8b850 100644
--- a/services/frontend/src/app/(dashboard)/messages/view.tsx
+++ b/services/frontend/src/app/(dashboard)/messages/view.tsx
@@ -45,6 +45,7 @@ import {
   safeParseJsonArray,
 } from "@/lib/format";
 import type { AiStatus, Guild, MessageRecord } from "@/lib/types";
+import { staggerDelay } from "@/lib/utils";
 import { useWebSocket } from "@/lib/ws/context";
 
 export function MessagesView({
@@ -254,16 +255,17 @@ export function MessagesView({
                   }
                 }}
               >
-                {display.map((m) => (
+                {display.map((m, i) => (
                   <button
                     key={m.id}
                     type="button"
                     onClick={() => setSelected(m.id)}
-                    className={`flex w-full items-start gap-3 rounded-[12px] border p-3 text-left transition-colors ${
+                    className={`animate-stagger flex w-full items-start gap-3 rounded-[12px] border p-3 text-left transition-colors ${
                       selected === m.id
                         ? "border-signal/40 bg-signal/8"
                         : "border-hairline bg-white/[0.03] hover:bg-white/[0.06]"
                     }`}
+                    style={staggerDelay(i)}
                   >
                     <Avatar src={m.avatar_url} name={m.username} size={34} />
                     <div className="min-w-0 flex-1">
diff --git a/services/frontend/src/app/(dashboard)/moderation/view.tsx b/services/frontend/src/app/(dashboard)/moderation/view.tsx
index 59707d2..ffe23a6 100644
--- a/services/frontend/src/app/(dashboard)/moderation/view.tsx
+++ b/services/frontend/src/app/(dashboard)/moderation/view.tsx
@@ -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"}`}
       >
diff --git a/services/frontend/src/app/(dashboard)/recordings/view.tsx b/services/frontend/src/app/(dashboard)/recordings/view.tsx
index 557c875..7cf8e03 100644
--- a/services/frontend/src/app/(dashboard)/recordings/view.tsx
+++ b/services/frontend/src/app/(dashboard)/recordings/view.tsx
@@ -20,6 +20,7 @@ import {
 } from "@/hooks";
 import { formatBytes, formatRelativeTime } from "@/lib/format";
 import type { VoiceRecording } from "@/lib/types";
+import { staggerDelay } from "@/lib/utils";
 import { useWebSocket } from "@/lib/ws/context";
 
 export function RecordingsView({
@@ -94,12 +95,13 @@ export function RecordingsView({
         />
       ) : (
         <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
-          {(items ?? []).map((r) => {
+          {(items ?? []).map((r, i) => {
             const up = uploadStatus(r);
             return (
               <GlassCard
                 key={r.id}
-                className="flex flex-col gap-3 transition-colors hover:bg-white/[0.06]"
+                className="animate-stagger flex flex-col gap-3 transition-colors hover:bg-white/[0.06]"
+                style={staggerDelay(i)}
               >
                 <div className="flex items-center gap-3">
                   <Avatar src={r.avatar_url} name={r.username} size={38} />
diff --git a/services/frontend/src/app/globals.css b/services/frontend/src/app/globals.css
index 86aab0e..e325adf 100644
--- a/services/frontend/src/app/globals.css
+++ b/services/frontend/src/app/globals.css
@@ -280,6 +280,25 @@
 .animate-fade-up {
   animation: fade-up 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
 }
+/* List stagger: each child rises in sequence. Pair with inline
+   style={{ animationDelay }} set via staggerDelay(). */
+.animate-stagger {
+  animation: fade-up 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+/* Toast: slide up + settle from the dock edge. */
+.animate-toast-in {
+  animation: toast-in 0.22s cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+@keyframes toast-in {
+  from {
+    opacity: 0;
+    transform: translateY(14px) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
 
 @media (prefers-reduced-motion: reduce) {
   .scan-line::after,
@@ -289,7 +308,9 @@
   .animate-pulse-ring,
   .animate-shimmer,
   .animate-breathe,
-  .animate-fade-up {
+  .animate-fade-up,
+  .animate-stagger,
+  .animate-toast-in {
     animation: none !important;
   }
   .scan-line {
diff --git a/services/frontend/src/components/primitives/button.tsx b/services/frontend/src/components/primitives/button.tsx
index 3d34fca..7b6cdea 100644
--- a/services/frontend/src/components/primitives/button.tsx
+++ b/services/frontend/src/components/primitives/button.tsx
@@ -40,7 +40,7 @@ export const Button = ({
   return (
     <Comp
       className={cn(
-        "inline-flex items-center justify-center whitespace-nowrap transition-all duration-150 select-none",
+        "inline-flex items-center justify-center whitespace-nowrap transition-all duration-150 select-none active:scale-[0.97]",
         "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-signal/60 disabled:opacity-40 disabled:pointer-events-none",
         variants[variant],
         sizes[size],
diff --git a/services/frontend/src/components/primitives/toast.tsx b/services/frontend/src/components/primitives/toast.tsx
index 4971fcf..55e25d1 100644
--- a/services/frontend/src/components/primitives/toast.tsx
+++ b/services/frontend/src/components/primitives/toast.tsx
@@ -74,8 +74,11 @@ export function Toaster({ position = "bottom-right" }: { position?: string }) {
         return (
           <div
             key={t.id}
-            className="glass pointer-events-auto flex items-start gap-3 p-3.5"
-            style={{ animation: "fade-up 0.18s ease" }}
+            className={cn(
+              "glass animate-toast-in pointer-events-auto flex items-start gap-3 p-3.5 transition-colors",
+              t.tone === "signal" && "border-signal/30",
+              t.tone === "vermilion" && "border-vermilion/30",
+            )}
           >
             <Icon
               className={cn(
@@ -95,11 +98,12 @@ export function Toaster({ position = "bottom-right" }: { position?: string }) {
             </div>
             <button
               type="button"
+              aria-label="Dismiss"
               onClick={() => {
                 store = store.filter((x) => x.id !== t.id);
                 emit();
               }}
-              className="text-ink-faint hover:text-ink"
+              className="rounded-md p-1 text-ink-faint transition-colors hover:bg-white/8 hover:text-ink"
             >
               <X className="size-3.5" />
             </button>
diff --git a/services/frontend/src/components/shared/section.tsx b/services/frontend/src/components/shared/section.tsx
index f5e7e74..80331f9 100644
--- a/services/frontend/src/components/shared/section.tsx
+++ b/services/frontend/src/components/shared/section.tsx
@@ -37,6 +37,7 @@ export function MetricTile({
   spark,
   icon,
   className,
+  style,
 }: {
   label: string;
   value: React.ReactNode;
@@ -45,6 +46,7 @@ export function MetricTile({
   spark?: number[];
   icon?: React.ReactNode;
   className?: string;
+  style?: React.CSSProperties;
 }) {
   const toneColor =
     tone === "vermilion"
@@ -60,6 +62,7 @@ export function MetricTile({
         "glass p-4 ring-focus transition-transform duration-200 hover:-translate-y-0.5",
         className,
       )}
+      style={style}
     >
       <div className="flex items-center justify-between">
         <div className="eyebrow">{label}</div>
diff --git a/services/frontend/src/lib/utils.ts b/services/frontend/src/lib/utils.ts
index 365058c..183cf42 100644
--- a/services/frontend/src/lib/utils.ts
+++ b/services/frontend/src/lib/utils.ts
@@ -4,3 +4,16 @@ import { twMerge } from "tailwind-merge";
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
 }
+
+/**
+ * Returns an inline style that staggers a list item's entrance animation.
+ * Pair with the `animate-stagger` class. Caps the delay so long lists still
+ * appear promptly.
+ */
+export function staggerDelay(
+  index: number,
+  step = 45,
+  max = 600,
+): React.CSSProperties {
+  return { animationDelay: `${Math.min(index * step, max)}ms` };
+}