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

2026-07-21 03:56:23 +08:00 · 2023-05-12 11:13:51 +08:00
parent add5deae0f
commit 683343ad82
54 changed files with 1166 additions and 642 deletions
@@ -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': {
@@ -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>
  );
 };

@@ -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>
+    </>
  );
 };

@@ -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';
@@ -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>
-  );
-};
@@ -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 = {
@@ -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>
-  );
-};