@things-factory/announcement 0.0.0-stage → 10.1.222

package/client/announcement-watch.ts

@@ -0,0 +1,109 @@
+/*
+ * Keeps the person up with announcements while the application is open (ADR-0163 decision 5): the popups due at sign-in,
+ * a new one popping up the moment it is published to them, and the menu badge.
+ *
+ * The notice of an announcement reaches the screen through notification's subscription; the announcements themselves
+ * are asked of the server - a screen that was closed when one went out still finds it here.
+ */
+import './components/announcement-popup.js'
+
+import gql from 'graphql-tag'
+import { html } from 'lit'
+
+import { subscribe } from '@operato/graphql'
+import { openPopup } from '@operato/layout'
+
+import { announcementApi, type AnnouncementItem } from './utils/announcement-api.js'
+import { refreshAnnouncementBadge } from './utils/announcement-badge.js'
+import { t } from './utils/announcement-words.js'
+
+/* Closed in this browser session - asked again at the next sign-in (one still to be acknowledged comes back then). */
+const CLOSED_KEY = 'announcement.popups-closed'
+
+function closedInSession(): Set<string> {
+  try {
+    return new Set(JSON.parse(sessionStorage.getItem(CLOSED_KEY) || '[]'))
+  } catch {
+    return new Set()
+  }
+}
+
+function rememberClosed(ids: string[]) {
+  try {
+    sessionStorage.setItem(CLOSED_KEY, JSON.stringify([...new Set([...closedInSession(), ...ids])]))
+  } catch {
+    /* a browser that keeps nothing shows them again - no harm */
+  }
+}
+
+let popup: { close: () => void; closed: boolean } | undefined
+
+/* A reading changed on a screen or in the popup - the badge counts again. */
+window.addEventListener('announcements-changed', () => refreshAnnouncementBadge())
+let subscription: { unsubscribe(): void } | undefined
+let watching = false
+
+/** Opens the popups due now that this session has not closed - one window at a time. */
+export async function showDuePopups(): Promise<void> {
+  if (popup && !popup.closed) return
+  let due: AnnouncementItem[]
+  try {
+    due = await announcementApi.popups()
+  } catch {
+    return
+  }
+  const closed = closedInSession()
+  const items = due.filter(one => !closed.has(one.id))
+  if (!items.length) return
+  const handle: any = openPopup(html`<announcement-popup .items=${items} @done=${() => handle.close()}></announcement-popup>`, {
+    backdrop: true,
+    size: 'medium',
+    title: t('announcement.title.popup')
+  })
+  popup = handle
+  handle.result?.then?.(() => {
+    rememberClosed(items.map(one => one.id))
+    refreshAnnouncementBadge()
+  })
+}
+
+/** Starts once the person is known. */
+export async function startAnnouncementWatch(): Promise<void> {
+  if (watching) return
+  watching = true
+  refreshAnnouncementBadge()
+  showDuePopups()
+  try {
+    subscription = await subscribe(
+      {
+        query: gql`
+          subscription {
+            notification(subjects: ["info"]) {
+              type
+            }
+          }
+        `
+      },
+      {
+        next({ data }: any) {
+          if (data?.notification?.type !== 'announcement') return
+          refreshAnnouncementBadge()
+          showDuePopups()
+        }
+      }
+    )
+  } catch {
+    /* without the live line the badge and popups still come at the next sign-in */
+  }
+}
+
+export function stopAnnouncementWatch(): void {
+  subscription?.unsubscribe()
+  subscription = undefined
+  popup?.close()
+  popup = undefined
+  watching = false
+  try {
+    sessionStorage.removeItem(CLOSED_KEY)
+  } catch {}
+}

package/client/bootstrap.ts

@@ -0,0 +1,9 @@
+import { auth } from '@things-factory/auth-base/dist-client/auth.js'
+
+import { startAnnouncementWatch, stopAnnouncementWatch } from './announcement-watch.js'
+
+/* Announcements follow the person - the popups due and the badge come when they are known (ADR-0163 decision 5). */
+export default function bootstrap() {
+  auth.on('profile', () => startAnnouncementWatch())
+  auth.on('presignout', () => stopAnnouncementWatch())
+}

