@formicoidea/labre-core 0.53.0 → 0.55.0

package/dist/_pkgs/data-view/widget-presets/tools/presets/sort/sort.js

@@ -1,14 +1,51 @@
+var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
+    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
+    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
+    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
+    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
+    var _, done = false;
+    for (var i = decorators.length - 1; i >= 0; i--) {
+        var context = {};
+        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
+        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
+        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
+        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
+        if (kind === "accessor") {
+            if (result === void 0) continue;
+            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
+            if (_ = accept(result.get)) descriptor.get = _;
+            if (_ = accept(result.set)) descriptor.set = _;
+            if (_ = accept(result.init)) initializers.unshift(_);
+        }
+        else if (_ = accept(result)) {
+            if (kind === "field") initializers.unshift(_);
+            else descriptor[key] = _;
+        }
+    }
+    if (target) Object.defineProperty(target, contextIn.name, descriptor);
+    done = true;
+};
+var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
+    var useValue = arguments.length > 2;
+    for (var i = 0; i < initializers.length; i++) {
+        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
+    }
+    return useValue ? value : void 0;
+};
 import { popupTargetFromElement } from '../../../../../affine-components/context-menu/index.js';
-import { IS_MOBILE } from '../../../../../global/env/index.js';
 import { SortIcon } from '@blocksuite/icons/lit';
 import { computed } from '@preact/signals-core';
 import { cssVarV2 } from '@toeverything/theme/v2';
+import { stdContext } from '../../../../../std/index.js';
+import { consume } from '@lit/context';
 import { css, html, nothing } from 'lit';
 import { styleMap } from 'lit/directives/style-map.js';
 import { popCreateSort } from '../../../../core/sort/add-sort.js';
 import { sortTraitKey } from '../../../../core/sort/manager.js';
 import { createSortUtils } from '../../../../core/sort/utils.js';
+import { wordingOf } from '../../../../core/utils/wording.js';
 import { WidgetBase } from '../../../../core/widget/widget-base.js';
+import { DATA_VIEW_SORT } from '../../../../translations.js';
 import { createDefaultShowQuickSettingBar, ShowQuickSettingBarKey, } from '../../../quick-setting-bar/context.js';
 import { popSortRoot } from '../../../quick-setting-bar/sort/root-panel.js';
 const styles = css `
@@ -28,80 +65,108 @@ const styles = css `
     background-color: var(--affine-hover-color);
   }
 
