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/component/src/components/app-sidebar/sidebar-header/sidebar-switch.tsx

@@ -1,5 +1,6 @@
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { SidebarIcon } from '@blocksuite/icons';
+import clsx from 'clsx';
 import { useAtom } from 'jotai';
 
 import { IconButton } from '../../../ui/button';
@@ -7,7 +8,13 @@ import { Tooltip } from '../../../ui/tooltip';
 import { appSidebarOpenAtom } from '../index.jotai';
 import * as styles from './sidebar-switch.css';
 
-export const SidebarSwitch = ({ show }: { show: boolean }) => {
+export const SidebarSwitch = ({
+  show = true,
+  className,
+}: {
+  show?: boolean;
+  className?: string;
+}) => {
   const [open, setOpen] = useAtom(appSidebarOpenAtom);
   const t = useAFFiNEI18N();
   const tooltipContent = open
@@ -22,7 +29,7 @@ export const SidebarSwitch = ({ show }: { show: boolean }) => {
       side={open ? 'bottom' : 'right'}
     >
       <IconButton
-        className={styles.sidebarSwitch}
+        className={clsx(styles.sidebarSwitch, className)}
         data-show={show}
         size="large"
         data-testid={`app-sidebar-arrow-button-${open ? 'collapse' : 'expand'}`}

packages/frontend/component/src/components/not-found-page/styles.css.ts

@@ -3,11 +3,11 @@ import { style } from '@vanilla-extract/css';
 export const notFoundPageContainer = style({
   fontSize: cssVar('fontBase'),
   color: cssVar('textPrimaryColor'),
-  height: '100vh',
+  height: '100%',
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
-  width: '100vw',
+  width: '100%',
   padding: '0 20px',
 });
 export const wrapper = style({

packages/frontend/component/src/components/resize-panel/resize-panel.css.ts

@@ -13,7 +13,7 @@ export const root = style({
   },
   position: 'relative',
   width: panelWidthVar,
-  minWidth: 0,
+  minWidth: panelWidthVar,
   height: '100%',
   selectors: {
     '&[data-is-floating="true"]': {

packages/frontend/component/src/components/workspace/index.css.ts

@@ -48,13 +48,12 @@ export const mainContainerStyle = style({
   zIndex: 0,
   // it will create stacking context to limit layer of child elements and be lower than after auto zIndex
   width: 0,
+  display: 'flex',
   flex: 1,
   maxWidth: '100%',
-  backgroundColor: cssVar('backgroundPrimaryColor'),
   selectors: {
     '&[data-show-padding="true"]': {
       margin: '8px',
-      borderRadius: '5px',
       overflow: 'hidden',
       // todo: is this performance intensive?
       filter: 'drop-shadow(0px 0px 4px rgba(66,65,73,.14))',
@@ -66,9 +65,6 @@ export const mainContainerStyle = style({
         },
       },
     },
-    '&[data-show-padding="true"][data-is-macos="true"]': {
-      borderRadius: '6px',
-    },
     '&[data-show-padding="true"]:before': {
       content: '""',
       position: 'absolute',