@things-factory/figure-ui 10.1.4 → 10.1.5

package/client/pages/figure-list-page.ts

@@ -1,148 +1,141 @@
+import '@operato/data-grist'
 import '@material/web/icon/icon.js'
-import '../viewparts/figure-card.js'
 
 import { css, html } from 'lit'
-import { customElement, property, state } from 'lit/decorators.js'
+import { customElement, property, query } from 'lit/decorators.js'
 
+import type { DataGrist, FetchOption } from '@operato/data-grist'
 import { i18next, localize } from '@operato/i18n'
+import { p13n } from '@operato/p13n'
 import { auth } from '@things-factory/auth-base/dist-client'
 import { navigate, PageView } from '@operato/shell'
-import { ScrollbarStyles } from '@operato/styles'
+import { CommonGristStyles, CommonHeaderStyles, ScrollbarStyles } from '@operato/styles'
 
+import { capacityFrom } from '../modeller/scene-budget.js'
 import { deleteFigure, fetchFigureList } from '../graphql/index.js'
 import type { Figure } from '../types.js'
 
-const FigureListPageBase = localize(i18next)(PageView) as typeof PageView
+/**
+ * 이 값 아래면 점수를 색으로 눈에 띄게 한다.
+ *
+ * **등급 경계가 아니다.** 등급(A~D)은 `figure-model` 의 `scoreOf` 가 정하고 화면은 그것을
+ * 베끼지 않는다. 이것은 「눈에 걸리게 할 선」이고, 화면의 판단이다.
+ */
+const ATTENTION_BELOW = 50
+
+/*
+ * ── renderer 가 그리는 것은 이 파일의 CSS 가 닿지 않는다 ──────────────────────
+ *
+ * 컬럼 renderer 의 결과는 `ox-card-field` 의 shadow root 안에 그려진다. 이 페이지의 `static
+ * styles` 는 그 경계를 넘지 못하므로 `code[figure-type]` 같은 선택자는 **아무 일도 하지 않는다.**
+ * 넘어가는 것은 custom property 뿐이라, 색과 글꼴은 여기서 인라인으로 준다 — 값 자체는 테마
+ * 토큰을 가리키므로 밝음·어둠은 따라온다. data-grist 의 image renderer 도 같은 방식이다.
+ */
+const CAPACITY = 'font-weight: 700; color: var(--md-sys-color-primary);'
+const UNMEASURED = 'font-style: italic; color: var(--md-sys-color-outline);'
+const RELEASED = 'font-weight: 700; color: var(--md-sys-color-primary);'
+const DRAFT = 'color: var(--md-sys-color-tertiary);'
+const badge = (low: boolean) =>
+  `padding: 0 6px; border-radius: var(--md-sys-shape-corner-small, 4px); font-weight: 700; ${
+    low
+      ? 'color: var(--md-sys-color-on-error, #fff); background-color: var(--md-sys-color-error);'
+      : 'color: var(--md-sys-color-on-primary-container); background-color: var(--md-sys-color-primary-container);'
+  }`
+
+/*
+ * `as typeof PageView` 로 조이지 않는다 — 그렇게 하면 p13n 이 얹어 주는
+ * `getPagePreferenceProvider` 가 타입에서 사라져 개인 설정을 붙일 수 없다.
+ */
+const FigureListPageBase = p13n(localize(i18next)(PageView))
 
 /**
- * Figure 목록.
+ * Figure 카탈로그.
+ *
+ * 이 화면은 저작면으로 가는 문이다. 여기서 오래 머물 화면이 아니므로 꾸미지 않는다. 카드에는
+ * **고를 때 쓰는 것만** 싣는다 — 그림과 이름, 그리고 아직 초안이라는 것. 배치 한도·성숙도·삼각형
+ * 수는 고른 뒤에 따지는 값이라 표 모드의 칸으로 남기고 저작면에서 본다.
+ *
+ * ## 왜 손으로 만든 카드가 아니라 격자인가
  *
- * 이 화면은 저작면으로 가는 문이다. 여기서 오래 머물 화면이 아니므로 꾸미지 않는다.
- * 대신 **저작자가 목록에서 판단할 수 있어야 하는 것**은 카드에 실는다 — 무게(삼각형
- * 수)와 재활용 점수다. 그것을 저작면에 들어가서야 알면 늦다.
+ * 전에는 카드 격자와 걸러 보기 줄과 빈 화면을 이 파일이 직접 그렸다(200줄). 그 자리에서 빠져
+ * 있던 것들은 하나같이 `ox-grist` 가 이미 가진 것이다 — 쪽 나누기, 정렬, 컬럼 걸러 보기,
+ * 개인 설정(모드·정렬·쪽 크기를 사람마다 기억한다), 표 모드로 바꿔 보기, 내보내기.
+ * 손으로 만든 카드는 그 중 아무것도 없었고, 목록이 늘어나면 전부 한 번에 그렸다.
+ *
+ * 카드에 실을 것은 `list` 가 정하고, 무엇을 어떻게 그릴지는 컬럼의 renderer 가 정한다. 같은
+ * 설정이 표 모드에서도 그대로 쓰이므로 **두 모드가 다른 말을 하지 않는다.**
  */
 @customElement('figure-list-page')
 export class FigureListPage extends FigureListPageBase {
   static styles = [
     ScrollbarStyles,
+    CommonGristStyles,
+    CommonHeaderStyles,
     css`
       :host {
         display: flex;
         flex-direction: column;
-        overflow: hidden;
+        width: 100%;
         background-color: var(--md-sys-color-surface);
         color: var(--md-sys-color-on-surface);
       }
 
-      /* 걸러 보기 줄 */
-      div[filters] {
-        display: flex;
-        align-items: center;
-        gap: var(--spacing-medium, 8px);
-        padding: var(--spacing-medium, 8px) var(--spacing-large, 12px);
-        border-bottom: 1px solid var(--md-sys-color-outline-variant);
-      }
-
-      input[search] {
+      /* 격자가 바깥에 요구하는 것은 확정된 높이 하나뿐이다 — 스크롤은 격자가 안에서 한다 */
+      ox-grist {
         flex: 1;
-        min-width: 0;
-        max-width: 320px;
-        padding: 6px 10px;
-        font: var(--input-field-font, inherit);
-        color: var(--md-sys-color-on-surface);
-        background-color: var(--md-sys-color-surface-container-lowest);
-        border: 1px solid var(--md-sys-color-outline-variant);
-        /* 명령 요소의 모서리는 테마가 정한다 — 알약으로 만들지 않는다 */
-        border-radius: 6px;
+        min-height: 0;
       }
 
-      button[state] {
-        padding: 5px 12px;
-        font: var(--label-font, inherit);
-        color: var(--md-sys-color-on-surface);
-        background: none;
-        border: 1px solid var(--md-sys-color-outline-variant);
-        border-radius: 6px;
-        cursor: pointer;
-      }
-      button[state][selected] {
-        color: var(--md-sys-color-on-secondary-container);
-        background-color: var(--md-sys-color-secondary-container);
-        border-color: transparent;
-      }
+      /*
+        ── 그림이 주인공인 카탈로그 ────────────────────────────────────────
+        카드 기본값은 글이 많은 목록(직원·결재함)에 맞춰져 있다. 여기서는 사람이 먼저 보는 것이
+        형상 그림이므로, 그림 칸을 비율로 잡아 카드 폭이 달라져도 그림이 나란히 읽히게 한다.
+      */
+      ox-grist {
+        --data-card-min-width: 240px;
+        --data-card-thumbnail-height: auto;
+        --data-card-thumbnail-aspect: 4 / 3;
+        --data-card-thumbnail-padding: var(--spacing-small);
+        --data-card-thumbnail-background: var(--md-sys-color-surface-container);
 
-      span[count] {
-        margin-left: auto;
-        font: var(--label-font, inherit);
-        color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
-      }
+        /*
+          카드 기본 글꼴은 굵다(제목 bold 1.1em). 글이 정보를 나르는 목록에서는 맞지만, 여기서
+          정보를 나르는 것은 그림이다. 굵은 제목이 카드마다 서면 그림보다 글이 먼저 읽힌다 —
+          이름은 알아볼 정도로만, 타입은 곁글로 둔다.
+        */
+        --data-card-item-name-font: 500 0.9rem/1.35 var(--theme-font, 'Roboto');
+        --data-card-item-name-color: var(--md-sys-color-on-surface);
+        --data-card-item-disc-font: normal 0.72rem/1.2 var(--theme-font, 'Roboto');
+        --data-card-item-disc-color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
+        --data-card-item-etc-font: normal 0.72rem/1.2 var(--theme-font, 'Roboto');
 
-      /* 카드 격자 */
-      div[cards] {
-        flex: 1;
-        overflow-y: auto;
-        display: grid;
-        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-        gap: var(--spacing-medium, 8px);
-        padding: var(--spacing-large, 12px);
-        align-content: start;
-      }
-
-      /* ── 아무것도 없을 때 ──────────────────────────────────────────────
-         이 자리가 이 화면에서 가장 중요하다. 처음 온 사람은 여기서 이 도구가
-         무엇을 만드는 것인지 알게 된다. 「데이터 없음」으로 끝내지 않는다. */
-      div[empty] {
-        flex: 1;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        gap: var(--spacing-medium, 8px);
-        padding: var(--spacing-large, 12px);
-        text-align: center;
-        color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
-      }
-      div[empty] md-icon {
-        --md-icon-size: 48px;
-        color: var(--md-sys-color-outline-variant);
-      }
-      div[empty] h2 {
-        margin: 0;
-        font: var(--theme-font, inherit);
-        font-size: var(--ui-t-title, 15px);
-        color: var(--md-sys-color-on-surface);
-      }
-      div[empty] p {
-        margin: 0;
-        max-width: 34em;
-        line-height: 1.6;
-      }
-      div[empty] button {
-        margin-top: var(--spacing-medium, 8px);
-        padding: 8px 18px;
-        font: var(--label-font, inherit);
-        color: var(--md-sys-color-on-primary, #fff);
-        background-color: var(--md-sys-color-primary);
-        border: none;
-        border-radius: 6px;
-        cursor: pointer;
+        /* 상태와 성숙도는 짧은 표식이다 — 두 줄로 세우지 않고 한 줄에 뉜다 */
+        --data-card-detail-direction: row;
       }
     `
   ]
 
-  @state() private figures: Figure[] = []
-  @state() private total = 0
-  @state() private search = ''
-  @state() private stateFilter = ''
-  @state() private loaded = false
-  /** 못 불러온 사유. 빈 목록과 구분해서 보여 준다. */
-  @state() private failure = ''
+  @property({ type: Object }) gristConfig: any
+
+  @query('ox-grist') private grist!: DataGrist
 
   private listen?: () => void
 
   get context() {
     return {
       title: i18next.t('title.figures'),
+      search: {
+        handler: (search: string) => {
+          this.grist.searchText = search
+        },
+        value: this.grist?.searchText || '',
+        placeholder: i18next.t('text.search-figure-by-name-or-type')
+      },
+      filter: {
+        handler: () => {
+          this.grist.toggleHeadroom()
+        }
+      },
       actions: [
         {
           title: i18next.t('button.new-figure'),
@@ -154,103 +147,264 @@ export class FigureListPage extends FigureListPageBase {
 
   render() {
     return html`
-      <div filters>
-        <input
-          search
-          type="search"
-          .value=${this.search}
-          placeholder=${i18next.t('text.search-figure-by-name-or-type')}
-          @change=${(e: Event) => {
-            this.search = (e.target as HTMLInputElement).value
-            this.reload()
-          }}
-        />
-        ${[
-          { value: '', label: i18next.t('label.all') },
-          { value: 'draft', label: i18next.t('label.draft') },
-          { value: 'released', label: i18next.t('label.released') }
-        ].map(
-          option => html`
-            <button
-              state
-              ?selected=${this.stateFilter === option.value}
-              @click=${() => {
-                this.stateFilter = option.value
-                this.reload()
-              }}
-            >
-              ${option.label}
-            </button>
-          `
-        )}
-        ${this.loaded ? html`<span count>${i18next.t('text.figure-count', { count: this.total })}</span>` : ''}
-      </div>
-
-      ${!this.loaded
-        ? html``
-        : this.failure
-          ? html`
-              <div empty>
-                <md-icon>error</md-icon>
-                <p>${i18next.t('text.could-not-load-figures')}</p>
-                <p quiet>${this.failure}</p>
-                <button @click=${() => this.reload()}>${i18next.t('button.try-again')}</button>
-              </div>
-            `
-          : this.figures.length === 0
-          ? this.renderEmpty()
-          : html`
-              <div cards>
-                ${this.figures.map(
-                  figure => html`
-                    <figure-card
-                      .figure=${figure}
-                      @open=${() => this.openModeller(figure.id)}
-                      @remove=${() => this.removeFigure(figure)}
-                    ></figure-card>
-                  `
-                )}
-              </div>
-            `}
+      <ox-grist
+        mode="CARD"
+        .config=${this.gristConfig}
+        .fetchHandler=${this.fetchHandler.bind(this)}
+        .personalConfigProvider=${this.getPagePreferenceProvider('ox-grist')!}
+      >
+        <div slot="headroom" class="header">
+          <div class="filters">
+            <ox-filters-form autofocus without-search></ox-filters-form>
+          </div>
+        </div>
+
+        <ox-grist-personalizer slot="setting"></ox-grist-personalizer>
+      </ox-grist>
     `
   }
 
-  /**
-   * 빈 화면.
-   *
-   * 걸러 보기 때문에 비었는지, 아직 만든 것이 없어서 비었는지를 **가른다.** 같은
-   * 문구를 쓰면 사용자가 검색어를 지워 볼 생각을 못 한다.
-   */
-  private renderEmpty() {
-    const filtered = !!this.search || !!this.stateFilter
-
-    if (filtered) {
-      return html`
-        <div empty>
-          <md-icon>search_off</md-icon>
-          <h2>${i18next.t('text.no-figure-matches-the-filter')}</h2>
-          <p>${i18next.t('text.try-clearing-the-search-or-state-filter')}</p>
-          <button
-            @click=${() => {
-              this.search = ''
-              this.stateFilter = ''
-              this.reload()
-            }}
-          >
-            ${i18next.t('button.clear-filters')}
-          </button>
-        </div>
-      `
-    }
+  async pageInitialized() {
+    this.gristConfig = {
+      /*
+        **쪽 나누기는 선택이 아니다.** 격자에 가상 스크롤이 없어 받은 것을 전부 DOM 에 그린다.
+        카드 모드는 끝까지 내려가면 다음 쪽을 이어 붙이므로, 한 쪽이 작아도 목록은 계속 읽힌다.
+      */
+      pagination: { pages: [24, 48, 96] },
 
-    return html`
-      <div empty>
-        <md-icon>deployed_code</md-icon>
-        <h2>${i18next.t('text.no-figure-yet')}</h2>
-        <p>${i18next.t('text.what-a-figure-is')}</p>
-        <button @click=${() => this.openModeller()}>${i18next.t('button.new-figure')}</button>
-      </div>
-    `
+      /*
+        아직 아무것도 없을 때 하는 말. **이 자리가 이 화면에서 가장 중요하다** — 처음 온 사람은
+        여기서 이 도구가 무엇을 만드는 것인지 알게 된다. 조건이 걸려 비었을 때는 격자가 스스로
+        다른 말을 한다(「찾는 것이 없다」). 그 둘을 섞지 않는 것이 격자 쪽에 이미 들어 있다.
+      */
+      emptyNote: {
+        icon: 'deployed_code',
+        title: i18next.t('text.no-figure-yet'),
+        description: i18next.t('text.what-a-figure-is')
+      },
+
+      list: {
+        thumbnail: 'thumbnail',
+        /* 그림이 없는 카드도 자리는 지킨다 — 빈 사각형으로 두지 않고 왜 없는지 말한다 */
+        emptyThumbnail: {
+          icon: 'deployed_code',
+          label: i18next.t('text.thumbnail-not-made-yet')
+        },
+        fields: ['name', 'type'],
+        /*
+          **카드에는 고를 때 쓰는 것만 싣는다.**
+
+          배치 한도·성숙도·삼각형 수·수정일시까지 실어 봤더니 카드가 명세표가 되었다. 카탈로그에서
+          사람이 하는 일은 「이거다」를 고르는 것이고, 그때 보는 것은 그림과 이름이다.
+
+          숫자는 **하나만** 남긴다 — 성숙도다. 셋 중 이것 하나가 나머지를 요약한다(배치 한도와
+          삼각형 수는 무게 한 가지만 말하는데, 성숙도는 무게·식별성·상태 표현까지 여러 축을 합친
+          값이다). 그 축별 내역과 나머지 숫자는 표 모드의 칸과 저작면에 있다.
+
+          이름표는 달지 않는다. 성숙도는 색과 숫자로 읽히고, 상태는 발행된 것에 아무 말도 하지
+          않는다(그것이 예사다) — 초안일 때만 「초안」이 뜬다.
+        */
+        details: ['state', 'score'],
+        /* 삭제는 손이 갈 때만 나온다 — 고르려고 보는 자리에 되돌릴 수 없는 조작을 띄우지 않는다 */
+        gutters: 'hover'
+      },
+
+      columns: [
+        { type: 'gutter', gutterName: 'sequence', fixed: true },
+        {
+          type: 'gutter',
+          gutterName: 'button',
+          icon: 'delete',
+          title: i18next.t('button.delete'),
+          danger: true,
+          width: 40,
+          handlers: {
+            click: (_columns: any, _data: any, _column: any, record: Figure) => this.removeFigure(record)
+          }
+        },
+        {
+          type: 'string',
+          name: 'name',
+          header: i18next.t('label.name'),
+          record: { editable: false },
+          filter: 'search',
+          sortable: true,
+          width: 200
+        },
+        {
+          /*
+            타입 이름은 **저장되는 식별자**다. 표시 이름과 다르게 보이게 두어야 보드가 무엇으로
+            이 형상을 찾는지 헷갈리지 않는다.
+          */
+          type: 'string',
+          name: 'type',
+          header: i18next.t('label.type'),
+          record: {
+            editable: false,
+            renderer: (value: string) => html`<code>${value}</code>`
+          },
+          filter: 'search',
+          sortable: true,
+          width: 160
+        },
+        {
+          type: 'string',
+          name: 'state',
+          header: i18next.t('label.state'),
+          record: {
+            editable: false,
+            /*
+              **발행된 것에는 아무 말도 하지 않는다.** 카탈로그에 있는 것은 대개 발행된 것이라,
+              카드마다 「발행됨」이 붙으면 그 말이 아무것도 가르지 않고 자리만 먹는다. 판 번호도
+              고를 때 쓰는 값이 아니다 — 이력 탭에 있다.
+
+              표 모드에서는 칸에 값이 있어야 하므로 그때는 발행됨도 적는다(`wide` 가 아니라 label
+              이 붙는 자리인지로 가른다 — 카드는 label 을 달지 않았다).
+            */
+            renderer: (value: string, _column: any, record: Figure, _rowIndex: number, field: Element) => {
+              if (value !== 'released') {
+                return html`<span style=${DRAFT}>${i18next.t('label.draft')}</span>`
+              }
+
+              /* 표에서는 칸이 비면 안 된다. 카드에서만 입을 다문다 — 그리는 자리가 알려 준다. */
+              return field?.tagName === 'OX-CARD-FIELD'
+                ? ''
+                : html`<span style=${RELEASED}
+                    >${i18next.t('label.released')}
+                    ${record.version ? i18next.t('text.version-number', { version: record.version }) : ''}</span
+                  >`
+            }
+          },
+          /* 전체·초안·발행됨을 단추로 고른다 — 값이 둘뿐인 조건을 펼침 목록에 넣지 않는다 */
+          filter: {
+            type: 'select-buttons',
+            operator: 'in',
+            options: [
+              { display: i18next.t('label.draft'), value: 'draft' },
+              { display: i18next.t('label.released'), value: 'released' }
+            ]
+          },
+          width: 120
+        },
+        {
+          /*
+            **몇 개까지 놓을 수 있나.** 카드에는 싣지 않고 표 모드의 칸으로 둔다 — 고른 뒤에
+            따지는 값이다. 서버에 없는 값이라 `groups` 와 `triangles` 에서 계산하는데, 저작면
+            머리와 **같은 함수**를 쓴다. 두 화면이 같은 형상을 다른 잣대로 말하면 무엇을 고칠지
+            모른다.
+          */
+          type: 'string',
+          name: 'capacity',
+          header: i18next.t('label.capacity'),
+          label: true,
+          sortable: false,
+          record: {
+            editable: false,
+            renderer: (_value: unknown, _column: any, record: Figure) => {
+              const capacity = capacityFrom(record.groups ?? 0, record.triangles ?? 0)
+
+              return capacity
+                ? html`<span style=${CAPACITY} title=${i18next.t('text.reuse-score-explained')}>
+                    ${i18next.t('text.fits-n-instances', { n: capacity.instances.toLocaleString() })}
+                  </span>`
+                : html`<span style=${UNMEASURED}>${i18next.t('text.not-measured-yet')}</span>`
+            }
+          },
+          width: 120
+        },
+        {
+          type: 'float',
+          name: 'score',
+          header: i18next.t('label.maturity'),
+          record: {
+            editable: false,
+            /*
+              카드에 남긴 하나뿐인 숫자. **이름표를 달지 않으므로** 무엇인지는 색과 손이 갔을 때
+              뜨는 말이 알려 준다.
+
+              아직 재지 않은 것을 **0 으로 보여 주지 않는다.** 0 은 「가볍다」는 뜻이 되어 버린다.
+              등급 문자(A~D)도 여기서 만들지 않는다 — 경계는 `figure-model` 이 정하고 그것을
+              화면이 베끼면 두 벌이 되어 목록과 저작면이 다른 등급을 말한다.
+            */
+            renderer: (value: number | null) =>
+              value == null
+                ? html`<span style=${UNMEASURED}>${i18next.t('text.not-measured-yet')}</span>`
+                : html`<span style=${badge(value < ATTENTION_BELOW)} title=${i18next.t('label.maturity')}
+                    >${Math.round(value)}</span
+                  >`
+          },
+          sortable: true,
+          width: 90
+        },
+        {
+          type: 'integer',
+          name: 'triangles',
+          header: i18next.t('label.triangles'),
+          label: true,
+          record: {
+            editable: false,
+            renderer: (value: number | null) => (value == null ? '' : value.toLocaleString())
+          },
+          sortable: true,
+          width: 110
+        },
+        {
+          type: 'integer',
+          name: 'groups',
+          header: i18next.t('label.budget-groups'),
+          record: { editable: false },
+          hidden: true,
+          width: 0
+        },
+        {
+          type: 'image',
+          name: 'thumbnail',
+          header: i18next.t('field.thumbnail'),
+          record: { editable: false, align: 'center', wide: true },
+          hidden: true,
+          width: 160
+        },
+        {
+          type: 'datetime',
+          name: 'updatedAt',
+          header: i18next.t('field.updated_at'),
+          label: true,
+          record: { editable: false },
+          sortable: true,
+          width: 180
+        },
+        {
+          /*
+            `resource-object` 를 쓰지 않는다 — 그 renderer 는 다른 패키지(resource-ui)가 등록하고,
+            등록되지 않은 앱에서는 조용히 글자 renderer 로 떨어져 `[object Object]` 가 된다.
+            이름 하나 꺼내는 일에 그 위험을 질 이유가 없다.
+          */
+          type: 'string',
+          name: 'updater',
+          header: i18next.t('field.updater'),
+          record: {
+            editable: false,
+            renderer: (value: { name?: string } | null) => value?.name || ''
+          },
+          hidden: true,
+          width: 120
+        }
+      ],
+
+      rows: {
+        selectable: false,
+        appendable: false,
+        handlers: {
+          click: (_columns: any, _data: any, _column: any, record: Figure) => {
+            if (record?.id) {
+              this.openModeller(record.id)
+            }
+          }
+        }
+      },
+
+      sorters: [{ name: 'updatedAt', desc: true }]
+    }
   }
 
   connectedCallback() {
@@ -263,15 +417,10 @@ export class FigureListPage extends FigureListPageBase {
       나간다. 첫 질의가 프로필보다 앞서면 그 한 번이 실패하고, 그 뒤로 다시 묻는 사람이 없으면
       화면은 비어 있는 채로 남는다. lite-menu 도 같은 신호로 같은 순서 문제를 푼다
       (`auth.on('profile')` — 그쪽 주석에 그 사연이 적혀 있다).
-
-      **이 화면에서 그 실패를 실제로 본 적은 없다.** 빈 화면을 봤던 것은 숨은 탭에서 조사할 때였고,
-      그때는 셸이 첫 `pageUpdated` 를 requestAnimationFrame 안에서 부르는데 숨은 탭은 rAF 를 돌리지
-      않아 질의가 아예 나가지 않았다 — 원인이 달랐다. 그래도 이 구독은 남긴다: 값이 싸고, 못 불러온
-      경우를 화면이 말하게 한 아래 처리와 짝이다.
     */
     this.listen = () => {
       if (this.active) {
-        void this.reload()
+        this.grist?.fetch()
       }
     }
     auth.on('profile', this.listen)
@@ -285,34 +434,22 @@ export class FigureListPage extends FigureListPageBase {
     super.disconnectedCallback()
   }
 
-  async pageUpdated(changes: Record<string, unknown>, lifecycle: Record<string, unknown>) {
+  async pageUpdated() {
     if (this.active) {
-      await this.reload()
+      this.grist.fetch()
     }
   }
 
-  private async reload() {
-    /*
-      **못 불러왔으면 그렇게 말한다.**
+  /**
+   * 걸러 보기·정렬·쪽을 **격자가 만든 그대로** 서버에 넘긴다.
+   *
+   * 여기서 이름을 바꿔 담으면 격자가 아는 조건과 서버에 가는 조건이 어긋난다. 실패는 격자가
+   * 받아 화면에 낸다 — 목록이 비어 있는 것과 못 불러온 것은 다른 사실이다.
+   */
+  async fetchHandler({ page = 1, limit = 24, sortings = [], filters = [] }: FetchOption) {
+    const { items, total } = await fetchFigureList({ page, limit, filters, sortings })
 
-      전에는 여기서 던진 오류가 아무도 받지 않아 `loaded` 가 거짓으로 남고, 화면은 아무것도 없이
-      비어 있었다. 목록이 비어 있는 것과 못 불러온 것은 다른 사실이고, 사용자가 할 일도 다르다 —
-      하나는 만들면 되고, 하나는 다시 시도하거나 사람을 불러야 한다.
-    */
-    try {
-      const { items, total } = await fetchFigureList({
-        search: this.search || undefined,
-        state: this.stateFilter || undefined
-      })
-
-      this.figures = items
-      this.total = total
-      this.failure = ''
-    } catch (e) {
-      this.failure = (e as Error).message
-    } finally {
-      this.loaded = true
-    }
+    return { total: total || 0, records: items || [] }
   }
 
   private openModeller(id?: string) {
@@ -328,6 +465,6 @@ export class FigureListPage extends FigureListPageBase {
     }
 
     await deleteFigure(figure.id)
-    await this.reload()
+    this.grist.fetch()
   }
 }