-  .affine-database-sort-button {
+  /* Shown on a phone too, its menus as sheets: 44px for a finger (P7). */
+  @media (pointer: coarse) {
+    .affine-database-sort-button {
+      min-width: 44px;
+      min-height: 44px;
+      justify-content: center;
+    }
   }
 `;
-export class DataViewHeaderToolsSort extends WidgetBase {
-    constructor() {
-        super(...arguments);
-        this.sortUtils$ = computed(() => {
-            const sortTrait = this.view.traitGet(sortTraitKey);
-            if (sortTrait) {
-                return createSortUtils(sortTrait, this.dataViewLogic.eventTrace);
+let DataViewHeaderToolsSort = (() => {
+    let _classSuper = WidgetBase;
+    let _std_decorators;
+    let _std_initializers = [];
+    let _std_extraInitializers = [];
+    return class DataViewHeaderToolsSort extends _classSuper {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _std_decorators = [consume({ context: stdContext })];
+            __esDecorate(this, null, _std_decorators, { kind: "accessor", name: "std", static: false, private: false, access: { has: obj => "std" in obj, get: obj => obj.std, set: (obj, value) => { obj.std = value; } }, metadata: _metadata }, _std_initializers, _std_extraInitializers);
+            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static { this.styles = styles; }
+        get readonly() {
+            return this.view.readonly$.value;
+        }
+        clickSort(event) {
+            const sortUtils = this.sortUtils$.value;
+            if (!sortUtils) {
+                return;
             }
-            return;
-        });
-        this.hasSort = computed(() => {
-            return (this.sortUtils$.value?.sortList$?.value?.length ?? 0) > 0;
-        });
-    }
-    static { this.styles = styles; }
-    get readonly() {
-        return this.view.readonly$.value;
-    }
-    clickSort(event) {
-        const sortUtils = this.sortUtils$.value;
-        if (!sortUtils) {
+            if (this.hasSort.value) {
+                this.toggleShowQuickSettingBar();
+                return;
+            }
+            popCreateSort(popupTargetFromElement(event.currentTarget), {
+                sortUtils: {
+                    ...sortUtils,
+                    add: sort => {
+                        sortUtils.add(sort);
+                        this.toggleShowQuickSettingBar(true);
+                        requestAnimationFrame(() => {
+                            const ele = this.closest('affine-data-view-renderer')?.querySelector('.data-view-sort-button');
+                            if (ele) {
+                                popSortRoot(popupTargetFromElement(ele), {
+                                    sortUtils: sortUtils,
+                                });
+                            }
+                        });
+                    },
+                },
+            });
             return;
         }
-        if (this.hasSort.value) {
-            this.toggleShowQuickSettingBar();
-            return;
+        #std_accessor_storage;
+        /** Absent outside an editor host: the wordings read English. */
+        get std() { return this.#std_accessor_storage; }
+        set std(value) { this.#std_accessor_storage = value; }
+        connectedCallback() {
+            super.connectedCallback();
+            this.style.display = 'flex';
         }
-        popCreateSort(popupTargetFromElement(event.currentTarget), {
-            sortUtils: {
-                ...sortUtils,
-                add: sort => {
-                    sortUtils.add(sort);
-                    this.toggleShowQuickSettingBar(true);
-                    requestAnimationFrame(() => {
-                        const ele = this.closest('affine-data-view-renderer')?.querySelector('.data-view-sort-button');
-                        if (ele) {
-                            popSortRoot(popupTargetFromElement(ele), {
-                                sortUtils: sortUtils,
-                            });
-                        }
-                    });
-                },
-            },
-        });
-        return;
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this.style.display = IS_MOBILE ? 'none' : 'flex';
-    }
-    render() {
-        if (this.readonly)
-            return nothing;
-        const style = styleMap({
-            color: this.hasSort.value
-                ? cssVarV2('text/emphasis')
-                : cssVarV2('icon/primary'),
-        });
-        return html ` <div
+        render() {
+            if (this.readonly)
+                return nothing;
+            const style = styleMap({
+                color: this.hasSort.value
+                    ? cssVarV2('text/emphasis')
+                    : cssVarV2('icon/primary'),
+            });
+            return html ` <div
       @click="${this.clickSort}"
       style="${style}"
       class="affine-database-sort-button"
+      data-testid="dv-tools-sort"
+      role="button"
+      aria-label="${wordingOf(this.std)(DATA_VIEW_SORT)}"
     >
       ${SortIcon()}
     </div>`;
-    }
-    toggleShowQuickSettingBar(show) {
-        const map = this.view.serviceGetOrCreate(ShowQuickSettingBarKey, createDefaultShowQuickSettingBar);
-        map.value = {
-            ...map.value,
-            [this.view.id]: show ?? !map.value[this.view.id],
-        };
-    }
-}
+        }
+        toggleShowQuickSettingBar(show) {
+            const map = this.view.serviceGetOrCreate(ShowQuickSettingBarKey, createDefaultShowQuickSettingBar);
+            map.value = {
+                ...map.value,
+                [this.view.id]: show ?? !map.value[this.view.id],
+            };
+        }
+        constructor() {
+            super(...arguments);
+            this.sortUtils$ = computed(() => {
+                const sortTrait = this.view.traitGet(sortTraitKey);
+                if (sortTrait) {
+                    return createSortUtils(sortTrait, this.dataViewLogic.eventTrace);
+                }
+                return;
+            });
+            this.hasSort = computed(() => {
+                return (this.sortUtils$.value?.sortList$?.value?.length ?? 0) > 0;
+            });
+            this.#std_accessor_storage = __runInitializers(this, _std_initializers, void 0);
+            __runInitializers(this, _std_extraInitializers);
+        }
+    };
+})();
+export { DataViewHeaderToolsSort };

package/dist/_pkgs/data-view/widget-presets/tools/presets/table-add-row/add-row.d.ts

@@ -1,8 +1,11 @@
+import { type BlockStdScope } from '../../../../../std/index.js';
 import { WidgetBase } from '../../../../core/widget/widget-base.js';
 export declare class DataViewHeaderToolsAddRow extends WidgetBase {
     static styles: import("lit").CSSResult;
     private readonly onAddNewRecord;
     private readonly onOpenMenu;
+    /** Absent outside an editor host: the wordings read English. */
+    accessor std: BlockStdScope;
     private get readonly$();
     render(): import("lit-html").TemplateResult<1> | undefined;
 }

package/dist/_pkgs/data-view/widget-presets/tools/presets/table-add-row/add-row.js

