Make app responsive and toggle sidebar

sejas commented 2 months ago

Closes https://github.com/Automattic/dotcom-forge/issues/8986

Proposed Changes

Create a new top bar
Move Authentication buttons to that top bar
Move offline indicator to the TopBar
Add a new button to toggle the sidebar
Fix tests (I'll move the topbar tests to its own file)

Testing Instructions

Run npm start
Observe a new top bar
Click in the first icon
Observe the app reduces its size and the sidebar disappears
Change tabs and observe the UI doesn't break.
Click again on the leftDrawer icon in the topbar and observe the app displays the sidebar and the window restores it's previous size.
If possible test in Mac and Windows.

Mac

https://github.com/user-attachments/assets/ae3e928f-3ea6-4094-bb8d-bc9f5507ba60

Windows

https://github.com/user-attachments/assets/675cd76b-3f7b-40df-bb08-5c357e0d8c39

Offline indicator

Pre-merge Checklist

[ ] Have you checked for TypeScript, React or other console errors?

sejas commented 2 months ago

@wojtekn , are you ok merging this? or would you prefer to add it behind a feature flag?

In my opinion the responsive is an independent feature from the Assistant, the same way the float on top is already released.

matt-west commented 2 months ago

Nice work @sejas! I was only able to test it on Mac, but spotted a few minor things.

Is it possible to centre the icons in the top bar with the window controls?

Can you increase the height of the user element in the top bar to 24px so it matches the height of the help icon when hovered.

The user avatar and help icon should be closer together. The avatar is also missing the white outline.

Current	Design

When the offline icon is displayed, the header bar gets taller.

https://github.com/user-attachments/assets/2914bcc7-82b3-4dfd-8e62-4c6994d28289

Is it possible to automatically collapse the sidebar if the user tries to resize the window below the min-width? (Totally fine to tackle this in a separate PR if needed.)

https://github.com/user-attachments/assets/bd10f291-4b01-465c-8eea-f32af38414f9

wojtekn commented 2 months ago

I've tested it on macOS. Looks great! I noticed some issues:

layout shift between authenticated and logged-out state (mentioned by Matt above, too)
The Import / Export tab got a scrollbar as we reduced window height. Could we slightly reduce the import box height to avoid that? @matt-west
when I have wide Studio window, and I hide the scrollbar, it hides the scrollbar but uses the minimum width. I expect it will use the previous width with the subtracted sidebar width

I will test it on Windows soon.

In my opinion the responsive is an independent feature from the Assistant, the same way the float on top is already released.

It makes sense. Let's release it for all users.

matt-west commented 2 months ago

The Import / Export tab got a scrollbar as we reduced window height. Could we slightly reduce the import box height to avoid that?

Yep. Reducing the height to h-36 should fix the scrolling issue.

wojtekn commented 2 months ago

It works well on Windows, with the following issues:

minimum window width is used when I hide the scrollbar, regardless of my window width, similarly to macOS behavior
when I hide the scrollbar, it is hidden smoothly with animation, but the window size changes rapidly. On macOS, it works smoothly, too. If it's not quick fix, we could fix this as a follow-up, though.

User logged in:

Zrzut ekranu 2024-09-13 161108

Use logged out: Zrzut ekranu 2024-09-13 161125

Sidebar hidden: Zrzut ekranu 2024-09-13 161054

sejas commented 2 months ago

@wojtekn , @matt-west , thanks for reviewing the PR. I've fixed everything you mentioned.

when I have wide Studio window, and I hide the scrollbar, it hides the scrollbar but uses the minimum width. I expect it will use the previous width with the subtracted sidebar width

I've implemented the memory size for both states, with and without sidebar, but this behaviour can conflict if/when we implement the window manual resizing:

Is it possible to automatically collapse the sidebar if the user tries to resize the window below the min-width? (Totally fine to tackle this in a separate PR if needed.)

We could need a bit of discussion about making the window responsive by resizing it. It's possible, and it makes sense to me. But it seems incompatible combined with saving the previous width. My understanding of the manual resizing is that when a user makes the window smaller than the "minimum" size, the sidebar will disappear and when the user makes it bigger than the minimum size, then the sidebar will appear automatically. But what should happen when the user clicks on the button?. I think in that case we shouldn't save any previous width and just use the smallest width possible for each state.

I'll merge this PR and if we find new bugs or enhancements, we can open new PRs/issues. Thank you!

sejas commented 2 months ago

@wojtekn , @matt-west , in fact Wojtek's suggestion was simpler and it's totally compatible to automatically displaying/hiding the sidebar on window resize. Check the PR below.

when I have wide Studio window, and I hide the scrollbar, it hides the scrollbar but uses the minimum width. I expect it will use the previous width with the subtracted sidebar width

I misunderstood this explanation thinking to keep the size memory, but you actually were suggesting a simpler workflow. 👌

I've created a PR applying your approach and Matt's suggestion.

Is it possible to automatically collapse the sidebar if the user tries to resize the window below the min-width? (Totally fine to tackle this in a separate PR if needed.)

Done! 🥳 Let me know what you think:

https://github.com/Automattic/studio/pull/536 😚 👌

Automattic / studio