chore(editor): mobile database editing experimental flag (#13425)

#### PR Dependency Tree


* **PR #13425** 👈

This tree was auto-generated by
[Charcoal](https://github.com/danerwilliams/charcoal)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **New Features**
* Introduced a feature flag to enable or disable mobile database
editing.
* Added user notifications on mobile when attempting to edit databases
if the feature is not enabled.

* **Bug Fixes**
* Prevented addition of filters and group actions in readonly or
restricted mobile editing states.
* Fixed issues with selection handling in mobile Kanban and Table views
by ensuring correct context binding.

* **Style**
  * Improved toast notification styling to allow dynamic height.
* Adjusted mobile table view styles for better compatibility on iOS
devices.

* **Chores**
* Updated feature flag configuration to support mobile database editing
control.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

blocksuite/affine/blocks/database/src/data-source.ts

@@ -164,8 +164,10 @@ export class DatabaseBlockDataSource extends DataSourceBase {
   readonly$: ReadonlySignal<boolean> = computed(() => {
     return (
       this._model.store.readonly ||
-      // TODO(@L-Sun): use block level readonly
-      IS_MOBILE
+      (IS_MOBILE &&
+        !this._model.store.provider
+          .get(FeatureFlagService)
+          .getFlag('enable_mobile_database_editing'))
     );
   });
 

blocksuite/affine/blocks/database/src/database-block.ts

@@ -13,6 +13,7 @@ import {
   BlockElementCommentManager,
   CommentProviderIdentifier,
   DocModeProvider,
+  FeatureFlagService,
   NotificationProvider,
   type TelemetryEventMap,
   TelemetryProvider,
@@ -34,6 +35,7 @@ import {
   uniMap,
 } from '@blocksuite/data-view';
 import { widgetPresets } from '@blocksuite/data-view/widget-presets';
+import { IS_MOBILE } from '@blocksuite/global/env';
 import { Rect } from '@blocksuite/global/gfx';
 import {
   CommentIcon,
@@ -48,6 +50,7 @@ import { autoUpdate } from '@floating-ui/dom';
 import { computed, signal } from '@preact/signals-core';
 import { html, nothing } from 'lit';
 import { repeat } from 'lit/directives/repeat.js';
+import { styleMap } from 'lit/directives/style-map.js';
 
 import { popSideDetail } from './components/layout.js';
 import { DatabaseConfigExtension } from './config.js';
@@ -349,6 +352,7 @@ export class DatabaseBlockComponent extends CaptionedBlockComponent<DatabaseBloc
     this.setAttribute(RANGE_SYNC_EXCLUDE_ATTR, 'true');
     this.classList.add(databaseBlockStyles);
     this.listenFullWidthChange();
+    this.handleMobileEditing();
   }
 
   listenFullWidthChange() {
@@ -364,6 +368,40 @@ export class DatabaseBlockComponent extends CaptionedBlockComponent<DatabaseBloc
       })
     );
   }
+
+  handleMobileEditing() {
+    if (!IS_MOBILE) return;
+
+    const handler = () => {
+      if (
+        !this.std
+          .get(FeatureFlagService)
+          .getFlag('enable_mobile_database_editing')
+      ) {
+        const notification = this.std.getOptional(NotificationProvider);
+        if (notification) {
+          notification.notify({
+            title: html`<div
+              style=${styleMap({
+                whiteSpace: 'wrap',
+              })}
+            >
+              Mobile database editing is not supported yet. You can open it in
+              experimental features, or edit it in desktop mode.
+            </div>`,
+            accent: 'warning',
+          });
+        }
+        this.removeEventListener('click', handler);
+      }
+    };
+
+    this.addEventListener('click', handler);
+    this.disposables.add(() => {
+      this.removeEventListener('click', handler);
+    });
+  }
+
   private readonly dataViewRootLogic = lazy(
     () =>
       new DataViewRootUILogic({

blocksuite/affine/data-view/src/core/view/data-view-base.ts

@@ -65,7 +65,7 @@ export abstract class DataViewUILogicBase<
       return handler(context);
     });
   }
-  setSelection(selection?: Selection): void {
+  setSelection(selection?: Selection) {
     this.root.setSelection(selection);
   }
 

blocksuite/affine/data-view/src/view-presets/kanban/mobile/cell.ts

@@ -73,7 +73,9 @@ export class MobileKanbanCell extends SignalWatcher(
     if (this.view.readonly$.value) {
       return;
     }
-    const setSelection = this.kanbanViewLogic.setSelection;
+    const setSelection = this.kanbanViewLogic.setSelection.bind(
+      this.kanbanViewLogic
+    );
     const viewId = this.kanbanViewLogic.view.id;
     if (setSelection && viewId) {
       if (editing && this.cell?.beforeEnterEditMode() === false) {

blocksuite/affine/data-view/src/view-presets/kanban/mobile/kanban-view-ui-logic.ts

@@ -86,6 +86,9 @@ export class MobileKanbanViewUILogic extends DataViewUILogicBase<
   }
 
   renderAddGroup = () => {
+    if (this.readonly) {
+      return;
+    }
     const addGroup = this.groupManager.addGroup;
     if (!addGroup) {
       return;

blocksuite/affine/data-view/src/view-presets/table/mobile/cell.ts

@@ -68,7 +68,9 @@ export class MobileTableCell extends SignalWatcher(
     if (this.view.readonly$.value) {
       return;
     }
-    const setSelection = this.tableViewLogic.setSelection;
+    const setSelection = this.tableViewLogic.setSelection.bind(
+      this.tableViewLogic
+    );
     const viewId = this.tableViewLogic.view.id;
     if (setSelection && viewId) {
       if (editing && this.cell?.beforeEnterEditMode() === false) {

blocksuite/affine/data-view/src/view-presets/table/mobile/table-view-style.ts

@@ -1,3 +1,4 @@
+import { IS_IOS } from '@blocksuite/global/env';
 import { css } from '@emotion/css';
 import { cssVarV2 } from '@toeverything/theme/v2';
 
@@ -10,7 +11,7 @@ export const mobileTableViewWrapper = css({
    * See https://github.com/toeverything/AFFiNE/pull/12203
    * and https://github.com/toeverything/blocksuite/pull/8784
    */
-  overflowX: 'hidden',
+  overflowX: IS_IOS ? 'hidden' : undefined,
   overflowY: 'hidden',
 });
 

blocksuite/affine/data-view/src/widget-presets/quick-setting-bar/filter/list-view.ts

@@ -88,6 +88,9 @@ export class FilterBar extends SignalWatcher(ShadowlessElement) {
   };
 
   private readonly addFilter = (e: MouseEvent) => {
+    if (this.dataViewLogic.root.config.dataSource.readonly$.peek()) {
+      return;
+    }
     const element = popupTargetFromElement(e.target as HTMLElement);
     popCreateFilter(element, {
       vars: this.vars,

blocksuite/affine/shared/src/services/feature-flag-service.ts

@@ -15,6 +15,7 @@ export interface BlockSuiteFlags {
   enable_shape_shadow_blur: boolean;
   enable_mobile_keyboard_toolbar: boolean;
   enable_mobile_linked_doc_menu: boolean;
+  enable_mobile_database_editing: boolean;
   enable_block_meta: boolean;
   enable_callout: boolean;
   enable_edgeless_scribbled_style: boolean;
@@ -41,6 +42,7 @@ export class FeatureFlagService extends StoreExtension {
     enable_mobile_keyboard_toolbar: false,
     enable_mobile_linked_doc_menu: false,
     enable_block_meta: true,
+    enable_mobile_database_editing: false,
     enable_callout: false,
     enable_edgeless_scribbled_style: false,
     enable_table_virtual_scroll: false,

blocksuite/affine/widgets/keyboard-toolbar/src/keyboard-tool-panel.ts

@@ -4,7 +4,7 @@ import {
   requiredProperties,
   ShadowlessElement,
 } from '@blocksuite/std';
-import { html, nothing, type PropertyValues } from 'lit';
+import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
 
@@ -80,18 +80,9 @@ export class AffineKeyboardToolPanel extends SignalWatcher(
     </div>`;
   }
 
-  protected override willUpdate(changedProperties: PropertyValues<this>) {
-    if (changedProperties.has('height')) {
-      this.style.height = this.height;
-    }
-  }
-
   @property({ attribute: false })
   accessor config: KeyboardToolPanelConfig | null = null;
 
   @property({ attribute: false })
   accessor context!: KeyboardToolbarContext;
-
-  @property({ attribute: false })
-  accessor height = '';
 }

blocksuite/affine/widgets/keyboard-toolbar/src/keyboard-toolbar.ts

@@ -377,7 +377,10 @@ export class AffineKeyboardToolbar extends SignalWatcher(
       <affine-keyboard-tool-panel
         .config=${this._currentPanelConfig}
         .context=${this._context}
-        .height=${this.panelHeight}
+        style=${styleMap({
+          height: this.panelHeight,
+          paddingBottom: this.keyboard.appTabSafeArea$.value,
+        })}
       ></affine-keyboard-tool-panel>
     `;
   }

packages/frontend/component/src/ui/notification/mobile/styles.css.ts

@@ -26,7 +26,7 @@ globalStyle(`${sonner} li[data-sonner-toast]`, {
 
 export const toastRoot = style({
   width: 'fit-content',
-  height: 44,
+  minHeight: 44,
   borderRadius: 22,
   margin: '0px auto',
   padding: 10,

packages/frontend/core/src/modules/feature-flag/constant.ts

@@ -288,6 +288,14 @@ export const AFFINE_FLAGS = {
     configurable: isCanaryBuild,
     defaultState: false,
   },
+  enable_mobile_database_editing: {
+    category: 'blocksuite',
+    bsFlag: 'enable_mobile_database_editing',
+    displayName: 'Enable Mobile Database Editing',
+    description: 'Enable mobile database editing',
+    configurable: isMobile,
+    defaultState: false,
+  },
 } satisfies { [key in string]: FlagInfo };
 
 // oxlint-disable-next-line no-redeclare