handoff-app 1.2.2-6 → 2.0.0-0

package/src/app/components/Navigation/MobileNav.tsx

@@ -7,6 +7,7 @@ import { Button } from '../../components/ui/button';
 import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from '../../components/ui/sheet';
 import { cn } from '../../lib/utils';
 import { useConfigContext } from '../context/ConfigContext';
+import { useNav } from '../context/NavProvider';
 
 const trimSlashes = (input: string): string => {
   return input.replace(/^\/+|\/+$/g, '');
@@ -16,6 +17,7 @@ export function MobileNav() {
   const context = useConfigContext();
   const router = useRouter();
   const { theme, setTheme } = useTheme();
+  const { menu } = useNav();
 
   const toggleTheme = () => {
     if (theme === 'light') {
@@ -48,8 +50,8 @@ export function MobileNav() {
           </SheetTrigger>
         </SheetHeader>
         <div className="mt-8 flex flex-col space-y-4">
-          {context.menu &&
-            context.menu.map((section) => {
+          {menu &&
+            menu.map((section) => {
               const isActive = trimSlashes(router.asPath).startsWith(trimSlashes(section.path));
               return (
                 <Link

package/src/app/components/Navigation/SideNav.tsx

@@ -16,8 +16,9 @@ import {
 } from 'lucide-react';
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '../../components/ui/collapsible';
 
+import Link from 'next/link';
 import { useRouter } from 'next/router';
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import {
   Sidebar,
   SidebarContent,
@@ -30,8 +31,22 @@ import {
   SidebarMenuSub,
   SidebarSeparator,
 } from '../../components/ui/sidebar';
-import { normalizePathForMatch, toAbsolutePath } from '../../lib/utils';
-import { SectionLink } from '../util';
+import { normalizePathForMatch } from '../../lib/utils';
+import { useNav } from '../context/NavProvider';
+
+/**
+ * `next/link` re-applies `basePath`, but the menu item paths already carry the base prefix (built by
+ * the server navigation resolver). Strip the leading base segment once so the link is not
+ * double-prefixed; with no base path this just returns a leading-slash route.
+ */
+const stripBasePath = (p: string): string => {
+  const base = (process.env.HANDOFF_APP_BASE_PATH ?? '').replace(/^\/+|\/+$/g, '');
+  let rel = p.replace(/^\/+/, '');
+  if (base && (rel === base || rel.startsWith(`${base}/`))) {
+    rel = rel.slice(base.length).replace(/^\/+/, '');
+  }
+  return `/${rel}`;
+};
 
 const NormalMenuItem = ({ title, icon, path }) => {
   const router = useRouter();
@@ -39,10 +54,13 @@ const NormalMenuItem = ({ title, icon, path }) => {
   return (
     <SidebarMenuItem>
       <SidebarMenuButton asChild isActive={isActive}>
-        <a href={toAbsolutePath(path)} className="gap-3">
+        {/* Soft (client-side) navigation so moving between entity pages reuses the already-loaded
+            cached nav with no reload/flash. Prefetch is off: each prefetch would invoke the
+            fallback:'blocking' lambda data route, so fetch the target's data on click instead. */}
+        <Link href={stripBasePath(path)} prefetch={false} className="gap-3">
           <MenuIcon icon={icon} isActive={isActive} />
           <span>{title}</span>
-        </a>
+        </Link>
       </SidebarMenuButton>
     </SidebarMenuItem>
   );
@@ -53,8 +71,15 @@ const CollapsibleMenuItem = ({ title, icon, path, menu }) => {
   const isActive = menu.some(
     (item) => normalizePathForMatch(router.asPath).startsWith(normalizePathForMatch(item.path))
   );
+  // Controlled so the active group auto-opens on soft navigation (an uncontrolled `defaultOpen` is
+  // only read on mount and would not re-open the active group when the route changes client-side),
+  // while still letting the user collapse/expand groups manually.
+  const [open, setOpen] = useState(isActive);
+  useEffect(() => {
+    if (isActive) setOpen(true);
+  }, [isActive]);
   return (
-    <Collapsible defaultOpen={isActive} className="group/collapsible">
+    <Collapsible open={open} onOpenChange={setOpen} className="group/collapsible">
       <SidebarMenuItem>
         <CollapsibleTrigger asChild>
           <SidebarMenuButton className="h-9 gap-3">
@@ -118,13 +143,23 @@ const MenuIcon = ({ icon, isActive = false }) => {
   }
 };
 
-const SideNav = ({ menu }: { menu: SectionLink }) => {
+const SideNav = () => {
+  const { current } = useNav();
+  const sections = current?.subSections ?? [];
+
+  // Collapse the sidebar entirely (render nothing, reserve no gutter) when the resolved section has
+  // no renderable content, so the page content goes full width. A `dynamic` slot counts as
+  // renderable even before its entities load, to avoid a full-width → gutter flash in registry mode.
+  const hasContent = sections.some((section) => (section.menu && section.menu.length > 0) || !!section.dynamic);
+  if (!hasContent) {
+    return null;
+  }
+
   return (
     <Sidebar className="sticky left-auto">
       <SidebarContent className="px-4 pt-5">
-        {menu.subSections &&
-          menu.subSections.length > 0 &&
-          menu.subSections.map((section, index) => (
+        {sections.length > 0 &&
+          sections.map((section, index) => (
             <React.Fragment key={index}>
               <SidebarGroup>
                 {!section.path && <SidebarGroupLabel>{section.title}</SidebarGroupLabel>}
@@ -138,7 +173,7 @@ const SideNav = ({ menu }: { menu: SectionLink }) => {
                   </SidebarGroupContent>
                 )}
               </SidebarGroup>
-              {index < menu.subSections.length && <SidebarSeparator className="mx-4" />}
+              {index < sections.length && <SidebarSeparator className="mx-4" />}
             </React.Fragment>
           ))}
       </SidebarContent>

package/src/app/components/NotFound.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+interface NotFoundProps {
+  title?: string;
+  description?: React.ReactNode;
+  linkHref?: string;
+  linkLabel?: string;
+}
+
+const NotFound: React.FC<NotFoundProps> = () => {
+  return (
+    <div className="flex flex-col items-center">
+      <div className="mb-2 text-7xl font-bold text-gray-800 dark:text-white">404</div>
+      <h1 className="mb-4 text-2xl font-semibold text-gray-700 dark:text-gray-300">Oops! Page not found.</h1>
+      <p className="mb-6 max-w-md text-center text-gray-500 dark:text-gray-400">
+        This page doesn&rsquo;t exist or has been moved.
+        <br />
+        Please check the URL or return to the homepage.
+      </p>
+    </div>
+  );
+};
+
+export default NotFound;

package/src/app/components/context/NavProvider.tsx

@@ -0,0 +1,71 @@
+'use client';
+
+import type { NavData, SectionLink } from '@handoff/nav';
+import React, { createContext, useContext, useEffect, useState } from 'react';
+
+export type { NavData, NavEntity } from '@handoff/nav';
+
+interface INavContext {
+  nav: NavData;
+  currentSectionId: string;
+}
+
+const EMPTY_NAV: NavData = { shell: [] };
+const NavContext = createContext<INavContext>({ nav: EMPTY_NAV, currentSectionId: '' });
+const isRegistryMode = process.env.HANDOFF_RUNTIME_MODE === 'registry';
+
+// A module-level fulfilled cache and in-flight guard make the registry refresh a single hard-load
+// operation, including StrictMode remounts. A browser hard reload resets both and observes publishes.
+let cachedNav: NavData | null = null;
+let inFlight: Promise<NavData | null> | null = null;
+
+const loadNav = (): Promise<NavData | null> => {
+  if (cachedNav) return Promise.resolve(cachedNav);
+  if (inFlight) return inFlight;
+  inFlight = fetch(`${process.env.HANDOFF_APP_BASE_PATH ?? ''}/api/docs/nav.json`)
+    .then((res) => (res.ok ? res.json() : null))
+    .then((data: NavData | null) => {
+      if (data) cachedNav = data;
+      return cachedNav;
+    })
+    .catch(() => null)
+    .finally(() => {
+      inFlight = null;
+    });
+  return inFlight;
+};
+
+export const NavProvider: React.FC<{
+  children: React.ReactNode;
+  initialNav?: NavData;
+  currentSectionId?: string;
+}> = ({ children, initialNav = EMPTY_NAV, currentSectionId = '' }) => {
+  // Registry alone owns refresh state. Workspace renders the latest page prop directly, so soft
+  // navigation cannot briefly expose the preceding page's tree and triggers no provider effect.
+  const [registryNav, setRegistryNav] = useState<NavData>(() => cachedNav ?? initialNav);
+
+  useEffect(() => {
+    if (!isRegistryMode || cachedNav) return;
+    let active = true;
+    loadNav().then((data) => {
+      if (active && data) setRegistryNav(data);
+    });
+    return () => {
+      active = false;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const nav = isRegistryMode ? registryNav : initialNav;
+  return <NavContext.Provider value={{ nav, currentSectionId }}>{children}</NavContext.Provider>;
+};
+
+/** The sole view-facing navigation API: one active tree and an exact-match active section. */
+export const useNav = (): { nav: NavData; menu: SectionLink[]; current: SectionLink | null } => {
+  const { nav, currentSectionId } = useContext(NavContext);
+  return {
+    nav,
+    menu: nav.shell,
+    current: nav.shell.find((section) => section.path === currentSectionId) ?? null,
+  };
+};

package/src/app/components/old/Header.tsx

@@ -2,14 +2,14 @@ import { ClientConfig } from '@handoff/types/config';
 import Link from 'next/link';
 import React from 'react';
 import NavLink from '../NavLink';
-import { SectionLink } from '../util';
+import { useNav } from '../context/NavProvider';
 
 interface HeaderProps {
-  menu: SectionLink[];
   config: ClientConfig;
 }
 
-function Header({ menu, config }: HeaderProps) {
+function Header({ config }: HeaderProps) {
+  const { menu } = useNav();
   const [mobile, setMobile] = React.useState('');
   const toggle = () => {
     if (mobile === 'is-active') {