From 8e71815e46dd86cce13b8a77b956c5e6d6fcd9ac Mon Sep 17 00:00:00 2001
From: JimmFly <yangjinfei001@gmail.com>
Date: Thu, 12 Sep 2024 06:35:55 +0000
Subject: [PATCH] fix(component): windows client does not have app controls on
 some pages (#8176)

close AF-1266
---
 .../src/components/affine-other-page-layout/index.css.ts  | 6 ++++++
 .../src/components/affine-other-page-layout/layout.tsx    | 8 +++++---
 .../components/auth-components/auth-page-container.tsx    | 5 ++++-
 .../components/auth-components/email-verified-email.tsx   | 2 +-
 .../component/src/components/auth-components/index.tsx    | 1 +
 .../src/modules/app-tabs-header/views/app-tabs-header.tsx | 3 +--
 .../core/src/modules/app-tabs-header/views/styles.css.ts  | 6 ++++++
 packages/frontend/core/src/pages/404.tsx                  | 4 +++-
 packages/frontend/core/src/pages/auth/auth.tsx            | 3 ++-
 packages/frontend/core/src/pages/workspace/index.tsx      | 7 ++++++-
 packages/frontend/electron/renderer/app.tsx               | 6 ++++++
 11 files changed, 41 insertions(+), 10 deletions(-)

diff --git a/packages/frontend/component/src/components/affine-other-page-layout/index.css.ts b/packages/frontend/component/src/components/affine-other-page-layout/index.css.ts
index b805d3f557..dfa8b094be 100644
--- a/packages/frontend/component/src/components/affine-other-page-layout/index.css.ts
+++ b/packages/frontend/component/src/components/affine-other-page-layout/index.css.ts
@@ -27,6 +27,12 @@ export const topNav = style({
     },
   },
 });
