fix: some style updates (#2348)

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

@@ -1,5 +1,8 @@
 import { BrowserWarning } from '@affine/component/affine-banner';
-import { appSidebarOpenAtom } from '@affine/component/app-sidebar';
+import {
+  appSidebarFloatingAtom,
+  appSidebarOpenAtom,
+} from '@affine/component/app-sidebar';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { WorkspaceFlavour } from '@affine/workspace/type';
 import { CloseIcon, MinusIcon, RoundedRectangleIcon } from '@blocksuite/icons';
@@ -164,6 +167,8 @@ export const Header = forwardRef<
   const open = useAtomValue(appSidebarOpenAtom);
   const t = useAFFiNEI18N();
 
+  const appSidebarFloating = useAtomValue(appSidebarFloatingAtom);
+
   const mode = useCurrentMode();
   return (
     <div
@@ -171,6 +176,7 @@ export const Header = forwardRef<
       ref={ref}
       data-has-warning={showWarning}
       data-open={open}
+      data-sidebar-floating={appSidebarFloating}
       {...props}
     >
       {showGuideDownloadClientTip ? (

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

@@ -1,3 +1,4 @@
+import type { ComplexStyleRule } from '@vanilla-extract/css';
 import { style } from '@vanilla-extract/css';
 
 export const headerContainer = style({
@@ -6,15 +7,16 @@ export const headerContainer = style({
   position: 'sticky',
   top: 0,
   background: 'var(--affine-background-primary-color)',
-  // @ts-ignore
-  WebkitAppRegion: 'drag',
   zIndex: 'var(--affine-z-index-popover)',
   selectors: {
     '&[data-has-warning="true"]': {
       height: '96px',
     },
+    '&[data-sidebar-floating="false"]': {
+      WebkitAppRegion: 'drag',
+    },
   },
-});
+} as ComplexStyleRule);
 
 export const header = style({
   flexShrink: 0,
@@ -59,13 +61,12 @@ export const title = style({
     '(max-width: 768px)': {
       selectors: {
         '&[data-open="true"]': {
-          // @ts-ignore
           WebkitAppRegion: 'no-drag',
         },
       },
     },
   },
-});
+} as ComplexStyleRule);
 
 export const titleWrapper = style({
   height: '100%',
@@ -187,7 +188,6 @@ export const windowAppControlsWrapper = style({
 });
 
 export const windowAppControl = style({
-  // @ts-ignore
   WebkitAppRegion: 'no-drag',
   cursor: 'pointer',
   display: 'inline-flex',
@@ -204,4 +204,4 @@ export const windowAppControl = style({
       background: 'var(--affine-background-tertiary-color)',
     },
   },
-});
+} as ComplexStyleRule);

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

@@ -20,13 +20,12 @@ import {
   ShareIcon,
 } from '@blocksuite/icons';
 import type { Page } from '@blocksuite/store';
-import { useAtomValue } from 'jotai';
+import { useAtom, useAtomValue } from 'jotai';
 import type { ReactElement } from 'react';
 import type React from 'react';
 import { useCallback, useEffect } from 'react';
 
 import type { AllWorkspace } from '../../shared';
-import ChangeLog from '../pure/workspace-slider-bar/changeLog';
 import FavoriteList from '../pure/workspace-slider-bar/favorite/favorite-list';
 import { WorkspaceSelector } from '../pure/workspace-slider-bar/WorkspaceSelector';
 
@@ -97,13 +96,24 @@ export const RootAppSidebar = ({
     }
   }, [onClickNewPage]);
 
-  const sidebarOpen = useAtomValue(appSidebarOpenAtom);
+  const [sidebarOpen, setSidebarOpen] = useAtom(appSidebarOpenAtom);
   useEffect(() => {
     if (environment.isDesktop && typeof sidebarOpen === 'boolean') {
       window.apis?.ui.handleSidebarVisibilityChange(sidebarOpen);
     }
   }, [sidebarOpen]);
 
+  useEffect(() => {
+    const keydown = (e: KeyboardEvent) => {
+      if ((e.key === '/' && e.metaKey) || (e.key === '/' && e.ctrlKey)) {
+        setSidebarOpen(!sidebarOpen);
+      }
+    };
+    document.addEventListener('keydown', keydown, { capture: true });
+    return () =>
+      document.removeEventListener('keydown', keydown, { capture: true });
+  }, [sidebarOpen, setSidebarOpen]);
+
   const clientUpdateAvailable = useAtomValue(updateAvailableAtom);
 
   return (
@@ -114,7 +124,6 @@ export const RootAppSidebar = ({
             currentWorkspace={currentWorkspace}
             onClick={onOpenWorkspaceListModal}
           />
-          <ChangeLog />
           <QuickSearchInput
             data-testid="slider-bar-quick-search-button"
             onClick={onOpenQuickSearchModal}

apps/web/src/layouts/workspace-layout.tsx

@@ -1,7 +1,4 @@
-import {
-  appSidebarOpenAtom,
-  appSidebarResizingAtom,
-} from '@affine/component/app-sidebar';
+import { appSidebarResizingAtom } from '@affine/component/app-sidebar';
 import {
   AppContainer,
   MainContainer,
@@ -340,7 +337,6 @@ export const WorkspaceLayoutInner: FC<PropsWithChildren> = ({ children }) => {
   }, [setOpenQuickSearchModalAtom]);
 
   const resizing = useAtomValue(appSidebarResizingAtom);
-  const sidebarOpen = useAtomValue(appSidebarOpenAtom);
 
   return (
     <>
@@ -364,7 +360,7 @@ export const WorkspaceLayoutInner: FC<PropsWithChildren> = ({ children }) => {
           currentPath={router.asPath.split('?')[0]}
           paths={isPublicWorkspace ? publicPathGenerator : pathGenerator}
         />
-        <MainContainer sidebarOpen={sidebarOpen}>
+        <MainContainer>
           {children}
           <ToolContainer>
             {/* fixme(himself65): remove this */}

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

@@ -13,19 +13,17 @@ export const navWrapperStyle = style({
   width: navWidthVar,
   minWidth: navWidthVar,
   height: '100%',
-  backgroundColor: 'var(--affine-background-secondary-color)',
+  zIndex: 2,
+  backgroundColor: 'transparent',
   '@media': {
     [`(max-width: ${floatingMaxWidth}px)`]: {
       position: 'absolute',
       width: `calc(${navWidthVar})`,
-      zIndex: 2,
+      backgroundColor: 'var(--affine-background-primary-color)',
       selectors: {
         '&[data-open="false"]': {
           marginLeft: `calc((10vw + ${navWidthVar}) * -1)`,
         },
-        '&[data-is-macos-electron="true"]': {
-          backgroundColor: 'var(--affine-background-primary-color)',
-        },
       },
     },
   },
@@ -33,9 +31,6 @@ export const navWrapperStyle = style({
     '&[data-open="false"]': {
       marginLeft: `calc(${navWidthVar} * -1)`,
     },
-    '&[data-is-macos-electron="true"]': {
-      backgroundColor: 'transparent',
-    },
     '&[data-enable-animation="true"]': {
       transition: 'margin-left .3s, width .3s',
     },
@@ -60,18 +55,9 @@ export const navHeaderStyle = style({
   justifyContent: 'space-between',
   alignItems: 'center',
   gap: '32px',
-  '@media': {
-    [`(max-width: ${floatingMaxWidth}px)`]: {
-      selectors: {
-        '&[data-open="true"]': {
-          WebkitAppRegion: 'no-drag',
-        },
-      },
-    } as ComplexStyleRule,
-  },
+  WebkitAppRegion: 'drag',
   selectors: {
     '&[data-is-macos-electron="true"]': {
-      WebkitAppRegion: 'drag',
       justifyContent: 'flex-end',
     },
   },

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

@@ -8,6 +8,8 @@ export const appSidebarOpenAtom = atomWithStorage(
   APP_SIDEBAR_OPEN,
   undefined as boolean | undefined
 );
+export const appSidebarFloatingAtom = atom(false);
+
 export const appSidebarResizingAtom = atom(false);
 export const appSidebarWidthAtom = atomWithStorage(
   'app-sidebar-width',

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

@@ -14,6 +14,7 @@ import {
 } from './index.css';
 import {
   APP_SIDEBAR_OPEN,
+  appSidebarFloatingAtom,
   appSidebarOpenAtom,
   appSidebarResizingAtom,
   appSidebarWidthAtom,
@@ -37,21 +38,36 @@ function useEnableAnimation() {
 export function AppSidebar(props: AppSidebarProps): ReactElement {
   const [open, setOpen] = useAtom(appSidebarOpenAtom);
   const appSidebarWidth = useAtomValue(appSidebarWidthAtom);
+  const [appSidebarFloating, setAppSidebarFloating] = useAtom(
+    appSidebarFloatingAtom
+  );
   const initialRender = open === undefined;
 
   const isResizing = useAtomValue(appSidebarResizingAtom);
   const navRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
-    if (open === undefined && localStorage.getItem(APP_SIDEBAR_OPEN) === null) {
-      // give the initial value,
-      // so that the sidebar can be closed on mobile by default
+    function onResize() {
       const { matches } = window.matchMedia(
-        `(min-width: ${floatingMaxWidth}px)`
+        `(max-width: ${floatingMaxWidth}px)`
       );
-      setOpen(matches);
+      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);
+      }
+      setAppSidebarFloating(matches && !!open);
     }
-  }, [open, setOpen]);
+
+    onResize();
+    window.addEventListener('resize', onResize);
+    return () => {
+      window.removeEventListener('resize', onResize);
+    };
+  }, [open, setAppSidebarFloating, setOpen]);
 
   // disable animation to avoid UI flash
   const enableAnimation = useEnableAnimation();
@@ -85,6 +101,7 @@ export function AppSidebar(props: AppSidebarProps): ReactElement {
       <div
         data-testid="app-sidebar-float-mask"
         data-open={open}
+        data-is-floating={appSidebarFloating}
         className={sidebarFloatMaskStyle}
         onClick={() => setOpen(false)}
       />
@@ -99,4 +116,9 @@ export { AppSidebarFallback } from './fallback';
 export * from './menu-item';
 export * from './quick-search-input';
 export * from './sidebar-containers';
-export { appSidebarOpenAtom, appSidebarResizingAtom, updateAvailableAtom };
+export {
+  appSidebarFloatingAtom,
+  appSidebarOpenAtom,
+  appSidebarResizingAtom,
+  updateAvailableAtom,
+};

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

@@ -15,7 +15,6 @@ export const root = style({
       background: 'var(--affine-hover-color)',
     },
     '&[data-active="true"]': {
-      color: 'var(--affine-primary-color)',
       background: 'var(--affine-hover-color)',
     },
     '&[data-disabled="true"]': {

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

@@ -3,10 +3,9 @@ import { style } from '@vanilla-extract/css';
 export const resizerContainer = style({
   position: 'absolute',
   right: 0,
-  top: 0,
-  bottom: 0,
-  width: '10px',
-  height: '100%',
+  top: '16px',
+  bottom: '16px',
+  width: '16px',
   zIndex: 'calc(var(--affine-z-index-modal) + 1)',
   transform: 'translateX(50%)',
   backgroundColor: 'transparent',
@@ -24,6 +23,7 @@ export const resizerContainer = style({
       opacity: 1,
     },
     '&[data-resizing="true"]': {
+      opacity: 1,
       transition: 'width .3s, min-width .3s, max-width .3s',
     },
     '&[data-open="false"]': {
@@ -38,10 +38,8 @@ export const resizerContainer = style({
 export const resizerInner = style({
   position: 'absolute',
   height: '100%',
-  width: '2px',
-  left: '3px',
-  backgroundColor: 'var(--affine-border-color)',
-  selectors: {
-    [`${resizerContainer}:hover &`]: {},
-  },
+  width: '4px',
+  left: '6px',
+  borderRadius: '4px',
+  backgroundColor: 'var(--affine-primary-color)',
 });

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

@@ -4,7 +4,7 @@ export const baseContainer = style({
   padding: '12px 16px',
   display: 'flex',
   flexFlow: 'column nowrap',
-  rowGap: '8px',
+  rowGap: '4px',
 });
 
 export const scrollableContainerRoot = style({

packages/component/src/components/internal-lottie/index.tsx

@@ -90,5 +90,5 @@ export const InternalLottie: FC<CustomLottieProps> = ({
     }
   }, [isStopped, speed]);
 
-  return <div ref={element} style={{ width, height }}></div>;
+  return <div ref={element} style={{ width, height, lineHeight: 1 }}></div>;
 };

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

@@ -13,7 +13,7 @@ export const appStyle = style({
     '&[data-is-resizing="true"]': {
       cursor: 'col-resize',
     },
-    '&[data-noise-background="true"]:before': {
+    '&:before': {
       content: '""',
       position: 'absolute',
       inset: 0,
@@ -59,9 +59,6 @@ export const mainContainerStyle = style({
       overflow: 'hidden',
       boxShadow: 'var(--affine-shadow-1)',
     },
-    '&[data-is-desktop="true"][data-is-sidebar-open="true"]': {
-      marginLeft: '2px',
-    },
   },
 });
 
@@ -72,7 +69,7 @@ export const toolStyle = style({
   zIndex: 'var(--affine-z-index-popover)',
   '@media': {
     [breakpoints.down('md', true)]: {
-      right: 'calc((100vw - 640px) * 3 / 19 + 5px)',
+      right: 'calc((100vw - 640px) * 3 / 19 + 14px)',
     },
     [breakpoints.down('sm', true)]: {
       right: '5px',

packages/component/src/components/workspace/index.tsx

@@ -23,7 +23,6 @@ export const AppContainer = (props: WorkspaceRootProps): ReactElement => {
 
 export type MainContainerProps = PropsWithChildren<{
   className?: string;
-  sidebarOpen?: boolean;
 }>;
 
 export const MainContainer = (props: MainContainerProps): ReactElement => {
@@ -31,7 +30,6 @@ export const MainContainer = (props: MainContainerProps): ReactElement => {
     <div
       className={clsx(mainContainerStyle, 'main-container', props.className)}
       data-is-desktop={environment.isDesktop}
-      data-is-sidebar-open={props.sidebarOpen}
     >
       {props.children}
     </div>

tests/parallels/open-affine.spec.ts

@@ -26,33 +26,6 @@ test('Open last workspace when back to affine', async ({ page }) => {
   expect(currentWorkspaceName).toEqual('New Workspace 2');
 });
 
-test('Open affine in first time after updated', async ({ page }) => {
-  await openHomePage(page);
-  const changeLogItem = page.locator('[data-testid=change-log]');
-  await expect(changeLogItem).toBeVisible();
-  const closeButton = page.locator('[data-testid=change-log-close-button]');
-  await closeButton.click();
-  await expect(changeLogItem).not.toBeVisible();
-  await page.goto('http://localhost:8080');
-  const currentChangeLogItem = page.locator('[data-testid=change-log]');
-  await expect(currentChangeLogItem).not.toBeVisible();
-});
-test('Click right-bottom corner change log icon', async ({ page }) => {
-  await openHomePage(page);
-  await waitMarkdownImported(page);
-  await page.locator('[data-testid=help-island]').click();
-  const editorRightBottomChangeLog = page.locator(
-    '[data-testid=right-bottom-change-log-icon]'
-  );
-  await page.waitForTimeout(50);
-  expect(await editorRightBottomChangeLog.isVisible()).toEqual(true);
-  await page.getByTestId('all-pages').click();
-  const normalRightBottomChangeLog = page.locator(
-    '[data-testid=right-bottom-change-log-icon]'
-  );
-  expect(await normalRightBottomChangeLog.isVisible()).toEqual(true);
-});
-
 test('Download client tip', async ({ page }) => {
   await openHomePage(page);
   const downloadClientTipItem = page.locator(