refactor(editor): highlight selected cards of TOC based on signal (#9807)

Close [BS-2314](https://linear.app/affine-design/issue/BS-2314/添加打开toc时，将note-block-高亮), [BS-1868](https://linear.app/affine-design/issue/BS-1868/toc-里面-note之间顺序可拖动性，在page和edgeless里面是不同的，这个是设计的行为么？)

This PR refactor the highlight logic of note cards of TOC panel:
- notes block selected in edgeless note
- notes block covered by text or block selection in page mode
- note cards selected in TOC for dragging

Other changes:
- remove not used codes
- add tests for highlight note cards

tests/affine-local/e2e/blocksuite/edgeless/note.spec.ts

@@ -229,7 +229,11 @@ test.describe('edgeless note element toolbar', () => {
 
     await displayInPage.click();
     await viewTocButton.click();
-    await page.waitForSelector('affine-outline-panel');
-    expect(page.locator('affine-outline-panel')).toBeVisible();
+    const toc = page.locator('affine-outline-panel');
+    await toc.waitFor({ state: 'visible' });
+    const highlightNoteCards = toc.locator(
+      'affine-outline-note-card > .selected'
+    );
+    expect(highlightNoteCards).toHaveCount(1);
   });
 });

tests/affine-local/e2e/blocksuite/outline.spec.ts

@@ -2,15 +2,25 @@ import { test } from '@affine-test/kit/playwright';
 import {
   clickEdgelessModeButton,
   clickPageModeButton,
+  clickView,
+  createEdgelessNoteBlock,
+  locateElementToolbar,
+  locateModeSwitchButton,
 } from '@affine-test/kit/utils/editor';
+import {
+  pressEnter,
+  selectAllByKeyboard,
+} from '@affine-test/kit/utils/keyboard';
 import { openHomePage } from '@affine-test/kit/utils/load-page';
 import {
   clickNewPageButton,
   createLinkedPage,
   getBlockSuiteEditorTitle,
+  type,
   waitForEditorLoad,
   waitForEmptyEditor,
 } from '@affine-test/kit/utils/page-logic';
+import { openRightSideBar } from '@affine-test/kit/utils/sidebar';
 import { expect, type Locator, type Page } from '@playwright/test';
 
 function getIndicators(container: Page | Locator) {
@@ -156,3 +166,66 @@ test('outline viewer should be useable in doc peek preview', async ({
     await expect(page.locator('affine-outline-panel')).toBeVisible();
   }
 });
+
+test('visibility sorting should be enabled in edgeless mode and disabled in page mode by default, and can be changed', async ({
+  page,
+}) => {
+  await openHomePage(page);
+  await clickNewPageButton(page);
+  await waitForEditorLoad(page);
+  await pressEnter(page);
+  await type(page, '# Heading 1');
+  await openRightSideBar(page, 'outline');
+
+  const toc = page.locator('affine-outline-panel');
+  const sortingButton = toc.locator('.note-sorting-button');
+  await expect(sortingButton).not.toHaveClass(/active/);
+  expect(toc.locator('[data-sortable="false"]')).toHaveCount(1);
+
+  await clickEdgelessModeButton(page);
+  await expect(sortingButton).toHaveClass(/active/);
+  expect(toc.locator('[data-sortable="true"]')).toHaveCount(1);
+
+  await sortingButton.click();
+  await expect(sortingButton).not.toHaveClass(/active/);
+  expect(toc.locator('[data-sortable="false"]')).toHaveCount(1);
+});
+
+test('note cards of TOC should be highlight when selections contains the corresponding notes', async ({
+  page,
+}) => {
+  await openHomePage(page);
+  await clickNewPageButton(page);
+  await locateModeSwitchButton(page, 'edgeless').click();
+  await waitForEditorLoad(page);
+  await openRightSideBar(page, 'outline');
+
+  const toc = page.locator('affine-outline-panel');
+  const highlightNoteCards = toc.locator(
+    'affine-outline-note-card > .selected'
+  );
+
+  await expect(highlightNoteCards).toHaveCount(0);
+
+  await clickView(page, [0, 0]);
+  await selectAllByKeyboard(page);
+  await expect(highlightNoteCards).toHaveCount(1);
+
+  await createEdgelessNoteBlock(page, [100, 100]);
+  await expect(highlightNoteCards).toHaveCount(1);
+
+  await clickView(page, [200, 200]);
+  await selectAllByKeyboard(page);
+  await expect(highlightNoteCards).toHaveCount(2);
+
+  await clickView(page, [100, 100]);
+  const toolbar = locateElementToolbar(page);
+  await toolbar.getByTestId('display-in-page').click();
+  await clickPageModeButton(page);
+  await page.keyboard.press('ArrowDown');
+  await expect(highlightNoteCards).toHaveCount(1);
+  await selectAllByKeyboard(page);
+  await selectAllByKeyboard(page);
+  await selectAllByKeyboard(page);
+  await expect(highlightNoteCards).toHaveCount(2);
+});

tests/kit/src/utils/sidebar.ts

@@ -19,3 +19,11 @@ export async function clickSideBarUseAvatar(page: Page) {
 export async function clickNewPageButton(page: Page) {
   return page.getByTestId('sidebar-new-page-button').click();
 }
+
+export async function openRightSideBar(
+  page: Page,
+  tab?: 'chat' | 'properties' | 'journal' | 'outline' | 'frame'
+) {
+  await page.getByTestId('right-sidebar-toggle').click();
+  tab && (await page.getByTestId(`sidebar-tab-${tab}`).click());
+}