@things-factory/ai-dashboard 0.0.0-stage → 10.1.213

package/client/components/card-library.ts

@@ -0,0 +1,272 @@
+/*
+ * The card library - one's own cards and those shared with one (ADR-0160 decision 7). A card is placed on the
+ * dashboard from here, shared, copied, renamed, taken back to an earlier version or deleted by its owner.
+ */
+import '@material/web/icon/icon.js'
+import '@material/web/button/filled-tonal-button.js'
+import '@material/web/button/text-button.js'
+
+import { LitElement, css, html, nothing } from 'lit'
+import { customElement, state } from 'lit/decorators.js'
+
+import { i18next, localize } from '@operato/i18n'
+import { notify } from '@operato/layout'
+import { OxPrompt } from '@operato/popup/ox-prompt.js'
+
+import { cardApi, DASHBOARD_CHANGED, dashboardChanged, type CardItem } from '../utils/card-api.js'
+import { ownershipLine, viewIcon } from '../utils/card-words.js'
+import { openCardRename, openCardShare, openCardVersions } from './card-dialogs.js'
+
+const t = (key: string, options: Record<string, unknown> = {}) => String(i18next.t(key, options))
+
+@customElement('ai-dashboard-card-library')
+export class CardLibrary extends localize(i18next)(LitElement) {
+  static styles = css`
+    :host {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+      padding: 12px 20px 20px;
+      color: var(--ui-ink, var(--md-sys-color-on-surface));
+      font-size: var(--ui-t-body, 13px);
+      line-height: 1.5;
+    }
+
+    .tabs {
+      display: flex;
+      gap: 4px;
+      padding: 3px;
+      border-radius: 10px;
+      background: var(--ui-panel-2, var(--md-sys-color-surface-container));
+      align-self: flex-start;
+    }
+
+    .tabs button {
+      padding: 6px 14px;
+      border: 0;
+      border-radius: 8px;
+      background: transparent;
+      color: var(--ui-muted, var(--md-sys-color-on-surface-variant));
+      font: inherit;
+      font-weight: 600;
+      cursor: pointer;
+    }
+
+    .tabs button[aria-selected='true'] {
+      background: var(--ui-panel, var(--md-sys-color-surface-container-lowest));
+      color: var(--ui-ink, var(--md-sys-color-on-surface));
+      box-shadow: 0 1px 3px rgb(0 0 0 / 12%);
+    }
+
+    ul {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
+      gap: 10px;
+    }
+
+    li {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      padding: 14px;
+      border: 1px solid var(--ui-line, var(--md-sys-color-outline-variant));
+      border-radius: 12px;
+      background: var(--ui-panel, var(--md-sys-color-surface-container-lowest));
+    }
+
+    .head {
+      display: flex;
+      gap: 10px;
+      align-items: flex-start;
+    }
+
+    .kind {
+      flex: none;
+      display: grid;
+      place-items: center;
+      width: 32px;
+      height: 32px;
+      border-radius: 8px;
+      background: var(--ui-accent-wash, color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent));
+      color: var(--ui-accent, var(--md-sys-color-primary));
+      --md-icon-size: 18px;
+    }
+
+    .names {
+      flex: 1;
+      min-width: 0;
+    }
+
+    .names strong {
+      display: block;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .names small {
+      display: block;
+      color: var(--ui-muted, var(--md-sys-color-on-surface-variant));
+    }
+
+    .badge {
+      flex: none;
+      padding: 1px 8px;
+      border-radius: 999px;
+      background: var(--ui-panel-2, var(--md-sys-color-surface-container));
+      color: var(--ui-muted, var(--md-sys-color-on-surface-variant));
+      font-size: var(--ui-t-micro, 11px);
+      font-variant-numeric: tabular-nums;
+    }
+
+    .row {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: 2px;
+    }
+
+    .row .placed {
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+      margin-right: auto;
+      color: var(--ui-good, #2e7d32);
+      font-size: var(--ui-t-small, 12px);
+      --md-icon-size: 16px;
+    }
+
+    .row .spacer {
+      margin-right: auto;
+    }
+
+    button.icon {
+      display: grid;
+      place-items: center;
+      width: 30px;
+      height: 30px;
+      padding: 0;
+      border: 0;
+      border-radius: 8px;
+      background: transparent;
+      color: var(--ui-muted, var(--md-sys-color-on-surface-variant));
+      cursor: pointer;
+      --md-icon-size: 18px;
+    }
+
+    button.icon:hover {
+      background: var(--ui-hover, var(--md-sys-color-surface-container-high));
+      color: var(--ui-ink, var(--md-sys-color-on-surface));
+    }
+
+    .empty {
+      padding: 36px 12px;
+      text-align: center;
+      color: var(--ui-muted, var(--md-sys-color-on-surface-variant));
+    }
+  `
+
+  @state() private which: 'mine' | 'shared' = 'mine'
+  @state() private cards?: CardItem[]
+  @state() private error?: string
+
+  private onChanged = () => this.load()
+
+  connectedCallback() {
+    super.connectedCallback()
+    window.addEventListener(DASHBOARD_CHANGED, this.onChanged)
+    this.load()
+  }
+
+  disconnectedCallback() {
+    window.removeEventListener(DASHBOARD_CHANGED, this.onChanged)
+    super.disconnectedCallback()
+  }
+
+  private async load() {
+    try {
+      this.cards = await cardApi.library(this.which)
+      this.error = undefined
+    } catch (error: any) {
+      this.error = error?.message ?? String(error)
+    }
+  }
+
+  private show(which: 'mine' | 'shared') {
+    this.which = which
+    this.cards = undefined
+    this.load()
+  }
+
+  render() {
+    return html`<div class="tabs" role="tablist">
+        <button role="tab" aria-selected=${this.which === 'mine' ? 'true' : 'false'} @click=${() => this.show('mine')}>${t('ai-dashboard.library.mine')}</button>
+        <button role="tab" aria-selected=${this.which === 'shared' ? 'true' : 'false'} @click=${() => this.show('shared')}>${t('ai-dashboard.library.shared')}</button>
+      </div>
+      ${this.error ? html`<p class="empty">${this.error}</p>` : nothing}
+      ${this.cards && !this.cards.length ? html`<p class="empty">${t(this.which === 'mine' ? 'ai-dashboard.library.none-mine' : 'ai-dashboard.library.none-shared')}</p>` : nothing}
+      <ul>
+        ${(this.cards ?? []).map(card => this.renderCard(card))}
+      </ul>`
+  }
+
+  private renderCard(card: CardItem) {
+    const owner = card.access === 'owner'
+    const icon = (action: () => unknown, name: string, key: string) => html`<button class="icon" title=${t(key)} aria-label=${t(key)} @click=${action}><md-icon>${name}</md-icon></button>`
+    const line = [card.description, ownershipLine(card, t)].filter(Boolean).join(' · ')
+    return html`<li>
+      <div class="head">
+        <span class="kind"><md-icon>${viewIcon(card.definition)}</md-icon></span>
+        <span class="names"><strong title=${card.name}>${card.name}</strong>${line ? html`<small>${line}</small>` : nothing}</span>
+        <span class="badge">v${card.version}</span>
+      </div>
+      <div class="row">
+        ${card.placed
+          ? html`<span class="placed"><md-icon>check_circle</md-icon>${t('ai-dashboard.library.placed')}</span>`
+          : html`<md-filled-tonal-button @click=${() => this.place(card)}>${t('ai-dashboard.library.place')}</md-filled-tonal-button><span class="spacer"></span>`}
+        ${owner ? icon(() => openCardShare(card), 'share', 'ai-dashboard.card.share') : nothing}
+        ${owner ? icon(() => openCardRename(card), 'edit', 'ai-dashboard.card.rename') : nothing}
+        ${owner ? icon(() => openCardVersions(card), 'history', 'ai-dashboard.card.versions') : nothing}
+        ${icon(() => this.copy(card), 'content_copy', owner ? 'ai-dashboard.card.duplicate' : 'ai-dashboard.card.copy')}
+        ${owner ? icon(() => this.deleteCard(card), 'delete_outline', 'ai-dashboard.card.delete') : nothing}
+      </div>
+    </li>`
+  }
+
+  private async place(card: CardItem) {
+    await this.attempt(async () => {
+      await cardApi.place(card.id)
+      notify({ level: 'info', message: t('ai-dashboard.text.placed', { name: card.name }) })
+    })
+  }
+
+  private async copy(card: CardItem) {
+    await this.attempt(async () => {
+      await cardApi.copy(card.id)
+      notify({ level: 'info', message: t('ai-dashboard.text.copied', { name: card.name }) })
+    })
+  }
+
+  private async deleteCard(card: CardItem) {
+    const sure = await OxPrompt.open({
+      title: t('ai-dashboard.card.delete'),
+      text: t(card.shares?.length ? 'ai-dashboard.text.delete-shared' : 'ai-dashboard.text.delete', { name: card.name }),
+      confirmButton: { text: t('ai-dashboard.card.delete') },
+      cancelButton: { text: t('ai-dashboard.button.cancel') }
+    })
+    if (!sure) return
+    await this.attempt(() => cardApi.remove(card.id))
+  }
+
+  private async attempt(work: () => Promise<unknown>) {
+    try {
+      await work()
+      dashboardChanged()
+    } catch (error: any) {
+      notify({ level: 'error', message: error?.message ?? String(error) })
+    }
+  }
+}