New relays section

[dtonon]

Cloned from https://github.com/mikedilger/gossip/pull/402, now on unstable.

Items marked with 📍 are in my opinion the priorities.

---

Add a relay

• [ ] A1 - We should check if we can connect to the relay, show if there is a DNS error or any other type of errors, in the latter case the user should still be able to add the relay.
• [ ] A2 - If a host is added without the protocol, let's assume "wss://".
• [ ] A3 - Some invalid hosts (ex. "wss://relay.damus.io." or "wss://.relay.damus.io") pass the check, could be solved by A1.
• [x] A4 - ~~The error message "That's not a valid relay URL" should be showed inside the modal and not in the sidebar.~~ Not needed because now the check is realtime and disable the "Check" button
• [x] A5 - After adding a relay instead of filter it by name it should be placed on the top of the list in edit mode, because the user must personalize it.
• [x] A6 - ~~After adding & enabling a relay (read/write) it does not connect, no activity in the log, I have to restart gossip.~~ Moved: https://github.com/mikedilger/gossip/issues/499
• [x] A7 📍 Precompile the input with "wss://"

Edit a relay

• [x] E1 📍 When editing a relay the list refresh must be stopped.
• [x] E2 - ~~Light theme: when editing a relay the others' items background should be darker (ex. 50% opacity), like in the dark theme, to focus the edit area. Related to L5.~~
• [x] E3 - The action "Remove from personal list" does not works.
• [x] E4 - Force disconnect should be disabled (gray and without underline) if the relay is not connected.
• [x] E5 - The action "Force disconnect" does not give any feedback, could be solved by E4.
• [x] E7 - "Force disconnect" when disabled (gray) is still clickable and close the edit (2023-08-23)

All relays lists

• [x] L1 📍 Update compact/expand views as proposed.
• [x] L2 - Add a sort by name (a-z).
• [x] L3 - ~~Add a sort by add date (newer => older) and set it as a default~~ Moved: #525
• [x] L4 - Show the host without the "wss://" protocol (could be added when switching to edit/details).
• [x] L5 📍 Light theme: items background should be white.
• [x] L6 - Show a bullet in front off the relay showing the status: green => connected, gray => disconnected; yellow => penalty box (hovering over the mouse shows the remaining time).
• [ ] L7 - Change the rows background to visuals.panel_fill

Active relays view

• [x] R1 📍 The coverage list should be moved to another view; currently if it is taller than the viewport so it is not possibile to scroll it and view the the actual relays.

I'm not able to check further due to R1.

My relays view

• [x] M1 📍 Add "Advertise" button.
• [x] M2 📍 Use blue background for "Advertise" button.
• [x] M3 📍 Remove the cloned input search

Know network view

• [x] K1 📍 Add "Hide from the view" near "Force disconnect".

Bootstrap a fresh profile

• [x] B1 - ~~Hide the "Relays" sub-menu block; when the user click the "Relays" item show "My Relays" view and immediatly open the "Add new relay" modal.~~ With the new #421 we should always have some relay, so this point is not necessary anymore.

~~Cosmetics~~

We will move them to a new specific issue.

• [x] C1 - ~~Revert light theme accent color to the original one.~~
• [x] C2 - ~~Review "Add relay" button colors/hover/spacing/font-size.~~
• [x] C3 - ~~Review "Close" button font-size.~~
• [x] E6 - ~~Make the tooltips less wide to improve readability.~~

---