Enhance note status

[ticruz38]

Related to #371

• Adding 3 tabs to the Publishes view
• Connections have 6 stats boxes that display the connection quality (connected, logged out, failed etc) clicking one of the stat box filter out the connections that fit in that category.
• Each connection or Relay has a badge if some event where posted via them (success is also used)
• Notices tab will list all event posted via this relay and the status attached

Notices are kind of unclear what should be displayed, I have the event, the status of the request and the relay url, not sure how to display this.

This is a draft, just look at the screenshot and give me some general feedback

Stats box are likely too big, you can see a timeout attached to some relay

Here the relay display how many successful events where posted to it

[staab]

Nice, a few comments:

• Instead of icons, use text. In this case, the icon is the main piece of information so it shouldn't be hidden behind something the user has to guess at or hover over. Something similar to the current status dot would be good — maybe in the top right, across from the relay name, show a dot + a status name with a tooltip that explains what the status means.
• I agree the tiles are too big. Maybe use SelectButton multiple=true instead to control which connections are visible
• On notices, I was thinking less about showing event publishes than NOTICE or OK=false messages from a given relay. If it's an ok related to an event, you can show some event details, but the main thing to surface is the message that goes along with the notice or ok.

[ticruz38]

Show connection status, there is no popover on the status as the name is quite descriptive already.

With a status selected using SelectButton

The notice looks like coloured logs in a terminal, since Notice are de-facto a nerdish info, it make sense to have this more technical oriented display.

I rarely get any message from the endpoint along with the status, I have here the default message being hardcoded as "Published", I can use something more technical such as 200 OK
When clicking on the line it pops a modal with the event.

[staab]

Cool, I like all of this. Maybe left-align the select buttons though. Otherwise, let me know when it's ready for review and I'll take a closer look.

[ticruz38]

It should be fine to review now

Have created 2 new components, in the view folder, PublishesNotices and PublishesConnections, the plan was to have them link to the router but it proved more challenging than expected with the tabs. So these 2 views are just 2 child components for Publishes.

I can move them to another folder if it makes more sense

[staab]

This results in a flash of zeroes on first load. Instead, put this in a throttled function and call it on mount and in an interval.

[ticruz38]

it is not updated inside the loop, the connectionStatus is updated once every 800 ms, there is no flashing on each connection state

[staab]

On first page load there is, because the interval doesn't run at first:
https://github.com/user-attachments/assets/2b47224e-536d-4af5-a663-510c9bab2546

[ticruz38]

• Tracking all Notice events when bootstrapping the app.
• Connection barely triggers any ConnectionEvent.Notice events, so I catch all verbs except EVENT. This includes Negentropy messages, EOSE, CLOSE, OK, etc.
• The notice console is more compact now and holds a lot more information.
• As for the colors, EOSE uses a neutral color—it is usually synonymous with success, but it can also indicate failure. OK is in green, despite sometimes being synonymous with an auth error.

[staab]

Looking good, a few things:

• Enhance note status #487 (comment) still needs to be resolved
• On the notices page, let's replace the relay selector with a generic "search" box. This should match against relay url, verb (ok/notice), and message.
• The animation on the notices page is janky, use in rather than transition.
• While I like the granularity on the notices page, I agree with your point that storing all this is going to be pretty heavy, for not very much benefit. Let's slim it down to OK and NOTICE.
• Let's factor the thunks page out into its own component as well.

[staab]

Maybe derive this in engine/state alongside subscriptionNotices

[staab]

sortBy(x => -x.created_at, ...) is a more succinct way to do this. Also, the filter(Boolean) shouldn't be necessary here, something is wrong upstream if it's needed. (Thunk & (SubscriptionNotice & {url: string})) is pretty ugly too, SubscriptionNotice should probably include url in its type, and a | would be more appropriate instead (although it would require type assertions, so & is fine here if it works).

[staab]

I prefer to decouple constants and display logic by adding an additional displayConnectionType function.

[staab]

I'd add url to the object just to make the types easier.