افزودن سیستم Motion به تمام بخش‌های رابط کاربری

واژگان مشترک حرکت در globals.css: شش @keyframes و شش کلاس .anim-*
به‌همراه .anim-stagger برای ورود آبشاری. همهٔ مدت‌زمان‌ها پشت custom
property هستند تا یک override کل اپ را تنظیم کند.

- packages/ui: Button، Card، Stat، Loading/Empty/ErrorState، UsageBar،
  Timeline، Modal، Drawer، Table، ToastStack و ArtifactViewer
- ریشهٔ هر صفحهٔ (app) با .anim-stagger وارد می‌شود
- AppShell: محتوا fade، منوی کنار stagger، منوهای کشویی slide-up
- prefers-reduced-motion مدت‌زمان‌ها را به ۰.۰۱ms می‌رساند تا
  وضعیت پایانی حفظ شود
- قرارداد motion در src/test/motion.test.tsx تست می‌شود تا
  بازنویسی بعدی آن را بی‌صدا حذف نکند
- تست‌های فرانت‌اند: ۳۵ ← ۴۵
This commit is contained in:
mjalmoudy94
2026-10-13 02:48:59 +03:30
parent 55b9055b50
commit df2c8546db
29 changed files with 381 additions and 57 deletions
+2 -2
View File
@@ -183,7 +183,7 @@ export default function TracesPage() {
const failed = rows.filter((r) => r.run.status === "failed" || r.run.status === "timed_out").length;
return (
<div className="flex flex-col gap-5">
<div className="anim-stagger flex flex-col gap-5">
<header className="flex flex-col gap-1">
<h1 className="text-lg font-medium text-slate-100">ردیابی و رویدادها</h1>
<p className="text-sm text-slate-400">
@@ -206,7 +206,7 @@ export default function TracesPage() {
{rows.length === 0 ? (
<p className="mt-3 text-xs text-slate-500">هنوز اجرایی ثبت نشده است.</p>
) : (
<ul className="mt-3 flex flex-col gap-2">
<ul className="anim-stagger mt-3 flex flex-col gap-2">
{rows.map(({ run, taskId, taskTitle }) => (
<li key={run.id}>
<button