Add summary for bill

src/lib/components/Bill.svelte

 <script lang="ts">
+	import BillSummary from "./BillSummary.svelte"
 	interface Props {
 		billHTML: string | undefined
 	}
 
-	let container: HTMLDivElement
+	let container: HTMLDivElement | undefined = $state()
 	let { billHTML }: Props = $props()
 	let resizeObserver: ResizeObserver
 
@@ -117,4 +118,7 @@
 	})
 </script>
 
-<div bind:this={container} class="block h-full w-full"></div>
+<div class="flex h-full w-full flex-col">
+	<BillSummary {billHTML} {container} />
+	<div bind:this={container} class="flex-1 overflow-auto"></div>
+</div>

src/lib/components/BillSummary.svelte

+<script lang="ts">
+	interface Props {
+		billHTML: string | undefined
+		container: HTMLDivElement | undefined
+	}
+
+	let { billHTML, container }: Props = $props()
+
+	let summaryItems = $state<{ id: string; text: string }[]>([])
+	let summaryIsOpen = $state(false)
+
+	function extractAnchors(html: string) {
+		const parser = new DOMParser()
+		const doc = parser.parseFromString(html, "text/html")
+		const links = Array.from(doc.querySelectorAll('a[href^="#_"]'))
+
+		return links
+			.map((link) => {
+				return {
+					id: link.getAttribute("href")?.slice(1) || "",
+					text: link.textContent?.trim() || "",
+				}
+			})
+			.filter((item) => item.id && item.text)
+	}
+
+	$effect(() => {
+		if (!billHTML) return
+		summaryItems = extractAnchors(billHTML)
+	})
+</script>
+
+<div class="sticky top-0 z-10 bg-white p-4 shadow-md">
+	<button
+		class="w-full bg-gray-100 px-4 py-2 text-left font-medium hover:bg-gray-200"
+		onclick={() => (summaryIsOpen = !summaryIsOpen)}
+	>
+		Sommaire
+		<span
+			class="float-right transform transition-transform"
+			class:rotate-180={summaryIsOpen}
+		>
+			▼
+		</span>
+	</button>
+	<ul
+		class="overflow-y-auto transition-all duration-300 ease-in-out"
+		class:max-h-0={!summaryIsOpen}
+		class:max-h-[60vh]={summaryIsOpen}
+	>
+		{#each summaryItems as item}
+			<li>
+				<a
+					href={`#${item.id}`}
+					class="block py-1 text-blue-600 hover:underline"
+					onclick={() => {
+						if (container !== undefined) {
+							const target = container.shadowRoot?.getElementById(item.id)
+							target?.scrollIntoView({ behavior: "smooth" })
+						}
+					}}
+				>
+					{item.text}
+				</a>
+			</li>
+		{/each}
+	</ul>
+</div>

src/routes/bill/[bill]/+page.svelte

@@ -11,7 +11,6 @@
 </script>
 
 <svelte:window bind:innerWidth={screenWidth} />
-<p>{screenWidth}</p>
 <div class="fixed flex min-h-full w-full flex-row overflow-hidden">
 	<div class="h-screen w-1/2 overflow-y-auto"><Bill {billHTML}></Bill></div>
 	<div class="h-screen w-1/2 overflow-y-auto bg-amber-200">