package/client/components/announcement-popup.ts

@@ -0,0 +1,92 @@
+/*
+ * The announcements that pop up (the user, 2026-10-26: 「공지 사항이 있을 때 자동 팝업」, ADR-0163 decision 5) - one
+ * window, one announcement at a time. Seeing one reads it; one that asks to be acknowledged is acknowledged here or
+ * shows again at the next sign-in.
+ */
+import '@material/web/button/filled-button.js'
+import '@material/web/button/text-button.js'
+import '@operato/popup/ox-popup-actions.js'
+import './announcement-sheet.js'
+
+import { css, html, LitElement, nothing } from 'lit'
+import { customElement, property, state } from 'lit/decorators.js'
+
+import { i18next, localize } from '@operato/i18n'
+import { navigate } from '@operato/shell'
+import { CommonPopupStyles, PopupBodyStyles } from '@operato/styles'
+
+import { announcementApi, type AnnouncementItem } from '../utils/announcement-api.js'
+import { t } from '../utils/announcement-words.js'
+
+@customElement('announcement-popup')
+export class AnnouncementPopup extends localize(i18next)(LitElement) {
+  static styles = [
+    CommonPopupStyles,
+    PopupBodyStyles,
+    css`
+      :host {
+        height: 100%;
+      }
+      h3 {
+        margin: 0 0 var(--spacing-small, 4px);
+        font-size: var(--ui-t-title, 18px);
+      }
+      .count {
+        margin-inline-end: auto;
+        align-self: center;
+        font-size: var(--ui-t-small, 12px);
+        color: var(--ui-muted, var(--md-sys-color-on-surface-variant));
+      }
+    `
+  ]
+
+  @property({ attribute: false }) items: AnnouncementItem[] = []
+  @state() private index = 0
+
+  render() {
+    const one = this.items[this.index]
+    if (!one) return nothing
+    const last = this.index >= this.items.length - 1
+    return html`<div class="body">
+        <h3>${one.title}</h3>
+        <announcement-sheet .announcement=${one} @announcement-follow=${() => this.close()} @announcement-acknowledged=${(e: CustomEvent) => this.replace(e.detail)}></announcement-sheet>
+      </div>
+      <ox-popup-actions>
+        ${this.items.length > 1 ? html`<span class="count">${this.index + 1} / ${this.items.length}</span>` : nothing}
+        <md-text-button @click=${() => this.open(one)}>${t('announcement.button.open')}</md-text-button>
+        ${this.index > 0 ? html`<md-text-button @click=${() => this.show(this.index - 1)}>${t('announcement.button.previous')}</md-text-button>` : nothing}
+        ${last
+          ? html`<md-filled-button slot="confirm" @click=${() => this.close()}>${t('announcement.button.close')}</md-filled-button>`
+          : html`<md-filled-button slot="confirm" @click=${() => this.show(this.index + 1)}>${t('announcement.button.next')}</md-filled-button>`}
+      </ox-popup-actions>`
+  }
+
+  firstUpdated() {
+    this.show(0)
+  }
+
+  /** Shows one, and reads it - seeing it in the popup is reading it. */
+  private show(index: number) {
+    this.index = index
+    const one = this.items[index]
+    if (one && !one.mine?.readAt) {
+      announcementApi
+        .read(one.id)
+        .then(done => this.replace({ ...one, ...done }))
+        .catch(() => {})
+    }
+  }
+
+  private replace(one: AnnouncementItem) {
+    this.items = this.items.map(item => (item.id === one.id ? { ...item, ...one } : item))
+  }
+
+  private open(one: AnnouncementItem) {
+    this.close()
+    navigate(`announcement-view?id=${one.id}`)
+  }
+
+  private close() {
+    this.dispatchEvent(new CustomEvent('done', { bubbles: true, composed: true }))
+  }
+}

package/client/components/announcement-receipts.ts

