fix: some style issues to sidebar and switch (#4046)

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

apps/core/src/atoms/settings.ts

@@ -49,7 +49,7 @@ export const fontStyleOptions = [
 }[];
 
 const appSettingBaseAtom = atomWithStorage<AppSetting>('affine-settings', {
-  clientBorder: globalThis.platform !== 'win32',
+  clientBorder: environment.isDesktop ? !environment.isWindows : false,
   fullWidthLayout: false,
   windowFrameStyle: 'frameless',
   fontStyle: 'Sans',

apps/core/src/components/affine/app-container.tsx

@@ -11,7 +11,11 @@ export const AppContainer = (props: WorkspaceRootProps) => {
   return (
     <AppContainerWithoutSettings
       useNoisyBackground={appSettings.enableNoisyBackground}
-      useBlurBackground={!appSettings.enableBlurBackground}
+      useBlurBackground={
+        appSettings.enableBlurBackground &&
+        environment.isDesktop &&
+        environment.isMacOs
+      }
       {...props}
     />
   );

apps/core/src/components/affine/setting-modal/general-setting/appearance/index.tsx

@@ -212,17 +212,19 @@ export const AppearanceSettings = () => {
               }
             />
           </SettingRow>
-          <SettingRow
+          {environment.isMacOs && (
-            name={t['com.affine.settings.translucent-style']()}
+            <SettingRow
-            desc={t['com.affine.settings.translucent-style-description']()}
+              name={t['com.affine.settings.translucent-style']()}
-          >
+              desc={t['com.affine.settings.translucent-style-description']()}
-            <Switch
+            >
-              checked={appSettings.enableBlurBackground}
+              <Switch
-              onChange={checked =>
+                checked={appSettings.enableBlurBackground}
-                changeSwitch('enableBlurBackground', checked)
+                onChange={checked =>
-              }
+                  changeSwitch('enableBlurBackground', checked)
-            />
+                }
-          </SettingRow>
+              />
+            </SettingRow>
+          )}
         </SettingWrapper>
       ) : null}
     </>

apps/core/src/components/affine/setting-modal/setting-sidebar/style.css.ts

@@ -123,8 +123,8 @@ globalStyle(`${accountButton} .avatar.not-sign`, {
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
-  borderColor: 'var(--affine-border-color)',
+  borderColor: 'var(--affine-icon-secondary)',
-  color: 'var(--affine-border-color)',
+  color: 'var(--affine-icon-secondary)',
   background: 'var(--affine-white)',
 });
 globalStyle(`${accountButton} .content`, {

apps/core/src/components/pure/header/index.tsx

@@ -1,4 +1,3 @@
-import { Wrapper } from '@affine/component';
 import {
   appSidebarFloatingAtom,
   appSidebarOpenAtom,
@@ -66,12 +65,8 @@ export const Header = forwardRef<HTMLDivElement, HeaderPros>(function Header(
           })}
         >
           <div className={clsx(style.headerItem, 'top-item')}>
-            <div ref={sidebarSwitchRef}>
+            <div ref={sidebarSwitchRef} style={{ marginRight: open ? 0 : 20 }}>
-              {!open && (
+              <SidebarSwitch show={!open} />
-                <Wrapper marginRight={20}>
-                  <SidebarSwitch />
-                </Wrapper>
-              )}
             </div>
           </div>
           <div className={clsx(style.headerItem, 'left')}>

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

@@ -77,10 +77,10 @@ export const collapsibleContent = style({
   marginTop: '4px',
   selectors: {
     '&[data-state="open"]': {
-      animation: `${slideDown} 0.2s ease-out`,
+      animation: `${slideDown} 0.2s ease-in-out`,
     },
     '&[data-state="closed"]': {
-      animation: `${slideUp} 0.2s ease-out`,
+      animation: `${slideUp} 0.2s ease-in-out`,
     },
   },
 });

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

@@ -155,7 +155,13 @@ export const RootAppSidebar = ({
     <>
       <AppSidebar
         router={router}
-        hasBackground={!appSettings.enableBlurBackground}
+        hasBackground={
+          !(
+            appSettings.enableBlurBackground &&
+            environment.isDesktop &&
+            environment.isMacOs
+          )
+        }
       >
         <SidebarContainer>
           <NoSsr>

apps/storybook/src/stories/app-sidebar.stories.tsx

@@ -2,6 +2,7 @@ import {
   AppSidebar,
   AppSidebarFallback,
   appSidebarOpenAtom,
+  SidebarSwitch,
 } from '@affine/component/app-sidebar';
 import { AddPageButton } from '@affine/component/app-sidebar';
 import { CategoryDivider } from '@affine/component/app-sidebar';
@@ -12,13 +13,8 @@ import {
   SidebarContainer,
   SidebarScrollableContainer,
 } from '@affine/component/app-sidebar';
-import {
+import { DeleteTemporarilyIcon, SettingsIcon } from '@blocksuite/icons';
-  DeleteTemporarilyIcon,
-  SettingsIcon,
-  SidebarIcon,
-} from '@blocksuite/icons';
 import type { Meta, StoryFn } from '@storybook/react';
-import { IconButton } from '@toeverything/components/button';
 import { useAtom } from 'jotai';
 import { type PropsWithChildren, useState } from 'react';
 import { MemoryRouter } from 'react-router-dom';
@@ -45,20 +41,11 @@ const Container = ({ children }: PropsWithChildren) => (
   </MemoryRouter>
 );
 const Main = () => {
-  const [open, setOpen] = useAtom(appSidebarOpenAtom);
+  const [open] = useAtom(appSidebarOpenAtom);
   return (
     <div>
       <div className={navHeaderStyle}>
-        {!open && (
+        <SidebarSwitch show={!open} />
-          <IconButton
-            size="large"
-            onClick={() => {
-              setOpen(true);
-            }}
-          >
-            <SidebarIcon width={24} height={24} />
-          </IconButton>
-        )}
       </div>
     </div>
   );

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

@@ -33,7 +33,7 @@ export const navWrapperStyle = style({
       marginLeft: `calc(${navWidthVar} * -1)`,
     },
     '&[data-enable-animation="true"]': {
-      transition: 'margin-left .3s, width .3s',
+      transition: 'margin-left .3s .05s, width .3s .05s',
     },
     '&.has-background': {
       backgroundColor: 'var(--affine-white-60)',

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

@@ -102,8 +102,10 @@ export function AppSidebar(props: AppSidebarProps): ReactElement {
             (environment.isDesktop && props.hasBackground),
         })}
         data-open={open}
+        data-testid="app-sidebar-wrapper"
         data-is-macos-electron={isMacosDesktop}
         data-is-floating={appSidebarFloating}
+        data-has-background={props.hasBackground}
         data-enable-animation={enableAnimation && !isResizing}
       >
         <nav className={navStyle} ref={navRef} data-testid="app-sidebar">

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

@@ -19,10 +19,13 @@ export const SidebarHeader = (props: SidebarHeaderProps) => {
   const open = useAtomValue(appSidebarOpenAtom);
   return (
     <div className={navHeaderStyle} data-open={open}>
-      <div style={{ flex: 1 }} />
+      {environment.isDesktop && environment.isMacOs && (
-      {open && <SidebarSwitch />}
+        <div style={{ flex: 1 }} />
+      )}
+      <SidebarSwitch show={open} />
       {environment.isDesktop && (
         <>
+          {!environment.isMacOs && <div style={{ flex: 1 }} />}
           <IconButton
             data-testid="app-sidebar-arrow-button-back"
             disabled={props.router?.history.current === 0}
@@ -47,8 +50,6 @@ export const SidebarHeader = (props: SidebarHeaderProps) => {
           >
             <ArrowRightSmallIcon />
           </IconButton>
-
-          {!environment.isMacOs && <div style={{ flex: 1 }} />}
         </>
       )}
     </div>

packages/component/src/components/app-sidebar/sidebar-header/sidebar-switch.css.ts

@@ -0,0 +1,16 @@
+import { style } from '@vanilla-extract/css';
+
+export const sidebarSwitch = style({
+  opacity: 0,
+  width: 0,
+  overflow: 'hidden',
+  pointerEvents: 'none',
+  transition: 'opacity .3s ease-in-out',
+  selectors: {
+    '&[data-show=true]': {
+      opacity: 1,
+      width: '32px',
+      pointerEvents: 'auto',
+    },
+  },
+});

packages/component/src/components/app-sidebar/sidebar-header/sidebar-switch.tsx

@@ -6,8 +6,9 @@ import { useAtom } from 'jotai';
 import { useRef } from 'react';
 
 import { appSidebarOpenAtom } from '../index.jotai';
+import * as styles from './sidebar-switch.css';
 
-export const SidebarSwitch = () => {
+export const SidebarSwitch = ({ show }: { show: boolean }) => {
   const [open, setOpen] = useAtom(appSidebarOpenAtom);
   const t = useAFFiNEI18N();
   const ref = useRef(null);
@@ -18,12 +19,14 @@ export const SidebarSwitch = () => {
   return (
     <Tooltip
       content={tooltipContent + ' ' + collapseKeyboardShortcuts}
-      side="right"
+      side={open ? 'bottom' : 'right'}
       portalOptions={{
         container: ref.current,
       }}
     >
       <IconButton
+        className={styles.sidebarSwitch}
+        data-show={show}
         size="large"
         data-testid={`app-sidebar-arrow-button-${open ? 'collapse' : 'expand'}`}
         style={{

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

@@ -11,12 +11,13 @@ export const appStyle = style({
   display: 'flex',
   flexGrow: '1',
   flexDirection: 'row',
+  backgroundColor: 'var(--affine-background-primary-color)',
   selectors: {
     '&[data-is-resizing="true"]': {
       cursor: 'col-resize',
     },
     '&.blur-background': {
-      backgroundColor: 'var(--affine-background-primary-color)',
+      backgroundColor: 'transparent',
     },
     '&.noisy-background::before': {
       content: '""',
@@ -70,7 +71,7 @@ export const mainContainerStyle = style({
   backgroundColor: 'var(--affine-background-primary-color)',
   selectors: {
     '&[data-show-padding="true"]': {
-      margin: '8px 8px 8px 0',
+      margin: '8px',
       borderRadius: '5px',
       overflow: 'hidden',
       boxShadow: 'var(--affine-shadow-1)',
@@ -119,6 +120,17 @@ globalStyle(`${mainContainerStyle} > div[data-panel-group] > div[data-panel]`, {
   },
 });
 
+// Hack margin so that it works normally when sidebar is closed
+globalStyle(
+  `[data-testid=app-sidebar-wrapper][data-open=true][data-is-floating=false][data-has-background=false]
+ ~ ${mainContainerStyle}[data-show-padding="true"]`,
+  {
+    // transition added here to prevent the transition from being applied on page load
+    transition: 'margin-left .3s ease-in-out',
+    marginLeft: '0',
+  }
+);
+
 export const toolStyle = style({
   position: 'fixed',
   right: '30px',

tests/affine-local/e2e/layout.spec.ts

@@ -6,7 +6,9 @@ import { expect } from '@playwright/test';
 test('Collapse Sidebar', async ({ page }) => {
   await openHomePage(page);
   await waitEditorLoad(page);
-  await page.getByTestId('app-sidebar-arrow-button-collapse').click();
+  await page
+    .locator('[data-testid=app-sidebar-arrow-button-collapse][data-show=true]')
+    .click();
   const sliderBarArea = page.getByTestId('app-sidebar');
   await expect(sliderBarArea).not.toBeInViewport();
 });
@@ -14,11 +16,15 @@ test('Collapse Sidebar', async ({ page }) => {
 test('Expand Sidebar', async ({ page }) => {
   await openHomePage(page);
   await waitEditorLoad(page);
-  await page.getByTestId('app-sidebar-arrow-button-collapse').click();
+  await page
+    .locator('[data-testid=app-sidebar-arrow-button-collapse][data-show=true]')
+    .click();
   const sliderBarArea = page.getByTestId('sliderBar-inner');
   await expect(sliderBarArea).not.toBeInViewport();
 
-  await page.getByTestId('app-sidebar-arrow-button-expand').click();
+  await page
+    .locator('[data-testid=app-sidebar-arrow-button-expand][data-show=true]')
+    .click();
   await expect(sliderBarArea).toBeInViewport();
 });
 

tests/affine-local/e2e/subpage.spec.ts

@@ -6,7 +6,9 @@ import { expect } from '@playwright/test';
 test('Create subpage', async ({ page }) => {
   await openHomePage(page);
   await waitEditorLoad(page);
-  await page.getByTestId('app-sidebar-arrow-button-collapse').click();
+  await page
+    .locator('[data-testid=app-sidebar-arrow-button-collapse][data-show=true]')
+    .click();
   const sliderBarArea = page.getByTestId('sliderBar-inner');
   await expect(sliderBarArea).not.toBeInViewport();
 });