@@ -1,14 +1,87 @@
+var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
+    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
+    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
+    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
+    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
+    var _, done = false;
+    for (var i = decorators.length - 1; i >= 0; i--) {
+        var context = {};
+        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
+        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
+        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
+        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
+        if (kind === "accessor") {
+            if (result === void 0) continue;
+            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
+            if (_ = accept(result.get)) descriptor.get = _;
+            if (_ = accept(result.set)) descriptor.set = _;
+            if (_ = accept(result.init)) initializers.unshift(_);
+        }
+        else if (_ = accept(result)) {
+            if (kind === "field") initializers.unshift(_);
+            else descriptor[key] = _;
+        }
+    }
+    if (target) Object.defineProperty(target, contextIn.name, descriptor);
+    done = true;
+};
+var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
+    var useValue = arguments.length > 2;
+    for (var i = 0; i < initializers.length; i++) {
+        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
+    }
+    return useValue ? value : void 0;
+};
 import { unsafeCSSVarV2 } from '../../../../../affine-shared/theme/index.js';
 import { IS_MOBILE } from '../../../../../global/env/index.js';
 import { ArrowDownSmallIcon, PlusIcon } from '@blocksuite/icons/lit';
+import { stdContext } from '../../../../../std/index.js';
+import { consume } from '@lit/context';
 import { css, html } from 'lit';
+import { wordingOf } from '../../../../core/utils/wording.js';
 import { NewRowMenuOpenerKey } from '../../../../core/view-manager/new-row-menu-opener.js';
 import { WidgetBase } from '../../../../core/widget/widget-base.js';
+import { DATA_VIEW_NEW_PAGE, DATA_VIEW_NEW_RECORD, } from '../../../../translations.js';
 const styles = css `
   .new-record {
     font-weight: 500;
   }
 
+  /* A finger needs 44px: the host's touch-target floor (P7). */
+  @media (pointer: coarse) {
+    .new-record {
+      min-height: 44px;
+    }
+  }
+
+  /* On a phone, a blue "+" as Notion draws it: 32px drawn, 44px to touch. */
+  .new-record-phone {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    margin: 6px;
+    padding: 0;
+    border: none;
+    border-radius: 8px;
+    background-color: ${unsafeCSSVarV2('button/primary')};
+    color: ${unsafeCSSVarV2('button/pureWhiteText')};
+    font-size: 20px;
+    cursor: pointer;
+  }
+
+  .new-record-phone::after {
+    content: '';
+    position: absolute;
+    inset: -6px;
+  }
+
+  .new-record-phone svg {
+    color: inherit;
+  }
+
   .new-record svg {
     font-size: 20px;
     color: ${unsafeCSSVarV2('icon/primary')};
@@ -45,45 +118,55 @@ const styles = css `
     }
   }
 `;
-export class DataViewHeaderToolsAddRow extends WidgetBase {
-    constructor() {
-        super(...arguments);
-        this.onAddNewRecord = () => {
-            if (this.readonly$.value)
-                return;
-            this.dataViewLogic.addRow?.('start');
-        };
-        this.onOpenMenu = (event) => {
-            event.stopPropagation();
-            if (this.readonly$.value)
-                return;
-            this.view
-                .serviceGet(NewRowMenuOpenerKey)
-                ?.open(event.currentTarget, this.view.id);
-        };
-    }
-    static { this.styles = styles; }
-    get readonly$() {
-        return this.view.readonly$;
-    }
-    render() {
-        if (this.readonly$.value) {
-            return;
+let DataViewHeaderToolsAddRow = (() => {
+    let _classSuper = WidgetBase;
+    let _std_decorators;
+    let _std_initializers = [];
+    let _std_extraInitializers = [];
+    return class DataViewHeaderToolsAddRow extends _classSuper {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _std_decorators = [consume({ context: stdContext })];
+            __esDecorate(this, null, _std_decorators, { kind: "accessor", name: "std", static: false, private: false, access: { has: obj => "std" in obj, get: obj => obj.std, set: (obj, value) => { obj.std = value; } }, metadata: _metadata }, _std_initializers, _std_extraInitializers);
+            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static { this.styles = styles; }
+        #std_accessor_storage;
+        /** Absent outside an editor host: the wordings read English. */
+        get std() { return this.#std_accessor_storage; }
+        set std(value) { this.#std_accessor_storage = value; }
+        get readonly$() {
+            return this.view.readonly$;
         }
-        const button = html ` <data-view-component-button
-      class="affine-database-toolbar-item new-record"
-      .onClick="${this.onAddNewRecord}"
-      .icon="${PlusIcon()}"
-      .text="${IS_MOBILE
-            ? html `<span style="font-weight: 500">New</span>`
-            : html `<span style="font-weight: 500">New Record</span>`}"
-    >
-    </data-view-component-button>`;
-        const opener = this.view.serviceGet(NewRowMenuOpenerKey);
-        if (!opener || opener.canOpen?.(this.view.id) === false)
-            return button;
-        const label = opener.label();
-        return html `<div class="new-record-split">
+        render() {
+            if (this.readonly$.value) {
+                return;
+            }
+            const wording = wordingOf(this.std);
+            const button = IS_MOBILE
+                ? html `<button
+          class="new-record-phone"
+          data-testid="dv-tools-new-row"
+          aria-label="${wording(DATA_VIEW_NEW_PAGE)}"
+          title="${wording(DATA_VIEW_NEW_PAGE)}"
+          @click="${this.onAddNewRecord}"
+        >
+          ${PlusIcon()}
+        </button>`
+                : html ` <data-view-component-button
+          class="affine-database-toolbar-item new-record"
+          .onClick="${this.onAddNewRecord}"
+          .icon="${PlusIcon()}"
+          .text="${html `<span style="font-weight: 500"
+            >${wording(DATA_VIEW_NEW_RECORD)}</span
+          >`}"
+        >
+        </data-view-component-button>`;
+            const opener = this.view.serviceGet(NewRowMenuOpenerKey);
+            if (!opener || opener.canOpen?.(this.view.id) === false)
+                return button;
+            const label = opener.label();
+            return html `<div class="new-record-split">
       ${button}
       <data-view-component-button
         class="affine-database-toolbar-item new-record-more"
@@ -97,5 +180,25 @@ export class DataViewHeaderToolsAddRow extends WidgetBase {
       >
       </data-view-component-button>
     </div>`;
-    }
-}
+        }
+        constructor() {
+            super(...arguments);
+            this.onAddNewRecord = () => {
+                if (this.readonly$.value)
+                    return;
+                this.dataViewLogic.addRow?.('start');
+            };
+            this.onOpenMenu = (event) => {
+                event.stopPropagation();
+                if (this.readonly$.value)
+                    return;
+                this.view
+                    .serviceGet(NewRowMenuOpenerKey)
+                    ?.open(event.currentTarget, this.view.id);
+            };
+            this.#std_accessor_storage = __runInitializers(this, _std_initializers, void 0);
+            __runInitializers(this, _std_extraInitializers);
+        }
+    };
+})();
+export { DataViewHeaderToolsAddRow };

