Window chrome on MacOS

[shishkin]

Expected Behavior

Window layout should fit nicely into the native window chrome.

Current Behavior

In Native window mode on MacOS the sidebar is overlapping with native window controls. See screenshot below:

I would have used simulated macOS window mode, but it is awfully blurry on 120% zoom (probably a separate issue though less disturbing).

Steps to Reproduce

1. Open the app on MacOS

2. Switch to Native window mode

3. Restart the app

Context

I'm just trying to enjoy MacOS esthetics :)

Your Environment

• Application version (e.g. v0.1.0) : 0.3.0
• Operating System and version (e.g. Windows 10) : MacOS 13.5
• Server and version (e.g. Navidrome v0.48.0) : irrelevant
• Node version (if developing locally) : irrelevant

[jeffvli]

I don't have a macOS device to test, but I do have an idea of what the issue might be. I'll create a custom build later today to test.

[shishkin]

Thanks! Just let me know and I can test it.

[jeffvli]

Can you try downloading the PR build for macos-binaries under Artifacts?

[shishkin]

Unfortunately that didn't work:

I also noticed that it was impossible to drag the window by its top side in the main content area, only by the top side of the sidebar.

I think I'll try to play around with the code myself and see what works.

[jeffvli]

I pushed an additional change that may fix it. If you don't want to wait for the PR build you can pull the branch and build it locally with npm run package or npm run package:dev for the unpacked version.

[shishkin]

Thanks @jeffvli. That draws proper native MacOS titlebar now.

Just one thing is that titlebar is lacking app theme colors. It always uses OS theme instead of the app theme. I think you might need to handle native theme switching. I tried to get it to work, but I think I'm not very well understanding the code structure and it is somewhat different from the basic electron example in the linked guide.

[shishkin]

I think what could help is draw no frame for MacOS native window, but set padding in this hook for Platform.LINUX (should be native instead) and isMacOS() (which I don't know how to access from the renderer part).

[jeffvli]

Sorry for no updates on this for a while. I'd appreciate if someone with a macOS device can work on this instead since it's difficult for me to work on it when I'm unable to see the output of the changes made.

[shishkin]

I can help to get it to work if you could refactor the code more towards what is described in electron guides or at least separate semantics of Platform.LINUX from native.