feat: add icons in where they need

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

@@ -1,2 +1,3 @@
 export * from './header';
 export * from './page-header';
+export { StyledTitle as HeaderWrapper } from './styles';

packages/app/src/components/page-list/index.tsx

@@ -71,7 +71,7 @@ export const PageList = ({
                 </TableCell>
                 <TableCell ellipsis={true}>{pageMeta.createDate}</TableCell>
                 <TableCell ellipsis={true}>{pageMeta.createDate}</TableCell>
-                <TableCell>
+                <TableCell style={{ padding: 0 }}>
                   {isTrash ? (
                     <TrashOperationCell pageMeta={pageMeta} />
                   ) : (

packages/app/src/components/workspace-slider-bar/index.tsx

@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import { useRouter } from 'next/router';
 import {
   StyledArrowButton,
+  StyledLink,
   StyledListItem,
   StyledNewPageButton,
   StyledSliderBar,
@@ -9,7 +10,15 @@ import {
 } from './style';
 import { Arrow } from './icons';
 import Collapse from '@mui/material/Collapse';
-import { ArrowDownIcon } from '@blocksuite/icons';
+import {
+  ArrowDownIcon,
+  SearchIcon,
+  AllPagesIcon,
+  FavouritesIcon,
+  ImportIcon,
+  TrashIcon,
+  AddIcon,
+} from '@blocksuite/icons';
 import Link from 'next/link';
 import { useEditor } from '@/providers/editor-provider';
 import { useModal } from '@/providers/global-modal-provider';
@@ -61,20 +70,18 @@ export const WorkSpaceSliderBar = () => {
             triggerQuickSearchModal();
           }}
         >
-          Quick search
+          <SearchIcon /> Quick search
         </StyledListItem>
         <Link href={{ pathname: '/page-list/all' }}>
           <StyledListItem active={router.pathname === '/page-list/all'}>
-            All pages
+            <AllPagesIcon /> All pages
           </StyledListItem>
         </Link>
         <StyledListItem active={router.pathname === '/page-list/favorite'}>
-          <Link
-            href={{ pathname: '/page-list/favorite' }}
-            style={{ flexGrow: 1, textAlign: 'left', color: 'inherit' }}
-          >
+          <StyledLink href={{ pathname: '/page-list/favorite' }}>
+            <FavouritesIcon />
             Favourites
-          </Link>
+          </StyledLink>
           <IconButton
             hoverBackground="#E0E6FF"
             onClick={() => {
@@ -95,12 +102,12 @@ export const WorkSpaceSliderBar = () => {
             triggerImportModal();
           }}
         >
-          Import
+          <ImportIcon /> Import
         </StyledListItem>
 
         <Link href={{ pathname: '/page-list/trash' }}>
           <StyledListItem active={router.pathname === '/page-list/trash'}>
-            Trash
+            <TrashIcon /> Trash
           </StyledListItem>
         </Link>
         <StyledNewPageButton
@@ -110,7 +117,7 @@ export const WorkSpaceSliderBar = () => {
             pageMeta && openPage(pageMeta.id);
           }}
         >
-          New Page
+          <AddIcon /> New Page
         </StyledNewPageButton>
       </StyledSliderBar>
       <StyledArrowButton

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

@@ -1,4 +1,5 @@
 import { displayFlex, styled, textEllipsis } from '@/styles';
+import Link from 'next/link';
 
 export const StyledSliderBar = styled.div<{ show: boolean }>(
   ({ theme, show }) => {
@@ -54,6 +55,10 @@ export const StyledListItem = styled.button<{ active?: boolean }>(
       paddingLeft: '12px',
       borderRadius: '5px',
       ...displayFlex('flex-start', 'center'),
+      '>svg': {
+        fontSize: '20px',
+        marginRight: '12px',
+      },
       ':hover': {
         color: theme.colors.primaryColor,
         backgroundColor: theme.colors.hoverBackground,
@@ -62,6 +67,21 @@ export const StyledListItem = styled.button<{ active?: boolean }>(
   }
 );
 
+export const StyledLink = styled(Link)(({ theme }) => {
+  return {
+    flexGrow: 1,
+    textAlign: 'left',
+    color: 'inherit',
+    ...displayFlex('flex-start', 'center'),
+    ':visited': {
+      color: 'inherit',
+    },
+    '>svg': {
+      fontSize: '20px',
+      marginRight: '12px',
+    },
+  };
+});
 export const StyledNewPageButton = styled(StyledListItem)(({ theme }) => {
   return {
     position: 'absolute',

packages/app/src/pages/page-list/all.tsx

@@ -1,12 +1,19 @@
 import { Header } from '@/components/header';
 import { useEditor } from '@/providers/editor-provider';
 import { PageList } from '@/components/page-list';
+import { StyledWrapper } from '@/pages/page-list/styles';
+import { AllPagesIcon } from '@blocksuite/icons';
 
 export const All = () => {
   const { pageList: allPageList } = useEditor();
   return (
     <>
-      <Header />
+      <Header>
+        <StyledWrapper>
+          <AllPagesIcon />
+          All Pages
+        </StyledWrapper>
+      </Header>
       <PageList
         pageList={allPageList.filter(p => !p.trash)}
         showFavoriteTag={true}

packages/app/src/pages/page-list/favorite.tsx

@@ -1,12 +1,19 @@
 import { Header } from '@/components/header';
 import { useEditor } from '@/providers/editor-provider';
 import { PageList } from '@/components/page-list';
+import { StyledWrapper } from '@/pages/page-list/styles';
+import { FavouritesIcon } from '@blocksuite/icons';
 
 export const Favorite = () => {
   const { pageList: allPageList } = useEditor();
   return (
     <>
-      <Header />
+      <Header>
+        <StyledWrapper>
+          <FavouritesIcon />
+          Favorites
+        </StyledWrapper>
+      </Header>
       <PageList pageList={allPageList.filter(p => p.favorite && !p.trash)} />
     </>
   );

packages/app/src/pages/page-list/styles.ts

@@ -0,0 +1,13 @@
+import { HeaderWrapper } from '@/components/header';
+import { styled } from '@/styles';
+
+export const StyledWrapper = styled(HeaderWrapper)(({ theme }) => {
+  return {
+    fontSize: theme.font.sm,
+    color: theme.colors.textColor,
+    '>svg': {
+      fontSize: '20px',
+      marginRight: '12px',
+    },
+  };
+});

packages/app/src/pages/page-list/trash.tsx

@@ -1,12 +1,18 @@
 import { Header } from '@/components/header';
 import { useEditor } from '@/providers/editor-provider';
 import { PageList } from '@/components/page-list';
-
+import { StyledWrapper } from './styles';
+import { TrashIcon } from '@blocksuite/icons';
 export const Trash = () => {
   const { pageList: allPageList } = useEditor();
   return (
     <>
-      <Header />
+      <Header>
+        <StyledWrapper>
+          <TrashIcon />
+          Trash
+        </StyledWrapper>
+      </Header>
       <PageList pageList={allPageList.filter(p => p.trash)} isTrash={true} />
     </>
   );