Implement unified app header

[nikku]

What should we do?

Implement unified app header for Windows and Linux as specified in https://github.com/camunda/camunda-modeler-design/issues/45.

Why should we do it?

Part of our ongoing UI overhaul.

---

Solution Sketch

• [ ] Use frameless window provided by electron and build our very own custom title bar for Windows and Linux
  • [ ] Implement keyboard accessibility (navigation, Alt + shortcut behavior, ...)
  • [ ] Implement menus (reuse electron context menu?)
  • [ ] Implement title bar look and feel (window controls?, draggable to move window)
  • [ ] Implement frame?
• [ ] Architecture: Add a switch between MacOS and Windows/Linux
  • Different headers
  • Different keyboards shortcut handling
• [ ] Architecture: Menu construction
  • Move fully to client
  • Re-use menu definition in app header (Windows/Linux) as well as to create native menu (MacOS)

Detailed steps outlined in this tutorial.

As an alternative we could try to re-use existing libraries that implement such feature (cf. https://github.com/camunda/camunda-modeler/issues/2519#issuecomment-950837212).

---

See feature spec, overall design spec.

[barmac]

My old (Nov 2020) research results:

1. You can customize the title bar and remove the menu bar in Electron.
2. Advanced customization relies on removal of the title bar completely (so-called frameless window) and then re-creating it with HTML & co. This is how it works in GitHub Desktop, which is also an Electron app.
3. It is some effort but we have a great control over what and how we display.
4. Alternatively, we can also just enable autohiding of the menu bar. In that case, it's displayed only when user presses Alt.

Demo of what is easily achievable:

Draggable region -> if you disable the title bar, you have to manually set the area where you can grab the window to move it around. This is customizable too :slightly_smiling_face:

[barmac]

Electron docs: https://www.electronjs.org/docs/latest/api/frameless-window

[nikku]

Haha, basically exactly my assessment. We don't need to synchronize regarding this anymore then :).

[nikku]

High level technical evaluation:

• It is a lot of work. It will make the app completely custom (custom menu, no OS-styles anymore).
• Lightweight alternative: Auto-hide menu bar.

[nikku]

We could consider using a pre-built solution to add the desired functionality:

• frameless-titlebar
  • React
  • Checks all boxes a11y wise
  • Seems to be abandoned?
• custom-electron-titlebar
  • Abandoned

[nikku]

Considering pre-built menu solutions to build upon (or potentially fork):

• react-app-menu
• rc-menu

[nikku]

Added a summary of the detailed assessment we conducted today.