cabal-club/cabal-desktop

Desktop client for Cabal, the p2p/decentralized/local-first chat platform.

cabal-desktop's Issues

Open design discussion

I have been reading through all these issues on the repo (Also some comments/suggestions on cabal's public channel) and I believe that the initial UI design it's slowly becoming a bottleneck for the current state of the project. I have created this issue to start an open discussion around UX/UI & design ideas for the desktop client and to start addressing all of them.

When I designed the user interface (PR/28) all I had in mind was to create a very basic starting point for the client. I didn't plan it at all; It all started with a simple draft on sketch and a one-day-marathon of getting this simple sketch done with some basic html/css. It was just and empty shell but y'all converted it into a living piece of awesomeness — Every time I pull down an update something magically gets better. You all rock!

I have started to mockup some ideas to address some of the pending issues and discuss ideas to support all the upcoming/blocked features for the desktop client.

So let's dive onto the mockups (Some of these are very raw so let's try to focus on the content/function rather than the UI which is not very polished)

Onboarding
Nothing fancy here, all I care at this step of the user flow is the following (Unless something else is planned)

• Learn what Cabal is
• Differentiate between joining a cabal space or creating a new one

Cabal's Main UI
First of all: The UI needed an overhaul to make it harmonize with the chromeless window; I tried to keep a familiar design but I got rid of most of the chrome UI elements and separators. I tried to make it very clean and very focused on the conversations.

• Cabal's share button is missing from this mockup, I am planning to add it as a micro-interaction.
• On cabal's switcher bar I have added a couple of new buttons: Search and preferences. (disguised as the user avatar that will serve as shortcut to the settings and other options)

Cabal's Sidebar
Having a collapsing sidebar could be used to implement threaded conversations, and a lot of other useful features. I am working on a prototype as I am writing this to visually explain how it works.

Basic modal elements were also considered (nothing fancy here)

Settings
Inspired by Atom's settings screen I tried to reuse components from the main chat screen to design this mockup. Hopefully easier to implement — This screen still needs more work and more planning.

System messages
Very simple messages: I was thinking that some users might want to use cabal's conversations offline so these screens might need further work… They also need graphic content such as illustrations/icons and simple/straightforward copy.

It would be great to have a list with all the current defined use cases to design all the needed screens.

And a to wrap up… a dark theme. Just because… why not? ;)

I have started using Inter UI as the main typeface for cabal's UI. I think it works great and i'd love to have a congruent typeface on different operating systems (unlike the current implementation) – Thoughts on this?

I am working on a small design system as well wich borrows some cues and ideas from the macOS user interface guidelines, I'll be posting some WIP's here pretty soon.

So, just to wrap up: All of these screens are just mockups and ideas to start a constructive conversation about design. Comments, critique and ideas/wishlists are more than welcome (They are very needed!)

Let me know what do y'all think about all these ideas :)

Pd. Please forgive any typos or rubbish english, it's 4:23am and my brain is kind of skewed.

Proposed Cabal (Desktop) Logos

Background

The desktop app doesn't have an app icon. I wondered if cabal actually had an icon and all i found was a downward pointing arrow on cabal.chat which didn't seem to visually speak to the concept of "this is a chat app" and didn't seem to be connected to the concept of cabals. I wasn't really sure what it was trying to convey.

So, I threw together a couple logo options that, i believe, convey "this is a chat app", work in multiple sizes I think they'd look good in an app dock / switcher and would print well in stickers and t-shirts, and be easily clickable on a phone.

Maybe we use these. Maybe they just serve as a starting point for a discussion and someone has some better idea.

(original svg file here had to compress it for github to allow the upload)

proposed_logos.svg.zip

if folks like these but would like some tweaks i'm happy to adjust.

Clicking into window doesn't focus text box

Clicking the window should auto focus the text box. (slack parity)

Highlight mentions and/or your own messages

Highlight messages that contain your own nick as a substring, case-insensitively. Make a regex to ignore when your name occurs in the middle of another word (require non-alpha characters on either side).

Maybe also make that part of the text bold, to clarify why the message is highlighted.

