chore: add border for header when in edgeless page (#2239)

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

@@ -14,6 +14,7 @@ import {
   useState,
 } from 'react';
 
+import { useCurrentMode } from '../../../hooks/current/use-current-mode';
 import type { AffineOfficialWorkspace } from '../../../shared';
 import { EditorOptionMenu } from './header-right-items/EditorOptionMenu';
 import EditPage from './header-right-items/EditPage';
@@ -135,6 +136,7 @@ export const Header = forwardRef<
   const [open] = useAtom(appSidebarOpenAtom);
   const t = useAFFiNEI18N();
 
+  const mode = useCurrentMode();
   return (
     <StyledHeaderContainer
       ref={ref}
@@ -152,6 +154,7 @@ export const Header = forwardRef<
         hasWarning={showWarning}
         data-testid="editor-header-items"
         data-tauri-drag-region
+        isEdgeless={mode === 'edgeless'}
       >
         <Suspense>
           <SidebarSwitch

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

@@ -23,7 +23,10 @@ export const StyledHeaderContainer = styled('div')<{
     },
   };
 });
-export const StyledHeader = styled('div')<{ hasWarning: boolean }>(() => {
+export const StyledHeader = styled('div')<{
+  hasWarning: boolean;
+  isEdgeless: boolean;
+}>(({ isEdgeless }) => {
   return {
     flexShrink: 0,
     height: '52px',
@@ -33,6 +36,7 @@ export const StyledHeader = styled('div')<{ hasWarning: boolean }>(() => {
     background: 'var(--affine-background-primary-color)',
     zIndex: 99,
     position: 'relative',
+    borderBottom: isEdgeless ? '1px solid var(--affine-border-color)' : 'none',
   };
 });