feat: new setting modal (#2834)

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

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

@@ -16,6 +16,7 @@ export const navWrapperStyle = style({
   zIndex: 2,
   paddingBottom: '8px',
   backgroundColor: 'transparent',
+  borderRight: '1px solid var(--affine-border-color)',
   '@media': {
     [`(max-width: ${floatingMaxWidth}px)`]: {
       position: 'absolute',
@@ -39,6 +40,9 @@ export const navWrapperStyle = style({
     '&[data-enable-animation="true"]': {
       transition: 'margin-left .3s, width .3s',
     },
+    '&.has-background': {
+      backgroundColor: 'var(--affine-white-60)',
+    },
   },
 });
 

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

@@ -1,6 +1,7 @@
 import { env } from '@affine/env';
 import { Skeleton } from '@mui/material';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
+import clsx from 'clsx';
 import { useAtom, useAtomValue } from 'jotai';
 import type { PropsWithChildren, ReactElement } from 'react';
 import { useEffect, useRef, useState } from 'react';
@@ -25,7 +26,11 @@ import { ResizeIndicator } from './resize-indicator';
 import type { SidebarHeaderProps } from './sidebar-header';
 import { SidebarHeader } from './sidebar-header';
 
-export type AppSidebarProps = PropsWithChildren<SidebarHeaderProps>;
+export type AppSidebarProps = PropsWithChildren<
+  SidebarHeaderProps & {
+    hasBackground?: boolean;
+  }
+>;
 
 function useEnableAnimation() {
   const [enable, setEnable] = useState(false);
@@ -91,7 +96,9 @@ export function AppSidebar(props: AppSidebarProps): ReactElement {
         style={assignInlineVars({
           [navWidthVar]: `${appSidebarWidth}px`,
         })}
-        className={navWrapperStyle}
+        className={clsx(navWrapperStyle, {
+          'has-background': env.isDesktop && props.hasBackground,
+        })}
         data-open={open}
         data-is-macos-electron={isMacosDesktop}
         data-enable-animation={enableAnimation && !isResizing}