@things-factory/board-ui 10.1.40 → 10.1.42

package/dist-client/pages/board-list-page.js

@@ -1,65 +1,74 @@
 import { __decorate, __metadata } from "tslib";
+import '@operato/data-grist';
+import '@material/web/icon/icon.js';
+import '@material/web/button/text-button.js';
+import '../board-list/board-thumb.js';
 import '../viewparts/board-info.js';
 import '../viewparts/group-info.js';
-import '../board-list/board-tile-list.js';
-import '../board-list/group-bar.js';
 import gql from 'graphql-tag';
 import { css, html } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
+import { DataGrist } from '@operato/data-grist';
 import { client } from '@operato/graphql';
 import { i18next, localize } from '@operato/i18n';
-import { openOverlay } from '@operato/layout';
+import { openPopup } from '@operato/layout';
 import { pulltorefresh } from '@operato/pull-to-refresh';
 import { navigate, PageView, store } from '@operato/shell';
-import { ScrollbarStyles } from '@operato/styles';
-import InfiniteScrollable from '@operato/utils/mixins/infinite-scrollable.js';
+import { CommonGristStyles, CommonHeaderStyles, ScrollbarStyles, WorkSurfacePageStyles } from '@operato/styles';
+import { hasPrivilege } from '@things-factory/auth-base/dist-client/index.js';
 import { UPDATE_FAVORITES } from '@things-factory/fav-base/client/index.js';
-import { swipe } from '@things-factory/utils/src/index.js';
 import { notify } from '../utils/notify-helper.js';
