Ensure ToC addresses update correctly

Closing and reopening the ToC component shows updates, but it is not responsive to clicks.  This will be fixed in a future commit.

src/lib/components/publications/TableOfContents.svelte

@@ -1,16 +1,13 @@
 <script lang='ts'>
   import { TableOfContents, type TocEntry } from '$lib/components/publications/table_of_contents.svelte';
   import { getContext } from 'svelte';
-  import { Accordion, AccordionItem, Card, SidebarDropdownWrapper, SidebarGroup, SidebarItem } from 'flowbite-svelte';
+  import { Accordion, AccordionItem, SidebarDropdownWrapper, SidebarGroup, SidebarItem } from 'flowbite-svelte';
   import Self from './TableOfContents.svelte';
-  import type { SveltePublicationTree } from './svelte_publication_tree.svelte';
-  import { page } from '$app/state';
 
   export type TocDisplayMode = 'accordion' | 'sidebar';
 
   let {
     displayMode = 'accordion',
-    rootAddress,
     depth,
     onSectionFocused,
   } = $props<{ 
@@ -20,14 +17,22 @@
     onSectionFocused?: (address: string) => void;
   }>();
 
-  let publicationTree = getContext('publicationTree') as SveltePublicationTree;
-  let toc = new TableOfContents(rootAddress, publicationTree, page.url.pathname ?? "");
+  let toc = getContext('toc') as TableOfContents;
 
+  let entries = $derived.by<TocEntry[]>(() => {
   let entries = $derived(
     Array
-      .from(toc.addressMap.values())
-      .filter((entry) => entry.depth === depth)
-  );
+    const newEntries = [];
+    for (const [_, entry] of toc.addressMap) {
+      if (entry.depth !== depth) {
+        continue;
+      }
+
+      newEntries.push(entry);
+    }
+
+    return newEntries;
+  });
 
   function getEntryExpanded(address: string) {
     return toc.getEntry(address)?.expanded;
@@ -76,20 +81,23 @@
   </Accordion>
 {:else}
   <SidebarGroup>
+    <!-- TODO: Clicks on entries aren't reactive. -->
     {#each entries as entry}
       {@const address = entry.address}
       {#if entry.children.length > 0}
+        {@const expanded = getEntryExpanded(address)}
+        {@const childDepth = depth + 1}
         <SidebarDropdownWrapper
           label={entry.title}
           bind:isOpen={
-            () => getEntryExpanded(address),
+            () => expanded,
             (open) => setEntryExpanded(address, open)
           }
         >
           <Self
             displayMode={displayMode}
-            rootAddress={entry.address}
-            depth={depth + 1}
+            rootAddress={address}
+            depth={childDepth}
             onSectionFocused={onSectionFocused}
           />
         </SidebarDropdownWrapper>

src/lib/components/publications/table_of_contents.svelte.ts

@@ -143,8 +143,8 @@ export class TableOfContents {
 
     // TODO: Parallelize this.
     // Handle any other nodes that have already been resolved.
-    this.#publicationTree.resolvedAddresses.forEach(async (address) => {
-      await this.#buildTocEntryFromResolvedNode(address);
+    this.#publicationTree.resolvedAddresses.forEach((address) => {
+      this.#buildTocEntryFromResolvedNode(address);
     });
 
     // Set up an observer to handle progressive resolution of the publication tree.
@@ -173,6 +173,12 @@ export class TableOfContents {
         return;
       }
 
+      const event = await this.#publicationTree.getEvent(entry.address);
+      if (event?.kind !== indexKind) {
+        // TODO: Build ToC entries from HTML markup in this case.
+        return;
+      }
+
       const childAddresses = await this.#publicationTree.getChildAddresses(address);
       for (const childAddress of childAddresses) {
         if (!childAddress) {
@@ -214,13 +220,14 @@ export class TableOfContents {
     return entry;
   }
 
-  async #buildTocEntryFromResolvedNode(address: string) {
+  #buildTocEntryFromResolvedNode(address: string) {
     if (this.addressMap.has(address)) {
       return;
     }
 
-    const entry = await this.#buildTocEntry(address);
+    this.#buildTocEntry(address).then((entry) => {
       this.addressMap.set(address, entry);
+    });
   }
 
   // #endregion

src/lib/data_structures/publication_tree.ts

@@ -70,7 +70,7 @@ export class PublicationTree implements AsyncIterable<NDKEvent | null> {
   constructor(rootEvent: NDKEvent, ndk: NDK) {
     const rootAddress = rootEvent.tagAddress();
     this.#root = {
-      type: this.#getNodeType(rootEvent),
+      type: PublicationTreeNodeType.Branch,
       status: PublicationTreeNodeStatus.Resolved,
       address: rootAddress,
       children: [],

src/routes/publication/+page.svelte

@@ -7,11 +7,14 @@
   import ArticleNav from "$components/util/ArticleNav.svelte";
   import { SveltePublicationTree } from "$lib/components/publications/svelte_publication_tree.svelte";
   import { TableOfContents } from "$lib/components/publications/table_of_contents.svelte";
+  import { page } from "$app/state";
   let { data }: PageProps = $props();
 
   const publicationTree = new SveltePublicationTree(data.indexEvent, data.ndk);
+  const toc = new TableOfContents(data.indexEvent.tagAddress(), publicationTree, page.url.pathname ?? "");
 
   setContext("publicationTree", publicationTree);
+  setContext("toc", toc);
   setContext("asciidoctor", Processor());
 
   // Get publication metadata for OpenGraph tags