fix(electron): drag window behavior in header

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

@@ -1,4 +1,5 @@
 import { baseTheme } from '@toeverything/theme';
+import type { ComplexStyleRule } from '@vanilla-extract/css';
 import { createVar, style } from '@vanilla-extract/css';
 
 export const floatingMaxWidth = 768;
@@ -49,12 +50,21 @@ export const navHeaderStyle = style({
   display: 'flex',
   justifyContent: 'space-between',
   alignItems: 'center',
+  '@media': {
+    [`(max-width: ${floatingMaxWidth}px)`]: {
+      selectors: {
+        '&[data-open="true"]': {
+          WebkitAppRegion: 'no-drag',
+        },
+      },
+    } as ComplexStyleRule,
+  },
   selectors: {
     '&[data-is-macos-electron="true"]': {
       justifyContent: 'flex-end',
     },
   },
-});
+} as ComplexStyleRule);
 
 export const navBodyStyle = style({
   flex: '1 1 auto',

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

@@ -58,6 +58,7 @@ export const AppSidebar = forwardRef<HTMLElement, AppSidebarProps>(
           <div
             className={navHeaderStyle}
             data-is-macos-electron={isMacosDesktop}
+            data-open={open}
           >
             {isMacosDesktop && (
               <>

packages/component/src/ui/button/styles.ts

@@ -43,6 +43,7 @@ export const StyledIconButton = styled('button', {
       width,
       height,
       fontSize,
+      WebkitAppRegion: 'no-drag',
       color: 'var(--affine-icon-color)',
       ...displayInlineFlex('center', 'center'),
       position: 'relative',
@@ -184,6 +185,7 @@ export const StyledButton = styled('button', {
       paddingLeft: padding,
       paddingRight: padding,
       border: noBorder ? 'none' : '1px solid',
+      WebkitAppRegion: 'no-drag',
       ...displayInlineFlex('center', 'center'),
       position: 'relative',
       // TODO: disabled color is not decided