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>
+      <Collapsible.Content className={styles.collapsibleContent}>
-        <div style={{ marginLeft: 8 }}>
+        <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>
+      <Collapsible.Content className={styles.collapsibleContent}>
-        <div style={{ marginLeft: 8 }}>
+        {referencesToRender.map(id => {
-          {referencesToRender.map(id => {
+          return (
-            return (
+            <ReferencePage
-              <ReferencePage
+              key={id}
-                key={id}
+              workspace={workspace}
-                workspace={workspace}
+              pageId={id}
-                pageId={id}
+              metaMapping={allPageMeta}
-                metaMapping={allPageMeta}
+              parentIds={new Set([pageId])}
-                parentIds={new Set([pageId])}
+            />
-              />
+          );
-            );
+        })}
-          })}
-        </div>
       </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,
+  borderRadius: 2,
-  padding: 4,
+  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',
+      marginLeft: '20px',
-      width: 'calc(100% - 12px)',
+      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>

apps/electron/src/main/main-window.ts

@@ -34,7 +34,7 @@ async function createWindow() {
       : isWindows()
       ? 'hidden'
       : 'default',
-    trafficLightPosition: { x: 24, y: 18 },
+    trafficLightPosition: { x: 20, y: 18 },
     x: mainWindowState.x,
     y: mainWindowState.y,
     width: mainWindowState.width,

packages/component/src/components/app-sidebar/category-divider/index.css.ts

@@ -3,13 +3,16 @@ import { style } from '@vanilla-extract/css';
 export const root = style({
   fontSize: 'var(--affine-font-xs)',
   minHeight: '16px',
+  width: 'calc(100% + 6px)',
   userSelect: 'none',
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'space-between',
+  marginBottom: '4px',
+  padding: '0 8px',
   selectors: {
     '&:not(:first-of-type)': {
-      marginTop: '10px',
+      marginTop: '16px',
     },
   },
 });

packages/component/src/components/app-sidebar/index.css.ts

@@ -52,7 +52,6 @@ export const navStyle = style({
   display: 'flex',
   flexDirection: 'column',
   zIndex: parseInt(baseTheme.zIndexModal),
-  borderRight: '1px solid transparent',
 });
 
 export const navHeaderStyle = style({
@@ -76,6 +75,7 @@ export const navBodyStyle = style({
   height: 'calc(100% - 52px)',
   display: 'flex',
   flexDirection: 'column',
+  rowGap: '4px',
 });
 
 export const sidebarFloatMaskStyle = style({

packages/component/src/components/app-sidebar/menu-item/index.css.ts

@@ -1,15 +1,23 @@
 import { style } from '@vanilla-extract/css';
+
+export const linkItemRoot = style({
+  color: 'inherit',
+  display: 'contents',
+});
+
 export const root = style({
   display: 'inline-flex',
   alignItems: 'center',
   borderRadius: '4px',
+  textAlign: 'left',
+  color: 'inherit',
   width: '100%',
   minHeight: '30px',
   userSelect: 'none',
   cursor: 'pointer',
   padding: '0 12px',
   fontSize: 'var(--affine-font-sm)',
-  margin: '2px 0',
+  marginTop: '4px',
   selectors: {
     '&:hover': {
       background: 'var(--affine-hover-color)',
@@ -29,10 +37,8 @@ export const root = style({
     //     'linear-gradient(0deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.04)), rgba(0, 0, 0, 0.04)',
     // },
     '&[data-collapsible="true"]': {
-      width: 'calc(100% + 8px)',
-      transform: 'translateX(-8px)',
       paddingLeft: '4px',
-      paddingRight: '12px',
+      paddingRight: '4px',
     },
     '&[data-type="collection-list-item"][data-collapsible="false"][data-active="true"],&[data-type="favorite-list-item"][data-collapsible="false"][data-active="true"], &[data-type="favorite-list-item"][data-collapsible="false"]:hover, &[data-type="collection-list-item"][data-collapsible="false"]:hover':
       {
@@ -41,6 +47,9 @@ export const root = style({
         paddingLeft: '20px',
         paddingRight: '12px',
       },
+    [`${linkItemRoot}:first-of-type &`]: {
+      marginTop: '0px',
+    },
   },
 });
 
@@ -53,6 +62,12 @@ export const content = style({
 
 export const postfix = style({
   justifySelf: 'flex-end',
+  display: 'none',
+  selectors: {
+    [`${root}:hover &`]: {
+      display: 'flex',
+    },
+  },
 });
 
 export const icon = style({
@@ -68,10 +83,15 @@ export const collapsedIconContainer = style({
   justifyContent: 'center',
   borderRadius: '2px',
   transition: 'transform 0.2s',
+  color: 'inherit',
   selectors: {
     '&[data-collapsed="true"]': {
       transform: 'rotate(-90deg)',
     },
+    '&[data-disabled="true"]': {
+      opacity: 0.3,
+      pointerEvents: 'none',
+    },
     '&:hover': {
       background: 'var(--affine-hover-color)',
     },
@@ -103,8 +123,3 @@ export const collapsedIcon = style({
 export const spacer = style({
   flex: 1,
 });
-
-export const linkItemRoot = style({
-  color: 'inherit',
-  display: 'contents',
-});

packages/component/src/components/app-sidebar/menu-item/index.tsx

@@ -6,11 +6,13 @@ import { Link } from 'react-router-dom';
 
 import * as styles from './index.css';
 
-export interface MenuItemProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface MenuItemProps extends React.HTMLAttributes<HTMLButtonElement> {
   icon?: React.ReactElement;
   active?: boolean;
   disabled?: boolean;
-  collapsed?: boolean; // true, false, undefined. undefined means no collapse
+  // true, false, undefined. undefined means no collapse
+  collapsed?: boolean;
+  // if onCollapsedChange is given, but collapsed is undefined, then we will render the collapse button as disabled
   onCollapsedChange?: (collapsed: boolean) => void;
   postfix?: React.ReactElement;
 }
@@ -23,7 +25,7 @@ const stopPropagation: React.MouseEventHandler = e => {
   e.stopPropagation();
 };
 
-export const MenuItem = React.forwardRef<HTMLDivElement, MenuItemProps>(
+export const MenuItem = React.forwardRef<HTMLButtonElement, MenuItemProps>(
   (
     {
       onClick,
@@ -38,14 +40,9 @@ export const MenuItem = React.forwardRef<HTMLDivElement, MenuItemProps>(
     },
     ref
   ) => {
-    const collapsible = collapsed !== undefined;
+    const collapsible = onCollapsedChange !== undefined;
-    if (collapsible && !onCollapsedChange) {
-      throw new Error(
-        'onCollapsedChange is required when collapsed is defined'
-      );
-    }
     return (
-      <div
+      <button
         ref={ref}
         {...props}
         onClick={onClick}
@@ -58,6 +55,7 @@ export const MenuItem = React.forwardRef<HTMLDivElement, MenuItemProps>(
           <div className={styles.iconsContainer} data-collapsible={collapsible}>
             {collapsible && (
               <div
+                data-disabled={collapsed === undefined ? true : undefined}
                 onClick={e => {
                   e.stopPropagation();
                   e.preventDefault(); // for links
@@ -68,7 +66,7 @@ export const MenuItem = React.forwardRef<HTMLDivElement, MenuItemProps>(
               >
                 <ArrowDownSmallIcon
                   className={styles.collapsedIcon}
-                  data-collapsed={collapsed}
+                  data-collapsed={collapsed !== false}
                 />
               </div>
             )}
@@ -84,21 +82,22 @@ export const MenuItem = React.forwardRef<HTMLDivElement, MenuItemProps>(
             {postfix}
           </div>
         ) : null}
-      </div>
+      </button>
     );
   }
 );
 MenuItem.displayName = 'MenuItem';
 
-export const MenuLinkItem = React.forwardRef<HTMLDivElement, MenuLinkItemProps>(
+export const MenuLinkItem = React.forwardRef<
-  ({ to, ...props }, ref) => {
+  HTMLButtonElement,
-    return (
+  MenuLinkItemProps
-      <Link to={to} className={styles.linkItemRoot}>
+>(({ to, ...props }, ref) => {
-        {/* The <a> element rendered by Link does not generate display box due to `display: contents` style */}
+  return (
-        {/* Thus ref is passed to MenuItem instead of Link */}
+    <Link to={to} className={styles.linkItemRoot}>
-        <MenuItem ref={ref} {...props}></MenuItem>
+      {/* The <a> element rendered by Link does not generate display box due to `display: contents` style */}
-      </Link>
+      {/* Thus ref is passed to MenuItem instead of Link */}
-    );
+      <MenuItem ref={ref} {...props}></MenuItem>
-  }
+    </Link>
-);
+  );
+});
 MenuLinkItem.displayName = 'MenuLinkItem';

packages/component/src/components/app-sidebar/quick-search-input/index.css.ts

@@ -12,7 +12,7 @@ export const root = style({
   userSelect: 'none',
   cursor: 'pointer',
   padding: '0 12px',
-  margin: '12px 0',
+  margin: '20px 0',
   position: 'relative',
 });
 

packages/component/src/components/app-sidebar/resize-indicator/index.tsx

@@ -1,6 +1,7 @@
+import { assertExists } from '@blocksuite/global/utils';
 import { useAtom, useSetAtom } from 'jotai';
 import type { ReactElement } from 'react';
-import { useCallback, useLayoutEffect, useState } from 'react';
+import { useCallback } from 'react';
 
 import {
   appSidebarOpenAtom,
@@ -18,16 +19,10 @@ export const ResizeIndicator = (props: ResizeIndicatorProps): ReactElement => {
   const [sidebarOpen, setSidebarOpen] = useAtom(appSidebarOpenAtom);
   const [isResizing, setIsResizing] = useAtom(appSidebarResizingAtom);
 
-  const [anchorLeft, setAnchorLeft] = useState(0);
-
-  useLayoutEffect(() => {
-    if (!props.targetElement) return;
-    const { left } = props.targetElement.getBoundingClientRect();
-    setAnchorLeft(left);
-  }, [props.targetElement]);
-
   const onResizeStart = useCallback(() => {
     let resized = false;
+    assertExists(props.targetElement);
+    const { left: anchorLeft } = props.targetElement.getBoundingClientRect();
 
     function onMouseMove(e: MouseEvent) {
       e.preventDefault();
@@ -51,13 +46,7 @@ export const ResizeIndicator = (props: ResizeIndicatorProps): ReactElement => {
       },
       { once: true }
     );
-  }, [
+  }, [props.targetElement, setIsResizing, setSidebarOpen, setWidth]);
-    anchorLeft,
-    props.targetElement,
-    setIsResizing,
-    setSidebarOpen,
-    setWidth,
-  ]);
 
   return (
     <div

packages/component/src/components/app-sidebar/sidebar-containers/index.css.ts

@@ -4,7 +4,6 @@ export const baseContainer = style({
   padding: '4px 16px',
   display: 'flex',
   flexFlow: 'column nowrap',
-  rowGap: '4px',
 });
 
 export const scrollableContainerRoot = style({
@@ -45,6 +44,7 @@ export const scrollableContainer = style([
   baseContainer,
   {
     height: '100%',
+    padding: '4px 8px',
   },
 ]);
 
@@ -69,6 +69,7 @@ export const scrollbarThumb = style({
   position: 'relative',
   background: 'var(--affine-black-30)',
   borderRadius: '4px',
+  overflow: 'hidden',
   selectors: {
     '&::before': {
       content: '""',

packages/component/src/components/workspace-avatar/index.css.ts

@@ -14,6 +14,7 @@ export const avatarImageStyle = style({
   height: '100%',
   objectFit: 'cover',
   objectPosition: 'center',
+  display: 'block',
 });
 
 const bottomAnimation = keyframes({

packages/component/src/theme/global.css

@@ -252,3 +252,11 @@ affine-block-hub {
     padding: 0;
   }
 }
+
+button,
+input,
+select,
+textarea,
+[role='button'] {
+  -webkit-app-region: no-drag;
+}

packages/component/src/ui/scrollbar/index.css.ts

@@ -70,6 +70,7 @@ export const scrollbarThumb = style({
   position: 'relative',
   background: 'var(--affine-divider-color)',
   width: '50%',
+  overflow: 'hidden',
   borderRadius: '4px',
   ':hover': {
     background: 'var(--affine-icon-color)',

tests/affine-local/e2e/local-first-collections-items.spec.ts

@@ -53,12 +53,14 @@ test('Show collections items in sidebar', async ({ page }) => {
   await first.getByTestId('fav-collapsed-button').click();
   const collectionPage = collections.getByTestId('collection-page').nth(0);
   expect(await collectionPage.textContent()).toBe('test page');
+  await collectionPage.hover();
   await collectionPage.getByTestId('collection-page-options').click();
   const deletePage = page
     .getByTestId('collection-page-option')
     .getByText('Delete');
   await deletePage.click();
   expect(await collections.getByTestId('collection-page').count()).toBe(0);
+  await first.hover();
   await first.getByTestId('collection-options').click();
   const deleteCollection = page
     .getByTestId('collection-option')
@@ -76,6 +78,7 @@ test('pin and unpin collection', async ({ page }) => {
   await page.waitForTimeout(50);
   expect(await items.count()).toBe(1);
   const first = items.first();
+  await first.hover();
   await first.getByTestId('collection-options').click();
   const deleteCollection = page
     .getByTestId('collection-option')
@@ -99,6 +102,7 @@ test('edit collection', async ({ page }) => {
   const items = collections.getByTestId('collection-item');
   expect(await items.count()).toBe(1);
   const first = items.first();
+  await first.hover();
   await first.getByTestId('collection-options').click();
   const editCollection = page
     .getByTestId('collection-option')
@@ -117,6 +121,7 @@ test('edit collection and change filter date', async ({ page }) => {
   const items = collections.getByTestId('collection-item');
   expect(await items.count()).toBe(1);
   const first = items.first();
+  await first.hover();
   await first.getByTestId('collection-options').click();
   const editCollection = page
     .getByTestId('collection-option')

tests/affine-local/e2e/local-first-favorites-items.spec.ts

@@ -122,7 +122,7 @@ test("Deleted page's reference will not be shown in sidebar", async ({
     '[data-testid="fav-collapsed-button"]'
   );
 
-  await expect(collapseButton).not.toBeVisible();
+  expect(collapseButton).toHaveAttribute('data-disabled', 'true');
   const currentWorkspace = await workspace.current();
 
   expect(currentWorkspace.flavour).toContain('local');