refactor(mobile): use separate explorer components for mobile (#8503)

close AF-1488

- remove dnd related logic
- separate styles
- remove empty status, always show a `New` button in each level of tree

tests/affine-mobile/e2e/explorer-favorite.spec.ts

@@ -0,0 +1,27 @@
+import { test } from '@affine-test/kit/mobile';
+import { getBlockSuiteEditorTitle } from '@affine-test/kit/utils/page-logic';
+import { getCurrentDocIdFromUrl } from '@affine-test/kit/utils/url';
+import { expect } from '@playwright/test';
+
+import { expandCollapsibleSection, pageBack } from './utils';
+
+test('Create new doc in favorites', async ({ page }) => {
+  const section = await expandCollapsibleSection(page, 'favorites');
+  const newButton = section.getByTestId('explorer-bar-add-favorite-button');
+  await newButton.tap();
+
+  // const testTitleText = 'Test Favorited Doc';
+  const title = getBlockSuiteEditorTitle(page);
+  await expect(title).toBeVisible();
+  // TODO(@CatsJuice): Mobile editor is not ready yet
+  // await title.fill(testTitleText);
+  const docId = getCurrentDocIdFromUrl(page);
+
+  await pageBack(page);
+  const section2 = await expandCollapsibleSection(page, 'favorites');
+  const node = section2.getByTestId(`explorer-doc-${docId}`);
+  await expect(node).toBeVisible();
+
+  // const label = node.getByText(testTitleText);
+  // await expect(label).toBeVisible();
+});

tests/affine-mobile/e2e/utils.ts

@@ -13,3 +13,10 @@ export async function expandCollapsibleSection(page: Page, name: string) {
   await expect(section).toBeVisible();
   return section;
 }
+
+/**
+ * Click header "<" button
+ */
+export async function pageBack(page: Page) {
+  await page.getByTestId('page-header-back').tap();
+}