feat: new sidebar (app shell) styles (#2303)

apps/web/src/components/pure/workspace-slider-bar/WorkspaceSelector/styles.ts

@@ -6,7 +6,7 @@ export const StyledSelectorContainer = styled('div')(() => {
     display: 'flex',
     alignItems: 'center',
     padding: '0 6px',
-    marginBottom: '16px',
+    margin: '0 -6px',
     borderRadius: '8px',
     color: 'var(--affine-text-primary-color)',
     ':hover': {

apps/web/src/components/pure/workspace-slider-bar/favorite/empty-item.tsx

@@ -1,13 +1,10 @@
+import { MenuItem } from '@affine/component/app-sidebar';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 
-import { StyledCollapseItem } from '../shared-styles';
-
 export const EmptyItem = () => {
   const t = useAFFiNEI18N();
   return (
-    <StyledCollapseItem disable={true} textWrap={true}>
-      {t['Favorite pages for easy access']()}
-    </StyledCollapseItem>
+    <MenuItem disabled={true}>{t['Favorite pages for easy access']()}</MenuItem>
   );
 };
 

apps/web/src/components/pure/workspace-slider-bar/favorite/favorite-list.tsx

@@ -1,20 +1,18 @@
-import { MuiCollapse } from '@affine/component';
+import { MenuLinkItem } from '@affine/component/app-sidebar';
 import { EdgelessIcon, PageIcon } from '@blocksuite/icons';
+import { useBlockSuitePageMeta } from '@toeverything/hooks/use-block-suite-page-meta';
 import { useAtomValue } from 'jotai';
 import { useRouter } from 'next/router';
 import { useMemo } from 'react';
 
 import { workspacePreferredModeAtom } from '../../../../atoms';
 import type { FavoriteListProps } from '../index';
-import { StyledCollapseItem } from '../shared-styles';
 import EmptyItem from './empty-item';
-export const FavoriteList = ({
-  pageMeta,
-  openPage,
-  showList,
-}: FavoriteListProps) => {
+export const FavoriteList = ({ currentWorkspace }: FavoriteListProps) => {
   const router = useRouter();
   const record = useAtomValue(workspacePreferredModeAtom);
+  const pageMeta = useBlockSuitePageMeta(currentWorkspace.blockSuiteWorkspace);
+  const workspaceId = currentWorkspace.id;
 
   const favoriteList = useMemo(
     () => pageMeta.filter(p => p.favorite && !p.trash),
@@ -22,45 +20,25 @@ export const FavoriteList = ({
   );
 
   return (
-    <MuiCollapse
-      in={showList}
-      style={{
-        maxHeight: 300,
-        overflowY: 'auto',
-        marginLeft: '16px',
-      }}
-    >
+    <>
       {favoriteList.map((pageMeta, index) => {
         const active = router.query.pageId === pageMeta.id;
+        const icon =
+          record[pageMeta.id] === 'edgeless' ? <EdgelessIcon /> : <PageIcon />;
         return (
-          <div key={`${pageMeta}-${index}`}>
-            <StyledCollapseItem
-              data-testid={`favorite-list-item-${pageMeta.id}`}
-              active={active}
-              ref={ref => {
-                if (ref && active) {
-                  ref.scrollIntoView({ behavior: 'smooth' });
-                }
-              }}
-              onClick={() => {
-                if (active) {
-                  return;
-                }
-                openPage(pageMeta.id);
-              }}
-            >
-              {record[pageMeta.id] === 'edgeless' ? (
-                <EdgelessIcon />
-              ) : (
-                <PageIcon />
-              )}
-              <span>{pageMeta.title || 'Untitled'}</span>
-            </StyledCollapseItem>
-          </div>
+          <MenuLinkItem
+            key={`${pageMeta}-${index}`}
+            data-testid={`favorite-list-item-${pageMeta.id}`}
+            active={active}
+            href={`/workspace/${workspaceId}/${pageMeta.id}`}
+            icon={icon}
+          >
+            <span>{pageMeta.title || 'Untitled'}</span>
+          </MenuLinkItem>
         );
       })}
       {favoriteList.length === 0 && <EmptyItem />}
-    </MuiCollapse>
+    </>
   );
 };
 

apps/web/src/components/pure/workspace-slider-bar/favorite/index.tsx

@@ -1,66 +1 @@
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
-import { ArrowDownSmallIcon, FavoriteIcon } from '@blocksuite/icons';
-import { useBlockSuitePageMeta } from '@toeverything/hooks/use-block-suite-page-meta';
-import { useCallback, useState } from 'react';
-
-import type { AllWorkspace } from '../../../../shared';
-import type { WorkSpaceSliderBarProps } from '../index';
-import { StyledCollapseButton, StyledListItem } from '../shared-styles';
-import { StyledLink } from '../style';
-import FavoriteList from './favorite-list';
-
-export const Favorite = ({
-  currentPath,
-  paths,
-  currentPageId,
-  openPage,
-  currentWorkspace,
-}: Pick<
-  WorkSpaceSliderBarProps,
-  'currentPath' | 'paths' | 'currentPageId' | 'openPage'
-> & {
-  currentWorkspace: AllWorkspace;
-}) => {
-  const currentWorkspaceId = currentWorkspace.id;
-  const pageMeta = useBlockSuitePageMeta(currentWorkspace.blockSuiteWorkspace);
-
-  const [showSubFavorite, setOpenSubFavorite] = useState(true);
-
-  const t = useAFFiNEI18N();
-
-  return (
-    <>
-      <StyledListItem
-        active={
-          currentPath ===
-          (currentWorkspaceId && paths.favorite(currentWorkspaceId))
-        }
-      >
-        <StyledLink
-          href={{
-            pathname: currentWorkspaceId && paths.favorite(currentWorkspaceId),
-          }}
-        >
-          <FavoriteIcon />
-          {t['Favorites']()}
-        </StyledLink>
-        <StyledCollapseButton
-          onClick={useCallback(() => {
-            setOpenSubFavorite(!showSubFavorite);
-          }, [showSubFavorite])}
-          collapse={showSubFavorite}
-        >
-          <ArrowDownSmallIcon />
-        </StyledCollapseButton>
-      </StyledListItem>
-      <FavoriteList
-        currentPageId={currentPageId}
-        showList={showSubFavorite}
-        openPage={openPage}
-        pageMeta={pageMeta}
-      />
-    </>
-  );
-};
-
-export default Favorite;
+export * from './favorite-list';

apps/web/src/components/pure/workspace-slider-bar/icons.tsx

@@ -1,13 +0,0 @@
-export const Arrow = () => {
-  return (
-    <svg
-      width="6"
-      height="10"
-      viewBox="0 0 6 10"
-      fill="currentColor"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path d="M0.354 9.22997C0.201333 9.0773 0.125 8.91764 0.125 8.75097C0.125 8.5843 0.201333 8.42464 0.354 8.27197L3.625 5.00097L0.354 1.72997C0.201333 1.5773 0.125 1.41764 0.125 1.25097C0.125 1.0843 0.201333 0.924636 0.354 0.771969C0.506667 0.619302 0.666333 0.542969 0.833 0.542969C0.999667 0.542969 1.15933 0.619302 1.312 0.771969L4.979 4.43897C5.06233 4.52164 5.125 4.61164 5.167 4.70897C5.20833 4.8063 5.229 4.90364 5.229 5.00097C5.229 5.0983 5.20833 5.19564 5.167 5.29297C5.125 5.3903 5.06233 5.4803 4.979 5.56297L1.312 9.22997C1.15933 9.38264 0.999667 9.45897 0.833 9.45897C0.666333 9.45897 0.506667 9.38264 0.354 9.22997Z" />
-    </svg>
-  );
-};

apps/web/src/components/pure/workspace-slider-bar/index.tsx

@@ -1,12 +1,9 @@
-import type { Page, PageMeta } from '@blocksuite/store';
+import type { Page } from '@blocksuite/store';
 
 import type { AllWorkspace } from '../../../shared';
 
 export type FavoriteListProps = {
-  currentPageId: string | null;
-  openPage: (pageId: string) => void;
-  showList: boolean;
-  pageMeta: PageMeta[];
+  currentWorkspace: AllWorkspace;
 };
 
 export type WorkSpaceSliderBarProps = {

apps/web/src/components/pure/workspace-slider-bar/route-navigation.tsx

@@ -1,31 +0,0 @@
-import { IconButton } from '@affine/component';
-import { ArrowLeftSmallIcon, ArrowRightSmallIcon } from '@blocksuite/icons';
-
-import { StyledRouteNavigationWrapper } from './shared-styles';
-
-export const RouteNavigation = () => {
-  if (!environment.isDesktop) {
-    return <></>;
-  }
-  return (
-    <StyledRouteNavigationWrapper>
-      <IconButton
-        size="middle"
-        onClick={() => {
-          window.history.back();
-        }}
-      >
-        <ArrowLeftSmallIcon />
-      </IconButton>
-      <IconButton
-        size="middle"
-        onClick={() => {
-          window.history.forward();
-        }}
-        style={{ marginLeft: '32px' }}
-      >
-        <ArrowRightSmallIcon />
-      </IconButton>
-    </StyledRouteNavigationWrapper>
-  );
-};