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/pages/workspace/detail-page/detail-page.css.ts

@@ -2,6 +2,7 @@ import { cssVar } from '@toeverything/theme';
 import { style } from '@vanilla-extract/css';
 
 export const mainContainer = style({
+  containerType: 'inline-size',
   display: 'flex',
   flexDirection: 'column',
   flex: 1,

packages/frontend/core/src/pages/workspace/detail-page/detail-page.tsx

@@ -3,6 +3,7 @@ import { PageDetailSkeleton } from '@affine/component/page-detail-skeleton';
 import type { ChatPanel } from '@affine/core/blocksuite/presets/ai';
 import { AIProvider } from '@affine/core/blocksuite/presets/ai';
 import { PageAIOnboarding } from '@affine/core/components/affine/ai-onboarding';
+import { EditorOutlineViewer } from '@affine/core/components/blocksuite/outline-viewer';
 import { useAppSettingHelper } from '@affine/core/hooks/affine/use-app-setting-helper';
 import { useDocMetaHelper } from '@affine/core/hooks/use-block-suite-page-meta';
 import { RecentDocsService } from '@affine/core/modules/quicksearch';
@@ -64,7 +65,6 @@ import { performanceRenderLogger } from '../../../shared';
 import { PageNotFound } from '../../404';
 import * as styles from './detail-page.css';
 import { DetailPageHeader } from './detail-page-header';
-import { EditorOutlineViewer } from './outline-viewer';
 import { EditorChatPanel } from './tabs/chat';
 import { EditorFramePanel } from './tabs/frame';
 import { EditorJournalPanel } from './tabs/journal';
@@ -83,6 +83,7 @@ const DetailPageImpl = memo(function DetailPageImpl() {
   const globalContext = useService(GlobalContextService).globalContext;
   const docCollection = workspace.docCollection;
   const mode = useLiveData(doc.mode$);
+  const isSideBarOpen = useLiveData(workbench.sidebarOpen$);
   const { appSettings } = useAppSettingHelper();
   const chatPanelRef = useRef<ChatPanel | null>(null);
   const { setDocReadonly } = useDocMetaHelper(workspace.docCollection);
@@ -226,14 +227,14 @@ const DetailPageImpl = memo(function DetailPageImpl() {
     [jumpToPageBlock, docCollection.id, openPage, jumpToTag, workspace.id]
   );
 
+  const [refCallback, hasScrollTop] = useHasScrollTop();
+  const dynamicTopBorder = environment.isDesktop;
+
   const openOutlinePanel = useCallback(() => {
     workbench.openSidebar();
     view.activeSidebarTab('outline');
   }, [workbench, view]);
 
-  const [refCallback, hasScrollTop] = useHasScrollTop();
-  const dynamicTopBorder = environment.isDesktop;
-
   return (
     <>
       <ViewHeader>
@@ -269,15 +270,16 @@ const DetailPageImpl = memo(function DetailPageImpl() {
                 })}
               />
             </Scrollable.Root>
+            {appSettings.enableOutlineViewer && (
+              <EditorOutlineViewer
+                editor={editor}
+                show={mode === 'page' && !isSideBarOpen}
+                openOutlinePanel={openOutlinePanel}
+              />
+            )}
           </AffineErrorBoundary>
           {isInTrash ? <TrashPageFooter /> : null}
         </div>
-        {appSettings.enableOutlineViewer && (
-          <EditorOutlineViewer
-            editor={editor}
-            toggleOutlinePanel={openOutlinePanel}
-          />
-        )}
       </ViewBody>
 
       <ViewSidebarTab tabId="chat" icon={<AiIcon />} unmountOnInactive={false}>

packages/frontend/core/src/pages/workspace/detail-page/outline-viewer.css.ts

@@ -1,8 +0,0 @@
-import { style } from '@vanilla-extract/css';
-
-export const root = style({
-  position: 'fixed',
-  top: 256,
-  right: 22,
-  maxHeight: 'calc(100% - 16px)',
-});

packages/frontend/core/src/pages/workspace/detail-page/outline-viewer.tsx

@@ -1,39 +0,0 @@
-import type { AffineEditorContainer } from '@blocksuite/presets';
-import { OutlineViewer } from '@blocksuite/presets';
-import { useCallback, useRef } from 'react';
-
-import * as styles from './outline-viewer.css';
-
-export const EditorOutlineViewer = ({
-  editor,
-  toggleOutlinePanel,
-}: {
-  editor: AffineEditorContainer | null;
-  toggleOutlinePanel: () => void;
-}) => {
-  const outlineViewerRef = useRef<OutlineViewer | null>(null);
-
-  const onRefChange = useCallback((container: HTMLDivElement | null) => {
-    if (container) {
-      if (outlineViewerRef.current === null) {
-        console.error('outline viewer should be initialized');
-        return;
-      }
-
-      container.append(outlineViewerRef.current);
-    }
-  }, []);
-
-  if (!editor) {
-    return;
-  }
-
-  if (!outlineViewerRef.current) {
-    outlineViewerRef.current = new OutlineViewer();
-    (outlineViewerRef.current as OutlineViewer).editor = editor;
-    (outlineViewerRef.current as OutlineViewer).toggleOutlinePanel =
-      toggleOutlinePanel;
-  }
-
-  return <div className={styles.root} ref={onRefChange} />;
-};