Made of little things.

import './bs-account';
import { html } from 'lit';
import { runtimeHasDomain } from '../domain-availability.js';
import { editor, guard } from '../editor-controller';
import { keyHint } from './key-hint';
import { LightElement } from './light-element';

export class BsToolbar extends LightElement {
    constructor() {
        super();
        this.watch((s) => [
            s.map,
            s.dirty,
            s.busy,
            s.canUndo,
            s.canRedo,
            s.base,
            s.viewer,
            s.identityLabel,
            s.shortcutsRev,
        ]);
    }
    render() {
        const { map, dirty, busy, canUndo, canRedo, base, viewer } = editor.state;
        const owner = base?.event.pubkey;
        const foreign = Boolean(owner && owner !== viewer);
        return html`<div class="toolbar">
            <div class="toolbar-heading">
                <span class="mission" id="mission">${map.name + (dirty ? ' *' : '')}</span
                ><bs-account id="identity" class="identity"></bs-account>
            </div>
            <button
                id="new-map"
                ?disabled=${busy}
                ${keyHint('map.new')}
                @click=${guard(() => editor.newMap())}
            >
                New
            </button>
            <button
                id="library-open"
                ?disabled=${busy}
                ${keyHint('map.library')}
                @click=${guard(() => editor.openLibrary())}
            >
                Maps
            </button>
            <button
                id="settings-open"
                ?disabled=${busy}
                ${keyHint('map.settings')}
                @click=${() => editor.ui.settings?.show()}
            >
                Settings
            </button>
            <button
                id="undo"
                ?disabled=${!canUndo}
                ${keyHint('edit.undo')}
                @click=${() => editor.undo()}
            >
                Undo
            </button>
            <button
                id="redo"
                ?disabled=${!canRedo}
                ${keyHint('edit.redo')}
                @click=${() => editor.redo()}
            >
                Redo
            </button>
            <button
                id="save-draft"
                ?disabled=${busy || !runtimeHasDomain('storage') || foreign}
                ${keyHint('map.save-draft')}
                @click=${guard(() => editor.saveDraft())}
            >
                Save draft
            </button>
            <button
                id="publish"
                class="primary"
                ?disabled=${
                    busy || !viewer || foreign || !['outbox', 'upload'].every(runtimeHasDomain)
                }
                ${keyHint('map.publish')}
                @click=${guard(() => editor.publish())}
            >
                ${base ? 'Update map' : 'Publish'}
            </button>
            <button
                id="help-open"
                ${keyHint('help.tutorial')}
                @click=${() => editor.ui.help?.show()}
            >
                Help
            </button>
        </div>`;
    }
}
customElements.define('bs-toolbar', BsToolbar);