Also cabal-desktop used to highlight your own messages with a gray background. Slack doesn't do that though. Do we like that?

Show image uris as actual images inline in messages

If we can detect that a uri sent within a message is an image, we should try to show that image inline in the message.

And also have an option to enable/disable the feature.

RTL names break timestamp

I noticed this bug with rtl names

Create a cabal-specific settings screen

We need an interface for placing inputs for setting for various cabal-specific settings.

Examples of settings could include:

• notifications
• time format
• nick
• theme colors
• link to on disk storage
• etc

This can also serve as a place to let users opt in to experimental features as we are testing them out.

Nick not remembered in second Cabal

I have two cabals saved. When I switch to the second one, my nickname is always "cabal". I can change it successfully, but it goes back to "cabal" after a restart.

Allow page zooming

The default font is too small for me to read. I'd like to zoom the page using cmd-plus and cmd-minus.

From this issue in the electron repo I infer that this normally works by default, and I don't see any code in Cabal Desktop to change the zoom behavior, so I'm not sure why it doesn't work.

implement marker for unread channels

@Karissa I'd like to implement this feature! This is the first time I've worked with React within an Electron app so please bear with me! 😄

For the UI I imagine a little count next to the channel name when there are unread messages.

How would you suggest position of the last read message of a channel be stored? Saving to a json file or just localstorage? Or should it be saved to hyperdb to let everyone know read status? 😬

Create a application settings screen

We need an interface for placing inputs for setting for various application-wide settings.

Remember dat address and username across sessions

Otherwise you have to keep the dat address somewhere and copy-paste it each time you start the app.

This will help with usability for less-technical users

Show a date indicator between messages that are on different days

'Module parse failed' running 'npm run build'

Sorry if it something broken on my end!
Just following the install steps on the repo page.

I entered:

$ git clone https://github.com/cabal-club/cabal-desktop
$ cd cabal-desktop
$ npm install
$ npm run build 

 ~/cabal-desktop git: master@dac13b9   !
 > npm run build

> [email protected] build C:\Users\kor\cabal-desktop
> webpack

Hash: 57fa6d2c778024656d20
Version: webpack 3.12.0
Time: 49ms
          Asset     Size  Chunks             Chunk Names
static/build.js  2.87 kB       0  [emitted]  main
   [0] ./app/index.js 214 bytes {0} [built] [failed] [1 error]

