@formicoidea/labre-core 0.53.0 → 0.54.0

package/dist/_pkgs/data-view/view-presets/table/pc/group.js

@@ -48,7 +48,7 @@ import { createDndContext } from '../../../core/utils/wc-dnd/dnd-context.js';
 import { defaultActivators } from '../../../core/utils/wc-dnd/sensors/index.js';
 import { linearMove } from '../../../core/utils/wc-dnd/utils/linear-move.js';
 import { wordingOf } from '../../../core/utils/wording.js';
-import { DATA_VIEW_GROUP_COLLAPSE, DATA_VIEW_GROUP_EXPAND, } from '../../../translations.js';
+import { DATA_VIEW_GROUP_COLLAPSE, DATA_VIEW_GROUP_EXPAND, DATA_VIEW_NEW_RECORD, } from '../../../translations.js';
 import { getCollapsedState, setCollapsedState } from '../collapsed-state.js';
 import { LEFT_TOOL_BAR_WIDTH } from '../consts.js';
 import { TableViewAreaSelection } from '../selection.js';
@@ -193,7 +193,9 @@ let TableGroup = (() => {
               data-test-id="affine-database-add-row-button"
               role="button"
             >
-              ${PlusIcon()}<span style="font-size: 12px">New Record</span>
+              ${PlusIcon()}<span style="font-size: 12px"
+                >${wordingOf(this.std)(DATA_VIEW_NEW_RECORD)}</span
+              >
             </div>
           </div>`}
       <affine-database-column-stats

package/dist/_pkgs/data-view/widget-presets/quick-setting-bar/filter/list-view.d.ts

@@ -1,4 +1,4 @@
-import { ShadowlessElement } from '../../../../std/index.js';
+import { type BlockStdScope, ShadowlessElement } from '../../../../std/index.js';
 import { type ReadonlySignal } from '@preact/signals-core';
 import type { Variable } from '../../../core/expression/types.js';
 import type { Filter, FilterGroup } from '../../../core/filter/types.js';
@@ -22,6 +22,8 @@ export declare class FilterBar extends FilterBar_base {
     accessor onChange: (filter: FilterGroup) => void;
     accessor vars: ReadonlySignal<Variable[]>;
     accessor dataViewLogic: DataViewUILogicBase;
+    /** Absent outside an editor host: the wordings read English. */
+    accessor std: BlockStdScope;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/_pkgs/data-view/widget-presets/quick-setting-bar/filter/list-view.js

@@ -35,11 +35,14 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
 import { popupTargetFromElement, } from '../../../../affine-components/context-menu/index.js';
 import { SignalWatcher } from '../../../../global/lit/index.js';
 import { ArrowDownSmallIcon, FilterIcon, PlusIcon, } from '@blocksuite/icons/lit';
-import { ShadowlessElement } from '../../../../std/index.js';
+import { ShadowlessElement, stdContext } from '../../../../std/index.js';
+import { consume } from '@lit/context';
 import { computed } from '@preact/signals-core';
 import { css, html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { popCreateFilter } from '../../../core/index.js';
+import { wordingOf } from '../../../core/utils/wording.js';
+import { DATA_VIEW_ADD_FILTER } from '../../../translations.js';
 import { popFilterGroup } from './group-panel-view.js';
 let FilterBar = (() => {
     let _classSuper = SignalWatcher(ShadowlessElement);
@@ -55,6 +58,9 @@ let FilterBar = (() => {
     let _dataViewLogic_decorators;
     let _dataViewLogic_initializers = [];
     let _dataViewLogic_extraInitializers = [];
+    let _std_decorators;
+    let _std_initializers = [];
+    let _std_extraInitializers = [];
     return class FilterBar extends _classSuper {
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
@@ -62,10 +68,12 @@ let FilterBar = (() => {
             _onChange_decorators = [property({ attribute: false })];
             _vars_decorators = [property({ attribute: false })];
             _dataViewLogic_decorators = [property({ attribute: false })];
+            _std_decorators = [consume({ context: stdContext })];
             __esDecorate(this, null, _filterGroup_decorators, { kind: "accessor", name: "filterGroup", static: false, private: false, access: { has: obj => "filterGroup" in obj, get: obj => obj.filterGroup, set: (obj, value) => { obj.filterGroup = value; } }, metadata: _metadata }, _filterGroup_initializers, _filterGroup_extraInitializers);
             __esDecorate(this, null, _onChange_decorators, { kind: "accessor", name: "onChange", static: false, private: false, access: { has: obj => "onChange" in obj, get: obj => obj.onChange, set: (obj, value) => { obj.onChange = value; } }, metadata: _metadata }, _onChange_initializers, _onChange_extraInitializers);
             __esDecorate(this, null, _vars_decorators, { kind: "accessor", name: "vars", static: false, private: false, access: { has: obj => "vars" in obj, get: obj => obj.vars, set: (obj, value) => { obj.vars = value; } }, metadata: _metadata }, _vars_initializers, _vars_extraInitializers);
             __esDecorate(this, null, _dataViewLogic_decorators, { kind: "accessor", name: "dataViewLogic", static: false, private: false, access: { has: obj => "dataViewLogic" in obj, get: obj => obj.dataViewLogic, set: (obj, value) => { obj.dataViewLogic = value; } }, metadata: _metadata }, _dataViewLogic_initializers, _dataViewLogic_extraInitializers);
+            __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 = css `
@@ -102,6 +110,13 @@ let FilterBar = (() => {
       line-height: 22px;
     }
 
+    /* A finger needs 44px: the host's touch-target floor (P7). */
+    @media (pointer: coarse) {
+      .filter-bar-add-filter {
+        min-height: 44px;
+      }
+    }
+
     filter-bar::-webkit-scrollbar {
       -webkit-appearance: none;
       display: block;
@@ -178,6 +193,10 @@ let FilterBar = (() => {
         #dataViewLogic_accessor_storage;
         get dataViewLogic() { return this.#dataViewLogic_accessor_storage; }
         set dataViewLogic(value) { this.#dataViewLogic_accessor_storage = value; }
+        #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; }
         constructor() {
             super(...arguments);
             this._setFilter = (index, filter) => {
@@ -232,7 +251,7 @@ let FilterBar = (() => {
       class="filter-bar-add-filter dv-icon-16 dv-round-4 dv-hover"
       @click="${this.addFilter}"
     >
-      ${PlusIcon()} Add filter
+      ${PlusIcon()} ${wordingOf(this.std)(DATA_VIEW_ADD_FILTER)}
     </div>`;
             };
             this.setConditions = (conditions) => {
@@ -244,7 +263,8 @@ let FilterBar = (() => {
             this.#onChange_accessor_storage = __runInitializers(this, _onChange_initializers, void 0);
             this.#vars_accessor_storage = (__runInitializers(this, _onChange_extraInitializers), __runInitializers(this, _vars_initializers, void 0));
             this.#dataViewLogic_accessor_storage = (__runInitializers(this, _vars_extraInitializers), __runInitializers(this, _dataViewLogic_initializers, void 0));
-            __runInitializers(this, _dataViewLogic_extraInitializers);
+            this.#std_accessor_storage = (__runInitializers(this, _dataViewLogic_extraInitializers), __runInitializers(this, _std_initializers, void 0));
+            __runInitializers(this, _std_extraInitializers);
         }
     };
 })();

package/dist/_pkgs/data-view/widget-presets/tools/presets/search/search.d.ts

@@ -1,3 +1,4 @@
+import { type BlockStdScope } from '../../../../../std/index.js';
 import { WidgetBase } from '../../../../core/widget/widget-base.js';
 import type { KanbanViewUILogic } from '../../../../view-presets/kanban/pc/kanban-view-ui-logic.js';
 import type { VirtualTableViewUILogic } from '../../../../view-presets/table/pc-virtual/table-view-ui-logic.js';
@@ -9,6 +10,8 @@ export declare class DataViewHeaderToolsSearch extends WidgetBase<VirtualTableVi
     private readonly _onSearchBlur;
     private readonly _onSearchKeydown;
     preventBlur: boolean;
+    /** Absent outside an editor host: the wordings read English. */
+    accessor std: BlockStdScope;
     connectedCallback(): void;
     render(): import("lit-html").TemplateResult<1>;
     private accessor _searchInput;

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

@@ -33,15 +33,18 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
     return useValue ? value : void 0;
 };
 import { unsafeCSSVarV2 } from '../../../../../affine-shared/theme/index.js';
-import { IS_MOBILE } from '../../../../../global/env/index.js';
 import { CloseIcon, SearchIcon } from '@blocksuite/icons/lit';
+import { stdContext } from '../../../../../std/index.js';
+import { consume } from '@lit/context';
 import { baseTheme } from '@toeverything/theme';
 import { css, html, unsafeCSS } from 'lit';
 import { query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { stopPropagation } from '../../../../core/utils/event.js';
+import { wordingOf } from '../../../../core/utils/wording.js';
 import { WidgetBase } from '../../../../core/widget/widget-base.js';
+import { DATA_VIEW_SEARCH_CLEAR_HINT, DATA_VIEW_SEARCH_PLACEHOLDER, } from '../../../../translations.js';
 const styles = css `
   .affine-database-search-container {
     position: relative;
@@ -114,9 +117,29 @@ const styles = css `
     color: var(--affine-placeholder-color);
     font-size: var(--affine-font-sm);
   }
+
+  /* A finger needs 44px: the host's touch-target floor (P7). */
+  @media (pointer: coarse) {
+    .affine-database-search-container {
+      width: 44px;
+      height: 44px;
+    }
+    .search-container-expand {
+      width: 160px;
+    }
+    .affine-database-search-container .affine-database-search-input-icon {
+      left: 10px;
+    }
+    .affine-database-search-input {
+      padding-left: 40px;
+    }
+  }
 `;
 let DataViewHeaderToolsSearch = (() => {
     let _classSuper = WidgetBase;
+    let _std_decorators;
+    let _std_initializers = [];
+    let _std_extraInitializers = [];
     let __searchInput_decorators;
     let __searchInput_initializers = [];
     let __searchInput_extraInitializers = [];
@@ -126,16 +149,24 @@ let DataViewHeaderToolsSearch = (() => {
     return class DataViewHeaderToolsSearch extends _classSuper {
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _std_decorators = [consume({ context: stdContext })];
             __searchInput_decorators = [query('.affine-database-search-input')];
             _showSearch_decorators = [state()];
+            __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);
             __esDecorate(this, null, __searchInput_decorators, { kind: "accessor", name: "_searchInput", static: false, private: false, access: { has: obj => "_searchInput" in obj, get: obj => obj._searchInput, set: (obj, value) => { obj._searchInput = value; } }, metadata: _metadata }, __searchInput_initializers, __searchInput_extraInitializers);
             __esDecorate(this, null, _showSearch_decorators, { kind: "accessor", name: "showSearch", static: false, private: false, access: { has: obj => "showSearch" in obj, get: obj => obj.showSearch, set: (obj, value) => { obj.showSearch = value; } }, metadata: _metadata }, _showSearch_initializers, _showSearch_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; }
         connectedCallback() {
             super.connectedCallback();
-            this.style.display = IS_MOBILE ? 'none' : 'flex';
+            // Filter and sort reach a phone through the view menu; search has no
+            // other door, so it stays in the toolbar there too.
+            this.style.display = 'flex';
         }
         render() {
             const searchToolClassMap = classMap({
@@ -147,7 +178,7 @@ let DataViewHeaderToolsSearch = (() => {
       <label class="${searchToolClassMap}" @click="${this._clickSearch}">
         <div class="affine-database-search-input-icon">${SearchIcon()}</div>
         <input
-          placeholder="Search..."
+          placeholder="${wordingOf(this.std)(DATA_VIEW_SEARCH_PLACEHOLDER)}"
           class="affine-database-search-input"
           @input="${this._onSearch}"
           @click="${(event) => event.stopPropagation()}"
@@ -169,7 +200,7 @@ let DataViewHeaderToolsSearch = (() => {
             })}
               >Esc</span
             >
-            to clear all
+            ${wordingOf(this.std)(DATA_VIEW_SEARCH_CLEAR_HINT)}
           </affine-tooltip>
         </div>
       </label>
@@ -218,7 +249,8 @@ let DataViewHeaderToolsSearch = (() => {
                 }
             };
             this.preventBlur = false;
-            this.#_searchInput_accessor_storage = __runInitializers(this, __searchInput_initializers, void 0);
+            this.#std_accessor_storage = __runInitializers(this, _std_initializers, void 0);
+            this.#_searchInput_accessor_storage = (__runInitializers(this, _std_extraInitializers), __runInitializers(this, __searchInput_initializers, void 0));
             this.#showSearch_accessor_storage = (__runInitializers(this, __searchInput_extraInitializers), __runInitializers(this, _showSearch_initializers, false));
             __runInitializers(this, _showSearch_extraInitializers);
         }

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,59 @@
+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_RECORD, DATA_VIEW_NEW_RECORD_SHORT, } 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;
+    }
+  }
+
   .new-record svg {
     font-size: 20px;
     color: ${unsafeCSSVarV2('icon/primary')};
@@ -45,45 +90,44 @@ 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
+        render() {
+            if (this.readonly$.value) {
+                return;
+            }
+            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>`}"
+      .text="${html `<span style="font-weight: 500"
+        >${wordingOf(this.std)(IS_MOBILE ? DATA_VIEW_NEW_RECORD_SHORT : 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">
+            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 +141,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);

package/dist/_pkgs/data-view/widget-presets/views-bar/views-view.js

@@ -96,11 +96,26 @@ let DataViewHeaderViews = (() => {
       min-height: ${VIEWS_BAR_TOUCH_TARGET}px;
       min-width: ${VIEWS_BAR_TOUCH_TARGET}px;
     }
+    data-view-header-views component-overflow {
+      flex-wrap: nowrap;
+    }
+    /* The current view's tab is drawn even when it is wider than the room
+       (fitOverflow): it gives way, clipped, instead of wrapping "N more" and
+       "+" onto the filter bar below a bar of fixed height (P7, 390px). */
     data-view-header-views .component-overflow-item {
       padding-right: 4px;
+      min-width: ${VIEWS_BAR_TOUCH_TARGET}px;
+      overflow: hidden;
+    }
+    /* The tab keeps its own width inside a narrowed item: the overflow
+       measures scrollWidth, and a tab that shrank with its item would
+       report room that is not there. */
+    data-view-header-views .component-overflow-item > * {
+      width: max-content;
     }
     data-view-header-views .component-overflow-more {
       gap: 4px;
+      flex-shrink: 0;
     }
     data-view-header-views::-webkit-scrollbar-thumb {
       width: 1px;