[WIP] Enhancement: Integrated title bar

[aitor-gamarra]

Background Info

• This PR builds upon [WIP] Implement an immersive title bar for Win32 platform #4895 (ty @MrWillCom!)
• Solves Titlle bar and main window are not the same color on Windows 11 #6855 (cc @Apathy94 hope your PhD went well 😄)

PR Info

This PR introduces an integrated title bar for the Win32 platform, instead of the (arguably ugly and unfitting) native one.

Approaches

There are several approaches for this like the mac-like traffic-lights-on-the-header-bar approach. However, I didn't find a way I liked to do that on windows, the buttons being on the top right and such. Feel free to suggest a desing tho!

Development

I am new to Clojure, so I hope I didn't do any stupid things 😅

• A new frontend component is created: win32-title-bar
• That component communicates with the electron process in two ways:

  • Renderer $\rightarrow$ Electron: Via the ipc/ipc function, three events are sent when a button is clicked:

    1. window-minimize
    2. window-maximize-restore
    3. window-close

    These events are later handled at electron/handler.cljs.

  • Electron $\rightarrow$ Renderer: Via the web-contents.send function (window.cljs), full-screen and (un)maximize events are sent to the renderer, which are received at ui.cljs and update states accordingly.. These are needed so the renderer process knows if the app is full-screen and (un)maximized. Then, a suscription to an state is created via state/sub so components can react to changes in states.

Images

Dark Mode

w/ Sidebar

w/o Sidebar

Light Mode

Light mode images

w/ Sidebar

w/o Sidebar

Next Steps?

• As I've said, I'm new to this, so I didn't create/modify any tests 😓
• Any desing proposals you might have are welcome
• Should this be optional? Like a toggle on the settings to switch between native / integrated title bar and/or change it's color

[CLAassistant]

All committers have signed the CLA.

[cnrpman]

@aitor-gamarra Thanks for your great work!
I also don't have any good idea of adding test on this part. So it doesn't matter.
But the authorization does 🤔

Hi @MrWillCom , thanks for your contribution! Can you sign the Logseq CLA so we can introduce your code to the Logseq codebase?
Or we have to overhaul this PR instead of re-using the contribution :(

[MrWillCom]

Hi @MrWillCom , thanks for your contribution! Can you sign the Logseq CLA so we can introduce your code to the Logseq codebase? Or we have to overhaul this PR instead of re-using the contribution :(

Okay, I've signed it. Thanks for making this cool feature come true!

[andelf]

I checked this on my Windows 11. Nice work!

• DOM level is wrong. So when the right-side-area is opened, minimize/maximize/close button is not functioning
• Still need access to application menubar items like "Toggle Developer Tools", this can be added to the right dropdown menu.

[sprocketc]

@aitor-gamarra Thanks a lot for this useful contribution! I would like to work on top of this, if that's OK with you.

@logseq/core Please don't merge this yet. I am working on the following

• Merge the introduced titlebar with our existing header to save some space
• Make it optional and available on linux
• Fix some state/accessibility issues
• Try to add some tests

[aitor-gamarra]

@aitor-gamarra Thanks a lot for this useful contribution! I would like to work on top of this, if that's OK with you.

@logseq/core Please don't merge this yet. I am working on the following

• Merge the introduced titlebar with our existing header to save some space
• Make it optional and available on linux
• Fix some state/accessibility issues
• Try to add some tests

Fine by me and thanks to you @sprocketc! Let me know if I can help with anything :)

[senntore]

@sprocketc would it possible for the integrated title bar to follow them native buttons like how firefox does in linux?
Asking because I prefer having only close button there.

[sprocketc]

@senntore Those options depend on your DE, and might also allow customizing the location of those buttons (left/right). Unfortunately, that goes beyond the scope of this PR. It would be nice if something like the titleBarOverlay was supported across all operating systems, but I don't see that happening soon.

[sprocketc]

Closing this in favor of #9442
@aitor-gamarra @MrWillCom Thanks again for your contribution! The follow up PR is almost ready, in case you want to test it or provide feedback.