Use a reactive map to make ToC entry expansion react on click

src/lib/components/publications/TableOfContents.svelte

@@ -32,17 +32,13 @@
     return newEntries;
   });
 
-  function getEntryExpanded(address: string) {
-    return toc.getEntry(address)?.expanded;
-  }
-
   function setEntryExpanded(address: string, expanded: boolean = false) {
     const entry = toc.getEntry(address);
     if (!entry) {
       return;
     }
 
-    entry.expanded = expanded;
+    toc.expandedMap.set(address, expanded);
     entry.resolveChildren();
   }
 
@@ -57,9 +53,10 @@
   <Accordion multiple>
     {#each entries as entry}
       {@const address = entry.address}
+      {@const expanded = toc.expandedMap.get(address) ?? false}
       <AccordionItem 
         bind:open={
-          () => getEntryExpanded(address),
+          () => expanded,
           (open) => setEntryExpanded(address, open)
         }
       >
@@ -82,8 +79,8 @@
     <!-- TODO: Clicks on entries aren't reactive. -->
     {#each entries as entry}
       {@const address = entry.address}
+      {@const expanded = toc.expandedMap.get(address) ?? false}
       {#if entry.children.length > 0}
-        {@const expanded = getEntryExpanded(address)}
         {@const childDepth = depth + 1}
         <SidebarDropdownWrapper
           label={entry.title}
@@ -103,7 +100,7 @@
         <!-- TODO: Add href -->
         <SidebarItem
           label={entry.title}
-          onclick={() => handleEntryClick(address, !getEntryExpanded(address))}
+          onclick={() => handleEntryClick(address, !expanded)}
         />
       {/if}
     {/each}

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

@@ -10,7 +10,6 @@ export interface TocEntry {
   children: TocEntry[];
   parent?: TocEntry;
   depth: number;
-  expanded: boolean;
   childrenResolved: boolean;
   resolveChildren: () => Promise<void>;
 }
@@ -24,7 +23,8 @@ export interface TocEntry {
  */
 export class TableOfContents {
   public addressMap: SvelteMap<string, TocEntry> = new SvelteMap();
-  
+  public expandedMap: SvelteMap<string, boolean> = new SvelteMap();
+
   #root: TocEntry | null = null;
   #publicationTree: SveltePublicationTree;
   #pagePathname: string;
@@ -92,11 +92,11 @@ export class TableOfContents {
             href,
             depth,
             children: [],
-            expanded: false,
             childrenResolved: true,
             resolveChildren: () => Promise.resolve(),
           };
           parentEntry.children.push(tocEntry);
+          this.expandedMap.set(tocEntry.address, false);
 
           this.buildTocFromDocument(header, tocEntry, depth + 1);
         }
@@ -213,10 +213,10 @@ export class TableOfContents {
       href: `${this.#pagePathname}#${address}`,
       children: [],
       depth,
-      expanded: false,
       childrenResolved: false,
       resolveChildren: resolver,
     };
+    this.expandedMap.set(address, false);
   
     return entry;
   }