homeio

1"use client";
2
3import { Bell, Trash2, CheckCircle2 } from "@/components/icons/platform-icons";
4import { useNotifications } from "@/modules/system/hooks/useNotifications";
5import { cn } from "@/lib/utils";
6import { formatDistanceToNow } from "date-fns";
7import { useState } from "react";
8
9const KIND_DOT: Record<string, string> = {
10  error: "bg-status-red",
11  success: "bg-status-green",
12  info: "bg-primary",
13};
14
15type Filter = "all" | "unread";
16
17export function NotificationsPanel() {
18  const { notifications, unreadCount, markAllRead, clearAll } = useNotifications();
19  const [filter, setFilter] = useState<Filter>("all");
20
21  const visible = filter === "unread" ? notifications.filter((n) => !n.read) : notifications;
22
23  return (
24    <div className="flex h-full flex-col bg-background/60">
25      {/* Toolbar */}
26      <div className="flex shrink-0 items-center justify-between border-b border-glass-border/60 px-4 py-3">
27        <div className="flex items-center gap-1 rounded-lg border border-glass-border/60 bg-background/40 p-0.5">
28          {(["all", "unread"] as Filter[]).map((f) => (
29            <button
30              key={f}
31              onClick={() => setFilter(f)}
32              className={cn(
33                "rounded-md px-3 py-1 text-xs font-medium capitalize transition-colors",
34                filter === f
35                  ? "bg-primary/15 text-primary"
36                  : "text-muted-foreground hover:text-foreground",
37              )}
38            >
39              {f}
40              {f === "unread" && unreadCount > 0 && (
41                <span className="ml-1.5 rounded-full bg-primary/20 px-1.5 py-0.5 text-[10px] text-primary">
42                  {unreadCount}
43                </span>
44              )}
45            </button>
46          ))}
47        </div>
48
49        <div className="flex items-center gap-2">
50          <button
51            onClick={() => markAllRead()}
52            disabled={unreadCount === 0}
53            title="Mark all read"
54            className="flex items-center gap-1.5 rounded-lg px-2.5 py-1.5 text-xs text-muted-foreground transition-colors hover:bg-background/50 hover:text-foreground disabled:opacity-40 disabled:cursor-not-allowed"
55          >
56            <CheckCircle2 className="size-3.5" />
57            Mark all read
58          </button>
59          <button
60            onClick={() => clearAll()}
61            disabled={notifications.length === 0}
62            title="Clear all"
63            className="flex items-center gap-1.5 rounded-lg px-2.5 py-1.5 text-xs text-muted-foreground transition-colors hover:bg-background/50 hover:text-status-red disabled:opacity-40 disabled:cursor-not-allowed"
64          >
65            <Trash2 className="size-3.5" />
66            Clear all
67          </button>
68        </div>
69      </div>
70
71      {/* List */}
72      <div className="flex-1 overflow-y-auto">
73        {visible.length === 0 ? (
74          <div className="flex flex-col items-center justify-center gap-3 py-20 text-center text-muted-foreground">
75            <Bell className="size-10 opacity-20" />
76            <p className="text-sm">
77              {filter === "unread" ? "No unread notifications" : "No notifications"}
78            </p>
79          </div>
80        ) : (
81          <ul className="divide-y divide-glass-border/40">
82            {visible.map((n) => (
83              <li
84                key={n.id}
85                className={cn(
86                  "flex items-start gap-3 px-5 py-4 transition-colors hover:bg-background/30",
87                  !n.read && "bg-primary/5",
88                )}
89              >
90                <span
91                  className={cn(
92                    "mt-1.5 size-2 shrink-0 rounded-full",
93                    n.read ? "bg-muted-foreground/20" : (KIND_DOT[n.kind] ?? "bg-primary"),
94                  )}
95                />
96                <div className="min-w-0 flex-1">
97                  <div className="flex items-baseline justify-between gap-3">
98                    <span className={cn("text-sm font-medium", n.read ? "text-muted-foreground" : "text-foreground")}>
99                      {n.title}
100                    </span>
101                    <span className="shrink-0 text-xs text-muted-foreground/60">
102                      {formatDistanceToNow(new Date(n.createdAt), { addSuffix: true })}
103                    </span>
104                  </div>
105                  <p className="mt-0.5 text-sm text-muted-foreground">{n.body}</p>
106                </div>
107              </li>
108            ))}
109          </ul>
110        )}
111      </div>
112    </div>
113  );
114}
115