feat: optimize electron macos header style (#1774)

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

apps/web/src/components/affine/pivots/styles.ts

@@ -48,6 +48,7 @@ export const StyledPivot = styled('div')<{
     cursor: disable ? 'not-allowed' : 'pointer',
     background: isOver ? alpha(theme.colors.primaryColor, 0.06) : '',
     fontSize: theme.font.base,
+    userSelect: 'none',
     span: {
       flexGrow: '1',
       textAlign: 'left',

apps/web/src/components/affine/workspace-setting-detail/style.ts

@@ -4,15 +4,15 @@ export const StyledSettingContainer = styled('div')(() => {
   return {
     display: 'flex',
     flexDirection: 'column',
-    padding: '48px 0 0 48px',
-    height: 'calc(100vh - 48px)',
+    padding: '52px 0 0 52px',
+    height: 'calc(100vh - 52px)',
   };
 });
 
 export const StyledSettingSidebar = styled('div')(() => {
   {
     return {
-      marginTop: '48px',
+      marginTop: '52px',
     };
   }
 });

apps/web/src/components/blocksuite/block-suite-page-list/page-list/Empty.tsx

@@ -18,7 +18,7 @@ export const PageListEmpty = (props: { listType?: string }) => {
   };
 
   return (
-    <div style={{ height: 'calc(100% - 48px)' }}>
+    <div style={{ height: 'calc(100% - 52px)' }}>
       <Empty description={getEmptyDescription()} />
     </div>
   );

apps/web/src/components/blocksuite/block-suite-page-list/page-list/styles.ts

@@ -3,7 +3,7 @@ import { TableRow } from '@affine/component';
 
 export const StyledTableContainer = styled('div')(({ theme }) => {
   return {
-    height: 'calc(100vh - 48px)',
+    height: 'calc(100vh - 52px)',
     padding: '78px 72px',
     overflowY: 'auto',
     [theme.breakpoints.down('sm')]: {

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

@@ -4,7 +4,7 @@ import spring, { toString } from 'css-spring';
 
 const ANIMATE_DURATION = 400;
 
-export const StyledThemeModeSwitch = styled('div')(({ theme }) => {
+export const StyledThemeModeSwitch = styled('button')(({ theme }) => {
   return {
     width: '32px',
     height: '32px',

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

@@ -5,23 +5,27 @@ import {
   textEllipsis,
 } from '@affine/component';
 
-export const StyledHeaderContainer = styled('div')<{ hasWarning: boolean }>(
-  ({ theme, hasWarning }) => {
-    return {
-      height: hasWarning ? '96px' : '48px',
-      flexShrink: 0,
-      position: 'sticky',
-      top: 0,
-      background: theme.colors.pageBackground,
-      zIndex: 1,
-    };
-  }
-);
+export const StyledHeaderContainer = styled('div')<{
+  hasWarning: boolean;
+}>(({ theme, hasWarning }) => {
+  return {
+    height: hasWarning ? '96px' : '52px',
+    flexShrink: 0,
+    position: 'sticky',
+    top: 0,
+    background: theme.colors.pageBackground,
+    zIndex: 1,
+    WebkitAppRegion: 'drag',
+    button: {
+      WebkitAppRegion: 'no-drag',
+    },
+  };
+});
 export const StyledHeader = styled('div')<{ hasWarning: boolean }>(
   ({ theme }) => {
     return {
       flexShrink: 0,
-      height: '48px',
+      height: '52px',
       width: '100%',
       padding: '0 20px',
       ...displayFlex('space-between', 'center'),
@@ -56,6 +60,7 @@ export const StyledTitle = styled('div')(({ theme }) => {
       maxWidth: '180px',
     },
     transition: 'max-width .15s',
+    userSelect: 'none',
     ...textEllipsis(1),
   };
 });

apps/web/src/components/page-detail-editor.tsx

@@ -68,7 +68,7 @@ export const PageDetailEditor: React.FC<PageDetailEditorProps> = ({
       </BlockSuiteEditorHeader>
       <Editor
         style={{
-          height: 'calc(100% - 48px)',
+          height: 'calc(100% - 52px)',
         }}
         key={pageId}
         blockSuiteWorkspace={blockSuiteWorkspace}

apps/web/src/components/pure/workspace-avatar/index.tsx

@@ -64,6 +64,7 @@ export const Avatar: React.FC<AvatarProps> = memo<AvatarProps>(function Avatar({
             lineHeight: '1',
             justifyContent: 'center',
             alignItems: 'center',
+            userSelect: 'none',
           }}
         >
           {(name || 'AFFiNE').substring(0, 1)}

apps/web/src/components/pure/workspace-slider-bar/WorkspaceSelector/styles.ts

@@ -27,6 +27,7 @@ export const StyledWorkspaceName = styled('div')(() => {
   return {
     lineHeight: '24px',
     fontWeight: 600,
+    userSelect: 'none',
     ...textEllipsis(1),
   };
 });
@@ -37,6 +38,7 @@ export const StyledWorkspaceStatus = styled('div')(({ theme }) => {
     ...displayFlex('flex-start', 'center'),
     fontSize: theme.font.sm,
     color: theme.colors.secondaryTextColor,
+    userSelect: 'none',
     svg: {
       color: theme.colors.iconColor,
       fontSize: theme.font.base,

apps/web/src/components/pure/workspace-slider-bar/index.tsx

@@ -10,7 +10,7 @@ import {
 import type { Page, PageMeta } from '@blocksuite/store';
 import { useMediaQuery, useTheme } from '@mui/material';
 import type React from 'react';
-import { useCallback } from 'react';
+import { useCallback, useEffect } from 'react';
 
 import {
   useSidebarResizing,
@@ -112,6 +112,9 @@ export const WorkSpaceSliderBar: React.FC<WorkSpaceSliderBarProps> = ({
       { once: true }
     );
   }, [setIsResizing, setSidebarOpen, setSliderWidth]);
+  useEffect(() => {
+    window.apis?.onSidebarVisibilityChange(sidebarOpen);
+  }, [sidebarOpen]);
   return (
     <>
       <StyledSliderBarWrapper data-testid="sliderBar-root">

apps/web/src/components/pure/workspace-slider-bar/shared-styles.ts

@@ -12,6 +12,7 @@ export const StyledListItem = styled('div')<{
     cursor: 'pointer',
     marginBottom: '4px',
     position: 'relative',
+    userSelect: 'none',
     ...displayFlex('flex-start', 'center'),
     ...(disabled
       ? {
@@ -72,6 +73,7 @@ export const StyledCollapseItem = styled('div')<{
       : theme.colors.textColor,
     cursor: disable ? 'not-allowed' : 'pointer',
     background: isOver ? alpha(theme.colors.primaryColor, 0.06) : '',
+    userSelect: 'none',
 
     span: {
       flexGrow: '1',

apps/web/src/components/pure/workspace-slider-bar/style.ts

@@ -1,4 +1,5 @@
 import { displayFlex, styled } from '@affine/component';
+import { getEnvironment } from '@affine/env';
 import Link from 'next/link';
 
 export const StyledSliderBarWrapper = styled('div')(() => {
@@ -6,6 +7,9 @@ export const StyledSliderBarWrapper = styled('div')(() => {
     height: '100%',
     width: 'auto',
     position: 'relative',
+    'button, a': {
+      userSelect: 'none',
+    },
   };
 });
 
@@ -14,10 +18,13 @@ export const StyledSliderBar = styled('div')<{
   show: boolean;
   floating: boolean;
 }>(({ theme, show, floating, resizing }) => {
+  const env = getEnvironment();
+  const macosElectron = env.isDesktop && env.isMacOs;
   return {
     whiteSpace: 'nowrap',
     height: '100%',
-    background: theme.colors.hubBackground,
+    background:
+      !floating && macosElectron ? 'transparent' : theme.colors.hubBackground,
     zIndex: theme.zIndex.modal,
     transition: !resizing ? 'width .15s, padding .15s' : '',
     padding: show ? '0 4px' : '0',
@@ -33,10 +40,10 @@ export const StyledSliderBar = styled('div')<{
 });
 export const StyledSidebarSwitchWrapper = styled('div')(() => {
   return {
-    height: '48px',
+    height: '52px',
     flexShrink: 0,
     padding: '0 16px',
-    ...displayFlex('flex-start', 'center'),
+    ...displayFlex('flex-end', 'center'),
   };
 });
 export const StyledSliderBarInnerWrapper = styled('div')(() => {
@@ -61,7 +68,7 @@ export const StyledLink = styled(Link)(() => {
 });
 export const StyledNewPageButton = styled('button')(({ theme }) => {
   return {
-    height: '48px',
+    height: '52px',
     ...displayFlex('flex-start', 'center'),
     borderTop: '1px solid',
     borderColor: theme.colors.borderColor,

apps/web/src/layouts/styles.ts

@@ -5,7 +5,6 @@ export const StyledPage = styled('div')<{ resizing?: boolean }>(
     return {
       cursor: resizing ? 'col-resize' : 'default',
       height: '100vh',
-      backgroundColor: theme.colors.pageBackground,
       transition: 'background-color .5s',
       display: 'flex',
       flexGrow: '1',
@@ -32,6 +31,7 @@ export const MainContainerWrapper = styled('div')(({ theme }) => {
     position: 'relative',
     maxWidth: '100vw',
     overflow: 'auto',
+    backgroundColor: theme.colors.pageBackground,
   };
 });
 

apps/web/src/pages/public-workspace/[workspaceId]/[pageId].tsx

@@ -24,7 +24,7 @@ import { initPage } from '../../../utils';
 export const NavContainer = styled('div')(({ theme }) => {
   return {
     width: '100vw',
-    height: '48px',
+    height: '52px',
     ...displayFlex('space-between', 'center'),
     backgroundColor: theme.colors.pageBackground,
   };

apps/web/src/providers/ThemeProvider.tsx

@@ -47,6 +47,7 @@ const ThemeProviderInner = memo<React.PropsWithChildren>(
     // SSR will always render the light theme, so we need to defer the theme if user selected dark mode
     const [deferTheme, setDeferTheme] = useState('light');
     useEffect(() => {
+      window.apis?.onThemeChange(theme === 'dark' ? 'dark' : 'light');
       setDeferTheme(theme === 'dark' ? 'dark' : 'light');
     }, [theme]);
     return (

apps/web/src/shared/index.ts

@@ -5,12 +5,6 @@ import type { ReactElement, ReactNode } from 'react';
 
 export { BlockSuiteWorkspace };
 
-declare global {
-  interface Window {
-    CLIENT_APP?: boolean;
-  }
-}
-
 export type AffineOfficialWorkspace = AffineWorkspace | LocalWorkspace;
 
 export type AllWorkspace = AffineOfficialWorkspace;

apps/web/src/styles/globals.css

@@ -152,7 +152,7 @@ legend {
   font-family: var(--affine-font-family);
 }
 body {
-  background: #fff;
+  background: transparent;
   overflow: hidden;
 }
 

apps/web/src/types/types.d.ts

@@ -1,4 +1,9 @@
 /// <reference types="@webpack/env"" />
+
+// not using import because it will break the declare module line below
+// eslint-disable-next-line @typescript-eslint/triple-slash-reference
+/// <reference path='../../../electron/layers/preload/preload.d.ts' />
+
 declare module '*.md' {
   const text: string;
   export default text;