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/workspace-slider-bar/index.tsx

@@ -8,14 +8,51 @@ import {
   StyledSubListItem,
 } from './style';
 import { Arrow } from './icons';
+import Collapse from '@mui/material/Collapse';
+import { MiddleIconArrowDownSmallIcon } from '@blocksuite/icons';
 import Link from 'next/link';
 import { useEditor } from '@/providers/editor-provider';
 import { useModal } from '@/providers/global-modal-provider';
+
+import { IconButton } from '@/ui/button';
+
+const FavoriteList = ({ showList }: { showList: boolean }) => {
+  const { pageList, openPage } = useEditor();
+  const router = useRouter();
+
+  const favoriteList = pageList.filter(p => p.favorite);
+  return (
+    <Collapse in={showList}>
+      {favoriteList.map((pageMeta, index) => {
+        const active = router.query.pageId === pageMeta.id;
+        return (
+          <StyledSubListItem
+            active={active}
+            key={`${pageMeta}-${index}`}
+            onClick={() => {
+              if (active) {
+                return;
+              }
+              openPage(pageMeta.id);
+            }}
+          >
+            {pageMeta.title || pageMeta.id}
+          </StyledSubListItem>
+        );
+      })}
+      {favoriteList.length === 0 && (
+        <StyledSubListItem disable={true}>No item</StyledSubListItem>
+      )}
+    </Collapse>
+  );
+};
 export const WorkSpaceSliderBar = () => {
   const { triggerQuickSearchModal } = useModal();
   const [show, setShow] = useState(false);
+  const [showSubFavorite, setShowSubFavorite] = useState(false);
   const { createPage } = useEditor();
   const router = useRouter();
+
   return (
     <>
       <StyledSliderBar show={show}>
@@ -38,18 +75,40 @@ export const WorkSpaceSliderBar = () => {
         >
           Back to Doc
         </StyledListItem>
-        <Link href={{ pathname: '/all-page', query: { name: 'test' } }}>
-          <StyledListItem>All pages</StyledListItem>
+        <Link href={{ pathname: '/page-list/all' }}>
+          <StyledListItem active={router.pathname === '/page-list/all'}>
+            All pages
+          </StyledListItem>
         </Link>
-        <StyledListItem>Favourites</StyledListItem>
-        <StyledSubListItem>
-          document 1, this is a paper icondocument 1
-        </StyledSubListItem>
-        <StyledSubListItem>document 2</StyledSubListItem>
-        <StyledSubListItem>document 4</StyledSubListItem>
-        <StyledListItem>Import</StyledListItem>
-        <StyledListItem>Bin</StyledListItem>
+        <StyledListItem active={router.pathname === '/page-list/favorite'}>
+          <Link
+            href={{ pathname: '/page-list/favorite' }}
+            style={{ flexGrow: 1, textAlign: 'left', color: 'inherit' }}
+          >
+            Favourites
+          </Link>
+          <IconButton
+            hoverBackground="#E0E6FF"
+            onClick={() => {
+              setShowSubFavorite(!showSubFavorite);
+            }}
+          >
+            <MiddleIconArrowDownSmallIcon
+              style={{
+                transform: `rotate(${showSubFavorite ? '180' : '0'}deg)`,
+              }}
+            />
+          </IconButton>
+        </StyledListItem>
+        <FavoriteList showList={showSubFavorite} />
 
+        <StyledListItem>Import</StyledListItem>
+
+        <Link href={{ pathname: '/page-list/trash' }}>
+          <StyledListItem active={router.pathname === '/page-list/trash'}>
+            Trash
+          </StyledListItem>
+        </Link>
         <StyledNewPageButton
           onClick={() => {
             createPage();

packages/app/src/components/workspace-slider-bar/style.ts

@@ -5,7 +5,7 @@ export const StyledSliderBar = styled.div<{ show: boolean }>(
     return {
       width: show ? '320px' : '0',
       height: '100vh',
-      background: '#FBFBFC',
+      background: theme.mode === 'dark' ? '#272727' : '#FBFBFC',
       boxShadow: theme.shadow.modal,
       transition: 'width .15s',
       position: 'relative',
@@ -42,22 +42,25 @@ export const StyledArrowButton = styled.button<{ isShow: boolean }>(
   }
 );
 
-export const StyledListItem = styled.button(({ theme }) => {
-  return {
-    width: '296px',
-    height: '32px',
-    marginTop: '12px',
-    fontSize: theme.font.sm,
-    color: theme.colors.popoverColor,
-    padding: '0 12px',
-    borderRadius: '5px',
-    ...displayFlex('flex-start', 'center'),
-    ':hover': {
-      color: theme.colors.primaryColor,
-      backgroundColor: theme.colors.hoverBackground,
-    },
-  };
-});
+export const StyledListItem = styled.button<{ active?: boolean }>(
+  ({ theme, active }) => {
+    return {
+      width: '296px',
+      height: '32px',
+      marginTop: '12px',
+      fontSize: theme.font.sm,
+      color: active ? theme.colors.primaryColor : theme.colors.popoverColor,
+      backgroundColor: active ? theme.colors.hoverBackground : 'unset',
+      paddingLeft: '12px',
+      borderRadius: '5px',
+      ...displayFlex('flex-start', 'center'),
+      ':hover': {
+        color: theme.colors.primaryColor,
+        backgroundColor: theme.colors.hoverBackground,
+      },
+    };
+  }
+);
 
 export const StyledNewPageButton = styled(StyledListItem)(({ theme }) => {
   return {
@@ -69,20 +72,32 @@ export const StyledNewPageButton = styled(StyledListItem)(({ theme }) => {
   };
 });
 
-export const StyledSubListItem = styled.button(({ theme }) => {
+export const StyledSubListItem = styled.button<{
+  disable?: boolean;
+  active?: boolean;
+}>(({ theme, disable, active }) => {
   return {
     width: '296px',
     height: '32px',
     marginTop: '4px',
     fontSize: theme.font.sm,
-    color: theme.colors.popoverColor,
+    color: disable
+      ? theme.colors.iconColor
+      : active
+      ? theme.colors.primaryColor
+      : theme.colors.popoverColor,
+    backgroundColor: active ? theme.colors.hoverBackground : 'unset',
+
+    cursor: disable ? 'not-allowed' : 'pointer',
     paddingLeft: '45px',
     lineHeight: '32px',
     textAlign: 'start',
     ...textEllipsis(1),
-    ':hover': {
-      color: theme.colors.primaryColor,
-      backgroundColor: theme.colors.hoverBackground,
-    },
+    ':hover': disable
+      ? {}
+      : {
+          color: theme.colors.primaryColor,
+          backgroundColor: theme.colors.hoverBackground,
+        },
   };
 });