fix: app sidebar ui issues (#3783)

Co-authored-by: Alex Yang <himself65@outlook.com>

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

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

apps/core/src/components/pure/workspace-slider-bar/collections/collections-list.tsx

@@ -211,7 +211,7 @@ const CollectionRenderer = ({
             }
           >
             <div data-testid="collection-options" className={styles.more}>
-              <MoreHorizontalIcon></MoreHorizontalIcon>
+              <MoreHorizontalIcon />
             </div>
           </Menu>
         }
@@ -228,8 +228,8 @@ const CollectionRenderer = ({
           <div>{collection.name}</div>
         </div>
       </MenuItem>
-      <Collapsible.Content>
-        <div style={{ marginLeft: 8 }}>
+      <Collapsible.Content className={styles.collapsibleContent}>
+        <div style={{ marginLeft: 20, marginTop: -4 }}>
           {pagesToRender.map(page => {
             return (
               <Page

apps/core/src/components/pure/workspace-slider-bar/collections/page.tsx

@@ -182,20 +182,18 @@ export const Page = ({
       >
         {page.title || t['Untitled']()}
       </MenuItem>
-      <Collapsible.Content>
-        <div style={{ marginLeft: 8 }}>
-          {referencesToRender.map(id => {
-            return (
-              <ReferencePage
-                key={id}
-                workspace={workspace}
-                pageId={id}
-                metaMapping={allPageMeta}
-                parentIds={new Set([pageId])}
-              />
-            );
-          })}
-        </div>
+      <Collapsible.Content className={styles.collapsibleContent}>
+        {referencesToRender.map(id => {
+          return (
+            <ReferencePage
+              key={id}
+              workspace={workspace}
+              pageId={id}
+              metaMapping={allPageMeta}
+              parentIds={new Set([pageId])}
+            />
+          );
+        })}
       </Collapsible.Content>
     </Collapsible.Root>
   );

apps/core/src/components/pure/workspace-slider-bar/collections/styles.css.ts

@@ -1,4 +1,4 @@
-import { globalStyle, style } from '@vanilla-extract/css';
+import { globalStyle, keyframes, style } from '@vanilla-extract/css';
 
 export const wrapper = style({
   userSelect: 'none',
@@ -29,8 +29,9 @@ export const more = style({
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
-  borderRadius: 4,
-  padding: 4,
+  borderRadius: 2,
+  fontSize: 16,
+  color: 'var(--affine-icon-color)',
   ':hover': {
     backgroundColor: 'var(--affine-hover-color)',
   },
@@ -52,3 +53,34 @@ export const menuDividerStyle = style({
   height: '1px',
   background: 'var(--affine-border-color)',
 });
+
+const slideDown = keyframes({
+  '0%': {
+    height: '0px',
+  },
+  '100%': {
+    height: 'var(--radix-collapsible-content-height)',
+  },
+});
+
+const slideUp = keyframes({
+  '0%': {
+    height: 'var(--radix-collapsible-content-height)',
+  },
+  '100%': {
+    height: '0px',
+  },
+});
+
+export const collapsibleContent = style({
+  overflow: 'hidden',
+  marginTop: '4px',
+  selectors: {
+    '&[data-state="open"]': {
+      animation: `${slideDown} 0.2s ease-out`,
+    },
+    '&[data-state="closed"]': {
+      animation: `${slideUp} 0.2s ease-out`,
+    },
+  },
+});

apps/core/src/components/pure/workspace-slider-bar/favorite/styles.css.ts

@@ -11,11 +11,13 @@ export const label = style({
 export const favItemWrapper = style({
   display: 'flex',
   flexDirection: 'column',
-  gap: '4px',
   selectors: {
     '&[data-nested="true"]': {
-      marginLeft: '12px',
-      width: 'calc(100% - 12px)',
+      marginLeft: '20px',
+      width: 'calc(100% - 20px)',
+    },
+    '&:not(:first-of-type)': {
+      marginTop: '4px',
     },
   },
 });
@@ -40,6 +42,7 @@ const slideUp = keyframes({
 
 export const collapsibleContent = style({
   overflow: 'hidden',
+  marginTop: '4px',
   selectors: {
     '&[data-state="open"]': {
       animation: `${slideDown} 0.2s ease-out`,
@@ -53,5 +56,4 @@ export const collapsibleContent = style({
 export const collapsibleContentInner = style({
   display: 'flex',
   flexDirection: 'column',
-  gap: '4px',
 });

apps/core/src/components/root-app-sidebar/index.tsx

@@ -51,14 +51,14 @@ export type RootAppSidebarProps = {
 };
 
 const RouteMenuLinkItem = React.forwardRef<
-  HTMLDivElement,
+  HTMLButtonElement,
   {
     currentPath: string; // todo: pass through useRouter?
     path: string;
     icon: ReactElement;
     children?: ReactElement;
     isDraggedOver?: boolean;
-  } & React.HTMLAttributes<HTMLDivElement>
+  } & React.HTMLAttributes<HTMLButtonElement>
 >(({ currentPath, path, icon, children, isDraggedOver, ...props }, ref) => {
   // Force active style when a page is dragged over
   const active = isDraggedOver || currentPath === path;
@@ -196,6 +196,8 @@ export const RootAppSidebar = ({
           </CategoryDivider>
           <CollectionsList workspace={blockSuiteWorkspace} />
           <CategoryDivider label={t['others']()} />
+          {/* fixme: remove the following spacer */}
+          <div style={{ height: '4px' }} />
           <RouteMenuLinkItem
             ref={trashDroppable.setNodeRef}
             isDraggedOver={trashDroppable.isOver}
@@ -211,7 +213,7 @@ export const RootAppSidebar = ({
         </SidebarScrollableContainer>
         <SidebarContainer>
           {isDesktop && <AppUpdaterButton />}
-          <div />
+          <div style={{ height: '4px' }} />
           <AddPageButton onClick={onClickNewPage} />
         </SidebarContainer>
       </AppSidebar>