feat(windows): implement custom window controls and drag area

[damywise]

Feature Preview

Note: Windows-only, but should work on macOS as well but I haven't setup AppFlowy on macOS.

• Removes the default title bar
• Replaces MoveWindowDetector to use window_manager's equivalent widget DragToMoveArea which works on all desktop platforms.
• Adds window controls to: SkipLogInScreen, DesktopSignInScreen (no idea how to test this), HomeTopBar (if tab bar is hidden), and TabsManager.
• Implemented WindowDragStack, which uses Stack and puts the MoveWindowDetector behind the widget instead so it doesn't disrupt the buttons, textfields, and whatnot in front of it. Implemented in: SidebarTopMenu, HomeTopBar. Should fix [Bug] Invisible window top bar obstructs title editing on macOS #3314 (untested).

TODO

• Drag window area when overlay is opened. No idea how I can approach this without modifying FlowyOverlay.
• Update window_manager dependency
• Test on macOS

Screenshots

Before:

After:

Video:

2023-11-09.12-50-45-00.00.00.320-00.00.33.223.mp4

---

PR Checklist

• My code adheres to AppFlowy's Conventions
• I've listed at least one issue that this PR fixes in the description above.
• I've added a test(s) to validate changes in this PR, or this PR only contains semantic changes.
• All existing tests are passing.

[CLAassistant]

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

[Xazin]

How does it look with multiple tabs?

I'm not a huge fan of this solution because of the window controls. As a windows user, I myself actually prefer the title bar, however it should follow theme of course.

[damywise]

@Xazin for multiple tabs, you can see the video starting from 0:14.

[damywise]

I myself actually prefer the title bar, however it should follow theme of course.

Well with flutter_acrylic, the window effect can be set to mica and the default title bar can be set to dark/light mode.
Can't be tinted to follow theme though, we'd have to draw our custom title bar for that.
Which is definitely easier than the current PR 😅

Some reference: https://stackoverflow.com/questions/39261826/change-the-color-of-the-title-bar-caption-of-a-win32-application

[Xazin]

I myself actually prefer the title bar, however it should follow theme of course.

Well with flutter_acrylic, the window effect can be set to mica and the default title bar can be set to dark/light mode. Can't be tinted to follow theme though, we'd have to draw our custom title bar for that. Which is definitely easier than the current PR 😅

Thanks for the updates, I really appreciate this in-depth 👍

@annieappflowy - What do you think, which solution would you prefer?

PS. I love the acrylic solution.

[Xazin]

Hey @damywise, do you want to give the custom rendered windows bar a go?

I like the feel of the acrylic window, and of course we could go with that. But as you mentioned, we can't style it according to the theme, and in the end that flexibility would be very well liked.

Let me know 🙏

[damywise]

Hey @damywise, do you want to give the custom rendered windows bar a go?

Well, sure. Here you go. I'm not really sure if I like it compared to the macOS one, to be honest.
Also It only took a few minutes to implement instead of the previous one, which took 1-2 hours, haha.
How does it look?

[damywise]

Ah yeah forgot to push, in case anyone wants to test it.

[Xazin]

Ah yeah forgot to push, in case anyone wants to test it.

Looks good, I want to see if I can optimise the looks with a built-in gradient modifier, I'll try to play with it. 🙏👍

[Xazin]

I've implemented something similar to this PR. So will close it for now.

Thanks a lot for the proof of concept! ✌️