feat: notifications inbox page

The bell only ever showed the last 30; add a full paginated /notifications
page, per-notification mark-read, and a shared notificationHref helper so
the bell and the page route identically instead of duplicating the logic.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

apps/web/app/(app)/notifications/loading.tsx

@@ -0,0 +1,14 @@
+import { PageHeaderSkeleton, ListRowSkeleton } from "@/components/shared/skeletons";
+
+export default function NotificationsLoading() {
+  return (
+    <div className="space-y-6 max-w-2xl">
+      <PageHeaderSkeleton actions={1} />
+      <div className="space-y-3">
+        {Array.from({ length: 6 }).map((_, i) => (
+          <ListRowSkeleton key={i} />
+        ))}
+      </div>
+    </div>
+  );
+}

apps/web/app/(app)/notifications/page.tsx

@@ -0,0 +1,13 @@
+import type { Metadata } from "next";
+import { headers } from "next/headers";
+import { auth } from "@/lib/auth/server";
+import { NotificationsPageContent } from "@/components/notifications/notifications-page-content";
+
+export const metadata: Metadata = {};
+
+export default async function NotificationsPage() {
+  const session = await auth.api.getSession({ headers: await headers() });
+  if (!session) return null;
+
+  return <NotificationsPageContent />;
+}

apps/web/app/api/v1/notifications/[id]/read/route.ts

@@ -0,0 +1,17 @@
+import { NextResponse } from "next/server";
+import { db, notifications, eq, and } from "@epicure/db";
+import { requireSession } from "@/lib/api-auth";
+
+export async function POST(_req: Request, { params }: { params: Promise<{ id: string }> }) {
+  const { session, response } = await requireSession();
+  if (response) return response;
+
+  const { id } = await params;
+
+  await db
+    .update(notifications)
+    .set({ read: true })
+    .where(and(eq(notifications.id, id), eq(notifications.userId, session!.user.id)));
+
+  return NextResponse.json({ ok: true });
+}

apps/web/app/api/v1/notifications/route.ts

@@ -1,12 +1,18 @@
-import { NextResponse } from "next/server";
+import { NextRequest, NextResponse } from "next/server";
 import { db, notifications, users, eq, and, desc, count } from "@epicure/db";
 import { requireSession } from "@/lib/api-auth";
 
-export async function GET() {
+export async function GET(req: NextRequest) {
   const { session, response } = await requireSession();
   if (response) return response;
 
-  const [rows, unread] = await Promise.all([
+  const { searchParams } = req.nextUrl;
+  const limitRaw = parseInt(searchParams.get("limit") ?? "20");
+  const limit = Math.min(Number.isNaN(limitRaw) ? 20 : Math.max(1, limitRaw), 100);
+  const offsetRaw = parseInt(searchParams.get("offset") ?? "0");
+  const offset = Number.isNaN(offsetRaw) ? 0 : Math.max(0, offsetRaw);
+
+  const [rows, unread, totalRow] = await Promise.all([
     db
       .select({
         id: notifications.id,
@@ -24,12 +30,23 @@ export async function GET() {
       .innerJoin(users, eq(notifications.actorId, users.id))
       .where(eq(notifications.userId, session!.user.id))
       .orderBy(desc(notifications.createdAt))
-      .limit(30),
+      .limit(limit)
+      .offset(offset),
     db
       .select({ total: count() })
       .from(notifications)
       .where(and(eq(notifications.userId, session!.user.id), eq(notifications.read, false))),
+    db
+      .select({ total: count() })
+      .from(notifications)
+      .where(eq(notifications.userId, session!.user.id)),
   ]);
 
-  return NextResponse.json({ notifications: rows, unreadCount: unread[0]?.total ?? 0 });
+  return NextResponse.json({
+    notifications: rows,
+    unreadCount: unread[0]?.total ?? 0,
+    total: totalRow[0]?.total ?? 0,
+    limit,
+    offset,
+  });
 }