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