@formicoidea/labre-core 0.54.0 → 0.56.0

package/dist/_pkgs/data-view/view-presets/table/mobile/row.js

@@ -33,24 +33,42 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
     return useValue ? value : void 0;
 };
 import { popupTargetFromElement } from '../../../../affine-components/context-menu/index.js';
-import { unsafeCSSVarV2 } from '../../../../affine-shared/theme/index.js';
+import { OPEN_LABEL } from '../../../../affine-components/translations.js';
 import { SignalWatcher, WithDisposable } from '../../../../global/lit/index.js';
-import { CenterPeekIcon, MoreHorizontalIcon } from '@blocksuite/icons/lit';
-import { ShadowlessElement } from '../../../../std/index.js';
+import { ShadowlessElement, stdContext } from '../../../../std/index.js';
+import { consume } from '@lit/context';
 import { cssVarV2 } from '@toeverything/theme/v2';
 import { css, nothing, unsafeCSS } from 'lit';
 import { property } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { html } from 'lit/static-html.js';
+import { wordingOf } from '../../../core/utils/wording.js';
 import { paintRowColor, ROW_COLOR_PROPERTY, viewRowColor, } from '../../../core/view/color-rules.js';
 import { cellDivider } from '../styles.js';
 import { popMobileRowMenu } from './menu.js';
 import { mobileStickyTitle } from './table-view-style.js';
