search

codepod-io / codepod

Codepod IDE: Scalable Interactive Coding
https://codepod.io
MIT License
71 stars 16 forks source link

[UI] Move Runtime status to BottomAppBar #492

Closed senwang86 closed 12 months ago

senwang86 commented 12 months ago

Summary

A UI refactor which moves the Sync Status and Runtime Status from Sidebar to a newly created BottomAppBar.

Screenshot 2023-08-29 at 4 23 40 PM

Test

bottom_status_bar

lihebi commented 12 months ago

This UI looks fancy! Instead of "moving", I'd like to keep both (essentially two types of "widgets"). We need a "widget" system to allow users to configure what widgets to show in the sidebar and the bottom-status-bar.

lihebi commented 12 months ago

I changed the sidebar just a little bit in #493, resulting in a slight conflict. I've merged that PR since it's pretty big and may cause more conflicts.

lihebi commented 12 months ago

A second thought: I probably want to hold on this, because the status items/buttons aren’t fixed, and I’m working on adding locally spawned runtimes to these sections. Working with sidebar seems easier to make changes.

senwang86 commented 12 months ago

This UI looks fancy! Instead of "moving", I'd like to keep both (essentially two types of "widgets"). We need a "widget" system to allow users to configure what widgets to show in the sidebar and the bottom-status-bar.

Yeah, I recall this. The only concern is that if we need to maintain 2 sets of code for the same UI system, given that Sidebar and BottomBar have different space constraint.

senwang86 commented 12 months ago

A second thought: I probably want to hold on this, because the status items/buttons aren’t fixed, and I’m working on adding locally spawned runtimes to these sections. Working with sidebar seems easier to make changes.

SG. Just let me know once you finish the local runtime work.

forrestbao commented 12 months ago

Thanks @senwang86. My two cents: Can we move the status info to the top bar? The bottom of the screen is usually where the programmer's gaze is at: because code goes top to down. The status bar there sounds a distraction.

lihebi commented 12 months ago

We'll have a widget system that allows users to configure "what" widgets to be displayed at "which" location, be it top or bottom.

senwang86 commented 12 months ago
Screenshot 2023-08-31 at 6 56 17 PM
lihebi commented 12 months ago

I used the bottom bar a little, and I feel that this design is a little over-engineered. The first principle of UI design IMO is to be simple and explicit.

  1. Simple: I'm not a fan of replacing text with icons. Texts are simple and easy to understand.
  2. Explicit: The bottom bar also hides multiple runtimes into 2nd-level menus, which is not explicit. We may very well need to see all runtime statuses, especially when we introduce dev/prod, training/inference, multiple languages.

Let's use plain text and refine the UI later.

lihebi commented 12 months ago

we need to maintain 2 sets of code for the same UI system

Agree. This is also one of the main concerns that I hesitate to merge. I can feel that this will create headaches for future changes. Let's defer the UI polishing to the very end.

senwang86 commented 12 months ago

Thanks @senwang86. My two cents: Can we move the status info to the top bar? The bottom of the screen is usually where the programmer's gaze is at: because code goes top to down. The status bar there sounds a distraction.

Hi @forrestbao , appreciate for the feedback! After some discussion, we agree that the status bar might not offer enough benefit, just as you suggested that it might cause users to be distracted. Thus it will not be merged.