group docs navigation by audience

src/pages/docs/DocsLayout.tsx

@@ -1,7 +1,7 @@
 import { Link, Outlet } from "@tanstack/react-router";
 import { Home } from "lucide-react";
 import { DocsLanguageProvider } from "@/pages/docs/DocsLanguageProvider";
-import { docSections } from "@/pages/docs/docsSections";
+import { docGroups } from "@/pages/docs/docsSections";
 
 export function DocsLayout(): React.JSX.Element {
   return (
@@ -20,22 +20,28 @@ export function DocsLayout(): React.JSX.Element {
           </header>
 
           <nav>
-            {docSections.map((section) => (
-              <Link
-                activeProps={{
-                  className: "docs-nav-item docs-nav-item--active",
-                }}
-                activeOptions={{ exact: true }}
-                className="docs-nav-item"
-                key={section.path}
-                to={section.path}
-              >
-                <span>
-                  <strong>{section.title}</strong>
-                  <small>{section.subtitle}</small>
-                </span>
-                <span className="docs-nav-item__meta">{section.meta}</span>
-              </Link>
+            {docGroups.map((group) => (
+              <section className="docs-nav-group" key={group.label}>
+                <h2>{group.label}</h2>
+
+                {group.sections.map((section) => (
+                  <Link
+                    activeProps={{
+                      className: "docs-nav-item docs-nav-item--active",
+                    }}
+                    activeOptions={{ exact: true }}
+                    className="docs-nav-item"
+                    key={section.path}
+                    to={section.path}
+                  >
+                    <span>
+                      <strong>{section.title}</strong>
+                      <small>{section.subtitle}</small>
+                    </span>
+                    <span className="docs-nav-item__meta">{section.meta}</span>
+                  </Link>
+                ))}
+              </section>
             ))}
           </nav>
         </aside>

src/pages/docs/DocsRouteComponents.tsx

@@ -24,12 +24,24 @@ const LazyDocsTargetArchitecturePage = lazy(() =>
   })),
 );
 
+const LazyDocsTechnicalEditorPage = lazy(() =>
+  import("@/pages/docs/technical-editor/page").then((module) => ({
+    default: module.DocsTechnicalEditorPage,
+  })),
+);
+
 const LazyDocsFeaturesPage = lazy(() =>
   import("@/pages/docs/features/page").then((module) => ({
     default: module.DocsFeaturesPage,
   })),
 );
 
+const LazyDocsEditorPage = lazy(() =>
+  import("@/pages/docs/editor/page").then((module) => ({
+    default: module.DocsEditorPage,
+  })),
+);
+
 export function DocsLayoutRoute(): React.JSX.Element {
   return (
     <Suspense fallback={null}>
@@ -62,6 +74,14 @@ export function DocsTargetArchitectureRoute(): React.JSX.Element {
   );
 }
 
+export function DocsTechnicalEditorRoute(): React.JSX.Element {
+  return (
+    <Suspense fallback={null}>
+      <LazyDocsTechnicalEditorPage />
+    </Suspense>
+  );
+}
+
 export function DocsFeaturesRoute(): React.JSX.Element {
   return (
     <Suspense fallback={null}>
@@ -69,3 +89,11 @@ export function DocsFeaturesRoute(): React.JSX.Element {
     </Suspense>
   );
 }
+
+export function DocsEditorRoute(): React.JSX.Element {
+  return (
+    <Suspense fallback={null}>
+      <LazyDocsEditorPage />
+    </Suspense>
+  );
+}

src/pages/docs/docsSections.ts

@@ -5,29 +5,56 @@ export interface DocSection {
   meta: string;
 }
 
-export const docSections: DocSection[] = [
+export interface DocGroup {
+  label: string;
+  sections: DocSection[];
+}
+
+export const docGroups: DocGroup[] = [
   {
-    path: "/docs",
-    title: "README",
-    subtitle: "Project overview",
-    meta: "01",
+    label: "Technical",
+    sections: [
+      {
+        path: "/docs",
+        title: "README",
+        subtitle: "Project overview",
+        meta: "01",
+      },
+      {
+        path: "/docs/architecture",
+        title: "Current Architecture",
+        subtitle: "Runtime structure",
+        meta: "02",
+      },
+      {
+        path: "/docs/target-architecture",
+        title: "Target Architecture",
+        subtitle: "Next direction",
+        meta: "03",
+      },
+      {
+        path: "/docs/technical-editor",
+        title: "Editor Technical Notes",
+        subtitle: "Implementation details",
+        meta: "04",
+      },
+    ],
   },
   {
-    path: "/docs/architecture",
-    title: "Architecture actuelle",
-    subtitle: "Runtime structure",
-    meta: "02",
-  },
-  {
-    path: "/docs/target-architecture",
-    title: "Architecture cible",
-    subtitle: "Next direction",
-    meta: "03",
-  },
-  {
-    path: "/docs/features",
-    title: "Fonctionnalités",
-    subtitle: "Implemented scope",
-    meta: "04",
+    label: "User",
+    sections: [
+      {
+        path: "/docs/features",
+        title: "Features",
+        subtitle: "Implemented scope",
+        meta: "05",
+      },
+      {
+        path: "/docs/editor",
+        title: "Editor User Guide",
+        subtitle: "Editing workflow",
+        meta: "06",
+      },
+    ],
   },
 ];

src/pages/docs/features/page.tsx

@@ -7,8 +7,8 @@ export function DocsFeaturesPage(): React.JSX.Element {
     <DocsDocument
       content={features}
       frContent={featuresFr}
-      meta="04"
-      title="Fonctionnalités"
+      meta="05"
+      title="Features"
     />
   );
 }