ERROR in ./app/index.js
Module parse failed: Unexpected token (16:2)
You may need an appropriate loader to handle this file type.
|
| render(
|   <Provider store={store}>
|     <App />
|   </Provider>,
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! [email protected] build: `webpack`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\kor\AppData\Roaming\npm-cache\_logs\2018-08-10T13_46_48_682Z-debug.log

2018-08-10T13_46_48_682Z-debug.log

Implement lazyloading on scroll up to load more messages from the db

Update cabal-desktop to use new kappa cabal-core

o/ @nikolaiwarner

Let me know how I can {help, guide}! The branches you want to look at are cabal-core@refactor and cabal@kappa. The APIs aren't as nice as they could be, but hopefully looking at how cabal-cli handles views from the DB will be enough to go on.

Here are some good spots to look on cabal-cli:

• neat-screen.js:153 - 200: tracking user and channel listings
• neat-screen.js:220 - 276: tracking message history

Messages from different channels show up in the one currently being shown

Problem:

When a user posts a message it shows up in whichever channel the other users are looking at. This can lead to confusion as the messages disappear from that channel after switching away and back again (though they are in the correct channel as well).

Examples:

Channel list highlight can get out of sync with messages pane

This is more obvious with longer message scrollback history, because it makes loading channels slower.

To reproduce:

1. Click on a new channel you haven't seen since restarting Cabal, #a
2. While it's loading, quickly click back to a channel you HAVE seen, #b
3. You'll end up with #b highlighted in the channels list, but you'll see messages from #a

Presumably the slower async operation of loading a new channel #a completes after the quicker operation of switching to an already-seen channel #b

Possible fix: when it finishes loading a channel and is about to display it, check if it's still the currently selected channel. If it's not, do nothing.

Unfurl urls in messages to show a handy metadata card inline

When possible, show a card of information about urls found in messages after the message.

An example of how slack handles this:

Desktop notifications

It would be nice to have desktop notifications about new messages when the app is in the background.

I imagine a user would want to only get notifications for the currently selected channel.

Also, we should include a settings screen to let users disable this feature. 😂

Store unfinished messages when switching channels

Could be done by writing to an object in write.js component and didupdate handles checking if there was an old message to re-hydrate it.

Probably would not have to persist when switching cabals entirely.

Implement joining channels

• build a new interface to view all available channels
• hide unjoined channels from the sidebar ui

implementation of this may involve cabal-core or cabal-client

Design: Improve Create cabal screen UX

Needs some design and UX love ❤️

Focus text field when selecting a channel

When switching to a different channel text block should auto focus.

Design: Loading/feedback indicators

Visibility of system status
The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.

Help users recognize, diagnose, and recover from errors
Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.

We should have an indicator whenever Cabal is trying to sync/fetch new messages. Some sort of loader/feedback to let the users know that something is happening on the background. Also whenever this finishes having another indicator of completion (Success, failure; An explanation and recovery options) would be ideal.

Move desktop notifications to a opt-in cabal setting

Desktop notifications in cabal are still an experimental feature. Let's disable them by default and allow user to opt in to the feature from the cabal-specific settings screen.

Currently blocked by not having a settings interface. :D

Can't join previously created / shared cabals

Getting this when trying to join:

Implement favorite/starred/pinned channels

In the sidebar, provide a UI for setting channels as "favorites". This should keep the channel pinned to the top of the list of channels.

Show avatar of user on message

If users had avatars, it would be easier to identify who sent individual messages.

Perhaps by default, we generate them based on username with something like this:
https://github.com/dmester/jdenticon

And then also allow the user to set any image as their avatar.

Implement emojis ❤️

This is a critical feature.

On desktop, it's not always easy to type emojis. We should implement an emoji picker. This one seems nice: https://github.com/missive/emoji-mart

Also, we should consider the inline keyword emoji that github/slack provide .... like this :emoji: ... as that's a handy way to type emoji as well.

initial launch has dev console visible

Expected behavior:

Initial launch should not have the dev console open.

Actual behavior:

dev console is open and fills most of the window upon initial launch

Reproduction

following the install instructions:

$ git clone https://github.com/cabal-club/cabal-desktop
$ cd cabal-desktop

$ npm install             # install dependencies
$ npm run build           # build assets
$ npm start               # start the application

results in this.

closing the developer console results in what i assume is the expected ui

Note that the window has not been resized after opening.

This is on macOS High Sierra

Notify user on keywords in messages

Allow the user to keep a list of words that are important to them. When a message contains a keyword, send a desktop notification or some other ux that would get their attention.

fix timestamps being displayed as NaNs

i patched cabal-desktop to use the latest db schema of cabal-node

but when i got messages displaying again the timestamps were being displayed as NaN instead of the actual timestamp of the entry. i looked around and tried various fixes but ultimately couldn't figure it out

@Karissa am i missing something super obvious in cabal-desktop? first time playing around with react/redux code so i'm probably misunderstanding a lot

Add a help screen showing the message slash commands and keyboard shortcuts

The keyboard shortcuts and special message commands such as "/nick" or "/emote" are unknown to users. We should have a help screen in the app listing those features.

Design: Emote messages and system messages need a unique style

They are currently shown as normal messages. They could use some design love.

Webpack watch script throws error

I cloned this repository and installed its dependencies with npm install. When running npm run watch, webpack writes this error to the console:

ERROR in ./app/index.js
Module parse failed: Unexpected token (16:2)
You may need an appropriate loader to handle this file type.
|
| render(
|   <Provider store={store}>
|     <App />
|   </Provider>,

Changing the include path on line 19 of webpack.config.js to point at ${__dirname} instead of ${__dirname}/app fixes the issue, and I can start the app. I'm not that familiar with webpack, so I can't tell whether this is a proper fix or if I made an error earlier in the setup process.

Share files in messages

It would be excellent to be able to drag and drop, copy and paste, or select from a dialog files that could be sent to the channel connected to messages.

I'm not sure where cabal core stands at the moment with implementing files connected to messages but it would be super useful.

Custom theming support

see: https://github.com/hundredrabbits/Themes

Register cabal-desktop to handle cabal links

It looks like Electron has an API to register to handle custom protocols:

https://github.com/electron/electron/blob/master/docs/api/protocol.md

It would be great if cabal-desktop registered to handle cable://<key> urls. That would make sharing links to cabals way easier.

Perhaps this could be our first preference? 😉

Views keep scrolling to the bottom when a new message arrives

This makes it hard to read older messages. They should only scroll when the view is already at the bottom.

You can scroll from the bottom by default using CSS instead of Javascript by using flexbox:
https://codepen.io/jimbol/pen/YVJzBg

That example has the items in reverse order in the HTML, but I think that can be avoided with an additional intermediate container inside the main container.

Autocomplete username when typing

When typing a message, if the @ character is typed, show a dialog as the user types matching usernames from the channel. Autocomplete the username if the user hits tab while mid-username.

An example from github:

An example from slack:

implement ui for threaded messages?

if we'd really want to support the same kind of functionality that e.g. slack does we could look at implementing threads.

i think this could actually work pretty well if we expose the key of each message when we get them in cabal-node's getMessages() function

Other cabals keep disappearing

I have another cabal other than the main public one, and it seems to sometimes disappear from the sidebar list after restarts of the app. I'll try to investigate this some more.

Updating to kappa-core

forking the discussion at cabal-club/cabal-core#6 (comment)
cc @nikolaiwarner

things we need to do, off the top of my head

• create a dev cabal and test it out with multiple peers & clients
• create a kappa-core branch for desktop
• switch the frontend to the new kappa-core backend #79
• cut a new binary release with the kappa-core code
• update the official dev cabal at all the places it's exposed [1] [2]
• write a message in the existing dev cabal and redirect people to the new versions and the new dev cabal
• switch the mobile client to the kappa core backend
• investigate getting the release into brew
• synchronize the release of the new binaries with a new major version of cabal-core and the cli client and cabal-desktop
• write new features making use of the amazing kappa architecture and have fun chatting!!!

what's missing? 🔎

Implement markdown syntax and styling in messages

Allow multi-line input in textbox

It's not simple to make a textbox that allows multi-line input and expands as you type. Maybe using content-editable, though that has its own quirks related to different browsers, rich copy-paste, etc

Also make shift-enter add a newline instead of sending the message.

Cabal management (drag, delete etc.)

Seems to choose the initially added cabal by default which doesn't make much sense. We should consider implementing a method of managing the order of the cabals (probably drag based) and always load the first cabal at the top of the list.

Should delete happen here too? I think yes, on right click. But it shouldn't actually delete from disk in case you want to restore it.

I think we should also offer a link to open the file manager where your cabals are stored in the preferences pane, because right now it's very opaque and feels like like a normal chat app where the data is on the server 😱

Improve new user/share cabal flow

Might be nice to be able to generate a more user friendly short link from the share cabal button that looks like http://cabal.chat/4ae5ec168a9f6b45b9d35e3cc1d0f4e3a436000d37fae8f53b3f8dadfe8f192f that is a static page offering the latest release and a simple guide to getting up and running.

Package into apps and make releases

I don't know anything about this yet, but these tools could help:

"Run a single command to turn your app into binaries for macOS, Windows, and Linux - for all supported architectures."
https://electronforge.io/

"A complete solution to package and build a ready for distribution Electron app for macOS, Windows and Linux with “auto update” support out of the box."
https://www.electron.build/

Todo:

• add icons
• add mac config
• add windows build configuration
• add Linux build configuration
• put downloadable releases on GitHub
• bonus: automate this process?

implement slash commands

/join /nick etc

can we abstract cabal/commands.js enough to reuse it between desktop and the cli?

like, i wonder if we can implement the writeLine methods for the desktop such that they both have the same api