feat: render OneNote notebook hierarchy

src/App.tsx

@@ -12,7 +12,9 @@ import {
   SingleSectionNavigation,
 } from './components/SectionNavigation.js';
 import type {
+  OneNoteNotebookNodeDto,
   OneNotePackageDto,
+  OneNotePackagedSectionDto,
   OneNotePageDto,
   OneNoteSectionDto,
 } from './onenote/model/dto.js';
@@ -75,6 +77,32 @@ function uniqueDiagnostics(
   });
 }
 
+function sectionsInNotebookOrder(
+  notebook: OneNotePackageDto
+): OneNotePackagedSectionDto[] {
+  const sectionById = new Map(
+    notebook.sections.map((section) => [section.id, section] as const)
+  );
+  const ordered: OneNotePackagedSectionDto[] = [];
+  const seen = new Set<string>();
+  const visit = (nodes: OneNoteNotebookNodeDto[]) => {
+    for (const node of nodes) {
+      if (node.kind === 'section-group') {
+        visit(node.children);
+        continue;
+      }
+      const section = sectionById.get(node.sectionId);
+      if (section && !seen.has(section.id)) {
+        ordered.push(section);
+        seen.add(section.id);
+      }
+    }
+  };
+  visit(notebook.tree.nodes);
+  ordered.push(...notebook.sections.filter((section) => !seen.has(section.id)));
+  return ordered;
+}
+
 export interface OneNoteApplicationProps {
   createWorkerClient?: () => OneNoteWorkerClient;
 }
@@ -209,17 +237,18 @@ export function OneNoteApplication({
         return;
       }
 
+      const orderedSections = sectionsInNotebookOrder(response.notebook);
       const preferredSection =
-        response.notebook.sections.find(
+        orderedSections.find(
           (section) =>
             section.parseStatus === 'parsed' &&
             section.section !== undefined &&
             section.section.pages.length > 0
         ) ??
-        response.notebook.sections.find(
+        orderedSections.find(
           (section) => section.parseStatus === 'parsed' && section.section
         ) ??
-        response.notebook.sections[0];
+        orderedSections[0];
       setSelectedSectionId(preferredSection?.id);
       setState({
         phase: 'loaded',
@@ -341,6 +370,7 @@ export function OneNoteApplication({
               />
             ) : (
               <PackageNavigation
+                tree={state.source.notebook.tree}
                 sections={state.source.notebook.sections}
                 selectedSectionId={selectedSectionId}
                 selectedPageId={selectedPageId}