feat: modify sidebar floating logic and header responsive style (#3550)

apps/core/src/components/blocksuite/workspace-header/header.tsx

@@ -8,6 +8,7 @@ import { isDesktop } from '@affine/env/constant';
 import { CloseIcon, MinusIcon, RoundedRectangleIcon } from '@blocksuite/icons';
 import type { Page } from '@blocksuite/store';
 import { headerItemsAtom } from '@toeverything/infra/atom';
+import clsx from 'clsx';
 import { useAtom, useAtomValue } from 'jotai';
 import type { FC, HTMLAttributes, PropsWithChildren, ReactNode } from 'react';
 import {
@@ -38,8 +39,6 @@ export type BaseHeaderProps<
 
 export enum HeaderRightItemName {
   EditorOptionMenu = 'editorOptionMenu',
-  // some windows only items
-  WindowsAppControls = 'windowsAppControls',
 }
 
 type HeaderItem = {
@@ -63,59 +62,54 @@ const HeaderRightItems: Record<HeaderRightItemName, HeaderItem> = {
       );
     },
   },
-  [HeaderRightItemName.WindowsAppControls]: {
-    Component: () => {
-      const handleMinimizeApp = useCallback(() => {
-        window.apis?.ui.handleMinimizeApp().catch(err => {
-          console.error(err);
-        });
-      }, []);
-      const handleMaximizeApp = useCallback(() => {
-        window.apis?.ui.handleMaximizeApp().catch(err => {
-          console.error(err);
-        });
-      }, []);
-      const handleCloseApp = useCallback(() => {
-        window.apis?.ui.handleCloseApp().catch(err => {
-          console.error(err);
-        });
-      }, []);
-      return (
-        <div
-          data-platform-target="win32"
-          className={styles.windowAppControlsWrapper}
-        >
-          <button
-            data-type="minimize"
-            className={styles.windowAppControl}
-            onClick={handleMinimizeApp}
-          >
-            <MinusIcon />
-          </button>
-          <button
-            data-type="maximize"
-            className={styles.windowAppControl}
-            onClick={handleMaximizeApp}
-          >
-            <RoundedRectangleIcon />
-          </button>
-          <button
-            data-type="close"
-            className={styles.windowAppControl}
-            onClick={handleCloseApp}
-          >
-            <CloseIcon />
-          </button>
-        </div>
-      );
-    },
-    availableWhen: () => {
-      return isDesktop && globalThis.platform === 'win32';
-    },
-  },
 };
 
 export type HeaderProps = BaseHeaderProps;
+const WindowsAppControls = () => {
+  const handleMinimizeApp = useCallback(() => {
+    window.apis?.ui.handleMinimizeApp().catch(err => {
+      console.error(err);
+    });
+  }, []);
+  const handleMaximizeApp = useCallback(() => {
+    window.apis?.ui.handleMaximizeApp().catch(err => {
+      console.error(err);
+    });
+  }, []);
+  const handleCloseApp = useCallback(() => {
+    window.apis?.ui.handleCloseApp().catch(err => {
+      console.error(err);
+    });
+  }, []);
+  return (
+    <div
+      data-platform-target="win32"
+      className={styles.windowAppControlsWrapper}
+    >
+      <button
+        data-type="minimize"
+        className={styles.windowAppControl}
+        onClick={handleMinimizeApp}
+      >
+        <MinusIcon />
+      </button>
+      <button
+        data-type="maximize"
+        className={styles.windowAppControl}
+        onClick={handleMaximizeApp}
+      >
+        <RoundedRectangleIcon />
+      </button>
+      <button
+        data-type="close"
+        className={styles.windowAppControl}
+        onClick={handleCloseApp}
+      >
+        <CloseIcon />
+      </button>
+    </div>
+  );
+};
 
 const PluginHeader = () => {
   const rootRef = useRef<HTMLDivElement>(null);
@@ -165,7 +159,7 @@ export const Header = forwardRef<
   const appSidebarFloating = useAtomValue(appSidebarFloatingAtom);
 
   const mode = useAtomValue(currentModeAtom);
-
+  const isWindowsDesktop = globalThis.platform === 'win32' && isDesktop;
   return (
     <div
       className={styles.headerContainer}
@@ -196,14 +190,25 @@ export const Header = forwardRef<
         data-has-warning={showWarning}
         data-testid="editor-header-items"
         data-is-edgeless={mode === 'edgeless'}
+        data-is-page-list={props.currentPage === null}
       >
         <div className={styles.headerLeftSide}>
-          {!open && <SidebarSwitch />}
+          <div>{!open && <SidebarSwitch />}</div>
-          {props.leftSlot}
+          <div
+            className={clsx(styles.headerLeftSideItem, {
+              [styles.headerLeftSideOpen]: open,
+            })}
+          >
+            {props.leftSlot}
+          </div>
         </div>
 
         {props.children}
-        <div className={styles.headerRightSide}>
+        <div
+          className={clsx(styles.headerRightSide, {
+            [styles.headerRightSideWindow]: isWindowsDesktop,
+          })}
+        >
           <PluginHeader />
           {useMemo(() => {
             return Object.entries(HeaderRightItems).map(
@@ -227,6 +232,7 @@ export const Header = forwardRef<
             );
           }, [props])}
         </div>
+        {isWindowsDesktop ? <WindowsAppControls /> : null}
       </div>
     </div>
   );

apps/core/src/components/blocksuite/workspace-header/index.tsx

@@ -65,7 +65,7 @@ export const BlockSuiteEditorHeader: FC<
                 }}
               />
             </div>
