feat: moderator-scoped admin access + fix push notifications not displaying (v0.66.0)

Moderator role existed in the schema and was already respected by
comment deletion, but every admin page/route treated moderator
identically to a regular user (403/redirect). Wires it up narrowly:
admin/layout.tsx now lets admin+moderator through and filters the
nav by role, while every admin-only page (users, tiers, settings,
webhooks, insights, etc.) explicitly redirects moderators away via a
new requireFullAdminPage() helper -- the nav filter is UX, this is
the actual gate. Moderators land on Reports and Recipes: reports
GET/PATCH now accept requireAdmin({allowModerator: true}), and a new
PATCH /api/v1/admin/recipes/[id] lets admin+moderator unpublish a
public recipe (flip to private) as a takedown action, audit-logged.

Also found and fixed a real bug while auditing the PWA push pipeline
for a "push click-through" gap: public/sw.js had no `push` event
listener at all, so incoming push messages never displayed anything
-- push was silently non-functional end-to-end despite the
subscribe/send plumbing all working. Added the push listener
(showNotification) and a notificationclick listener that focuses an
existing tab or opens one at the payload's url.

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

apps/web/app/admin/ai-config/page.tsx

@@ -3,6 +3,7 @@ import { Badge } from "@/components/ui/badge";
 import { getAllSiteSettings } from "@/lib/site-settings";
 import { AdminSettingsForm } from "@/components/admin/admin-settings-form";
 import { AdminDefaultModelForm } from "@/components/admin/admin-default-model-form";
+import { requireFullAdminPage } from "@/lib/require-admin-page";
 
 export const metadata: Metadata = {};
 
