@things-factory/board-ui 10.1.41 → 10.1.44

package/dist-client/viewparts/board-basic-info.js

@@ -1,164 +1,233 @@
 import { __decorate, __metadata } from "tslib";
 import '@material/web/icon/icon.js';
-import '@material/web/textfield/filled-text-field.js';
-import '@material/web/select/outlined-select';
-import '@material/web/button/elevated-button.js';
+import '@material/web/iconbutton/icon-button.js';
+import '@material/web/button/filled-button.js';
+import '@material/web/button/outlined-button.js';
+import '@material/web/button/text-button.js';
 import '@material/web/chips/chip-set.js';
-import '@material/web/chips/assist-chip.js';
 import '@material/web/chips/filter-chip.js';
-import '@material/web/radio/radio.js';
+import '@material/web/menu/menu.js';
+import '@material/web/menu/menu-item.js';
+import '@material/web/divider/divider.js';
+import '@operato/input/ox-input-select-buttons.js';
 import gql from 'graphql-tag';
 import { css, html, LitElement, nothing } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
+import { customElement, property, query, state } from 'lit/decorators.js';
 import { i18next } from '@operato/i18n';
 import { client } from '@operato/graphql';
 import { navigate, AppController } from '@operato/shell';
 import { OxPrompt } from '@operato/popup/ox-prompt.js';
+import { CommonPopupStyles } from '@operato/styles';
 import { hasPrivilege } from '@things-factory/auth-base/dist-client';
-import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles';
 import { notify } from '../utils/notify-helper.js';
