Merge branch 'feat/workspace' into feat/dev

# Conflicts:
#	packages/app/src/components/header/page-header.tsx
#	packages/app/src/components/workspace-slider-bar/index.tsx

packages/app/src/components/header/header.tsx

@@ -16,13 +16,16 @@ import {
 } from '@blocksuite/icons';
 import { useEditor } from '@/providers/editor-provider';
 import ThemeModeSwitch from '@/components/theme-mode-switch';
-import { IconButton } from '@/ui/button';
+import { IconButton, Button } from '@/ui/button';
 import CloseIcon from '@mui/icons-material/Close';
 import { getWarningMessage, shouldShowWarning } from './utils';
 import { Menu, MenuItem } from '@/ui/menu';
+import { useRouter } from 'next/router';
+import { useConfirm } from '@/providers/confirm-provider';
 
 const PopoverContent = () => {
   const { editor, mode, setMode } = useEditor();
+
   return (
     <>
       <MenuItem
@@ -81,9 +84,71 @@ const BrowserWarning = ({
   );
 };
 
-export const Header = ({ children }: PropsWithChildren<{}>) => {
-  const [showWarning, setShowWarning] = useState(shouldShowWarning());
+const HeaderRight = () => {
+  const { pageList, toggleDeletePage, permanentlyDeletePage } = useEditor();
+  const { confirm } = useConfirm();
+  const router = useRouter();
+  const currentPageMeta = pageList.find(p => p.id === router.query.pageId);
+  const isTrash = !!currentPageMeta?.trash;
 
+  if (isTrash) {
+    const { id } = currentPageMeta;
+    return (
+      <>
+        <Button
+          bold={true}
+          shape="round"
+          style={{ marginRight: '24px' }}
+          onClick={() => {
+            toggleDeletePage(id);
+          }}
+        >
+          Restore it
+        </Button>
+        <Button
+          bold={true}
+          shape="round"
+          type="danger"
+          onClick={() => {
+            confirm({
+              title: 'Permanently delete',
+              content:
+                "Once deleted, you can't undo this action. Do you confirm?",
+              confirmText: 'Delete',
+              confirmType: 'danger',
+            }).then(confirm => {
+              if (confirm) {
+                router.push({ pathname: '/page-list/all' });
+                permanentlyDeletePage(id);
+              }
+            });
+          }}
+        >
+          Delete permanently
+        </Button>
+      </>
+    );
+  }
+  return (
+    <>
+      <ThemeModeSwitch />
+      <Menu content={<PopoverContent />} placement="bottom-end">
+        <IconButton>
+          <MoreVertical_24pxIcon />
+        </IconButton>
+      </Menu>
+    </>
+  );
+};
+
+export const Header = ({ children }: PropsWithChildren<{}>) => {
+  const { pageList } = useEditor();
+
+  const [showWarning, setShowWarning] = useState(shouldShowWarning());
+  const router = useRouter();
+  const currentPageMeta = pageList.find(p => p.id === router.query.pageId);
+  const isTrash = !!currentPageMeta?.trash;
+  console.log('isTrash', isTrash);
   return (
     <StyledHeaderContainer hasWarning={showWarning}>
       <BrowserWarning
@@ -95,12 +160,7 @@ export const Header = ({ children }: PropsWithChildren<{}>) => {
       <StyledHeader hasWarning={showWarning}>
         {children}
         <StyledHeaderRightSide>
-          <ThemeModeSwitch />
-          <Menu content={<PopoverContent />} placement="bottom-end">
-            <IconButton>
-              <MoreVertical_24pxIcon />
-            </IconButton>
-          </Menu>
+          <HeaderRight />
         </StyledHeaderRightSide>
       </StyledHeader>
     </StyledHeaderContainer>

packages/app/src/components/header/page-header.tsx

@@ -1,14 +1,21 @@
 import React, { useEffect, useState } from 'react';
-import { StyledTitle, StyledTitleWrapper } from './styles';
+import {
+  StyledSearchArrowWrapper,
+  StyledSwitchWrapper,
+  StyledTitle,
+  StyledTitleWrapper,
+} from './styles';
+import { IconButton } from '@/ui/button';
+import { Content } from '@/ui/layout';
 import { useEditor } from '@/providers/editor-provider';
 import EditorModeSwitch from '@/components/editor-mode-switch';
 import { MiddleIconArrowDownSmallIcon } from '@blocksuite/icons';
 import { useModal } from '@/providers/global-modal-provider';
-import IconButton from '@/ui/button/icon-button';
+
 import Header from './header';
 
 export const PageHeader = () => {
-  const [title, setTitle] = useState('');
+  const [title, setTitle] = useState('Untitled');
   const [isHover, setIsHover] = useState(false);
 
   const { editor } = useEditor();
@@ -24,35 +31,35 @@ export const PageHeader = () => {
 
   return (
     <Header>
-      {title ? (
-        <StyledTitle
-          onMouseEnter={() => {
-            setIsHover(true);
-          }}
-          onMouseLeave={() => {
-            setIsHover(false);
-          }}
-        >
-          <EditorModeSwitch
-            isHover={isHover}
-            style={{
-              marginRight: '12px',
-            }}
-          />
-          <StyledTitleWrapper>{title}</StyledTitleWrapper>
-          <IconButton
-            style={{
-              marginLeft: '6px',
-            }}
-          >
-            <MiddleIconArrowDownSmallIcon
+      <StyledTitle
+        onMouseEnter={() => {
+          setIsHover(true);
+        }}
+        onMouseLeave={() => {
+          setIsHover(false);
+        }}
+      >
+        <StyledTitleWrapper>
+          <StyledSwitchWrapper>
+            <EditorModeSwitch
+              isHover={isHover}
+              style={{
+                marginRight: '12px',
+              }}
+            />
+          </StyledSwitchWrapper>
+          <Content ellipsis={true}>{title}</Content>
+          <StyledSearchArrowWrapper>
+            <IconButton
               onClick={() => {
                 triggerQuickSearchModal(true);
               }}
-            />
-          </IconButton>
-        </StyledTitle>
-      ) : null}
+            >
+              <MiddleIconArrowDownSmallIcon />
+            </IconButton>
+          </StyledSearchArrowWrapper>
+        </StyledTitleWrapper>
+      </StyledTitle>
     </Header>
   );
 };

packages/app/src/components/header/styles.ts

@@ -40,10 +40,9 @@ export const StyledTitle = styled('div')(({ theme }) => ({
 
 export const StyledTitleWrapper = styled('div')({
   maxWidth: '720px',
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap',
+  height: '100%',
   position: 'relative',
+  ...displayFlex('center', 'center'),
 });
 
 export const StyledHeaderRightSide = styled('div')({
@@ -89,3 +88,25 @@ export const StyledCloseButton = styled.div(({ theme }) => {
     },
   };
 });
+
+export const StyledSwitchWrapper = styled.div(() => {
+  return {
+    position: 'absolute',
+    right: '100%',
+    top: 0,
+    bottom: 0,
+    margin: 'auto',
+    ...displayFlex('center', 'center'),
+  };
+});
+
+export const StyledSearchArrowWrapper = styled.div(() => {
+  return {
+    position: 'absolute',
+    left: 'calc(100% + 4px)',
+    top: 0,
+    bottom: 0,
+    margin: 'auto',
+    ...displayFlex('center', 'center'),
+  };
+});