Jonathan
1a612f1808
The Qobuz/Monitor/Discovery help I just added was always-visible and verbose. Replace each with a compact "?" button (new reusable HelpButton) that opens the same content in a popup (reuses the Modal), keeping the settings tabs clean. web tsc + build clean. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
26 lines
688 B
TypeScript
26 lines
688 B
TypeScript
"use client";
|
|
|
|
import { useState, type ReactNode } from "react";
|
|
import { Modal } from "./modal";
|
|
|
|
/** A small "?" affordance that opens its help content in a popup, keeping settings pages
|
|
* uncluttered. */
|
|
export function HelpButton({ title, children }: { title: string; children: ReactNode }) {
|
|
const [open, setOpen] = useState(false);
|
|
return (
|
|
<>
|
|
<button
|
|
type="button"
|
|
className="help-btn"
|
|
aria-label={`Help: ${title}`}
|
|
onClick={() => setOpen(true)}
|
|
>
|
|
?
|
|
</button>
|
|
<Modal open={open} onClose={() => setOpen(false)} title={title}>
|
|
<div className="help-body">{children}</div>
|
|
</Modal>
|
|
</>
|
|
);
|
|
}
|