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

tests/affine-local/e2e/blocksuite/database/utils.ts

@@ -48,7 +48,7 @@ export async function pasteString(page: Page, data: string) {
 }
 
 export async function selectCell(page: Page, nth: number, editing = true) {
-  const firstCell = page.locator('affine-database-cell-container').nth(nth);
+  const firstCell = page.locator('dv-table-view-cell-container').nth(nth);
   // First click for focus
   await firstCell.click({ delay: 100 });
   // Second click for edit mode
@@ -62,7 +62,7 @@ export async function verifyCellContents(
   page: Page,
   expectedContents: string[]
 ) {
-  const cells = page.locator('affine-database-cell-container');
+  const cells = page.locator('dv-table-view-cell-container');
   for (let i = 0; i < expectedContents.length; i++) {
     const cell = cells.nth(i);
     await expect(cell.locator('uni-lit > *:first-child')).toHaveText(

tests/affine-local/e2e/page-properties.spec.ts

@@ -311,7 +311,7 @@ test('can show database backlink info', async ({ page }) => {
     page.locator(`affine-database-title:has-text("${databaseTitle}")`)
   ).toBeVisible();
 
-  await addDatabaseRow(page, databaseTitle);
+  await addDatabaseRow(page, 0);
 
   // the new row's title cell should have been focused at the point of adding the row
   await createLinkedPage(page, 'linked page');

tests/blocksuite/e2e/database/actions.ts

@@ -8,7 +8,6 @@ import {
 } from '../utils/actions/keyboard.js';
 import {
   getBoundingBox,
-  getBoundingClientRect,
   getEditorLocator,
   waitNextFrame,
 } from '../utils/actions/misc.js';
@@ -117,13 +116,13 @@ export function getDatabaseCell(
   const index = columnIndex ?? 0;
   const columns = columnType
     ? row.getByTestId(columnType)
-    : row.locator('affine-database-cell-container');
+    : row.locator('dv-table-view-cell-container');
   return columns.nth(index);
 }
 
 export const getDatabaseColumnCells = (page: Page, columnIndex: number) => {
   return page.locator(
-    `affine-database-cell-container[data-column-index="${columnIndex}"]`
+    `dv-table-view-cell-container[data-column-index="${columnIndex}"]`
   );
 };
 
@@ -175,7 +174,7 @@ export async function assertDatabaseCellRichTexts(
   }
 ) {
   const cellContainer = page.locator(
-    `affine-database-cell-container[data-row-index='${rowIndex}'][data-column-index='${columnIndex}']`
+    `dv-table-view-cell-container[data-row-index='${rowIndex}'][data-column-index='${columnIndex}']`
   );
 
   const cell = cellContainer.locator('affine-database-rich-text-cell');
@@ -288,10 +287,8 @@ export async function focusDatabaseHeader(page: Page, columnIndex = 0) {
 }
 
 export async function getDatabaseMouse(page: Page) {
-  const databaseRect = await getBoundingClientRect(
-    page,
-    '.affine-database-table'
-  );
+  const databaseRect = await page.getByTestId('dv-table-view').boundingBox();
+  if (!databaseRect) throw new Error('Cannot find database rect');
   return {
     mouseOver: async () => {
       await page.mouse.move(databaseRect.x, databaseRect.y);

tests/blocksuite/e2e/database/database.spec.ts

@@ -553,7 +553,7 @@ test.describe('readonly mode', () => {
     const database = page.locator('affine-database');
     await expect(database).toBeVisible();
 
-    const databaseMenu = database.locator('.database-ops');
+    const databaseMenu = database.getByTestId('database-ops');
     await expect(databaseMenu).toBeVisible();
 
     const addViewButton = database.getByTestId('database-add-view-button');

tests/blocksuite/e2e/database/statistics.spec.ts

@@ -56,7 +56,7 @@ test.describe('title', () => {
     await menuSelect(page, ['Count', 'Count Empty']);
     const value = statCell.locator('.value');
     expect((await value.textContent())?.trim()).toBe('3');
-    await page.locator('affine-database-cell-container').nth(0).click();
+    await page.locator('dv-table-view-cell-container').nth(0).click();
     await pressKey(page, 'Enter');
     await type(page, 'asd');
     await pressKey(page, 'Escape');
@@ -77,7 +77,7 @@ test.describe('rich-text', () => {
     await menuSelect(page, ['Count', 'Count Empty']);
     const value = statCell.locator('.value');
     expect((await value.textContent())?.trim()).toBe('3');
-    await page.locator('affine-database-cell-container').nth(1).click();
+    await page.locator('dv-table-view-cell-container').nth(1).click();
     await pressKey(page, 'Enter');
     await type(page, 'asd');
     await pressKey(page, 'Escape');
@@ -98,7 +98,7 @@ test.describe('select', () => {
     await menuSelect(page, ['Count', 'Count Empty']);
     const value = statCell.locator('.value');
     expect((await value.textContent())?.trim()).toBe('3');
-    await page.locator('affine-database-cell-container').nth(1).click();
+    await page.locator('dv-table-view-cell-container').nth(1).click();
     await pressKey(page, 'Enter');
     await type(page, 'select');
     await pressKey(page, 'Enter');

tests/blocksuite/e2e/drag.spec.ts

@@ -15,7 +15,6 @@ import {
   type,
 } from './utils/actions/index.js';
 import {
-  getBoundingClientRect,
   getEditorHostLocator,
   getPageSnapshot,
   initParagraphsByCount,
@@ -239,7 +238,7 @@ test('should sync selected-blocks to session-manager when clicking drag handle',
   await assertRichTexts(page, ['123', '456', '789']);
 
   await focusRichText(page, 1);
-  const rect = await getBoundingClientRect(page, '[data-block-id="1"]');
+  const rect = await page.locator('[data-block-id="1"]').boundingBox();
   if (!rect) {
     throw new Error();
   }
@@ -363,10 +362,10 @@ test('hide drag handle when mouse is hovering over the title', async ({
   await initEmptyParagraphState(page);
   await initThreeParagraphs(page);
 
-  const rect = await getBoundingClientRect(
-    page,
-    '.affine-note-block-container'
-  );
+  const rect = await page.locator('.affine-note-block-container').boundingBox();
+  if (!rect) {
+    throw new Error();
+  }
   const dragHandle = page.locator('.affine-drag-handle-container');
   // When there is a gap between paragraph blocks, it is the correct behavior for the drag handle to appear
   // when the mouse is over the gap. Therefore, we use rect.y - 20 to make the Y offset greater than the gap between the

tests/blocksuite/e2e/utils/actions/misc.ts

@@ -993,18 +993,6 @@ export const getCenterPositionByLocator: (
   };
 };
 
-/**
- * @deprecated Use `page.locator(selector).boundingBox()` instead
- */
-export const getBoundingClientRect: (
-  page: Page,
-  selector: string
-) => Promise<DOMRect> = async (page: Page, selector: string) => {
-  return page.evaluate((selector: string) => {
-    return document.querySelector(selector)?.getBoundingClientRect() as DOMRect;
-  }, selector);
-};
-
 export async function getBoundingBox(locator: Locator) {
   const box = await locator.boundingBox();
   if (!box) throw new Error('Missing column box');

tests/kit/src/utils/page-logic.ts

@@ -251,10 +251,8 @@ export const addCodeBlock = async (page: Page) => {
   await page.getByTestId('Code Block').click();
 };
 
-export const addDatabaseRow = async (page: Page, databaseTitle: string) => {
-  const db = page.locator(`affine-database-table`, {
-    has: page.locator(`affine-database-title:has-text("${databaseTitle}")`),
-  });
+export const addDatabaseRow = async (page: Page, nth: number = 0) => {
+  const db = page.getByTestId('dv-table-view').nth(nth);
   await db.locator('.data-view-table-group-add-row-button').click();
 };