Bottom bar

mikedilger commented

2025-02-08 10:04:39 +13:00

(Migrated from github.com)

I'm opening this issue for you @dtonon since you've expressed a strong opinion about the bottom bar. ~~I am not merging into master until you and I have this conversation.~~

I have a strong opinion about the width of the sidebar. I want it optionally narrow. It doesn't have to shrink down to tiny icons, the menu words are actually narrow enough, but I don't want it twice as wide. The things that were making it wide were:

The L/R/P indicators (which we could stack)
The "Offline mode" switch
The error message area

Shrinking (2) and (3) is just unacceptable, so they were forcing the menu bar to be fat.

The options we have are:

The bottom bar (as I have on unstable)
Putting that bottom bar up at the top
Stacking the LRP, Moving error messages to popups, and moving the offline-mode switch to ???

I'm opening this issue for you @dtonon since you've expressed a strong opinion about the bottom bar. ~~I am not merging into master until you and I have this conversation.~~ I have a strong opinion about the width of the sidebar. I want it optionally narrow. It doesn't have to shrink down to tiny icons, the menu words are actually narrow enough, but I don't want it twice as wide. The things that were making it wide were: 1) The L/R/P indicators (which we could stack) 2) The "Offline mode" switch 3) The error message area Shrinking (2) and (3) is just unacceptable, so they were forcing the menu bar to be fat. The options we have are: 1) The bottom bar (as I have on unstable) 2) Putting that bottom bar up at the top 3) Stacking the LRP, Moving error messages to popups, and moving the offline-mode switch to ???

dtonon commented

2025-02-11 06:59:11 +13:00

(Migrated from github.com)

I share your concerns about the width of the sidebar, in fact I'm used to resize it every time I open Gossip, and I'm quite disturbed by the fact that the counter at the bottom limit the resize.

I think we should separate the PostmarketOS issue (use in really small screen, like mobile) from the general optimization. Even if some solutions for the latter could benefit the former, probably a mobile version would require hiding the sidebar completely.

I just like the idea of having the feed touching the bottom of the app, I think it make the UI clearer without too many distractions.
Ideally we can put several notices widget at the bottom of the sidebar, but they should be "responsive", so do not force the width. Instead I agree that status messages are absolutely better in the current horizontal form, but we really need them there? They are in any case cropped on the right, so maybe for important message would be better having a floating badge ("toast" in UI jargon), clickable and with a synthetic message, that brings the user to a messages section with the full (persistent!) details.

Said that, my opinion is not "strong", I don't think the status bar creates any problem, it's just quite usual and so it takes some of the charm away from the interface, but without solving all the problems (e.g. long status messages).

I'm going to think more about this and design a proposal.

I share your concerns about the width of the sidebar, in fact I'm used to resize it every time I open Gossip, and I'm quite disturbed by the fact that the counter at the bottom limit the resize. I think we should separate the PostmarketOS issue (use in really small screen, like mobile) from the general optimization. Even if some solutions for the latter could benefit the former, probably a mobile version would require hiding the sidebar completely. I just like the idea of having the feed touching the bottom of the app, I think it make the UI clearer without too many distractions. Ideally we can put several notices widget at the bottom of the sidebar, but they should be "responsive", so do not force the width. Instead I agree that status messages are absolutely better in the current horizontal form, but we really need them there? They are in any case cropped on the right, so maybe for important message would be better having a floating badge ("toast" in UI jargon), clickable and with a synthetic message, that brings the user to a messages section with the full (persistent!) details. Said that, my opinion is not "strong", I don't think the status bar creates any problem, it's just quite usual and so it takes some of the charm away from the interface, but without solving all the problems (e.g. long status messages). I'm going to think more about this and design a proposal.

mikedilger commented

2025-02-11 12:26:29 +13:00

(Migrated from github.com)

I like the idea of using toasts, and having a persistent area with all the notifications.

I like your idea of having the console logs inside the app somewhere, probably far better organized (by relay). That could remove one of those 3 buttons making the sidebar smaller if it was put back into the sidebar.

Then the "offline mode" doesn't even need to be there. I use it when I do UI work because of lots of opening/closing the UI and I don't want all the network connections each time, but I can just turn it off in settings and leave it off until I'm done.

I like the idea of using toasts, and having a persistent area with all the notifications. I like your idea of having the console logs inside the app somewhere, probably far better organized (by relay). That could remove one of those 3 buttons making the sidebar smaller if it was put back into the sidebar. Then the "offline mode" doesn't even need to be there. I use it when I do UI work because of lots of opening/closing the UI and I don't want all the network connections each time, but I can just turn it off in settings and leave it off until I'm done.

dtonon commented

2025-02-21 09:20:25 +13:00

(Migrated from github.com)

Here is a first solution.

The bottom area of the sidebar contains a single notification counter.
When there is a new request/pending action, the counter on the bottom highlights, when the user enters the view, the highlight status is reset.

New messages are shown with a toast (that can have different styles and interactions, for example a generic notification that auto disappear after X seconds, and a warning one that requires a manual action).
Messages have a title and a description, the toast shows only the title, clicking it you can read the full text.
Requests and pending action could generate a notification.

All the requests and pending actions are grouped in a unique view, and always stay at the top. Other generic messages follow.

A button on the top-right permits accessing a similar view with the raw logs of the application.

Here is a first solution. The bottom area of the sidebar contains a single notification counter. When there is a new request/pending action, the counter on the bottom highlights, when the user enters the view, the highlight status is reset. New messages are shown with a toast (that can have different styles and interactions, for example a generic notification that auto disappear after X seconds, and a warning one that requires a manual action). Messages have a title and a description, the toast shows only the title, clicking it you can read the full text. Requests and pending action could generate a notification. All the requests and pending actions are grouped in a unique view, and always stay at the top. Other generic messages follow. A button on the top-right permits accessing a similar view with the raw logs of the application. <img width="1029" alt="Image" src="https://github.com/user-attachments/assets/4915862f-0663-4535-8e9c-b697e8b0229f" /> <br/><br/> <img width="1029" alt="Image" src="https://github.com/user-attachments/assets/79faa5de-f2b9-4ff6-816b-d04ac2e80551" />

mikedilger commented

2025-02-21 12:37:26 +13:00

(Migrated from github.com)

I like all of this, except currently my left menu is so narrow that (o_) Offline mode would not fit.

I like all of this, except currently my left menu is so narrow that `(o_) Offline mode` would not fit.

dtonon commented

2025-02-21 20:08:48 +13:00

(Migrated from github.com)

Just make it responsive and replace the text with an airplane icon when sidebar's width < X.

👍 1

dtonon commented

2025-02-22 20:22:35 +13:00

(Migrated from github.com)

I updated the design and moved the discussion to https://github.com/mikedilger/gossip/issues/970

mikedilger commented

2025-03-21 13:23:13 +13:00

(Migrated from github.com)

I'll close this and leave #970 open.

Rows
Columns

Bottom bar #958