feat(admin): replace prop-based page title with context provider

src/features/admin/components/AdminPageTitleContext.js

@@ -0,0 +1,18 @@
+'use client';
+
+import { createContext, useContext, useState } from 'react';
+
+const AdminPageTitleContext = createContext({ title: '', setTitle: () => {} });
+
+export function AdminPageTitleProvider({ children }) {
+    const [title, setTitle] = useState('');
+    return (
+        <AdminPageTitleContext.Provider value={{ title, setTitle }}>
+            {children}
+        </AdminPageTitleContext.Provider>
+    );
+}
+
+export function useAdminPageTitle() {
+    return useContext(AdminPageTitleContext);
+}

src/features/admin/components/AdminShell.js

@@ -3,34 +3,36 @@
 import { useState } from 'react';
 import AdminSidebar from './AdminSidebar.js';
 import AdminTop from './AdminTop.js';
+import { AdminPageTitleProvider } from './AdminPageTitleContext.js';
 
-export default function AdminShell({ children, user, onLogout, appName, navigationSections, currentPageTitle }) {
+export default function AdminShell({ children, user, onLogout, appName, navigationSections }) {
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
 
   return (
-    <div className="flex h-screen overflow-hidden bg-white dark:bg-black font-ibm-plex-sans">
+    <AdminPageTitleProvider>
-      <AdminSidebar
+      <div className="flex h-screen overflow-hidden bg-white dark:bg-black font-ibm-plex-sans">
-        isMobileMenuOpen={isMobileMenuOpen}
+        <AdminSidebar
-        setIsMobileMenuOpen={setIsMobileMenuOpen}
-        appName={appName}
-        navigationSections={navigationSections}
-      />
-      <div className="flex-1 flex flex-col min-w-0">
-        <AdminTop
           isMobileMenuOpen={isMobileMenuOpen}
           setIsMobileMenuOpen={setIsMobileMenuOpen}
-          user={user}
-          onLogout={onLogout}
           appName={appName}
           navigationSections={navigationSections}
-          currentPageTitle={currentPageTitle}
         />
-        <main className="flex-1 overflow-y-auto bg-neutral-50 dark:bg-black">
+        <div className="flex-1 flex flex-col min-w-0">
-          <div className="px-8 py-7 pb-32 max-w-[1920px] mx-auto">
+          <AdminTop
-            {children}
+            isMobileMenuOpen={isMobileMenuOpen}
-          </div>
+            setIsMobileMenuOpen={setIsMobileMenuOpen}
-        </main>
+            user={user}
+            onLogout={onLogout}
+            appName={appName}
+            navigationSections={navigationSections}
+          />
+          <main className="flex-1 overflow-y-auto bg-neutral-50 dark:bg-black">
+            <div className="px-8 py-7 pb-32 max-w-[1920px] mx-auto">
+              {children}
+            </div>
+          </main>
+        </div>
       </div>
-    </div>
+    </AdminPageTitleProvider>
   );
 }

src/features/admin/components/AdminTop.js

@@ -6,9 +6,11 @@ import { ChevronDownIcon, User03Icon, DashboardSquare03Icon } from '@zen/core/sh
 import { UserAvatar } from '@zen/core/shared/components';
 import { useRouter, usePathname } from 'next/navigation';
 import { getPages } from '../registry.js';
+import { useAdminPageTitle } from './AdminPageTitleContext.js';
 import { useTheme, getThemeIcon } from '@zen/core/themes';
 
-const AdminTop = ({ isMobileMenuOpen, setIsMobileMenuOpen, user, onLogout, appName = 'ZEN', navigationSections = [], currentPageTitle }) => {
+const AdminTop = ({ isMobileMenuOpen, setIsMobileMenuOpen, user, onLogout, appName = 'ZEN', navigationSections = [] }) => {
+    const { title: currentPageTitle } = useAdminPageTitle();
     const router = useRouter();
     const pathname = usePathname();