fix(core): update outline viewer style (#7641)

## What changes
- Update responsive style and fix some bug of outline viewer (https://github.com/toeverything/blocksuite/pull/7759)
- Change left and right padding of full-width editor from `15px` to `72px`
- Hide outline viewer when side outline panel is opened ([BS-987](https://linear.app/affine-design/issue/BS-987/逻辑-bug-toc-入口和-toc-侧边栏共存))
- Add entries of outline panel and frame panel in more menu of detail page header ( [BS-996](https://linear.app/affine-design/issue/BS-996/page-mode-下的-page-option-缺少-view-table-of-contents-的入口) , [BS-1006](https://linear.app/affine-design/issue/BS-1006/edgeless-mode-的-page-options-里缺少-view-all-frames))
- Add outline viewer to dock peek preview ( [BS-995](https://linear.app/affine-design/issue/BS-995/center-peek-里缺少-quick-toc-的入口) )
- Add more e2e tests for outline viewer

packages/frontend/core/src/modules/peek-view/view/doc-preview/doc-peek-view.css.ts

@@ -1,6 +1,10 @@
 import { cssVar } from '@toeverything/theme';
 import { style } from '@vanilla-extract/css';
 
+export const root = style({
+  containerType: 'inline-size',
+});
+
 export const editor = style({
   vars: {
     '--affine-editor-width': '100%',

packages/frontend/core/src/modules/peek-view/view/doc-preview/doc-peek-view.tsx

@@ -3,6 +3,8 @@ import { PageDetailSkeleton } from '@affine/component/page-detail-skeleton';
 import { AIProvider } from '@affine/core/blocksuite/presets/ai';
 import { AffineErrorBoundary } from '@affine/core/components/affine/affine-error-boundary';
 import { BlockSuiteEditor } from '@affine/core/components/blocksuite/block-suite-editor';
+import { EditorOutlineViewer } from '@affine/core/components/blocksuite/outline-viewer';
+import { useAppSettingHelper } from '@affine/core/hooks/affine/use-app-setting-helper';
 import { useNavigateHelper } from '@affine/core/hooks/use-navigate-helper';
 import { PageNotFound } from '@affine/core/pages/404';
 import { DebugLogger } from '@affine/debug';
@@ -12,7 +14,7 @@ import type { AffineEditorContainer } from '@blocksuite/presets';
 import type { DocMode } from '@toeverything/infra';
 import { DocsService, FrameworkScope, useService } from '@toeverything/infra';
 import clsx from 'clsx';
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 
 import { WorkbenchService } from '../../../workbench';
 import { PeekViewService } from '../../services/peek-view';
@@ -73,6 +75,7 @@ export function DocPeekPreview({
   const workbench = useService(WorkbenchService).workbench;
   const peekView = useService(PeekViewService).peekView;
   const [editor, setEditor] = useState<AffineEditorContainer | null>(null);
+  const { appSettings } = useAppSettingHelper();
 
   const onRef = (editor: AffineEditorContainer) => {
     setEditor(editor);
@@ -143,6 +146,13 @@ export function DocPeekPreview({
     };
   }, [editor, jumpToTag, peekView, workspace.id]);
 
+  const openOutlinePanel = useCallback(() => {
+    workbench.openDoc(docId);
+    workbench.openSidebar();
+    workbench.activeView$.value.activeSidebarTab('outline');
+    peekView.close();
+  }, [docId, peekView, workbench]);
+
   // if sync engine has been synced and the page is null, show 404 page.
   if (!doc || !resolvedMode) {
     return loading || !resolvedMode ? (
@@ -167,7 +177,15 @@ export function DocPeekPreview({
               page={doc.blockSuiteDoc}
             />
           </FrameworkScope>
+          {appSettings.enableOutlineViewer && (
+            <EditorOutlineViewer
+              editor={editor}
+              show={resolvedMode === 'page'}
+              openOutlinePanel={openOutlinePanel}
+            />
+          )}
         </Scrollable.Viewport>
+
         <Scrollable.Scrollbar />
       </Scrollable.Root>
     </AffineErrorBoundary>