@formicoidea/labre-core 0.53.0 → 0.54.0

package/dist/_pkgs/data-view/translations.js

@@ -218,11 +218,123 @@ export const DATA_VIEW_PROPERTY_TYPE = [
     'com.labre.data-view.property.type',
     'Property type',
 ];
+/* ── The table's chrome on every device (P7, mobile base views) ──────── */
+/** The toolbar button and a group's footer row that add a row. */
+export const DATA_VIEW_NEW_RECORD = [
+    'com.labre.data-view.new-record',
+    'New Record',
+];
+/** The same button on a phone, where the toolbar has no room for two words. */
+export const DATA_VIEW_NEW_RECORD_SHORT = [
+    'com.labre.data-view.new-record.short',
+    'New',
+];
+/**
+ * The title of the group holding the rows with no value. Display only: the
+ * stored group key stays `'Ungroups'` (`core/group-by/define.ts`).
+ */
+export const DATA_VIEW_UNGROUPED = [
+    'com.labre.data-view.group.ungrouped',
+    'Ungroups',
+];
+/** The filter bar's button, and the filter group panel's. */
+export const DATA_VIEW_ADD_FILTER = [
+    'com.labre.data-view.filter.add',
+    'Add filter',
+];
+export const DATA_VIEW_SEARCH_PLACEHOLDER = [
+    'com.labre.data-view.search.placeholder',
+    'Search...',
+];
+/** Read after an "Esc" key cap in the search box's clear tooltip. */
+export const DATA_VIEW_SEARCH_CLEAR_HINT = [
+    'com.labre.data-view.search.clear-hint',
+    'to clear all',
+];
+/* ── The view settings and a property's settings (P7, phone sheets) ──── */
+/** The title of the view's settings (its "..." button). */
+export const DATA_VIEW_VIEW_SETTINGS = [
+    'com.labre.data-view.view-settings',
+    'View settings',
+];
+/**
+ * The view settings' entries. "Layout" and "Group" are the full page's
+ * "This view" entries for the same settings (`VIEW_MENU_LAYOUT`,
+ * `VIEW_MENU_GROUP` in `@labre/core-database`): one chrome word, one key,
+ * declared here because core draws them too.
+ */
+export const DATA_VIEW_LAYOUT = [
+    'com.labre.database.view-menu.layout',
+    'Layout',
+];
+export const DATA_VIEW_GROUP = [
+    'com.labre.database.view-menu.group',
+    'Group',
+];
+/**
+ * The selection pane's "Filter" (`@labre/affine-widget-edgeless-toolbar`):
+ * one chrome word, one key, declared there, so not listed below.
+ */
+export const DATA_VIEW_FILTER = [
+    'com.labre.selection-pane.filter',
+    'Filter',
+];
+export const DATA_VIEW_SORT = [
+    'com.labre.data-view.sort',
+    'Sort',
+];
+/** Beside "Properties": how many the view shows (`count`). */
+export const DATA_VIEW_PROPERTIES_SHOWN = [
+    'com.labre.data-view.properties.shown',
+    '{{count}} shown',
+];
+/** Beside "Filter" and "Sort": how many the view has (`count`, 1 or more). */
+export const DATA_VIEW_FILTER_COUNT = [
+    'com.labre.data-view.filter.count',
+    '{{count}} filter(s)',
+];
+export const DATA_VIEW_SORT_COUNT = [
+    'com.labre.data-view.sort.count',
+    '{{count}} sort(s)',
+];
+/** The title of a property's menu on a phone (its column header). */
+export const DATA_VIEW_PROPERTY_SETTINGS = [
+    'com.labre.data-view.property.settings',
+    'Property settings',
+];
+/** A property's menu: the name field's placeholder. */
+export const DATA_VIEW_PROPERTY_NAME = [
+    'com.labre.data-view.property.name',
+    'Property name',
+];
+/** A property's menu: the entry opening the type picker. */
+export const DATA_VIEW_PROPERTY_TYPE_ENTRY = [
+    'com.labre.data-view.property.type-entry',
+    'Type',
+];
+/**
+ * The table header's menu: a new property beside this one. Its "Move left"
+ * and "Move right" are the views bar's (`VIEWS_BAR_MOVE_LEFT`, `…_RIGHT`).
+ */
+export const DATA_VIEW_INSERT_LEFT = [
+    'com.labre.data-view.property.insert-left',
+    'Insert left column',
+];
+export const DATA_VIEW_INSERT_RIGHT = [
+    'com.labre.data-view.property.insert-right',
+    'Insert right column',
+];
 /** Walked by `PACKAGE_WORDINGS` in `packages/affine/all/src/translations.ts`. */
 export const DATA_VIEW_WORDINGS = [
     VIEW_SHOWN_AS_TABLE,
     VIEW_DUPLICATE_AS_TABLE,
     DATA_VIEW_NEW_PAGE,
+    DATA_VIEW_NEW_RECORD,
+    DATA_VIEW_NEW_RECORD_SHORT,
+    DATA_VIEW_UNGROUPED,
+    DATA_VIEW_ADD_FILTER,
+    DATA_VIEW_SEARCH_PLACEHOLDER,
+    DATA_VIEW_SEARCH_CLEAR_HINT,
     VIEW_NAME_TABLE,
     VIEW_NAME_KANBAN,
     VIEW_NAME_CALENDAR,
@@ -258,4 +370,16 @@ export const DATA_VIEW_WORDINGS = [
     DATA_VIEW_NEW_PROPERTY,
     DATA_VIEW_PROPERTY_TYPE,
     DATA_VIEW_PROPERTY_HIDE_IN_VIEW,
+    DATA_VIEW_VIEW_SETTINGS,
+    DATA_VIEW_LAYOUT,
+    DATA_VIEW_GROUP,
+    DATA_VIEW_SORT,
+    DATA_VIEW_PROPERTIES_SHOWN,
+    DATA_VIEW_FILTER_COUNT,
+    DATA_VIEW_SORT_COUNT,
+    DATA_VIEW_PROPERTY_SETTINGS,
+    DATA_VIEW_PROPERTY_NAME,
+    DATA_VIEW_PROPERTY_TYPE_ENTRY,
+    DATA_VIEW_INSERT_LEFT,
+    DATA_VIEW_INSERT_RIGHT,
 ];

package/dist/_pkgs/data-view/view-presets/table/mobile/column-header.d.ts

@@ -1,4 +1,4 @@
-import { ShadowlessElement } from '../../../../std/index.js';
+import { type BlockStdScope, ShadowlessElement } from '../../../../std/index.js';
 import type { TableProperty, TableSingleView } from '../table-view-manager.js';
 declare const MobileTableColumnHeader_base: typeof ShadowlessElement & import("../../../../global/utils/types.js").Constructor<import("../../../../global/lit/with-disposable.js").DisposableClass>;
 export declare class MobileTableColumnHeader extends MobileTableColumnHeader_base {
@@ -7,6 +7,8 @@ export declare class MobileTableColumnHeader extends MobileTableColumnHeader_bas
     editTitle: () => void;
     private popMenu;
     render(): import("lit-html").TemplateResult;
+    /** Absent outside an editor host: the menu reads English. */
+    accessor std: BlockStdScope;
     accessor column: TableProperty;
     accessor tableViewManager: TableSingleView;
 }

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

@@ -35,17 +35,23 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
 import { menu, popMenu, popupTargetFromElement, } from '../../../../affine-components/context-menu/index.js';
 import { unsafeCSSVarV2 } from '../../../../affine-shared/theme/index.js';
 import { SignalWatcher, WithDisposable } from '../../../../global/lit/index.js';
-import { DeleteIcon, DuplicateIcon, InsertLeftIcon, InsertRightIcon, MoveLeftIcon, MoveRightIcon, ViewIcon, } from '@blocksuite/icons/lit';
-import { ShadowlessElement } from '../../../../std/index.js';
+import { InsertLeftIcon, InsertRightIcon, MoveLeftIcon, MoveRightIcon, } from '@blocksuite/icons/lit';
+import { ShadowlessElement, stdContext } from '../../../../std/index.js';
+import { consume } from '@lit/context';
 import { css } from 'lit';
 import { property } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { html } from 'lit/static-html.js';
-import { inputConfig, typeConfig } from '../../../core/common/property-menu.js';
+import { propertyMenuItems } from '../../../core/common/property-menu.js';
+import { wordingOf } from '../../../core/utils/wording.js';
 import { numberFormats } from '../../../property-presets/number/utils/formats.js';
+import { DATA_VIEW_INSERT_LEFT, DATA_VIEW_INSERT_RIGHT, DATA_VIEW_PROPERTY_SETTINGS, VIEWS_BAR_MOVE_LEFT, VIEWS_BAR_MOVE_RIGHT, } from '../../../translations.js';
 import { MOBILE_TOUCH_TARGET } from '../consts.js';
 let MobileTableColumnHeader = (() => {
     let _classSuper = SignalWatcher(WithDisposable(ShadowlessElement));
+    let _std_decorators;
+    let _std_initializers = [];
+    let _std_extraInitializers = [];
     let _column_decorators;
     let _column_initializers = [];
     let _column_extraInitializers = [];
@@ -55,8 +61,10 @@ let MobileTableColumnHeader = (() => {
     return class MobileTableColumnHeader extends _classSuper {
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _std_decorators = [consume({ context: stdContext })];
             _column_decorators = [property({ attribute: false })];
             _tableViewManager_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, _column_decorators, { kind: "accessor", name: "column", static: false, private: false, access: { has: obj => "column" in obj, get: obj => obj.column, set: (obj, value) => { obj.column = value; } }, metadata: _metadata }, _column_initializers, _column_extraInitializers);
             __esDecorate(this, null, _tableViewManager_decorators, { kind: "accessor", name: "tableViewManager", static: false, private: false, access: { has: obj => "tableViewManager" in obj, get: obj => obj.tableViewManager, set: (obj, value) => { obj.tableViewManager = value; } }, metadata: _metadata }, _tableViewManager_initializers, _tableViewManager_extraInitializers);
             if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
@@ -84,16 +92,15 @@ let MobileTableColumnHeader = (() => {
   `; }
         popMenu(ele) {
             const enableNumberFormatting = this.tableViewManager.featureFlags$.value.enable_number_formatting;
+            const wording = wordingOf(this.std);
             popMenu(popupTargetFromElement(ele ?? this), {
                 options: {
                     title: {
-                        text: 'Property settings',
+                        text: wording(DATA_VIEW_PROPERTY_SETTINGS),
                     },
-                    items: [
-                        inputConfig(this.column),
-                        typeConfig(this.column),
-                        // Number format begin
-                        ...(enableNumberFormatting
+                    items: propertyMenuItems(this.column, {
+                        wording,
+                        afterType: enableNumberFormatting
                             ? [
                                 menu.subMenu({
                                     name: 'Number Format',
@@ -127,122 +134,88 @@ let MobileTableColumnHeader = (() => {
                                     },
                                 }),
                             ]
-                            : []),
-                        // Number format end
-                        menu.group({
-                            items: [
-                                menu.action({
-                                    name: 'Hide In View',
-                                    prefix: ViewIcon(),
-                                    hide: () => !this.column.hideCanSet,
-                                    select: () => {
-                                        this.column.hideSet(true);
-                                    },
-                                }),
-                            ],
-                        }),
-                        menu.group({
-                            items: [
-                                menu.action({
-                                    name: 'Insert Left Column',
-                                    prefix: InsertLeftIcon(),
-                                    select: () => {
-                                        this.tableViewManager.propertyAdd({
-                                            id: this.column.id,
-                                            before: true,
-                                        });
-                                        Promise.resolve()
-                                            .then(() => {
-                                            const pre = this.previousElementSibling?.previousElementSibling;
-                                            if (pre instanceof MobileTableColumnHeader) {
-                                                pre.editTitle();
-                                                pre.scrollIntoView({
-                                                    inline: 'nearest',
-                                                    block: 'nearest',
-                                                });
+                            : [],
+                        beforeOperations: [
+                            menu.group({
+                                items: [
+                                    menu.action({
+                                        name: wording(DATA_VIEW_INSERT_LEFT),
+                                        prefix: InsertLeftIcon(),
+                                        select: () => {
+                                            this.tableViewManager.propertyAdd({
+                                                id: this.column.id,
+                                                before: true,
+                                            });
+                                            Promise.resolve()
+                                                .then(() => {
+                                                const pre = this.previousElementSibling?.previousElementSibling;
+                                                if (pre instanceof MobileTableColumnHeader) {
+                                                    pre.editTitle();
+                                                    pre.scrollIntoView({
+                                                        inline: 'nearest',
+                                                        block: 'nearest',
+                                                    });
+                                                }
+                                            })
+                                                .catch(console.error);
+                                        },
+                                    }),
+                                    menu.action({
+                                        name: wording(DATA_VIEW_INSERT_RIGHT),
+                                        prefix: InsertRightIcon(),
+                                        select: () => {
+                                            this.tableViewManager.propertyAdd({
+                                                id: this.column.id,
+                                                before: false,
+                                            });
+                                            Promise.resolve()
+                                                .then(() => {
+                                                const next = this.nextElementSibling?.nextElementSibling;
+                                                if (next instanceof MobileTableColumnHeader) {
+                                                    next.editTitle();
+                                                    next.scrollIntoView({
+                                                        inline: 'nearest',
+                                                        block: 'nearest',
+                                                    });
+                                                }
+                                            })
+                                                .catch(console.error);
+                                        },
+                                    }),
+                                    menu.action({
+                                        name: wording(VIEWS_BAR_MOVE_LEFT),
+                                        prefix: MoveLeftIcon(),
+                                        hide: () => this.column.isFirst$.value,
+                                        select: () => {
+                                            const pre = this.column.prev$.value;
+                                            if (!pre) {
+                                                return;
                                             }
-                                        })
-                                            .catch(console.error);
-                                    },
-                                }),
-                                menu.action({
-                                    name: 'Insert Right Column',
-                                    prefix: InsertRightIcon(),
-                                    select: () => {
-                                        this.tableViewManager.propertyAdd({
-                                            id: this.column.id,
-                                            before: false,
-                                        });
-                                        Promise.resolve()
-                                            .then(() => {
-                                            const next = this.nextElementSibling?.nextElementSibling;
-                                            if (next instanceof MobileTableColumnHeader) {
-                                                next.editTitle();
-                                                next.scrollIntoView({
-                                                    inline: 'nearest',
-                                                    block: 'nearest',
-                                                });
+                                            this.column.move({
+                                                id: pre.id,
+                                                before: true,
+                                            });
+                                        },
+                                    }),
+                                    menu.action({
+                                        name: wording(VIEWS_BAR_MOVE_RIGHT),
+                                        prefix: MoveRightIcon(),
+                                        hide: () => this.column.isLast$.value,
+                                        select: () => {
+                                            const next = this.column.next$.value;
+                                            if (!next) {
+                                                return;
                                             }
-                                        })
-                                            .catch(console.error);
-                                    },
-                                }),
-                                menu.action({
-                                    name: 'Move Left',
-                                    prefix: MoveLeftIcon(),
-                                    hide: () => this.column.isFirst$.value,
-                                    select: () => {
-                                        const pre = this.column.prev$.value;
-                                        if (!pre) {
-                                            return;
-                                        }
-                                        this.column.move({
-                                            id: pre.id,
-                                            before: true,
-                                        });
-                                    },
-                                }),
-                                menu.action({
-                                    name: 'Move Right',
-                                    prefix: MoveRightIcon(),
-                                    hide: () => this.column.isLast$.value,
-                                    select: () => {
-                                        const next = this.column.next$.value;
-                                        if (!next) {
-                                            return;
-                                        }
-                                        this.column.move({
-                                            id: next.id,
-                                            before: false,
-                                        });
-                                    },
-                                }),
-                            ],
-                        }),
-                        menu.group({
-                            items: [
-                                menu.action({
-                                    name: 'Duplicate',
-                                    prefix: DuplicateIcon(),
-                                    hide: () => !this.column.canDuplicate,
-                                    select: () => {
-                                        this.column.duplicate?.();
-                                    },
-                                }),
-                                menu.action({
-                                    name: 'Delete',
-                                    prefix: DeleteIcon(),
-                                    hide: () => !this.column.canDelete,
-                                    select: () => {
-                                        this.column.delete?.();
-                                    },
-                                    class: {
-                                        'delete-item': true,
-                                    },
-                                }),
-                            ],
-                        }),
-                    ],
+                                            this.column.move({
+                                                id: next.id,
+                                                before: false,
+                                            });
+                                        },
+                                    }),
+                                ],
+                            }),
+                        ],
+                    }),
                 },
             });
         }
@@ -265,6 +238,10 @@ let MobileTableColumnHeader = (() => {
       </div>
     `;
         }
+        #std_accessor_storage;
+        /** Absent outside an editor host: the menu reads English. */
+        get std() { return this.#std_accessor_storage; }
+        set std(value) { this.#std_accessor_storage = value; }
         #column_accessor_storage;
         get column() { return this.#column_accessor_storage; }
         set column(value) { this.#column_accessor_storage = value; }
@@ -282,7 +259,8 @@ let MobileTableColumnHeader = (() => {
             this.editTitle = () => {
                 this._clickColumn();
             };
-            this.#column_accessor_storage = __runInitializers(this, _column_initializers, void 0);
+            this.#std_accessor_storage = __runInitializers(this, _std_initializers, void 0);
+            this.#column_accessor_storage = (__runInitializers(this, _std_extraInitializers), __runInitializers(this, _column_initializers, void 0));
             this.#tableViewManager_accessor_storage = (__runInitializers(this, _column_extraInitializers), __runInitializers(this, _tableViewManager_initializers, void 0));
             __runInitializers(this, _tableViewManager_extraInitializers);
         }

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

@@ -45,7 +45,7 @@ import { repeat } from 'lit/directives/repeat.js';
 import { GroupTitle } from '../../../core/group-by/group-title.js';
 import { hideGroupAction } from '../../../core/group-by/group-visibility.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';
 const styles = css `
@@ -168,7 +168,9 @@ let MobileTableGroup = (() => {
               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>`}
     `;

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

@@ -42,6 +42,7 @@ import { repeat } from 'lit/directives/repeat.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { html } from 'lit/static-html.js';
 import { cellDivider } from '../styles.js';
+import { mobileStickyTitle } from './table-view-style.js';
 let MobileTableHeader = (() => {
     let _classSuper = SignalWatcher(WithDisposable(ShadowlessElement));
     let _renderGroupHeader_decorators;
@@ -85,16 +86,23 @@ let MobileTableHeader = (() => {
                     width: `${column.width$.value}px`,
                     border: index === 0 ? 'none' : undefined,
                 });
+                const isTitle = this.tableViewManager.mainProperties$.value.titleColumn ===
+                    column.id;
                 return html `
-              <mobile-table-column-header
-                style="${style}"
-                data-column-id="${column.id}"
-                data-column-index="${index}"
-                class="mobile-table-cell"
-                .column="${column}"
-                .tableViewManager="${this.tableViewManager}"
-              ></mobile-table-column-header>
-              <div class="${cellDivider}" style="height: auto;"></div>
+              <div
+                class="${isTitle ? mobileStickyTitle : ''}"
+                style="display: flex;"
+              >
+                <mobile-table-column-header
+                  style="${style}"
+                  data-column-id="${column.id}"
+                  data-column-index="${index}"
+                  class="mobile-table-cell"
+                  .column="${column}"
+                  .tableViewManager="${this.tableViewManager}"
+                ></mobile-table-column-header>
+                <div class="${cellDivider}" style="height: auto;"></div>
+              </div>
             `;
             })}
         <div @click="${this._onAddColumn}" class="mobile-table-add-column">

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

@@ -46,6 +46,9 @@ import { html } from 'lit/static-html.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;
 let MobileTableRow = (() => {
     let _classSuper = SignalWatcher(WithDisposable(ShadowlessElement));
     let _tableViewLogic_decorators;
@@ -137,13 +140,20 @@ let MobileTableRow = (() => {
                     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 style="display: flex;">
+            <div
+              class="${isTitle ? mobileStickyTitle : ''}"
+              style="display: flex;"
+            >
               <mobile-table-cell
                 class="mobile-table-cell"
                 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,
                 })}
                 .tableViewLogic="${this.tableViewLogic}"
                 .column="${column}"
@@ -158,20 +168,19 @@ let MobileTableRow = (() => {
               >
               </mobile-table-cell>
               <div class="${cellDivider}"></div>
-            </div>
-            ${!column.readonly$.value &&
-                    column.view.mainProperties$.value.titleColumn === column.id
+              ${hasOps
                     ? html ` <div class="mobile-row-ops">
-                  <div class="mobile-row-op" @click="${clickDetail}">
-                    ${CenterPeekIcon()}
-                  </div>
-                  ${!view.readonly$.value
+                    <div class="mobile-row-op" @click="${clickDetail}">
+                      ${CenterPeekIcon()}
+                    </div>
+                    ${!view.readonly$.value
                         ? html ` <div class="mobile-row-op" @click="${openMenu}">
-                        ${MoreHorizontalIcon()}
-                      </div>`
+                          ${MoreHorizontalIcon()}
+                        </div>`
                         : nothing}
-                </div>`
+                  </div>`
                     : nothing}
+            </div>
           `;
             })}
       <div class="database-cell add-column-button"></div>

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

@@ -1,3 +1,20 @@
+/**
+ * The view element itself never scrolls: the inner wrapper does.
+ *
+ * Upstream disabled horizontal scrolling of the mobile table altogether "to
+ * prevent crashes on iOS Safari" (AFFiNE#12203, blocksuite#8784), which left
+ * every column past the first unreachable on a phone. The scroll now lives on
+ * ONE inner element, contained (`overscroll-behavior`) so it never chains into
+ * the page; the host stays clipped as before.
+ * ponytail: unverified on a real iOS Safari here; if the crash comes back, the
+ * fallback is a paged column switcher, not `hidden` again.
+ */
+export declare const mobileTableViewHost: string;
 export declare const mobileTableViewWrapper: string;
+/**
+ * The title column stays in view while the others scroll under it: opaque,
+ * with the row's colour painted over the page colour.
+ */
+export declare const mobileStickyTitle: string;
 export declare const mobileTableViewContainer: string;
 export declare const mobileCellDivider: string;

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

@@ -1,16 +1,41 @@
 import { css } from '@emotion/css';
 import { cssVarV2 } from '@toeverything/theme/v2';
+import { ROW_COLOR_PROPERTY } from '../../../core/view/color-rules.js';
+/**
+ * The view element itself never scrolls: the inner wrapper does.
+ *
+ * Upstream disabled horizontal scrolling of the mobile table altogether "to
+ * prevent crashes on iOS Safari" (AFFiNE#12203, blocksuite#8784), which left
+ * every column past the first unreachable on a phone. The scroll now lives on
+ * ONE inner element, contained (`overscroll-behavior`) so it never chains into
+ * the page; the host stays clipped as before.
+ * ponytail: unverified on a real iOS Safari here; if the crash comes back, the
+ * fallback is a paged column switcher, not `hidden` again.
+ */
+export const mobileTableViewHost = css({
+    position: 'relative',
+    width: '100%',
+    overflowX: 'hidden',
+    overflowY: 'hidden',
+});
 export const mobileTableViewWrapper = css({
     position: 'relative',
     width: '100%',
     paddingBottom: '4px',
-    /**
-     * Disable horizontal scrolling to prevent crashes on iOS Safari
-     * See https://github.com/toeverything/AFFiNE/pull/12203
-     * and https://github.com/toeverything/blocksuite/pull/8784
-     */
-    overflowX: 'hidden',
+    overflowX: 'auto',
     overflowY: 'hidden',
+    overscrollBehaviorX: 'contain',
+});
+/**
+ * The title column stays in view while the others scroll under it: opaque,
+ * with the row's colour painted over the page colour.
+ */
+export const mobileStickyTitle = css({
+    position: 'sticky',
+    left: 0,
+    zIndex: 1,
+    backgroundColor: 'var(--affine-background-primary-color)',
+    backgroundImage: `linear-gradient(var(${ROW_COLOR_PROPERTY}, transparent), var(${ROW_COLOR_PROPERTY}, transparent))`,
 });
 export const mobileTableViewContainer = css({
     position: 'relative',

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

@@ -7,7 +7,7 @@ import { html } from 'lit/static-html.js';
 import { createUniComponentFromWebComponent, renderUniLit, } from '../../../core/index.js';
 import { DataViewUIBase, DataViewUILogicBase, } from '../../../core/view/data-view-base.js';
 import { LEFT_TOOL_BAR_WIDTH } from '../consts.js';
-import { mobileTableViewContainer, mobileTableViewWrapper, } from './table-view-style.js';
+import { mobileTableViewContainer, mobileTableViewHost, mobileTableViewWrapper, } from './table-view-style.js';
 export class MobileTableViewUILogic extends DataViewUILogicBase {
     constructor() {
         super(...arguments);
@@ -71,7 +71,7 @@ export class MobileTableViewUI extends DataViewUIBase {
     connectedCallback() {
         super.connectedCallback();
         this.logic.ui$.value = this;
-        this.classList.add(mobileTableViewWrapper);
+        this.classList.add(mobileTableViewHost);
     }
     renderTable() {
         const groups = this.logic.view.groupTrait.visibleGroups$.value;