Review Relays section #834

Open
opened 2024-08-29 03:06:55 +12:00 by dtonon · 12 comments
dtonon commented 2024-08-29 03:06:55 +12:00 (Migrated from github.com)

Here are some fixes to clean up and improve (imo) the Relay section:

General interface

  • Remove the "Add Relay" button from the sidebar; it is the only case where a button is placed in the sidebar, so it's a inconvenient exception to handle.
  • Add the "Add Relay" button on the left of the top search.
  • Reduce the width of the search input by 25%.
  • Fix the lens position in the search input.
  • Move the "Advertise relay list" button inside the top-right dropdown menu.
  • Replace the top-right icon for the dropdown with the standard "3 lines" one.
  • Show the mouse pointer when hovering Relay coverage and Advertise relay list

Lists

  • Make the whole row clickable, add a hover effect (darker color for dark theme, lighter color for light theme) and remove the right "settings" icon.
  • Remove the ending slash from the urls.
  • Remove the "wss://" protocol from the urls and add an icon for ws:// relays - see https://github.com/mikedilger/gossip/issues/702
  • Fix horizontal scrolling issue (2024-09-18)
  • Remove the tooltip on the row (it is redundant) (2024-09-18)
  • Add "path:port" if the details option is active (2024-09-21)

Relay details

  • Add a little more space below the relay name.
  • Move the relay picker rank on the top-left, before the infos.
  • Add "path:port" (2024-09-21)
Here are some fixes to clean up and improve (imo) the Relay section: ## General interface - [x] Remove the "Add Relay" button from the sidebar; it is the only case where a button is placed in the sidebar, so it's a inconvenient exception to handle. - [x] Add the "Add Relay" button on the left of the top search. - [x] Reduce the width of the search input by 25%. - [x] Fix the lens position in the search input. - [x] Move the "Advertise relay list" button inside the top-right dropdown menu. - [x] Replace the top-right icon for the dropdown with the standard "3 lines" one. - [ ] Show the mouse pointer when hovering _Relay coverage_ and _Advertise relay list_ ## Lists - [x] Make the whole row clickable, add a hover effect (darker color for dark theme, lighter color for light theme) and remove the right "settings" icon. - [x] Remove the ending slash from the urls. - [x] Remove the "wss://" protocol from the urls and add an icon for ws:// relays - see https://github.com/mikedilger/gossip/issues/702 - [x] Fix horizontal scrolling issue (2024-09-18) - [ ] Remove the tooltip on the row (it is redundant) (2024-09-18) - [ ] Add "path:port" if the details option is active (2024-09-21) ## Relay details - [x] Add a little more space below the relay name. - [x] Move the relay picker rank on the top-left, before the infos. - [ ] Add "path:port" (2024-09-21)
bu5hm4nn commented 2024-09-13 10:14:19 +12:00 (Migrated from github.com)

I skipped moving the "Advertise Relays" button for now, because it is also used as a status indicator for the advertisement (it displays "n relays to go"). I think we need a general solution for displaying status of "background tasks".

I skipped moving the "Advertise Relays" button for now, because it is also used as a status indicator for the advertisement (it displays "n relays to go"). I think we need a general solution for displaying status of "background tasks".
dtonon commented 2024-09-13 10:22:30 +12:00 (Migrated from github.com)

Is the realtime update really important for the user? I don't think so.
I would keep trace only of the final status, and for this we need to enable the general log view. But it's an optional step.

Is the realtime update really important for the user? I don't think so. I would keep trace only of the final status, and for this we need to enable the general log view. But it's an optional step.
mikedilger commented 2024-09-13 12:10:42 +12:00 (Migrated from github.com)

I think we need a general solution for displaying status of "background tasks".

Yes I agree. People don't want to look at terminal logs, but they do want to know if their posts succeeded to the relays they are going to, and when advertise is done, etc.

> I think we need a general solution for displaying status of "background tasks". Yes I agree. People don't want to look at terminal logs, but they do want to know if their posts succeeded to the relays they are going to, and when advertise is done, etc.
dtonon commented 2024-09-19 01:40:57 +12:00 (Migrated from github.com)

@bu5hm4nn there is a scrolling issue with long relay names:

image
@bu5hm4nn there is a scrolling issue with long relay names: <img width="820" alt="image" src="https://github.com/user-attachments/assets/2842ba22-e278-44fe-8063-a9ecc9a42c18">
dtonon commented 2024-09-19 02:08:13 +12:00 (Migrated from github.com)

Yes I agree. People don't want to look at terminal logs, but they do want to know if their posts succeeded to the relays they are going to, and when advertise is done, etc.

