fix: full web-modern frontend audit — 17 bugs fixed, AGPL headers, navbar cleanup

CRITICAL: groups/[id] broken JSX nesting preventing tab rendering
HIGH: 3 wrong API endpoints (rsvps, wallet alerts/export), profile null crashes,
  feed tabs showing wrong data, home page double footer + hardcoded unread count
MEDIUM: messages stale closure, search URL sync, preferences save feedback,
  wallet export/alerts UI, feed share button, members connection feedback +
  email privacy + division by zero, security modal shared error state,
  settings missing refreshUser, listings router.push

Also:
- Navbar self-fetches unreadCount (no longer needs prop from every page)
- Removed unreadCount boilerplate from 60+ pages
- Added AGPL v3 copyright headers to 27 files missing them
- Created missing pages: /terms, /listings/[id]/edit, /events/[id]/edit, /groups/[id]/edit

71 files changed, 441 insertions(+), 496 deletions(-)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: jasperfordesq-ai

apps/web-modern/src/app/activity/page.tsx

@@ -78,7 +78,6 @@ function ActivityContent() {
   const [currentPage, setCurrentPage] = useState(1);
   const [totalPages, setTotalPages] = useState(1);
   const [filter, setFilter] = useState<ActivityType>("all");
-  const [unreadCount, setUnreadCount] = useState(0);
 
   const fetchActivity = useCallback(async () => {
     setIsLoading(true);
@@ -108,14 +107,6 @@ function ActivityContent() {
   useEffect(() => {
     fetchActivity();
   }, [fetchActivity]);
-
-  useEffect(() => {
-    api
-      .getUnreadMessageCount()
-      .then((res) => setUnreadCount(res?.count || 0))
-      .catch(() => {});
-  }, []);
-
   const handleFilterChange = (newFilter: ActivityType) => {
     setFilter(newFilter);
     setCurrentPage(1);
@@ -137,7 +128,7 @@ function ActivityContent() {
 
   return (
     <div className="min-h-screen">
-      <Navbar user={user} unreadCount={unreadCount} onLogout={logout} />
+      <Navbar user={user} onLogout={logout} />
       <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
         <div className="mb-8">
           <h1 className="text-3xl font-bold text-white flex items-center gap-3">

apps/web-modern/src/app/assistant/page.tsx

@@ -1,3 +1,8 @@
+// Copyright © 2024–2026 Jasper Ford
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// Author: Jasper Ford
+// See NOTICE file for attribution and acknowledgements.
+
 "use client";
 
 import { useEffect, useState, useRef } from "react";

apps/web-modern/src/app/availability/page.tsx

@@ -67,7 +67,6 @@ function AvailabilityContent() {
   const [slots, setSlots] = useState<Slot[]>([]);
   const [exceptions, setExceptions] = useState<Exception[]>([]);
   const [isLoading, setIsLoading] = useState(true);
-  const [unreadCount, setUnreadCount] = useState(0);
 
   // New slot form
   const [newDay, setNewDay] = useState("1");
@@ -98,10 +97,6 @@ function AvailabilityContent() {
   useEffect(() => {
     fetchData();
   }, [fetchData]);
-  useEffect(() => {
-    api.getUnreadMessageCount().then((res) => setUnreadCount(res?.count || 0));
-  }, []);
-
   const handleAddSlot = async () => {
     try {
       await api.addAvailabilitySlot({
@@ -140,7 +135,7 @@ function AvailabilityContent() {
 
   return (
     <div className="min-h-screen">
-      <Navbar user={user} unreadCount={unreadCount} onLogout={logout} />
+      <Navbar user={user} onLogout={logout} />
       <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
         <div className="mb-8">
           <h1 className="text-3xl font-bold text-white flex items-center gap-3">

apps/web-modern/src/app/blog/[slug]/page.tsx

@@ -37,7 +37,6 @@ function BlogPostContent({ params }: { params: Promise<{ slug: string }> }) {
   const { user, logout } = useAuth();
   const [post, setPost] = useState<BlogPostDetail | null>(null);
   const [isLoading, setIsLoading] = useState(true);
-  const [unreadCount, setUnreadCount] = useState(0);
 
   const fetchPost = useCallback(async () => {
     setIsLoading(true);
@@ -52,13 +51,9 @@ function BlogPostContent({ params }: { params: Promise<{ slug: string }> }) {
   }, [slug]);
 
   useEffect(() => { fetchPost(); }, [fetchPost]);
-  useEffect(() => {
-    api.getUnreadMessageCount().then((res) => setUnreadCount(res?.count || 0));
-  }, []);
-
   return (
     <div className="min-h-screen">
-      <Navbar user={user} unreadCount={unreadCount} onLogout={logout} />
+      <Navbar user={user} onLogout={logout} />
       <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
         <Link href="/blog" className="inline-flex items-center gap-2 text-white/50 hover:text-white mb-6 transition-colors">
           <ArrowLeft className="w-4 h-4" /> Back to Blog

apps/web-modern/src/app/blog/page.tsx

@@ -43,7 +43,6 @@ function BlogContent() {
   const [isLoading, setIsLoading] = useState(true);
   const [currentPage, setCurrentPage] = useState(1);
   const [totalPages, setTotalPages] = useState(1);
-  const [unreadCount, setUnreadCount] = useState(0);
 
   const fetchPosts = useCallback(async () => {
     setIsLoading(true);
@@ -59,13 +58,9 @@ function BlogContent() {
   }, [currentPage]);
 
   useEffect(() => { fetchPosts(); }, [fetchPosts]);
-  useEffect(() => {
-    api.getUnreadMessageCount().then((res) => setUnreadCount(res?.count || 0));
-  }, []);
-
   return (
     <div className="min-h-screen">
-      <Navbar user={user} unreadCount={unreadCount} onLogout={logout} />
+      <Navbar user={user} onLogout={logout} />
       <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
         <div className="mb-8">
           <h1 className="text-3xl font-bold text-white flex items-center gap-3">

apps/web-modern/src/app/connections/page.tsx

@@ -1,3 +1,8 @@
+// Copyright © 2024–2026 Jasper Ford
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// Author: Jasper Ford
+// See NOTICE file for attribution and acknowledgements.
+
 "use client";
 
 import { useEffect, useState, useCallback } from "react";
@@ -43,7 +48,6 @@ function ConnectionsContent() {
   const [filter, setFilter] = useState<ConnectionFilter>("accepted");
   const [currentPage, setCurrentPage] = useState(1);
   const [totalPages, setTotalPages] = useState(1);
-  const [unreadCount, setUnreadCount] = useState(0);
 
   const fetchConnections = useCallback(async () => {
     setIsLoading(true);
@@ -66,11 +70,6 @@ function ConnectionsContent() {
   useEffect(() => {
     fetchConnections();
   }, [fetchConnections]);
-
-  useEffect(() => {
-    api.getUnreadMessageCount().then((res) => setUnreadCount(res?.count || 0));
-  }, []);
-
   const handleAccept = async (connectionId: number) => {
     try {
       await api.respondToConnection(connectionId, "accepted");
@@ -116,7 +115,7 @@ function ConnectionsContent() {
 
   return (
     <div className="min-h-screen">
-      <Navbar user={user} unreadCount={unreadCount} onLogout={logout} />
+      <Navbar user={user} onLogout={logout} />
 
       <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
         {/* Header */}

apps/web-modern/src/app/dashboard/page.tsx

@@ -1,3 +1,8 @@
+// Copyright © 2024–2026 Jasper Ford
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// Author: Jasper Ford
+// See NOTICE file for attribution and acknowledgements.
+
 "use client";
 
 import { useEffect, useState } from "react";
@@ -55,8 +60,8 @@ function DashboardContent() {
   const [balance, setBalance] = useState<WalletBalance | null>(null);
   const [transactions, setTransactions] = useState<Transaction[]>([]);
   const [listings, setListings] = useState<Listing[]>([]);
-  const [unreadCount, setUnreadCount] = useState(0);
   const [gamification, setGamification] = useState<GamificationProfile | null>(null);
+  const [messageCount, setMessageCount] = useState(0);
   const [isLoading, setIsLoading] = useState(true);
 
   useEffect(() => {
@@ -66,14 +71,14 @@ function DashboardContent() {
           api.getBalance(),
           api.getTransactions({ limit: 5 }),
           api.getListings({ status: "active", limit: 4 }),
-          api.getUnreadMessageCount(),
+          api.getUnreadMessageCount().catch(() => ({ count: 0 })),
           api.getGamificationProfile().catch(() => null),
         ]);
 
         setBalance(balanceRes);
         setTransactions(txRes?.data || []);
         setListings(listingsRes?.data || []);
-        setUnreadCount(msgRes?.count || 0);
+        setMessageCount(msgRes?.count || 0);
         if (gamRes?.profile) {
           setGamification(gamRes.profile);
         }
@@ -89,7 +94,7 @@ function DashboardContent() {
 
   return (
     <div className="min-h-screen">
-      <Navbar user={user} unreadCount={unreadCount} onLogout={logout} />
+      <Navbar user={user} onLogout={logout} />
 
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
         {/* Welcome Header */}
@@ -225,7 +230,7 @@ function DashboardContent() {
               <div className="w-10 h-10 rounded-xl bg-cyan-500/20 flex items-center justify-center mb-4">
                 <MessageSquare className="w-5 h-5 text-cyan-400" />
               </div>
-              <p className="text-2xl font-bold text-white">{unreadCount}</p>
+              <p className="text-2xl font-bold text-white">{messageCount}</p>
               <p className="text-sm text-white/50 mb-4">Unread Messages</p>
               <Link href="/messages" className="mt-auto">
                 <Button

apps/web-modern/src/app/error.tsx

@@ -1,3 +1,8 @@
+// Copyright © 2024–2026 Jasper Ford
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// Author: Jasper Ford
+// See NOTICE file for attribution and acknowledgements.
+
 "use client";
 
 import { useEffect } from "react";