fix: show windows title bar on sign in screen (#5326)

frontend/appflowy_flutter/lib/core/frameless_window.dart

@@ -2,36 +2,14 @@ import 'dart:io';
 
 import 'package:appflowy/generated/flowy_svgs.g.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
+import 'package:appflowy/shared/window_title_bar.dart';
 import 'package:appflowy/workspace/application/home/home_setting_bloc.dart';
-import 'package:appflowy_editor/appflowy_editor.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra_ui/style_widget/icon_button.dart';
 import 'package:flowy_infra_ui/widget/flowy_tooltip.dart';
-import 'package:flowy_infra_ui/widget/spacing.dart';
 import 'package:flutter/services.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
-import 'package:window_manager/window_manager.dart';
-
-class WindowsButtonListener extends WindowListener {
-  WindowsButtonListener();
-
-  final ValueNotifier<bool> isMaximized = ValueNotifier(false);
-
-  @override
-  void onWindowMaximize() {
-    isMaximized.value = true;
-  }
-
-  @override
-  void onWindowUnmaximize() {
-    isMaximized.value = false;
-  }
-
-  void dispose() {
-    isMaximized.dispose();
-  }
-}
 
 class CocoaWindowChannel {
   CocoaWindowChannel._();
@@ -71,44 +49,9 @@ class MoveWindowDetector extends StatefulWidget {
 }
 
 class MoveWindowDetectorState extends State<MoveWindowDetector> {
-  late final WindowsButtonListener? windowsButtonListener;
-
   double winX = 0;
   double winY = 0;
 
-  bool isMaximized = false;
-
-  @override
-  void initState() {
-    if (PlatformExtension.isWindows) {
-      windowsButtonListener = WindowsButtonListener();
-      windowManager.addListener(windowsButtonListener!);
-      windowsButtonListener!.isMaximized.addListener(() {
-        if (mounted) {
-          setState(
-            () => isMaximized = windowsButtonListener!.isMaximized.value,
-          );
-        }
-      });
-    } else {
-      windowsButtonListener = null;
-    }
-
-    windowManager.isMaximized().then(
-          (v) => mounted ? setState(() => isMaximized = v) : null,
-        );
-    super.initState();
-  }
-
-  @override
-  void dispose() {
-    if (windowsButtonListener != null) {
-      windowManager.removeListener(windowsButtonListener!);
-      windowsButtonListener?.dispose();
-    }
-    super.dispose();
-  }
-
   @override
   Widget build(BuildContext context) {
     if (!Platform.isMacOS && !Platform.isWindows) {
@@ -116,45 +59,14 @@ class MoveWindowDetectorState extends State<MoveWindowDetector> {
     }
 
     if (Platform.isWindows) {
-      final brightness = Theme.of(context).brightness;
-
       return Column(
         mainAxisSize: MainAxisSize.min,
         children: [
           if (widget.showTitleBar) ...[
-            Container(
+            WindowTitleBar(
-              height: 40,
+              leftChildren: [
-              decoration: BoxDecoration(
+                _buildToggleMenuButton(context),
-                color: Theme.of(context).colorScheme.surfaceVariant,
+              ],
-              ),
-              child: DragToMoveArea(
-                child: Row(
-                  children: [
-                    const HSpace(4),
-                    _buildToggleMenuButton(context),
-                    const Spacer(),
-                    WindowCaptionButton.minimize(
-                      brightness: brightness,
-                      onPressed: () => windowManager.minimize(),
-                    ),
-                    if (isMaximized) ...[
-                      WindowCaptionButton.unmaximize(
-                        brightness: brightness,
-                        onPressed: () => windowManager.unmaximize(),
-                      ),
-                    ] else ...[
-                      WindowCaptionButton.maximize(
-                        brightness: brightness,
-                        onPressed: () => windowManager.maximize(),
-                      ),
-                    ],
-                    WindowCaptionButton.close(
-                      brightness: brightness,
-                      onPressed: () => windowManager.close(),
-                    ),
-                  ],
-                ),
-              ),
             ),
           ] else ...[
             const SizedBox(height: 5),

frontend/appflowy_flutter/lib/shared/window_title_bar.dart

@@ -0,0 +1,108 @@
+import 'package:flutter/material.dart';
+
+import 'package:appflowy_editor/appflowy_editor.dart';
+import 'package:flowy_infra_ui/widget/spacing.dart';
+import 'package:window_manager/window_manager.dart';
+
+class WindowsButtonListener extends WindowListener {
+  WindowsButtonListener();
+
+  final ValueNotifier<bool> isMaximized = ValueNotifier(false);
+
+  @override
+  void onWindowMaximize() => isMaximized.value = true;
+
+  @override
+  void onWindowUnmaximize() => isMaximized.value = false;
+
+  void dispose() => isMaximized.dispose();
+}
+
+class WindowTitleBar extends StatefulWidget {
+  const WindowTitleBar({
+    super.key,
+    this.leftChildren = const [],
+  });
+
+  final List<Widget> leftChildren;
+
+  @override
+  State<WindowTitleBar> createState() => _WindowTitleBarState();
+}
+
+class _WindowTitleBarState extends State<WindowTitleBar> {
+  late final WindowsButtonListener? windowsButtonListener;
+  bool isMaximized = false;
+
+  @override
+  void initState() {
+    super.initState();
+
+    if (PlatformExtension.isWindows || PlatformExtension.isLinux) {
+      windowsButtonListener = WindowsButtonListener();
+      windowManager.addListener(windowsButtonListener!);
+      windowsButtonListener!.isMaximized.addListener(() {
+        if (mounted) {
+          setState(
+            () => isMaximized = windowsButtonListener!.isMaximized.value,
+          );
+        }
+      });
+    } else {
+      windowsButtonListener = null;
+    }
+
+    windowManager.isMaximized().then(
+          (v) => mounted ? setState(() => isMaximized = v) : null,
+        );
+  }
+
+  @override
+  void dispose() {
+    if (windowsButtonListener != null) {
+      windowManager.removeListener(windowsButtonListener!);
+      windowsButtonListener?.dispose();
+    }
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final brightness = Theme.of(context).brightness;
+
+    return Container(
+      height: 40,
+      decoration: BoxDecoration(
+        color: Theme.of(context).colorScheme.surfaceVariant,
+      ),
+      child: DragToMoveArea(
+        child: Row(
+          children: [
+            const HSpace(4),
+            ...widget.leftChildren,
+            const Spacer(),
+            WindowCaptionButton.minimize(
+              brightness: brightness,
+              onPressed: () => windowManager.minimize(),
+            ),
+            if (isMaximized) ...[
+              WindowCaptionButton.unmaximize(
+                brightness: brightness,
+                onPressed: () => windowManager.unmaximize(),
+              ),
+            ] else ...[
+              WindowCaptionButton.maximize(
+                brightness: brightness,
+                onPressed: () => windowManager.maximize(),
+              ),
+            ],
+            WindowCaptionButton.close(
+              brightness: brightness,
+              onPressed: () => windowManager.close(),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

frontend/appflowy_flutter/lib/user/presentation/screens/sign_in_screen/desktop_sign_in_screen.dart

@@ -1,18 +1,18 @@
 import 'package:appflowy/core/frameless_window.dart';
 import 'package:appflowy/env/cloud_env.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
+import 'package:appflowy/shared/window_title_bar.dart';
 import 'package:appflowy/user/application/sign_in_bloc.dart';
 import 'package:appflowy/user/presentation/screens/sign_in_screen/widgets/widgets.dart';
 import 'package:appflowy/user/presentation/widgets/widgets.dart';
+import 'package:appflowy_editor/appflowy_editor.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 
 class DesktopSignInScreen extends StatelessWidget {
-  const DesktopSignInScreen({
+  const DesktopSignInScreen({super.key});
-    super.key,
-  });
 
   @override
   Widget build(BuildContext context) {
@@ -20,9 +20,12 @@ class DesktopSignInScreen extends StatelessWidget {
     return BlocBuilder<SignInBloc, SignInState>(
       builder: (context, state) {
         return Scaffold(
-          appBar: const PreferredSize(
+          appBar: PreferredSize(
-            preferredSize: Size(double.infinity, 60),
+            preferredSize:
-            child: MoveWindowDetector(),
+                Size.fromHeight(PlatformExtension.isWindows ? 40 : 60),
+            child: PlatformExtension.isWindows
+                ? const WindowTitleBar()
+                : const MoveWindowDetector(),
           ),
           body: Center(
             child: AuthFormContainer(
@@ -31,7 +34,7 @@ class DesktopSignInScreen extends StatelessWidget {
                   title: LocaleKeys.welcomeText.tr(),
                   logoSize: const Size(60, 60),
                 ),
-                const VSpace(30),
+                const VSpace(20),
 
                 // const SignInAnonymousButton(),
                 const SignInWithMagicLinkButtons(),
@@ -55,9 +58,9 @@ class DesktopSignInScreen extends StatelessWidget {
                     final type = state.loginType == LoginType.signIn
                         ? LoginType.signUp
                         : LoginType.signIn;
-                    context.read<SignInBloc>().add(
+                    context
-                          SignInEvent.switchLoginType(type),
+                        .read<SignInBloc>()
-                        );
+                        .add(SignInEvent.switchLoginType(type));
                   },
                 ),
 
@@ -85,20 +88,12 @@ class _OrDivider extends StatelessWidget {
   Widget build(BuildContext context) {
     return Row(
       children: [
-        const Flexible(
+        const Flexible(child: Divider(thickness: 1)),
-          child: Divider(
-            thickness: 1,
-          ),
-        ),
         Padding(
           padding: const EdgeInsets.symmetric(horizontal: 10),
           child: FlowyText.regular(LocaleKeys.signIn_or.tr()),
         ),
-        const Flexible(
+        const Flexible(child: Divider(thickness: 1)),
-          child: Divider(
-            thickness: 1,
-          ),
-        ),
       ],
     );
   }

frontend/appflowy_flutter/lib/user/presentation/widgets/flowy_logo_title.dart

@@ -27,7 +27,7 @@ class FlowyLogoTitle extends StatelessWidget {
               blendMode: null,
             ),
           ),
-          const VSpace(40),
+          const VSpace(20),
           FlowyText.regular(
             title,
             fontSize: FontSizes.s24,