-            <div>
+            <div className={styles.pageTitle}>
               {isEditable ? (
                 <div>
                   <input
@@ -88,11 +88,7 @@ export const BlockSuiteEditorHeader: FC<
                   </Button>
                 </div>
               ) : (
-                <span
+                <span data-testid="title-edit-button" onClick={handleClick}>
-                  data-testid="title-edit-button"
-                  onClick={handleClick}
-                  style={{ cursor: 'pointer' }}
-                >
                   {title || 'Untitled'}
                 </span>
               )}

apps/core/src/components/blocksuite/workspace-header/styles.css.ts

@@ -1,5 +1,7 @@
 import type { ComplexStyleRule } from '@vanilla-extract/css';
-import { style } from '@vanilla-extract/css';
+import { createContainer, style } from '@vanilla-extract/css';
+
+export const headerVanillaContainer = createContainer();
 
 export const headerContainer = style({
   height: 'auto',
@@ -27,35 +29,45 @@ export const headerContainer = style({
 } as ComplexStyleRule);
 
 export const header = style({
+  containerName: headerVanillaContainer,
+  containerType: 'inline-size',
   flexShrink: 0,
-  height: '52px',
+  minHeight: '52px',
   width: '100%',
-  padding: '0 20px',
+  padding: '8px 20px',
-  display: 'flex',
+  display: 'grid',
-  justifyContent: 'space-between',
+  gridTemplateColumns: '1fr auto 1fr',
   alignItems: 'center',
   background: 'var(--affine-background-primary-color)',
   zIndex: 99,
   position: 'relative',
   selectors: {
-    '&[data-is-edgeless="true"]': {
+    '&[data-is-page-list="true"], &[data-is-edgeless="true"]': {
       borderBottom: `1px solid var(--affine-border-color)`,
     },
   },
+  '@container': {
+    [`${headerVanillaContainer} (max-width: 900px)`]: {
+      alignItems: 'start',
+    },
+  },
 });
 
 export const titleContainer = style({
   width: '100%',
   height: '100%',
-  margin: 'auto',
-  position: 'absolute',
-  inset: 'auto auto auto 50%',
-  transform: 'translate(-50%, 0px)',
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
   alignContent: 'unset',
   fontSize: 'var(--affine-font-base)',
+  ['WebkitAppRegion' as string]: 'no-drag',
+  '@container': {
+    [`${headerVanillaContainer} (max-width: 900px)`]: {
+      alignItems: 'start',
+      paddingTop: '2px',
+    },
+  },
 });
 
 export const title = style({
@@ -75,9 +87,26 @@ export const title = style({
     },
   },
 } as ComplexStyleRule);
-
+export const pageTitle = style({
+  maxWidth: '600px',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+  transition: 'width .15s',
+  cursor: 'pointer',
+  '@container': {
+    [`${headerVanillaContainer} (max-width: 1920px)`]: {
+      maxWidth: '800px',
+    },
+    [`${headerVanillaContainer} (max-width: 1300px)`]: {
+      maxWidth: '400px',
+    },
+    [`${headerVanillaContainer} (max-width: 768px)`]: {
+      maxWidth: '220px',
+    },
+  },
+});
 export const titleWrapper = style({
-  height: '100%',
   position: 'relative',
   display: 'flex',
   justifyContent: 'center',
@@ -86,10 +115,28 @@ export const titleWrapper = style({
 export const headerLeftSide = style({
   display: 'flex',
   alignItems: 'center',
-  width: '150px',
+  transition: 'all .15s',
-  '@media': {
+  '@container': {
-    '(max-width: 900px)': {
+    [`${headerVanillaContainer} (max-width: 900px)`]: {
-      width: 'auto',
+      flexDirection: 'column',
+      alignItems: 'flex-start',
+      height: '68px',
+    },
+  },
+});
+export const headerLeftSideItem = style({
+  '@container': {
+    [`${headerVanillaContainer} (max-width: 900px)`]: {
+      position: 'absolute',
+      left: '0',
+      bottom: '8px',
+    },
+  },
+});
+export const headerLeftSideOpen = style({
+  '@container': {
+    [`${headerVanillaContainer} (max-width: 900px)`]: {
+      marginLeft: '20px',
     },
   },
 });
@@ -99,7 +146,21 @@ export const headerRightSide = style({
   alignItems: 'center',
   gap: '12px',
   zIndex: 1,
+  marginLeft: '20px',
   justifyContent: 'flex-end',
+  transition: 'all .15s',
+  '@container': {
+    [`${headerVanillaContainer} (max-width: 900px)`]: {
+      position: 'absolute',
+      height: 'auto',
+      right: '0',
+      bottom: '8px',
+      marginRight: '18px',
+    },
+  },
+});
+export const headerRightSideWindow = style({
+  marginRight: '140px',
 });
 
 export const browserWarning = style({
@@ -131,22 +192,12 @@ export const closeButton = style({
 });
 
 export const switchWrapper = style({
-  position: 'absolute',
-  right: '100%',
-  top: 0,
-  bottom: 0,
-  margin: 'auto',
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
 });
 
 export const searchArrowWrapper = style({
-  position: 'absolute',
-  left: 'calc(100% + 4px)',
-  top: 0,
-  bottom: 0,
-  margin: 'auto',
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
@@ -164,16 +215,13 @@ export const allPageListTitleWrapper = style({
   color: 'var(--affine-text-primary-color)',
   display: 'flex',
   alignItems: 'center',
-  '::after': {
+  width: '100%',
-    content: '""',
+  height: '100%',
-    display: 'block',
+  '@container': {
-    width: '100%',
+    [`${headerVanillaContainer} (max-width: 900px)`]: {
-    height: '1px',
+      alignItems: 'flex-start',
-    background: 'var(--affine-border-color)',
+      marginTop: '8px',
-    position: 'absolute',
+    },
-    bottom: 0,
-    left: 0,
-    margin: '0 1px',
   },
 });
 export const pageListTitleIcon = style({
@@ -220,30 +268,36 @@ export const windowAppControlsWrapper = style({
   gap: '2px',
   transform: 'translateX(8px)',
   height: '100%',
+  position: 'absolute',
+  right: '14px',
 });
 
 export const windowAppControl = style({
   WebkitAppRegion: 'no-drag',
   cursor: 'pointer',
   display: 'inline-flex',
-  width: '42px',
+  width: '51px',
-  height: 'calc(100% - 10px)',
-  paddingTop: '10px',
   alignItems: 'center',
   justifyContent: 'center',
   borderRadius: '0',
   selectors: {
     '&[data-type="close"]': {
       width: '56px',
-      paddingRight: '14px',
+      paddingRight: '5px',
-      marginRight: '-14px',
+      marginRight: '-12px',
     },
     '&[data-type="close"]:hover': {
-      background: 'var(--affine-error-color)',
+      background: 'var(--affine-windows-close-button)',
-      color: '#FFFFFF',
+      color: 'var(--affine-pure-white)',
     },
     '&:hover': {
-      background: 'var(--affine-background-tertiary-color)',
+      background: 'var(--affine-hover-color)',
+    },
+  },
+  '@container': {
+    [`${headerVanillaContainer} (max-width: 900px)`]: {
+      height: '50px',
+      paddingTop: '0',
     },
   },
 } as ComplexStyleRule);

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

@@ -17,23 +17,18 @@ export const navWrapperStyle = style({
   paddingBottom: '8px',
   backgroundColor: 'transparent',
   '@media': {
-    [`(max-width: ${floatingMaxWidth}px)`]: {
-      position: 'absolute',
-      width: `calc(${navWidthVar})`,
-      zIndex: 4,
-      backgroundColor: 'var(--affine-background-primary-color)',
-      selectors: {
-        '&[data-open="false"]': {
-          marginLeft: `calc((10vw + ${navWidthVar}) * -1)`,
-        },
-      },
-    },
     print: {
       display: 'none',
       zIndex: -1,
     },
   },
   selectors: {
+    '&[data-is-floating="true"]': {
+      position: 'absolute',
+      width: `calc(${navWidthVar})`,
+      zIndex: 4,
+      backgroundColor: 'var(--affine-background-primary-color)',
+    },
     '&[data-open="false"]': {
       marginLeft: `calc(${navWidthVar} * -1)`,
     },
@@ -93,17 +88,15 @@ export const sidebarFloatMaskStyle = style({
   right: '100%',
   bottom: 0,
   background: 'var(--affine-background-modal-color)',
-  '@media': {
+  selectors: {
-    [`(max-width: ${floatingMaxWidth}px)`]: {
+    '&[data-open="true"][data-is-floating="true"]': {
-      selectors: {
+      opacity: 1,
-        '&[data-open="true"]': {
+      pointerEvents: 'auto',
-          opacity: 1,
+      right: '0',
-          pointerEvents: 'auto',
+      zIndex: 3,
-          right: '0',
-          zIndex: 3,
-        },
-      },
     },
+  },
+  '@media': {
     print: {
       display: 'none',
     },

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

@@ -59,18 +59,22 @@ export function AppSidebar(props: AppSidebarProps): ReactElement {
 
   useEffect(() => {
     function onResize() {
-      const { matches } = window.matchMedia(
+      const isFloatingMaxWidth = window.matchMedia(
         `(max-width: ${floatingMaxWidth}px)`
-      );
+      ).matches;
+      const isOverflowWidth = window.matchMedia(
+        `(max-width: ${appSidebarWidth / 0.4}px)`
+      ).matches;
+      const isFloating = isFloatingMaxWidth || isOverflowWidth;
       if (
         open === undefined &&
         localStorage.getItem(APP_SIDEBAR_OPEN) === null
       ) {
         // give the initial value,
         // so that the sidebar can be closed on mobile by default
-        setOpen(!matches);
+        setOpen(!isFloating);
       }
-      setAppSidebarFloating(matches && !!open);
+      setAppSidebarFloating(isFloating && !!open);
     }
 
     onResize();
@@ -78,7 +82,7 @@ export function AppSidebar(props: AppSidebarProps): ReactElement {
     return () => {
       window.removeEventListener('resize', onResize);
     };
-  }, [open, setAppSidebarFloating, setOpen]);
+  }, [appSidebarWidth, open, setAppSidebarFloating, setOpen]);
 
   // disable animation to avoid UI flash
   const enableAnimation = useEnableAnimation();
@@ -99,6 +103,7 @@ export function AppSidebar(props: AppSidebarProps): ReactElement {
         })}
         data-open={open}
         data-is-macos-electron={isMacosDesktop}
+        data-is-floating={appSidebarFloating}
         data-enable-animation={enableAnimation && !isResizing}
       >
         <nav className={navStyle} ref={navRef} data-testid="app-sidebar">

packages/component/src/components/page-list/view/collection-list.css.ts

@@ -21,7 +21,7 @@ export const viewButton = style({
   fontSize: 'var(--affine-font-xs)',
   background: 'var(--affine-white)',
   ['WebkitAppRegion' as string]: 'no-drag',
-  maxWidth: '200px',
+  maxWidth: '150px',
   color: 'var(--affine-text-secondary-color)',
   border: '1px solid var(--affine-border-color)',
   transition: 'margin-left 0.2s ease-in-out',
@@ -30,15 +30,6 @@ export const viewButton = style({
     background: 'var(--affine-hover-color)',
   },
   marginRight: '20px',
-  '@media': {
-    '(max-width: 1200px)': {
-      maxWidth: '100px',
-    },
-    '(max-width: 900px)': {
-      maxWidth: '150px',
-      marginRight: '10px',
-    },
-  },
 });
 globalStyle(`${viewButton} > span`, {
   display: 'block',
@@ -74,6 +65,8 @@ export const deleteOption = style({
 export const filterButton = style({
   borderRadius: '8px',
   height: '100%',
+  width: '100%',
+  marginRight: '20px',
   padding: '4px 8px',
   fontSize: 'var(--affine-font-xs)',
   background: 'var(--affine-white)',