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({