networking: Group / sort network interface list

[garrett]

Right now, the interface list looks like this:

But they're alphabetically sorted.

We should, instead, rework it so they're resorted and grouped in some manner:

• active / inactive
• wired
• wireless
• virtual

I think most people care about the devices in use, so I'd suggest we split them into active versus inactive. Then, we probably would want to sort on type (wired, wireless, virtual), and then sort by alphabetical order.

So, we'd probably want to add a "type" where it specifically mentions

[garrett]

Even just reordering to active, no carrier, inactive, not available is already a lot better. At a glance, you can see what's sending things. This is just a pixel-shifted mockup, where I manually reordered the above screenshot:

(Secondary ordering is still just alphabetical.)

If we did this and added types as a column, it would probably even be enough.

[garrett]

It might make sense to sort by availability first (like suggested above, with active, somewhat active, not active, not available) and then perhaps IP address (or the first part to sort by network instead of specific IP address) instead of alphabetical. WDYT?

[garrett]

Additionally, we might want to use a monospaced variant for the addresses and the sending numbers. I suggest we use the opt-in for the tabular font for the table.

And then we probably want to align the numbers differently too so it's right aligned numbers and left aligned units. That would probably be a little tricky without subgrid, unless we right-align and fix the width of the units to 4ch or something. (But that's a little bit of a hack.)

We also might want to normalize the units too, so they don't change all the time. That is, look at the last amount of time and see if the max is in bytes, K, M, G or what, and keep it at that, unless the max changes in the time window.

We could even extend this so relative bandwidth is shown as a little graph at the edge, where they're all compared to one another, so you can spot what's sending or receiving the most.

[garrett]

Note: by type, I mean to show the type of device as well. Including badge color (not red, yellow, orange, or green though — people might get the wrong idea and think there's some level of success or problem if we use those).

And the two MAC address things are actually Bluetooth network access via my phones. (One is an old phone, the other is my current phone. Both were added when I paired them as devices for audio. Network came along for "free" for connecting to their Internet access over Bluetooth, which could be sourced over WiFi or mobile.)

[jelly]

It would be nice to show "home" as type wireguard, as that's my home vpn.