feat: optimize electron macos header style (#1774)

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

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,