@@ -0,0 +1,196 @@
+/*
+ * The small forms a writer opens from an announcement (ADR-0163 decision 4): who read it and who acknowledged it, with
+ * a reminder to those who have not; and the reason it is withdrawn.
+ */
+import '@material/web/button/filled-button.js'
+import '@material/web/button/text-button.js'
+import '@operato/popup/ox-popup-actions.js'
+
+import { css, html, LitElement, nothing } from 'lit'
+import { customElement, property, state } from 'lit/decorators.js'
+
+import { i18next, localize } from '@operato/i18n'
+import { notify } from '@operato/layout'
+import { CommonPopupStyles, PopupBodyStyles } from '@operato/styles'
+
+import { announcementApi, type AnnouncementItem } from '../utils/announcement-api.js'
+import { reasonOf, t, when } from '../utils/announcement-words.js'
+
+type Row = Awaited<ReturnType<typeof announcementApi.receipts>>[number]
+
+const FormStyles = css`
+  :host {
+    height: 100%;
+    line-height: 1.5;
+  }
+  .tabs {
+    display: flex;
+    gap: var(--spacing-small, 4px);
+    margin-bottom: var(--spacing-medium, 8px);
+  }
+  .tabs button {
+    border: 1px solid var(--ui-line-soft, var(--md-sys-color-outline-variant));
+    background: none;
+    border-radius: 999px;
+    padding: 2px var(--spacing-medium, 8px);
+    font: inherit;
+    font-size: var(--ui-t-small, 12px);
+    cursor: pointer;
+    color: inherit;
+  }
+  .tabs button[aria-pressed='true'] {
+    background: var(--md-sys-color-secondary-container);
+    border-color: transparent;
+  }
+  table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: var(--ui-t-body, 14px);
+    font-variant-numeric: tabular-nums;
+  }
+  th,
+  td {
+    text-align: left;
+    padding: var(--spacing-small, 4px) var(--spacing-medium, 8px);
+    border-bottom: 1px solid var(--ui-line-soft, var(--md-sys-color-outline-variant));
+  }
+  th {
+    font-weight: 600;
+    font-size: var(--ui-t-small, 12px);
+    color: var(--ui-muted, var(--md-sys-color-on-surface-variant));
+  }
+  .muted {
+    color: var(--ui-muted, var(--md-sys-color-on-surface-variant));
+  }
+  textarea {
+    width: 100%;
+    min-height: 96px;
+    box-sizing: border-box;
+    font: inherit;
+  }
+`
+
+@customElement('announcement-receipts')
+export class AnnouncementReceipts extends localize(i18next)(LitElement) {
+  static styles = [CommonPopupStyles, PopupBodyStyles, FormStyles]
+  @property({ attribute: false }) announcement!: AnnouncementItem
+  @state() private rows: Row[] = []
+  @state() private which: 'all' | 'unread' | 'unacknowledged' | 'later' = 'all'
+  @state() private busy = false
+
+  connectedCallback() {
+    super.connectedCallback()
+    this.load()
+  }
+
+  private async load() {
+    try {
+      this.rows = await announcementApi.receipts(this.announcement.id)
+    } catch (error) {
+      notify({ level: 'error', message: reasonOf(error) })
+    }
+  }
+
+  render() {
+    const one = this.announcement
+    const listed = this.rows.filter(row => row.listed)
+    const counts = {
+      all: listed.length,
+      unread: listed.filter(row => !row.readAt).length,
+      unacknowledged: listed.filter(row => !row.acknowledgedAt).length,
+      later: this.rows.filter(row => !row.listed).length
+    }
+    const tabs = (['all', 'unread', ...(one.requiresAcknowledgement ? ['unacknowledged'] : []), ...(counts.later ? ['later'] : [])] as (keyof typeof counts)[]).map(
+      key => html`<button aria-pressed=${String(this.which === key)} @click=${() => (this.which = key)}>${t(`announcement.receipts.${key}`)} ${counts[key]}</button>`
+    )
+    const shown =
+      this.which === 'later'
+        ? this.rows.filter(row => !row.listed)
+        : listed.filter(row => (this.which === 'unread' ? !row.readAt : this.which === 'unacknowledged' ? !row.acknowledgedAt : true))
+    const owed = one.requiresAcknowledgement ? counts.unacknowledged : counts.unread
+    return html`<div class="body">
+        <div class="tabs">${tabs}</div>
+        <table>
+          <thead>
+            <tr>
+              <th>${t('announcement.receipts.name')}</th>
+              <th>${t('announcement.receipts.read-at')}</th>
+              ${one.requiresAcknowledgement ? html`<th>${t('announcement.receipts.acknowledged-at')}</th>` : nothing}
+              <th>${t('announcement.receipts.notified-at')}</th>
+            </tr>
+          </thead>
+          <tbody>
+            ${shown.map(
+              row => html`<tr>
+                <td>${row.name ?? row.email ?? row.userId}</td>
+                <td class=${row.readAt ? '' : 'muted'}>${row.readAt ? when(row.readAt) : t('announcement.reader-state.unread')}</td>
+                ${one.requiresAcknowledgement ? html`<td class=${row.acknowledgedAt ? '' : 'muted'}>${row.acknowledgedAt ? when(row.acknowledgedAt) : '—'}</td>` : nothing}
+                <td class="muted">${when(row.notifiedAt)}</td>
+              </tr>`
+            )}
+          </tbody>
+        </table>
+      </div>
+      <ox-popup-actions>
+        <md-text-button slot="cancel" @click=${() => this.close()}>${t('announcement.button.close')}</md-text-button>
+        <md-filled-button slot="confirm" ?disabled=${this.busy || !owed || one.status !== 'PUBLISHED'} @click=${() => this.remind()}
+          >${t('announcement.button.remind-count', { count: owed })}</md-filled-button
+        >
+      </ox-popup-actions>`
+  }
+
+  private async remind() {
+    this.busy = true
+    try {
+      const told = await announcementApi.remind(this.announcement.id)
+      notify({ message: t('announcement.text.reminded', { count: told }) })
+      await this.load()
+    } catch (error) {
+      notify({ level: 'error', message: reasonOf(error) })
+    } finally {
+      this.busy = false
+    }
+  }
+
+  private close() {
+    this.dispatchEvent(new CustomEvent('done', { bubbles: true, composed: true }))
+  }
+}
+
+/** Why it is withdrawn - the readers' copy goes, the reason stays with its record. */
+@customElement('announcement-withdraw-form')
+export class AnnouncementWithdrawForm extends localize(i18next)(LitElement) {
+  static styles = [CommonPopupStyles, PopupBodyStyles, FormStyles]
+  @property({ attribute: false }) announcement!: AnnouncementItem
+  @state() private reason = ''
+  @state() private busy = false
+
+  render() {
+    return html`<div class="body">
+        <p>${t('announcement.text.withdraw-lead')}</p>
+        <textarea .value=${this.reason} maxlength="500" placeholder=${t('announcement.text.withdraw-reason')} @input=${(e: any) => (this.reason = e.target.value)}></textarea>
+      </div>
+      <ox-popup-actions>
+        <md-text-button slot="cancel" @click=${() => this.close()}>${t('announcement.button.cancel')}</md-text-button>
+        <md-filled-button slot="confirm" ?disabled=${this.busy || !this.reason.trim()} @click=${() => this.withdraw()}>${t('announcement.button.withdraw')}</md-filled-button>
+      </ox-popup-actions>`
+  }
+
+  private async withdraw() {
+    this.busy = true
+    try {
+      await announcementApi.withdraw(this.announcement.id, this.reason)
+      notify({ message: t('announcement.text.withdrawn-done') })
+      this.dispatchEvent(new CustomEvent('announcement-withdrawn', { bubbles: true, composed: true }))
+      this.close()
+    } catch (error) {
+      notify({ level: 'error', message: reasonOf(error) })
+    } finally {
+      this.busy = false
+    }
+  }
+
+  private close() {
+    this.dispatchEvent(new CustomEvent('done', { bubbles: true, composed: true }))
+  }
+}