-/** Two 24px ops, the 20px gap between them and their 8px inset. */
-const ROW_OPS_WIDTH = 24 * 2 + 20 + 8;
+/** The "Open" chip's widest drawing, its 8px inset and 4px of air. */
+export const ROW_OPEN_WIDTH = 60 + 8 + 4;
+/** How long a finger rests on a row before its menu opens. */
+export const ROW_LONG_PRESS_MS = 500;
+/** A finger that travels further is scrolling, not pressing. */
+const LONG_PRESS_SLOP = 8;
+/**
+ * A row of the phone table (P7, "Bases éditables sur mobile", after Notion's
+ * phone table). A tap on a cell edits it; the title column carries an "Open"
+ * chip that opens the row through the root's detail panel, the path of the
+ * desktop row's open button; a long press opens the row menu (open, delete).
+ *
+ * Up to 0.54 the title cell carried two floating ops (open and "...") drawn
+ * over the end of the title. The chip reserves its room instead, and the
+ * "..." moved to the long press so deleting a row stays possible on a phone.
+ */
 let MobileTableRow = (() => {
     let _classSuper = SignalWatcher(WithDisposable(ShadowlessElement));
+    let _std_decorators;
+    let _std_initializers = [];
+    let _std_extraInitializers = [];
     let _tableViewLogic_decorators;
     let _tableViewLogic_initializers = [];
     let _tableViewLogic_extraInitializers = [];
@@ -63,16 +81,18 @@ let MobileTableRow = (() => {
     return class MobileTableRow extends _classSuper {
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _std_decorators = [consume({ context: stdContext })];
             _tableViewLogic_decorators = [property({ attribute: false })];
             _rowId_decorators = [property({ attribute: false })];
             _rowIndex_decorators = [property({ attribute: false })];
+            __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, _tableViewLogic_decorators, { kind: "accessor", name: "tableViewLogic", static: false, private: false, access: { has: obj => "tableViewLogic" in obj, get: obj => obj.tableViewLogic, set: (obj, value) => { obj.tableViewLogic = value; } }, metadata: _metadata }, _tableViewLogic_initializers, _tableViewLogic_extraInitializers);
             __esDecorate(this, null, _rowId_decorators, { kind: "accessor", name: "rowId", static: false, private: false, access: { has: obj => "rowId" in obj, get: obj => obj.rowId, set: (obj, value) => { obj.rowId = value; } }, metadata: _metadata }, _rowId_initializers, _rowId_extraInitializers);
             __esDecorate(this, null, _rowIndex_decorators, { kind: "accessor", name: "rowIndex", static: false, private: false, access: { has: obj => "rowIndex" in obj, get: obj => obj.rowIndex, set: (obj, value) => { obj.rowIndex = value; } }, metadata: _metadata }, _rowIndex_initializers, _rowIndex_extraInitializers);
             if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
-        // Touch targets are 44px tall (B5, ADR 0035 §1): the row, and each row op
-        // through an invisible hit area, so the ops keep their drawn size.
+        // Touch targets are 44px tall (B5, ADR 0035 §1): the row, and the chip
+        // through an invisible hit area, so it keeps its drawn size.
         static { this.styles = css `
     .mobile-table-row {
       width: 100%;
@@ -82,69 +102,105 @@ let MobileTableRow = (() => {
       position: relative;
       min-height: 44px;
       background-color: var(${unsafeCSS(ROW_COLOR_PROPERTY)}, transparent);
+      -webkit-touch-callout: none;
     }
 
-    .mobile-row-ops {
-      position: relative;
-      width: 0;
-      margin-top: 5px;
-      height: max-content;
-      display: flex;
-      gap: 20px;
-      cursor: pointer;
-      justify-content: end;
-      right: 8px;
-    }
-
-    .affine-database-block-row:has([data-editing='true']) .mobile-row-ops {
-      visibility: hidden;
-      opacity: 0;
+    /* A long press opens the row menu, not a text selection; an edited cell
+       keeps its own. */
+    .mobile-table-row mobile-table-cell:not([data-editing='true']) {
+      -webkit-user-select: none;
+      user-select: none;
     }
 
-    .mobile-row-op {
+    .mobile-row-open {
+      position: absolute;
+      top: 10px;
+      right: 8px;
       display: flex;
-      padding: 4px;
+      align-items: center;
+      height: 24px;
+      max-width: 60px;
+      padding: 0 6px;
+      box-sizing: border-box;
+      border: 1px solid ${unsafeCSS(cssVarV2.layer.insideBorder.border)};
       border-radius: 4px;
-      box-shadow: 0px 0px 4px 0px rgba(66, 65, 73, 0.14);
       background-color: var(--affine-background-primary-color);
-      position: relative;
-      font-size: 16px;
-      color: ${unsafeCSSVarV2('icon/primary')};
+      color: ${unsafeCSS(cssVarV2.text.secondary)};
+      font-size: 12px;
+      font-weight: 500;
+      line-height: 20px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      cursor: pointer;
     }
 
-    .mobile-row-op::after {
+    .mobile-row-open::after {
       content: '';
       position: absolute;
-      inset: -10px;
+      inset: -10px -4px;
+    }
+
+    .mobile-row-title:has(mobile-table-cell[data-editing='true'])
+      .mobile-row-open {
+      display: none;
     }
   `; }
+        #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 groupKey() {
             return this.closest('affine-data-view-table-group')?.group?.key;
         }
         connectedCallback() {
             super.connectedCallback();
             this.classList.add('mobile-table-row');
+            this.disposables.add(this.cancelPress);
+            this.disposables.addFromEvent(this, 'pointerdown', (e) => {
+                this.pressFired = false;
+                this.cancelPress();
+                if (this.view.readonly$.value)
+                    return;
+                this.pressOrigin = { x: e.clientX, y: e.clientY };
+                this.pressTimer = setTimeout(() => {
+                    this.cancelPress();
+                    this.pressFired = true;
+                    popMobileRowMenu(popupTargetFromElement(this), this.rowId, this.tableViewLogic, this.view, wordingOf(this.std));
+                }, ROW_LONG_PRESS_MS);
+            });
+            this.disposables.addFromEvent(this, 'pointermove', (e) => {
+                const origin = this.pressOrigin;
+                if (!origin)
+                    return;
+                const moved = Math.hypot(e.clientX - origin.x, e.clientY - origin.y);
+                if (moved > LONG_PRESS_SLOP)
+                    this.cancelPress();
+            });
+            this.disposables.addFromEvent(this, 'pointerup', this.cancelPress);
+            this.disposables.addFromEvent(this, 'pointercancel', this.cancelPress);
+            // Android opens its own menu on a long press; the row's is the one.
+            this.disposables.addFromEvent(this, 'contextmenu', (e) => {
+                e.preventDefault();
+            });
+            this.disposables.addFromEvent(this, 'click', (e) => {
+                if (!this.pressFired)
+                    return;
+                this.pressFired = false;
+                e.stopPropagation();
+                e.preventDefault();
+            }, { capture: true });
         }
         render() {
             const view = this.view;
             paintRowColor(this, viewRowColor(view, this.rowId));
+            const openLabel = wordingOf(this.std)(OPEN_LABEL);
             return html `
       ${repeat(view.properties$.value, v => v.id, (column, i) => {
-                const clickDetail = () => {
-                    this.tableViewLogic.root.openDetailPanel({
-                        view: this.view,
-                        rowId: this.rowId,
-                    });
-                };
-                const openMenu = (e) => {
-                    const ele = e.currentTarget;
-                    popMobileRowMenu(popupTargetFromElement(ele), this.rowId, this.tableViewLogic, this.view);
-                };
                 const isTitle = column.view.mainProperties$.value.titleColumn === column.id;
-                const hasOps = isTitle && !column.readonly$.value;
                 return html `
             <div
-              class="${isTitle ? mobileStickyTitle : ''}"
+              class="${isTitle ? `${mobileStickyTitle} mobile-row-title` : ''}"
               style="display: flex;"
             >
               <mobile-table-cell
@@ -152,8 +208,8 @@ let MobileTableRow = (() => {
                 style=${styleMap({
                     width: `${column.width$.value}px`,
                     border: i === 0 ? 'none' : undefined,
-                    // Room for the two row ops drawn over its right end.
-                    paddingRight: hasOps ? `${ROW_OPS_WIDTH}px` : undefined,
+                    // Room for the "Open" chip drawn over its right end.
+                    paddingRight: isTitle ? `${ROW_OPEN_WIDTH}px` : undefined,
                 })}
                 .tableViewLogic="${this.tableViewLogic}"
                 .column="${column}"
@@ -168,16 +224,15 @@ let MobileTableRow = (() => {
               >
               </mobile-table-cell>
               <div class="${cellDivider}"></div>
-              ${hasOps
-                    ? html ` <div class="mobile-row-ops">
-                    <div class="mobile-row-op" @click="${clickDetail}">
-                      ${CenterPeekIcon()}
-                    </div>
-                    ${!view.readonly$.value
-                        ? html ` <div class="mobile-row-op" @click="${openMenu}">
-                          ${MoreHorizontalIcon()}
-                        </div>`
-                        : nothing}
+              ${isTitle
+                    ? html `<div
+                    class="mobile-row-open"
+                    data-testid="dv-row-open"
+                    role="button"
+                    aria-label="${openLabel}"
+                    @click="${this.openRow}"
+                  >
+                    ${openLabel}
                   </div>`
                     : nothing}
             </div>
@@ -186,13 +241,13 @@ let MobileTableRow = (() => {
       <div class="database-cell add-column-button"></div>
     `;
         }
-        #tableViewLogic_accessor_storage = __runInitializers(this, _tableViewLogic_initializers, void 0);
+        #tableViewLogic_accessor_storage;
         get tableViewLogic() { return this.#tableViewLogic_accessor_storage; }
         set tableViewLogic(value) { this.#tableViewLogic_accessor_storage = value; }
-        #rowId_accessor_storage = (__runInitializers(this, _tableViewLogic_extraInitializers), __runInitializers(this, _rowId_initializers, void 0));
+        #rowId_accessor_storage;
         get rowId() { return this.#rowId_accessor_storage; }
         set rowId(value) { this.#rowId_accessor_storage = value; }
-        #rowIndex_accessor_storage = (__runInitializers(this, _rowId_extraInitializers), __runInitializers(this, _rowIndex_initializers, void 0));
+        #rowIndex_accessor_storage;
         get rowIndex() { return this.#rowIndex_accessor_storage; }
         set rowIndex(value) { this.#rowIndex_accessor_storage = value; }
         get view() {
@@ -200,6 +255,25 @@ let MobileTableRow = (() => {
         }
         constructor() {
             super(...arguments);
+            this.#std_accessor_storage = __runInitializers(this, _std_initializers, void 0);
+            this.pressTimer = __runInitializers(this, _std_extraInitializers);
+            /** A long press fired: the click the finger's release makes is eaten. */
+            this.pressFired = false;
+            this.cancelPress = () => {
+                clearTimeout(this.pressTimer);
+                this.pressTimer = undefined;
+                this.pressOrigin = undefined;
+            };
+            this.openRow = (e) => {
+                e.stopPropagation();
+                this.tableViewLogic.root.openDetailPanel({
+                    view: this.view,
+                    rowId: this.rowId,
+                });
+            };
+            this.#tableViewLogic_accessor_storage = __runInitializers(this, _tableViewLogic_initializers, void 0);
+            this.#rowId_accessor_storage = (__runInitializers(this, _tableViewLogic_extraInitializers), __runInitializers(this, _rowId_initializers, void 0));
+            this.#rowIndex_accessor_storage = (__runInitializers(this, _rowId_extraInitializers), __runInitializers(this, _rowIndex_initializers, void 0));
             __runInitializers(this, _rowIndex_extraInitializers);
         }
     };

package/dist/_pkgs/data-view/view-presets/table/mobile/table-view-ui-logic.d.ts

@@ -8,7 +8,11 @@ export declare class MobileTableViewUILogic extends DataViewUILogicBase<TableSin
     ui$: import("@preact/signals-core").Signal<MobileTableViewUI | undefined>;
     private get readonly();
     clearSelection: () => void;
-    addRow: (position: InsertToPosition) => string | undefined;
+    /**
+     * A new row opens at once, as on the desktop table and the flat views: on a
+     * phone its title and properties are typed in the row page.
+     */
+    addRow: (position: InsertToPosition, groupKey?: string) => string | undefined;
     focusFirstCell: () => void;
     showIndicator: (_evt: MouseEvent) => boolean;
     hideIndicator: () => void;

package/dist/_pkgs/data-view/view-presets/table/mobile/table-view-ui-logic.js

@@ -13,10 +13,17 @@ export class MobileTableViewUILogic extends DataViewUILogicBase {
         super(...arguments);
         this.ui$ = signal(undefined);
         this.clearSelection = () => { };
-        this.addRow = (position) => {
+        /**
+         * A new row opens at once, as on the desktop table and the flat views: on a
+         * phone its title and properties are typed in the row page.
+         */
+        this.addRow = (position, groupKey) => {
             if (this.readonly)
                 return;
-            return this.view.rowAdd(position);
+            const rowId = this.view.rowAdd(position, groupKey);
+            if (rowId)
+                this.root.openDetailPanel({ view: this.view, rowId });
+            return rowId;
         };
         this.focusFirstCell = () => { };
         this.showIndicator = (_evt) => {

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

@@ -259,7 +259,11 @@ let TableRowView = (() => {
             ${!column.readonly$.value &&
                     column.view.mainProperties$.value.titleColumn === column.id
                     ? html `<div class="row-ops show-on-hover-row">
-                  <div class="row-op" @click="${clickDetail}">
+                  <div
+                    class="row-op"
+                    data-testid="dv-row-open"
+                    @click="${clickDetail}"
+                  >
                     ${CenterPeekIcon()}
                   </div>
                   ${!view.readonly$.value

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

@@ -1,4 +1,3 @@
-import { IS_MOBILE } from '../../../../global/env/index.js';
 import { html } from 'lit';
 import { filterTraitKey } from '../../../core/filter/trait.js';
 export const renderFilterBar = (props) => {
@@ -6,7 +5,7 @@ export const renderFilterBar = (props) => {
     if (!filterTrait) {
         return;
     }
-    if (!IS_MOBILE && !filterTrait.hasFilter$.value) {
+    if (!filterTrait.hasFilter$.value) {
         return;
     }
     return html ` <filter-bar

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

@@ -1,5 +1,4 @@
 import { unsafeCSSVarV2 } from '../../../affine-shared/theme/index.js';
-import { IS_MOBILE } from '../../../global/env/index.js';
 import { html, nothing } from 'lit';
 import { defineUniComponent, } from '../../core/index.js';
 import { createDefaultShowQuickSettingBar, ShowQuickSettingBarKey, } from './context.js';
@@ -8,13 +7,14 @@ import { renderSortBar } from './sort/index.js';
 export const widgetQuickSettingBar = defineUniComponent((props) => {
     const view = props.dataViewLogic.view;
     const barList = [renderSortBar(props), renderFilterBar(props)].filter(Boolean);
-    if (!IS_MOBILE) {
-        if (!view.serviceGetOrCreate(ShowQuickSettingBarKey, createDefaultShowQuickSettingBar).value[view.id]) {
-            return html ``;
-        }
-        if (!barList.length) {
-            return html ``;
-        }
+    // The same rule on a phone since its toolbar has the filter and sort
+    // buttons (P7): up to 0.54 the bar stood there on every phone, empty but
+    // for "+ Add filter", as the only way to filter.
+    if (!view.serviceGetOrCreate(ShowQuickSettingBarKey, createDefaultShowQuickSettingBar).value[view.id]) {
+        return html ``;
+    }
+    if (!barList.length) {
+        return html ``;
     }
     return html ` <div
       style="display: flex;margin-top: 8px;align-items: center;width: 100%;gap:8px"

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

@@ -1,3 +1,4 @@
+import { type BlockStdScope } from '../../../../../std/index.js';
 import { nothing } from 'lit';
 import { WidgetBase } from '../../../../core/widget/widget-base.js';
 export declare class DataViewHeaderToolsFilter extends WidgetBase {
@@ -8,6 +9,8 @@ export declare class DataViewHeaderToolsFilter extends WidgetBase {
     get filterTrait(): import("../../../../core/filter/trait.js").FilterTrait | undefined;
     private get readonly();
     private clickFilter;
+    /** Absent outside an editor host: the wordings read English. */
+    accessor std: BlockStdScope;
     connectedCallback(): void;
     render(): import("lit-html").TemplateResult<1> | typeof nothing;
     toggleShowFilter(show?: boolean): void;

package/dist/_pkgs/data-view/widget-presets/tools/presets/filter/filter.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 { FilterIcon } 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 { popCreateFilter } from '../../../../core/filter/add-filter.js';
 import { filterTraitKey } from '../../../../core/filter/trait.js';
 import { emptyFilterGroup } from '../../../../core/filter/utils.js';
+import { wordingOf } from '../../../../core/utils/wording.js';
 import { WidgetBase } from '../../../../core/widget/widget-base.js';
+import { DATA_VIEW_FILTER } from '../../../../translations.js';
 import { createDefaultShowQuickSettingBar, ShowQuickSettingBarKey, } from '../../../quick-setting-bar/context.js';
 const styles = css `
   .affine-database-filter-button {
@@ -27,72 +64,100 @@ const styles = css `
     background-color: var(--affine-hover-color);
   }
 
-  .affine-database-filter-button {
+  /* Shown on a phone too, its menus as sheets: 44px for a finger (P7). */
+  @media (pointer: coarse) {
+    .affine-database-filter-button {
+      min-width: 44px;
+      min-height: 44px;
+      justify-content: center;
+    }
   }
 `;
-export class DataViewHeaderToolsFilter extends WidgetBase {
-    constructor() {
-        super(...arguments);
-        this.hasFilter = computed(() => {
-            return this.filterTrait?.hasFilter$.value ?? false;
-        });
-    }
-    static { this.styles = styles; }
-    get _filter() {
-        return this.filterTrait?.filter$.value ?? emptyFilterGroup;
-    }
-    set _filter(filter) {
-        this.filterTrait?.filterSet(filter);
-    }
-    get filterTrait() {
-        return this.view.traitGet(filterTraitKey);
-    }
-    get readonly() {
-        return this.view.readonly$.value;
-    }
-    clickFilter(event) {
-        if (this.hasFilter.value) {
-            this.toggleShowFilter();
+let DataViewHeaderToolsFilter = (() => {
+    let _classSuper = WidgetBase;
+    let _std_decorators;
+    let _std_initializers = [];
+    let _std_extraInitializers = [];
+    return class DataViewHeaderToolsFilter 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 _filter() {
+            return this.filterTrait?.filter$.value ?? emptyFilterGroup;
+        }
+        set _filter(filter) {
+            this.filterTrait?.filterSet(filter);
+        }
+        get filterTrait() {
+            return this.view.traitGet(filterTraitKey);
+        }
+        get readonly() {
+            return this.view.readonly$.value;
+        }
+        clickFilter(event) {
+            if (this.hasFilter.value) {
+                this.toggleShowFilter();
+                return;
+            }
+            popCreateFilter(popupTargetFromElement(event.currentTarget), {
+                vars: this.view.vars$,
+                onSelect: filter => {
+                    this._filter = {
+                        ...this._filter,
+                        conditions: [filter],
+                    };
+                    this.toggleShowFilter(true);
+                    this.dataViewLogic.eventTrace('CreateDatabaseFilter', {});
+                },
+            });
             return;
         }
-        popCreateFilter(popupTargetFromElement(event.currentTarget), {
-            vars: this.view.vars$,
-            onSelect: filter => {
-                this._filter = {
-                    ...this._filter,
-                    conditions: [filter],
-                };
-                this.toggleShowFilter(true);
-                this.dataViewLogic.eventTrace('CreateDatabaseFilter', {});
-            },
-        });
-        return;
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this.style.display = IS_MOBILE ? 'none' : 'flex';
-    }
-    render() {
-        if (this.readonly)
-            return nothing;
-        const style = styleMap({
-            color: this.hasFilter.value
-                ? cssVarV2('text/emphasis')
-                : cssVarV2('icon/primary'),
-        });
-        return html ` <div
+        #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';
+        }
+        render() {
+            if (this.readonly)
+                return nothing;
+            const style = styleMap({
+                color: this.hasFilter.value
+                    ? cssVarV2('text/emphasis')
+                    : cssVarV2('icon/primary'),
+            });
+            return html ` <div
       @click="${this.clickFilter}"
       style="${style}"
       class="affine-database-filter-button"
+      data-testid="dv-tools-filter"
+      role="button"
+      aria-label="${wordingOf(this.std)(DATA_VIEW_FILTER)}"
     >
       ${FilterIcon()}
     </div>`;
-    }
-    toggleShowFilter(show) {
-        const map = this.view.serviceGetOrCreate(ShowQuickSettingBarKey, createDefaultShowQuickSettingBar);
-        map.value = {
-            ...map.value,
-            [this.view.id]: show ?? !map.value[this.view.id],
-        };
-    }
-}
+        }
+        toggleShowFilter(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.hasFilter = computed(() => {
+                return this.filterTrait?.hasFilter$.value ?? false;
+            });
+            this.#std_accessor_storage = __runInitializers(this, _std_initializers, void 0);
+            __runInitializers(this, _std_extraInitializers);
+        }
+    };
+})();
+export { DataViewHeaderToolsFilter };

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

@@ -1,3 +1,4 @@
+import { type BlockStdScope } from '../../../../../std/index.js';
 import { nothing } from 'lit';
 import { WidgetBase } from '../../../../core/widget/widget-base.js';
 export declare class DataViewHeaderToolsSort extends WidgetBase {
@@ -6,6 +7,8 @@ export declare class DataViewHeaderToolsSort extends WidgetBase {
     hasSort: import("@preact/signals-core").ReadonlySignal<boolean>;
     private get readonly();
     private clickSort;
+    /** Absent outside an editor host: the wordings read English. */
+    accessor std: BlockStdScope;
     connectedCallback(): void;
     render(): import("lit-html").TemplateResult<1> | typeof nothing;
     toggleShowQuickSettingBar(show?: boolean): void;