From 29cbbf5c97237d866a6e3401c0374f610e10daa3 Mon Sep 17 00:00:00 2001
From: JimmFly <yangjinfei001@gmail.com>
Date: Sun, 7 May 2023 08:00:04 +0800
Subject: [PATCH] chore: add border for header when in edgeless page (#2239)

---
 .../src/components/blocksuite/workspace-header/header.tsx   | 3 +++
 .../src/components/blocksuite/workspace-header/styles.ts    | 6 +++++-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/apps/web/src/components/blocksuite/workspace-header/header.tsx b/apps/web/src/components/blocksuite/workspace-header/header.tsx
index 25cb7a680e..93eb017e63 100644
--- a/apps/web/src/components/blocksuite/workspace-header/header.tsx
+++ b/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
diff --git a/apps/web/src/components/blocksuite/workspace-header/styles.ts b/apps/web/src/components/blocksuite/workspace-header/styles.ts
index cca9462387..f6233e488d 100644
--- a/apps/web/src/components/blocksuite/workspace-header/styles.ts
+++ b/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',
   };
 });