package/dist/_pkgs/data-view/widget-presets/tools/presets/view-options/view-options.js

@@ -33,6 +33,7 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
     return useValue ? value : void 0;
 };
 import { menu, popMenu, popupTargetFromElement, } from '../../../../../affine-components/context-menu/index.js';
+import { TOOLBAR_DELETE, TOOLBAR_DUPLICATE, } from '../../../../../affine-shared/services/index.js';
 import { unsafeCSSVarV2 } from '../../../../../affine-shared/theme/index.js';
 import { ArrowRightSmallIcon, DeleteIcon, DuplicateIcon, FilterIcon, GroupingIcon, InfoIcon, LayoutIcon, MoreHorizontalIcon, OpenInNewIcon, PaletteIcon, SortIcon, } from '@blocksuite/icons/lit';
 import { stdContext } from '../../../../../std/index.js';
@@ -48,8 +49,9 @@ import { englishWording, wordingOf, } from '../../../../core/utils/wording.js';
 import { WidgetBase } from '../../../../core/widget/widget-base.js';
 import { popFilterRoot } from '../../../quick-setting-bar/filter/root-panel-view.js';
 import { popSortRoot } from '../../../quick-setting-bar/sort/root-panel.js';
-import { DATA_VIEW_COLOR_RULES, DATA_VIEW_OPEN_IN, } from '../../../../translations.js';
+import { DATA_VIEW_COLOR_RULES, DATA_VIEW_FILTER, DATA_VIEW_FILTER_COUNT, DATA_VIEW_GROUP, DATA_VIEW_LAYOUT, DATA_VIEW_OPEN_IN, DATA_VIEW_PROPERTIES, DATA_VIEW_PROPERTIES_SHOWN, DATA_VIEW_SORT, DATA_VIEW_SORT_COUNT, DATA_VIEW_VIEW_SETTINGS, VIEWS_BAR_VIEW_NAME, } from '../../../../translations.js';
 import { viewColorRules } from '../../../../core/view/color-rules.js';