+import { timeAgo } from '../utils/board-meta.js';
+import { InfoFormStyles } from './info-dialog-styles.js';
+/**
+ * The basic tab of the board dialog.
+ *
+ * ## The shape, and why
+ *
+ * Three kinds of thing used to share one scrolling form: fields that wait for Save, actions that
+ * happen the moment you touch them (release, join a play group), and a copy-to-domain panel hidden
+ * behind a caret next to the name. The Save button sat in the middle of all that and scrolled out
+ * of view on a short screen.
+ *
+ * Now the dialog reads top to bottom as: what this is (a status band), what you can change (the
+ * form, committed by Save), where it plays (membership chips, which apply at once and say so), and
+ * a footer that never scrolls away: the primary Save, the way into the modeller, and everything
+ * else - duplicate, export, release, delete - behind one "more" menu so the footer stays two
+ * buttons wide. Duplicate opens its own small panel with its own Copy and Cancel.
+ *
+ * ## Colour
+ *
+ * The accent (board's earth brown) is spent on three things only: the filled Save, the selected
+ * segment, and the pressed play-group chip. Everything else is the neutral scale - the status band
+ * is a low surface, the draft pill a warm secondary container, released a soft tertiary green -
+ * so the one thing you are meant to press is the one thing in colour.
+ */
 let BoardInfo = class BoardInfo extends LitElement {
     constructor() {
         super(...arguments);
         this.boardGroupList = [];
         this.playGroupList = [];
-        this.showTarget = false;
+        this.duplicating = false;
         this.enableModeller = false;
         this._appCtrl = new AppController(this);
         this.targetDomains = [];
         this.targetGroups = [];
     }
     static { this.styles = [
-        MDTypeScaleStyles,
+        CommonPopupStyles,
+        InfoFormStyles,
         css `
       :host {
-        position: relative;
-        display: block;
-        background-color: var(--md-sys-color-surface);
-        color: var(--md-sys-color-on-surface);
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        min-height: 0;
+        padding: 0;
+        gap: 0;
+        background: var(--info-dialog-surface, var(--md-sys-color-surface-container-lowest, var(--md-sys-color-surface)));
+      }
 
-        --md-filled-field-top-space: 12px;
-        --md-filled-field-bottom-space: 12px;
-        --md-filled-field-leading-space: 12px;
-        --md-filled-field-trailing-space: 12px;
+      /* What this is: state, version, freshness, home group - one quiet line under the tabs. */
+      .what {
+        flex: none;
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: 6px 10px;
+        margin: var(--spacing-medium, 8px) var(--popup-padding) 0;
+        padding: 7px 10px;
+        border-radius: var(--md-sys-shape-corner-small, 6px);
+        background: var(--md-sys-color-surface-container-low);
+        color: var(--md-sys-color-on-surface-variant);
+        font-size: var(--popup-font-size-small);
+      }
 
-        --md-outlined-field-top-space: 12px;
-        --md-outlined-field-bottom-space: 12px;
-        --md-outlined-field-leading-space: 12px;
-        --md-outlined-field-trailing-space: 12px;
+      .what [pill] {
+        padding: 1px 8px;
+        border-radius: 999px;
+        font-size: 0.66rem;
+        font-weight: 600;
+        letter-spacing: 0.06em;
+        text-transform: uppercase;
+        color: var(--md-sys-color-on-secondary-container);
+        background: var(--md-sys-color-secondary-container);
       }
 
-      /*
-       * 썸네일은 **일정한 자리**를 차지해야 한다.
-       *
-       * 이전에는 max-width: 100% 만 있어서, 원본이 패널보다 작은 보드는 원본 크기로 그려졌다.
-       * 그래서 보드마다 이미지 폭이 달라지고 오른쪽에 빈 공간이 남았다(꽉 찬 보드도 있고
-       * 절반만 차는 보드도 있었다).
-       *
-       * width: 100% + aspect-ratio 로 자리를 고정하고, 이미지는 그 안에서 **가운데** 놓는다.
-       * 남는 여백은 흰색이 아니라 표면 토큰으로 채운다.
-       *
-       * contain 이 아니라 scale-down 인 이유: contain 은 작은 이미지를 자리에 맞게 **확대**해서
-       * 흐려진다. scale-down 은 큰 이미지는 줄이고 작은 이미지는 원본 크기를 지키며, 어느 쪽이든
-       * object-position 기본값(50% 50%)으로 가운데 놓인다.
-       */
-      img {
-        display: block;
-        width: 100%;
-        aspect-ratio: 16 / 9;
-        object-fit: scale-down;
-        object-position: center;
-        background-color: var(--md-sys-color-surface-container-low);
-        /* rgba(0,0,0,.1) 은 다크에서 보이지 않는다 */
-        border-bottom: 1px solid var(--md-sys-color-outline-variant);
+      .what [pill][released] {
+        color: var(--md-sys-color-on-tertiary-container);
+        background: var(--md-sys-color-tertiary-container);
       }
 
-      form {
-        display: grid;
-        grid-template-columns: repeat(12, 1fr);
-        grid-gap: 10px 0;
-        grid-auto-rows: minmax(24px, auto);
-        padding: var(--spacing-large);
-        align-items: center;
+      .what [dot]::before {
+        content: '·';
+        margin-right: 10px;
+        color: var(--md-sys-color-outline);
       }
 
-      md-outlined-select,
-      md-filled-text-field {
-        flex: 1;
-        padding: 4px 0;
-        min-width: unset;
+      .what b {
+        font-weight: 500;
+        color: var(--md-sys-color-on-surface);
       }
 
-      md-chip-set {
+      [body] {
         flex: 1;
+        min-height: 0;
+        overflow-y: auto;
         display: flex;
-        gap: 4px;
+        flex-direction: column;
+        gap: var(--spacing-medium, 8px);
+        padding: var(--spacing-medium, 8px) var(--popup-padding) var(--popup-padding);
       }
 
-      fieldset {
-        display: contents;
+      .fields .row {
+        display: flex;
+        gap: var(--spacing-medium, 8px);
       }
 
-      legend {
-        grid-column: span 12;
-        padding: var(--legend-padding);
-        color: var(--md-sys-color-on-surface);
-        text-transform: capitalize;
+      .fields .row > label {
+        flex: 1;
+        min-width: 0;
       }
 
-      fieldset:not(:first-of-type) > legend {
-        border-top: 1px solid gray;
+      /* A choice of three reads faster as a segmented row than as three radios with labels. */
+      ox-input-select-buttons {
+        --md-filter-chip-container-height: 30px;
+        --md-filter-chip-label-text-size: 0.76rem;
       }
 
-      label {
-        text-transform: capitalize;
+      .chips {
+        --md-filter-chip-container-height: 28px;
+        --md-filter-chip-label-text-size: 0.74rem;
+        --md-filter-chip-outline-color: var(--md-sys-color-outline-variant);
+        --md-filter-chip-label-text-color: var(--md-sys-color-on-surface-variant);
+        --md-filter-chip-selected-container-color: var(--md-sys-color-primary-container);
+        --md-filter-chip-selected-label-text-color: var(--md-sys-color-on-primary-container);
+        --md-filter-chip-selected-leading-icon-color: var(--md-sys-color-on-primary-container);
       }
 
-      md-icon[dim] {
-        font-variation-settings: 'FILL' 1;
-        --md-icon-size: 14px;
-        color: var(--md-sys-color-outline-variant);
+      /* The duplicate panel is a small task inside the dialog: inset, with its own commit. */
+      [duplicate] {
+        display: flex;
+        flex-direction: column;
+        gap: var(--spacing-medium, 8px);
+        padding: var(--spacing-medium, 8px) var(--spacing-medium, 8px) var(--spacing-small, 4px);
+        border: 1px solid var(--md-sys-color-outline-variant);
+        border-radius: var(--md-sys-shape-corner-small, 6px);
+        background: var(--md-sys-color-surface-container-low);
       }
 
-      [name] {
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
+      [duplicate] .section {
+        margin-top: 0;
       }
 
-      [danger] {
-        --md-assist-chip-elevated-container-color: var(--md-sys-color-error);
-        --md-assist-chip-label-text-color: var(--md-sys-color-on-error);
-        --md-assist-chip-leading-icon-color: var(--md-sys-color-on-error);
+      [duplicate] .buttons {
+        border-top: 0;
+        padding-top: 0;
       }
 
-      [fullwidth] {
-        grid-column: span 12 / auto;
-        display: flex;
-        flex-direction: column;
-        gap: 4px;
+      /* The footer stays put while the body scrolls. */
+      [footer] {
+        flex: none;
+        padding: var(--spacing-medium, 8px) var(--popup-padding);
+        border-top: 1px solid var(--md-sys-color-outline-variant);
+        background: var(--info-dialog-surface, var(--md-sys-color-surface-container-lowest, var(--md-sys-color-surface)));
       }
 
-      [oneline] {
-        grid-column: span 12 / auto;
-        display: flex;
-        flex-direction: row;
-        gap: 4px;
+      [footer] .buttons {
+        border-top: 0;
+        padding-top: 0;
+        margin-top: 0;
         align-items: center;
       }
 
-      [oneline] md-filled-text-field,
-      [oneline] select {
-        flex: 1;
+      [footer] [more] {
+        position: relative;
       }
 
-      [right] {
-        margin-left: auto;
+      md-menu {
+        min-width: 220px;
+        --md-menu-container-color: var(--md-sys-color-surface-container-lowest, #fff);
+        --md-menu-container-shape: 10px;
+        --md-menu-item-one-line-container-height: 40px;
+        --md-menu-item-two-line-container-height: 52px;
+        --md-menu-item-label-text-size: 0.84rem;
+        --md-menu-item-supporting-text-size: 0.72rem;
+        --md-menu-item-leading-space: 14px;
+        --md-menu-item-trailing-space: 14px;
       }
 
-      @media screen and (max-width: 460px) {
-        :host {
-          width: 100vw;
+      md-menu-item[cap] [slot='headline'] {
+        text-transform: capitalize;
+      }
+
+      md-menu-item md-icon[slot='start'] {
+        --md-icon-size: 18px;
+      }
+
+      md-menu-item[danger] {
+        --md-menu-item-label-text-color: var(--md-sys-color-error);
+        --md-menu-item-leading-icon-color: var(--md-sys-color-error);
+      }
+
+      md-icon-button {
+        --md-icon-button-icon-color: var(--md-sys-color-on-surface-variant);
+      }
+
+      @media (pointer: coarse) {
+        [footer] {
+          padding: 0;
+        }
+
+        [footer] .buttons {
+          margin: 0;
+          border-top: 0;
+        }
+
+        [footer] [more] {
+          flex: 0 0 auto;
         }
       }
     `
@@ -166,255 +235,200 @@ let BoardInfo = class BoardInfo extends LitElement {
     render() {
         const board = this.board || { name: '', description: '', playGroups: [] };
         const boardGroupList = this.boardGroupList || [];
-        const playGroupList = (this.playGroupList || []).map(group => {
-            return {
-                ...group,
-                checked: false
-            };
-        });
-        (board.playGroups || []).map(group => {
-            const playGroup = playGroupList.find(g => g.id == group.id);
-            if (playGroup) {
-                playGroup.checked = true;
-            }
-        });
+        const memberOf = new Set((board.playGroups || []).map(group => group.id));
+        const editable = !!this.enableModeller;
         return html `
-      ${board.thumbnail ? html ` <img src=${board.thumbnail} /> ` : html ``}
-
-      <form class="md-typescale-body-medium">
-        <fieldset>
-          <legend class="md-typescale-label-large-prominent">${i18next.t('label.information')}</legend>
-          <div oneline>
-            <md-filled-text-field
-              label=${String(i18next.t('label.name'))}
+      ${this.renderWhat(board, boardGroupList)}
+
+      <div body>
+        <div class="fields">
+          <label>
+            ${i18next.t('label.name')}
+            <input
               type="text"
-              .value=${board.name}
+              .value=${board.name || ''}
               @change=${e => (this.board = { ...this.board, name: e.target.value })}
-              ?disabled=${!this.enableModeller}
-            ></md-filled-text-field>
-
-            ${this.enableModeller
-            ? html `
-                  <md-icon
-                    @click=${() => {
-                this.showTarget = !this.showTarget;
-            }}
-                    tail
-                    >${this.showTarget ? 'arrow_drop_up' : 'arrow_drop_down'}</md-icon
-                  >
-                `
-            : nothing}
-          </div>
-          ${this.showTarget
-            ? html `
-                <div fullwidth target>
-                  <label class="md-typescale-label-meium-prominent">${i18next.t('label.board-copy')}</label>
-                  <div oneline>
-                    <md-outlined-select
-                      label=${String(i18next.t('label.domain'))}
-                      @change=${e => {
-                this.targetSubdomain = e.target.value;
-                this.getGroupsByDomain(this.targetSubdomain);
-            }}
-                      .value=${this.targetSubdomain || ''}
-                      ?disabled=${!this.enableModeller}
-                    >
-                      <md-select-option aria-label="blank"></md-select-option>
-                      ${this.targetDomains.map(domain => html `
-                          <md-select-option
-                            value=${domain.subdomain}
-                            ?selected=${domain.subdomain == this.targetSubdomain}
-                          >
-                            <div slot="headline">${domain.name}</div>
-                          </md-select-option>
-                        `)}
-                    </md-outlined-select>
-
-                    <md-outlined-select
-                      label=${String(i18next.t('label.group'))}
-                      @change=${e => (this.targetGroupId = e.target.value)}
-                      .value=${this.targetGroupId || ''}
-                      ?disabled=${!this.enableModeller}
-                    >
-                      <md-select-option aria-label="blank"></md-select-option>
-                      ${this.targetGroups.map(group => html `
-                          <md-select-option value=${group.id} ?selected=${group.id == this.targetGroupId}>
-                            <div slot="headline">${group.name}</div>
-                          </md-select-option>
-                        `)}
-                    </md-outlined-select>
-                  </div>
-
-                  <md-chip-set oneline>
-                    <md-assist-chip
-                      elevated
-                      label=${String(i18next.t('button.copy'))}
-                      ?disabled=${!this.enableModeller ||
-                !this.original?.name ||
-                !this.board.name ||
-                !this.targetSubdomain ||
-                (this.original.name == this.board.name && this._appCtrl.domain?.subdomain == this.targetSubdomain)}
-                      @click=${this.cloneBoard.bind(this)}
-                      right
-                    >
-                      <md-icon slot="icon">content_copy</md-icon>
-                    </md-assist-chip>
-
-                    <md-assist-chip
-                      elevated
-                      label=${String(i18next.t('button.export'))}
-                      @click=${this.exportBoard.bind(this)}
-                    >
-                      <md-icon slot="icon">download</md-icon>
-                    </md-assist-chip>
-                  </md-chip-set>
-                </div>
-              `
-            : nothing}
-
-          <md-filled-text-field
-            oneline
-            label=${String(i18next.t('label.description'))}
-            .value=${board.description}
-            @change=${e => (this.board = { ...this.board, description: e.target.value })}
-            ?disabled=${!this.enableModeller}
-          ></md-filled-text-field>
-
-          <div oneline>
-            <label>${i18next.t('label.board-type')}</label>
-            <div role="radiogroup" aria-labelledby="board-type" right>
-              <md-radio
-                id="board-type-main"
-                name="board-type"
-                value="main"
-                ?checked=${board.type === 'main'}
-                @change=${e => (this.board = { ...this.board, type: e.target.value })}
-                ?disabled=${!this.enableModeller}
-              ></md-radio>
-              <label for="board-type-main">${i18next.t('label.board-type-main')}</label>
-
-              <md-radio
-                id="board-type-sub"
-                name="board-type"
-                value="sub"
-                ?checked=${board.type === 'sub'}
-                @change=${e => (this.board = { ...this.board, type: e.target.value })}
-                ?disabled=${!this.enableModeller}
-              ></md-radio>
-              <label for="board-type-sub">${i18next.t('label.board-type-sub')}</label>
-
-              <md-radio
-                id="board-type-popup"
-                name="board-type"
-                value="popup"
-                ?checked=${board.type === 'popup'}
-                @change=${e => (this.board = { ...this.board, type: e.target.value })}
-                ?disabled=${!this.enableModeller}
-              ></md-radio>
-              <label for="board-type-popup">${i18next.t('label.board-type-popup')}</label>
-            </div>
-          </div>
+              ?disabled=${!editable}
+            />
+          </label>
 
-          <md-outlined-select
-            oneline
-            label=${String(i18next.t('label.group'))}
-            @change=${e => (this.board = { ...this.board, groupId: e.target.value })}
-            .value=${this.groupId || ''}
-            .displayText=${boardGroupList?.find(item => item.id == this.groupId)?.name}
-            ?disabled=${!this.enableModeller}
-          >
-            <md-select-option aria-label="blank"></md-select-option>
-            ${boardGroupList.map(item => html `
-                <md-select-option value=${item.id} ?selected=${item.id == this.groupId}>
-                  <div slot="headline">${item.name}</div>
-                </md-select-option>
-              `)}
-          </md-outlined-select>
-
-          <md-chip-set oneline>
-            <md-assist-chip
-              danger
-              elevated
-              ?disabled=${!this.enableModeller}
-              label=${String(i18next.t('button.delete'))}
-              @click=${this.deleteBoard.bind(this)}
-            >
-              <md-icon slot="icon">delete_outline</md-icon>
-            </md-assist-chip>
-
-            <md-assist-chip
-              elevated
-              ?disabled=${!this.enableModeller}
-              label=${String(i18next.t('button.save'))}
-              @click=${this.updateBoard.bind(this)}
-              right
-            >
-              <md-icon slot="icon">save</md-icon>
-            </md-assist-chip>
-            <md-assist-chip
-              elevated
-              ?disabled=${!this.enableModeller}
-              label=${String(i18next.t('button.edit'))}
-              @click=${() => navigate(`${'board-modeller/' + this.boardId}`)}
-            >
-              <md-icon slot="icon">drive_file_rename_outline</md-icon>
-            </md-assist-chip>
-          </md-chip-set>
-        </fieldset>
-
-        <fieldset>
-          <legend class="md-typescale-label-large-prominent">${i18next.t('label.status')}</legend>
-          <div oneline>
-            <label class="md-typescale-label-meium">${i18next.t('label.creator')}</label>
-            <md-icon dim>person</md-icon>
-            <div name title=${(board.creator && board.creator.name) || 'anonymous'}>
-              ${(board.creator && board.creator.name) || 'anonymous'}
-            </div>
-            <md-icon dim right>schedule</md-icon> ${new Date(board.createdAt).toLocaleString()}
-          </div>
-
-          <div oneline>
-            <label class="md-typescale-label-meium">${i18next.t('label.updater')}</label>
-            <md-icon dim>person</md-icon>
-            <div name title=${(board.updater && board.updater.name) || 'anonymouse'}>
-              ${(board.updater && board.updater.name) || 'anonymouse'}
-            </div>
-            <md-icon dim right>schedule</md-icon> ${new Date(board.updatedAt).toLocaleString()}
-          </div>
-
-          <div oneline>
-            <label class="md-typescale-label-meium">${i18next.t('label.state')}</label>
-            <md-icon dim>signpost</md-icon> ${(board.state || '').toUpperCase()}
-            <md-icon dim>pin</md-icon> ${board.version}
-            <md-chip-set>
-              <md-assist-chip
-                elevated
-                label=${String(i18next.t('button.release'))}
-                ?disabled=${!this.enableModeller || !this.isReleasable}
-                @click=${this.releaseBoard.bind(this)}
-                right
+          <label>
+            ${i18next.t('label.description')}
+            <input
+              type="text"
+              .value=${board.description || ''}
+              @change=${e => (this.board = { ...this.board, description: e.target.value })}
+              ?disabled=${!editable}
+            />
+          </label>
+
+          <div class="row">
+            <label>
+              ${i18next.t('label.board-type')}
+              <ox-input-select-buttons
+                .value=${board.type || 'main'}
+                .options=${[
+            { display: i18next.t('label.board-type-main'), value: 'main' },
+            { display: i18next.t('label.board-type-sub'), value: 'sub' },
+            { display: i18next.t('label.board-type-popup'), value: 'popup' }
+        ]}
+                @change=${(e) => e.detail && (this.board = { ...this.board, type: e.detail })}
+                ?disabled=${!editable}
+              ></ox-input-select-buttons>
+            </label>
+
+            <label>
+              ${i18next.t('label.group')}
+              <select
+                .value=${this.board?.groupId || ''}
+                @change=${e => (this.board = { ...this.board, groupId: e.target.value })}
+                ?disabled=${!editable}
               >
-                <md-icon slot="icon">new_releases</md-icon>
-              </md-assist-chip>
-            </md-chip-set>
+                <option value=""></option>
+                ${boardGroupList.map(item => html `<option value=${item.id} ?selected=${item.id == this.board?.groupId}>${item.name}</option>`)}
+              </select>
+            </label>
           </div>
-        </fieldset>
-
-        <fieldset>
-          <legend class="md-typescale-label-large-prominent">${i18next.t('label.play-group')}</legend>
-          <md-chip-set oneline>
-            ${playGroupList.map(item => html `
-                <md-filter-chip
-                  label=${item.name}
-                  ?selected=${item.checked}
-                  @click=${e => {
+        </div>
+
+        ${this.duplicating ? this.renderDuplicate(board) : nothing}
+
+        <div class="section">${i18next.t('text.plays in', { defaultValue: 'Plays in' })}</div>
+        <div class="note">
+          ${i18next.t('text.play-group membership applies at once', {
+            defaultValue: 'Tap a play group to add or remove this board. This applies right away.'
+        })}
+        </div>
+        <md-chip-set class="chips">
+          ${(this.playGroupList || []).map(item => html `
+              <md-filter-chip
+                label=${item.name}
+                ?selected=${memberOf.has(item.id)}
+                @click=${e => {
             e.target.selected ? this.joinPlayGroup(item) : this.leavePlayGroup(item);
         }}
-                ></md-filter-chip>
-              `)}
-          </md-chip-set>
-        </fieldset>
-      </form>
+              ></md-filter-chip>
+            `)}
+        </md-chip-set>
+      </div>
+
+      <div footer>
+        <div class="buttons">
+          <span more>
+            <md-icon-button id="more-anchor" ?disabled=${!editable} @click=${() => (this.menu.open = !this.menu.open)}>
+              <md-icon>more_vert</md-icon>
+            </md-icon-button>
+            <md-menu anchor="more-anchor" positioning="popover" anchor-corner="start-start" menu-corner="end-start">
+              <md-menu-item @click=${() => (this.duplicating = true)}>
+                <md-icon slot="start">content_copy</md-icon>
+                <div slot="headline">${i18next.t('button.duplicate', { defaultValue: 'Duplicate…' })}</div>
+              </md-menu-item>
+              <md-menu-item @click=${this.exportBoard.bind(this)}>
+                <md-icon slot="start">download</md-icon>
+                <div slot="headline">${i18next.t('button.export-json', { defaultValue: 'Export as JSON' })}</div>
+              </md-menu-item>
+              <md-menu-item cap ?disabled=${!this.isReleasable} @click=${this.releaseBoard.bind(this)}>
+                <md-icon slot="start">new_releases</md-icon>
+                <div slot="headline">${i18next.t('button.release')}</div>
+                ${this.isReleasable || board.state === 'released'
+            ? nothing
+            : html `<div slot="supporting-text">
+                      ${i18next.t('text.save before release', { defaultValue: 'Save your changes first' })}
+                    </div>`}
+              </md-menu-item>
+              <md-divider></md-divider>
+              <md-menu-item cap danger @click=${this.deleteBoard.bind(this)}>
+                <md-icon slot="start">delete_outline</md-icon>
+                <div slot="headline">${i18next.t('button.delete')}</div>
+              </md-menu-item>
+            </md-menu>
+          </span>
+          <div filler></div>
+          <md-outlined-button ?disabled=${!editable} @click=${() => navigate(`board-modeller/${this.boardId}`)}>
+            <md-icon slot="icon">design_services</md-icon>${i18next.t('button.open-modeller', {
+            defaultValue: 'Open in modeller'
+        })}
+          </md-outlined-button>
+          <md-filled-button cap ?disabled=${!editable || !this.isDirty} @click=${this.updateBoard.bind(this)}>
+            <md-icon slot="icon">save</md-icon>${i18next.t('button.save')}
+          </md-filled-button>
+        </div>
+      </div>
+    `;
+    }
+    renderWhat(board, boardGroupList) {
+        if (!this.board) {
+            return nothing;
+        }
+        const released = board.state === 'released';
+        const group = boardGroupList.find(item => item.id == this.original?.groupId);
+        const updater = board.updater?.name || board.creator?.name || '';
+        const ago = timeAgo(board.updatedAt || board.createdAt);
+        return html `
+      <div class="what">
+        <span pill ?released=${released}>
+          ${released
+            ? i18next.t('label.released', { defaultValue: 'released' })
+            : i18next.t('label.draft', { defaultValue: 'draft' })}
+        </span>
+        <span>v${board.version ?? 0}</span>
+        ${group ? html `<span dot><b>${group.name}</b></span>` : nothing}
+        ${updater
+            ? html `<span dot>${i18next.t('text.updated by', { defaultValue: 'updated by' })} <b>${updater}</b> ${ago}</span>`
+            : ago
+                ? html `<span dot>${i18next.t('text.updated', { defaultValue: 'updated' })} ${ago}</span>`
+                : nothing}
+      </div>
+    `;
+    }
+    renderDuplicate(board) {
+        const sameAsSource = this.original?.name == board.name && this._appCtrl.domain?.subdomain == this.targetSubdomain;
+        return html `
+      <div duplicate>
+        <div class="section">${i18next.t('text.duplicate', { defaultValue: 'Duplicate' })}</div>
+        <div class="note">
+          ${i18next.t('text.duplicate hint', {
+            defaultValue: 'Copies this board into a domain and group. Give it a new name when copying within this domain.'
+        })}
+        </div>
+        <div class="fields">
+          <div class="row">
+            <label>
+              ${i18next.t('label.domain')}
+              <select
+                @change=${e => {
+            this.targetSubdomain = e.target.value;
+            this.getGroupsByDomain(this.targetSubdomain);
+        }}
+                .value=${this.targetSubdomain || ''}
+              >
+                <option value=""></option>
+                ${this.targetDomains.map(domain => html `<option value=${domain.subdomain} ?selected=${domain.subdomain == this.targetSubdomain}>
+                      ${domain.name}
+                    </option>`)}
+              </select>
+            </label>
+            <label>
+              ${i18next.t('label.group')}
+              <select @change=${e => (this.targetGroupId = e.target.value)} .value=${this.targetGroupId || ''}>
+                <option value=""></option>
+                ${this.targetGroups.map(group => html `<option value=${group.id} ?selected=${group.id == this.targetGroupId}>${group.name}</option>`)}
+              </select>
+            </label>
+          </div>
+        </div>
+        <div class="buttons">
+          <div filler></div>
+          <md-text-button cap @click=${() => (this.duplicating = false)}>${i18next.t('button.cancel')}</md-text-button>
+          <md-filled-button
+            cap
+            ?disabled=${!this.original?.name || !board.name || !this.targetSubdomain || sameAsSource}
+            @click=${this.cloneBoard.bind(this)}
+          >
+            <md-icon slot="icon">content_copy</md-icon>${i18next.t('button.copy')}
+          </md-filled-button>
+        </div>
+      </div>
     `;
     }
     async firstUpdated() {
@@ -480,11 +494,12 @@ let BoardInfo = class BoardInfo extends LitElement {
         `,
             variables: { id: this.boardId }
         })).data;
-        this.board = response.board;
+        const board = response.board;
+        this.groupId = board.group?.id;
+        this.board = { ...board, groupId: this.groupId };
+        this.original = { ...this.board };
         this.boardGroupList = response.groups.items;
         this.playGroupList = response.playGroups.items;
-        this.original = { ...this.board };
-        this.groupId = this.board.group?.id;
         this.targetDomains = response.domainsWithPrivilege;
         this.targetGroups = response.groups.items;
         this.targetGroupId = this.groupId;
@@ -516,15 +531,22 @@ let BoardInfo = class BoardInfo extends LitElement {
         })).data;
         this.targetGroups = response2.groups.items;
     }
+    /** Something in the form differs from what the server has. */
+    get isDirty() {
+        if (!this.board || !this.original) {
+            return false;
+        }
+        const { name, description, groupId, type } = this.board;
+        return (this.original.name != name ||
+            (this.original.description || '') != (description || '') ||
+            (this.original.groupId || '') != (groupId || '') ||
+            this.original.type != type);
+    }
     get isReleasable() {
         if (!this.board || this.board.state == 'released') {
             return false;
         }
-        const { name, description, groupId } = this.board;
-        return (this.original &&
-            this.original.name == name &&
-            this.original.description == description &&
-            this.original.groupId == groupId);
+        return !this.isDirty;
     }
     async cloneBoard() {
         if (!this.original.name || (this.board.name == this.original.name && this._appCtrl.domain?.subdomain == this.targetSubdomain)) {
@@ -588,6 +610,9 @@ let BoardInfo = class BoardInfo extends LitElement {
             bubbles: true,
             composed: true
         }));
+        /* The form is what the server now has; Save goes quiet until the next edit. */
+        this.original = { ...this.board };
+        this.requestUpdate();
     }
     async deleteBoard() {
         if (await OxPrompt.open({
@@ -651,7 +676,7 @@ __decorate([
 __decorate([
     state(),
     __metadata("design:type", Boolean)
-], BoardInfo.prototype, "showTarget", void 0);
+], BoardInfo.prototype, "duplicating", void 0);
 __decorate([
     state(),
     __metadata("design:type", Boolean)
@@ -672,6 +697,10 @@ __decorate([
     state(),
     __metadata("design:type", String)
 ], BoardInfo.prototype, "targetGroupId", void 0);
+__decorate([
+    query('md-menu'),
+    __metadata("design:type", Object)
+], BoardInfo.prototype, "menu", void 0);
 BoardInfo = __decorate([
     customElement('board-basic-info')
 ], BoardInfo);