Made of little things.

import { html } from 'lit';
import { editor, type DialogView } from '../editor-controller';
import { bindingLabel } from './key-hint';
import { LightElement } from './light-element';

export class BsShortcutsDialog extends LightElement implements DialogView {
    constructor() {
        super();
        this.watch((s) => s.shortcutsRev);
    }
    connectedCallback() {
        super.connectedCallback();
        editor.ui.shortcuts = this;
    }
    get #dialog() {
        return this.querySelector<HTMLDialogElement>('dialog')!;
    }
    get isOpen() {
        return this.#dialog.open;
    }
    /** Toggle: the shortcut and the Keys button both open and close the list. */
    show() {
        if (this.isOpen) this.close();
        else {
            this.requestUpdate();
            this.#dialog.showModal();
        }
    }
    close() {
        if (this.isOpen) this.#dialog.close();
    }
    render() {
        const states = editor.shortcuts.states();
        const groups = [...new Set(states.map((state) => state.action.group))];
        return html`<dialog id="shortcuts" class="shortcuts-dialog">
            <div class="dialog-head">
                <h2>KEYBOARD SHORTCUTS</h2>
                <button id="shortcuts-close" @click=${() => this.close()}>Close</button>
            </div>
            <p id="shortcuts-source" class="notice">
                ${
                    states.some((state) => state.source === 'host')
                        ? 'Your host manages these keys. Change them in your host’s keyboard settings.'
                        : 'Built-in keys. Shortcuts pause while you type in a field or a window is open.'
                }
            </p>
            <div id="shortcuts-list" class="shortcuts-list">
                ${groups.map(
                    (group) =>
                        html`<section>
                            <h3>${group.toUpperCase()}</h3>
                            <dl>
                                ${states
                                    .filter((state) => state.action.group === group)
                                    .map((state) => {
                                        const label = bindingLabel(state.action.id);
                                        return html`<dt>${state.action.label}</dt>
                                            <dd>
                                                ${
                                                    label
                                                        ? html`<kbd>${label}</kbd>`
                                                        : state.source === 'pending'
                                                          ? 'Connecting…'
                                                          : 'Not assigned'
                                                }
                                            </dd>`;
                                    })}
                            </dl>
                        </section>`,
                )}
            </div>
        </dialog>`;
    }
}
customElements.define('bs-shortcuts-dialog', BsShortcutsDialog);