الگوهای کاربری

۱کلاس‌های پنجره — ناوبری واکنش‌گرا

یک DOM، سه چیدمان ناوبری بر اساس عرض نمایشگر (کلاس‌های پنجره MD3). هیچ نسخه جداگانه‌ای برای موبایل وجود ندارد؛ فقط CSS عوض می‌کند.

۲پیش‌نمایش سپس ویرایش

کلیک روی هر رویداد، وظیفه یا تقویم، دیالوگ را در حالت نمایش باز می‌کند: همه داده‌ها فقط‌خواندنی، سریع‌الاسکن، بدون خطر تغییر تصادفی. کاربر با دکمه «ویرایش» به فرم می‌رسد. مسیر «ایجاد» مستقیم به فرم می‌رود — پیش‌نمایش برای موجودهاست.

جابه‌جایی حالت با یک اتریبیوت روی دیالوگ — بدون بستن/بازکردن مجدد:

<div class="dialog" data-mode="view|edit">
  <!-- view: سطرهای فقط‌خواندنی + دکمه ویرایش -->
  <!-- edit: فرم پیش‌پر + ذخیره/انصراف -->
</div>

۳دیالوگ‌ها، برگه‌ها و منوها

سلسله‌مراتب لایه‌های شناور و قواعد مشترک باز/بسته‌شدن.

قواعد مشترک

• — اسکریم ۴۵٪ + بلور ۳px؛ کلیک روی اسکریم = بستن (به‌جز وقتی فرم کثیف است: اول تأیید).
• — قفل اسکرول بدنه و محبوس‌کردن فوکوس در دیالوگ؛ فوکوس به عنصر محرک برمی‌گردد.
• — حذفِ قابل‌بازگردانی به‌جای دیالوگ تأیید، توستِ «بازگردانی» می‌دهد — یک گام کمتر.
• — هم‌زمان فقط یک لایه از هر عمق؛ باز شدن لایه جدید، قبلی را می‌بندد.

۴انتخاب تاریخ جلالی

پاپ‌آور ۲۷۲px که از قرص تاریخ باز می‌شود — همان شبکه ماه، با رفتار کامل تقویمی.

۵فرم‌ها

ترتیب استاندارد فیلدها و قواعد اعتبارسنجی — از دیالوگ رویداد تا ورود.

۶استیت‌های داده

هر سطح داده سه استیت دارد و همه باید طراحی شوند — بارگذاری، خالی، خطا.

۷همگام‌سازی و تعارض

همگام‌سازی پس‌زمینه‌ای است و وقتی خوب کار می‌کند دیده نمی‌شود.

• — پیش‌فرض ساکت: موفقیت همگام‌سازی نه بنر دارد نه توست. آخرین زمان همگام‌سازی فقط در جایگاه کم‌رنگ تنظیمات.
• — تعارض = تنها استیت پرهیاهو: بنر کهربایی زیر نوار بالا → دیالوگ فهرست تعارض‌ها با عنوان، فیلد تغییرکرده و دو تصمیم: «نگه‌داشتن نسخه این دستگاه» / «بازگردانی نسخه سرور».
• — تصمیم هر آیتم مستقل است؛ بعد از تصمیم آخرین آیتم، بنر به‌تنهایی جمع می‌شود.
• — حالت آفلاین: کار بدون وقفه ادامه دارد؛ تعارض‌ها هنگام بازگشت اتصال حل می‌شوند.

۸جستجو

جعبه جستجوی نوار بالا: از حالت فشرده با فوکوس باز می‌شود و نتایج زنده زیر خودش می‌آورد.

۹حالت تاریک

حالت تاریک تعویض توکن است، نه طرح دوم: data-theme="dark" روی ریشه و همه‌چیز خودش درست می‌شود.

۱۰دسترس‌پذیری و نوشتار رابط

نقشه کیبورد

حداقل‌های غیرقابل مذاکره

• — کنتراست متن ≥ ۴٫۵:۱ در هر دو پوسته؛ هاور هرگز متن را کم‌کنتراست‌تر نمی‌کند.
• — :focus-visible حلقه ۲px برند روی هر عنصر قابل فوکوس — بدون حذف outline.
• — هدف لمسی ≥ ۴۴px؛ دکمه‌های آیکونی همیشه aria-label فارسی دارند.
• — prefers-reduced-motion همه انیمیشن‌ها را خاموش می‌کند؛ پیام با حرکت جابه‌جا نمی‌شود.
• — نقش‌های ARIA وضعت‌دار: role="checkbox/switch/dialog" + aria-checked.

نوشتار رابط