+export const draggableHeader = style({
+  height: '52px',
+  width: '100%',
+  position: 'fixed',
+  ['WebkitAppRegion' as string]: 'drag',
+});
 export const topNavLinks = style({
   display: 'flex',
   columnGap: 4,
diff --git a/packages/frontend/component/src/components/affine-other-page-layout/layout.tsx b/packages/frontend/component/src/components/affine-other-page-layout/layout.tsx
index 6899a07b9d..c7a06af802 100644
--- a/packages/frontend/component/src/components/affine-other-page-layout/layout.tsx
+++ b/packages/frontend/component/src/components/affine-other-page-layout/layout.tsx
@@ -1,7 +1,7 @@
 import { Button } from '@affine/component/ui/button';
 import { useI18n } from '@affine/i18n';
 import { Logo1Icon } from '@blocksuite/icons/rc';
-import { useCallback } from 'react';
+import { type ReactNode, useCallback } from 'react';
 
 import { DesktopNavbar } from './desktop-navbar';
 import * as styles from './index.css';
@@ -10,7 +10,7 @@ import { MobileNavbar } from './mobile-navbar';
 export const AffineOtherPageLayout = ({
   children,
 }: {
-  children: React.ReactNode;
+  children: ReactNode;
 }) => {
   const t = useI18n();
 
@@ -20,7 +20,9 @@ export const AffineOtherPageLayout = ({
 
   return (
     <div className={styles.root}>
-      {environment.isElectron ? null : (
+      {environment.isElectron ? (
+        <div className={styles.draggableHeader} />
+      ) : (
         <div className={styles.topNav}>
           <a href="/" rel="noreferrer" className={styles.affineLogo}>
             <Logo1Icon width={24} height={24} />
diff --git a/packages/frontend/component/src/components/auth-components/auth-page-container.tsx b/packages/frontend/component/src/components/auth-components/auth-page-container.tsx
index 49a4bde37a..5ee0dbc1a2 100644
--- a/packages/frontend/component/src/components/auth-components/auth-page-container.tsx
+++ b/packages/frontend/component/src/components/auth-components/auth-page-container.tsx
@@ -5,7 +5,10 @@ import { AffineOtherPageLayout } from '../affine-other-page-layout';
 import { authPageContainer, hideInSmallScreen } from './share.css';
 
 export const AuthPageContainer: FC<
-  PropsWithChildren<{ title?: ReactNode; subtitle?: ReactNode }>
+  PropsWithChildren<{
+    title?: ReactNode;
+    subtitle?: ReactNode;
+  }>
 > = ({ children, title, subtitle }) => {
   return (
     <AffineOtherPageLayout>
diff --git a/packages/frontend/component/src/components/auth-components/email-verified-email.tsx b/packages/frontend/component/src/components/auth-components/email-verified-email.tsx
index 332a77ba48..b0adc83844 100644
--- a/packages/frontend/component/src/components/auth-components/email-verified-email.tsx
+++ b/packages/frontend/component/src/components/auth-components/email-verified-email.tsx
@@ -4,7 +4,7 @@ import type { FC } from 'react';
 import { Button } from '../../ui/button';
 import { AuthPageContainer } from './auth-page-container';
 
-export const ConfirmChangeEmail: FC<{
+export const ConfirmVerifiedEmail: FC<{
   onOpenAffine: () => void;
 }> = ({ onOpenAffine }) => {
   const t = useI18n();
diff --git a/packages/frontend/component/src/components/auth-components/index.tsx b/packages/frontend/component/src/components/auth-components/index.tsx
index 2993906ecd..a179b3ca07 100644
--- a/packages/frontend/component/src/components/auth-components/index.tsx
+++ b/packages/frontend/component/src/components/auth-components/index.tsx
@@ -6,6 +6,7 @@ export * from './change-email-page';
 export * from './change-password-page';
 export * from './confirm-change-email';
 export * from './count-down-render';
+export * from './email-verified-email';
 export * from './modal';
 export * from './modal-header';
 export * from './onboarding-page';
diff --git a/packages/frontend/core/src/modules/app-tabs-header/views/app-tabs-header.tsx b/packages/frontend/core/src/modules/app-tabs-header/views/app-tabs-header.tsx
index 36eb9affe7..6812901fc2 100644
--- a/packages/frontend/core/src/modules/app-tabs-header/views/app-tabs-header.tsx
+++ b/packages/frontend/core/src/modules/app-tabs-header/views/app-tabs-header.tsx
@@ -12,7 +12,6 @@ import {
   appSidebarResizingAtom,
 } from '@affine/core/components/app-sidebar';
 import { appSidebarWidthAtom } from '@affine/core/components/app-sidebar/index.jotai';
-import { WindowsAppControls } from '@affine/core/components/pure/header/windows-app-controls';
 import { useAsyncCallback } from '@affine/core/hooks/affine-async-hooks';
 import { useCatchEventCallback } from '@affine/core/hooks/use-catch-event-hook';
 import { track } from '@affine/core/mixpanel';
@@ -475,7 +474,7 @@ export const AppTabsHeader = ({
         <RightSidebarIcon />
       </IconButton>
       {environment.isElectron && environment.isWindows ? (
-        <WindowsAppControls />
+        <div className={styles.windowsAppControlsPlaceholder} />
       ) : null}
     </div>
   );
diff --git a/packages/frontend/core/src/modules/app-tabs-header/views/styles.css.ts b/packages/frontend/core/src/modules/app-tabs-header/views/styles.css.ts
index dd71af2788..16cfe62de8 100644
--- a/packages/frontend/core/src/modules/app-tabs-header/views/styles.css.ts
+++ b/packages/frontend/core/src/modules/app-tabs-header/views/styles.css.ts
@@ -242,6 +242,12 @@ export const spacer = style({
   },
 });
 
+export const windowsAppControlsPlaceholder = style({
+  width: '160px',
+  height: '100%',
+  flexShrink: 0,
+});
+
 export const dropIndicator = style({
   position: 'absolute',
   height: 32,
diff --git a/packages/frontend/core/src/pages/404.tsx b/packages/frontend/core/src/pages/404.tsx
index bbc595d9c0..5e350becd2 100644
--- a/packages/frontend/core/src/pages/404.tsx
+++ b/packages/frontend/core/src/pages/404.tsx
@@ -67,4 +67,6 @@ export const PageNotFound = ({
   );
 };
 
-export const Component = PageNotFound;
+export const Component = () => {
+  return <PageNotFound />;
+};
diff --git a/packages/frontend/core/src/pages/auth/auth.tsx b/packages/frontend/core/src/pages/auth/auth.tsx
index 96b25a254b..9bb3bb6269 100644
--- a/packages/frontend/core/src/pages/auth/auth.tsx
+++ b/packages/frontend/core/src/pages/auth/auth.tsx
@@ -3,6 +3,7 @@ import {
   ChangeEmailPage,
   ChangePasswordPage,
   ConfirmChangeEmail,
+  ConfirmVerifiedEmail,
   OnboardingPage,
   SetPasswordPage,
   SignInSuccessPage,
@@ -153,7 +154,7 @@ export const Component = () => {
       return <ConfirmChangeEmail onOpenAffine={onOpenAffine} />;
     }
     case 'verify-email': {
-      return <ConfirmChangeEmail onOpenAffine={onOpenAffine} />;
+      return <ConfirmVerifiedEmail onOpenAffine={onOpenAffine} />;
     }
   }
   return null;
diff --git a/packages/frontend/core/src/pages/workspace/index.tsx b/packages/frontend/core/src/pages/workspace/index.tsx
index b26fa3738d..0541a9470f 100644
--- a/packages/frontend/core/src/pages/workspace/index.tsx
+++ b/packages/frontend/core/src/pages/workspace/index.tsx
@@ -1,3 +1,4 @@
+import { AffineOtherPageLayout } from '@affine/component/affine-other-page-layout';
 import { AppFallback } from '@affine/core/components/affine/app-container';
 import { viewRoutes } from '@affine/core/router';
 import { ZipTransformer } from '@blocksuite/blocks';
@@ -108,7 +109,11 @@ export const Component = (): ReactElement => {
         />
       );
     }
-    return <PageNotFound noPermission />;
+    return (
+      <AffineOtherPageLayout>
+        <PageNotFound noPermission />
+      </AffineOtherPageLayout>
+    );
   }
   if (!meta) {
     return <AppFallback />;
diff --git a/packages/frontend/electron/renderer/app.tsx b/packages/frontend/electron/renderer/app.tsx
index 9d94b1d951..9db56814f3 100644
--- a/packages/frontend/electron/renderer/app.tsx
+++ b/packages/frontend/electron/renderer/app.tsx
@@ -4,6 +4,7 @@ import '@affine/component/theme/theme.css';
 import { AffineContext } from '@affine/component/context';
 import { GlobalLoading } from '@affine/component/global-loading';
 import { AppFallback } from '@affine/core/components/affine/app-container';
+import { WindowsAppControls } from '@affine/core/components/pure/header/windows-app-controls';
 import { configureCommonModules } from '@affine/core/modules';
 import { configureAppTabsHeaderModule } from '@affine/core/modules/app-tabs-header';
 import { configureElectronStateStorageImpls } from '@affine/core/modules/storage';
@@ -121,6 +122,11 @@ export function App() {
                 router={router}
                 future={future}
               />
+              {environment.isWindows && (
+                <div style={{ position: 'fixed', right: 0, top: 0, zIndex: 5 }}>
+                  <WindowsAppControls />
+                </div>
+              )}
             </DebugProvider>
           </AffineContext>
         </CacheProvider>