fix(component): windows client does not have app controls on some pages (#8176)

close AF-1266

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,

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} />

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>

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();

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';

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>
   );

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,

packages/frontend/core/src/pages/404.tsx

@@ -67,4 +67,6 @@ export const PageNotFound = ({
   );
 };
 
-export const Component = PageNotFound;
+export const Component = () => {
+  return <PageNotFound />;
+};

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;

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 />;

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>