refactor(editor): add a layer of ui-logic to enhance type safety (#12511)

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

- **New Features**
  - Introduced modular UI logic layers for Kanban and Table views, enhancing maintainability and scalability.
  - Added new CSS-in-JS style modules for database blocks and table views, improving visual consistency.
  - Expanded telemetry event tracking for database views, properties, filters, and groups.
  - Added utility functions for lazy initialization and cached computed values.

- **Refactor**
  - Unified logic and state management across Kanban and Table views by replacing direct component dependencies with logic-centric architecture.
  - Updated components and widgets to use the new logic-based approach for state, selection, and event handling.
  - Replaced inline styles with CSS classes; updated class names to align with new component structure.
  - Centralized state access through UI logic instances, eliminating direct DOM queries and simplifying dependencies.
  - Consolidated Kanban and Table view presets effects for streamlined initialization.
  - Replaced Lit reactive state with Preact signals in multiple components for improved reactivity.
  - Split monolithic components into separate logic and UI classes for clearer separation of concerns.
  - Removed obsolete components and consolidated exports for cleaner API surface.

- **Bug Fixes**
  - Enhanced selection and interaction reliability in database cells and views.
  - Fixed scrolling issues on mobile table views for improved compatibility.

- **Chores**
  - Updated end-to-end test selectors to reflect new component names and structure.
  - Removed deprecated utilities and cleaned up unused imports.

- **Documentation**
  - Improved type definitions and public API exports for better developer experience.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

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

@@ -19,15 +19,14 @@ import { getDropResult } from '@blocksuite/affine-widget-drag-handle';
 import {
   createRecordDetail,
   createUniComponentFromWebComponent,
-  DataView,
-  dataViewCommonStyle,
-  type DataViewInstance,
-  type DataViewProps,
+  DataViewRootUILogic,
   type DataViewSelection,
+  type DataViewUILogicBase,
   type DataViewWidget,
   type DataViewWidgetProps,
   defineUniComponent,
   ExternalGroupByConfigProvider,
+  lazy,
   renderUniLit,
   type SingleView,
   uniMap,
@@ -44,12 +43,23 @@ import { RANGE_SYNC_EXCLUDE_ATTR } from '@blocksuite/std/inline';
 import { Slice } from '@blocksuite/store';
 import { autoUpdate } from '@floating-ui/dom';
 import { computed, signal } from '@preact/signals-core';
-import { css, html, nothing, unsafeCSS } from 'lit';
+import { html, nothing } from 'lit';
 
 import { popSideDetail } from './components/layout.js';
 import { DatabaseConfigExtension } from './config.js';
 import { EditorHostKey } from './context/host-context.js';
 import { DatabaseBlockDataSource } from './data-source.js';
+import {
+  databaseBlockStyles,
+  databaseContentStyles,
+  databaseHeaderBarStyles,
+  databaseHeaderContainerStyles,
+  databaseOpsStyles,
+  databaseTitleRowStyles,
+  databaseTitleStyles,
+  databaseToolbarRowStyles,
+  databaseViewBarContainerStyles,
+} from './database-block-styles.js';
 import { BlockRenderer } from './detail-panel/block-renderer.js';
 import { NoteRenderer } from './detail-panel/note-renderer.js';
 import { DatabaseSelection } from './selection.js';
@@ -58,52 +68,7 @@ import { getSingleDocIdFromText } from './utils/title-doc.js';
 import type { DatabaseViewExtensionOptions } from './view';
 
 export class DatabaseBlockComponent extends CaptionedBlockComponent<DatabaseBlockModel> {
-  static override styles = css`
-    ${unsafeCSS(dataViewCommonStyle('affine-database'))}
-    affine-database {
-      display: block;
-      border-radius: 8px;
-      background-color: var(--affine-background-primary-color);
-      padding: 8px;
-      margin: 8px -8px -8px;
-    }
-
-    .database-block-selected {
-      background-color: var(--affine-hover-color);
-      border-radius: 4px;
-    }
-
-    .database-ops {
-      padding: 2px;
-      border-radius: 4px;
-      display: flex;
-      cursor: pointer;
-      align-items: center;
-      height: max-content;
-    }
-
-    .database-ops svg {
-      width: 16px;
-      height: 16px;
-      color: var(--affine-icon-color);
-    }
-
-    .database-ops:hover {
-      background-color: var(--affine-hover-color);
-    }
-
-    @media print {
-      .database-ops {
-        display: none;
-      }
-
-      .database-header-bar {
-        display: none !important;
-      }
-    }
-  `;
-
-  private readonly _clickDatabaseOps = (e: MouseEvent) => {
+  private readonly clickDatabaseOps = (e: MouseEvent) => {
     const options = this.optionsConfig.configure(this.model, {
       items: [
         menu.input({
@@ -155,36 +120,33 @@ export class DatabaseBlockComponent extends CaptionedBlockComponent<DatabaseBloc
     });
   };
 
-  private _dataSource?: DatabaseBlockDataSource;
+  private readonly dataSource = lazy(() => {
+    const dataSource = new DatabaseBlockDataSource(this.model, dataSource => {
+      dataSource.serviceSet(EditorHostKey, this.host);
+      this.std.provider
+        .getAll(ExternalGroupByConfigProvider)
+        .forEach(config => {
+          dataSource.serviceSet(
+            ExternalGroupByConfigProvider(config.name),
+            config
+          );
+        });
+    });
+    const id = currentViewStorage.getCurrentView(this.model.id);
+    if (id && dataSource.viewManager.viewGet(id)) {
+      dataSource.viewManager.setCurrentView(id);
+    }
+    return dataSource;
+  });
 
-  private readonly dataView = new DataView();
-
-  private readonly renderTitle = (dataViewMethod: DataViewInstance) => {
-    const addRow = () => dataViewMethod.addRow?.('start');
+  private readonly renderTitle = (dataViewLogic: DataViewUILogicBase) => {
     return html` <affine-database-title
-      style="overflow: hidden"
+      class="${databaseTitleStyles}"
       .titleText="${this.model.props.title}"
-      .readonly="${this.dataSource.readonly$.value}"
-      .onPressEnterKey="${addRow}"
+      .dataViewLogic="${dataViewLogic}"
     ></affine-database-title>`;
   };
 
-  _bindHotkey: DataViewProps['bindHotkey'] = hotkeys => {
-    return {
-      dispose: this.host.event.bindHotkey(hotkeys, {
-        blockId: this.topContenteditableElement?.blockId ?? this.blockId,
-      }),
-    };
-  };
-
-  _handleEvent: DataViewProps['handleEvent'] = (name, handler) => {
-    return {
-      dispose: this.host.event.add(name, handler, {
-        blockId: this.blockId,
-      }),
-    };
-  };
-
   createTemplate = (
     data: {
       view: SingleView;
@@ -218,18 +180,12 @@ export class DatabaseBlockComponent extends CaptionedBlockComponent<DatabaseBloc
   headerWidget: DataViewWidget = defineUniComponent(
     (props: DataViewWidgetProps) => {
       return html`
-        <div style="margin-bottom: 16px;display:flex;flex-direction: column">
-          <div
-            style="display:flex;gap:12px;margin-bottom: 8px;align-items: center"
-          >
-            ${this.renderTitle(props.dataViewInstance)}
-            ${this.renderDatabaseOps()}
+        <div class="${databaseHeaderContainerStyles}">
+          <div class="${databaseTitleRowStyles}">
+            ${this.renderTitle(props.dataViewLogic)} ${this.renderDatabaseOps()}
           </div>
-          <div
-            style="display:flex;align-items:center;justify-content: space-between;gap: 12px"
-            class="database-header-bar"
-          >
-            <div style="flex:1">
+          <div class="${databaseToolbarRowStyles} ${databaseHeaderBarStyles}">
+            <div class="${databaseViewBarContainerStyles}">
               ${renderUniLit(widgetPresets.viewBar, {
                 ...props,
                 onChangeView: id => {
@@ -284,7 +240,9 @@ export class DatabaseBlockComponent extends CaptionedBlockComponent<DatabaseBloc
     return () => {};
   };
 
-  setSelection = (selection: DataViewSelection | undefined) => {
+  private readonly setSelection = (
+    selection: DataViewSelection | undefined
+  ) => {
     if (selection) {
       getSelection()?.removeAllRanges();
     }
@@ -301,7 +259,7 @@ export class DatabaseBlockComponent extends CaptionedBlockComponent<DatabaseBloc
     );
   };
 
-  toolsWidget: DataViewWidget = widgetPresets.createTools({
+  private readonly toolsWidget: DataViewWidget = widgetPresets.createTools({
     table: [
       widgetPresets.tools.filter,
       widgetPresets.tools.sort,
@@ -318,7 +276,7 @@ export class DatabaseBlockComponent extends CaptionedBlockComponent<DatabaseBloc
     ],
   });
 
-  viewSelection$ = computed(() => {
+  private readonly viewSelection$ = computed(() => {
     const databaseSelection = this.selection.value.find(
       (selection): selection is DatabaseSelection => {
         if (selection.blockId !== this.blockId) {
@@ -330,28 +288,7 @@ export class DatabaseBlockComponent extends CaptionedBlockComponent<DatabaseBloc
     return databaseSelection?.viewSelection;
   });
 
-  virtualPadding$ = signal(0);
-
-  get dataSource(): DatabaseBlockDataSource {
-    if (!this._dataSource) {
-      this._dataSource = new DatabaseBlockDataSource(this.model, dataSource => {
-        dataSource.serviceSet(EditorHostKey, this.host);
-        this.std.provider
-          .getAll(ExternalGroupByConfigProvider)
-          .forEach(config => {
-            dataSource.serviceSet(
-              ExternalGroupByConfigProvider(config.name),
-              config
-            );
-          });
-      });
-      const id = currentViewStorage.getCurrentView(this.model.id);
-      if (id && this.dataSource.viewManager.viewGet(id)) {
-        this.dataSource.viewManager.setCurrentView(id);
-      }
-    }
-    return this._dataSource;
-  }
+  private readonly virtualPadding$ = signal(0);
 
   get optionsConfig(): DatabaseViewExtensionOptions {
     return {
@@ -369,15 +306,15 @@ export class DatabaseBlockComponent extends CaptionedBlockComponent<DatabaseBloc
     return this.rootComponent;
   }
 
-  get view() {
-    return this.dataView.expose;
-  }
-
   private renderDatabaseOps() {
-    if (this.dataSource.readonly$.value) {
+    if (this.dataSource.value.readonly$.value) {
       return nothing;
     }
-    return html` <div class="database-ops" @click="${this._clickDatabaseOps}">
+    return html` <div
+      data-testid="database-ops"
+      class="${databaseOpsStyles}"
+      @click="${this.clickDatabaseOps}"
+    >
       ${MoreHorizontalIcon()}
     </div>`;
   }
@@ -386,6 +323,7 @@ export class DatabaseBlockComponent extends CaptionedBlockComponent<DatabaseBloc
     super.connectedCallback();
 
     this.setAttribute(RANGE_SYNC_EXCLUDE_ATTR, 'true');
+    this.classList.add(databaseBlockStyles);
     this.listenFullWidthChange();
   }
 
@@ -402,85 +340,97 @@ export class DatabaseBlockComponent extends CaptionedBlockComponent<DatabaseBloc
       })
     );
   }
-
-  override renderBlock() {
-    const peekViewService = this.std.getOptional(PeekViewProvider);
-    const telemetryService = this.std.getOptional(TelemetryProvider);
-    return html`
-      <div
-        contenteditable="false"
-        style="position: relative;background-color: var(--affine-background-primary-color);border-radius: 4px"
-      >
-        ${this.dataView.render({
-          virtualPadding$: this.virtualPadding$,
-          bindHotkey: this._bindHotkey,
-          handleEvent: this._handleEvent,
-          selection$: this.viewSelection$,
-          setSelection: this.setSelection,
-          dataSource: this.dataSource,
-          headerWidget: this.headerWidget,
-          onDrag: this.onDrag,
-          clipboard: this.std.clipboard,
-          notification: {
-            toast: message => {
-              const notification = this.std.getOptional(NotificationProvider);
-              if (notification) {
-                notification.toast(message);
-              } else {
-                toast(this.host, message);
-              }
-            },
-          },
-          eventTrace: (key, params) => {
-            telemetryService?.track(key, {
-              ...(params as TelemetryEventMap[typeof key]),
+  private readonly dataViewRootLogic = lazy(
+    () =>
+      new DataViewRootUILogic({
+        virtualPadding$: this.virtualPadding$,
+        bindHotkey: hotkeys => {
+          return {
+            dispose: this.host.event.bindHotkey(hotkeys, {
+              blockId: this.topContenteditableElement?.blockId ?? this.blockId,
+            }),
+          };
+        },
+        handleEvent: (name, handler) => {
+          return {
+            dispose: this.host.event.add(name, handler, {
               blockId: this.blockId,
-            });
+            }),
+          };
+        },
+        selection$: this.viewSelection$,
+        setSelection: this.setSelection,
+        dataSource: this.dataSource.value,
+        headerWidget: this.headerWidget,
+        onDrag: this.onDrag,
+        clipboard: this.std.clipboard,
+        notification: {
+          toast: message => {
+            const notification = this.std.getOptional(NotificationProvider);
+            if (notification) {
+              notification.toast(message);
+            } else {
+              toast(this.host, message);
+            }
           },
-          detailPanelConfig: {
-            openDetailPanel: (target, data) => {
-              if (peekViewService) {
-                const openDoc = (docId: string) => {
-                  return peekViewService.peek({
-                    docId,
-                    databaseId: this.blockId,
-                    databaseDocId: this.model.store.id,
-                    databaseRowId: data.rowId,
-                    target: this,
-                  });
-                };
-                const doc = getSingleDocIdFromText(
-                  this.model.store.getBlock(data.rowId)?.model?.text
-                );
-                if (doc) {
-                  return openDoc(doc);
-                }
-                const abort = new AbortController();
-                return new Promise<void>(focusBack => {
-                  peekViewService
-                    .peek(
-                      {
-                        target,
-                        template: this.createTemplate(data, docId => {
-                          // abort.abort();
-                          openDoc(docId).then(focusBack).catch(focusBack);
-                        }),
-                      },
-                      { abortSignal: abort.signal }
-                    )
-                    .then(focusBack)
-                    .catch(focusBack);
+        },
+        eventTrace: (key, params) => {
+          const telemetryService = this.std.getOptional(TelemetryProvider);
+          telemetryService?.track(key, {
+            ...(params as TelemetryEventMap[typeof key]),
+            blockId: this.blockId,
+          });
+        },
+        detailPanelConfig: {
+          openDetailPanel: (target, data) => {
+            const peekViewService = this.std.getOptional(PeekViewProvider);
+            if (peekViewService) {
+              const openDoc = (docId: string) => {
+                return peekViewService.peek({
+                  docId,
+                  databaseId: this.blockId,
+                  databaseDocId: this.model.store.id,
+                  databaseRowId: data.rowId,
+                  target: this,
                 });
-              } else {
-                return popSideDetail(
-                  this.createTemplate(data, () => {
-                    //
-                  })
-                );
+              };
+              const doc = getSingleDocIdFromText(
+                this.model.store.getBlock(data.rowId)?.model?.text
+              );
+              if (doc) {
+                return openDoc(doc);
               }
-            },
+              const abort = new AbortController();
+              return new Promise<void>(focusBack => {
+                peekViewService
+                  .peek(
+                    {
+                      target,
+                      template: this.createTemplate(data, docId => {
+                        // abort.abort();
+                        openDoc(docId).then(focusBack).catch(focusBack);
+                      }),
+                    },
+                    { abortSignal: abort.signal }
+                  )
+                  .then(focusBack)
+                  .catch(focusBack);
+              });
+            } else {
+              return popSideDetail(
+                this.createTemplate(data, () => {
+                  //
+                })
+              );
+            }
           },
-        })}
+        },
+      })
+  );
+  override renderBlock() {
+    return html`
+      <div contenteditable="false" class="${databaseContentStyles}">
+        ${this.dataViewRootLogic.value.render()}
       </div>
     `;
   }