brandly / lax

IRC client built with Electron & React

• 🆓 Free and Open-Source
• ✉️ Multiple Connections
• 🤔 Remember Past Credentials
• 👋 Automatically Join Channels After Connecting
• 🔔 Desktop Notifications
• 👔 Clean Interface
• 😈 Dark Mode

download

download apps for macOS and Windows here!

for other platforms, you'll have to build your own.

dev

$ npm install
$ npm start

to start this thing with react/redux devtools

$ npm run dev

to lint, check types, and run tests

$ npm test

while writing code, you might want to watch things

# run tests when code changes
$ npm run jest -- --watch

# check types when code changes
$ npm run flow -- --watch

dist

to build an executable for your OS

$ npm run build

lax's Issues

MacOS has dark mode

maybe you should be able to override, but it'd be cool to default to OS settings

https://css-tricks.com/dark-modes-with-css/

https://github.com/sindresorhus/electron-util#darkmode

show unread message count per channel

used to have this. i think i broke it when adding redux/react-router. i need to make it easy to access current channel/convo via state tree. i'm p sure there's a package that makes this easy.

Usage of Sass

I would highly recommend to start using a language like sass. Anyway, create smaller CSS/SCSS modules. I am currently forking off and creating a branch which tries to accomplish this in a simple way!

make it easy to browse channels

instead of current "join channel" field, add a + icon to the conversations header. clicking it opens a modal that calls /list and displays the results.

BEM usage

would highly recommend using BEM class naming syntax. Is this something you want? If yes, we can start refactoring this too.

Show people in channel by default

When in a room, should show the people in channel by default. possibly having a fly-out menu on the right side, instead of being to the right of just the channel, so it's more readily toggle-able. It was kind of intuative to click on the "### people", but that's only because I thought it should have a list. I didn't "know".

dark mode

i like dark UIs but idk if i have the design skills to pull one off. i could probably steal some dark grays from another app and repurpose them here.

there should be a settings page where you can toggle between the two

if connecting fails, you just get stuck

ConnectionCreator flips isConnecting to true when attempting to connect. if the connection fails, you're stuck with a disabled form

improve people list

• sort em
• give each item more room to breathe
• claim horizontal space, like make the convo more narrow instead of overlaying it
• make it easy to click and DM someone
• esc to close it

move old messages out of memory

this thing will just keep sucking up messages and eating up memory as long as you leave it open. it also gets increasingly stressful for react to render larger conversations. (improving MessageList rendering significantly improved react performance, but switching to a long conversation still hangs slightly)

in the short term, it'd be easy to cap messages per convo and just forget about old messages.

eventually, it'd be nice if this cached old messages to disk. we'd have to coordinate reading them in as you scrolled and such, which would take some work. rejoining a channel and seeing messages from when you were last online would be cool tho

Add channel topic after channel

It would be great if the channel topic could be placed next to the channel name!

Provide suggestions when typing in '/'

Following the example of Slack, starting a line with '/' should show suggestions and get more precise in the command as more characters are entered.

/join-ing a channel you're already in adds a duplicate convo

the reducer should be more resilient. just select that channel if you're already in it

Add settings page

Some settings would be

• goodbye message
• alias
• CTC reply
• (...)

shrink bundle size

v0.0.0 is 369mb for some reason. seems like we should be closer to 140mb. idk why we're so far off.

saved credentials

added it during #53, but it's very barebones

• removable credentials (ba38f77)
• add back "remember password"
• indicate if you already have a tab using those credentials
• prevent using same credentials twice
• probably put some heading above it. polish it up a bit.

allow filtering of join/quit

a lot of channels get cluttered with them, making it harder to read the actual convo. it'd be nice if i didn't have to see em

Add # to the join channel when there isn't one

When using the join channel feature, you should prefix a # if there isn't one already at the beginning of the string.

code-signed builds and auto-update

https://electronjs.org/docs/api/auto-updater

• opt-in
• display feedback when update is available/downloading
• "update downloaded. restart now?" popup

now that GitHub Actions builds releases, this would be particularly cool since you'd be able to deploy updates to people's apps by pushing a git tag.

send a quit when the app quits

i'm guessing it currently does like a [quit] Remote host closed the connection

some apps seem to [quit] here's an ad for my IRC client so we could do that

Custom server?

It's possible to join a custom server? by adding then or editing the a file?
because i want to use it to chat on osu!irc

maybe don't add convo immediately on COMMAND_JOIN

i'll join like #programming but the channel is actually ##programming, so i added receivedJoin to the model and tried to filter out, in this case, #programming.

but then i join #nodejs but the channel is actually #node.js, so my hack fails

it's probably best not to create a convo until like a RECEIVE_JOIN/RECEIVE_WELCOME

Not working

Tried to npm install in linux and windows.
The screen remains blank..

multiple connections

probably make them tabs on the side of the window, like slack. there should be a + tab that shows ConnectionCreator. i think actions/reducers are p much ready for this

unread messages

