feat(core): adjust app sidebar's style (#6162)

packages/frontend/component/src/components/resize-panel/resize-panel.css.ts

@@ -60,7 +60,7 @@ export const resizeHandleContainer = style({
   opacity: 0,
   display: 'flex',
   justifyContent: 'center',
-  cursor: 'ew-resize',
+  cursor: 'col-resize',
   '@media': {
     '(max-width: 600px)': {
       // do not allow resizing on small screen

packages/frontend/core/src/components/app-sidebar/index.tsx

@@ -26,7 +26,8 @@ import {
 import { SidebarHeader } from './sidebar-header';
 
 export type AppSidebarProps = PropsWithChildren<{
-  hasBackground?: boolean;
+  clientBorder?: boolean;
+  translucentUI?: boolean;
 }>;
 
 export type History = {
@@ -37,7 +38,11 @@ export type History = {
 const MAX_WIDTH = 480;
 const MIN_WIDTH = 256;
 
-export function AppSidebar(props: AppSidebarProps): ReactElement {
+export function AppSidebar({
+  children,
+  clientBorder,
+  translucentUI,
+}: AppSidebarProps): ReactElement {
   const [open, setOpen] = useAtom(appSidebarOpenAtom);
   const [width, setWidth] = useAtom(appSidebarWidthAtom);
   const [floating, setFloating] = useAtom(appSidebarFloatingAtom);
@@ -70,9 +75,9 @@ export function AppSidebar(props: AppSidebarProps): ReactElement {
     };
   }, [open, setFloating, setOpen, width]);
 
-  const transparent = environment.isDesktop && !props.hasBackground;
   const isMacosDesktop = environment.isDesktop && environment.isMacOs;
-  const hasRightBorder = !environment.isDesktop || !transparent;
+  const hasRightBorder =
+    !environment.isDesktop || (!clientBorder && !translucentUI);
 
   return (
     <>
@@ -88,17 +93,17 @@ export function AppSidebar(props: AppSidebarProps): ReactElement {
         onResizing={setResizing}
         onWidthChange={setWidth}
         className={navWrapperStyle}
-        resizeHandleVerticalPadding={transparent ? 16 : 0}
-        data-transparent={transparent}
+        resizeHandleOffset={clientBorder ? 8 : 0}
+        resizeHandleVerticalPadding={clientBorder ? 16 : 0}
+        data-transparent
         data-has-border={hasRightBorder}
         data-testid="app-sidebar-wrapper"
         data-is-macos-electron={isMacosDesktop}
-        data-has-background={environment.isDesktop && props.hasBackground}
       >
         <nav className={navStyle} data-testid="app-sidebar">
           <SidebarHeader />
           <div className={navBodyStyle} data-testid="sliderBar-inner">
-            {props.children}
+            {children}
           </div>
         </nav>
       </ResizePanel>

packages/frontend/core/src/components/root-app-sidebar/index.tsx

@@ -169,13 +169,8 @@ export const RootAppSidebar = ({
 
   return (
     <AppSidebar
-      hasBackground={
-        !(
-          appSettings.enableBlurBackground &&
-          environment.isDesktop &&
-          environment.isMacOs
-        )
-      }
+      clientBorder={appSettings.clientBorder}
+      translucentUI={appSettings.enableBlurBackground}
     >
       <MoveToTrash.ConfirmModal
         open={trashConfirmOpen}

packages/frontend/core/src/components/workspace/index.css.ts

@@ -21,7 +21,7 @@ export const appStyle = style({
       inset: 0,
       opacity: `var(--affine-noise-opacity, 0)`,
       backgroundRepeat: 'repeat',
-      backgroundSize: '3%',
+      backgroundSize: '50px',
       // todo: figure out how to use vanilla-extract webpack plugin to inject img url
       backgroundImage: `var(--noise-background)`,
     },
@@ -29,7 +29,7 @@ export const appStyle = style({
 });
 globalStyle(`html[data-theme="light"] ${appStyle}`, {
   vars: {
-    '--affine-noise-opacity': '0.35',
+    '--affine-noise-opacity': '0.2',
   },
 });
 globalStyle(`html[data-theme="dark"] ${appStyle}`, {
@@ -51,11 +51,14 @@ export const mainContainerStyle = style({
   flex: 1,
   overflow: 'hidden',
   maxWidth: '100%',
+  transition: 'margin-left 0.2s ease',
   selectors: {
-    '&[data-show-padding="true"]': {
+    '&[data-client-border="true"]': {
+      borderRadius: 6,
       margin: '8px',
       overflow: 'hidden',
       // todo: is this performance intensive?
+      // TODO: not match with design's shadow, theme missing
       filter: 'drop-shadow(0px 0px 4px rgba(66,65,73,.14))',
       '@media': {
         print: {
@@ -65,7 +68,10 @@ export const mainContainerStyle = style({
         },
       },
     },
-    '&[data-show-padding="true"]:before': {
+    '&[data-client-border="true"][data-side-bar-open="true"]': {
+      marginLeft: 0,
+    },
+    '&[data-client-border="true"]:before': {
       content: '""',
       position: 'absolute',
       height: '8px',

packages/frontend/core/src/components/workspace/index.tsx

@@ -1,8 +1,9 @@
 import { clsx } from 'clsx';
+import { useAtomValue } from 'jotai';
 import type { HTMLAttributes, PropsWithChildren, ReactElement } from 'react';
 import { forwardRef } from 'react';
 
-import { AppSidebarFallback } from '../app-sidebar';
+import { AppSidebarFallback, appSidebarOpenAtom } from '../app-sidebar';
 import { appStyle, mainContainerStyle, toolStyle } from './index.css';
 
 export type WorkspaceRootProps = PropsWithChildren<{
@@ -33,25 +34,25 @@ export const AppContainer = ({
 };
 
 export interface MainContainerProps extends HTMLAttributes<HTMLDivElement> {
-  className?: string;
-  padding?: boolean;
-  transparent?: boolean;
+  clientBorder?: boolean;
 }
 
 export const MainContainer = forwardRef<
   HTMLDivElement,
   PropsWithChildren<MainContainerProps>
 >(function MainContainer(
-  { className, padding, children, transparent, ...props },
+  { className, children, clientBorder, ...props },
   ref
 ): ReactElement {
+  const appSideBarOpen = useAtomValue(appSidebarOpenAtom);
   return (
     <div
       {...props}
       className={clsx(mainContainerStyle, className)}
       data-is-macos={environment.isDesktop && environment.isMacOs}
-      data-show-padding={!!padding}
-      data-transparent={transparent}
+      data-transparent={false}
+      data-client-border={clientBorder}
+      data-side-bar-open={appSideBarOpen}
       ref={ref}
     >
       {children}

packages/frontend/core/src/layouts/workspace-layout.tsx

@@ -18,7 +18,7 @@ import {
 import { useAtom, useAtomValue, useSetAtom } from 'jotai';
 import type { PropsWithChildren, ReactNode } from 'react';
 import { lazy, Suspense, useCallback, useEffect, useState } from 'react';
-import { matchPath, useParams } from 'react-router-dom';
+import { matchPath } from 'react-router-dom';
 import { Map as YMap } from 'yjs';
 
 import { openQuickSearchModalAtom, openSettingModalAtom } from '../atoms';
@@ -152,10 +152,6 @@ export const WorkspaceLayoutInner = ({ children }: PropsWithChildren) => {
   const handleDragEnd = useSidebarDrag();
 
   const { appSettings } = useAppSettingHelper();
-  const { pageId } = useParams();
-
-  // todo: refactor this that the root layout do not need to check route state
-  const isInPageDetail = !!pageId;
 
   const upgradeStatus = useWorkspaceStatus(currentWorkspace, s => s.upgrade);
 
@@ -185,10 +181,7 @@ export const WorkspaceLayoutInner = ({ children }: PropsWithChildren) => {
               paths={pathGenerator}
             />
           </Suspense>
-          <MainContainer
-            transparent={isInPageDetail}
-            padding={appSettings.clientBorder}
-          >
+          <MainContainer clientBorder={appSettings.clientBorder}>
             <Suspense>
               {upgradeStatus?.needUpgrade || upgradeStatus?.upgrading ? (
                 <WorkspaceUpgrade />