UI tweaks for launch (or shortly after)

[jimpick]

Some thoughts...

Header Branding

Now that we've removed the landing page, there's nothing in the header that says "PeerPad" ... just the logo - there's some space where we could add the branded title.

Here's the branding from the current landing page:

It would be nice if when scrolling down, the header and status elements would stay stuck to the top of the window (a common UI pattern on mobile apps). The header could compress so that it doesn't use up so much height.

Aliases

• each document has a "aliases" data structure (implemented as a sub-collaboration CRDT using an mvreg - multiple value register) that maps peer ids to user names. In the upper-right corner, there's something that looks like a profile that, if clicked, lets people set their mapping:

(it appears I broke the CSS so it appears half off-screen)

If you enter your name, it will get written to the aliases sub-collaboration, and other people looking at the document will be able to click their profile icon, and see the peer id replaced with the name you set as an alias.

Here are some of the problems:

• The number of connected peers is shown as a number in a bubble ... which to me, looks like a notification count. I think it's a bit confusing.
• The aliases are hidden - they don't show unless somebody clicks, so there's little incentive to set them in the first place.
• The aliases must be set on every document separately. You can't just set your name once, and have it used for all documents.
• There isn't a 1:1 mapping between Peer IDs and collaborators ... I might edit the document on my desktop, my laptop and my phone (or use multiple web browsers), so as a collaborator, I would have to set up a mapping for each device, and my name would be listed multiple times.
• Showing Peer IDs in the UI means people are confronted with having to understand what a Peer ID is... I think that's best kept as an implementation internal.
• A document might have multiple collaborators, but they might not all be online at the same time.

I think it would be nice to see everybody's name that is collaborating live on a document (or collaborated in the past), but it would be better if it was shown somewhere beside the main editor, for example, in a sidebar or in a section at the top.

For now, I think I'd prefer to remove the alias feature, but keep the ability to see how many peers are connected. In the future, we could implement a real profile system and the ability to see collaborators. (See #144)

Snapshots

Snapshots are broken, see #309 - I propose removing them.

Creating Links

If we remove snapshots, the only icon left in the "toolbar" on the right will be button to create links.

I think we could move the ability to copy links to the clipboard to above the editing area to give us a little more width.

Online Indicator

Right now, PeerPad only works online, although offline support is something we want to add. I think we could remove the indicator until that feature is ready.

Links to GitHub, Version Number, Disclaimer

With no landing page, it would still be nice to learn that it's an early stage open source project, etc.

Related issues:

#303, #304, #120, #129

[parkan]

Signoff:

Header Branding:

👍

Aliases:

Let's kill the popup (as it is legitimately not useful right now) but keep the indicator, misleading as it is, to make you feel less alone

Then revisit later as needed

Snapshots

This has a lot of potential integrating with e.g. https://proto.school/#/blog/01 but not as it is now -- let's kill it (I think this was already planned?)

Creating Links

Moving to toolbar works for me

Online Indicator

The usefulness of this isn't huge, but it also doesn't feel super broken and does provide a degree of information about network connectedness pending state machine work so let's keep it around until a replacement is built

Links to GitHub, Version Number, Disclaimer

++ to link out to github MDs for this -- footer?

[jimpick]

I'm thinking it would be nice to keep the UI as uncluttered as possible ... not quite "zen mode" but close. I think we could sneak in an "About" link that you could click on that would pop up a nicely styled modal with all the extra links...

Doing a full mobile-friendly responsive design might be a bit of a stretch for this first quick release, but the cleaner it is, the less work it will be.

[parkan]

let me ask if we can borrow a design person for a day or two