From 835081c1b98587b0e4db261357c8baae808f0cb3 Mon Sep 17 00:00:00 2001 From: twotalesanimation <80506065+twotalesanimation@users.noreply.github.com> Date: Fri, 19 Jun 2026 13:25:19 +0200 Subject: [PATCH] notifications --- app/api/notifications/[id]/route.ts | 42 +++ app/api/notifications/route.ts | 15 ++ components/notifications/NotificationBell.tsx | 240 ++++++++++++++---- 3 files changed, 242 insertions(+), 55 deletions(-) create mode 100644 app/api/notifications/[id]/route.ts diff --git a/app/api/notifications/[id]/route.ts b/app/api/notifications/[id]/route.ts new file mode 100644 index 0000000..ba7e3ea --- /dev/null +++ b/app/api/notifications/[id]/route.ts @@ -0,0 +1,42 @@ +import { NextResponse } from "next/server"; +import { auth } from "@/auth"; +import { db } from "@/lib/db"; + +// Mark a single notification as read +export async function PATCH( + _req: Request, + { params }: { params: Promise<{ id: string }> } +) { + const session = await auth(); + if (!session?.user) { + return NextResponse.json({ error: "Unauthorized" }, { status: 401 }); + } + + const { id } = await params; + + await db.notification.updateMany({ + where: { id, userId: session.user.id }, + data: { isRead: true }, + }); + + return NextResponse.json({ success: true }); +} + +// Dismiss (delete) a single notification +export async function DELETE( + _req: Request, + { params }: { params: Promise<{ id: string }> } +) { + const session = await auth(); + if (!session?.user) { + return NextResponse.json({ error: "Unauthorized" }, { status: 401 }); + } + + const { id } = await params; + + await db.notification.deleteMany({ + where: { id, userId: session.user.id }, + }); + + return NextResponse.json({ success: true }); +} diff --git a/app/api/notifications/route.ts b/app/api/notifications/route.ts index f304dee..ae5834c 100644 --- a/app/api/notifications/route.ts +++ b/app/api/notifications/route.ts @@ -21,6 +21,7 @@ export async function GET() { return NextResponse.json({ notifications, unreadCount }); } +// Mark all as read export async function PATCH() { const session = await auth(); if (!session?.user) { @@ -34,3 +35,17 @@ export async function PATCH() { return NextResponse.json({ success: true }); } + +// Clear all notifications +export async function DELETE() { + const session = await auth(); + if (!session?.user) { + return NextResponse.json({ error: "Unauthorized" }, { status: 401 }); + } + + await db.notification.deleteMany({ + where: { userId: session.user.id }, + }); + + return NextResponse.json({ success: true }); +} diff --git a/components/notifications/NotificationBell.tsx b/components/notifications/NotificationBell.tsx index 3640f85..5b24293 100644 --- a/components/notifications/NotificationBell.tsx +++ b/components/notifications/NotificationBell.tsx @@ -1,13 +1,23 @@ "use client"; -import { useState, useEffect } from "react"; -import { Bell, Check, CheckCheck } from "lucide-react"; +import { useState, useEffect, useCallback } from "react"; +import { + Bell, + CheckCheck, + Film, + MessageSquare, + CheckCircle2, + XCircle, + AlertCircle, + UserPlus, + Clock, + CornerDownRight, + X, + Trash2, +} from "lucide-react"; import { DropdownMenu, DropdownMenuContent, - DropdownMenuItem, - DropdownMenuLabel, - DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"; import { Button } from "@/components/ui/button"; @@ -26,55 +36,119 @@ interface Notification { createdAt: string; } +const TYPE_CONFIG: Record< + string, + { icon: React.ElementType; color: string; bg: string } +> = { + VERSION_UPLOADED: { icon: Film, color: "text-blue-400", bg: "bg-blue-500/10" }, + FEEDBACK_ADDED: { icon: MessageSquare, color: "text-amber-400", bg: "bg-amber-500/10" }, + SHOT_APPROVED: { icon: CheckCircle2, color: "text-emerald-400", bg: "bg-emerald-500/10" }, + SHOT_REJECTED: { icon: XCircle, color: "text-red-400", bg: "bg-red-500/10" }, + REVISION_REQUESTED: { icon: AlertCircle, color: "text-orange-400", bg: "bg-orange-500/10" }, + COMMENT_REPLY: { icon: CornerDownRight, color: "text-zinc-400", bg: "bg-zinc-500/10" }, + MENTION: { icon: MessageSquare, color: "text-sky-400", bg: "bg-sky-500/10" }, + TASK_ASSIGNED: { icon: UserPlus, color: "text-sky-400", bg: "bg-sky-500/10" }, + TASK_READY_FOR_REVIEW: { icon: Clock, color: "text-purple-400", bg: "bg-purple-500/10" }, + TASK_APPROVED: { icon: CheckCircle2, color: "text-emerald-400", bg: "bg-emerald-500/10" }, + TASK_CHANGES_REQUESTED: { icon: AlertCircle, color: "text-orange-400", bg: "bg-orange-500/10" }, + TASK_OVERDUE: { icon: AlertCircle, color: "text-red-400", bg: "bg-red-500/10" }, +}; + +function getNotificationHref(n: Notification): string | null { + const data = n.data as Record | null; + if (data?.versionId) return `/review/${data.versionId}`; + if (data?.taskId) return `/tasks?highlight=${data.taskId}`; + return null; +} + export function NotificationBell() { const [notifications, setNotifications] = useState([]); + const [unreadCount, setUnreadCount] = useState(0); const [isLoading, setIsLoading] = useState(false); - const unreadCount = notifications.filter((n) => !n.isRead).length; + const [open, setOpen] = useState(false); - const fetchNotifications = async () => { + const fetchNotifications = useCallback(async () => { setIsLoading(true); try { const res = await fetch("/api/notifications"); if (res.ok) { const data = await res.json(); setNotifications(data.notifications ?? []); + setUnreadCount(data.unreadCount ?? 0); } } catch { // silent } finally { setIsLoading(false); } - }; + }, []); + + // Initial load + poll every 30s (skip while panel is open to avoid flicker) + useEffect(() => { + fetchNotifications(); + const interval = setInterval(() => { + if (!open) fetchNotifications(); + }, 30_000); + return () => clearInterval(interval); + }, [fetchNotifications, open]); + + // Refresh full list whenever the panel opens + useEffect(() => { + if (open) fetchNotifications(); + }, [open, fetchNotifications]); const markAllRead = async () => { try { await fetch("/api/notifications", { method: "PATCH" }); setNotifications((prev) => prev.map((n) => ({ ...n, isRead: true }))); + setUnreadCount(0); } catch { // silent } }; - const getNotificationHref = (n: Notification): string | null => { - const data = n.data as Record | null; - if (data?.versionId) return `/review/${data.versionId}`; - return null; + const markOneRead = useCallback( + async (id: string) => { + const n = notifications.find((n) => n.id === id); + if (!n || n.isRead) return; + try { + await fetch(`/api/notifications/${id}`, { method: "PATCH" }); + setNotifications((prev) => + prev.map((n) => (n.id === id ? { ...n, isRead: true } : n)) + ); + setUnreadCount((prev) => Math.max(0, prev - 1)); + } catch { + // silent + } + }, + [notifications] + ); + + const dismiss = async (e: React.MouseEvent, id: string) => { + e.preventDefault(); + e.stopPropagation(); + const wasUnread = notifications.find((n) => n.id === id)?.isRead === false; + try { + await fetch(`/api/notifications/${id}`, { method: "DELETE" }); + setNotifications((prev) => prev.filter((n) => n.id !== id)); + if (wasUnread) setUnreadCount((prev) => Math.max(0, prev - 1)); + } catch { + // silent + } }; - const getNotificationIcon = (type: string): string => { - const icons: Record = { - VERSION_UPLOADED: "đŸŽŦ", - FEEDBACK_ADDED: "đŸ’Ŧ", - SHOT_APPROVED: "✅", - SHOT_REJECTED: "❌", - COMMENT_REPLY: "↩ī¸", - REVISION_REQUESTED: "⚠ī¸", - }; - return icons[type] ?? "🔔"; + const clearAll = async () => { + try { + await fetch("/api/notifications", { method: "DELETE" }); + setNotifications([]); + setUnreadCount(0); + } catch { + // silent + } }; return ( - open && fetchNotifications()}> + - + + + {/* Header */}
- - Notifications - +
+ Notifications + {unreadCount > 0 && ( + + {unreadCount} + + )} +
{unreadCount > 0 && (
- - {isLoading ? ( -
-
+ {/* Notification list */} + + {isLoading && notifications.length === 0 ? ( +
+
) : notifications.length === 0 ? ( -
- -

No notifications

+
+ +

You’re all caught up

) : (
{notifications.map((n) => { const href = getNotificationHref(n); + const cfg = TYPE_CONFIG[n.type] ?? { + icon: Bell, + color: "text-zinc-400", + bg: "bg-zinc-500/10", + }; + const Icon = cfg.icon; - const content = ( - <> - - {getNotificationIcon(n.type)} - -
-

+ const inner = ( +

+ {/* Type icon */} +
+ +
+ + {/* Message + time */} +
+

{n.message}

-

+

{formatRelativeDate(new Date(n.createdAt))}

- {!n.isRead && ( -
- )} - - ); - const className = cn( - "flex gap-3 px-4 py-3 hover:bg-secondary/50 transition-colors cursor-pointer border-b border-border/50 last:border-0", - !n.isRead && "bg-primary/5" + {/* Unread dot */} + {!n.isRead && ( +
+ )} + + {/* Dismiss button */} + +
); if (href) { return ( - - {content} + markOneRead(n.id)} + > + {inner} ); } return ( -
- {content} +
markOneRead(n.id)} + className="cursor-default" + > + {inner}
); })}
)} + + {/* Footer */} + {notifications.length > 0 && ( +
+ +
+ )} );