---
// haiku's deskbar, laid flat beside the tab: a leaf menu of hydrant elsewhere, then a tray
// with the look (palette, light or dark), the about box and the version
import { icon } from "../lib/icons";
import { LINKS, version } from "../lib/deskbar";
import { THEMES } from "../lib/themes";
import { palettes } from "../lib/palettes";
const { palettes: list } = palettes();
// a chip is the palette's desk with a corner of its selection, light or dark like the page
const swatch = (p: (typeof list)[number]) =>
`--sw-desk: light-dark(${p.chip.light.desk}, ${p.chip.dark.desk}); --sw-select: light-dark(${p.chip.light.select}, ${p.chip.dark.select})`;
---
<div class="deskbar" data-deskbar>
<button class="leaf" type="button" popovertarget="leaf-menu" aria-label="hydrant elsewhere" title="hydrant elsewhere">
<Fragment set:html={icon("globe", 16)} />
</button>
<div class="menu" id="leaf-menu" popover>
{LINKS.map((l) => (
<a href={l.href}><Fragment set:html={icon(l.icon, 16)} /><span class="lbl">{l.label}</span><span class="hint">{l.hint}</span></a>
))}
</div>
<div class="menu" id="look-menu" popover>
<div class="grp">palette</div>
{list.map((p) => (
<button type="button" data-palette-pick={p.id}>
<span class="swatch" style={swatch(p)}></span><span class="lbl">{p.label}</span>{p.kanji && <span class="hint">{p.kanji}</span>}
</button>
))}
<div class="grp">light or dark</div>
{THEMES.map((t) => (
<button type="button" data-theme-set={t.pick}><Fragment set:html={icon(t.icon, 16)} /><span class="lbl">{t.label}</span></button>
))}
</div>
<!-- haiku's about box: who made what this site is built from -->
<div class="about" id="about" popover>
<div class="about-head"><Fragment set:html={icon("hydrant", 32)} /><div><b>hydrant docs</b><span>for hydrant {version()}</span></div></div>
<ul>
<li>icons drawn for hydrant by claude opus 5.5, after <a href="https://www.haiku-os.org/">haiku</a>'s</li>
<li>set in <a href="https://fonts.google.com/specimen/Hanken+Grotesk">hanken grotesk</a> and <a href="https://vercel.com/font">geist mono</a> (SIL OFL 1.1)</li>
<li>seasons from <a href="https://madoromi.moonwit.ch/">madoromi</a> by <a href="https://github.com/the-moonwitch">samhain</a> (MPL 2.0)</li>
<li>hosted on <a href="https://wisp.place/">wisp.place</a> by <a href="https://bsky.app/profile/nekomimi.pet">@nekomimi.pet</a> <3</li>
</ul>
</div>
<div class="tray">
<!-- one chip for the whole look: the palette's desk and selection as the page shows them, or
split into its day and night halves while it follows the system -->
<button class="tray-btn" type="button" data-js-only popovertarget="look-menu" data-look-btn>
<span class="swatch look-chip"></span>
</button>
<button class="tray-btn" type="button" popovertarget="about" aria-label="about these docs" title="about these docs">
<Fragment set:html={icon("info", 16)} />
</button>
<span class="ver">hydrant {version()}</span>
</div>
</div>
<script>
import "../scripts/deskbar";
</script>