-import { cloneBoard, releaseBoard, revertBoardVersion, createBoard, createGroup, deleteBoard, deleteGroup, fetchBoardList, fetchBoardsUpdatedSince, fetchFavoriteBoardList, fetchMyBoardList, fetchGroupList, updateBoard, updateGroup, importBoards } from '../graphql';
-const BoardListPageBase = localize(i18next)(InfiniteScrollable(PageView));
+import { boardMeta } from '../utils/board-meta.js';
+import { BoardCardStyles } from '../styles/board-card-styles.js';
+import { cloneBoard, releaseBoard, revertBoardVersion, createBoard, createGroup, deleteBoard, deleteGroup, fetchBoardList, fetchFavoriteBoardList, fetchMyBoardList, fetchGroupList, updateBoard, updateGroup, importBoards } from '../graphql';
+const BoardListPageBase = localize(i18next)(PageView);
+/*
+ * ox-grist (CARD mode) like figure-list-page and board-template-list-page, instead of the
+ * board-only board-tile-list fork - see ADR on shared-component-over-app-fork. Drag-reorder comes
+ * from `rows.reorderable`, a capability added to data-grist for this (2026-09-23); it dispatches a
+ * `reorder` event and leaves persisting it to us, same contract board-tile-list's `reordered` used.
+ *
+ * Traded away in the move: the delta-merge `incrementalRefresh()` that patched only changed boards
+ * in place with a highlight-flash animation. ox-grist's own pagination (`attach-page`, handled
+ * internally by data-provider.ts) replaces the hand-rolled infinite scroll, but a group/search change
+ * now does a plain full refetch rather than an in-place merge. Worth revisiting if the flash-on-update
+ * cue turns out to matter in practice.
+ */
 let BoardListPage = class BoardListPage extends BoardListPageBase {
+    constructor() {
+        super(...arguments);
+        this.groups = [];
+        this.favorites = [];
+        this.searchText = '';
+        this.creatable = false;
+        /* Kept only to prefill board-info's "which group" context - the filter itself is the source of
+         * truth for what fetchHandler actually asks the server for. */
+        this.currentGroupId = '';
+    }
     static { this.styles = [
+        /* The frame owns the page shell; the grist is the content it sizes (ADR-0060 decision 8). */
+        WorkSurfacePageStyles,
         ScrollbarStyles,
+        CommonGristStyles,
+        CommonHeaderStyles,
+        /* The card itself - shared with the other catalogs, see styles/board-card-styles.ts. */
+        BoardCardStyles,
         css `
-      :host {
-        display: flex;
-        flex-direction: column;
-        position: relative;
-
-        overflow: hidden;
-      }
-
-      board-tile-list {
+      ox-filters-form {
         flex: 1;
-        overflow-y: auto;
-      }
-
-      #create {
-        position: absolute;
-        bottom: 15px;
-        right: 16px;
       }
     `
     ]; }
     get context() {
-        const groupId = this.groupId;
-        const group = this.groups && this.groups.find(group => group.id === groupId);
         return {
-            title: {
-                icon: 'dashboard',
-                text: group
-                    ? 'Group ' + group.name
-                    : groupId == 'favor'
-                        ? 'Favorite'
-                        : groupId == 'mywork'
-                            ? 'My works'
-                            : 'Board List'
-            },
+            /* A plain name, no icon - the rail already carries the icon for this screen, and figure's
+             * title bar is bare text too. */
+            title: i18next.t('title.board list', { defaultValue: 'Board List' }),
             search: {
+                placeholder: i18next.t('text.search boards by name', { defaultValue: 'Search boards by name' }),
                 handler: search => {
                     this.searchText = search;
-                    this.refreshBoards();
+                    this.grist?.fetch();
                     // URL에 검색어 반영 → 페이지 복귀 시 유지
                     const url = new URL(window.location.href);
                     if (search) {
@@ -75,82 +84,215 @@ let BoardListPage = class BoardListPage extends BoardListPageBase {
             board_topmenu: true
         };
     }
-    constructor() {
-        super();
-        this.groups = [];
-        this.boards = [];
-        this.favorites = [];
-        this.showMainBoardOnly = true;
-        this.searchText = '';
-        this._page = 1;
-        this._total = 0; /* required for infinite-scrolling */
-        this._updatedBoardIds = [];
-        /**
-         * 컨텐츠가 스크롤 영역을 채우지 못하면 다음 페이지를 자동 로드한다.
-         */
-        this._filling = false;
-        this._infiniteScrollOptions.limit = 50;
-    }
     render() {
         return html `
-      <group-bar
-        .groups=${this.groups}
-        .groupId=${this.groupId}
-        targetPage="board-list"
-        @info-group=${e => this.onInfoGroup(e.detail)}
-        @show-all-board-type=${e => this.showAllBoardType(e)}
-      ></group-bar>
+      <ox-grist
+        class="page-fill"
+        mode="CARD"
+        .config=${this.gristConfig}
+        .fetchHandler=${this.fetchHandler.bind(this)}
+        @reorder=${e => this.onReorderBoards(e.detail)}
+      >
+        <div slot="headroom">
+          <ox-filters-form autofocus without-search></ox-filters-form>
+          ${this.groups.some(group => group.id === this.currentGroupId)
+            ? html `
+                <md-text-button @click=${() => this.onInfoGroup(this.currentGroupId)}>
+                  <md-icon slot="icon">edit</md-icon>
+                  ${i18next.t('text.edit group', { defaultValue: 'Edit' })}
+                </md-text-button>
+              `
+            : ''}
+          <md-text-button @click=${() => this.onInfoGroup(undefined)}>
+            <md-icon slot="icon">create_new_folder</md-icon>
+            ${i18next.t('text.new group', { defaultValue: 'New Group' })}
+          </md-text-button>
+        </div>
+      </ox-grist>
 
-      <board-tile-list
-        id="list"
-        .boards=${this.boards}
-        .favorites=${this.favorites}
-        .groups=${this.groups}
-        .group=${this.groupId}
-        .updatedIds=${this._updatedBoardIds}
-        search-text=${this.searchText}
-        @info-board=${e => this.onInfoBoard(e.detail)}
-        @scroll=${e => {
-            ;
-            this.onScroll(e);
-        }}
-        @create-board=${e => this.onCreateBoard(e.detail)}
-        @refresh-favorites=${e => this.refreshFavorites()}
-        @reordered=${e => this.onReorderBoards(e.detail)}
-        creatable
-        reorderable
-      ></board-tile-list>
+      ${this.creatable
+            ? html `
+            <button fab title=${i18next.t('text.create board', { defaultValue: 'Create Board' })} @click=${() => navigate('board-create')}>
+              <md-icon>add</md-icon>${i18next.t('text.create board', { defaultValue: 'Create Board' })}
+            </button>
+          `
+            : ''}
     `;
     }
+    async pageInitialized() {
+        this.creatable = await hasPrivilege({ privilege: 'mutation', category: 'board', domainOwnerGranted: true });
+        this.gristConfig = {
+            list: {
+                thumbnail: 'thumbnail',
+                /* name, then a quieter "v3 · 2 days ago" line - the same two-line rhythm as figure's
+                 * name-over-type, using what a board actually has (utils/board-meta.ts). */
+                fields: ['name', 'meta'],
+                details: []
+            },
+            columns: [
+                {
+                    type: 'image',
+                    name: 'thumbnail',
+                    record: {
+                        editable: false,
+                        align: 'center',
+                        renderEmpty: true,
+                        /* board-thumb.ts owns the picture and the draft badge; info/favorite are the two gutter
+                         * columns below, in the information area rather than overlaid on the image - see
+                         * board-thumb.ts's own header comment for why board's case differs from figure's. */
+                        renderer: (value, column, record) => html `<board-thumb .board=${record}></board-thumb>`
+                    }
+                },
+                {
+                    type: 'string',
+                    name: 'name',
+                    record: { editable: false }
+                },
+                {
+                    type: 'string',
+                    name: 'meta',
+                    record: { editable: false }
+                },
+                {
+                    type: 'gutter',
+                    gutterName: 'button',
+                    name: 'edit',
+                    /* Edit first, the star last: the star is the one that can stay lit at rest, so it takes
+                     * the corner where the eye lands. */
+                    icon: 'edit',
+                    quiet: true,
+                    title: i18next.t('label.edit', { defaultValue: 'Edit' }),
+                    handlers: {
+                        click: (_columns, _data, _column, record) => this.onInfoBoard(record)
+                    }
+                },
+                {
+                    type: 'gutter',
+                    gutterName: 'button',
+                    name: 'favorite',
+                    icon: (record) => (record?.favorited ? 'star' : 'star_border'),
+                    /* A set star is a status and stays; an unset one is an action and waits for hover. */
+                    quiet: (record) => !record?.favorited,
+                    title: (record) => i18next.t(record?.favorited ? 'label.unfavorite' : 'label.favorite', {
+                        defaultValue: record?.favorited ? 'Remove from favorites' : 'Add to favorites'
+                    }),
+                    handlers: {
+                        click: (_columns, _data, _column, record) => this.toggleFavorite(record)
+                    }
+                },
+                /*
+                 * Group and board-type are filter-only facets - they carry no `list.fields`/`list.details`
+                 * entry, so record-card.ts never draws them on a card. `filters-form`'s delegated `change`
+                 * listener (filters-form.ts) turns any change into a `fetch-params-change` event that
+                 * data-provider.ts already listens for, so no extra wiring is needed to refetch.
+                 */
+                {
+                    type: 'string',
+                    name: 'group',
+                    header: i18next.t('field.group', { defaultValue: 'Group' }),
+                    record: { editable: false },
+                    filter: {
+                        type: 'select',
+                        operator: 'eq',
+                        value: '',
+                        label: i18next.t('field.group', { defaultValue: 'Group' }),
+                        onchange: (value) => {
+                            this.currentGroupId = value;
+                            return true;
+                        },
+                        options: () => [
+                            { value: '', display: i18next.t('label.all', { defaultValue: 'All' }) },
+                            { value: 'favor', display: i18next.t('label.favorite', { defaultValue: 'Favorite' }) },
+                            { value: 'mywork', display: i18next.t('label.my-works', { defaultValue: 'My works' }) },
+                            ...this.groups.map(group => ({ value: group.id, display: group.name }))
+                        ]
+                    }
+                },
+                /*
+                 * Type and state are chips (select-buttons), the way figure's draft/released facet is - a
+                 * facet with two or three values is read faster as a row of toggles than as a checkbox
+                 * or a dropdown. Both are multi-select ('in'), and "Main" starts pressed so the default
+                 * view is the same main-boards-only list as before.
+                 */
+                {
+                    type: 'select-buttons',
+                    name: 'type',
+                    header: i18next.t('field.board-type', { defaultValue: 'Type' }),
+                    record: { editable: false },
+                    filter: {
+                        operator: 'in',
+                        value: ['main'],
+                        label: '',
+                        options: [
+                            { display: i18next.t('label.main', { defaultValue: 'Main' }), value: 'main' },
+                            { display: i18next.t('label.sub', { defaultValue: 'Sub' }), value: 'sub' },
+                            { display: i18next.t('label.popup', { defaultValue: 'Popup' }), value: 'popup' }
+                        ]
+                    }
+                },
+                {
+                    type: 'select-buttons',
+                    name: 'state',
+                    header: i18next.t('field.state', { defaultValue: 'State' }),
+                    record: { editable: false },
+                    filter: {
+                        operator: 'in',
+                        value: [],
+                        label: '',
+                        options: [
+                            { display: i18next.t('label.draft', { defaultValue: 'Draft' }), value: 'draft' },
+                            { display: i18next.t('label.released', { defaultValue: 'Released' }), value: 'released' }
+                        ]
+                    }
+                }
+            ],
+            rows: {
+                selectable: false,
+                appendable: false,
+                reorderable: true,
+                handlers: {
+                    click: (_columns, _data, _column, record) => navigate(`board-viewer/${record.id}`)
+                }
+            },
+            sorters: []
+        };
+        this.refresh();
+    }
+    async fetchHandler({ page = 1, limit = 24, filters = [] }) {
+        const groupId = filters.find(f => f.name === 'group')?.value || '';
+        const types = filters.find(f => f.name === 'type')?.value || [];
+        const states = filters.find(f => f.name === 'state')?.value || [];
+        const { items, total } = await this.getBoards({ page, limit, groupId, types, states });
+        const favorites = this.favorites || [];
+        const records = (items || []).map(board => ({
+            ...board,
+            favorited: favorites.includes(board.id),
+            meta: boardMeta(board)
+        }));
+        return { total, records };
+    }
     async refresh() {
         this.groups = (await fetchGroupList()).groups.items;
         if (this.groups) {
+            /* New reference - `options()` on the group filter closes over `this.groups`, but the filter
+             * widget only re-reads it if `<ox-grist>`'s own `.config` binding actually changes. */
+            this.gristConfig = { ...this.gristConfig };
             await this.refreshBoards();
         }
     }
-    showAllBoardType(e) {
-        this.showMainBoardOnly = !e.detail;
-        this.refreshBoards();
-    }
-    async getBoards({ page = 1, limit = this._infiniteScrollOptions.limit } = {}) {
-        if (this.groupId && this.groupId == 'favor') {
-            return await this.getFavoriteBoards({
-                page,
-                limit
-            });
+    async getBoards({ page = 1, limit = 24, groupId = '', types = [], states = [] } = {}) {
+        if (groupId === 'favor') {
+            return await this.getFavoriteBoards({ page, limit, types, states });
         }
-        else if (this.groupId && this.groupId == 'mywork') {
-            return await this.getMyBoards({
-                page,
-                limit
-            });
+        else if (groupId === 'mywork') {
+            return await this.getMyBoards({ page, limit, types, states });
         }
         const filters = [];
-        if (this.groupId) {
+        if (groupId) {
             filters.push({
                 name: 'groupId',
                 operator: 'eq',
-                value: this.groupId
+                value: groupId
             });
         }
         if (this.searchText) {
@@ -160,11 +302,18 @@ let BoardListPage = class BoardListPage extends BoardListPageBase {
                 value: '%' + this.searchText + '%'
             });
         }
-        if (this.showMainBoardOnly) {
+        if (types.length) {
             filters.push({
                 name: 'type',
-                operator: 'eq',
-                value: 'main'
+                operator: 'in',
+                value: types
+            });
+        }
+        if (states.length) {
+            filters.push({
+                name: 'state',
+                operator: 'in',
+                value: states
             });
         }
         const listParam = {
@@ -190,8 +339,16 @@ let BoardListPage = class BoardListPage extends BoardListPageBase {
      * favor/mywork 같이 "search text + pagination"만 받는 간단한 리스트 조회 공용 헬퍼.
      * 그룹/타입 필터 등 복합 조건을 쓰는 일반 목록(getBoards)과 구분해 중복 제거.
      */
-    async _fetchSimpleBoardList(fetcher, resultKey, { page, limit }) {
+    async _fetchSimpleBoardList(fetcher, resultKey, { page, limit, types = [], states = [] }) {
+        /* The type and state chips apply here too - the server narrows these lists with the same
+         * filters as the plain board list, so a pressed chip means the same thing in every view. */
         const filters = [];
+        if (types.length) {
+            filters.push({ name: 'type', operator: 'in', value: types });
+        }
+        if (states.length) {
+            filters.push({ name: 'state', operator: 'in', value: states });
+        }
         if (this.searchText) {
             filters.push({
                 name: 'name',
@@ -202,129 +359,30 @@ let BoardListPage = class BoardListPage extends BoardListPageBase {
         const result = await fetcher({ filters, pagination: { page, limit } });
         return result[resultKey];
     }
-    async getFavoriteBoards({ page = 1, limit = this._infiniteScrollOptions.limit } = {}) {
-        return this._fetchSimpleBoardList(fetchFavoriteBoardList, 'favoriteBoards', { page, limit });
+    async getFavoriteBoards({ page = 1, limit = 24, types = [], states = [] } = {}) {
+        return this._fetchSimpleBoardList(fetchFavoriteBoardList, 'favoriteBoards', { page, limit, types, states });
     }
-    async getMyBoards({ page = 1, limit = this._infiniteScrollOptions.limit } = {}) {
-        return this._fetchSimpleBoardList(fetchMyBoardList, 'boardsCreatedByMe', { page, limit });
+    async getMyBoards({ page = 1, limit = 24, types = [], states = [] } = {}) {
+        return this._fetchSimpleBoardList(fetchMyBoardList, 'boardsCreatedByMe', { page, limit, types, states });
     }
     async refreshBoards() {
         if (!this.groups) {
             await this.refresh();
             return;
         }
-        const { items: boards, total } = await this.getBoards();
-        this.boards = boards;
-        this._page = 1;
-        this._total = total;
-        this._lastFetchTime = new Date();
         this.updateContext();
-        this.scrollTargetEl.style.transition = '';
-        this.scrollTargetEl.style.transform = `translate3d(0, 0, 0)`;
-        this.fillViewport();
-    }
-    async fillViewport() {
-        if (this._filling)
-            return;
-        this._filling = true;
-        try {
-            const el = this.scrollTargetEl;
-            if (!el)
-                return;
-            const { limit } = this._infiniteScrollOptions;
-            while (this._page < this._total / limit && el.scrollHeight <= el.clientHeight) {
-                await this.appendBoards();
-                await this.updateComplete;
-            }
+        this.grist?.fetch();
+        if (this.grist) {
+            this.grist.style.transition = '';
+            this.grist.style.transform = `translate3d(0, 0, 0)`;
         }
-        finally {
-            this._filling = false;
-        }
-    }
-    /**
-     * 기존 목록을 유지하면서 변경된 보드만 갱신한다.
-     * 스크롤 위치가 보존된다.
-     */
-    async incrementalRefresh() {
-        if (!this._lastFetchTime || this.boards.length === 0) {
-            return this.refreshBoards();
-        }
-        // boardsUpdatedSince 는 *전역* 델타라, 즐겨찾기/내작업/검색 모드는 소속·검색일치를
-        // 클라이언트에서 판별할 수 없다 → 정확성 위해 전체 갱신으로 폴백.
-        // (일반 그룹/전체 보기에서만 증분 병합으로 스크롤을 유지한다.)
-        if (this.groupId === 'favor' || this.groupId === 'mywork' || this.searchText) {
-            return this.refreshBoards();
-        }
-        const updatedBoards = await fetchBoardsUpdatedSince(this._lastFetchTime);
-        if (updatedBoards && updatedBoards.length > 0) {
-            const updatedMap = new Map(updatedBoards.map((b) => [b.id, b]));
-            const existingIds = new Set(this.boards.map(b => b.id));
-            const changedIds = [];
-            // 현재 보기(그룹/타입 필터)에 속하는 살아있는 보드인지
-            const belongsToView = (b) => !b.deletedAt &&
-                (!this.groupId || b.group?.id === this.groupId) &&
-                (!this.showMainBoardOnly || b.type === 'main');
-            // 1) 기존 항목: 변경분 갱신, 삭제·그룹이동·타입이탈은 제거
-            const merged = this.boards
-                .map(board => {
-                const updated = updatedMap.get(board.id);
-                if (!updated)
-                    return board;
-                if (!belongsToView(updated))
-                    return null;
-                changedIds.push(updated.id);
-                return updated;
-            })
-                .filter(Boolean);
-            const removedCount = this.boards.length - merged.length;
-            // 2) 신규: 기존 리스트에 없고 현재 보기에 속하는 보드를 삽입 (새로 만든 보드가 여기 해당)
-            const inserted = updatedBoards.filter((b) => !existingIds.has(b.id) && belongsToView(b));
-            for (const b of inserted)
-                changedIds.push(b.id);
-            // 3) 서버 정렬(sortOrder asc, name asc) 유지 — 새 항목이 제 위치에 끼어들고 기존 순서/스크롤 보존
-            this.boards = [...merged, ...inserted].sort((a, b) => (a.sortOrder ?? 0) - (b.sortOrder ?? 0) ||
-                String(a.name ?? '').localeCompare(String(b.name ?? '')));
-            this._total += inserted.length - removedCount;
-            this._updatedBoardIds = changedIds;
-        }
-        this._lastFetchTime = new Date();
-    }
-    async appendBoards() {
-        if (!this.groups) {
-            await this.refresh();
-            return;
-        }
-        const { items: appendedBoards, total } = await this.getBoards({ page: this._page + 1 });
-        const existingIds = new Set(this.boards.map(b => b.id));
-        const newBoards = appendedBoards.filter(b => !existingIds.has(b.id));
-        this.boards = [...this.boards, ...newBoards];
-        this._page = this._page + 1;
-        this._total = total;
-        this._lastFetchTime = new Date();
-    }
-    async scrollAction() {
-        return this.appendBoards();
-    }
-    async pageInitialized() {
-        this.refresh();
     }
     async pageUpdated(changes, lifecycle) {
         if (this.active) {
-            const prevGroupId = this.groupId;
-            const prevSearchText = this.searchText;
-            this.page = lifecycle.page;
-            this.groupId = lifecycle.resourceId;
-            this.searchText = lifecycle.params?.search || '';
-            await this.updateComplete;
-            // 검색어가 변경되었으면 전체 갱신
-            // 같은 그룹으로 복귀하고 기존 데이터가 있으면 변경분만 갱신 (스크롤 유지)
-            if (prevSearchText !== this.searchText) {
-                this.refreshBoards();
-            }
-            else if (prevGroupId === this.groupId && this.boards.length > 0 && this._lastFetchTime) {
-                this.incrementalRefresh();
-            }
-            else {
+            const searchText = lifecycle.params?.search || '';
+            if (searchText !== this.searchText) {
+                this.searchText = searchText;
+                await this.updateComplete;
                 this.refreshBoards();
             }
         }
@@ -340,58 +398,35 @@ let BoardListPage = class BoardListPage extends BoardListPageBase {
     }
     _applyState() {
         const __state__ = store.getState();
-        this.favorites = __state__.favorite.favorites;
+        const favorites = __state__.favorite.favorites;
+        /*
+         * `store.subscribe` fires on every dispatch anywhere in the app, not just favorite changes -
+         * `favorited` is folded into each record inside `fetchHandler`, so refreshing it means a
+         * refetch, and an unconditional one here span a real loop: fetch() completing dispatches through
+         * this same store, which re-enters this callback, which calls fetch() again.
+         */
+        const changed = JSON.stringify(favorites) !== JSON.stringify(this.favorites);
+        this.favorites = favorites;
+        if (changed) {
+            this.grist?.fetch();
+        }
     }
     firstUpdated() {
-        const list = this.scrollTargetEl;
+        /* Group used to be a route segment, and swiping moved between routes - now it is one filter
+         * among others in the same list, so there is no longer a sequence of screens to swipe between. */
         pulltorefresh({
             container: this.renderRoot,
-            scrollable: list,
+            scrollable: this.grist,
             refresh: () => {
                 return this.refresh();
             }
         });
-        swipe({
-            container: list,
-            animates: {
-                dragging: async (d, opts) => {
-                    const groups = [{ id: '' }, { id: 'favor' }, ...this.groups];
-                    const currentIndex = groups.findIndex(group => group.id == this.groupId);
-                    if ((d > 0 && currentIndex <= 0) || (d < 0 && currentIndex >= groups.length - 1)) {
-                        /* TODO blocked gesture */
-                        return false;
-                    }
-                    list.style.transform = `translate3d(${d}px, 0, 0)`;
-                },
-                aborting: async (opts) => {
-                    list.style.transition = 'transform 0.3s';
-                    list.style.transform = `translate3d(0, 0, 0)`;
-                    setTimeout(() => {
-                        list.style.transition = '';
-                    });
-                },
-                swiping: async (d, opts) => {
-                    const groups = [{ id: '' }, { id: 'favor' }, ...this.groups];
-                    const currentIndex = groups.findIndex(group => group.id == this.groupId);
-                    if ((d > 0 && currentIndex <= 0) || (d < 0 && currentIndex >= groups.length - 1)) {
-                        list.style.transition = '';
-                        list.style.transform = `translate3d(0, 0, 0)`;
-                    }
-                    else {
-                        list.style.transition = 'transform 0.3s';
-                        list.style.transform = `translate3d(${d < 0 ? '-100%' : '100%'}, 0, 0)`;
-                        navigate(`${this.page}/${groups[currentIndex + (d < 0 ? 1 : -1)].id}${this.searchText ? '?search=' + this.searchText : ''}`);
-                    }
-                }
-            }
-        });
     }
     async onInfoBoard(board) {
-        openOverlay('viewpart-info', {
-            template: html `
+        openPopup(html `
         <board-info
           .board=${board}
-          .groupId=${this.groupId}
+          .groupId=${this.currentGroupId}
           @clone-board=${e => this.onCloneBoard(e.detail)}
           @release-board=${e => this.onReleaseBoard(e.detail)}
           @revert-board-version=${e => this.onRevertBoardVersion(e.detail)}
@@ -401,12 +436,11 @@ let BoardListPage = class BoardListPage extends BoardListPageBase {
           @leave-playgroup=${e => this.onLeavePlayGroup(e.detail)}
           @register-template=${e => this.onRegisterTemplate(e.detail)}
         ></board-info>
-      `
-        });
+      `, { backdrop: true, size: 'medium', closable: true, title: board.name });
     }
     async onInfoGroup(groupId) {
-        openOverlay('viewpart-info', {
-            template: html `
+        const group = this.groups.find(group => group.id == groupId);
+        openPopup(html `
         <group-info
           .groupId=${groupId}
           @update-group=${e => this.onUpdateGroup(e.detail)}
@@ -414,7 +448,11 @@ let BoardListPage = class BoardListPage extends BoardListPageBase {
           @create-group=${e => this.onCreateGroup(e.detail)}
           @import-boards=${e => this.onImportBoards(e.detail)}
         ></group-info>
-      `
+      `, {
+            backdrop: true,
+            size: 'small',
+            closable: true,
+            title: group?.name || i18next.t('text.new group', { defaultValue: 'New Group' })
         });
     }
     async onCreateGroup(group) {
@@ -457,13 +495,12 @@ let BoardListPage = class BoardListPage extends BoardListPageBase {
         }
         this.refresh();
     }
-    async onReorderBoards({ boardIds, movedId }) {
+    async onReorderBoards({ ids, movedId }) {
         if (!movedId)
             return;
-        const newIndex = boardIds.indexOf(movedId);
-        const prevId = newIndex > 0 ? boardIds[newIndex - 1] : undefined;
-        const nextId = newIndex < boardIds.length - 1 ? boardIds[newIndex + 1] : undefined;
-        this.boards = boardIds.map(id => this.boards.find(b => b.id === id)).filter(Boolean);
+        const newIndex = ids.indexOf(movedId);
+        const prevId = newIndex > 0 ? ids[newIndex - 1] : undefined;
+        const nextId = newIndex < ids.length - 1 ? ids[newIndex + 1] : undefined;
         try {
             await client.mutate({
                 mutation: gql `
@@ -509,7 +546,7 @@ let BoardListPage = class BoardListPage extends BoardListPageBase {
         catch (ex) {
             notify('error', ex, ex);
         }
-        this.incrementalRefresh();
+        this.refreshBoards();
     }
     async onReleaseBoard(board) {
         try {
@@ -519,7 +556,7 @@ let BoardListPage = class BoardListPage extends BoardListPageBase {
         catch (ex) {
             notify('error', ex, ex);
         }
-        this.incrementalRefresh();
+        this.refreshBoards();
     }
     async onRevertBoardVersion({ id, version }) {
         try {
@@ -529,7 +566,7 @@ let BoardListPage = class BoardListPage extends BoardListPageBase {
         catch (ex) {
             notify('error', ex, ex);
         }
-        this.incrementalRefresh();
+        this.refreshBoards();
     }
     async onUpdateBoard(board) {
         try {
@@ -539,7 +576,7 @@ let BoardListPage = class BoardListPage extends BoardListPageBase {
         catch (ex) {
             notify('error', ex, ex);
         }
-        this.incrementalRefresh();
+        this.refreshBoards();
     }
     async onDeleteBoard(board) {
         try {
@@ -549,7 +586,7 @@ let BoardListPage = class BoardListPage extends BoardListPageBase {
         catch (ex) {
             notify('error', ex, ex);
         }
-        this.incrementalRefresh();
+        this.refreshBoards();
     }
     async onJoinPlayGroup({ board, playGroup }) {
         try {
@@ -621,6 +658,78 @@ let BoardListPage = class BoardListPage extends BoardListPageBase {
             notify('error', ex, ex);
         }
     }
+    async toggleFavorite(board) {
+        const wasFavorite = (this.favorites || []).includes(board.id);
+        /*
+         * The star answers the click at once; the server round trip only confirms it. Before, nothing
+         * moved until the mutation, the favorites re-query, the store dispatch and a full refetch had
+         * all come back - a click with no reaction reads as a click that did not land.
+         *
+         * `favorites` is set locally too, so the store update that follows carries the same list and
+         * `_applyState` does not trigger the refetch that would repaint every card.
+         */
+        this.favorites = wasFavorite
+            ? (this.favorites || []).filter(id => id !== board.id)
+            : [...(this.favorites || []), board.id];
+        this.patchRecord(board.id, { favorited: !wasFavorite });
+        try {
+            if (wasFavorite) {
+                await this.removeFavorite(board.id);
+            }
+            else {
+                await this.addFavorite(board.id);
+            }
+            /* In the Favorite view an unstarred board no longer belongs on the page: refetch so it leaves. */
+            if (this.currentGroupId === 'favor') {
+                this.grist?.fetch();
+            }
+        }
+        catch (ex) {
+            /* Put it back the way it was and say why. */
+            this.favorites = wasFavorite
+                ? [...(this.favorites || []), board.id]
+                : (this.favorites || []).filter(id => id !== board.id);
+            this.patchRecord(board.id, { favorited: wasFavorite });
+            notify('error', ex?.message || String(ex));
+        }
+    }
+    /** Replaces one record in the grist in place, so only that card re-renders. */
+    patchRecord(id, patch) {
+        const grist = this.grist;
+        const data = grist?.data;
+        if (!data?.records) {
+            return;
+        }
+        grist.data = {
+            ...data,
+            records: data.records.map(record => (record.id === id ? { ...record, ...patch } : record))
+        };
+    }
+    async removeFavorite(boardId) {
+        await client.mutate({
+            mutation: gql `
+        mutation {
+          deleteFavorite(routing: "${boardId}")
+        }
+      `
+        });
+        this.refreshFavorites();
+    }
+    async addFavorite(boardId) {
+        await client.mutate({
+            mutation: gql `
+        mutation {
+          createFavorite(favorite: {
+            routing: "${boardId}"
+          }) {
+            id
+            routing
+          }
+        }
+      `
+        });
+        this.refreshFavorites();
+    }
     async refreshFavorites() {
         const { data } = await client.query({
             query: gql `
@@ -639,41 +748,36 @@ let BoardListPage = class BoardListPage extends BoardListPageBase {
             });
     }
 };
-__decorate([
-    property({ type: String }),
-    __metadata("design:type", String)
-], BoardListPage.prototype, "groupId", void 0);
 __decorate([
     property({ type: Array }),
     __metadata("design:type", Array)
 ], BoardListPage.prototype, "groups", void 0);
-__decorate([
-    property({ type: Array }),
-    __metadata("design:type", Array)
-], BoardListPage.prototype, "boards", void 0);
 __decorate([
     property({ type: Array }),
     __metadata("design:type", Array)
 ], BoardListPage.prototype, "favorites", void 0);
 __decorate([
-    state(),
-    __metadata("design:type", Boolean)
-], BoardListPage.prototype, "showMainBoardOnly", void 0);
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], BoardListPage.prototype, "gristConfig", void 0);
 __decorate([
     state(),
     __metadata("design:type", String)
 ], BoardListPage.prototype, "searchText", void 0);
 __decorate([
-    query('board-tile-list'),
-    __metadata("design:type", HTMLElement)
-], BoardListPage.prototype, "scrollTargetEl", void 0);
+    state(),
+    __metadata("design:type", Object)
+], BoardListPage.prototype, "creatable", void 0);
 __decorate([
     state(),
-    __metadata("design:type", Array)
-], BoardListPage.prototype, "_updatedBoardIds", void 0);
+    __metadata("design:type", String)
+], BoardListPage.prototype, "currentGroupId", void 0);
+__decorate([
+    query('ox-grist'),
+    __metadata("design:type", DataGrist)
+], BoardListPage.prototype, "grist", void 0);
 BoardListPage = __decorate([
-    customElement('board-list-page'),
-    __metadata("design:paramtypes", [])
+    customElement('board-list-page')
 ], BoardListPage);
 export { BoardListPage };
 //# sourceMappingURL=board-list-page.js.map