feat: polish notifications filter and empty state

src/components/NotificationsPageContent.tsx

@@ -1,10 +1,12 @@
 "use client";
 
 import { useCallback, useEffect, useRef, useState } from "react";
-import { ArrowLeft, ChevronDown, Loader2, Trash2 } from "lucide-react";
+import { ArrowLeft, Loader2, Trash2 } from "lucide-react";
+import Image from "next/image";
 import ConfirmAction from "@/components/ConfirmAction";
 import Markdown from "@/components/Markdown";
 import { Button } from "@/components/ui/button";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { useAuth } from "@/contexts/AuthContext";
 import { useNotifications } from "@/contexts/NotificationsContext";
 import { toast } from "@/hooks/use-toast";
@@ -170,26 +172,33 @@ export default function NotificationsPageContent() {
           <h1 className="text-xl font-bold sm:text-2xl">اعلان‌های من</h1>
           <label className="flex items-center gap-3 text-sm">
             <span className="text-muted-foreground">نمایش:</span>
-            <span className="relative">
+            <Select dir="rtl" value={filter} onValueChange={(value) => setFilter(value as ReadFilter)}>
-              <select
+              <SelectTrigger dir="rtl" aria-label="فیلتر اعلان‌ها" className="h-10 min-w-32 rounded-xl bg-background px-3 text-right font-semibold">
-                value={filter}
+                <SelectValue />
-                onChange={(event) => setFilter(event.target.value as ReadFilter)}
+              </SelectTrigger>
-                className="min-w-28 appearance-none rounded-lg border border-transparent bg-transparent py-2 pe-8 ps-2 font-semibold outline-none focus-visible:border-primary"
+              <SelectContent dir="rtl" align="end">
-                aria-label="فیلتر اعلان‌ها"
+                <SelectItem value="all" className="text-right">همه</SelectItem>
-              >
+                <SelectItem value="unread" className="text-right">خوانده‌نشده</SelectItem>
-                <option value="all">همه</option>
+                <SelectItem value="read" className="text-right">خوانده‌شده</SelectItem>
-                <option value="unread">خوانده‌نشده</option>
+              </SelectContent>
-                <option value="read">خوانده‌شده</option>
+            </Select>
-              </select>
-              <ChevronDown className="pointer-events-none absolute end-2 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
-            </span>
           </label>
         </header>
 
         {loading ? (
           <div className="flex items-center justify-center gap-2 py-16 text-muted-foreground"><Loader2 className="h-5 w-5 animate-spin" />در حال بارگذاری اعلان‌ها...</div>
         ) : items.length === 0 ? (
-          <div className="rounded-2xl bg-background px-6 py-16 text-center text-muted-foreground">اعلانی برای نمایش وجود ندارد.</div>
+          <div role="status" className="flex min-h-[22rem] flex-col items-center justify-center rounded-2xl border border-border bg-background px-5 py-10 text-center sm:py-12">
+            <Image
+              src="/images/notifications-empty-state.png"
+              alt=""
+              aria-hidden="true"
+              width={1490}
+              height={1056}
+              className="mb-5 h-auto w-full max-w-[280px] object-contain sm:max-w-[360px]"
+            />
+            <p className="font-semibold text-muted-foreground">اعلانی برای نمایش وجود ندارد.</p>
+          </div>
         ) : (
           <div className="space-y-4">
             {items.map((item) => {