feat: add root pinboard & rename pivots to pinboard (#1843)

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

@@ -0,0 +1,65 @@
+import { TreeView } from '@affine/component';
+import type { PageMeta } from '@blocksuite/store';
+import type { MouseEvent } from 'react';
+import { useCallback } from 'react';
+
+import type { PinboardNode } from '../../../hooks/affine/use-pinboard-data';
+import { usePinboardData } from '../../../hooks/affine/use-pinboard-data';
+import { usePinboardHandler } from '../../../hooks/affine/use-pinboard-handler';
+import type { BlockSuiteWorkspace } from '../../../shared';
+import { PinboardRender } from '../../affine/pinboard';
+
+export type PinboardProps = {
+  blockSuiteWorkspace: BlockSuiteWorkspace;
+  openPage: (pageId: string) => void;
+  allMetas: PageMeta[];
+};
+
+export const Pinboard = ({
+  blockSuiteWorkspace,
+  openPage,
+  allMetas,
+}: PinboardProps) => {
+  const handlePinboardClick = useCallback(
+    (e: MouseEvent<HTMLDivElement>, node: PinboardNode) => {
+      openPage(node.id);
+    },
+    [openPage]
+  );
+  const onAdd = useCallback(
+    (id: string) => {
+      openPage(id);
+    },
+    [openPage]
+  );
+
+  const { data } = usePinboardData({
+    metas: allMetas.filter(meta => !meta.trash),
+    pinboardRender: PinboardRender,
+    blockSuiteWorkspace: blockSuiteWorkspace,
+    onClick: handlePinboardClick,
+    showOperationButton: true,
+  });
+
+  const { handleAdd, handleDelete, handleDrop } = usePinboardHandler({
+    blockSuiteWorkspace: blockSuiteWorkspace,
+    metas: allMetas,
+    onAdd,
+  });
+
+  if (!data.length) {
+    return null;
+  }
+  return (
+    <div data-testid="sidebar-pinboard-container">
+      <TreeView
+        data={data}
+        onAdd={handleAdd}
+        onDelete={handleDelete}
+        onDrop={handleDrop}
+        indent={16}
+      />
+    </div>
+  );
+};
+export default Pinboard;

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

@@ -1,114 +0,0 @@
-import { MuiCollapse, TreeView } from '@affine/component';
-import { useTranslation } from '@affine/i18n';
-import { ArrowDownSmallIcon, PivotsIcon } from '@blocksuite/icons';
-import type { PageMeta } from '@blocksuite/store';
-import type { MouseEvent } from 'react';
-import { useCallback, useMemo, useState } from 'react';
-
-import type { BlockSuiteWorkspace } from '../../../shared';
-import type { TreeNode } from '../../affine/pivots';
-import {
-  PivotRender,
-  usePivotData,
-  usePivotHandler,
-} from '../../affine/pivots';
-import EmptyItem from './favorite/empty-item';
-import { StyledCollapseButton, StyledListItem } from './shared-styles';
-
-export const PivotInternal = ({
-  blockSuiteWorkspace,
-  openPage,
-  allMetas,
-}: {
-  blockSuiteWorkspace: BlockSuiteWorkspace;
-  openPage: (pageId: string) => void;
-  allMetas: PageMeta[];
-}) => {
-  const handlePivotClick = useCallback(
-    (e: MouseEvent<HTMLDivElement>, node: TreeNode) => {
-      openPage(node.id);
-    },
-    [openPage]
-  );
-  const onAdd = useCallback(
-    (id: string) => {
-      openPage(id);
-    },
-    [openPage]
-  );
-
-  const { data } = usePivotData({
-    metas: allMetas.filter(meta => !meta.trash),
-    pivotRender: PivotRender,
-    blockSuiteWorkspace: blockSuiteWorkspace,
-    onClick: handlePivotClick,
-    showOperationButton: true,
-  });
-
-  const { handleAdd, handleDelete, handleDrop } = usePivotHandler({
-    blockSuiteWorkspace: blockSuiteWorkspace,
-
-    metas: allMetas,
-    onAdd,
-  });
-
-  return (
-    <TreeView
-      data={data}
-      onAdd={handleAdd}
-      onDelete={handleDelete}
-      onDrop={handleDrop}
-      indent={16}
-    />
-  );
-};
-
-export type PivotsProps = {
-  blockSuiteWorkspace: BlockSuiteWorkspace;
-  openPage: (pageId: string) => void;
-  allMetas: PageMeta[];
-};
-
-export const Pivots = ({
-  blockSuiteWorkspace,
-  openPage,
-  allMetas,
-}: PivotsProps) => {
-  const { t } = useTranslation();
-
-  const [showPivot, setShowPivot] = useState(true);
-  const metas = useMemo(() => allMetas.filter(meta => !meta.trash), [allMetas]);
-  const isPivotEmpty = useMemo(
-    () => metas.filter(meta => meta.isPivots === true).length === 0,
-    [metas]
-  );
-
-  return (
-    <div data-testid="sidebar-pivots-container">
-      <StyledListItem
-        onClick={useCallback(() => {
-          setShowPivot(!showPivot);
-        }, [showPivot])}
-      >
-        <StyledCollapseButton collapse={showPivot}>
-          <ArrowDownSmallIcon />
-        </StyledCollapseButton>
-        <PivotsIcon />
-        {t('Pivots')}
-      </StyledListItem>
-
-      <MuiCollapse in={showPivot} style={{ paddingLeft: '16px' }}>
-        {isPivotEmpty ? (
-          <EmptyItem />
-        ) : (
-          <PivotInternal
-            blockSuiteWorkspace={blockSuiteWorkspace}
-            openPage={openPage}
-            allMetas={metas}
-          />
-        )}
-      </MuiCollapse>
-    </div>
-  );
-};
-export default Pivots;

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

@@ -7,8 +7,9 @@ import {
   useGuideHidden,
   useGuideHiddenUntilNextUpdate,
 } from '../../../../hooks/affine/use-is-first-load';
-import { StyledChangeLog, StyledChangeLogWarper } from '../shared-styles';
+import { StyledChangeLog, StyledChangeLogWrapper } from '../shared-styles';
 import { StyledLink } from '../style';
+
 export const ChangeLog = () => {
   const [guideHidden, setGuideHidden] = useGuideHidden();
   const [guideHiddenUntilNextUpdate, setGuideHiddenUntilNextUpdate] =
@@ -33,7 +34,7 @@ export const ChangeLog = () => {
     return <></>;
   }
   return (
-    <StyledChangeLogWarper isClose={isClose}>
+    <StyledChangeLogWrapper isClose={isClose}>
       <StyledChangeLog data-testid="change-log" isClose={isClose}>
         <StyledLink href={'https://affine.pro'} target="_blank">
           <NewIcon />
@@ -49,7 +50,7 @@ export const ChangeLog = () => {
           <CloseIcon />
         </IconButton>
       </StyledChangeLog>
-    </StyledChangeLogWarper>
+    </StyledChangeLogWrapper>
   );
 };
 

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

@@ -22,7 +22,7 @@ import type { AllWorkspace } from '../../../shared';
 import { SidebarSwitch } from '../../affine/sidebar-switch';
 import { ChangeLog } from './changeLog';
 import Favorite from './favorite';
-import { Pivots } from './Pivots';
+import { Pinboard } from './Pinboard';
 import { StyledListItem } from './shared-styles';
 import {
   StyledLink,
@@ -188,7 +188,7 @@ export const WorkSpaceSliderBar: React.FC<WorkSpaceSliderBarProps> = ({
                 currentWorkspace={currentWorkspace}
               />
               {!!blockSuiteWorkspace && (
-                <Pivots
+                <Pinboard
                   blockSuiteWorkspace={blockSuiteWorkspace}
                   openPage={openPage}
                   allMetas={pageMeta}

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

@@ -53,7 +53,7 @@ export const StyledCollapseButton = styled('button')<{
     margin: 'auto',
     color: theme.colors.iconColor,
     opacity: '.6',
-    display: show ? 'block' : 'none',
+    display: show ? 'flex' : 'none',
     svg: {
       transform: `rotate(${collapse ? '0' : '-90'}deg)`,
     },
@@ -188,7 +188,7 @@ export const StyledChangeLog = styled('div')<{
     },
   };
 });
-export const StyledChangeLogWarper = styled('div')<{
+export const StyledChangeLogWrapper = styled('div')<{
   isClose?: boolean;
 }>(({ isClose }) => {
   return {