feat(notifications): add dedicated page and localized rendering

2026-04-29 01:31:15 +03:30
parent 05f2b4a4bb
commit b2101a2e22
8 changed files with 416 additions and 169 deletions
--- a/src/components/notifications/NotificationList.tsx
+++ b/src/components/notifications/NotificationList.tsx
@@ -0,0 +1,105 @@
+import { Trash2 } from "lucide-react";
+
+import type { NotificationItem } from "../../api/notifications";
+import { useTranslation } from "../../hooks/useTranslation";
+import { presentNotification } from "../../lib/notificationPresenter";
+import { cn } from "../../lib/utils";
+
+const formatNotificationTimestamp = (value: string, locale: string) => {
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) {
+    return value;
+  }
+  return new Intl.DateTimeFormat(locale === "fa" ? "fa-IR" : "en-US", {
+    month: "short",
+    day: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+  }).format(date);
+};
+
+export function NotificationList({
+  notifications,
+  emptyLabel,
+  onClick,
+  onDelete,
+  className = "",
+}: {
+  notifications: NotificationItem[];
+  emptyLabel: string;
+  onClick: (notification: NotificationItem) => void;
+  onDelete: (notification: NotificationItem) => void;
+  className?: string;
+}) {
+  const { t, lang } = useTranslation();
+
+  if (notifications.length === 0) {
+    return (
+      <div className={cn("px-4 py-12 text-center text-sm text-slate-500 dark:text-slate-400", className)}>
+        {emptyLabel}
+      </div>
+    );
+  }
+
+  return (
+    <div className={className}>
+      {notifications.map((notification) => {
+        const presented = presentNotification(notification, t);
+
+        return (
+          <div
+            key={notification.id}
+            className={cn(
+              "border-b border-slate-100 px-4 py-3 transition-colors dark:border-slate-800",
+              notification.is_seen
+                ? "bg-white hover:bg-slate-50 dark:bg-slate-900 dark:hover:bg-slate-800/80"
+                : "bg-sky-50/70 hover:bg-sky-100/70 dark:bg-sky-500/10 dark:hover:bg-sky-500/15",
+            )}
+          >
+            <div className="flex items-start gap-3">
+              <button
+                type="button"
+                onClick={() => onClick(notification)}
+                className="flex min-w-0 flex-1 items-start gap-3 text-start"
+              >
+                <span
+                  className={cn(
+                    "mt-1 h-2.5 w-2.5 shrink-0 rounded-full",
+                    notification.is_seen ? "bg-slate-300 dark:bg-slate-700" : "bg-sky-500",
+                  )}
+                />
+                <div className="min-w-0 flex-1">
+                  <div className="flex items-center justify-between gap-3">
+                    <p className="truncate text-sm font-semibold text-slate-900 dark:text-slate-100">
+                      {presented.title}
+                    </p>
+                    <span className="shrink-0 text-xs text-slate-500 dark:text-slate-400">
+                      {formatNotificationTimestamp(notification.created_at, lang)}
+                    </span>
+                  </div>
+                  {presented.message ? (
+                    <p className="mt-1 line-clamp-2 text-sm text-slate-600 dark:text-slate-300">
+                      {presented.message}
+                    </p>
+                  ) : null}
+                </div>
+              </button>
+              <button
+                type="button"
+                onClick={(event) => {
+                  event.stopPropagation();
+                  void onDelete(notification);
+                }}
+                className="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-slate-400 transition-colors hover:bg-red-50 hover:text-red-600 dark:text-slate-500 dark:hover:bg-red-950/40 dark:hover:text-red-400"
+                aria-label={t.notifications?.deleteLabel || "Delete notification"}
+                title={t.notifications?.deleteLabel || "Delete notification"}
+              >
+                <Trash2 className="h-4 w-4" />
+              </button>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}