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 }>(