Network, peers, and sync status UI

[bertob]

Goals

Information we need to expose

• am I currently connected to other peers?
  • if so, who?
• am i discovering peers via network, Bluetooth?
• am i syncing via USB?
• do I have the latest version of the document?
  • if not, how many changes need to be synced?
• if i'm offline, how many changes are going to be synced later?

Features

• User list
  • pseudonymous name/identity
  • sync status (?)
  • last seen (?)
  • show peers who have access but aren't online?
• Up/download status
  • how much do i still need to up/download
  • who am i up/downloading from/to (?)
• discovery mode
  • network/bluetooth/offline

Questions

• do we expose all of these network status-related things in the same place?
  • e.g. a single menu with discovery mode, user list, upload status
• which of these things need to be visible at a glance?

Relevant Art

Hedgedoc

• Only two states: offline and online (since it's not local-first)
• In online state, the button opens a list of users, can be logged in or not
• Color of people's edits is shown in the list

Offline:

Online:

Muse

• Really tries to avoid spinners (except initial setup)
• Circle is gray when nothing is happening, pulsates when network traffic is happening

Clicking the circle opens this popover, with three states

• Live (online, but not syncing)
• Syncing
• Offline with local edits
  • size of local changes to be synced when you're online next time is visualized

Receiving side while syncing:

Offline state with closed menu:

Right-clicking the dot opens this debug menu:

---

@adz's notes on p2panda events:

💥 User: Enter document id -> join document t
➡️ Subscribe to data stream concerning document t
➡️ Find peers who are interested in the same document t
🔔 Discovered peer p being interested in document t
➡️ Connect to available peers, exchange latest document state with each of them. We sync with each discovered peer max. once (except when failed, then we re-attempt x times before giving up).
🔔 Sync started with peer p on document t
🔔 Received data (in our case it's state-based CRDTs / "snapshots") via sync from peer p on document t
➡️ Join gossip overlay via peer p (bootstrap)
🔔 Joined gossip overlay on topic t
🔔 Gossip neighbor up / down
🔔 Received data (in our case it's delta-based CRDTs / "patches") via gossip from peer p on document t

💥 = user action
➡️ = p2panda action (internal)
🔔 = p2panda event (can be subscribed)

[bertob]

Initial concept:

Network Indicator

The indicator in the headerbar is dynamic, and shows:

• Icon for the connection mode (gray when it can't connect, black when connections are possible)
  • Blue pulsing overlay dot when data is being up/downloaded
• This device's avatar + up to three other devices' avatars
• If more than 4 peers are online, a +N counter at the end to signify there's more
• When no avatars are visible, there's a caret so it's not just a lone icon

Connection Mode

The idea (stolen from @jonas2515) is to simplify possible network configurations into one of only 3:

• Offline (USB only)
• Bluetooth (nearby devices only)
• Network (potentially world-wide)

This has the advantage that it's easy to reason about from a use case and threat model perspective, and we don't have to navigate/explain the complexities of different networks (e.g. public WiFi, VPNs, Firewalls, antivirus, and more).

One open question to me is how Bluetooth discovery would work in the first place. I assume this would need a different "join" flow than the invite code? Do we need a list of nearby peers to connect to?

Sync State

This is pretty much just a straight copy of what Muse does, it'd be good to think about it a bit more and see how exactly our case is different. Some questions off the top of my head:

• Do we need an explicit label with the current state like Muse has, e.g. "Live with local changes"?
• Is up/download size in MB the right way to think about this in our case? Maybe it should be lines of text instead?
  • What if we add embedded images in the future though?
• Does this way of displaying the delta make sense in our case?
  • If my device is behind, it makes sense to show how far I am behind the person with the most new changes that I'm aware of. But what about if I'm ahead? Would the delta be reset every time a new device connects and gets my new changes?

Device List

My idea here was to use color + emoji pseudonymous identities, at least to start with.

Some questions:

• Are identities per-document? Are you a different animal in every new document you open?
• Settings to choose animal/color?
  • Do we eventually want fully custom user identities?
• Does this actually make sense for USB/Bluetooth? Should we represent devices differently in those cases?

[jsparber]

Are identities per-document? Are you a different animal in every new document you open?

I think the animals should be derived from the public key, we use the same key for all documents, so also the animal will be the same.

Settings to choose animal/color?

If we derive the animal from the public key, we don't need to store any user profile. So I would say no.

Do we eventually want fully custom user identities?

Definitely not for now.