when you navigate to a convo, we should recognize which message you've last seen.

---

we could put some kind of banner at the top

New messages since 3:24pm

click to scroll to unread messages or dismiss banner with "mark as read".

or we could just scroll you to the earliest unread message when you open the convo.

native notifs for mentions

idk how standard mentions are but people do like brandly: hey there or brandly, what up

maybe it should be super general and just check if message.contains(nickname)

Make it possible to remember password

Make it possible to remember password!

Add preferences/configuration settings

• Configuration for Servers/Autojoin
• Server config for /msg NickServ identify ... command
• Configuration for Channel font. I would love to use inconsolata, for example, as the channel font. (fixed-width)

(again, really liking the style of this application where it's starting off, makes me wish I had more time to help)

keyboard shortcuts like cmd+c/v/a don't work in bundled .app

support full range of commands

i got started but there's still work to do

/join should allow multiple channels

not supported here

https://github.com/brandly/irc/blob/4cd43f697b12a7fdca5ab4fb9288f848b38e46eb/src/js/actions/conversations.js#L49-L50

but supported here

https://github.com/slate/slate-irc/blob/faea178ac99cac349de7ef27721a10c8aa781c3a/index.js#L249

remember what channels you were in and auto-reconnect?

maybe this is configurable or maybe we list the prior channels but don't connect until you click some button

add system notifications

write a redux middleware that receives actions and creates notifications

you probably only want notifications on RECEIVE_DIRECT_MESSAGE, since RECEIVE_CHANNEL_MESSAGE would be really loud. you also probably only want notifications if you're not already focused on that conversation, so we'd want to track if the app is in focus and check the current convo as well.

autocomplete nicknames

hit tab while writing a message to trigger autocomplete

when you're first starting a message or if you start with like /msg, it should autocomplete nicknames for mentions and DMs

Add an amazing icon and name!

Maybe adding a little icon and name will improve potential for people to remember this.!

handle ERR_NOSUCHNICK when /msg-ing someone that doesn't exist

> /msg fakename hi hello there
{cmd: "ERR_NOSUCHNICK", message: "No such nick or channel name"}

we receive that error but the app doesn't do anything with it. it should remove that entry from the convo list and message you about it.

persist all settings

right now, state.ui is becoming a grab bag of values. move quitMsg and isDark to state.settings.

then use some middleware to persist it?

Custom hostname option

Hi,

Generally, I want to use this client for a private IRC server. So giving another option for 'other' or by default, just an input field for the hostname would be highly appreciated :)

Add some todo

First of all, thanks for creating this! It's been a while since I saw a good IRC client, and this one seems to have potential in particular 👍

I'm going to add a couple of issues to the list that I think fits every major user and maybe I can help out a bit with coding.

• add a "remember password" field
• toggle developer box in "production". Only expand with NODE_ENV=DEVELOPMENT
• maybe ship the app, if it's not too much efforts
  • add an icon
• make it possible to use commands with e.g / #12
• make it easily collapsable and (maybe) add support for notifications in the system tray (if there's an API for it)

I think, with this list in mind, and an easy-installation this IRC client could become a really good alternative especially on OSX (where honestly all IRC clients suck!)

Default port

Should provide 6667 as a default port in the connection window.

/giphy

https://developers.giphy.com/

flow is failing on invalid JSON

glow doesn't give good feedback

🕵️‍♀️  Glow v1.2.2 (flow-bin v0.66.0)
info Getting Flow status...
warn loc.type = JsonFile isn't implemented
success Found 1 error.

directly from flow

$ node_modules/.bin/flow
Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ node_modules/electron-packager/test/fixtures/infer-malformed-json/package.json:3:1

Unexpected end of input

     1│ {
     2│   "productName": "InferMalformedJSON",
     3│



Found 1 error

appears to be a known issue

frameless window

https://electronjs.org/docs/api/frameless-window

recover from network disconnection

i don't think this thing bounces back after you close your laptop

we have a connection.isConnected bool. the UI should make it obvious when you're disconnected (b275330) and render a reconnect btn somewhere.

Bug: Private Message are sent to me

I connect through ZNC (not sure if that is an issue with it). But when I send a private message to a certain user, they will receive it. Unfortunately, when I get a message back from them, the message will go into the 'your username'-thread. For all private messages.

Don't use es2015 preset for babel

You should use the env preset, and configure it for the node and chrome versions matching your electron dist... most of the es2015 transforms are not needed in the latest versions... This will reduce your JS output by at least 1/3 and probably closer to half.

distinguish "leave channel" from "show status changes"

The exit button in the top-right doesn't seem to /part the channel for you.

display ACTIONs nicely

build script doesn't handle sass

npm run build doesn't update the .css. it should.

release an .app

use electron-packager.

should probably actually pre-compile this with babel before distributing, instead of this babel-register situation, to make it boot up faster

https://github.com/brandly/irc/blob/cc640a92ae18bcefcba2713b130185bff1def9e3/src/index.html#L17