المان‌ها را با id های زیر پیدا کنید:

• searchInput
• categoryFilter
• sortSelect
• markAllRead
• unreadCount
• notificationsList

توجه مهم: برخی از این المان‌ها (و همچنین spinner) دارای data-testid هستند که در تست‌ها استفاده می‌شونداز تغییر یا حذف data-testid ها خودداری کنید.

در شروع برنامه:

1. کنترل‌ها (input/select/button) باید غیرفعال باشند.
2. fetchNotificationsData() را صدا بزنید و بعد از دریافت داده:
   • داده‌ها را در state نگه دارید
   • کنترل‌ها را فعال کنید
   • لیست را رندر کنید (بر اساس فیلترهای فعلی)

تابع renderNotifications(list) را پیاده‌سازی کنید:

اگر لیست خالی بود:

• یک <li> با:

  • کلاس empty

  • data-testid="empty"

  • متن: اعلانی یافت نشد

اگر آیتم وجود داشت:

برای هر اعلان:

• یک <li> با:

  • کلاس notif

  • data-testid="notif-item"

  • ویژگی data-id="<id>"

• اگر اعلان خوانده‌شده است:

  • کلاس is-read به <li> اضافه شود

• داخل هر آیتم دو دکمه وجود دارد:

  1. دکمه پین (اختیاری)

     • data-testid="pin-btn"

     • ویژگی aria-pressed="true | false"

  2. دکمه تغییر وضعیت خوانده‌شدن

     • data-testid="toggle-read-btn"

متن دکمه‌ها آزاد است و در تست‌ها بررسی نمی‌شود؛ فقط رفتار آن‌ها مهم است.

عدد داخل المان #unreadCount باید همیشه برابر باشد با:

تعداد اعلان‌هایی که در کل داده‌ها خوانده‌نشده هستند(نه فقط اعلان‌های فیلترشده)

دو نوع فیلتر داریم:

1. جستجو (Search)

• متن واردشده باید (case-insensitive) در title یا body شامل باشد (includes)

2. دسته‌بندی (Category)

• اگر categoryFilter مقدار داشته باشد، فقط همان دسته نمایش داده شود

دو حالت:

• newest : جدیدترین‌ها بالا (createdAt نزولی)
• oldest : قدیمی‌ترین‌ها بالا (createdAt صعودی)

قانون مهم: آیتم‌های پین‌شده همیشه بالاتر از بقیه نمایش داده شوند (قبل از مرتب‌سازی زمانی).

تایپ در searchInput:

• اگر هر دو فیلتر search و category خالی باشند:

  • فوراً رندر انجام شود

  • بدون spinner

  • هر debounce معلق لغو شود

• در غیر این صورت:

  • فوراً spinner نمایش داده شود

  • فیلتر بعد از ۸۰۰ms از آخرین ورودی اعمال شود

تغییر categoryFilter:

• اگر هر دو فیلتر خالی باشند:

  • فوراً و بدون spinner رندر شود

• در غیر این صورت:

  • فوراً spinner

  • اعمال فیلتر بعد از ۳۰۰ms

اگر کاربر قبل از پایان debounce دوباره ورودی بدهد، تایمر قبلی باید ریست شود.

Spinner

تابع showSpinner() باید:

• یک <li> با کلاس spinner-row

• و data-testid="spinner"

• داخل لیست اعلان‌ها نمایش دهد