fix: resolve React Error #310 and refactor admin section

- Fix React bug #33580: remove Suspense boundaries co-located with Link components
- Delete settings/loading.tsx and admin/loading.tsx (root cause of race condition)
- Convert all admin navigation from Next.js Link to anchor tags
- Move admin pages to dedicated (admin) route group
- Add AdminHeader matching main header visual design
- Add AdminSidebar with anchor-based navigation
- Add /api/admin/models route handler (replaces server actions for GET)
- Add /api/debug/client-error for server-side browser error reporting
- Add useNoteRefreshOptional() to fix crash in AdminHeader
- Hide Admin Dashboard menu for non-admin users
- Change app icons from yellow to blue (#3A7CA5) matching brand primary
- Fix admin search bar width to match main header

Made-with: Cursor

memento-note/components/admin-header.tsx

@@ -0,0 +1,141 @@
+'use client'
+
+import { signOut, useSession } from 'next-auth/react'
+import { Shield, Search, Settings, LogOut, User, StickyNote, MessageSquare, FlaskConical, Bot } from 'lucide-react'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+import { NotificationPanel } from './notification-panel'
+import { useLanguage } from '@/lib/i18n'
+
+/**
+ * Admin header — visuellement identique au Header principal.
+ * Utilise exclusivement des <a> (rechargement complet) au lieu de <Link>
+ * pour éviter React Error #310 (bug React #33580 / Next.js #63388).
+ */
+export function AdminHeader() {
+  const { data: session } = useSession()
+  const { t } = useLanguage()
+
+  const user = session?.user
+  const initial = user?.name
+    ? user.name.charAt(0).toUpperCase()
+    : user?.email?.[0]?.toUpperCase() ?? '?'
+
+  return (
+    <header className="flex-none flex items-center justify-between whitespace-nowrap border-b border-solid border-slate-200 dark:border-slate-800 bg-white dark:bg-[#1e2128] px-6 py-3 z-20">
+      {/* ── Logo + Search ── */}
+      <div className="flex items-center gap-8">
+        <a href="/" className="flex items-center gap-3 text-slate-900 dark:text-white group no-underline">
+          <div className="size-8 bg-primary rounded-lg flex items-center justify-center text-primary-foreground shadow-sm group-hover:shadow-md transition-all">
+            <StickyNote className="w-5 h-5" />
+          </div>
+          <h2 className="text-xl font-bold leading-tight tracking-tight">MEMENTO</h2>
+        </a>
+
+        {/* Badge Admin */}
+        <span className="hidden sm:flex items-center gap-1.5 px-2.5 py-0.5 rounded-full bg-primary/10 text-primary text-xs font-semibold">
+          <Shield className="h-3 w-3" />
+          Admin
+        </span>
+
+        {/* Search (décoratif en mode admin) — même taille que l'entête principale */}
+        <label className="hidden md:flex flex-col min-w-40 w-96 !h-10">
+          <div className="flex w-full flex-1 items-stretch rounded-full h-full bg-slate-100 dark:bg-slate-800 border border-transparent">
+            <div className="text-slate-400 dark:text-slate-400 flex items-center justify-center pl-4">
+              <Search className="w-4 h-4" />
+            </div>
+            <input
+              className="form-input flex w-full min-w-0 flex-1 resize-none overflow-hidden bg-transparent border-none text-slate-900 dark:text-white placeholder:text-slate-400 dark:placeholder:text-slate-500 px-3 text-sm focus:ring-0 focus:outline-none"
+              placeholder={t('search.placeholder') || 'Rechercher…'}
+              type="text"
+              disabled
+              aria-label="Recherche désactivée en mode admin"
+            />
+          </div>
+        </label>
+      </div>
+
+      {/* ── Droite : nav + notifs + settings + avatar ── */}
+      <div className="flex flex-1 justify-end gap-2 items-center">
+        {/* Nav pills — toutes en <a> pour éviter la RSC race condition */}
+        <div className="hidden md:flex items-center gap-1 bg-slate-100 dark:bg-slate-800/60 rounded-full px-1.5 py-1">
+          <a
+            href="/chat"
+            className="flex items-center justify-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-medium text-muted-foreground hover:text-foreground transition-colors"
+          >
+            <MessageSquare className="h-3.5 w-3.5" />
+            <span>{t('nav.chat') || 'AI Chat'}</span>
+          </a>
+          <a
+            href="/agents"
+            className="flex items-center justify-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-medium text-muted-foreground hover:text-foreground transition-colors"
+          >
+            <Bot className="h-3.5 w-3.5" />
+            <span>{t('nav.agents') || 'Agents'}</span>
+          </a>
+          <a
+            href="/lab"
+            className="flex items-center justify-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-medium text-muted-foreground hover:text-foreground transition-colors"
+          >
+            <FlaskConical className="h-3.5 w-3.5" />
+            <span>{t('nav.lab') || 'The Lab'}</span>
+          </a>
+        </div>
+
+        {/* Notifications */}
+        <NotificationPanel />
+
+        {/* Settings */}
+        <a
+          href="/settings"
+          className="flex items-center justify-center size-10 rounded-full hover:bg-slate-100 dark:hover:bg-slate-800 text-slate-600 dark:text-slate-300 transition-colors"
+          aria-label="Paramètres"
+        >
+          <Settings className="w-5 h-5" />
+        </a>
+
+        {/* Avatar + menu */}
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <div
+              className="flex items-center justify-center bg-center bg-no-repeat bg-cover rounded-full size-10 ring-2 ring-white dark:ring-slate-700 cursor-pointer shadow-sm hover:shadow-md transition-shadow bg-primary/10 dark:bg-primary/20 text-primary dark:text-primary-foreground"
+              style={user?.image ? { backgroundImage: `url(${(user as any).image})` } : undefined}
+            >
+              {!user?.image && (
+                <span className="text-sm font-semibold">{initial}</span>
+              )}
+            </div>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" className="w-56">
+            <div className="flex items-center justify-start gap-2 p-2">
+              <div className="flex flex-col space-y-1 leading-none">
+                {user?.name && <p className="font-medium">{user.name}</p>}
+                {user?.email && <p className="w-[200px] truncate text-sm text-muted-foreground">{user.email}</p>}
+              </div>
+            </div>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem asChild className="cursor-pointer">
+              <a href="/settings/profile">
+                <User className="mr-2 h-4 w-4" />
+                <span>{t('settings.profile') || 'Profile'}</span>
+              </a>
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem
+              onClick={() => signOut({ callbackUrl: '/' })}
+              className="cursor-pointer text-red-600 focus:text-red-600"
+            >
+              <LogOut className="mr-2 h-4 w-4" />
+              <span>{t('auth.signOut') || 'Se déconnecter'}</span>
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+    </header>
+  )
+}

memento-note/components/admin-providers-wrapper.tsx

@@ -0,0 +1,26 @@
+'use client'
+
+import { LanguageProvider } from '@/lib/i18n/LanguageProvider'
+import type { Translations } from '@/lib/i18n/load-translations'
+import type { ReactNode } from 'react'
+
+interface AdminProvidersWrapperProps {
+  children: ReactNode
+  initialLanguage?: string
+  initialTranslations?: Translations
+}
+
+export function AdminProvidersWrapper({
+  children,
+  initialLanguage = 'en',
+  initialTranslations,
+}: AdminProvidersWrapperProps) {
+  return (
+    <LanguageProvider
+      initialLanguage={initialLanguage as any}
+      initialTranslations={initialTranslations}
+    >
+      {children}
+    </LanguageProvider>
+  )
+}

memento-note/components/admin-sidebar.tsx

@@ -1,6 +1,5 @@
 'use client'
 
-import Link from 'next/link'
 import { usePathname } from 'next/navigation'
 import { LayoutDashboard, Users, Brain, Settings } from 'lucide-react'
 import { cn } from '@/lib/utils'
@@ -55,7 +54,10 @@ export function AdminSidebar({ className }: AdminSidebarProps) {
           const isActive = pathname === item.href || (item.href !== '/admin' && pathname?.startsWith(item.href))
 
           return (
-            <Link
+            // <a> instead of <Link>: avoids Next.js RSC navigation transitions
+            // that trigger React Error #310 (React bug #33580) in production.
+            // Full-page reloads are acceptable for admin navigation.
+            <a
               key={item.href}
               href={item.href}
               className={cn(
@@ -68,7 +70,7 @@ export function AdminSidebar({ className }: AdminSidebarProps) {
             >
               {item.icon}
               <span>{t(item.titleKey)}</span>
-            </Link>
+            </a>
           )
         })}
       </nav>

memento-note/components/error-reporter.tsx

@@ -0,0 +1,53 @@
+'use client'
+
+import { useEffect } from 'react'
+
+/**
+ * Captures unhandled client-side errors and forwards them to the server
+ * so they appear in `docker logs memento-web`. Loaded in the root layout.
+ */
+export function ErrorReporter() {
+  useEffect(() => {
+    function report(payload: object) {
+      fetch('/api/debug/client-error', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(payload),
+        keepalive: true,
+      }).catch(() => {})
+    }
+
+    function onError(event: ErrorEvent) {
+      report({
+        type: 'uncaught-error',
+        message: event.message,
+        filename: event.filename,
+        lineno: event.lineno,
+        colno: event.colno,
+        stack: event.error?.stack ?? null,
+        url: window.location.href,
+        timestamp: new Date().toISOString(),
+      })
+    }
+
+    function onUnhandledRejection(event: PromiseRejectionEvent) {
+      const reason = event.reason
+      report({
+        type: 'unhandled-rejection',
+        message: reason?.message ?? String(reason),
+        stack: reason?.stack ?? null,
+        url: window.location.href,
+        timestamp: new Date().toISOString(),
+      })
+    }
+
+    window.addEventListener('error', onError)
+    window.addEventListener('unhandledrejection', onUnhandledRejection)
+    return () => {
+      window.removeEventListener('error', onError)
+      window.removeEventListener('unhandledrejection', onUnhandledRejection)
+    }
+  }, [])
+
+  return null
+}

memento-note/components/header.tsx

@@ -58,6 +58,7 @@ export function Header({
 
   const noSidebarMode = ['/agents', '/chat', '/lab'].some(r => pathname.startsWith(r))
 
+
   // Track last pushed search to avoid infinite loops
   const lastPushedSearch = useRef<string | null>(null)
 
@@ -421,12 +422,16 @@ export function Header({
                   <span>{t('settings.profile') || 'Profile'}</span>
                 </Link>
               </DropdownMenuItem>
-              <DropdownMenuItem asChild className="cursor-pointer">
-                <Link href="/admin">
-                  <Shield className="mr-2 h-4 w-4" />
-                  <span>{t('nav.adminDashboard')}</span>
-                </Link>
-              </DropdownMenuItem>
+              {(currentUser as any)?.role === 'ADMIN' && (
+                <DropdownMenuItem asChild className="cursor-pointer">
+                  {/* Force hard reload: client-side navigation between (main) and (admin)
+                      route groups triggers React #310 in Next.js 16.x (framework bug). */}
+                  <a href="/admin">
+                    <Shield className="mr-2 h-4 w-4" />
+                    <span>{t('nav.adminDashboard')}</span>
+                  </a>
+                </DropdownMenuItem>
+              )}
               <DropdownMenuItem onClick={() => signOut()} className="cursor-pointer text-red-600 focus:text-red-600">
                 <LogOut className="mr-2 h-4 w-4" />
                 <span>{t('auth.signOut') || 'Sign out'}</span>

memento-note/components/notification-panel.tsx

@@ -11,7 +11,7 @@ import {
 } from '@/components/ui/popover'
 import { getPendingShareRequests, respondToShareRequest } from '@/app/actions/notes'
 import { toast } from 'sonner'
-import { useNoteRefresh } from '@/context/NoteRefreshContext'
+import { useNoteRefreshOptional } from '@/context/NoteRefreshContext'
 import { cn } from '@/lib/utils'
 import { useLanguage } from '@/lib/i18n'
 
@@ -36,7 +36,7 @@ interface ShareRequest {
 }
 
 export function NotificationPanel() {
-  const { triggerRefresh } = useNoteRefresh()
+  const { triggerRefresh } = useNoteRefreshOptional()
   const { t } = useLanguage()
   const [requests, setRequests] = useState<ShareRequest[]>([])
   const [isLoading, setIsLoading] = useState(false)

memento-note/components/sidebar.tsx

@@ -26,7 +26,7 @@ import { useHomeViewOptional } from '@/context/home-view-context'
 import { useEffect, useState } from 'react'
 import { getTrashCount } from '@/app/actions/notes'
 
-const HIDDEN_ROUTES = ['/agents', '/chat', '/lab']
+const HIDDEN_ROUTES = ['/agents', '/chat', '/lab', '/admin']
 
 export function Sidebar({ className, user }: { className?: string, user?: any }) {
   const pathname = usePathname()
@@ -36,10 +36,15 @@ export function Sidebar({ className, user }: { className?: string, user?: any })
   const homeBridge = useHomeViewOptional()
   const [trashCount, setTrashCount] = useState(0)
 
-  // Fetch trash count
+  const searchKey = searchParams.toString()
+
+  // Fetch trash count — skip for hidden/admin routes to avoid dispatching a
+  // Server Action during an ongoing App Router navigation transition, which
+  // would increment React's nested-update counter and trigger Error #310.
   useEffect(() => {
+    if (HIDDEN_ROUTES.some(r => pathname.startsWith(r))) return
     getTrashCount().then(setTrashCount)
-  }, [pathname, searchParams])
+  }, [pathname, searchKey])
 
   // Hide sidebar on Agents, Chat IA and Lab routes
   if (HIDDEN_ROUTES.some(r => pathname.startsWith(r))) return null