backup page done
This commit is contained in:
287
apps/Frontend/src/components/layout/notification-bell.tsx
Normal file
287
apps/Frontend/src/components/layout/notification-bell.tsx
Normal file
@@ -0,0 +1,287 @@
|
||||
import { useMemo, useState } from "react";
|
||||
import { useMutation, useQuery } from "@tanstack/react-query";
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import { Bell, Check, Loader2 } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from "@/components/ui/dialog";
|
||||
import { apiRequest, queryClient } from "@/lib/queryClient";
|
||||
import { useToast } from "@/hooks/use-toast";
|
||||
import { Notification } from "@repo/db/types";
|
||||
import { formatDateToHumanReadable} from "@/utils/dateUtils";
|
||||
|
||||
const PAGE_SIZE = 5;
|
||||
|
||||
export function NotificationsBell() {
|
||||
const { toast } = useToast();
|
||||
|
||||
// dialog / pagination state (client-side over fetched 20)
|
||||
const [open, setOpen] = useState(false);
|
||||
const [pageIndex, setPageIndex] = useState(0); // 0..N (each page size 5)
|
||||
|
||||
// ------- Single load (no polling): fetch up to 20 latest notifications -------
|
||||
const listQuery = useQuery({
|
||||
queryKey: ["/notifications"],
|
||||
queryFn: async (): Promise<Notification[]> => {
|
||||
const res = await apiRequest("GET", "/api/notifications");
|
||||
if (!res.ok) throw new Error("Failed to fetch notifications");
|
||||
return res.json();
|
||||
},
|
||||
refetchOnWindowFocus: false,
|
||||
staleTime: Infinity,
|
||||
gcTime: Infinity,
|
||||
});
|
||||
|
||||
const all = listQuery.data ?? [];
|
||||
const unread = useMemo(() => all.filter((n) => !n.read), [all]);
|
||||
const unreadCount = unread.length;
|
||||
|
||||
// latest unread for spotlight
|
||||
const latestUnread = unread[0] ?? null;
|
||||
|
||||
// client-side dialog pagination over the fetched 20
|
||||
const totalPages = Math.max(1, Math.ceil(all.length / PAGE_SIZE));
|
||||
const currentPageItems = useMemo(() => {
|
||||
const start = pageIndex * PAGE_SIZE;
|
||||
return all.slice(start, start + PAGE_SIZE);
|
||||
}, [all, pageIndex]);
|
||||
|
||||
// ------- mutations -------
|
||||
const markRead = useMutation({
|
||||
mutationFn: async (id: number) => {
|
||||
const res = await apiRequest("POST", `/api/notifications/${id}/read`);
|
||||
if (!res.ok) throw new Error("Failed to mark as read");
|
||||
},
|
||||
onMutate: async (id) => {
|
||||
// optimistic update in cache
|
||||
await queryClient.cancelQueries({ queryKey: ["/notifications"] });
|
||||
const prev = queryClient.getQueryData<Notification[]>(["/notifications"]);
|
||||
if (prev) {
|
||||
queryClient.setQueryData(
|
||||
["/notifications"],
|
||||
prev.map((n) => (n.id === id ? { ...n, read: true } : n))
|
||||
);
|
||||
}
|
||||
return { prev };
|
||||
},
|
||||
onError: (_e, _id, ctx) => {
|
||||
if (ctx?.prev) queryClient.setQueryData(["/notifications"], ctx.prev);
|
||||
toast({
|
||||
title: "Error",
|
||||
description: "Failed to update notification",
|
||||
variant: "destructive",
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const markAllRead = useMutation({
|
||||
mutationFn: async () => {
|
||||
const res = await apiRequest("POST", "/api/notifications/read-all");
|
||||
if (!res.ok) throw new Error("Failed to mark all as read");
|
||||
},
|
||||
onMutate: async () => {
|
||||
await queryClient.cancelQueries({ queryKey: ["/notifications"] });
|
||||
const prev = queryClient.getQueryData<Notification[]>(["/notifications"]);
|
||||
if (prev) {
|
||||
queryClient.setQueryData(
|
||||
["/notifications"],
|
||||
prev.map((n) => ({ ...n, read: true }))
|
||||
);
|
||||
}
|
||||
return { prev };
|
||||
},
|
||||
onError: (_e, _id, ctx) => {
|
||||
if (ctx?.prev) queryClient.setQueryData(["/notifications"], ctx.prev);
|
||||
toast({
|
||||
title: "Error",
|
||||
description: "Failed to mark all as read",
|
||||
variant: "destructive",
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
// when opening dialog, reset to first page
|
||||
const onOpenChange = async (v: boolean) => {
|
||||
setOpen(v);
|
||||
if (v) {
|
||||
setPageIndex(0);
|
||||
await listQuery.refetch();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="relative">
|
||||
{/* Bell + unread badge */}
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogTrigger asChild>
|
||||
<button
|
||||
aria-label="Notifications"
|
||||
className="relative inline-flex h-10 w-10 items-center justify-center rounded-full hover:bg-gray-100 transition"
|
||||
>
|
||||
<Bell className="h-6 w-6 text-gray-700" />
|
||||
{unreadCount > 0 && (
|
||||
<span className="absolute -top-0.5 -right-0.5 inline-flex min-w-5 h-5 items-center justify-center rounded-full text-xs font-semibold bg-red-600 text-white px-1">
|
||||
{unreadCount > 99 ? "99+" : unreadCount}
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
</DialogTrigger>
|
||||
|
||||
{/* Dialog (client-side pagination over the 20 we already fetched) */}
|
||||
<DialogContent className="sm:max-w-md">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Notifications</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
{listQuery.isLoading ? (
|
||||
<div className="flex items-center justify-center py-10">
|
||||
<Loader2 className="h-5 w-5 animate-spin" />
|
||||
</div>
|
||||
) : all.length === 0 ? (
|
||||
<p className="text-sm text-gray-500">No notifications yet.</p>
|
||||
) : (
|
||||
<>
|
||||
<div className="space-y-2 max-h-80 overflow-y-auto">
|
||||
{currentPageItems.map((n) => (
|
||||
<div
|
||||
key={n.id}
|
||||
className="flex items-start justify-between gap-3 rounded-lg border p-3 hover:bg-gray-50 transition"
|
||||
>
|
||||
<div className="flex-1">
|
||||
<p className="text-sm">{n.message}</p>
|
||||
<p className="mt-1 text-xs text-gray-500">
|
||||
{formatDateToHumanReadable(n.createdAt)}
|
||||
</p>
|
||||
</div>
|
||||
{!n.read ? (
|
||||
<Button
|
||||
size="sm"
|
||||
variant="secondary"
|
||||
onClick={() => markRead.mutate(Number(n.id))}
|
||||
disabled={markRead.isPending}
|
||||
>
|
||||
{markRead.isPending ? (
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
) : (
|
||||
<Check className="h-4 w-4 mr-1" />
|
||||
)}
|
||||
Mark read
|
||||
</Button>
|
||||
) : (
|
||||
<span className="text-xs text-gray-400">Read</span>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="mt-3 flex items-center justify-between">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
disabled={pageIndex === 0}
|
||||
onClick={() => setPageIndex((p) => Math.max(0, p - 1))}
|
||||
>
|
||||
Prev
|
||||
</Button>
|
||||
<div className="text-xs text-gray-500">
|
||||
Page {pageIndex + 1} / {totalPages}
|
||||
</div>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
disabled={pageIndex >= totalPages - 1}
|
||||
onClick={() => setPageIndex((p) => p + 1)}
|
||||
>
|
||||
Next
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="mt-2 flex justify-end">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => markAllRead.mutate()}
|
||||
disabled={markAllRead.isPending}
|
||||
>
|
||||
{markAllRead.isPending && (
|
||||
<Loader2 className="h-4 w-4 animate-spin mr-2" />
|
||||
)}
|
||||
Mark all as read
|
||||
</Button>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
{/* Spotlight: ONE latest unread (animates in; collapses when marked read) */}
|
||||
<AnimatePresence>
|
||||
{latestUnread && (
|
||||
<motion.div
|
||||
key={latestUnread.id}
|
||||
initial={{ opacity: 0, scale: 0.9, y: -6, filter: "blur(6px)" }}
|
||||
animate={{ opacity: 1, scale: 1, y: 0, filter: "blur(0px)" }}
|
||||
exit={{ opacity: 0, scale: 0.95, y: -6, filter: "blur(6px)" }}
|
||||
transition={{ type: "spring", stiffness: 220, damping: 22 }}
|
||||
className="absolute z-50 top-12 right-0 w-[min(92vw,28rem)]"
|
||||
>
|
||||
<div className="relative overflow-hidden rounded-2xl border shadow-xl bg-white">
|
||||
{/* animated halo */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0.15, scale: 0.8 }}
|
||||
animate={{ opacity: [0.15, 0.35, 0.15], scale: [0.8, 1, 0.8] }}
|
||||
transition={{
|
||||
duration: 2.2,
|
||||
repeat: Infinity,
|
||||
ease: "easeInOut",
|
||||
}}
|
||||
className="pointer-events-none absolute inset-0 bg-yellow-200"
|
||||
style={{ mixBlendMode: "multiply" }}
|
||||
/>
|
||||
<div className="relative p-4">
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="shrink-0 mt-0.5">
|
||||
{/* ping dot */}
|
||||
<span className="relative flex h-3 w-3">
|
||||
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-yellow-400 opacity-75" />
|
||||
<span className="relative inline-flex rounded-full h-3 w-3 bg-yellow-500" />
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<p className="text-sm text-gray-900">
|
||||
{latestUnread.message}
|
||||
</p>
|
||||
<p className="mt-1 text-xs text-gray-500">
|
||||
{formatDateToHumanReadable(latestUnread.createdAt)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-3 flex items-center justify-end gap-2">
|
||||
<Button
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
onClick={() => markRead.mutate(Number(latestUnread.id))}
|
||||
disabled={markRead.isPending}
|
||||
>
|
||||
{markRead.isPending ? (
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
) : (
|
||||
<Check className="h-4 w-4 mr-1" />
|
||||
)}
|
||||
Mark as read
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -10,6 +10,7 @@ import {
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
import { useLocation } from "wouter";
|
||||
import { NotificationsBell } from "@/components/layout/notification-bell";
|
||||
|
||||
interface TopAppBarProps {
|
||||
toggleMobileMenu: () => void;
|
||||
@@ -49,14 +50,7 @@ export function TopAppBar({ toggleMobileMenu }: TopAppBarProps) {
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-3">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="relative p-0 h-9 w-9 rounded-full"
|
||||
>
|
||||
<Bell className="h-5 w-5" />
|
||||
<span className="absolute top-0 right-0 w-3 h-3 bg-red-500 rounded-full border-2 border-white"></span>
|
||||
</Button>
|
||||
<NotificationsBell />
|
||||
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
|
||||
Reference in New Issue
Block a user