earthstar-project / earthstar-lobby

greetings from the lobby

This is a small Earthstar client built to experiment with earthstar and earthstar-graphql.

• React for the UI
• Relay for managing data and fetching from earthstar-graphql
• styled-components for styling the app

This client is currently hardcoded to a single workspace (+lobbydev), and a single pub. It uses in-memory storage, so you lose your local state on reloads (it is re-fetched from the pub on launch). This makes this a traditional app with a client and server, but this will feel more p2p-ey when you can use multiple workspaces and pubs in this client.

I wrote this in a short amount of time, with the tools I like, in a scrappy way. So this codebase might not be very approachable. But I have commented on everything.

Planned

• Support for multiple workspaces with multiple pubs
• Dark mode + custom themes, fonts (the guts are there, just need to make the themes, UI for picking them...)

Reading this codebase

Start at App.tsx. This is the root of the project.

earthstar-lobby's Issues

Can change anyone's displayNames because paths are missing the "~" for permissions

The display-name paths need a tilde like /about/~${author.address}/name. The tilde means only that author can write to that path (spec), otherwise anyone can write there.

While we're changing this, can we also change the path from name to displayName.txt?

Where

Writing happens here in lobby:
https://github.com/sgwilym/earthstar-lobby/blob/c747c35205d34c924ed733e327de2fe771808b6a/src/AuthorStatusBit.tsx#L152-L155

Reading seems to happen in graphql
https://github.com/earthstar-project/earthstar-graphql/blob/245eb7d96b2014c60e995a0794977fadf999c5a5/src/util.ts#L119-L121

Migration

I don't care much about preserving the old names since we have so few users.

If we care, there's 2 approaches

1. If the new-style path is not available, read from the old path as a backup. Always write to the new path.
2. Migrate data automatically. This can only happen in the browser-side where the user's credentials are available to sign a new document.

Both ways leave the security hole open (anyone can write to the old style paths) so they should only be deployed for a limited time, or not done at all.

Sort by original date vs. edit date

It could be nice to sort posts by their original date instead of last-edited, so they stay in the same place when you edit them.

The original timestamp is in the path. If the timestamp came first, like /lobby/158105938/[email protected], you could just sort them by path.

Preserve linebreaks in messages?

So people can write multi-line messages.

Maybe like this?

.message-with-linebreaks {
    white-space: break-spaces;
    overflow-wrap: break-word;
    hyphens: auto;
}

This changes the way people will use the space and encourages longer messages with several paragraphs. I personally like spaces with longer messages but how does this mesh with your idea of what "lobby" is?

Or if we want Lobby to be one-liners only, maybe the text input could change to prevent multi-line input so we don't make people think they can use newlines.

Display name details

Woo display names! 🎉

• Setting a display name doesn't trigger the "unsaved changes" message that reminds you to sync.
• Maybe show the display name in the top right by the clock, instead of the shortname?
• Would be interesting to try out a Twitter style design on posts, showing both the display name and author address. It's overkill for this simple app but in a bigger app it would help people learn both names so they could notice imposters and easily @-mention people by shortname:

Cinnamon
@cinn.ba0830fha...

Hello world

BTW you can ignore the Earthstar spec which says display names go in a JSON document at /about/@suzy.bxxxxx/profile.json along with some other profile info. I'm thinking about breaking this back up into separate documents for each property, like you're doing (.../name).

Input fields for logging in with author name and secret

Uploading an author keypair as a JSON file is cool, I hadn't thought of that!

It would be nice to also have a pair of traditional "username" / "password" inputs for entering the same information, in case someone is keeping it in their password manager.

(Earthstar calls these "author address" and "author secret" but I think apps can just say "username" and "password" since people are familiar with that metaphor already.)

A couple of workflow ideas

Ideas to make common tasks easier

• Hovering over the workspace name could show the full address as a tooltip (using HTML title attribute), both on the dashboard view and the workspace view. I happened to make two workspaces with the same prefix and it was hard to tell them apart

• There are some workspace actions that can only be done from the dashboard (copy address, pubs) that would be nice to have in the workspace view also

• The sync button could be always visible since it's such a common action

Deleted posts come back

To reproduce

• Delete a post, or set its body to "". It immediately vanishes.
• Sync, and verify it doesn't come back (so far so good)
• Reload the page, and it comes back

Trying to trace what happens when you delete a message:

➟ Delete button calls set("")
https://github.com/sgwilym/earthstar-lobby/blob/9bc81246757a20ac8ed57c8c89968dee6069796c/src/Message.tsx#L89

➟ set is defined here
https://github.com/sgwilym/earthstar-lobby/blob/9bc81246757a20ac8ed57c8c89968dee6069796c/src/Message.tsx#L40-L63

➟ ? relay and graphql happens

➟ The graphql pub at https://earthstar-graphql-pub.glitch.me/ still contains the original document from before it was zeroed out

Specification for lobby messages

I made a thread over in earthstar-foyer to discuss the details of lobby messages

Discussion: a spec for lobby/foyer messages

Deleted workspaces don't quite go away

If you delete a workspace, its data goes away but the name persists in the dashboard view.

Looking in localStorage, it gets removed from pubs but not from workspaces.