+import { viewPresetName } from '../../../../core/view/default-name.js';
 import { openInCurrent, openInOptions, openViewSetting, popViewSetting, viewSettingAvailable, } from './view-settings.js';
 const styles = css `
   .affine-database-toolbar-item.more-action {
@@ -72,6 +74,15 @@ const styles = css `
   .more-action.active {
     background: var(--affine-hover-color);
   }
+
+  /* A finger needs 44px: the host's touch-target floor (P7). */
+  @media (pointer: coarse) {
+    .affine-database-toolbar-item.more-action {
+      min-width: 44px;
+      min-height: 44px;
+      justify-content: center;
+    }
+  }
 `;
 let DataViewHeaderToolsViewOptions = (() => {
     let _classSuper = WidgetBase;
@@ -153,10 +164,12 @@ const createSettingMenus = (target, dataViewLogic, reopen, wording) => {
     const view = dataViewLogic.view;
     const settingItems = [];
     settingItems.push(menu.action({
-        name: 'Properties',
+        name: wording(DATA_VIEW_PROPERTIES),
         prefix: InfoIcon(),
         postfix: html ` <div style="font-size: 14px;">
-          ${view.properties$.value.length} shown
+          ${wording(DATA_VIEW_PROPERTIES_SHOWN, {
+            count: view.properties$.value.length,
+        })}
         </div>
         ${ArrowRightSmallIcon()}`,
         select: () => {
@@ -167,14 +180,12 @@ const createSettingMenus = (target, dataViewLogic, reopen, wording) => {
     if (filterTrait) {
         const filterCount = filterTrait.filter$.value.conditions.length;
         settingItems.push(menu.action({
-            name: 'Filter',
+            name: wording(DATA_VIEW_FILTER),
             prefix: FilterIcon(),
             postfix: html ` <div style="font-size: 14px;">
             ${filterCount === 0
                 ? ''
-                : filterCount === 1
-                    ? '1 filter'
-                    : `${filterCount} filters`}
+                : wording(DATA_VIEW_FILTER_COUNT, { count: filterCount })}
           </div>
           ${ArrowRightSmallIcon()}`,
             select: () => {
@@ -210,14 +221,12 @@ const createSettingMenus = (target, dataViewLogic, reopen, wording) => {
     if (sortTrait) {
         const sortCount = sortTrait.sortList$.value.length;
         settingItems.push(menu.action({
-            name: 'Sort',
+            name: wording(DATA_VIEW_SORT),
             prefix: SortIcon(),
             postfix: html ` <div style="font-size: 14px;">
             ${sortCount === 0
                 ? ''
-                : sortCount === 1
-                    ? '1 sort'
-                    : `${sortCount} sorts`}
+                : wording(DATA_VIEW_SORT_COUNT, { count: sortCount })}
           </div>
           ${ArrowRightSmallIcon()}`,
             select: () => {
@@ -233,7 +242,7 @@ const createSettingMenus = (target, dataViewLogic, reopen, wording) => {
                     popSortRoot(target, {
                         sortUtils: sortUtils,
                         title: {
-                            text: 'Sort',
+                            text: wording(DATA_VIEW_SORT),
                             onBack: reopen,
                         },
                     });
@@ -244,7 +253,7 @@ const createSettingMenus = (target, dataViewLogic, reopen, wording) => {
     const groupTrait = view.traitGet(groupTraitKey);
     if (groupTrait) {
         settingItems.push(menu.action({
-            name: 'Group',
+            name: wording(DATA_VIEW_GROUP),
             prefix: GroupingIcon(),
             postfix: html ` <div style="font-size: 14px;">
             ${groupTrait.property$.value?.name$.value ?? ''}
