feat(core): split right sidebar (#5971)

https://github.com/toeverything/AFFiNE/assets/13579374/c846c069-aa32-445d-b59b-b773a9b05ced

Now each view has a general container, the yellow area is the general container part, and the green part is the routing specific part.

![CleanShot 2024-03-01 at 11.47.35@2x.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/g3jz87HxbjOJpXV3FPT7/9a9f6ad6-2207-42e5-ae66-f7426bc9f3fc.png)

packages/frontend/core/src/components/blocksuite/block-suite-editor/blocksuite-editor-container.tsx

@@ -10,6 +10,7 @@ import clsx from 'clsx';
 import type React from 'react';
 import {
   forwardRef,
+  type RefObject,
   useEffect,
   useLayoutEffect,
   useMemo,
@@ -62,7 +63,7 @@ function findBlockElementById(container: HTMLElement, blockId: string) {
 // a workaround for returning the webcomponent for the given block id
 // by iterating over the children of the rendered dom tree
 const useBlockElementById = (
-  container: HTMLElement | null,
+  containerRef: RefObject<HTMLElement | null>,
   blockId: string | undefined,
   timeout = 1000
 ) => {
@@ -74,10 +75,10 @@ const useBlockElementById = (
     let canceled = false;
     const start = Date.now();
     function run() {
-      if (canceled || !container || !blockId) {
+      if (canceled || !containerRef.current || !blockId) {
         return;
       }
-      const element = findBlockElementById(container, blockId);
+      const element = findBlockElementById(containerRef.current, blockId);
       if (element) {
         setBlockElement(element);
       } else if (Date.now() - start < timeout) {
@@ -88,7 +89,7 @@ const useBlockElementById = (
     return () => {
       canceled = true;
     };
-  }, [container, blockId, timeout]);
+  }, [blockId, containerRef, timeout]);
   return blockElement;
 };
 
@@ -200,10 +201,7 @@ export const BlocksuiteEditorContainer = forwardRef<
     }
   }, [affineEditorContainerProxy, ref]);
 
-  const blockElement = useBlockElementById(
-    rootRef.current,
-    defaultSelectedBlockId
-  );
+  const blockElement = useBlockElementById(rootRef, defaultSelectedBlockId);
 
   useEffect(() => {
     if (blockElement) {

packages/frontend/core/src/components/blocksuite/block-suite-header/title/style.css.ts

@@ -3,4 +3,10 @@ import { style } from '@vanilla-extract/css';
 export const title = style({
   fontWeight: 500,
   color: cssVar('textPrimaryColor'),
+  selectors: {
+    '&[data-editing="true"]': {
+      ['WebkitAppRegion' as string]: 'no-drag',
+      flexGrow: 1,
+    },
+  },
 });

packages/frontend/core/src/components/page-detail-editor.tsx

@@ -1,6 +1,5 @@
 import './page-detail-editor.css';
 
-import { useActiveBlocksuiteEditor } from '@affine/core/hooks/use-block-suite-editor';
 import { useBlockSuiteWorkspacePage } from '@affine/core/hooks/use-block-suite-workspace-page';
 import { assertExists, DisposableGroup } from '@blocksuite/global/utils';
 import type { AffineEditorContainer } from '@blocksuite/presets';
@@ -70,14 +69,12 @@ const PageDetailEditorMain = memo(function PageDetailEditorMain({
     return fontStyle.value;
   }, [appSettings.fontStyle]);
 
-  const [, setActiveBlocksuiteEditor] = useActiveBlocksuiteEditor();
   const blockId = useRouterHash();
 
   const onLoadEditor = useCallback(
     (editor: AffineEditorContainer) => {
       // debug current detail editor
       globalThis.currentEditor = editor;
-      setActiveBlocksuiteEditor(editor);
       const disposableGroup = new DisposableGroup();
       disposableGroup.add(
         page.slots.blockUpdated.once(() => {
@@ -99,10 +96,9 @@ const PageDetailEditorMain = memo(function PageDetailEditorMain({
 
       return () => {
         disposableGroup.dispose();
-        setActiveBlocksuiteEditor(null);
       };
     },
-    [onLoad, page, setActiveBlocksuiteEditor]
+    [onLoad, page]
   );
 
   return (

packages/frontend/core/src/components/page-list/docs/page-list-item.tsx

@@ -1,9 +1,8 @@
 import { Checkbox } from '@affine/component';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { useDraggable } from '@dnd-kit/core';
 import { type PropsWithChildren, useCallback, useMemo } from 'react';
 
-import { WorkbenchLink } from '../../../modules/workbench/workbench-link';
+import { WorkbenchLink } from '../../../modules/workbench/view/workbench-link';
 import type { DraggableTitleCellData, PageListItemProps } from '../types';
 import { ColWrapper, formatDate, stopPropagation } from '../utils';
 import * as styles from './page-list-item.css';
@@ -13,14 +12,13 @@ const ListTitleCell = ({
   title,
   preview,
 }: Pick<PageListItemProps, 'title' | 'preview'>) => {
-  const t = useAFFiNEI18N();
   return (
     <div data-testid="page-list-item-title" className={styles.titleCell}>
       <div
         data-testid="page-list-item-title-text"
         className={styles.titleCellMain}
       >
-        {title || t['Untitled']()}
+        {title}
       </div>
       {preview ? (
         <div

packages/frontend/core/src/components/page-list/page-group.tsx

@@ -1,4 +1,3 @@
-import { useBlockSuiteWorkspacePageTitle } from '@affine/core/hooks/use-block-suite-workspace-page-title';
 import { useJournalInfoHelper } from '@affine/core/hooks/use-journal';
 import type { Tag } from '@affine/env/filter';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
@@ -12,6 +11,9 @@ import {
 } from '@blocksuite/icons';
 import type { DocMeta, Workspace } from '@blocksuite/store';
 import * as Collapsible from '@radix-ui/react-collapsible';
+import { useService } from '@toeverything/infra';
+import { useLiveData } from '@toeverything/infra';
+import { PageRecordList } from '@toeverything/infra';
 import clsx from 'clsx';
 import { selectAtom } from 'jotai/utils';
 import { type MouseEventHandler, useCallback, useMemo, useState } from 'react';
@@ -271,9 +273,15 @@ function tagIdToTagOption(
   );
 }
 
-const PageTitle = ({ id, workspace }: { id: string; workspace: Workspace }) => {
-  const title = useBlockSuiteWorkspacePageTitle(workspace, id);
-  return title;
+const PageTitle = ({ id }: { id: string }) => {
+  const page = useLiveData(
+    useService(PageRecordList).records.map(record => {
+      return record.find(p => p.id === id);
+    })
+  );
+  const title = useLiveData(page?.title);
+  const t = useAFFiNEI18N();
+  return title || t['Untitled']();
 };
 
 const UnifiedPageIcon = ({
@@ -315,7 +323,7 @@ function pageMetaToListItemProp(
     : undefined;
   const itemProps: PageListItemProps = {
     pageId: item.id,
-    title: <PageTitle id={item.id} workspace={props.blockSuiteWorkspace} />,
+    title: <PageTitle id={item.id} />,
     preview: (
       <PagePreview workspace={props.blockSuiteWorkspace} pageId={item.id} />
     ),

packages/frontend/core/src/components/pure/header/index.tsx

@@ -1,13 +1,10 @@
 import {
   appSidebarFloatingAtom,
   appSidebarOpenAtom,
-  SidebarSwitch,
 } from '@affine/component/app-sidebar';
-import { useIsTinyScreen } from '@affine/core/hooks/use-is-tiny-screen';
 import clsx from 'clsx';
 import { useAtomValue } from 'jotai';
 import type { ReactNode } from 'react';
-import { useCallback, useRef, useState } from 'react';
 
 import * as style from './style.css';
 
@@ -16,86 +13,35 @@ interface HeaderPros {
   right?: ReactNode;
   center?: ReactNode;
   bottomBorder?: boolean;
-  isFloat?: boolean;
 }
 
 // The Header component is used to solve the following problems
 // 1. Manage layout issues independently of page or business logic
 // 2. Dynamic centered middle element (relative to the main-container), when the middle element is detected to collide with the two elements, the line wrapping process is performed
-export const Header = ({
-  left,
-  center,
-  right,
-  bottomBorder,
-  isFloat,
-}: HeaderPros) => {
-  const sidebarSwitchRef = useRef<HTMLDivElement | null>(null);
-  const leftSlotRef = useRef<HTMLDivElement | null>(null);
-  const centerSlotRef = useRef<HTMLDivElement | null>(null);
-  const rightSlotRef = useRef<HTMLDivElement | null>(null);
-
-  const [headerRoot, setHeaderRoot] = useState<HTMLDivElement | null>(null);
-
-  const onSetHeaderRoot = useCallback((node: HTMLDivElement | null) => {
-    setHeaderRoot(node);
-  }, []);
-
-  const isTinyScreen = useIsTinyScreen({
-    container: headerRoot,
-    leftStatic: sidebarSwitchRef,
-    leftSlot: [leftSlotRef],
-    centerDom: centerSlotRef,
-    rightSlot: [rightSlotRef],
-  });
-
+export const Header = ({ left, center, right }: HeaderPros) => {
   const open = useAtomValue(appSidebarOpenAtom);
   const appSidebarFloating = useAtomValue(appSidebarFloatingAtom);
   return (
     <div
-      className={clsx(style.header, bottomBorder && style.bottomBorder, {
-        [style.headerFloat]: isFloat,
-      })}
+      className={clsx(style.header)}
       data-open={open}
       data-sidebar-floating={appSidebarFloating}
       data-testid="header"
-      ref={onSetHeaderRoot}
     >
-      <div
-        className={clsx(style.headerSideContainer, {
-          block: isTinyScreen,
-        })}
-      >
-        <div
-          className={clsx(
-            style.headerItem,
-            'top-item',
-            !open ? 'top-item-visible' : ''
-          )}
-        >
-          <div ref={sidebarSwitchRef}>
-            <SidebarSwitch show={!open} />
-          </div>
-        </div>
+      <div className={clsx(style.headerSideContainer)}>
         <div className={clsx(style.headerItem, 'left')}>
-          <div ref={leftSlotRef}>{left}</div>
+          <div>{left}</div>
         </div>
       </div>
       <div
         className={clsx({
           [style.headerCenter]: center,
         })}
-        ref={centerSlotRef}
       >
         {center}
       </div>
-      <div
-        className={clsx(style.headerSideContainer, 'right', {
-          block: isTinyScreen,
-        })}
-      >
-        <div ref={rightSlotRef} className={clsx(style.headerItem, 'right')}>
-          {right}
-        </div>
+      <div className={clsx(style.headerSideContainer, 'right')}>
+        <div className={clsx(style.headerItem, 'right')}>{right}</div>
       </div>
     </div>
   );

packages/frontend/core/src/components/pure/header/style.css.tsx

@@ -3,48 +3,23 @@ import { style } from '@vanilla-extract/css';
 
 export const header = style({
   display: 'flex',
+  flex: 1,
   justifyContent: 'space-between',
   position: 'relative',
-  padding: '0 16px',
-  minHeight: '52px',
-  background: 'var(--affine-background-primary-color)',
   zIndex: 2,
-  selectors: {
-    '&[data-sidebar-floating="false"]': {
-      WebkitAppRegion: 'drag',
-    },
-  },
   '@media': {
     print: {
       display: 'none',
     },
   },
-  ':has([data-popper-placement])': {
-    WebkitAppRegion: 'no-drag',
-  },
 } as ComplexStyleRule);
 
-export const headerFloat = style({
-  position: 'absolute',
-  width: '100%',
-});
-
-export const bottomBorder = style({
-  borderBottom: '1px solid var(--affine-border-color)',
-});
-
 export const headerItem = style({
   minHeight: '32px',
   display: 'flex',
   alignItems: 'center',
   flexShrink: 0,
   selectors: {
-    '&.top-item': {
-      height: '52px',
-    },
-    '&.top-item-visible': {
-      marginRight: '20px',
-    },
     '&.left': {
       justifyContent: 'left',
     },
@@ -66,12 +41,6 @@ export const headerCenter = style({
   transform: 'translateX(-50%)',
   left: '50%',
   zIndex: 1,
-  selectors: {
-    '&.shadow': {
-      position: 'static',
-      visibility: 'hidden',
-    },
-  },
 });
 
 export const headerSideContainer = style({
@@ -82,10 +51,6 @@ export const headerSideContainer = style({
     '&.right': {
       flexDirection: 'row-reverse',
     },
-    '&.block': {
-      display: 'block',
-      paddingBottom: '10px',
-    },
   },
 });
 

packages/frontend/core/src/components/pure/workspace-slider-bar/collections/collections-list.tsx

@@ -22,7 +22,7 @@ import { useAllPageListConfig } from '../../../../hooks/affine/use-all-page-list
 import { getDropItemId } from '../../../../hooks/affine/use-sidebar-drag';
 import { useBlockSuiteDocMeta } from '../../../../hooks/use-block-suite-page-meta';
 import { Workbench } from '../../../../modules/workbench';
-import { WorkbenchLink } from '../../../../modules/workbench/workbench-link';
+import { WorkbenchLink } from '../../../../modules/workbench/view/workbench-link';
 import type { CollectionsListProps } from '../index';
 import { Page } from './page';
 import * as styles from './styles.css';