fix(electron): drag window behavior in header

apps/web/src/components/affine/sidebar-switch/style.ts

@@ -7,6 +7,7 @@ export const StyledSidebarSwitch = styled(IconButton, {
 })<{ visible: boolean }>(({ visible }) => {
   return {
     opacity: visible ? 1 : 0,
+    WebkitAppRegion: 'no-drag',
     transition: 'all 0.2s ease-in-out',
   };
 });

apps/web/src/components/blocksuite/workspace-header/editor-mode-switch/style.ts

@@ -39,6 +39,7 @@ export const StyledSwitchItem = styled('button')<{
     width: '24px',
     height: '24px',
     borderRadius: '8px',
+    WebkitAppRegion: 'no-drag',
     boxShadow: active ? 'var(--affine-shadow)' : 'none',
     color: active ? 'var(--affine-primary-color)' : 'var(--affine-icon-color)',
     display: hide ? 'none' : 'inline-flex',

apps/web/src/components/blocksuite/workspace-header/header-right-items/SyncUser.tsx

@@ -30,6 +30,7 @@ const IconWrapper = styled('div')(({ theme }) => {
     marginRight: '12px',
     fontSize: '24px',
     color: 'var(--affine-icon-color)',
+    WebkitAppRegion: 'no-drag',
     ...displayFlex('center', 'center'),
   };
 });

apps/web/src/components/blocksuite/workspace-header/header-right-items/theme-mode-switch/style.ts

@@ -10,6 +10,7 @@ export const StyledThemeModeSwitch = styled('button')(({ theme }) => {
     height: '32px',
     borderRadius: '6px',
     overflow: 'hidden',
+    WebkitAppRegion: 'no-drag',
     backgroundColor: 'transparent',
     position: 'relative',
     color: 'var(--affine-icon-color)',

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

@@ -144,7 +144,12 @@ export const Header = forwardRef<
   const { t } = useTranslation();
 
   return (
-    <StyledHeaderContainer ref={ref} hasWarning={showWarning} {...props}>
+    <StyledHeaderContainer
+      ref={ref}
+      hasWarning={showWarning}
+      data-open={open}
+      {...props}
+    >
       <BrowserWarning
         show={showWarning}
         onClose={() => {

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

@@ -14,7 +14,13 @@ export const StyledHeaderContainer = styled('div')<{
     position: 'sticky',
     top: 0,
     background: 'var(--affine-background-primary-color)',
+    WebkitAppRegion: 'drag',
     zIndex: 1,
+    '@media (max-width: 768px)': {
+      '&[data-open="true"]': {
+        WebkitAppRegion: 'no-drag',
+      },
+    },
   };
 });
 export const StyledHeader = styled('div')<{ hasWarning: boolean }>(

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