feat: Peers page table enhancements

Note: This issue includes and therefore supersedes https://github.com/ipfs-shipyard/ipfs-webui/issues/1037 and https://github.com/ipfs-shipyard/ipfs-webui/issues/1117.

Summary

Enhance Peers page by adding table columns for transfer rates and IPFS version, and removing unused “Notes” column.

To do

• Remove “Notes” column from Peers page table
• Add sortable “In/Out” column between “Latency” and “Peer ID” columns, formatted per mockup:
  • Display TotalIn and TotalOut, or -- if sum(TotalIn, TotalOut) = 0
  • Sort by sum(TotalIn, TotalOut)
  • For units, express as the largest unit that can be used while keeping the value above 1 (i.e. let’s avoid things like 0.2 kB in favor of 211 B)
  • If a transfer is currently happening (e.g. if sum(RateIn, RateOut) > 0 ), add an “indicator light” whose colors are the same as the in/out colors on Status page; for edge case in which out/in values are the same, split the circle in two as per mockup
  • Include browser-native hover state indicating current RateIn and RateOut as well as TotalIn and TotalOut, per mockup
• For “Peer ID” column, make peer IDs clickable, with an action of copying that peer ID to clipboard and feedback using green snackbar: “Peer ID copied to clipboard.”
• For “Connection” column, make row content clickable, with an action of copying that multiaddr to clipboard and feedback using green snackbar: “Connection address copied to clipboard.”
• For “Connection” column, also append direction to the hover text as such: /multi/addr (outbound) (note this doesn’t appear if using js-ipfs)
• Add sortable “Agent” column at the far right, formatted per mockup, using AgentVersion via ipfs id <PeerId>
  • Include hover state indicating what type of activity occurred, i.e. DHT, Bitswap (note this doesn’t appear if using js-ipfs)
• <del>Make items in “Peer ID” column links that open the Explore page with that particular IPNS address</del> (peers dont publish anything under their PeerID by default, this would be broken for most of peers)
• Replace monospace font throughout table with standard Inter for everything except the values in the “Peer ID” column

Mockup screenshot

[rafaelramalho19]

Yes, after the breadcrumbs work I’ll pick up this 😄

[jessicaschilling]

@lidel Thanks for the clarification - added that as a to-do item in https://github.com/ipfs-shipyard/ipfs-webui/pull/1616.