@@ -21,6 +22,7 @@ function resolveProvider(settings: Record<string, { value: string | null }>) {
 }
 
 export default async function AdminAiConfigPage() {
+  await requireFullAdminPage();
   const settings = await getAllSiteSettings();
   const active = resolveProvider(settings);
 

apps/web/app/admin/audit-logs/page.tsx

@@ -1,5 +1,6 @@
 import type { Metadata } from "next";
 import { db, auditLogs, users, eq, desc } from "@epicure/db";
+import { requireFullAdminPage } from "@/lib/require-admin-page";
 
 export const metadata: Metadata = {};
 
@@ -10,6 +11,7 @@ interface PageProps {
 }
 
 export default async function AdminAuditLogsPage({ searchParams }: PageProps) {
+  await requireFullAdminPage();
   const { page: pageParam } = await searchParams;
   const page = Math.max(1, parseInt(pageParam ?? "1", 10));
   const offset = (page - 1) * PAGE_SIZE;

apps/web/app/admin/changelog/page.tsx

@@ -1,10 +1,12 @@
 import type { Metadata } from "next";
 import { ChangelogList } from "@/components/shared/changelog-list";
 import { APP_VERSION } from "@/lib/changelog";
+import { requireFullAdminPage } from "@/lib/require-admin-page";
 
 export const metadata: Metadata = {};
 
-export default function AdminChangelogPage() {
+export default async function AdminChangelogPage() {
+  await requireFullAdminPage();
   return (
     <div className="space-y-6">
       <div>

apps/web/app/admin/insights/page.tsx

@@ -3,6 +3,7 @@ import { db, users, recipes, userUsage, supportTickets, gte, sql } from "@epicur
 import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
 import { BarChart } from "@/components/admin/charts/bar-chart";
 import { TimeSeriesChart } from "@/components/admin/charts/time-series-chart";
+import { requireFullAdminPage } from "@/lib/require-admin-page";
 
 export const metadata: Metadata = {};
 
@@ -35,6 +36,7 @@ function lastNMonths(n: number): string[] {
 }
 
 export default async function AdminInsightsPage() {
+  await requireFullAdminPage();
   const since = new Date();
   since.setDate(since.getDate() - DAYS);
 

apps/web/app/admin/invites/page.tsx

@@ -1,10 +1,12 @@
 import type { Metadata } from "next";
 import { listInvites } from "@/lib/invites";
 import { InvitesManager } from "@/components/admin/invites-manager";
+import { requireFullAdminPage } from "@/lib/require-admin-page";
 
 export const metadata: Metadata = {};
 
 export default async function AdminInvitesPage() {
+  await requireFullAdminPage();
   const invites = await listInvites();
   const appUrl = process.env["BETTER_AUTH_URL"] ?? "http://localhost:3000";
 

apps/web/app/admin/layout.tsx

@@ -1,34 +1,34 @@
-import { redirect } from "next/navigation";
-import { headers } from "next/headers";
-import { auth } from "@/lib/auth/server";
-import { db, users, eq } from "@epicure/db";
 import Link from "next/link";
 import { Shield, Users, BookOpen, Settings, BarChart3, ClipboardList, HardDrive, Bot, ArrowLeft, Gauge, Mail, Flag, History, LifeBuoy, TrendingUp, Webhook } from "lucide-react";
 import { cn } from "@/lib/utils";
+import { getStaffRole } from "@/lib/require-admin-page";
+import { redirect } from "next/navigation";
 
+// adminOnly items are hidden from moderators (and, redundantly but safely,
+// each of those pages also redirects moderators away server-side via
+// requireFullAdminPage — the nav filter here is UX, not the real gate).
 const adminNav = [
-  { href: "/admin", label: "Overview", icon: BarChart3 },
-  { href: "/admin/insights", label: "Insights", icon: TrendingUp },
-  { href: "/admin/users", label: "Users", icon: Users },
-  { href: "/admin/invites", label: "Invites", icon: Mail },
-  { href: "/admin/recipes", label: "Recipes", icon: BookOpen },
-  { href: "/admin/reports", label: "Reports", icon: Flag },
-  { href: "/admin/support", label: "Support", icon: LifeBuoy },
-  { href: "/admin/tiers", label: "Tier Limits", icon: Gauge },
-  { href: "/admin/webhooks", label: "Webhooks", icon: Webhook },
-  { href: "/admin/audit-logs", label: "Audit Logs", icon: ClipboardList },
-  { href: "/admin/storage", label: "Storage", icon: HardDrive },
-  { href: "/admin/ai-config", label: "AI Config", icon: Bot },
-  { href: "/admin/settings", label: "Settings", icon: Settings },
-  { href: "/admin/changelog", label: "Changelog", icon: History },
+  { href: "/admin", label: "Overview", icon: BarChart3, adminOnly: true },
+  { href: "/admin/insights", label: "Insights", icon: TrendingUp, adminOnly: true },
+  { href: "/admin/users", label: "Users", icon: Users, adminOnly: true },
+  { href: "/admin/invites", label: "Invites", icon: Mail, adminOnly: true },
+  { href: "/admin/recipes", label: "Recipes", icon: BookOpen, adminOnly: false },
+  { href: "/admin/reports", label: "Reports", icon: Flag, adminOnly: false },
+  { href: "/admin/support", label: "Support", icon: LifeBuoy, adminOnly: true },
+  { href: "/admin/tiers", label: "Tier Limits", icon: Gauge, adminOnly: true },
+  { href: "/admin/webhooks", label: "Webhooks", icon: Webhook, adminOnly: true },
+  { href: "/admin/audit-logs", label: "Audit Logs", icon: ClipboardList, adminOnly: true },
+  { href: "/admin/storage", label: "Storage", icon: HardDrive, adminOnly: true },
+  { href: "/admin/ai-config", label: "AI Config", icon: Bot, adminOnly: true },
+  { href: "/admin/settings", label: "Settings", icon: Settings, adminOnly: true },
+  { href: "/admin/changelog", label: "Changelog", icon: History, adminOnly: true },
 ];
 
 export default async function AdminLayout({ children }: { children: React.ReactNode }) {
-  const session = await auth.api.getSession({ headers: await headers() });
-  if (!session) redirect("/login");
+  const role = await getStaffRole();
+  if (!role) redirect("/recipes");
 
-  const [dbUser] = await db.select({ role: users.role }).from(users).where(eq(users.id, session.user.id));
-  if (dbUser?.role !== "admin") redirect("/recipes");
+  const visibleNav = role === "admin" ? adminNav : adminNav.filter((item) => !item.adminOnly);
 
   return (
     <div className="flex flex-col md:flex-row min-h-screen">
@@ -36,7 +36,7 @@ export default async function AdminLayout({ children }: { children: React.ReactN
         <div className="flex items-center justify-between gap-2 p-4 border-b font-semibold">
           <span className="flex items-center gap-2">
             <Shield className="h-4 w-4 text-destructive" />
-            Admin
+            {role === "admin" ? "Admin" : "Moderator"}
           </span>
           <Link
             href="/recipes"
@@ -47,7 +47,7 @@ export default async function AdminLayout({ children }: { children: React.ReactN
           </Link>
         </div>
         <nav className="flex overflow-x-auto gap-1 p-2 md:flex-col md:overflow-visible md:flex-1 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
-          {adminNav.map(({ href, label, icon: Icon }) => (
+          {visibleNav.map(({ href, label, icon: Icon }) => (
             <Link
               key={href}
               href={href}

apps/web/app/admin/page.tsx

@@ -6,10 +6,12 @@ import { count, eq, gte, sql } from "@epicure/db";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Users, BookOpen, Sparkles, Image, History, UserPlus, ChefHat, Flag, HardDrive, Webhook, KeyRound } from "lucide-react";
 import { APP_VERSION, CHANGELOG } from "@/lib/changelog";
+import { requireFullAdminPage } from "@/lib/require-admin-page";
 
 export const metadata: Metadata = {};
 
 export default async function AdminPage() {
+  await requireFullAdminPage();
   const currentMonth = new Date().toISOString().slice(0, 7);
   const sevenDaysAgo = new Date(Date.now() - 7 * 24 * 60 * 60 * 1000);
 

apps/web/app/admin/recipes/page.tsx

@@ -2,6 +2,7 @@ import type { Metadata } from "next";
 import { db, recipes, users, eq, desc, count } from "@epicure/db";
 import { Badge } from "@/components/ui/badge";
 import Link from "next/link";
+import { UnpublishRecipeButton } from "@/components/admin/unpublish-recipe-button";
 
 export const metadata: Metadata = {};
 
@@ -61,12 +62,13 @@ export default async function AdminRecipesPage({ searchParams }: PageProps) {
               <th className="px-4 py-3 text-left font-medium">Visibility</th>
               <th className="px-4 py-3 text-left font-medium">Created</th>
               <th className="px-4 py-3 text-left font-medium">Link</th>
+              <th className="px-4 py-3 text-left font-medium">Action</th>
             </tr>
           </thead>
           <tbody>
             {publicRecipes.length === 0 ? (
               <tr>
-                <td colSpan={5} className="px-4 py-8 text-center text-muted-foreground">
+                <td colSpan={6} className="px-4 py-8 text-center text-muted-foreground">
                   No public recipes yet.
                 </td>
               </tr>
@@ -104,6 +106,9 @@ export default async function AdminRecipesPage({ searchParams }: PageProps) {
                       View
                     </Link>
                   </td>
+                  <td className="px-4 py-3">
+                    <UnpublishRecipeButton recipeId={recipe.id} />
+                  </td>
                 </tr>
               ))
             )}

apps/web/app/admin/settings/page.tsx

@@ -2,6 +2,7 @@ import type { Metadata } from "next";
 import { getAllSiteSettings, isSignupsDisabled } from "@/lib/site-settings";
 import { AdminSettingsForm } from "@/components/admin/admin-settings-form";
 import { SignupsToggle } from "@/components/admin/signups-toggle";
+import { requireFullAdminPage } from "@/lib/require-admin-page";
 
 export const metadata: Metadata = {};
 
@@ -25,6 +26,7 @@ const SETTING_GROUPS = [
 ];
 
 export default async function AdminSettingsPage() {
+  await requireFullAdminPage();
   const settings = await getAllSiteSettings();
   const signupsDisabled = await isSignupsDisabled();
 

apps/web/app/admin/storage/page.tsx

@@ -3,10 +3,12 @@ import { db, users, recipePhotos, recipes, eq, desc, sql, count } from "@epicure
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import { HardDrive } from "lucide-react";
+import { requireFullAdminPage } from "@/lib/require-admin-page";
 
 export const metadata: Metadata = {};
 
 export default async function AdminStoragePage() {
+  await requireFullAdminPage();
   const [totalPhotos, recipesWithPhotos, photosByTier, topUsers] = await Promise.all([
     db.select({ count: count() }).from(recipePhotos).then((r) => r[0]),
     db

apps/web/app/admin/support/page.tsx

@@ -2,10 +2,12 @@ import type { Metadata } from "next";
 import { db, supportTickets, desc } from "@epicure/db";
 import { AdminSupportManager } from "@/components/admin/admin-support-manager";
 import { getPublicUrl } from "@/lib/storage";
+import { requireFullAdminPage } from "@/lib/require-admin-page";
 
 export const metadata: Metadata = {};
 
 export default async function AdminSupportPage() {
+  await requireFullAdminPage();
   const rows = await db.query.supportTickets.findMany({
     orderBy: desc(supportTickets.createdAt),
     with: {

apps/web/app/admin/tiers/page.tsx

@@ -3,10 +3,12 @@ import { db, tierDefinitions } from "@epicure/db";
 import { TierLimitsForm } from "@/components/admin/tier-limits-form";
 import { FeatureFlagsForm } from "@/components/admin/feature-flags-form";
 import { getFeatureFlagMatrix, FEATURE_DEFINITIONS } from "@/lib/feature-flags";
+import { requireFullAdminPage } from "@/lib/require-admin-page";
 
 export const metadata: Metadata = {};
 
 export default async function AdminTiersPage() {
+  await requireFullAdminPage();
   const [tiers, featureFlagMatrix] = await Promise.all([
     db.select().from(tierDefinitions),
     getFeatureFlagMatrix(),

apps/web/app/admin/users/[id]/page.tsx

@@ -10,6 +10,7 @@ import { UserEditor } from "@/components/admin/user-editor";
 import { ResetUsageButton } from "@/components/admin/reset-usage-button";
 import Link from "next/link";
 import { ArrowLeft } from "lucide-react";
+import { requireFullAdminPage } from "@/lib/require-admin-page";
 
 export const metadata: Metadata = {};
 
@@ -30,6 +31,7 @@ const TIER_COLORS = {
 } as const;
 
 export default async function AdminUserDetailPage({ params }: PageProps) {
+  await requireFullAdminPage();
   const { id } = await params;
 
   const [user] = await db.select().from(users).where(eq(users.id, id)).limit(1);

apps/web/app/admin/users/page.tsx

@@ -6,6 +6,7 @@ import { Badge } from "@/components/ui/badge";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { CreateUserDialog } from "@/components/admin/create-user-dialog";
 import Link from "next/link";
+import { requireFullAdminPage } from "@/lib/require-admin-page";
 
 export const metadata: Metadata = {};
 
@@ -28,6 +29,7 @@ const TIER_COLORS = {
 } as const;
 
 export default async function AdminUsersPage({ searchParams }: PageProps) {
+  await requireFullAdminPage();
   const { page: pageParam } = await searchParams;
   const page = Math.max(1, parseInt(pageParam ?? "1", 10) || 1);
   const offset = (page - 1) * PAGE_SIZE;

apps/web/app/admin/webhooks/page.tsx

@@ -1,10 +1,12 @@
 import type { Metadata } from "next";
 import { db, adminWebhooks } from "@epicure/db";
 import { AdminWebhooksManager } from "@/components/admin/admin-webhooks-manager";
+import { requireFullAdminPage } from "@/lib/require-admin-page";
 
 export const metadata: Metadata = {};
 
 export default async function AdminWebhooksPage() {
+  await requireFullAdminPage();
   const rows = await db
     .select({
       id: adminWebhooks.id,