---
// list + inspector for a settings page. without js this is a table of contents next to
// every setting written out; the script turns it into one entry at a time.
import Tree from "./Tree.astro";
import type { Doc } from "../lib/docs";
interface Props {
doc: Doc;
}
const { doc } = Astro.props;
const sections = doc.settings!;
---
<div class="pane cfg-pane" data-cfg-pane>
<Tree
label={doc.place.label}
icon={doc.place.icon}
ariaLabel="settings"
mono
groups={sections.map((s) => ({ id: s.id, title: s.title, count: s.settings.length, items: s.settings.map((st) => ({ id: st.key, label: st.key, detail: st.defaultText })) }))}
/>
<div class="cfg-content">
<div class="paper">
<div class="inav" data-inav hidden>
<a class="btn" data-step="-1"></a><span class="grow"></span><a class="btn" data-step="1"></a>
</div>
<article class="prose" data-pagefind-body data-pagefind-meta={`title:${doc.place.label}`} set:html={doc.html} />
</div>
</div>
</div>
<script is:inline>
// the entry the #hash names, or the first, shows from the first paint; settings.ts does the rest
{
const items = [...document.currentScript.previousElementSibling.querySelectorAll(".cfg-item")];
const key = decodeURIComponent(location.hash.slice(1));
(items.find((i) => i.dataset.item === key) ?? items[0])?.classList.add("cur");
}
</script>
<script>
import "../scripts/settings";
</script>