package/client/components/announcement-sheet.ts

@@ -0,0 +1,214 @@
+/*
+ * One announcement as its reader sees it - what kind it is and from whom, its body, its files, the screens it points to,
+ * and the acknowledgement it asks for (ADR-0163 decisions 3, 5). The screen and the popup both draw it.
+ */
+import '@material/web/icon/icon.js'
+import '@material/web/button/filled-button.js'
+
+import { css, html, LitElement, nothing } from 'lit'
+import { customElement, property, state } from 'lit/decorators.js'
+import { unsafeHTML } from 'lit/directives/unsafe-html.js'
+
+import { i18next, localize } from '@operato/i18n'
+import { notify } from '@operato/layout'
+import { navigate } from '@operato/shell'
+import { renderMarkdown } from '@things-factory/ai-assistant/dist-client/index.js'
+
+import { announcementApi, type AnnouncementItem } from '../utils/announcement-api.js'
+import { categoryWord, importanceWord, reasonOf, t, when } from '../utils/announcement-words.js'
+
+/** A screen of the application opens in place; an https page opens apart. */
+export function followLink(url: string) {
+  if (/^https:\/\//i.test(url)) window.open(url, '_blank', 'noopener')
+  else navigate(url)
+}
+
+@customElement('announcement-sheet')
+export class AnnouncementSheet extends localize(i18next)(LitElement) {
+  static styles = css`
+    :host {
+      display: flex;
+      flex-direction: column;
+      gap: var(--spacing-medium, 8px);
+      color: var(--md-sys-color-on-surface);
+    }
+    .meta {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: var(--spacing-small, 4px) var(--spacing-medium, 8px);
+      font-size: var(--ui-t-small, 12px);
+      color: var(--ui-muted, var(--md-sys-color-on-surface-variant));
+    }
+    .chip {
+      display: inline-flex;
+      align-items: center;
+      gap: 2px;
+      padding: 0 var(--spacing-small, 4px);
+      border-radius: var(--border-radius, 4px);
+      border: 1px solid var(--ui-line-soft, var(--md-sys-color-outline-variant));
+      line-height: 1.6;
+    }
+    .chip.URGENT {
+      color: var(--md-sys-color-error);
+      border-color: currentColor;
+    }
+    .chip.IMPORTANT {
+      color: var(--md-sys-color-primary);
+      border-color: currentColor;
+    }
+    .chip md-icon {
+      --md-icon-size: 14px;
+    }
+    .markdown {
+      font-size: var(--ui-t-body, 14px);
+      line-height: 1.6;
+      overflow-wrap: anywhere;
+    }
+    .markdown :is(h1, h2, h3, h4) {
+      margin: var(--spacing-medium, 8px) 0 var(--spacing-small, 4px);
+      font-size: var(--ui-t-title, 16px);
+    }
+    .markdown :is(p, ul, ol, blockquote, pre, table) {
+      margin: 0 0 var(--spacing-medium, 8px);
+    }
+    .markdown :is(ul, ol) {
+      padding-inline-start: 1.4em;
+      list-style: revert;
+      display: block;
+    }
+    .markdown a {
+      color: var(--md-sys-color-primary);
+    }
+    .markdown table {
+      border-collapse: collapse;
+    }
+    .markdown :is(th, td) {
+      border: 1px solid var(--ui-line-soft, var(--md-sys-color-outline-variant));
+      padding: 2px var(--spacing-small, 4px);
+    }
+    h4 {
+      margin: var(--spacing-medium, 8px) 0 var(--spacing-small, 4px);
+      font-size: var(--ui-t-small, 12px);
+      color: var(--ui-muted, var(--md-sys-color-on-surface-variant));
+      font-weight: 600;
+    }
+    ul.files {
+      margin: 0;
+      padding: 0;
+      list-style: none;
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+    }
+    a,
+    .link {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--spacing-small, 4px);
+      color: var(--md-sys-color-primary);
+      text-decoration: none;
+      cursor: pointer;
+      background: none;
+      border: 0;
+      padding: 0;
+      font: inherit;
+    }
+    a:hover,
+    .link:hover {
+      text-decoration: underline;
+    }
+    a md-icon,
+    .link md-icon {
+      --md-icon-size: 16px;
+    }
+    .size {
+      color: var(--ui-muted, var(--md-sys-color-on-surface-variant));
+      font-size: var(--ui-t-small, 12px);
+    }
+    .acknowledge {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      justify-content: space-between;
+      gap: var(--spacing-medium, 8px);
+      padding: var(--spacing-medium, 8px) var(--spacing-large, 12px);
+      border-radius: var(--border-radius, 4px);
+      background: var(--md-sys-color-surface-container, rgba(0, 0, 0, 0.04));
+      font-size: var(--ui-t-body, 14px);
+    }
+    .acknowledge.done {
+      color: var(--ui-muted, var(--md-sys-color-on-surface-variant));
+    }
+  `
+
+  @property({ attribute: false }) announcement!: AnnouncementItem
+  @state() private busy = false
+
+  render() {
+    const one = this.announcement
+    if (!one) return nothing
+    const files = one.attachments ?? []
+    const links = one.links ?? []
+    return html`<div class="meta">
+        ${one.pinned ? html`<span class="chip"><md-icon>push_pin</md-icon>${t('announcement.field.pinned')}</span>` : nothing}
+        ${one.importance !== 'NORMAL' ? html`<span class="chip ${one.importance}">${importanceWord(one.importance)}</span>` : nothing}
+        <span class="chip">${categoryWord(one.category)}</span>
+        <span>${one.publisher?.name ?? one.creator?.name ?? ''}</span>
+        <span>${when(one.publishedAt ?? one.startsAt)}</span>
+        ${one.endsAt ? html`<span>${t('announcement.text.until', { when: when(one.endsAt) })}</span>` : nothing}
+        ${one.version > 1 ? html`<span>${t('announcement.text.version', { version: one.version })}</span>` : nothing}
+      </div>
+      ${one.body ? html`<div class="markdown">${unsafeHTML(renderMarkdown(one.body))}</div>` : nothing}
+      ${files.length
+        ? html`<h4>${t('announcement.field.attachments')}</h4>
+            <ul class="files">
+              ${files.map(
+                file =>
+                  html`<li>
+                    <a href=${file.fullpath} target="_blank" rel="noopener" download=${file.name}><md-icon>attach_file</md-icon>${file.name}</a>
+                    ${file.size ? html`<span class="size">${Math.max(1, Math.round(file.size / 1024))} KB</span>` : nothing}
+                  </li>`
+              )}
+            </ul>`
+        : nothing}
+      ${links.length
+        ? html`<h4>${t('announcement.field.links')}</h4>
+            <ul class="files">
+              ${links.map(link => html`<li><button class="link" @click=${() => this.follow(link.url)}><md-icon>open_in_new</md-icon>${link.label}</button></li>`)}
+            </ul>`
+        : nothing}
+      ${this.renderAcknowledge()}`
+  }
+
+  private renderAcknowledge() {
+    const one = this.announcement
+    if (!one.requiresAcknowledgement || one.status !== 'PUBLISHED') return nothing
+    const by = one.acknowledgeBy ? t('announcement.text.acknowledge-by', { when: when(one.acknowledgeBy, false) }) : ''
+    if (one.mine?.acknowledgedAt) return html`<div class="acknowledge done">${t('announcement.text.acknowledged-at', { when: when(one.mine.acknowledgedAt) })}</div>`
+    /* Only its audience acknowledges; a writer looking at one addressed to others sees what is asked. */
+    if (!one.addressed) return html`<div class="acknowledge">${t('announcement.text.acknowledge-asked')} ${by}</div>`
+    return html`<div class="acknowledge">
+      <span>${t('announcement.text.acknowledge-asked')} ${by}</span>
+      <md-filled-button ?disabled=${this.busy} @click=${() => this.acknowledge()}>${t('announcement.button.acknowledge')}</md-filled-button>
+    </div>`
+  }
+
+  private follow(url: string) {
+    this.dispatchEvent(new CustomEvent('announcement-follow', { bubbles: true, composed: true }))
+    followLink(url)
+  }
+
+  private async acknowledge() {
+    this.busy = true
+    try {
+      const done = await announcementApi.acknowledge(this.announcement.id)
+      this.announcement = { ...this.announcement, ...done }
+      this.dispatchEvent(new CustomEvent('announcement-acknowledged', { bubbles: true, composed: true, detail: this.announcement }))
+    } catch (error) {
+      notify({ level: 'error', message: reasonOf(error) })
+    } finally {
+      this.busy = false
+    }
+  }
+}