Git Product home page Git Product logo

yakker's Introduction

yakker

yakker is an IRC client built with irc-framework, React and Redux. It differes from other clients in a few ways. It's not considered stable for production use, so please, just don't use it for that ๐Ÿ‘….

Overview

  • There is no Status window. People who need the status window will likely use other clients ๐Ÿ˜ต.
  • WebSocket only:exclamation: Since UnrealIRCd and InspIRCd now ships with a WebSocket module, lets just use that ๐Ÿ™ˆ
  • Made for smaller networks. Don't know which channels to join? Well, lets give you a channel list when you connect ๐Ÿ’ฅ
  • Threads. IRCv3 has a draft, so... โœจ
  • Emojis:exclamation: Yeah, everyone has those now, but ๐Ÿ†’...
  • Delivery confirmation: Your messages actually confirm their arrival, if certain fancy IRCv3 sorcery is present! ๐Ÿ˜
  • Typing notifications: Your friends are writing! ๐Ÿ”ก
  • Runs on any web server. It's just a couple of static files, no daemon, fancy requirements or anything ๐Ÿ’พ

Development

Behind the scenes, create-react-app is used. Want to test or develop? Just clone or fork the respository then:

  • yarn install to install all the dependencies
  • Edit config.json in src/ and add a network with WebSocket support ๐Ÿ”ง(unless you run your own ircd on localhost, like me ๐Ÿ‘).
  • Let yarn start to do it's magic
  • Be prepared for a ton of ๐Ÿ›'s

yakker's People

Contributors

dependabot-preview[bot] avatar hauktek avatar moortens avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

yakker's Issues

Refactor irc middleware

The irc middleware needs a bit of a refactor. It is currently massive, and should be split into more files with their own logic.

Considering a plugin system

const AwayPlugin = (client, dispatch) => {
  client.registerEventHandler('away', onAwayEvent);
  client.registerEventHandler('back', onBackEvent);

  const onAwayEvent = e => {
    const { nick } = e;

    const uid = client.getUidFromNick(nick.toLowerCase());
    this.dispatch(
      setUserlistUser(uid, {
        nick,
        away: true,
      }),
    );
  };

  const onBackEvent = e => { ... }
}

Abandoned?

With KiwiIRC not seeing much further development and nice IRCv3 compatible IRCd like ergo chat (with build in websocket support) available, having another modern webclient would be quite cool.

How far did development go? Any test instance?

Is ircv3 chat history supported?

Thanks!

Unexpected paths crash the client

If connecting through a /channel/:channel or /message/:nickname path the client crashes and burns. This is due to an assumption that these exist.

/reply command

Idea:

Introduce a /reply command that functions like:

/reply <nickname> <message>

That would simply reply to the last message by nickname.

Pros:

  • easy reply capability for simple q&a type threads

Cons:

  • regular clients without threading support would display the message in the regular buffer

handle broken img urls

Some sites, such as wikipedia, has a url that shows as .jpg, but is actually a html page containing the image. These show up as broken due to not being loadable by

To handle this, perhaps we should create a custom component that hides the image if it is broken (using the onerror event on elements).

Key bindings

Key bindings are important, so lets use common keybindings:

  • alt + up / down - move up/down channel/dm tree
  • alt + shift + up / down - move up/down unread channel/dm tree
  • ctrl + k - open channel list
  • ctrl + shift + y - set away/back
  • ctrl + b - bold text
  • ctrl + u - underline text
  • ctrl + i - italic text
  • ctrl + shift + x - strikethrough text
  • ctrl + return - send action

Implement delivery notices

Using labeled-response and echo-message we could implement delivery notices.

From the labeled-responses spec:

Client: @label=pQraCjj82e PRIVMSG #channel :\x02Hello!\x02
Server: @label=pQraCjj82e :nick!user@host PRIVMSG #channel :Hello!

Defining a message as "sent" when you send it, and "delivered" when the server responds could be useful for users to see if their messages are being delivered (and as a way to check if messages have been altered, displaying the altered version in the client).

Store history in local storage

One of the nice things thats possible is to store the last x messages in localStorage.

This way the next time a user visits the webpage, the old conversation history could be shown. Paired with the chathistory spec it could give users a bit more of context.

Some questions arise from this though:

  • What if the history data stored is old and obviously obsolete?
  • Should the history be shown in different ways depending on where it comes from?
  • How many messages should be stored by default, considering theres a 5MB limit on localStorage?

basic markdown support

Support some basic Markdown syntax:

  • Italics with *text* or _text_
  • Bold with **text** or __text__
  • Strikethrough with ~~text~~
  • Monospace blocks with `text`

Browser notification on messages

The client should notify users (given their settings are so) of important events.

  • Notify on @mention
  • Notify on all messages
  • Notify on private messages

Theme support

Supporting themes would be nice, so I've started a small refactor to do this using styled-components at the heart. This also means that I'm removing most of the CSS files and using styled-components instead.

Things needed to support themes:

  • switch styling of components over to styled-components
  • provide a theme context
  • settings to change theme

Missing dependency in useEffect, causes infinite loop

App.js gives this nifty little error:

React Hook useEffect has a missing dependency: 'history'. Either include it or remove the dependency array react-hooks/exhaustive-deps

Adding history to the dependencies causes an infinite rerender loop, due to history being mutated and causing a rerender.

Refactor of message type components into wider components

A lot of the message type components really do the same thing, with little to no difference between them, for instance JOIN, PART and QUIT.

I think refactoring this logic into larger components will be beneficial to keep complexity low.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.