Problem

After our Foundation UX tests, we are creating a new overall experience that we now have clear and better designs. This project is aim to implement the new Layout presented in the new designs

Solution

We are taking advantage of this new design to also make a fundamental change base don our technical needs. When implementing this new layout we need to consider that we have also a web version of the app. Based on this, we can implement this idea:

The web app is a slim version of the Desktop app and the desktop app basically adds a "wrapper" to the web version.

This is aligned with the main structured defined in the new designs. The benefits of doing this is that we can think of the main section of the app as a single app that can be renderd in both platforms (desktop and web) and a wrapper component in desktop that adds all the needed info and fucntionality in the desktop app.

For the wrapper section of the desktop app, we have a new sidebar with a slightly different behavior than the current one.

New Sidebar

This new sidebar behaves differently than the one we currently have. The current version of our sidebar is all custom code and as we all know we have a lot of issues with it in the past. This new design aligns a lot more with normal sidebars on other apps and we do have a template we can use for it coming from the same UI library we are using for other parts of the app: ShadCN Sidebar

Changing to this sidebar comes with some downsides:

Traffic lights will not be "embedded" in the MacOS version: Because the sidebar toggle button is in the top left corner, it does not leave any space for the MacOS traffic lights. we will need to change to have the custom bar at the top of each window to include the traffic lights. this is similar to what we do on Windows and Linux. I personally see it as a win situation because this will mean that we will have less fragmented code between platforms.

No "Focus mode" anymore: Because we are loosing the ability to hide the sidebar completely, users will always have windows that will always show the sidebar. Not sure if this is a bad thing or not honestly.

General Actions to the Titlebar

account actions in the titlebar

Create top navigation for generic actions:

Account

Tool settings

Notifications

Access bookmark

Browse, share and navigate content

Some of this general actions are already implemented in the Omnibar, but we still need to move account related actions to the top right of the titlebar. You can check the designs for further specification, I will review these with hm://z6MkkGNjfnikRkxK9EaxMPYy3HYxNGkRyXTWxxRtynB2kyeb before implementing anything.

Scope

I want to make sure everything looks great in 1 week. but maybe I need a bit more time to make sure the code structurally also follows this new layout idea. 2 weeks tops.

Rabbit holes

TBD

No Gos

TBD