I also agree, and we actually have a free slot on the bottom of the sidebar for this.
We can show both informative logs (maybe the level can be set by a preference) and the in-progress tasks, putting them on the top with a different style (e.g. a light animation).

But for this specific case, I think that, for now, we can safely avoid showing the user a counter that goes from 250+ to zero.

> Yes I agree. People don't want to look at terminal logs, but they do want to know if their posts succeeded to the relays they are going to, and when advertise is done, etc. I also agree, and we actually have a free slot on the bottom of the sidebar for this. We can show both informative logs (maybe the level can be set by a preference) and the in-progress tasks, putting them on the top with a different style (e.g. a light animation). But for this specific case, I think that, for now, we can safely avoid showing the user a counter that goes from 250+ to zero.
bu5hm4nn commented 2024-09-20 10:39:59 +12:00 (Migrated from github.com)

Should be all done on branch

Should be all done on branch
mikedilger commented 2024-09-20 11:10:44 +12:00 (Migrated from github.com)

Looks good to me, except that the relay path is missing. If relays have a path (which is the exception) it must be shown. I'm fine with wss:// being elided, as well as trailing slashes. But we need the path. I insist.

Gossip picks up a lot of bad relay records. I will try to work on pruning those out. For the moment, you can't identify the bad ones without the path.

Looks good to me, except that the relay path is missing. If relays have a path (which is the exception) it must be shown. I'm fine with `wss://` being elided, as well as trailing slashes. But we need the path. I insist. Gossip picks up a lot of bad relay records. I will try to work on pruning those out. For the moment, you can't identify the bad ones without the path.
dtonon commented 2024-09-21 01:14:02 +12:00 (Migrated from github.com)

@mikedilger

But we need the path.

I agree.
To have a cleaner default view, we can show it (together with the port) when the relay is expanded, like this:

image

And in the details mode:

image

What do you think?

@mikedilger > But we need the path. I agree. To have a cleaner default view, we can show it (together with the port) when the relay is expanded, like this: ![image](https://github.com/user-attachments/assets/57c8df1c-c885-4823-8fb7-bb057956c644) And in the details mode: ![image](https://github.com/user-attachments/assets/034d1d75-b167-4e6d-b753-933aa35755c7) What do you think?
dtonon commented 2024-09-21 01:26:58 +12:00 (Migrated from github.com)

@bu5hm4nn almost perfect, just this notes:

image

I would further reduce the search width, 8-9 characters seems sufficient to filter the relay list. This way we have more space to show the title when the window is compact.

image

The tooltips are still present.

image

The outbox preview box is not always clickable, it have blind spots, you can verify it from the fact that the mouse cursor changes when hovering.

image

Do we have a neutral (gray) version of the dropdown button? I would prefer it.

I added an item:

  • Show the mouse pointer when hovering Relay coverage and Advertise relay list
@bu5hm4nn almost perfect, just this notes: <img width="453" alt="image" src="https://github.com/user-attachments/assets/b4eed6c3-6a24-4a85-80fd-bf61e54eb7bf"> I would further reduce the search width, 8-9 characters seems sufficient to filter the relay list. This way we have more space to show the title when the window is compact. <img width="306" alt="image" src="https://github.com/user-attachments/assets/afc1f55f-5ee5-4e14-9c17-6b3b2dc91991"> The tooltips are still present. <img width="217" alt="image" src="https://github.com/user-attachments/assets/6fe41ac4-1142-4496-b269-ab1aeecf0d36"> The outbox preview box is not always clickable, it have blind spots, you can verify it from the fact that the mouse cursor changes when hovering. <img width="264" alt="image" src="https://github.com/user-attachments/assets/8df928e3-b70a-4991-85bc-06bcf55fe435"> Do we have a neutral (gray) version of the dropdown button? I would prefer it. I added an item: * _Show the mouse pointer when hovering Relay coverage and Advertise relay list_
mikedilger commented 2024-09-21 13:44:21 +12:00 (Migrated from github.com)

What do you think?

That's ok. As long as it is there.

> What do you think? That's ok. As long as it is there.
dtonon commented 2024-09-21 18:01:34 +12:00 (Migrated from github.com)

That's ok. As long as it is there.

@bu5hm4nn can you that the path/port as proposed?

> That's ok. As long as it is there. @bu5hm4nn can you that the path/port as proposed?
bu5hm4nn commented 2024-09-24 13:46:02 +12:00 (Migrated from github.com)

Please re-test the branch. I am not confident enough to remove the tooltip with the full url string, I might have missed some cases (maybe some with arguments).

Please re-test the branch. I am not confident enough to remove the tooltip with the full url string, I might have missed some cases (maybe some with arguments).
Sign in to join this conversation.
No milestone
No project
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
nostr/gossip#834
No description provided.