@@ -278,10 +287,11 @@ export const popViewOptions = (target, dataViewLogic, onClose, wording = english
     const reopen = () => {
         popViewOptions(target, dataViewLogic, undefined, wording);
     };
+    const currentLayout = view.manager.viewMetas.find(meta => meta.type === view.type);
     const items = [];
     items.push(menu.input({
         initialValue: view.name$.value,
-        placeholder: 'View name',
+        placeholder: wording(VIEWS_BAR_VIEW_NAME),
         onChange: text => {
             view.nameSet(text);
         },
@@ -289,11 +299,9 @@ export const popViewOptions = (target, dataViewLogic, onClose, wording = english
     items.push(menu.group({
         items: [
             menu.action({
-                name: 'Layout',
-                postfix: html ` <div
-              style="font-size: 14px;text-transform: capitalize;"
-            >
-              ${view.type}
+                name: wording(DATA_VIEW_LAYOUT),
+                postfix: html ` <div style="font-size: 14px;">
+              ${currentLayout ? viewPresetName(currentLayout, wording) : ''}
             </div>
             ${ArrowRightSmallIcon()}`,
                 select: () => {
@@ -309,14 +317,14 @@ export const popViewOptions = (target, dataViewLogic, onClose, wording = english
     items.push(menu.group({
         items: [
             menu.action({
-                name: 'Duplicate',
+                name: wording(TOOLBAR_DUPLICATE),
                 prefix: DuplicateIcon(),
                 select: () => {
                     view.duplicate();
                 },
             }),
             menu.action({
-                name: 'Delete',
+                name: wording(TOOLBAR_DELETE),
                 prefix: DeleteIcon(),
                 select: () => {
                     view.delete();
@@ -328,7 +336,7 @@ export const popViewOptions = (target, dataViewLogic, onClose, wording = english
     popMenu(target, {
         options: {
             title: {
-                text: 'View settings',
+                text: wording(DATA_VIEW_VIEW_SETTINGS),
             },
             items,
             onClose: onClose,

package/dist/_pkgs/data-view/widget-presets/tools/presets/view-options/view-settings.js

@@ -8,8 +8,9 @@ import { popGroupSetting, popSelectGroupByProperty, } from '../../../../core/gro
 import { groupTraitKey } from '../../../../core/group-by/trait.js';
 import { renderUniLit, } from '../../../../core/index.js';
 import { rowsArePages, viewOpenIn, viewOpenInSet, } from '../../../../core/view/open-in.js';
+import { viewPresetName } from '../../../../core/view/default-name.js';
 import { PropertiesPanelOpenerKey } from '../../../../core/view-manager/properties-panel-opener.js';
-import { DATA_VIEW_OPEN_IN, DATA_VIEW_OPEN_IN_CENTER, DATA_VIEW_OPEN_IN_FULL, DATA_VIEW_OPEN_IN_SIDE, } from '../../../../translations.js';
+import { DATA_VIEW_LAYOUT, DATA_VIEW_OPEN_IN, DATA_VIEW_OPEN_IN_CENTER, DATA_VIEW_OPEN_IN_FULL, DATA_VIEW_OPEN_IN_SIDE, } from '../../../../translations.js';
 import { popColorRules } from './color-rules-menu.js';
 /** The three places a row's page opens, in the stored order (ADR 0035 §8). */
 const OPEN_IN_CHOICES = [
@@ -66,11 +67,12 @@ export function openInOptions(dataViewLogic, reopen, wording) {
         })),
     };
 }
-function popLayout(target, dataViewLogic, reopen) {
+function popLayout(target, dataViewLogic, reopen, wording) {
     const view = dataViewLogic.view;
     const viewTypes = view.manager.viewMetas.map(meta => {
+        const name = viewPresetName(meta, wording);
         return menu => {
-            if (!menu.search(meta.model.defaultName)) {
+            if (!menu.search(name)) {
                 return;
             }
             const isSelected = meta.type === view.manager.currentView$.value?.type;
@@ -93,7 +95,7 @@ function popLayout(target, dataViewLogic, reopen) {
             style="color:var(--affine-text-emphasis-color);width:100%;display: flex;flex-direction: column;align-items: center;justify-content: center;padding: 6px 16px;white-space: nowrap"
           >
             <div style="${iconStyle}">${renderUniLit(meta.renderer.icon)}</div>
-            <div style="${textStyle}">${meta.model.defaultName}</div>
+            <div style="${textStyle}">${name}</div>
           </div>
         `,
                 select: () => {
@@ -126,7 +128,7 @@ function popLayout(target, dataViewLogic, reopen) {
         options: {
             title: {
                 onBack: reopen,
-                text: 'Layout',
+                text: wording(DATA_VIEW_LAYOUT),
             },
             items: [
                 menu => {
@@ -158,7 +160,7 @@ export function openViewSetting(target, dataViewLogic, key, reopen, wording) {
     const view = dataViewLogic.view;
     switch (key) {
         case 'layout':
-            popLayout(target, dataViewLogic, reopen);
+            popLayout(target, dataViewLogic, reopen, wording);
             return;
         case 'properties': {
             const openPanel = view.serviceGet(PropertiesPanelOpenerKey);