feat(component): init app sidebar (#2135)

apps/web/src/components/blocksuite/workspace-header/header.tsx

@@ -1,7 +1,9 @@
+import { appSidebarOpenAtom } from '@affine/component/app-sidebar';
 import { useTranslation } from '@affine/i18n';
 import { WorkspaceFlavour } from '@affine/workspace/type';
 import { CloseIcon } from '@blocksuite/icons';
 import type { Page } from '@blocksuite/store';
+import { useAtom } from 'jotai';
 import type { FC, HTMLAttributes, PropsWithChildren } from 'react';
 import {
   forwardRef,
@@ -12,10 +14,6 @@ import {
   useState,
 } from 'react';
 
-import {
-  useSidebarFloating,
-  useSidebarStatus,
-} from '../../../hooks/use-sidebar-status';
 import type { AffineOfficialWorkspace } from '../../../shared';
 import { EditorOptionMenu } from './header-right-items/EditorOptionMenu';
 import EditPage from './header-right-items/EditPage';
@@ -142,17 +140,11 @@ export const Header = forwardRef<
   useEffect(() => {
     setShowWarning(shouldShowWarning());
   }, []);
-  const [open] = useSidebarStatus();
-  const sidebarFloating = useSidebarFloating();
+  const [open] = useAtom(appSidebarOpenAtom);
   const { t } = useTranslation();
 
   return (
-    <StyledHeaderContainer
-      sidebarFloating={sidebarFloating && open}
-      ref={ref}
-      hasWarning={showWarning}
-      {...props}
-    >
+    <StyledHeaderContainer ref={ref} hasWarning={showWarning} {...props}>
       <BrowserWarning
         show={showWarning}
         onClose={() => {

apps/web/src/components/blocksuite/workspace-header/styles.ts

@@ -7,8 +7,7 @@ import {
 
 export const StyledHeaderContainer = styled('div')<{
   hasWarning: boolean;
-  sidebarFloating: boolean;
-}>(({ theme, hasWarning, sidebarFloating }) => {
+}>(({ hasWarning }) => {
   return {
     height: hasWarning ? '96px' : '52px',
     flexShrink: 0,
@@ -16,10 +15,6 @@ export const StyledHeaderContainer = styled('div')<{
     top: 0,
     background: 'var(--affine-background-primary-color)',
     zIndex: 1,
-    WebkitAppRegion: sidebarFloating ? '' : 'drag',
-    button: {
-      WebkitAppRegion: 'no-drag',
-    },
   };
 });
 export const StyledHeader = styled('div')<{ hasWarning: boolean }>(