eslint: add extra rules

The former is deprecated.

.build.yml

@@ -1,19 +1,25 @@
-image: alpine/latest
+# TODO switch back to alpine/latest once the "npm install" deadlock is fixed
+image: alpine/edge
 packages:
 - npm
 - rsync
 sources:
-- https://git.sr.ht/~emersion/gamja
+- https://codeberg.org/emersion/gamja.git
 secrets:
-- 5874ac5a-905e-4596-a117-fed1401c60ce # deploy SSH key
+- 7a146c8e-aeb4-46e7-99bf-05af7486bbe9 # deploy SSH key
 tasks:
 - setup: |
     cd gamja
     npm install --include=dev
+- build: |
+    cd gamja
     npm run build
+- lint: |
+    cd gamja
+    npm run -- lint --max-warnings 0
 - deploy: |
     cd gamja/dist
     [ "$(git rev-parse HEAD)" = "$(git rev-parse origin/master)" ] || complete-build
     rsync --rsh="ssh -o StrictHostKeyChecking=no" -rP \
       --delete --exclude=config.json \
-      . deploy@emersion.fr:/srv/http/gamja
+      . deploy-gamja@sheeta.emersion.fr:/srv/http/gamja

README.md

@@ -10,54 +10,9 @@ Requires an IRC WebSocket server.
 
 First install dependencies:
 
-    npm install --production
+    npm install --omit=dev
 
-Then configure an HTTP server to serve the gamja files. Below are some
+Then [configure an HTTP server] to serve the gamja files.
-server-specific instructions.
-
-### [soju]
-
-Add a WebSocket listener to soju, e.g. `listen wss://127.0.0.1:8080`.
-
-Configure your reverse proxy to serve gamja files and proxy `/socket` to soju.
-
-### [webircgateway]
-
-Setup webircgateway to serve gamja files:
-
-```ini
-[fileserving]
-enabled = true
-webroot = /path/to/gamja
-```
-
-Then connect to webircgateway and append `?server=/webirc/websocket/` to the
-URL.
-
-### nginx
-
-If you use nginx as a reverse HTTP proxy, make sure to bump the default read
-timeout to a value higher than the IRC server PING interval. Example:
-
-```
-location / {
-	root /path/to/gamja;
-}
-
-location /socket {
-	proxy_pass http://127.0.0.1:8080;
-	proxy_read_timeout 600s;
-	proxy_http_version 1.1;
-	proxy_set_header Upgrade $http_upgrade;
-	proxy_set_header Connection "Upgrade";
-	proxy_set_header X-Forwarded-For $remote_addr;
-	proxy_set_header X-Forwarded-Proto $scheme;
-}
-```
-
-If you are unable to configure the proxy timeout accordingly, or if your IRC
-server doesn't send PINGs, you can set the `server.ping` option in
-`config.json` (see below).
 
 ### Development server
 
@@ -76,52 +31,13 @@ Optionally, [Parcel] can be used to build a minified version of gamja.
     npm install --include=dev
     npm run build
 
-## Query parameters
+## Configuration
 
-gamja settings can be overridden using URL query parameters:
+gamja can be configured via a [configuration file] and via [URL parameters].
-
-- `server`: path or URL to the WebSocket server
-- `nick`: nickname
-- `channels`: comma-separated list of channels to join (`#` needs to be escaped)
-- `open`: [IRC URL] to open
-- `debug`: if set to 1, debug mode is enabled
-
-Alternatively, the channels can be set with the URL fragment (ie, by just
-appending the channel name to the gamja URL).
-
-## Configuration file
-
-gamja default settings can be set using a `config.json` file at the root:
-
-```js
-{
-	// IRC server settings.
-	"server": {
-		// WebSocket URL or path to connect to (string).
-		"url": "wss://irc.example.org",
-		// Channel(s) to auto-join (string or array of strings).
-		"autojoin": "#gamja",
-		// Controls how the password UI is presented to the user. Set to
-		// "mandatory" to require a password, "optional" to accept one but not
-		// require it, "disabled" to never ask for a password, or "external" to
-		// use SASL EXTERNAL. Defaults to "optional".
-		"auth": "optional",
-		// Default nickname (string).
-		"nick": "asdf",
-		// Don't display the login UI, immediately connect to the server
-		// (boolean).
-		"autoconnect": true,
-		// Interval in seconds to send PING commands (number). Set to 0 to
-		// disable. Enabling PINGs can have an impact on client power usage and
-		// should only be enabled if necessary.
-		"ping": 60
-	}
-}
-```
 
 ## Contributing
 
-Send patches on the [mailing list], report bugs on the [issue tracker]. Discuss
+Send patches on [Codeberg], report bugs on the [issue tracker]. Discuss
 in [#soju on Libera Chat].
 
 ## License
@@ -130,11 +46,11 @@ AGPLv3, see LICENSE.
 
 Copyright (C) 2020 The gamja Contributors
 
-[gamja]: https://sr.ht/~emersion/gamja/
+[gamja]: https://codeberg.org/emersion/gamja
-[soju]: https://soju.im
+[Codeberg]: https://codeberg.org/emersion/gamja
-[webircgateway]: https://github.com/kiwiirc/webircgateway
-[mailing list]: https://lists.sr.ht/~emersion/public-inbox
 [issue tracker]: https://todo.sr.ht/~emersion/gamja
 [Parcel]: https://parceljs.org
-[IRC URL]: https://datatracker.ietf.org/doc/html/draft-butcher-irc-url-04
+[configure an HTTP server]: doc/setup.md
+[configuration file]: doc/config-file.md
+[URL parameters]: doc/url-params.md
 [#soju on Libera Chat]: ircs://irc.libera.chat/#soju

commands.js

@@ -25,14 +25,14 @@ function getActiveChannel(app) {
 	return activeBuffer.name;
 }
 
-function setUserHostMode(app, args, mode) {
+async function setUserHostMode(app, args, mode) {
 	let nick = args[0];
 	if (!nick) {
 		throw new Error("Missing nick");
 	}
 	let activeChannel = getActiveChannel(app);
 	let client = getActiveClient(app);
-	client.whois(nick).then((whois) => {
+	let whois = await client.whois(nick);
 	const info = whois[irc.RPL_WHOISUSER].params;
 	const user = info[2];
 	const host = info[3];
@@ -40,7 +40,6 @@ function setUserHostMode(app, args, mode) {
 		command: "MODE",
 		params: [activeChannel, mode, `*!${user}@${host}`],
 	});
-	});
 }
 
 function markServerBufferUnread(app) {
@@ -54,6 +53,7 @@ function markServerBufferUnread(app) {
 }
 
 const join = {
+	name: "join",
 	usage: "<name> [password]",
 	description: "Join a channel",
 	execute: (app, args) => {
@@ -70,6 +70,7 @@ const join = {
 };
 
 const kick = {
+	name: "kick",
 	usage: "<nick> [comment]",
 	description: "Remove a user from the channel",
 	execute: (app, args) => {
@@ -84,10 +85,11 @@ const kick = {
 };
 
 const ban = {
+	name: "ban",
 	usage: "[nick]",
 	description: "Ban a user from the channel, or display the current ban list",
 	execute: (app, args) => {
-		if (args.length == 0) {
+		if (args.length === 0) {
 			let activeChannel = getActiveChannel(app);
 			getActiveClient(app).send({
 				command: "MODE",
@@ -112,20 +114,22 @@ function givemode(app, args, mode) {
 	});
 }
 
-export default {
+const commands = [
-	"away": {
+	{
+		name: "away",
 		usage: "[message]",
 		description: "Set away message",
 		execute: (app, args) => {
-			const params = []
+			const params = [];
 			if (args.length) {
 				params.push(args.join(" "));
 			}
 			getActiveClient(app).send({command: "AWAY", params});
 		},
 	},
-	"ban": ban,
+	ban,
-	"buffer": {
+	{
+		name: "buffer",
 		usage: "<name>",
 		description: "Switch to a buffer",
 		execute: (app, args) => {
@@ -139,39 +143,45 @@ export default {
 			throw new Error("Unknown buffer");
 		},
 	},
-	"close": {
+	{
+		name: "close",
 		description: "Close the current buffer",
 		execute: (app, args) => {
 			let activeBuffer = app.state.buffers.get(app.state.activeBuffer);
-			if (!activeBuffer || activeBuffer.type == BufferType.SERVER) {
+			if (!activeBuffer || activeBuffer.type === BufferType.SERVER) {
 				throw new Error("Not in a user or channel buffer");
 			}
 			app.close(activeBuffer.id);
 		},
 	},
-	"deop": {
+	{
+		name: "deop",
 		usage: "<nick>",
 		description: "Remove operator status for a user on this channel",
 		execute: (app, args) => givemode(app, args, "-o"),
 	},
-	"devoice": {
+	{
+		name: "devoice",
 		usage: "<nick>",
 		description: "Remove voiced status for a user on this channel",
 		execute: (app, args) => givemode(app, args, "-v"),
 	},
-	"disconnect": {
+	{
+		name: "disconnect",
 		description: "Disconnect from the server",
 		execute: (app, args) => {
 			app.disconnect();
 		},
 	},
-	"help": {
+	{
+		name: "help",
 		description: "Show help menu",
 		execute: (app, args) => {
 			app.openHelp();
 		},
 	},
-	"invite": {
+	{
+		name: "invite",
 		usage: "<nick>",
 		description: "Invite a user to the channel",
 		execute: (app, args) => {
@@ -185,10 +195,11 @@ export default {
 			]});
 		},
 	},
-	"j": join,
+	{ ...join, name: "j" },
-	"join": join,
+	join,
-	"kick": kick,
+	kick,
-	"kickban": {
+	{
+		name: "kickban",
 		usage: "<target>",
 		description: "Ban a user and removes them from the channel",
 		execute: (app, args) => {
@@ -196,7 +207,8 @@ export default {
 			ban.execute(app, args);
 		},
 	},
-	"lusers": {
+	{
+		name: "lusers",
 		usage: "[<mask> [<target>]]",
 		description: "Request user statistics about the network",
 		execute: (app, args) => {
@@ -204,7 +216,8 @@ export default {
 			markServerBufferUnread(app);
 		},
 	},
-	"me": {
+	{
+		name: "me",
 		usage: "<action>",
 		description: "Send an action message to the current buffer",
 		execute: (app, args) => {
@@ -214,7 +227,8 @@ export default {
 			app.privmsg(target, text);
 		},
 	},
-	"mode": {
+	{
+		name: "mode",
 		usage: "[target] [modes] [mode args...]",
 		description: "Query or change a channel or user mode",
 		execute: (app, args) => {
@@ -226,7 +240,8 @@ export default {
 			getActiveClient(app).send({ command: "MODE", params: args });
 		},
 	},
-	"motd": {
+	{
+		name: "motd",
 		usage: "[server]",
 		description: "Get the Message Of The Day",
 		execute: (app, args) => {
@@ -234,7 +249,8 @@ export default {
 			markServerBufferUnread(app);
 		},
 	},
-	"msg": {
+	{
+		name: "msg",
 		usage: "<target> <message>",
 		description: "Send a message to a nickname or a channel",
 		execute: (app, args) => {
@@ -243,7 +259,8 @@ export default {
 			getActiveClient(app).send({ command: "PRIVMSG", params: [target, text] });
 		},
 	},
-	"nick": {
+	{
+		name: "nick",
 		usage: "<nick>",
 		description: "Change current nickname",
 		execute: (app, args) => {
@@ -251,7 +268,8 @@ export default {
 			getActiveClient(app).send({ command: "NICK", params: [newNick] });
 		},
 	},
-	"notice": {
+	{
+		name: "notice",
 		usage: "<target> <message>",
 		description: "Send a notice to a nickname or a channel",
 		execute: (app, args) => {
@@ -260,12 +278,14 @@ export default {
 			getActiveClient(app).send({ command: "NOTICE", params: [target, text] });
 		},
 	},
-	"op": {
+	{
+		name: "op",
 		usage: "<nick>",
 		description: "Give a user operator status on this channel",
 		execute: (app, args) => givemode(app, args, "+o"),
 	},
-	"part": {
+	{
+		name: "part",
 		usage: "[reason]",
 		description: "Leave a channel",
 		execute: (app, args) => {
@@ -278,7 +298,8 @@ export default {
 			getActiveClient(app).send({ command: "PART", params });
 		},
 	},
-	"query": {
+	{
+		name: "query",
 		usage: "<nick> [message]",
 		description: "Open a buffer to send messages to a nickname",
 		execute: (app, args) => {
@@ -294,11 +315,12 @@ export default {
 			}
 		},
 	},
-	"quiet": {
+	{
+		name: "quiet",
 		usage: "[nick]",
 		description: "Quiet a user in the channel, or display the current quiet list",
 		execute: (app, args) => {
-			if (args.length == 0) {
+			if (args.length === 0) {
 				getActiveClient(app).send({
 					command: "MODE",
 					params: [getActiveChannel(app), "+q"],
@@ -308,13 +330,15 @@ export default {
 			}
 		},
 	},
-	"quit": {
+	{
+		name: "quit",
 		description: "Quit",
 		execute: (app, args) => {
 			app.close({ name: SERVER_BUFFER });
 		},
 	},
-	"quote": {
+	{
+		name: "quote",
 		usage: "<command>",
 		description: "Send a raw IRC command to the server",
 		execute: (app, args) => {
@@ -327,13 +351,15 @@ export default {
 			getActiveClient(app).send(msg);
 		},
 	},
-	"reconnect": {
+	{
+		name: "reconnect",
 		description: "Reconnect to the server",
 		execute: (app, args) => {
 			app.reconnect();
 		},
 	},
-	"setname": {
+	{
+		name: "setname",
 		usage: "<realname>",
 		description: "Change current realname",
 		execute: (app, args) => {
@@ -346,7 +372,8 @@ export default {
 			// TODO: save to local storage
 		},
 	},
-	"stats": {
+	{
+		name: "stats",
 		usage: "<query> [server]",
 		description: "Request server statistics",
 		execute: (app, args) => {
@@ -362,7 +389,8 @@ export default {
 			markServerBufferUnread(app);
 		},
 	},
-	"topic": {
+	{
+		name: "topic",
 		usage: "<topic>",
 		description: "Change the topic of the current channel",
 		execute: (app, args) => {
@@ -374,31 +402,30 @@ export default {
 			getActiveClient(app).send({ command: "TOPIC", params });
 		},
 	},
-	"unban": {
+	{
+		name: "unban",
 		usage: "<nick>",
 		description: "Remove a user from the ban list",
 		execute: (app, args) => {
 			return setUserHostMode(app, args, "-b");
 		},
 	},
-	"unquiet": {
+	{
+		name: "unquiet",
 		usage: "<nick>",
 		description: "Remove a user from the quiet list",
 		execute: (app, args) => {
 			return setUserHostMode(app, args, "-q");
 		},
 	},
-	"unvoice": {
+	{
-		usage: "<nick>",
+		name: "voice",
-		description: "Remove a user from the voiced list",
-		execute: (app, args) => givemode(app, args, "-v"),
-	},
-	"voice": {
 		usage: "<nick>",
 		description: "Give a user voiced status on this channel",
 		execute: (app, args) => givemode(app, args, "+v"),
 	},
-	"who": {
+	{
+		name: "who",
 		usage: "<mask>",
 		description: "Retrieve a list of users",
 		execute: (app, args) => {
@@ -406,7 +433,8 @@ export default {
 			markServerBufferUnread(app);
 		},
 	},
-	"whois": {
+	{
+		name: "whois",
 		usage: "<nick>",
 		description: "Retrieve information about a user",
 		execute: (app, args) => {
@@ -418,7 +446,8 @@ export default {
 			markServerBufferUnread(app);
 		},
 	},
-	"whowas": {
+	{
+		name: "whowas",
 		usage: "<nick> [count]",
 		description: "Retrieve information about an offline user",
 		execute: (app, args) => {
@@ -429,7 +458,8 @@ export default {
 			markServerBufferUnread(app);
 		},
 	},
-	"list": {
+	{
+		name: "list",
 		usage: "[filter]",
 		description: "Retrieve a list of channels from a network",
 		execute: (app, args) => {
@@ -437,4 +467,6 @@ export default {
 			markServerBufferUnread(app);
 		},
 	},
-};
+];
+
+export default new Map(commands.map((cmd) => [cmd.name, cmd]));

components/app.js

@@ -1,5 +1,6 @@
 import * as irc from "../lib/irc.js";
 import Client from "../lib/client.js";
+import * as oauth2 from "../lib/oauth2.js";
 import Buffer from "./buffer.js";
 import BufferList from "./buffer-list.js";
 import BufferHeader from "./buffer-header.js";
@@ -12,6 +13,7 @@ import AuthForm from "./auth-form.js";
 import RegisterForm from "./register-form.js";
 import VerifyForm from "./verify-form.js";
 import SettingsForm from "./settings-form.js";
+import SwitcherForm from "./switcher-form.js";
 import Composer from "./composer.js";
 import ScrollManager from "./scroll-manager.js";
 import Dialog from "./dialog.js";
@@ -53,7 +55,7 @@ function isProduction() {
 	// NODE_ENV is set by the Parcel build system
 	try {
 		return process.env.NODE_ENV === "production";
-	} catch (err) {
+	} catch (_err) {
 		return false;
 	}
 }
@@ -92,7 +94,7 @@ function splitHostPort(str) {
 function fillConnectParams(params) {
 	let host = window.location.host || "localhost:8080";
 	let proto = "wss:";
-	if (window.location.protocol != "https:") {
+	if (window.location.protocol !== "https:") {
 		proto = "ws:";
 	}
 	let path = window.location.pathname || "/";
@@ -198,6 +200,7 @@ export default class App extends Component {
 	autoOpenURL = null;
 	messageNotifications = new Set();
 	baseTitle = null;
+	lastFocusPingDate = null;
 
 	constructor(props) {
 		super(props);
@@ -224,6 +227,9 @@ export default class App extends Component {
 		this.handleVerifySubmit = this.handleVerifySubmit.bind(this);
 		this.handleOpenSettingsClick = this.handleOpenSettingsClick.bind(this);
 		this.handleSettingsChange = this.handleSettingsChange.bind(this);
+		this.handleSettingsDisconnect = this.handleSettingsDisconnect.bind(this);
+		this.handleSwitchSubmit = this.handleSwitchSubmit.bind(this);
+		this.handleWindowFocus = this.handleWindowFocus.bind(this);
 
 		this.state.settings = {
 			...this.state.settings,
@@ -249,12 +255,9 @@ export default class App extends Component {
 	 * - Default server URL constructed from the current URL location (this is
 	 *   done in fillConnectParams)
 	 */
-	handleConfig(config) {
+	async handleConfig(config) {
-		this.setState({ loading: false });
-
 		let connectParams = { ...this.state.connectParams };
 
-		if (config.server) {
 		if (typeof config.server.url === "string") {
 			connectParams.url = config.server.url;
 		}
@@ -275,6 +278,14 @@ export default class App extends Component {
 		if (typeof config.server.ping === "number") {
 			connectParams.ping = config.server.ping;
 		}
+
+		if (connectParams.autoconnect && config.server.auth === "mandatory") {
+			console.error("Error in config.json: cannot set server.autoconnect = true and server.auth = \"mandatory\"");
+			connectParams.autoconnect = false;
+		}
+		if (config.server.auth === "oauth2" && (!config.oauth2 || !config.oauth2.url || !config.oauth2.client_id)) {
+			console.error("Error in config.json: server.auth = \"oauth2\" requires oauth2 settings");
+			config.server.auth = null;
 		}
 
 		let autoconnect = store.autoconnect.load();
@@ -320,6 +331,48 @@ export default class App extends Component {
 
 		this.config = config;
 
+		if (!connectParams.nick && connectParams.autoconnect) {
+			connectParams.nick = "user-*";
+		}
+		if (connectParams.nick && connectParams.nick.includes("*")) {
+			let placeholder = Math.random().toString(36).substr(2, 7);
+			connectParams.nick = connectParams.nick.replace("*", placeholder);
+		}
+
+		if (config.server.auth === "oauth2" && !connectParams.saslOauthBearer) {
+			if (queryParams.error) {
+				console.error("OAuth 2.0 authorization failed: ", queryParams.error);
+				this.showError("Authentication failed: " + (queryParams.error_description || queryParams.error));
+				return;
+			}
+
+			if (!queryParams.code) {
+				this.redirectOauth2Authorize();
+				return;
+			}
+
+			// Strip code from query params, to prevent page refreshes from
+			// trying to exchange the code again
+			let url = new URL(window.location.toString());
+			url.searchParams.delete("code");
+			url.searchParams.delete("state");
+			window.history.replaceState(null, "", url.toString());
+
+			let saslOauthBearer;
+			try {
+				saslOauthBearer = await this.exchangeOauth2Code(queryParams.code);
+			} catch (err) {
+				this.showError(err);
+				return;
+			}
+
+			connectParams.saslOauthBearer = saslOauthBearer;
+
+			if (saslOauthBearer.username && !connectParams.nick) {
+				connectParams.nick = saslOauthBearer.username;
+			}
+		}
+
 		if (autojoin.length > 0) {
 			if (connectParams.autoconnect) {
 				// Ask the user whether they want to join that new channel.
@@ -330,7 +383,7 @@ export default class App extends Component {
 			}
 		}
 
-		this.setState({ connectParams: connectParams });
+		this.setState({ loading: false, connectParams });
 
 		if (connectParams.autoconnect) {
 			this.setState({ connectForm: false });
@@ -338,6 +391,63 @@ export default class App extends Component {
 		}
 	}
 
+	async redirectOauth2Authorize() {
+		let serverMetadata;
+		try {
+			serverMetadata = await oauth2.fetchServerMetadata(this.config.oauth2.url);
+		} catch (err) {
+			console.error("Failed to fetch OAuth 2.0 server metadata:", err);
+			this.showError("Failed to fetch OAuth 2.0 server metadata");
+			return;
+		}
+
+		oauth2.redirectAuthorize({
+			serverMetadata,
+			clientId: this.config.oauth2.client_id,
+			redirectUri: window.location.toString(),
+			scope: this.config.oauth2.scope,
+		});
+	}
+
+	async exchangeOauth2Code(code) {
+		let serverMetadata = await oauth2.fetchServerMetadata(this.config.oauth2.url);
+
+		let redirectUri = new URL(window.location.toString());
+		redirectUri.searchParams.delete("code");
+		redirectUri.searchParams.delete("state");
+
+		let data = await oauth2.exchangeCode({
+			serverMetadata,
+			redirectUri: redirectUri.toString(),
+			code,
+			clientId: this.config.oauth2.client_id,
+			clientSecret: this.config.oauth2.client_secret,
+		});
+
+		// TODO: handle expires_in/refresh_token
+		let token = data.access_token;
+
+		let username = null;
+		if (serverMetadata.introspection_endpoint) {
+			try {
+				let data = await oauth2.introspectToken({
+					serverMetadata,
+					token,
+					clientId: this.config.oauth2.client_id,
+					clientSecret: this.config.oauth2.client_secret,
+				});
+				username = data.username;
+				if (!username) {
+					console.warn("Username missing from OAuth 2.0 token introspection response");
+				}
+			} catch (err) {
+				console.warn("Failed to introspect OAuth 2.0 token:", err);
+			}
+		}
+
+		return { token, username };
+	}
+
 	showError(err) {
 		console.error("App error: ", err);
 
@@ -386,16 +496,17 @@ export default class App extends Component {
 
 		let stored = this.bufferStore.get({ name, server: client.params });
 		if (client.caps.enabled.has("draft/chathistory") && stored) {
-			this.setBufferState({ server: serverID, name }, { unread: stored.unread });
+			this.setBufferState({ server: serverID, name }, { unread: stored.unread }, () => {
+				this.updateDocumentTitle();
+			});
 		}
-		if (!stored) {
+
 		this.bufferStore.put({
 			name,
 			server: client.params,
-				unread: Unread.NONE,
+			closed: false,
 		});
 	}
-	}
 
 	createBuffer(serverID, name) {
 		let client = this.clients.get(serverID);
@@ -404,7 +515,7 @@ export default class App extends Component {
 		this.setState((state) => {
 			let updated;
 			[id, updated] = State.createBuffer(state, name, serverID, client);
-			isNew = !!updated;
+			isNew = Boolean(updated);
 			return updated;
 		});
 		if (isNew) {
@@ -414,17 +525,14 @@ export default class App extends Component {
 	}
 
 	sendReadReceipt(client, storedBuffer) {
-		if (!client.caps.enabled.has("soju.im/read")) {
+		if (!client.supportsReadMarker()) {
 			return;
 		}
 		let readReceipt = storedBuffer.receipts[ReceiptType.READ];
 		if (storedBuffer.name === "*" || !readReceipt) {
 			return;
 		}
-		client.send({
+		client.setReadMarker(storedBuffer.name, readReceipt.time);
-			command: "READ",
-			params: [storedBuffer.name, "timestamp="+readReceipt.time],
-		});
 	}
 
 	switchBuffer(id) {
@@ -438,13 +546,9 @@ export default class App extends Component {
 			let client = this.clients.get(buf.server);
 			let stored = this.bufferStore.get({ name: buf.name, server: client.params });
 			let prevReadReceipt = getReceipt(stored, ReceiptType.READ);
-			// TODO: only mark as read if user scrolled at the bottom
+			let update = State.updateBuffer(state, buf.id, { prevReadReceipt });
-			let update = State.updateBuffer(state, buf.id, {
-				unread: Unread.NONE,
-				prevReadReceipt,
-			});
 
-			return { ...update, activeBuffer: buf.id };
+			return { activeBuffer: buf.id, ...update };
 		}, () => {
 			if (!buf) {
 				return;
@@ -454,6 +558,35 @@ export default class App extends Component {
 				this.buffer.current.focus();
 			}
 
+			let server = this.state.servers.get(buf.server);
+			if (buf.type === BufferType.NICK && !server.users.has(buf.name)) {
+				this.whoUserBuffer(buf.name, buf.server);
+			}
+
+			if (buf.type === BufferType.CHANNEL && !buf.hasInitialWho) {
+				this.whoChannelBuffer(buf.name, buf.server);
+			}
+
+			this.updateDocumentTitle();
+		});
+
+		// TODO: only mark as read if user scrolled at the bottom
+		this.markBufferAsRead(id);
+	}
+
+	markBufferAsRead(id) {
+		let buf;
+		this.setState((state) => {
+			buf = State.getBuffer(state, id);
+			if (!buf) {
+				return;
+			}
+			return State.updateBuffer(state, buf.id, { unread: Unread.NONE });
+		}, () => {
+			if (!buf) {
+				return;
+			}
+
 			let client = this.clients.get(buf.server);
 
 			for (let notif of this.messageNotifications) {
@@ -475,32 +608,73 @@ export default class App extends Component {
 				}
 			}
 
-			let server = this.state.servers.get(buf.server);
+			this.updateDocumentTitle();
-			if (buf.type === BufferType.NICK && !server.users.has(buf.name)) {
-				this.whoUserBuffer(buf.name, buf.server);
-			}
-
-			if (buf.type !== BufferType.SERVER) {
-				document.title = buf.name + ' · ' + this.baseTitle;
-			} else {
-				document.title = this.baseTitle;
-			}
 		});
 	}
 
-	addMessage(serverID, bufName, msg) {
+	updateDocumentTitle() {
-		let client = this.clients.get(serverID);
+		let buf = State.getBuffer(this.state, this.state.activeBuffer);
+		let server;
+		if (buf) {
+			server = this.state.servers.get(buf.server);
+		}
+		let bouncerNetwork;
+		if (server.bouncerNetID) {
+			bouncerNetwork = this.state.bouncerNetworks.get(server.bouncerNetID);
+		}
 
+		let numUnread = 0;
+		for (let buffer of this.state.buffers.values()) {
+			if (Unread.compare(buffer.unread, Unread.HIGHLIGHT) >= 0) {
+				numUnread++;
+			}
+		}
+
+		let parts = [];
+		if (buf && buf.type !== BufferType.SERVER) {
+			parts.push(buf.name);
+		}
+		if (bouncerNetwork) {
+			parts.push(getServerName(server, bouncerNetwork));
+		}
+		parts.push(this.baseTitle);
+
+		let title = "";
+		if (numUnread > 0) {
+			title = `(${numUnread}) `;
+		}
+		title += parts.join(" · ");
+
+		document.title = title;
+	}
+
+	prepareChatMessage(serverID, msg) {
 		// Treat server-wide broadcasts as highlights. They're sent by server
 		// operators and can contain important information.
+		if (msg.isHighlight === undefined) {
+			let client = this.clients.get(serverID);
 			msg.isHighlight = irc.isHighlight(msg, client.nick, client.cm) || irc.isServerBroadcast(msg);
+		}
 
 		if (!msg.tags) {
+			// Can happen for outgoing messages for instance
 			msg.tags = {};
 		}
 		if (!msg.tags.time) {
 			msg.tags.time = irc.formatDate(new Date());
 		}
+	}
+
+	addChatMessage(serverID, bufName, msg) {
+		this.prepareChatMessage(serverID, msg);
+		let bufID = { server: serverID, name: bufName };
+		this.setState((state) => State.addMessage(state, msg, bufID));
+	}
+
+	handleChatMessage(serverID, bufName, msg) {
+		let client = this.clients.get(serverID);
+
+		this.prepareChatMessage(serverID, msg);
 
 		let stored = this.bufferStore.get({ name: bufName, server: client.params });
 		let deliveryReceipt = getReceipt(stored, ReceiptType.DELIVERED);
@@ -508,14 +682,12 @@ export default class App extends Component {
 		let isDelivered = isMessageBeforeReceipt(msg, deliveryReceipt);
 		let isRead = isMessageBeforeReceipt(msg, readReceipt);
 
-		// TODO: messages coming from infinite scroll shouldn't trigger notifications
-
 		if (client.isMyNick(msg.prefix.name)) {
 			isRead = true;
 		}
 
 		let msgUnread = Unread.NONE;
-		if ((msg.command == "PRIVMSG" || msg.command == "NOTICE") && !isRead) {
+		if ((msg.command === "PRIVMSG" || msg.command === "NOTICE") && !isRead) {
 			let target = msg.params[0];
 			let text = msg.params[1];
 
@@ -530,7 +702,7 @@ export default class App extends Component {
 				msgUnread = Unread.MESSAGE;
 			}
 
-			if (msgUnread == Unread.HIGHLIGHT && !isDelivered && !irc.parseCTCP(msg)) {
+			if (msgUnread === Unread.HIGHLIGHT && !isDelivered && !irc.parseCTCP(msg)) {
 				let title = "New " + kind + " from " + msg.prefix.name;
 				if (client.isChannel(bufName)) {
 					title += " in " + bufName;
@@ -588,7 +760,7 @@ export default class App extends Component {
 
 		// Open a new buffer if the message doesn't come from me or is a
 		// self-message
-		if ((!client.isMyNick(msg.prefix.name) || client.isMyNick(bufName)) && (msg.command != "PART" && msg.comand != "QUIT")) {
+		if ((!client.isMyNick(msg.prefix.name) || client.isMyNick(bufName)) && (msg.command !== "PART" && msg.comand !== "QUIT" && msg.command !== irc.RPL_MONONLINE && msg.command !== irc.RPL_MONOFFLINE)) {
 			this.createBuffer(serverID, bufName);
 		}
 
@@ -600,7 +772,7 @@ export default class App extends Component {
 			let prevReadReceipt = buf.prevReadReceipt;
 			let receipts = { [ReceiptType.DELIVERED]: receiptFromMessage(msg) };
 
-			if (this.state.activeBuffer !== buf.id) {
+			if (this.state.activeBuffer !== buf.id || !document.hasFocus()) {
 				unread = Unread.union(unread, msgUnread);
 			} else {
 				receipts[ReceiptType.READ] = receiptFromMessage(msg);
@@ -621,6 +793,10 @@ export default class App extends Component {
 				this.sendReadReceipt(client, stored);
 			}
 			return { unread, prevReadReceipt };
+		}, () => {
+			if (msgUnread === Unread.HIGHLIGHT) {
+				this.updateDocumentTitle();
+			}
 		});
 	}
 
@@ -730,6 +906,12 @@ export default class App extends Component {
 		let client = this.clients.get(serverID);
 		let chatHistoryBatch = irc.findBatchByType(msg, "chathistory");
 
+		// Reply triggered by some command sent by us, not worth displaying to
+		// the user
+		if (msg.internal) {
+			return [];
+		}
+
 		let target, channel, affectedBuffers;
 		switch (msg.command) {
 		case "MODE":
@@ -744,13 +926,14 @@ export default class App extends Component {
 			if (client.isMyNick(target)) {
 				if (client.cm(msg.prefix.name) === client.cm(client.serverPrefix.name)) {
 					target = SERVER_BUFFER;
+				} else {
+					let context = msg.tags["+draft/channel-context"];
+					if (context && client.isChannel(context) && State.getBuffer(this.state, { server: serverID, name: context })) {
+						target = context;
 					} else {
 						target = msg.prefix.name;
 					}
 				}
-			if (msg.command === "NOTICE" && !State.getBuffer(this.state, { server: serverID, name: target })) {
-				// Don't open a new buffer if this is just a NOTICE
-				target = SERVER_BUFFER;
 			}
 
 			let allowedPrefixes = client.isupport.statusMsg();
@@ -760,6 +943,22 @@ export default class App extends Component {
 					target = parts.name;
 				}
 			}
+
+			// Don't open a new buffer if this is just a NOTICE or a garbage
+			// CTCP message
+			let openNewBuffer = true;
+			if (msg.command !== "PRIVMSG") {
+				openNewBuffer = false;
+			} else {
+				let ctcp = irc.parseCTCP(msg);
+				if (ctcp && ctcp.command !== "ACTION") {
+					openNewBuffer = false;
+				}
+			}
+			if (!openNewBuffer && !State.getBuffer(this.state, { server: serverID, name: target })) {
+				target = SERVER_BUFFER;
+			}
+
 			return [target];
 		case "JOIN":
 			channel = msg.params[0];
@@ -779,10 +978,10 @@ export default class App extends Component {
 				affectedBuffers.push(chatHistoryBatch.params[0]);
 			} else {
 				this.state.buffers.forEach((buf) => {
-					if (buf.server != serverID) {
+					if (buf.server !== serverID) {
 						return;
 					}
-					if (!buf.members.has(msg.prefix.name) && client.cm(buf.name) !== client.cm(msg.prefix.name)) {
+					if (!buf.members.has(msg.prefix.name)) {
 						return;
 					}
 					affectedBuffers.push(buf.name);
@@ -797,7 +996,7 @@ export default class App extends Component {
 				affectedBuffers.push(chatHistoryBatch.params[0]);
 			} else {
 				this.state.buffers.forEach((buf) => {
-					if (buf.server != serverID) {
+					if (buf.server !== serverID) {
 						return;
 					}
 					if (!buf.members.has(msg.prefix.name)) {
@@ -838,6 +1037,15 @@ export default class App extends Component {
 		case irc.RPL_INVITING:
 			channel = msg.params[2];
 			return [channel];
+		case irc.RPL_MONONLINE:
+		case irc.RPL_MONOFFLINE:
+			let targets = msg.params[1].split(",");
+			affectedBuffers = [];
+			for (let target of targets) {
+				let prefix = irc.parsePrefix(target);
+				affectedBuffers.push(prefix.name);
+			}
+			return affectedBuffers;
 		case irc.RPL_YOURHOST:
 		case irc.RPL_MYINFO:
 		case irc.RPL_ISUPPORT:
@@ -849,9 +1057,8 @@ export default class App extends Component {
 		case irc.RPL_TOPICWHOTIME:
 		case irc.RPL_NAMREPLY:
 		case irc.RPL_ENDOFNAMES:
-		case irc.RPL_MONONLINE:
-		case irc.RPL_MONOFFLINE:
 		case irc.RPL_SASLSUCCESS:
+		case irc.RPL_CHANNEL_URL:
 		case "AWAY":
 		case "SETNAME":
 		case "CHGHOST":
@@ -865,7 +1072,7 @@ export default class App extends Component {
 		case "CHATHISTORY":
 		case "ACK":
 		case "BOUNCER":
-		case "READ":
+		case "MARKREAD":
 			// Ignore these
 			return [];
 		default:
@@ -896,7 +1103,7 @@ export default class App extends Component {
 			// Restore opened channel and user buffers
 			let join = [];
 			for (let buf of this.bufferStore.list(client.params)) {
-				if (buf.name === "*") {
+				if (buf.name === "*" || buf.closed) {
 					continue;
 				}
 
@@ -935,13 +1142,14 @@ export default class App extends Component {
 				this.openURL(this.autoOpenURL);
 				this.autoOpenURL = null;
 			}
+			break;
 		case "JOIN":
 			channel = msg.params[0];
 
 			if (client.isMyNick(msg.prefix.name)) {
 				this.syncBufferUnread(serverID, channel);
 			}
-			if (channel == this.switchToChannel) {
+			if (channel === this.switchToChannel) {
 				this.switchBuffer({ server: serverID, name: channel });
 				this.switchToChannel = null;
 			}
@@ -1015,10 +1223,10 @@ export default class App extends Component {
 				this.autoOpenURL = null;
 			}
 			break;
-		case "READ":
+		case "MARKREAD":
 			target = msg.params[0];
 			let bound = msg.params[1];
-			if (!client.isMyNick(msg.prefix.name) || bound === "*" || !bound.startsWith("timestamp=")) {
+			if (bound === "*" || !bound.startsWith("timestamp=")) {
 				break;
 			}
 			let readReceipt = { time: bound.replace("timestamp=", "") };
@@ -1034,9 +1242,13 @@ export default class App extends Component {
 					notif.close();
 				}
 			}
+			let unread;
+			let closed = true;
 			this.setBufferState({ server: serverID, name: target }, (buf) => {
+				closed = false;
+
 				// Re-compute unread status
-				let unread = Unread.NONE;
+				unread = Unread.NONE;
 				for (let i = buf.messages.length - 1; i >= 0; i--) {
 					let msg = buf.messages[i];
 					if (msg.command !== "PRIVMSG" && msg.command !== "NOTICE") {
@@ -1054,29 +1266,31 @@ export default class App extends Component {
 					unread = Unread.MESSAGE;
 				}
 
+				return { unread };
+			}, () => {
 				this.bufferStore.put({
 					name: target,
 					server: client.params,
 					unread,
+					closed,
 					receipts: { [ReceiptType.READ]: readReceipt },
 				});
-
+				this.updateDocumentTitle();
-				return { unread };
 			});
 			break;
 		default:
-			if (irc.isError(msg.command) && msg.command != irc.ERR_NOMOTD) {
+			if (irc.isError(msg.command) && msg.command !== irc.ERR_NOMOTD) {
 				let description = msg.params[msg.params.length - 1];
 				this.showError(description);
 			}
 		}
 
 		destBuffers.forEach((bufName) => {
-			this.addMessage(serverID, bufName, msg);
+			this.handleChatMessage(serverID, bufName, msg);
 		});
 	}
 
-	fetchBacklog(serverID) {
+	async fetchBacklog(serverID) {
 		let client = this.clients.get(serverID);
 		if (!client.caps.enabled.has("draft/chathistory")) {
 			return;
@@ -1091,8 +1305,8 @@ export default class App extends Component {
 		}
 
 		let now = irc.formatDate(new Date());
-		client.fetchHistoryTargets(now, lastReceipt.time).then((targets) => {
+		let targets = await client.fetchHistoryTargets(now, lastReceipt.time);
-			targets.forEach((target) => {
+		targets.forEach(async (target) => {
 			let from = lastReceipt;
 			let to = { time: now };
 
@@ -1112,18 +1326,27 @@ export default class App extends Component {
 				from = receiptFromMessage(lastMsg);
 			}
 
-				client.fetchHistoryBetween(target.name, from, to, CHATHISTORY_MAX_SIZE).then((result) => {
+			// Query read marker if this is a user (ie, we haven't received
+			// the read marker as part of a JOIN burst)
+			if (client.supportsReadMarker() && client.isNick(target.name)) {
+				client.fetchReadMarker(target.name);
+			}
+
+			let result;
+			try {
+				result = await client.fetchHistoryBetween(target.name, from, to, CHATHISTORY_MAX_SIZE);
+			} catch (err) {
+				console.error("Failed to fetch backlog for '" + target.name + "': ", err);
+				this.showError("Failed to fetch backlog for '" + target.name + "'");
+				return;
+			}
+
 			for (let msg of result.messages) {
 				let destBuffers = this.routeMessage(serverID, msg);
 				for (let bufName of destBuffers) {
-							this.addMessage(serverID, target.name, msg);
+					this.handleChatMessage(serverID, bufName, msg);
 				}
 			}
-				}).catch((err) => {
-					console.error("Failed to fetch backlog for '" + target.name + "': ", err);
-					this.showError("Failed to fetch backlog for '" + target.name + "'");
-				});
-			});
 		});
 	}
 
@@ -1223,11 +1446,25 @@ export default class App extends Component {
 		});
 		client.monitor(target);
 
-		if (client.caps.enabled.has("soju.im/read")) {
+		if (client.supportsReadMarker()) {
-			client.send({
+			client.fetchReadMarker(target);
-				command: "READ",
+		}
-				params: [target],
+	}
+
+	async whoChannelBuffer(target, serverID) {
+		let client = this.clients.get(serverID);
+
+		// Prevent multiple WHO commands for the same channel in parallel
+		this.setBufferState({ name: target, server: serverID }, { hasInitialWho: true });
+
+		let hasInitialWho = false;
+		try {
+			await client.who(target, {
+				fields: ["flags", "hostname", "nick", "realname", "username", "account"],
 			});
+			hasInitialWho = true;
+		} finally {
+			this.setBufferState({ name: target, server: serverID }, { hasInitialWho });
 		}
 	}
 
@@ -1281,6 +1518,7 @@ export default class App extends Component {
 			});
 
 			let disconnectAll = client && !client.params.bouncerNetwork && client.caps.enabled.has("soju.im/bouncer-networks");
+			let isFirstServer = this.state.servers.keys().next().value === buf.server;
 
 			this.disconnect(buf.server);
 
@@ -1289,7 +1527,7 @@ export default class App extends Component {
 				servers.delete(buf.server);
 
 				let connectForm = state.connectForm;
-				if (servers.size == 0) {
+				if (servers.size === 0) {
 					connectForm = true;
 				}
 
@@ -1306,7 +1544,7 @@ export default class App extends Component {
 			}
 
 			// TODO: only clear autoconnect if this server is stored there
-			if (buf.server == 1) {
+			if (isFirstServer) {
 				store.autoconnect.put(null);
 			}
 			break;
@@ -1327,7 +1565,11 @@ export default class App extends Component {
 
 			client.unmonitor(buf.name);
 
-			this.bufferStore.delete({ name: buf.name, server: client.params });
+			this.bufferStore.put({
+				name: buf.name,
+				server: client.params,
+				closed: true,
+			});
 			break;
 		}
 	}
@@ -1341,7 +1583,7 @@ export default class App extends Component {
 		let name = parts[0].toLowerCase().slice(1);
 		let args = parts.slice(1);
 
-		let cmd = commands[name];
+		let cmd = commands.get(name);
 		if (!cmd) {
 			this.showError(`Unknown command "${name}" (run "/help" to get a command list)`);
 			return;
@@ -1356,7 +1598,7 @@ export default class App extends Component {
 	}
 
 	privmsg(target, text) {
-		if (target == SERVER_BUFFER) {
+		if (target === SERVER_BUFFER) {
 			this.showError("Cannot send message in server buffer");
 			return;
 		}
@@ -1369,7 +1611,7 @@ export default class App extends Component {
 
 		if (!client.caps.enabled.has("echo-message")) {
 			msg.prefix = { name: client.nick };
-			this.addMessage(serverID, target, msg);
+			this.handleChatMessage(serverID, target, msg);
 		}
 	}
 
@@ -1473,8 +1715,8 @@ export default class App extends Component {
 		}
 
 		if (prefix.startsWith("/")) {
-			let repl = fromList(Object.keys(commands), prefix.slice(1));
+			let repl = fromList([...commands.keys()], prefix.slice(1));
-			return repl.map(cmd => "/" + cmd);
+			return repl.map((cmd) => "/" + cmd);
 		}
 
 		// TODO: consider using the CHANTYPES ISUPPORT token here
@@ -1499,9 +1741,9 @@ export default class App extends Component {
 		this.openDialog("help");
 	}
 
-	handleBufferScrollTop() {
+	async handleBufferScrollTop() {
 		let buf = this.state.buffers.get(this.state.activeBuffer);
-		if (!buf || buf.type == BufferType.SERVER) {
+		if (!buf || buf.type === BufferType.SERVER) {
 			return;
 		}
 
@@ -1529,14 +1771,36 @@ export default class App extends Component {
 			limit = 200;
 		}
 
-		client.fetchHistoryBefore(buf.name, before, limit).then((result) => {
+		let result = await client.fetchHistoryBefore(buf.name, before, limit);
 		this.endOfHistory.set(buf.id, !result.more);
-			for (let msg of result.messages) {
+
-				this.addMessage(buf.server, buf.name, msg);
+		if (result.messages.length > 0) {
+			let msg = result.messages[result.messages.length - 1];
+			let receipts = { [ReceiptType.DELIVERED]: receiptFromMessage(msg) };
+			if (this.state.activeBuffer === buf.id) {
+				receipts[ReceiptType.READ] = receiptFromMessage(msg);
 			}
+			let stored = {
+				name: buf.name,
+				server: client.params,
+				receipts,
+			};
+			if (this.bufferStore.put(stored)) {
+				this.sendReadReceipt(client, stored);
+			}
+			this.setBufferState(buf, ({ prevReadReceipt }) => {
+				if (!isMessageBeforeReceipt(msg, prevReadReceipt)) {
+					prevReadReceipt = receiptFromMessage(msg);
+				}
+				return { prevReadReceipt };
 			});
 		}
 
+		for (let msg of result.messages) {
+			this.addChatMessage(buf.server, buf.name, msg);
+		}
+	}
+
 	openDialog(name, data) {
 		this.setState({ dialog: name, dialogData: data });
 	}
@@ -1652,12 +1916,13 @@ export default class App extends Component {
 		});
 	}
 
-	handleNetworkSubmit(attrs, autojoin) {
+	async handleNetworkSubmit(attrs, autojoin) {
 		let client = this.clients.values().next().value;
 
-		if (this.state.dialogData && this.state.dialogData.id) {
-			if (Object.keys(attrs).length == 0) {
 		this.dismissDialog();
+
+		if (this.state.dialogData && this.state.dialogData.id) {
+			if (Object.keys(attrs).length === 0) {
 				return;
 			}
 
@@ -1667,7 +1932,7 @@ export default class App extends Component {
 			});
 		} else {
 			attrs = { ...attrs, tls: "1" };
-			client.createBouncerNetwork(attrs).then((id) => {
+			let id = await client.createBouncerNetwork(attrs);
 			if (!autojoin) {
 				return;
 			}
@@ -1675,14 +1940,11 @@ export default class App extends Component {
 			// By this point, bouncer-networks-notify should've advertised
 			// the new network
 			let serverID = this.serverFromBouncerNetwork(id);
-				let client = this.clients.get(serverID);
+			let newClient = this.clients.get(serverID);
-				client.params.autojoin = [autojoin];
+			newClient.params.autojoin = [autojoin];
 
 			this.switchToChannel = autojoin;
-			});
 		}
-
-		this.dismissDialog();
 	}
 
 	handleNetworkRemove() {
@@ -1698,7 +1960,7 @@ export default class App extends Component {
 
 	handleOpenSettingsClick() {
 		let showProtocolHandler = false;
-		for (let [id, client] of this.clients) {
+		for (let [_id, client] of this.clients) {
 			if (client.caps.enabled.has("soju.im/bouncer-networks")) {
 				showProtocolHandler = true;
 				break;
@@ -1713,18 +1975,56 @@ export default class App extends Component {
 		this.setState({ settings });
 	}
 
+	handleSettingsDisconnect() {
+		this.dismissDialog();
+		this.disconnectAll();
+	}
+
+	handleSwitchSubmit(buf) {
+		this.dismissDialog();
+		if (buf) {
+			this.switchBuffer(buf);
+		}
+	}
+
+	handleWindowFocus() {
+		if (this.state.activeBuffer) {
+			// TODO: only do this if scrolled at the bottom
+			this.markBufferAsRead(this.state.activeBuffer);
+		}
+
+		// When the user focuses gamja, send a PING to make sure we detect any
+		// network errors ASAP
+
+		let now = new Date();
+		if (this.lastFocusPingDate && now.getTime() - this.lastFocusPingDate.getTime() < 15 * 1000) {
+			return;
+		}
+		this.lastFocusPingDate = now;
+
+		for (let client of this.clients.values()) {
+			client.send({ command: "PING", params: ["gamja"] });
+		}
+	}
+
 	componentDidMount() {
 		this.baseTitle = document.title;
 		setupKeybindings(this);
+		window.addEventListener("focus", this.handleWindowFocus);
 	}
 
 	componentWillUnmount() {
 		document.title = this.baseTitle;
+		window.removeEventListener("focus", this.handleWindowFocus);
 	}
 
 	render() {
 		if (this.state.loading) {
-			return html`<section id="connect"></section>`;
+			let error = null;
+			if (this.state.error) {
+				error = html`<form><p class="error-text">${this.state.error}</p></form>`;
+			}
+			return html`<section id="connect">${error}</section>`;
 		}
 
 		let activeBuffer = null, activeServer = null, activeBouncerNetwork = null;
@@ -1738,6 +2038,11 @@ export default class App extends Component {
 			}
 		}
 
+		let activeClient = null;
+		if (activeBuffer) {
+			activeClient = this.clients.get(activeBuffer.server);
+		}
+
 		if (this.state.connectForm) {
 			let status = activeServer ? activeServer.status : ServerStatus.DISCONNECTED;
 			let connecting = status === ServerStatus.CONNECTING || status === ServerStatus.REGISTERING;
@@ -1757,7 +2062,7 @@ export default class App extends Component {
 		let bufferHeader = null;
 		if (activeBuffer) {
 			let activeUser = null;
-			if (activeBuffer.type == BufferType.NICK) {
+			if (activeBuffer.type === BufferType.NICK) {
 				activeUser = activeServer.users.get(activeBuffer.name);
 			}
 
@@ -1781,7 +2086,7 @@ export default class App extends Component {
 		}
 
 		let memberList = null;
-		if (activeBuffer && activeBuffer.type == BufferType.CHANNEL) {
+		if (activeBuffer && activeBuffer.type === BufferType.CHANNEL) {
 			memberList = html`
 				<section
 						id="member-list"
@@ -1890,12 +2195,23 @@ export default class App extends Component {
 						settings=${this.state.settings}
 						showProtocolHandler=${dialogData.showProtocolHandler}
 						onChange=${this.handleSettingsChange}
-						onDisconnect=${() => this.disconnectAll()}
+						onDisconnect=${this.handleSettingsDisconnect}
-						onClose=${() => this.dismissDialog()}
+						onClose=${this.dismissDialog}
 					/>
 				</>
 			`;
 			break;
+		case "switch":
+			dialog = html`
+				<${Dialog} title="Switch to a channel or user" onDismiss=${this.dismissDialog}>
+					<${SwitcherForm}
+						buffers=${this.state.buffers}
+						servers=${this.state.servers}
+						bouncerNetworks=${this.state.bouncerNetworks}
+						onSubmit=${this.handleSwitchSubmit}/>
+				</>
+			`;
+			break;
 		}
 
 		let error = null;
@@ -1915,8 +2231,12 @@ export default class App extends Component {
 		}
 
 		let commandOnly = false;
+		let privmsgMaxLen;
 		if (activeBuffer && activeBuffer.type === BufferType.SERVER) {
 			commandOnly = true;
+		} else if (activeBuffer) {
+			let client = this.clients.get(activeBuffer.server);
+			privmsgMaxLen = irc.getMaxPrivmsgLen(client.isupport, client.nick, activeBuffer.name);
 		}
 
 		let app = html`
@@ -1951,7 +2271,6 @@ export default class App extends Component {
 					<${Buffer}
 						buffer=${activeBuffer}
 						server=${activeServer}
-						bouncerNetwork=${activeBouncerNetwork}
 						settings=${this.state.settings}
 						onChannelClick=${this.handleChannelClick}
 						onNickClick=${this.handleNickClick}
@@ -1964,10 +2283,12 @@ export default class App extends Component {
 			${memberList}
 			<${Composer}
 				ref=${this.composer}
+				client=${activeClient}
 				readOnly=${composerReadOnly}
 				onSubmit=${this.handleComposerSubmit}
 				autocomplete=${this.autocomplete}
 				commandOnly=${commandOnly}
+				maxLen=${privmsgMaxLen}
 			/>
 			${dialog}
 			${error}

components/auth-form.js

@@ -9,7 +9,7 @@ export default class NetworkForm extends Component {
 	constructor(props) {
 		super(props);
 
-		this.handleChange = this.handleChange.bind(this);
+		this.handleInput = this.handleInput.bind(this);
 		this.handleSubmit = this.handleSubmit.bind(this);
 
 		if (props.username) {
@@ -17,9 +17,9 @@ export default class NetworkForm extends Component {
 		}
 	}
 
-	handleChange(event) {
+	handleInput(event) {
 		let target = event.target;
-		let value = target.type == "checkbox" ? target.checked : target.value;
+		let value = target.type === "checkbox" ? target.checked : target.value;
 		this.setState({ [target.name]: value });
 	}
 
@@ -31,7 +31,7 @@ export default class NetworkForm extends Component {
 
 	render() {
 		return html`
-			<form onChange=${this.handleChange} onSubmit=${this.handleSubmit}>
+			<form onInput=${this.handleInput} onSubmit=${this.handleSubmit}>
 				<label>
 					Username:<br/>
 					<input type="username" name="username" value=${this.state.username} required/>

components/buffer-header.js

@@ -1,4 +1,4 @@
-import { html, Component } from "../lib/index.js";
+import { html } from "../lib/index.js";
 import linkify from "../lib/linkify.js";
 import { strip as stripANSI } from "../lib/ansi.js";
 import { BufferType, ServerStatus, getServerName } from "../state.js";
@@ -113,7 +113,6 @@ export default function BufferHeader(props) {
 		} else {
 			if (fullyConnected) {
 				actions.push(joinButton);
-				actions.push(settingsButton);
 			} else if (props.server.status === ServerStatus.DISCONNECTED) {
 				actions.push(reconnectButton);
 			}
@@ -215,7 +214,7 @@ export default function BufferHeader(props) {
 	}
 
 	let name = props.buffer.name;
-	if (props.buffer.type == BufferType.SERVER) {
+	if (props.buffer.type === BufferType.SERVER) {
 		name = getServerName(props.server, props.bouncerNetwork);
 	}
 

components/buffer-list.js

@@ -1,6 +1,7 @@
 import * as irc from "../lib/irc.js";
-import { html, Component } from "../lib/index.js";
+import { strip as stripANSI } from "../lib/ansi.js";
-import { BufferType, Unread, getBufferURL, getServerName } from "../state.js";
+import { html } from "../lib/index.js";
+import { BufferType, Unread, ServerStatus, getBufferURL, getServerName } from "../state.js";
 
 function BufferItem(props) {
 	function handleClick(event) {
@@ -15,22 +16,41 @@ function BufferItem(props) {
 	}
 
 	let name = props.buffer.name;
-	if (props.buffer.type == BufferType.SERVER) {
+	if (props.buffer.type === BufferType.SERVER) {
 		name = getServerName(props.server, props.bouncerNetwork);
 	}
 
+	let title;
 	let classes = ["type-" + props.buffer.type];
 	if (props.active) {
 		classes.push("active");
 	}
-	if (props.buffer.unread != Unread.NONE) {
+	if (props.buffer.unread !== Unread.NONE) {
 		classes.push("unread-" + props.buffer.unread);
 	}
+	switch (props.buffer.type) {
+	case BufferType.SERVER:
+		let isError = props.server.status === ServerStatus.DISCONNECTED;
+		if (props.bouncerNetwork && props.bouncerNetwork.error) {
+			isError = true;
+		}
+		if (isError) {
+			classes.push("error");
+		}
+		break;
+	case BufferType.NICK:
+		let user = props.server.users.get(name);
+		if (user && irc.isMeaningfulRealname(user.realname, name)) {
+			title = stripANSI(user.realname);
+		}
+		break;
+	}
 
 	return html`
 		<li class="${classes.join(" ")}">
 			<a
 				href=${getBufferURL(props.buffer)}
+				title=${title}
 				onClick=${handleClick}
 				onMouseDown=${handleMouseDown}
 			>${name}</a>
@@ -38,7 +58,6 @@ function BufferItem(props) {
 	`;
 }
 
-
 export default function BufferList(props) {
 	let items = Array.from(props.buffers.values()).map((buf) => {
 		let server = props.servers.get(buf.server);
@@ -56,7 +75,7 @@ export default function BufferList(props) {
 				bouncerNetwork=${bouncerNetwork}
 				onClick=${() => props.onBufferClick(buf)}
 				onClose=${() => props.onBufferClose(buf)}
-				active=${props.activeBuffer == buf.id}
+				active=${props.activeBuffer === buf.id}
 			/>
 		`;
 	});

components/buffer.js

@@ -2,7 +2,7 @@ import { html, Component } from "../lib/index.js";
 import linkify from "../lib/linkify.js";
 import * as irc from "../lib/irc.js";
 import { strip as stripANSI } from "../lib/ansi.js";
-import { BufferType, ServerStatus, BufferEventsDisplayMode, getNickURL, getChannelURL, getMessageURL, isMessageBeforeReceipt, SettingsContext } from "../state.js";
+import { BufferType, ServerStatus, BufferEventsDisplayMode, getMessageURL, isMessageBeforeReceipt, SettingsContext } from "../state.js";
 import * as store from "../store.js";
 import Membership from "./membership.js";
 
@@ -21,9 +21,19 @@ function Nick(props) {
 		props.onClick();
 	}
 
+	let title;
+	if (props.user && irc.isMeaningfulRealname(props.user.realname, props.nick)) {
+		title = stripANSI(props.user.realname);
+	}
+
 	let colorIndex = djb2(props.nick) % 16 + 1;
 	return html`
-		<a href=${getNickURL(props.nick)} class="nick nick-${colorIndex}" onClick=${handleClick}>${props.nick}</a>
+		<a
+			href=${irc.formatURL({ entity: props.nick })}
+			title=${title}
+			class="nick nick-${colorIndex}"
+			onClick=${handleClick}
+		>${props.nick}</a>
 	`;
 }
 
@@ -98,12 +108,16 @@ class LogLine extends Component {
 
 		function createNick(nick) {
 			return html`
-				<${Nick} nick=${nick} onClick=${() => onNickClick(nick)}/>
+				<${Nick}
+					nick=${nick}
+					user=${server.users.get(nick)}
+					onClick=${() => onNickClick(nick)}
+				/>
 			`;
 		}
 		function createChannel(channel) {
 			return html`
-				<a href=${getChannelURL(channel)} onClick=${onChannelClick}>
+				<a href=${irc.formatURL({ entity: channel })} onClick=${onChannelClick}>
 					${channel}
 				</a>
 			`;
@@ -120,7 +134,7 @@ class LogLine extends Component {
 
 			let ctcp = irc.parseCTCP(msg);
 			if (ctcp) {
-				if (ctcp.command == "ACTION") {
+				if (ctcp.command === "ACTION") {
 					lineClass = "me-tell";
 					content = html`* ${createNick(msg.prefix.name)} ${linkify(stripANSI(ctcp.param), onChannelClick)}`;
 				} else {
@@ -131,13 +145,12 @@ class LogLine extends Component {
 			} else {
 				lineClass = "talk";
 				let prefix = "<", suffix = ">";
-				if (msg.command == "NOTICE") {
+				if (msg.command === "NOTICE") {
 					prefix = suffix = "-";
 				}
 				content = html`${prefix}${createNick(msg.prefix.name)}${suffix} ${linkify(stripANSI(text), onChannelClick)}`;
 			}
 
-			let status = null;
 			let allowedPrefixes = server.statusMsg;
 			if (target !== buf.name && allowedPrefixes) {
 				let parts = irc.parseTargetPrefix(target, allowedPrefixes);
@@ -146,6 +159,10 @@ class LogLine extends Component {
 				}
 			}
 
+			if (msg.tags["+draft/channel-context"]) {
+				content = html`<em>(only visible to you)</em> ${content}`;
+			}
+
 			if (msg.isHighlight) {
 				lineClass += " highlight";
 			}
@@ -178,11 +195,80 @@ class LogLine extends Component {
 			break;
 		case "MODE":
 			target = msg.params[0];
+			let modeStr = msg.params[1];
+
+			let user = html`${createNick(msg.prefix.name)}`;
+
+			// TODO: use irc.forEachChannelModeUpdate()
+			if (buf.type === BufferType.CHANNEL && modeStr.length === 2 && server.cm(buf.name) === server.cm(target)) {
+				let plusMinus = modeStr[0];
+				let mode = modeStr[1];
+				let arg = msg.params[2];
+
+				let verb;
+				switch (mode) {
+				case "b":
+					verb = plusMinus === "+" ? "added" : "removed";
+					content = html`${user} has ${verb} a ban on ${arg}`;
+					break;
+				case "e":
+					verb = plusMinus === "+" ? "added" : "removed";
+					content = html`${user} has ${verb} a ban exemption on ${arg}`;
+					break;
+				case "l":
+					if (plusMinus === "+") {
+						content = html`${user} has set the channel user limit to ${arg}`;
+					} else {
+						content = html`${user} has unset the channel user limit`;
+					}
+					break;
+				case "i":
+					verb = plusMinus === "+" ? "marked": "unmarked";
+					content = html`${user} has ${verb} as invite-only`;
+					break;
+				case "m":
+					verb = plusMinus === "+" ? "marked": "unmarked";
+					content = html`${user} has ${verb} as moderated`;
+					break;
+				case "s":
+					verb = plusMinus === "+" ? "marked": "unmarked";
+					content = html`${user} has ${verb} as secret`;
+					break;
+				case "t":
+					verb = plusMinus === "+" ? "locked": "unlocked";
+					content = html`${user} has ${verb} the channel topic`;
+					break;
+				case "n":
+					verb = plusMinus === "+" ? "allowed": "denied";
+					content = html`${user} has ${verb} external messages to this channel`;
+					break;
+				}
+				if (content) {
+					break;
+				}
+
+				// Channel membership modes
+				let membership;
+				for (let prefix in irc.STD_MEMBERSHIP_MODES) {
+					if (irc.STD_MEMBERSHIP_MODES[prefix] === mode) {
+						membership = irc.STD_MEMBERSHIP_NAMES[prefix];
+						break;
+					}
+				}
+				if (membership && arg) {
+					let verb = plusMinus === "+" ? "granted" : "revoked";
+					let preposition = plusMinus === "+" ? "to" : "from";
 					content = html`
-				* ${createNick(msg.prefix.name)} sets mode ${msg.params.slice(1).join(" ")}
+						${user} has ${verb} ${membership} privileges ${preposition} ${createNick(arg)}
 					`;
-			// TODO: case-mapping
+					break;
-			if (buf.name !== target) {
+				}
+			}
+
+			content = html`
+				${user} sets mode ${msg.params.slice(1).join(" ")}
+			`;
+			if (server.cm(buf.name) !== server.cm(target)) {
 				content = html`${content} on ${target}`;
 			}
 			break;
@@ -263,8 +349,15 @@ class LogLine extends Component {
 			let date = new Date(parseInt(msg.params[2], 10) * 1000);
 			content = html`Channel was created on ${date.toLocaleString()}`;
 			break;
+		// MONITOR messages are only displayed in user buffers
+		case irc.RPL_MONONLINE:
+			content = html`${createNick(buf.name)} is online`;
+			break;
+		case irc.RPL_MONOFFLINE:
+			content = html`${createNick(buf.name)} is offline`;
+			break;
 		default:
-			if (irc.isError(msg.command) && msg.command != irc.ERR_NOMOTD) {
+			if (irc.isError(msg.command) && msg.command !== irc.ERR_NOMOTD) {
 				lineClass = "error";
 			}
 			content = html`${msg.command} ${linkify(msg.params.join(" "))}`;
@@ -314,11 +407,16 @@ class FoldGroup extends Component {
 	render() {
 		let msgs = this.props.messages;
 		let buf = this.props.buffer;
+		let server = this.props.server;
 
 		let onNickClick = this.props.onNickClick;
 		function createNick(nick) {
 			return html`
-				<${Nick} nick=${nick} onClick=${() => onNickClick(nick)}/>
+				<${Nick}
+					nick=${nick}
+					user=${server.users.get(nick)}
+					onClick=${() => onNickClick(nick)}
+				/>
 			`;
 		}
 
@@ -574,18 +672,17 @@ export default class Buffer extends Component {
 		}
 
 		let server = this.props.server;
-		let bouncerNetwork = this.props.bouncerNetwork;
 		let settings = this.props.settings;
 		let serverName = server.name;
 
 		let children = [];
-		if (buf.type == BufferType.SERVER) {
+		if (buf.type === BufferType.SERVER) {
 			children.push(html`<${NotificationNagger}/>`);
 		}
-		if (buf.type == BufferType.SERVER && server.isBouncer && !server.bouncerNetID) {
+		if (buf.type === BufferType.SERVER && server.isBouncer && !server.bouncerNetID) {
 			children.push(html`<${ProtocolHandlerNagger} bouncerName=${serverName}/>`);
 		}
-		if (buf.type == BufferType.SERVER && server.status == ServerStatus.REGISTERED && server.supportsSASLPlain && !server.account) {
+		if (buf.type === BufferType.SERVER && server.status === ServerStatus.REGISTERED && server.supportsSASLPlain && !server.account) {
 			children.push(html`
 				<${AccountNagger}
 					server=${server}
@@ -613,7 +710,38 @@ export default class Buffer extends Component {
 			`;
 		}
 		function createFoldGroup(msgs) {
-			// Filter out PART → JOIN pairs
+			// Merge NICK change chains
+			let nickChanges = new Map();
+			let mergedMsgs = [];
+			for (let msg of msgs) {
+				let keep = true;
+				switch (msg.command) {
+				case "PART":
+				case "QUIT":
+					nickChanges.delete(msg.prefix.name);
+					break;
+				case "NICK":
+					let prev = nickChanges.get(msg.prefix.name);
+					if (!prev) {
+						// Future NICK messages may mutate this one
+						msg = { ...msg };
+						nickChanges.set(msg.params[0], msg);
+						break;
+					}
+
+					prev.params = msg.params;
+					nickChanges.delete(msg.prefix.name);
+					nickChanges.set(msg.params[0], prev);
+					keep = false;
+					break;
+				}
+				if (keep) {
+					mergedMsgs.push(msg);
+				}
+			}
+			msgs = mergedMsgs;
+
+			// Filter out PART → JOIN pairs, as well as no-op NICKs from previous step
 			let partIndexes = new Map();
 			let keep = [];
 			msgs.forEach((msg, i) => {
@@ -624,6 +752,8 @@ export default class Buffer extends Component {
 					keep[partIndexes.get(msg.prefix.name)] = false;
 					partIndexes.delete(msg.prefix.name);
 					keep.push(false);
+				} else if (msg.command === "NICK" && msg.prefix.name === msg.params[0]) {
+					keep.push(false);
 				} else {
 					keep.push(true);
 				}
@@ -649,6 +779,7 @@ export default class Buffer extends Component {
 		let hasUnreadSeparator = false;
 		let prevDate = new Date();
 		let foldMessages = [];
+		let lastMonitor = null;
 		buf.messages.forEach((msg) => {
 			let sep = [];
 
@@ -656,7 +787,15 @@ export default class Buffer extends Component {
 				return;
 			}
 
-			if (!hasUnreadSeparator && buf.type != BufferType.SERVER && !isMessageBeforeReceipt(msg, buf.prevReadReceipt)) {
+			if (msg.command === irc.RPL_MONONLINE || msg.command === irc.RPL_MONOFFLINE) {
+				let skip = !lastMonitor || msg.command === lastMonitor;
+				lastMonitor = msg.command;
+				if (skip) {
+					return;
+				}
+			}
+
+			if (!hasUnreadSeparator && buf.type !== BufferType.SERVER && !isMessageBeforeReceipt(msg, buf.prevReadReceipt)) {
 				sep.push(html`<${UnreadSeparator} key="unread"/>`);
 				hasUnreadSeparator = true;
 			}

components/composer.js

@@ -1,5 +1,16 @@
 import { html, Component, createRef } from "../lib/index.js";
 
+function encodeContentDisposition(filename) {
+	// Encode filename according to RFC 5987 if necessary. Note,
+	// encodeURIComponent will percent-encode a superset of attr-char.
+	let encodedFilename = encodeURIComponent(filename);
+	if (encodedFilename === filename) {
+		return "attachment; filename=\"" + filename + "\"";
+	} else {
+		return "attachment; filename*=UTF-8''" + encodedFilename;
+	}
+}
+
 export default class Composer extends Component {
 	state = {
 		text: "",
@@ -13,6 +24,9 @@ export default class Composer extends Component {
 		this.handleInput = this.handleInput.bind(this);
 		this.handleSubmit = this.handleSubmit.bind(this);
 		this.handleInputKeyDown = this.handleInputKeyDown.bind(this);
+		this.handleInputPaste = this.handleInputPaste.bind(this);
+		this.handleDragOver = this.handleDragOver.bind(this);
+		this.handleDrop = this.handleDrop.bind(this);
 		this.handleWindowKeyDown = this.handleWindowKeyDown.bind(this);
 		this.handleWindowPaste = this.handleWindowPaste.bind(this);
 	}
@@ -116,11 +130,119 @@ export default class Composer extends Component {
 		this.setState({ text: autocomplete.text });
 	}
 
+	canUploadFiles() {
+		let client = this.props.client;
+		return client && client.isupport.filehost() && !this.props.readOnly;
+	}
+
+	async uploadFile(file) {
+		let client = this.props.client;
+		let endpoint = client.isupport.filehost();
+
+		let auth;
+		if (client.params.saslPlain) {
+			let params = client.params.saslPlain;
+			auth = "Basic " + btoa(params.username + ":" + params.password);
+		} else if (client.params.saslOauthBearer) {
+			auth = "Bearer " + client.params.saslOauthBearer.token;
+		}
+
+		let headers = {
+			"Content-Length": file.size,
+			"Content-Disposition": encodeContentDisposition(file.name),
+		};
+		if (file.type) {
+			headers["Content-Type"] = file.type;
+		}
+		if (auth) {
+			headers["Authorization"] = auth;
+		}
+
+		// TODO: show a loading UI while uploading
+		// TODO: show a cancel button
+		let resp = await fetch(endpoint, {
+			method: "POST",
+			body: file,
+			headers,
+			credentials: "include",
+		});
+
+		if (!resp.ok) {
+			throw new Error(`HTTP request failed (${resp.status})`);
+		}
+
+		let loc = resp.headers.get("Location");
+		if (!loc) {
+			throw new Error("filehost response missing Location header field");
+		}
+
+		return new URL(loc, endpoint);
+	}
+
+	async uploadFileList(fileList) {
+		let promises = [];
+		for (let file of fileList) {
+			promises.push(this.uploadFile(file));
+		}
+
+		let urls = await Promise.all(promises);
+
+		this.setState((state) => {
+			if (state.text) {
+				return { text: state.text + " " + urls.join(" ") };
+			} else {
+				return { text: urls.join(" ") };
+			}
+		});
+	}
+
+	async handleInputPaste(event) {
+		if (event.clipboardData.files.length === 0 || !this.canUploadFiles()) {
+			return;
+		}
+
+		event.preventDefault();
+		event.stopImmediatePropagation();
+
+		await this.uploadFileList(event.clipboardData.files);
+	}
+
+	handleDragOver(event) {
+		if (event.dataTransfer.items.length === 0 || !this.canUploadFiles()) {
+			return;
+		}
+
+		for (let item of event.dataTransfer.items) {
+			if (item.kind !== "file") {
+				return;
+			}
+		}
+
+		event.preventDefault();
+	}
+
+	async handleDrop(event) {
+		if (event.dataTransfer.files.length === 0 || !this.canUploadFiles()) {
+			return;
+		}
+
+		event.preventDefault();
+		event.stopImmediatePropagation();
+
+		await this.uploadFileList(event.dataTransfer.files);
+	}
+
 	handleWindowKeyDown(event) {
 		// If an <input> or <button> is focused, ignore.
-		if (document.activeElement !== document.body && document.activeElement.tagName !== "SECTION") {
+		if (document.activeElement && document.activeElement !== document.body) {
+			switch (document.activeElement.tagName.toLowerCase()) {
+			case "section":
+			case "a":
+				break;
+			default:
 				return;
 			}
+		}
 
 		// If a modifier is pressed, reserve for key bindings.
 		if (event.altKey || event.ctrlKey || event.metaKey) {
@@ -167,6 +289,11 @@ export default class Composer extends Component {
 			return;
 		}
 
+		if (event.clipboardData.files.length > 0) {
+			this.handleInputPaste(event);
+			return;
+		}
+
 		let text = event.clipboardData.getData("text");
 
 		event.preventDefault();
@@ -222,6 +349,10 @@ export default class Composer extends Component {
 					placeholder=${placeholder}
 					enterkeyhint="send"
 					onKeyDown=${this.handleInputKeyDown}
+					onPaste=${this.handleInputPaste}
+					onDragOver=${this.handleDragOver}
+					onDrop=${this.handleDrop}
+					maxlength=${this.props.maxLen}
 				/>
 			</form>
 		`;

components/connect-form.js

@@ -17,7 +17,7 @@ export default class ConnectForm extends Component {
 	constructor(props) {
 		super(props);
 
-		this.handleChange = this.handleChange.bind(this);
+		this.handleInput = this.handleInput.bind(this);
 		this.handleSubmit = this.handleSubmit.bind(this);
 
 		if (props.params) {
@@ -32,9 +32,9 @@ export default class ConnectForm extends Component {
 		}
 	}
 
-	handleChange(event) {
+	handleInput(event) {
 		let target = event.target;
-		let value = target.type == "checkbox" ? target.checked : target.value;
+		let value = target.type === "checkbox" ? target.checked : target.value;
 		this.setState({ [target.name]: value });
 	}
 
@@ -63,6 +63,8 @@ export default class ConnectForm extends Component {
 			};
 		} else if (this.props.auth === "external") {
 			params.saslExternal = true;
+		} else if (this.props.auth === "oauth2") {
+			params.saslOauthBearer = this.props.params.saslOauthBearer;
 		}
 
 		if (this.state.autojoin) {
@@ -110,7 +112,7 @@ export default class ConnectForm extends Component {
 		}
 
 		let auth = null;
-		if (this.props.auth !== "disabled" && this.props.auth !== "external") {
+		if (this.props.auth !== "disabled" && this.props.auth !== "external" && this.props.auth !== "oauth2") {
 			auth = html`
 				<label>
 					Password:<br/>
@@ -145,7 +147,7 @@ export default class ConnectForm extends Component {
 		}
 
 		return html`
-			<form onChange=${this.handleChange} onSubmit=${this.handleSubmit}>
+			<form onInput=${this.handleInput} onSubmit=${this.handleSubmit}>
 				<h2>Connect to IRC</h2>
 
 				<label>
@@ -157,6 +159,7 @@ export default class ConnectForm extends Component {
 						disabled=${disabled}
 						ref=${this.nickInput}
 						required
+						autofocus
 					/>
 				</label>
 				<br/><br/>

components/dialog.js

@@ -21,13 +21,13 @@ export default class Dialog extends Component {
 	}
 
 	handleBackdropClick(event) {
-		if (event.target.className == "dialog") {
+		if (event.target.className === "dialog") {
 			this.dismiss();
 		}
 	}
 
 	handleKeyDown(event) {
-		if (event.key == "Escape") {
+		if (event.key === "Escape") {
 			this.dismiss();
 		}
 	}

components/help.js

@@ -1,4 +1,4 @@
-import { html, Component } from "../lib/index.js";
+import { html } from "../lib/index.js";
 import { keybindings } from "../keybindings.js";
 import commands from "../commands.js";
 
@@ -6,7 +6,7 @@ function KeyBindingsHelp() {
 	let l = keybindings.map((binding) => {
 		let keys = [];
 		if (binding.ctrlKey) {
-			keys.psuh("Ctrl");
+			keys.push("Ctrl");
 		}
 		if (binding.altKey) {
 			keys.push("Alt");
@@ -26,6 +26,11 @@ function KeyBindingsHelp() {
 		`;
 	});
 
+	l.push(html`
+		<dt><kbd>Tab</kbd></dt>
+		<dd>Automatically complete nickname or channel</dd>
+	`);
+
 	if (!window.matchMedia("(pointer: none)").matches) {
 		l.push(html`
 			<dt><strong>Middle mouse click</strong></dt>

components/join-form.js

@@ -8,7 +8,7 @@ export default class JoinForm extends Component {
 	constructor(props) {
 		super(props);
 
-		this.handleChange = this.handleChange.bind(this);
+		this.handleInput = this.handleInput.bind(this);
 		this.handleSubmit = this.handleSubmit.bind(this);
 
 		if (props.channel) {
@@ -16,9 +16,9 @@ export default class JoinForm extends Component {
 		}
 	}
 
-	handleChange(event) {
+	handleInput(event) {
 		let target = event.target;
-		let value = target.type == "checkbox" ? target.checked : target.value;
+		let value = target.type === "checkbox" ? target.checked : target.value;
 		this.setState({ [target.name]: value });
 	}
 
@@ -34,7 +34,7 @@ export default class JoinForm extends Component {
 
 	render() {
 		return html`
-			<form onChange=${this.handleChange} onSubmit=${this.handleSubmit}>
+			<form onInput=${this.handleInput} onSubmit=${this.handleSubmit}>
 				<label>
 					Channel:<br/>
 					<input type="text" name="channel" value=${this.state.channel} autofocus required/>

components/member-list.js

@@ -1,5 +1,4 @@
 import { html, Component } from "../lib/index.js";
-import { getNickURL } from "../state.js";
 import { strip as stripANSI } from "../lib/ansi.js";
 import Membership from "./membership.js";
 import * as irc from "../lib/irc.js";
@@ -23,26 +22,7 @@ class MemberItem extends Component {
 	}
 
 	render() {
-		// XXX: If we were feeling creative we could generate unique colors for
+		let title;
-		// each item in ISUPPORT CHANMODES. But I am not feeling creative.
-		const membmap = {
-			"~": "owner",
-			"&": "admin",
-			"@": "op",
-			"%": "halfop",
-			"+": "voice",
-		};
-		const membclass = membmap[this.props.membership[0]] || "";
-		let membership = "";
-		if (this.props.membership) {
-			membership = html`
-				<span class="membership ${membclass}" title=${membclass}>
-					${this.props.membership}
-				</span>
-			`;
-		};
-
-		let title = null;
 		let user = this.props.user;
 		let classes = ["nick"];
 		if (user) {
@@ -73,7 +53,7 @@ class MemberItem extends Component {
 		return html`
 			<li>
 				<a
-					href=${getNickURL(this.props.nick)}
+					href=${irc.formatURL({ entity: this.props.nick, enttype: "user" })}
 					class=${classes.join(" ")}
 					title=${title}
 					onClick=${this.handleClick}
@@ -101,7 +81,7 @@ function sortMembers(a, b) {
 		return i - j;
 	}
 
-	return nickA < nickB ? -1 : 1;
+	return nickA.localeCompare(nickB);
 }
 
 export default class MemberList extends Component {

components/membership.js

@@ -1,21 +1,14 @@
-import { html, Component } from "../lib/index.js";
+import { html } from "../lib/index.js";
-
+import * as irc from "../lib/irc.js";
-// XXX: If we were feeling creative we could generate unique colors for
-// each item in ISUPPORT CHANMODES. But I am not feeling creative.
-const names = {
-	"~": "owner",
-	"&": "admin",
-	"@": "op",
-	"%": "halfop",
-	"+": "voice",
-};
 
 export default function Membership(props) {
 	if (!this.props.value) {
 		return null;
 	}
 
-	const name = names[this.props.value[0]] || "";
+	// XXX: If we were feeling creative we could generate unique colors for
+	// each item in ISUPPORT CHANMODES. But I am not feeling creative.
+	const name = irc.STD_MEMBERSHIP_NAMES[this.props.value[0]] || "";
 	return html`
 		<span class="membership ${name}" title=${name}>
 			${this.props.value}

components/network-form.js

@@ -22,7 +22,7 @@ export default class NetworkForm extends Component {
 
 		this.prevParams = { ...defaultParams };
 
-		this.handleChange = this.handleChange.bind(this);
+		this.handleInput = this.handleInput.bind(this);
 		this.handleSubmit = this.handleSubmit.bind(this);
 
 		if (props.params) {
@@ -35,9 +35,9 @@ export default class NetworkForm extends Component {
 		}
 	}
 
-	handleChange(event) {
+	handleInput(event) {
 		let target = event.target;
-		let value = target.type == "checkbox" ? target.checked : target.value;
+		let value = target.type === "checkbox" ? target.checked : target.value;
 		this.setState({ [target.name]: value });
 	}
 
@@ -46,10 +46,10 @@ export default class NetworkForm extends Component {
 
 		let params = {};
 		Object.keys(defaultParams).forEach((k) => {
-			if (!this.props.isNew && this.prevParams[k] == this.state[k]) {
+			if (!this.props.isNew && this.prevParams[k] === this.state[k]) {
 				return;
 			}
-			if (this.props.isNew && defaultParams[k] == this.state[k]) {
+			if (this.props.isNew && defaultParams[k] === this.state[k]) {
 				return;
 			}
 			params[k] = this.state[k];
@@ -85,7 +85,7 @@ export default class NetworkForm extends Component {
 		}
 
 		return html`
-			<form onChange=${this.handleChange} onSubmit=${this.handleSubmit}>
+			<form onInput=${this.handleInput} onSubmit=${this.handleSubmit}>
 				<label>
 					Hostname:<br/>
 					<input type="text" name="host" value=${this.state.host} autofocus required/>

components/register-form.js

@@ -9,13 +9,13 @@ export default class RegisterForm extends Component {
 	constructor(props) {
 		super(props);
 
-		this.handleChange = this.handleChange.bind(this);
+		this.handleInput = this.handleInput.bind(this);
 		this.handleSubmit = this.handleSubmit.bind(this);
 	}
 
-	handleChange(event) {
+	handleInput(event) {
 		let target = event.target;
-		let value = target.type == "checkbox" ? target.checked : target.value;
+		let value = target.type === "checkbox" ? target.checked : target.value;
 		this.setState({ [target.name]: value });
 	}
 
@@ -27,7 +27,7 @@ export default class RegisterForm extends Component {
 
 	render() {
 		return html`
-			<form onChange=${this.handleChange} onSubmit=${this.handleSubmit}>
+			<form onInput=${this.handleInput} onSubmit=${this.handleSubmit}>
 				<label>
 					E-mail:<br/>
 					<input

components/scroll-manager.js

@@ -1,4 +1,4 @@
-import { html, Component } from "../lib/index.js";
+import { Component } from "../lib/index.js";
 
 let store = new Map();
 
@@ -11,10 +11,10 @@ export default class ScrollManager extends Component {
 
 	isAtBottom() {
 		let target = this.props.target.current;
-		return target.scrollTop >= target.scrollHeight - target.offsetHeight;
+		return Math.abs(target.scrollHeight - target.clientHeight - target.scrollTop) <= 10;
 	}
 
-	saveScrollPosition() {
+	saveScrollPosition(scrollKey) {
 		let target = this.props.target.current;
 
 		let sticky = target.querySelectorAll(this.props.stickTo);
@@ -29,7 +29,7 @@ export default class ScrollManager extends Component {
 			}
 		}
 
-		store.set(this.props.scrollKey, stickToKey);
+		store.set(scrollKey, stickToKey);
 	}
 
 	restoreScrollPosition() {
@@ -48,13 +48,13 @@ export default class ScrollManager extends Component {
 			}
 		}
 
-		if (target.scrollTop == 0) {
+		if (target.scrollTop === 0) {
 			this.props.onScrollTop();
 		}
 	}
 
 	handleScroll() {
-		if (this.props.target.current.scrollTop == 0) {
+		if (this.props.target.current.scrollTop === 0) {
 			this.props.onScrollTop();
 		}
 	}
@@ -64,9 +64,9 @@ export default class ScrollManager extends Component {
 		this.props.target.current.addEventListener("scroll", this.handleScroll);
 	}
 
-	componentWillReceiveProps(nextProps) {
+	getSnapshotBeforeUpdate(prevProps) {
-		if (this.props.scrollKey !== nextProps.scrollKey || this.props.children !== nextProps.children) {
+		if (this.props.scrollKey !== prevProps.scrollKey || this.props.children !== prevProps.children) {
-			this.saveScrollPosition();
+			this.saveScrollPosition(prevProps.scrollKey);
 		}
 	}
 
@@ -79,7 +79,7 @@ export default class ScrollManager extends Component {
 
 	componentWillUnmount() {
 		this.props.target.current.removeEventListener("scroll", this.handleScroll);
-		this.saveScrollPosition();
+		this.saveScrollPosition(this.props.scrollKey);
 	}
 
 	render() {

components/settings-form.js

@@ -9,13 +9,13 @@ export default class SettingsForm extends Component {
 		this.state.secondsInTimestamps = props.settings.secondsInTimestamps;
 		this.state.bufferEvents = props.settings.bufferEvents;
 
-		this.handleChange = this.handleChange.bind(this);
+		this.handleInput = this.handleInput.bind(this);
 		this.handleSubmit = this.handleSubmit.bind(this);
 	}
 
-	handleChange(event) {
+	handleInput(event) {
 		let target = event.target;
-		let value = target.type == "checkbox" ? target.checked : target.value;
+		let value = target.type === "checkbox" ? target.checked : target.value;
 		this.setState({ [target.name]: value }, () => {
 			this.props.onChange(this.state);
 		});
@@ -56,7 +56,7 @@ export default class SettingsForm extends Component {
 		}
 
 		return html`
-			<form onChange=${this.handleChange} onSubmit=${this.handleSubmit}>
+			<form onInput=${this.handleInput} onSubmit=${this.handleSubmit}>
 				<label>
 					<input
 						type="checkbox"

components/switcher-form.js

@@ -0,0 +1,171 @@
+import { html, Component } from "../lib/index.js";
+import { BufferType, getBufferURL, getServerName } from "../state.js";
+import * as irc from "../lib/irc.js";
+
+class SwitcherItem extends Component {
+	constructor(props) {
+		super(props);
+
+		this.handleClick = this.handleClick.bind(this);
+	}
+
+	handleClick(event) {
+		event.preventDefault();
+		this.props.onClick();
+	}
+
+	render() {
+		let class_ = this.props.selected ? "selected" : "";
+
+		return html`
+			<li>
+				<a
+					href=${getBufferURL(this.props.buffer)}
+					class=${class_}
+					onClick=${this.handleClick}
+				>
+					<span class="server">
+						${getServerName(this.props.server, this.props.bouncerNetwork)}
+					</span>
+					${this.props.buffer.name}
+				</a>
+			</li>
+		`;
+	}
+}
+
+function matchString(s, query) {
+	return s.toLowerCase().includes(query) ? 1 : 0;
+}
+
+function matchBuffer(buf, server, query) {
+	let score = 2 * matchString(buf.name, query);
+	switch (buf.type) {
+	case BufferType.CHANNEL:
+		score += matchString(buf.topic || "", query);
+		break;
+	case BufferType.NICK:
+		let user = server.users.get(buf.name);
+		if (user && user.realname && irc.isMeaningfulRealname(user.realname, buf.name)) {
+			score += matchString(user.realname, query);
+		}
+		break;
+	}
+	return score;
+}
+
+export default class SwitcherForm extends Component {
+	state = {
+		query: "",
+		selected: 0,
+	};
+
+	constructor(props) {
+		super(props);
+
+		this.handleInput = this.handleInput.bind(this);
+		this.handleSubmit = this.handleSubmit.bind(this);
+		this.handleKeyUp = this.handleKeyUp.bind(this);
+	}
+
+	getSuggestions() {
+		let query = this.state.query.toLowerCase();
+
+		let l = [];
+		let scores = new Map();
+		for (let buf of this.props.buffers.values()) {
+			if (buf.type === BufferType.SERVER) {
+				continue;
+			}
+			let score = 0;
+			if (query !== "") {
+				let server = this.props.servers.get(buf.server);
+				score = matchBuffer(buf, server, query);
+				if (!score) {
+					continue;
+				}
+			}
+			scores.set(buf.id, score);
+			l.push(buf);
+		}
+
+		l.sort((a, b) => {
+			return scores.get(b.id) - scores.get(a.id);
+		});
+
+		return l.slice(0, 20);
+	}
+
+	handleInput(event) {
+		let target = event.target;
+		this.setState({ [target.name]: target.value });
+	}
+
+	handleSubmit(event) {
+		event.preventDefault();
+		this.props.onSubmit(this.getSuggestions()[this.state.selected]);
+	}
+
+	handleKeyUp(event) {
+		switch (event.key) {
+		case "ArrowUp":
+			event.stopPropagation();
+			this.move(-1);
+			break;
+		case "ArrowDown":
+			event.stopPropagation();
+			this.move(1);
+			break;
+		}
+	}
+
+	move(delta) {
+		let numSuggestions = this.getSuggestions().length;
+		this.setState((state) => {
+			return {
+				selected: (state.selected + delta + numSuggestions) % numSuggestions,
+			};
+		});
+	}
+
+	render() {
+		let items = this.getSuggestions().map((buf, i) => {
+			let server = this.props.servers.get(buf.server);
+
+			let bouncerNetwork = null;
+			if (server.bouncerNetID) {
+				bouncerNetwork = this.props.bouncerNetworks.get(server.bouncerNetID);
+			}
+
+			return html`
+				<${SwitcherItem}
+					buffer=${buf}
+					server=${server}
+					bouncerNetwork=${bouncerNetwork}
+					selected=${this.state.selected === i}
+					onClick=${() => this.props.onSubmit(buf)}
+				/>
+			`;
+		});
+
+		return html`
+			<form
+				onInput=${this.handleInput}
+				onSubmit=${this.handleSubmit}
+				onKeyUp=${this.handleKeyUp}
+			>
+				<input
+					type="search"
+					name="query"
+					value=${this.state.query}
+					placeholder="Filter"
+					autocomplete="off"
+					autofocus
+				/>
+				<ul class="switcher-list">
+					${items}
+				</ul>
+			</form>
+		`;
+	}
+}

components/verify-form.js

@@ -9,13 +9,13 @@ export default class RegisterForm extends Component {
 	constructor(props) {
 		super(props);
 
-		this.handleChange = this.handleChange.bind(this);
+		this.handleInput = this.handleInput.bind(this);
 		this.handleSubmit = this.handleSubmit.bind(this);
 	}
 
-	handleChange(event) {
+	handleInput(event) {
 		let target = event.target;
-		let value = target.type == "checkbox" ? target.checked : target.value;
+		let value = target.type === "checkbox" ? target.checked : target.value;
 		this.setState({ [target.name]: value });
 	}
 
@@ -27,7 +27,7 @@ export default class RegisterForm extends Component {
 
 	render() {
 		return html`
-			<form onChange=${this.handleChange} onSubmit=${this.handleSubmit}>
+			<form onInput=${this.handleInput} onSubmit=${this.handleSubmit}>
 				<p>Your account <strong>${this.props.account}</strong> has been created, but a verification code is required to complete the registration.</p>
 
 				<p>${linkify(this.props.message)}</p>

doc/config-file.md

@@ -0,0 +1,50 @@
+# Configuration file
+
+gamja can be configured using a `config.json` file at the root. Example:
+
+```json
+{
+	"server": {
+		"url": "wss://irc.example.org",
+		"autojoin": "#gamja"
+	},
+	"oauth2": {
+		"url": "https://auth.example.org",
+		"client_id": "asdf"
+	}
+}
+```
+
+Errors while parsing the configuration file are logged in the
+[browser's web console].
+
+## IRC server
+
+The `server` object configures the IRC server.
+
+- `url` (string): WebSocket URL or path to connect to. Defaults to `/socket`.
+- `autojoin` (string or array of strings): Channel(s) to automatically join
+  after connecting.
+- `auth` (string): configure how the password UI is presented to the user. Set
+  to `mandatory` to require a password, `optional` to accept one but not
+  require it, `disabled` to never ask for a password, `external` to use SASL
+  EXTERNAL, `oauth2` to use SASL OAUTHBEARER. Defaults to `optional`.
+- `nick` (string): default nickname. If it contains a `*` character, it will be
+  replaced with a random string.
+- `autoconnect` (boolean): don't display the login UI, immediately connect to
+  the server
+- `ping` (number): interval in seconds to send PING commands. Set to 0 to
+  disable, this is the default. Enabling PINGs can have an impact on client
+  power usage and should only be enabled if necessary.
+
+## OAuth 2.0
+
+The `oauth2` object configures OAuth 2.0 authentication.
+
+- `url` (string): OAuth 2.0 server URL. The server must support OAuth 2.0
+  Authorization Server Metadata (RFC 8414) or OpenID Connect Discovery.
+- `client_id` (string): OAuth 2.0 client ID.
+- `client_secret` (string): OAuth 2.0 client secret.
+- `scope` (string): OAuth 2.0 scope.
+
+[browser's web console]: https://firefox-source-docs.mozilla.org/devtools-user/web_console/index.html

doc/setup.md

@@ -0,0 +1,68 @@
+# Setting up gamja
+
+An HTTP server must be configured to serve the gamja static files. Usually,
+the same HTTP server is used as a reverse proxy for the IRC WebSocket.
+
+## [soju]
+
+Add a WebSocket listener to soju, e.g. `listen ws+insecure://127.0.0.1:8080`.
+Then configure your reverse proxy to serve gamja files and proxy `/socket` to
+soju.
+
+## [webircgateway]
+
+Setup webircgateway to serve gamja files:
+
+```ini
+[fileserving]
+enabled = true
+webroot = /path/to/gamja
+```
+
+Then configure gamja to connect to `/webirc/websocket/` (either by setting
+`server.url` in the [configuration file], or by appending
+`?server=/webirc/websocket/` to the URL).
+
+## nginx
+
+If you use nginx as a reverse HTTP proxy, make sure to bump the default read
+timeout to a value higher than the IRC server PING interval. Example:
+
+```
+location / {
+	root /path/to/gamja;
+}
+
+location /socket {
+	proxy_pass http://127.0.0.1:8080;
+	proxy_read_timeout 600s;
+	proxy_http_version 1.1;
+	proxy_set_header Upgrade $http_upgrade;
+	proxy_set_header Connection "Upgrade";
+	proxy_set_header Host $host;
+	proxy_set_header X-Forwarded-For $remote_addr;
+	proxy_set_header X-Forwarded-Proto $scheme;
+}
+```
+
+If you are unable to configure the proxy timeout accordingly, or if your IRC
+server doesn't send PINGs, you can set the `server.ping` option in
+`config.json` (see below).
+
+## [kimchi]
+
+Setup kimchi to serve gamja files and proxy the WebSocket connection:
+
+```
+site irc.example.org {
+	file_server /path/to/gamja
+}
+site irc.example.org/socket {
+	reverse_proxy http://127.0.0.1:8080
+}
+```
+
+[soju]: https://soju.im
+[webircgateway]: https://github.com/kiwiirc/webircgateway
+[kimchi]: https://sr.ht/~emersion/kimchi/
+[configuration file]: config-file.md

doc/url-params.md

@@ -0,0 +1,15 @@
+# URL parameters
+
+gamja settings can be overridden using URL query parameters:
+
+- `server`: path or URL to the WebSocket server
+- `nick`: nickname (if the character `*` appears in the string, it will be
+  replaced with a randomly generated value)
+- `channels`: comma-separated list of channels to join (`#` needs to be escaped)
+- `open`: [IRC URL] to open
+- `debug`: if set to 1, debug mode is enabled
+
+Alternatively, the channels can be set with the URL fragment (ie, by just
+appending the channel name to the gamja URL).
+
+[IRC URL]: https://datatracker.ietf.org/doc/html/draft-butcher-irc-url-04

eslint.config.js

@@ -0,0 +1,41 @@
+import globals from "globals";
+import js from "@eslint/js";
+import stylisticJs from "@stylistic/eslint-plugin-js";
+
+export default [
+	{
+		ignores: ["dist/"],
+	},
+	js.configs.recommended,
+	{
+		languageOptions: {
+			globals: {
+				...globals.browser,
+				"process": "readonly",
+			},
+		},
+		plugins: { "@stylistic/js": stylisticJs },
+		rules: {
+			"no-case-declarations": "off",
+			"no-unused-vars": ["error", {
+				args: "none",
+				caughtErrorsIgnorePattern: "^_",
+				destructuredArrayIgnorePattern: "^_",
+			}],
+			"no-var": "error",
+			"eqeqeq": "error",
+			"no-invalid-this": "error",
+			"prefer-arrow-callback": "error",
+			"require-atomic-updates": "error",
+			"no-implicit-coercion": "warn",
+			"object-shorthand": "warn",
+			//"sort-imports": ["warn", { ignoreMemberSort: true, allowSeparatedGroups: true }],
+			//"func-style": ["warn", "declaration"],
+			"@stylistic/js/indent": ["warn", "tab"],
+			"@stylistic/js/quotes": ["warn", "double"],
+			"@stylistic/js/semi": "warn",
+			"@stylistic/js/comma-dangle": ["warn", "always-multiline"],
+			"@stylistic/js/arrow-parens": "warn",
+		},
+	},
+];

keybindings.js

@@ -1,4 +1,4 @@
-import { ReceiptType, Unread, BufferType, SERVER_BUFFER, receiptFromMessage } from "./state.js";
+import { ReceiptType, Unread, BufferType, receiptFromMessage } from "./state.js";
 
 function getSiblingBuffer(buffers, bufID, delta) {
 	let bufList = Array.from(buffers.values());
@@ -40,6 +40,8 @@ export const keybindings = [
 					});
 				});
 				return { buffers };
+			}, () => {
+				app.updateDocumentTitle();
 			});
 		},
 	},
@@ -94,6 +96,14 @@ export const keybindings = [
 			}
 		},
 	},
+	{
+		key: "k",
+		ctrlKey: true,
+		description: "Switch to a buffer",
+		execute: (app) => {
+			app.openDialog("switch");
+		},
+	},
 ];
 
 export function setup(app) {
@@ -111,9 +121,9 @@ export function setup(app) {
 			return;
 		}
 		candidates = candidates.filter((binding) => {
-			return !!binding.altKey == event.altKey && !!binding.ctrlKey == event.ctrlKey;
+			return Boolean(binding.altKey) === event.altKey && Boolean(binding.ctrlKey) === event.ctrlKey;
 		});
-		if (candidates.length != 1) {
+		if (candidates.length !== 1) {
 			return;
 		}
 		event.preventDefault();

lib/ansi.js

@@ -10,10 +10,26 @@ const COLOR_HEX = "\x04";
 const REVERSE_COLOR = "\x16";
 const RESET = "\x0F";
 
+const HEX_COLOR_LENGTH = 6;
+
 function isDigit(ch) {
 	return ch >= "0" && ch <= "9";
 }
 
+function isHexColor(text) {
+	if (text.length < HEX_COLOR_LENGTH) {
+		return false;
+	}
+	for (let i = 0; i < HEX_COLOR_LENGTH; i++) {
+		let ch = text[i].toUpperCase();
+		let ok = (ch >= "0" && ch <= "9") || (ch >= "A" && ch <= "F");
+		if (!ok) {
+			return false;
+		}
+	}
+	return true;
+}
+
 export function strip(text) {
 	let out = "";
 	for (let i = 0; i < text.length; i++) {
@@ -35,7 +51,7 @@ export function strip(text) {
 			if (isDigit(text[i + 1])) {
 				i++;
 			}
-			if (text[i + 1] == "," && isDigit(text[i + 2])) {
+			if (text[i + 1] === "," && isDigit(text[i + 2])) {
 				i += 2;
 				if (isDigit(text[i + 1])) {
 					i++;
@@ -43,7 +59,13 @@ export function strip(text) {
 			}
 			break;
 		case COLOR_HEX:
-			i += 6;
+			if (!isHexColor(text.slice(i + 1))) {
+				break;
+			}
+			i += HEX_COLOR_LENGTH;
+			if (text[i + 1] === "," && isHexColor(text.slice(i + 2))) {
+				i += 1 + HEX_COLOR_LENGTH;
+			}
 			break;
 		default:
 			out += ch;

lib/base64.js

@@ -12,26 +12,26 @@ export function encode(data) {
 		return btoa(data);
 	}
 
-	var encoder = new TextEncoder();
+	let encoder = new TextEncoder();
-	var bytes = encoder.encode(data);
+	let bytes = encoder.encode(data);
 
-	var trailing = bytes.length % 3;
+	let trailing = bytes.length % 3;
-	var out = "";
+	let out = "";
-	for (var i = 0; i < bytes.length - trailing; i += 3) {
+	for (let i = 0; i < bytes.length - trailing; i += 3) {
-		var u24 = (bytes[i] << 16) + (bytes[i + 1] << 8) + bytes[i + 2];
+		let u24 = (bytes[i] << 16) + (bytes[i + 1] << 8) + bytes[i + 2];
 		out += alphabet[(u24 >> 18) & 0x3F];
 		out += alphabet[(u24 >> 12) & 0x3F];
 		out += alphabet[(u24 >> 6) & 0x3F];
 		out += alphabet[u24 & 0x3F];
 	}
 
-	if (trailing == 1) {
+	if (trailing === 1) {
-		var u8 = bytes[bytes.length - 1];
+		let u8 = bytes[bytes.length - 1];
 		out += alphabet[u8 >> 2];
 		out += alphabet[(u8 << 4) & 0x3F];
 		out += "==";
-	} else if (trailing == 2) {
+	} else if (trailing === 2) {
-		var u16 = (bytes[bytes.length - 2] << 8) + bytes[bytes.length - 1];
+		let u16 = (bytes[bytes.length - 2] << 8) + bytes[bytes.length - 1];
 		out += alphabet[u16 >> 10];
 		out += alphabet[(u16 >> 4) & 0x3F];
 		out += alphabet[(u16 << 2) & 0x3F];

lib/client.js

@@ -1,5 +1,4 @@
 import * as irc from "./irc.js";
-import * as base64 from "./base64.js";
 
 // Static list of capabilities that are always requested when supported by the
 // server
@@ -10,6 +9,7 @@ const permanentCaps = [
 	"chghost",
 	"echo-message",
 	"extended-join",
+	"extended-monitor",
 	"invite-notify",
 	"labeled-response",
 	"message-tags",
@@ -21,9 +21,9 @@ const permanentCaps = [
 	"draft/account-registration",
 	"draft/chathistory",
 	"draft/extended-monitor",
+	"draft/read-marker",
 
 	"soju.im/bouncer-networks",
-	"soju.im/read",
 ];
 
 const RECONNECT_MIN_DELAY_MSEC = 10 * 1000; // 10s
@@ -48,6 +48,8 @@ const WHOX_FIELDS = {
 	"realname": "r",
 };
 
+const FALLBACK_SERVER_PREFIX = { name: "*" };
+
 let lastLabel = 0;
 let lastWhoxToken = 0;
 
@@ -72,8 +74,8 @@ class IRCError extends Error {
 class Backoff {
 	n = 0;
 
-	constructor(min, max) {
+	constructor(base, max) {
-		this.min = min;
+		this.base = base;
 		this.max = max;
 	}
 
@@ -84,10 +86,10 @@ class Backoff {
 	next() {
 		if (this.n === 0) {
 			this.n = 1;
-			return this.min;
+			return 0;
 		}
 
-		let dur = this.n * this.min;
+		let dur = this.n * this.base;
 		if (dur > this.max) {
 			dur = this.max;
 		} else {
@@ -107,7 +109,7 @@ export default class Client extends EventTarget {
 	};
 
 	status = Client.Status.DISCONNECTED;
-	serverPrefix = { name: "*" };
+	serverPrefix = FALLBACK_SERVER_PREFIX;
 	nick = null;
 	supportsCap = false;
 	caps = new irc.CapRegistry();
@@ -122,6 +124,7 @@ export default class Client extends EventTarget {
 		pass: null,
 		saslPlain: null,
 		saslExternal: false,
+		saslOauthBearer: null,
 		bouncerNetwork: null,
 		ping: 0,
 		eventPlayback: true,
@@ -131,6 +134,7 @@ export default class Client extends EventTarget {
 	autoReconnect = true;
 	reconnectTimeoutID = null;
 	reconnectBackoff = new Backoff(RECONNECT_MIN_DELAY_MSEC, RECONNECT_MAX_DELAY_MSEC);
+	lastReconnectDate = new Date(0);
 	pingIntervalID = null;
 	pendingCmds = {
 		WHO: Promise.resolve(null),
@@ -144,6 +148,8 @@ export default class Client extends EventTarget {
 	constructor(params) {
 		super();
 
+		this.handleOnline = this.handleOnline.bind(this);
+
 		this.params = { ...this.params, ...params };
 
 		this.reconnect();
@@ -156,6 +162,7 @@ export default class Client extends EventTarget {
 
 		console.log("Connecting to " + this.params.url);
 		this.setStatus(Client.Status.CONNECTING);
+		this.lastReconnectDate = new Date();
 
 		try {
 			this.ws = new WebSocket(this.params.url);
@@ -188,7 +195,7 @@ export default class Client extends EventTarget {
 			this.ws = null;
 			this.setStatus(Client.Status.DISCONNECTED);
 			this.nick = null;
-			this.serverPrefix = null;
+			this.serverPrefix = FALLBACK_SERVER_PREFIX;
 			this.caps = new irc.CapRegistry();
 			this.batches = new Map();
 			Object.keys(this.pendingCmds).forEach((k) => {
@@ -198,15 +205,16 @@ export default class Client extends EventTarget {
 			this.monitored = new irc.CaseMapMap(null, irc.CaseMapping.RFC1459);
 
 			if (this.autoReconnect) {
+				window.addEventListener("online", this.handleOnline);
+
 				if (!navigator.onLine) {
 					console.info("Waiting for network to go back online");
-					const handleOnline = () => {
-						window.removeEventListener("online", handleOnline);
-						this.reconnect();
-					};
-					window.addEventListener("online", handleOnline);
 				} else {
 					let delay = this.reconnectBackoff.next();
+					let sinceLastReconnect = new Date().getTime() - this.lastReconnectDate.getTime();
+					if (sinceLastReconnect < RECONNECT_MIN_DELAY_MSEC) {
+						delay = Math.max(delay, RECONNECT_MIN_DELAY_MSEC);
+					}
 					console.info("Reconnecting to server in " + (delay / 1000) + " seconds");
 					clearTimeout(this.reconnectTimeoutID);
 					this.reconnectTimeoutID = setTimeout(() => {
@@ -223,6 +231,8 @@ export default class Client extends EventTarget {
 		clearTimeout(this.reconnectTimeoutID);
 		this.reconnectTimeoutID = null;
 
+		window.removeEventListener("online", this.handleOnline);
+
 		this.setPingInterval(0);
 
 		if (this.ws) {
@@ -242,6 +252,13 @@ export default class Client extends EventTarget {
 		this.dispatchEvent(new CustomEvent("error", { detail: err }));
 	}
 
+	handleOnline() {
+		window.removeEventListener("online", this.handleOnline);
+		if (this.autoReconnect && this.status === Client.Status.DISCONNECTED) {
+			this.reconnect();
+		}
+	}
+
 	handleOpen() {
 		console.log("Connection opened");
 		this.setStatus(Client.Status.REGISTERING);
@@ -283,16 +300,21 @@ export default class Client extends EventTarget {
 			return;
 		}
 
-		let msg = irc.parseMessage(event.data);
+		let raw = event.data;
 		if (this.debug) {
-			console.debug("Received:", msg);
+			console.debug("Received:", raw);
 		}
 
+		let msg = irc.parseMessage(raw);
+
 		// If the prefix is missing, assume it's coming from the server on the
 		// other end of the connection
 		if (!msg.prefix) {
 			msg.prefix = this.serverPrefix;
 		}
+		if (!msg.tags) {
+			msg.tags = {};
+		}
 
 		let msgBatch = null;
 		if (msg.tags["batch"]) {
@@ -303,7 +325,6 @@ export default class Client extends EventTarget {
 		}
 
 		let deleteBatch = null;
-		let k;
 		switch (msg.command) {
 		case irc.RPL_WELCOME:
 			if (this.params.saslPlain && !this.supportsCap) {
@@ -347,7 +368,7 @@ export default class Client extends EventTarget {
 		case "AUTHENTICATE":
 			// Both PLAIN and EXTERNAL expect an empty challenge
 			let challengeStr = msg.params[0];
-			if (challengeStr != "+") {
+			if (challengeStr !== "+") {
 				this.dispatchError(new Error("Expected an empty challenge, got: " + challengeStr));
 				this.send({ command: "AUTHENTICATE", params: ["*"] });
 			}
@@ -418,7 +439,7 @@ export default class Client extends EventTarget {
 		case irc.ERR_NOPERMFORHOST:
 		case irc.ERR_YOUREBANNEDCREEP:
 			this.dispatchError(new IRCError(msg));
-			if (this.status != Client.Status.REGISTERED) {
+			if (this.status !== Client.Status.REGISTERED) {
 				this.disconnect();
 			}
 			break;
@@ -426,7 +447,6 @@ export default class Client extends EventTarget {
 			if (this.status === Client.Status.REGISTERED) {
 				break;
 			}
-			let reason = msg.params[msg.params.length - 1];
 			if (msg.params[0] === "BOUNCER" && msg.params[2] === "BIND") {
 				this.dispatchError(new Error("Failed to bind to bouncer network", {
 					cause: new IRCError(msg),
@@ -458,14 +478,16 @@ export default class Client extends EventTarget {
 		console.log(`Starting SASL ${mechanism} authentication`);
 
 		// Send the first SASL response immediately to avoid a roundtrip
-		let initialResp = null;
+		let initialResp;
 		switch (mechanism) {
 		case "PLAIN":
-			let respStr = base64.encode("\0" + params.username + "\0" + params.password);
+			initialResp = "\0" + params.username + "\0" + params.password;
-			initialResp = { command: "AUTHENTICATE", params: [respStr] };
 			break;
 		case "EXTERNAL":
-			initialResp = { command: "AUTHENTICATE", params: [base64.encode("")] };
+			initialResp = "";
+			break;
+		case "OAUTHBEARER":
+			initialResp = "n,,\x01auth=Bearer " + params.token + "\x01\x01";
 			break;
 		default:
 			throw new Error(`Unknown authentication mechanism '${mechanism}'`);
@@ -484,7 +506,9 @@ export default class Client extends EventTarget {
 				throw new IRCError(msg);
 			}
 		});
-		this.send(initialResp);
+		for (let msg of irc.generateAuthenticateMessages(initialResp)) {
+			this.send(msg);
+		}
 		return promise;
 	}
 
@@ -518,16 +542,19 @@ export default class Client extends EventTarget {
 			return this.roundtrip(msg, (msg) => {
 				switch (msg.command) {
 				case irc.RPL_WHOREPLY:
+					msg.internal = true;
 					l.push(this.parseWhoReply(msg));
 					break;
 				case irc.RPL_WHOSPCRPL:
-					if (msg.params.length !== fields.length || msg.params[1] !== token) {
+					if (msg.params.length !== fields.length + 1 || msg.params[1] !== token) {
 						break;
 					}
+					msg.internal = true;
 					l.push(this.parseWhoReply(msg));
 					break;
 				case irc.RPL_ENDOFWHO:
 					if (msg.params[1] === mask) {
+						msg.internal = true;
 						return l;
 					}
 					break;
@@ -643,7 +670,7 @@ export default class Client extends EventTarget {
 		switch (subCmd) {
 		case "LS":
 			this.supportsCap = true;
-			if (args[0] == "*") {
+			if (args[0] === "*") {
 				break;
 			}
 
@@ -658,6 +685,8 @@ export default class Client extends EventTarget {
 						promise = this.authenticate("PLAIN", this.params.saslPlain);
 					} else if (this.params.saslExternal) {
 						promise = this.authenticate("EXTERNAL");
+					} else if (this.params.saslOauthBearer) {
+						promise = this.authenticate("OAUTHBEARER", this.params.saslOauthBearer);
 					}
 					(promise || Promise.resolve()).catch((err) => {
 						this.dispatchError(err);
@@ -695,9 +724,10 @@ export default class Client extends EventTarget {
 		if (!this.ws) {
 			throw new Error("Failed to send IRC message " + msg.command + ": socket is closed");
 		}
-		this.ws.send(irc.formatMessage(msg));
+		let raw = irc.formatMessage(msg);
+		this.ws.send(raw);
 		if (this.debug) {
-			console.debug("Sent:", msg);
+			console.debug("Sent:", raw);
 		}
 	}
 
@@ -712,7 +742,7 @@ export default class Client extends EventTarget {
 	}
 
 	isMyNick(nick) {
-		return this.cm(nick) == this.cm(this.nick);
+		return this.cm(nick) === this.cm(this.nick);
 	}
 
 	isChannel(name) {
@@ -720,6 +750,11 @@ export default class Client extends EventTarget {
 		return chanTypes.indexOf(name[0]) >= 0;
 	}
 
+	isNick(name) {
+		// A dollar sign is used for server-wide broadcasts
+		return !this.isServer(name) && !this.isChannel(name) && !name.startsWith("$");
+	}
+
 	setPingInterval(sec) {
 		clearInterval(this.pingIntervalID);
 		this.pingIntervalID = null;
@@ -754,7 +789,7 @@ export default class Client extends EventTarget {
 				let msg = event.detail.message;
 
 				let msgLabel = irc.getMessageLabel(msg);
-				if (msgLabel && msgLabel != label) {
+				if (msgLabel && msgLabel !== label) {
 					return;
 				}
 
@@ -803,7 +838,9 @@ export default class Client extends EventTarget {
 				this.removeEventListener("status", handleStatus);
 			};
 
-			this.addEventListener("message", handleMessage);
+			// Turn on capture to handle messages before external users and
+			// have the opportunity to set the "internal" flag
+			this.addEventListener("message", handleMessage, { capture: true });
 			this.addEventListener("status", handleStatus);
 			this.send(msg);
 		});
@@ -816,7 +853,7 @@ export default class Client extends EventTarget {
 		}
 		let msg = {
 			command: "JOIN",
-			params: params,
+			params,
 		};
 		return this.roundtrip(msg, (msg) => {
 			switch (msg.command) {
@@ -842,7 +879,6 @@ export default class Client extends EventTarget {
 	fetchBatch(msg, batchType) {
 		let batchName = null;
 		let messages = [];
-		let cmd = msg.command;
 		return this.roundtrip(msg, (msg) => {
 			if (batchName) {
 				let batch = msg.batch;
@@ -886,53 +922,48 @@ export default class Client extends EventTarget {
 	}
 
 	/* Fetch one page of history before the given date. */
-	fetchHistoryBefore(target, before, limit) {
+	async fetchHistoryBefore(target, before, limit) {
 		let max = Math.min(limit, this.isupport.chatHistory());
 		let params = ["BEFORE", target, "timestamp=" + before, max];
-		return this.roundtripChatHistory(params).then((messages) => {
+		let messages = await this.roundtripChatHistory(params);
 		return { messages, more: messages.length >= max };
-		});
 	}
 
 	/* Fetch history in ascending order. */
-	fetchHistoryBetween(target, after, before, limit) {
+	async fetchHistoryBetween(target, after, before, limit) {
 		let max = Math.min(limit, this.isupport.chatHistory());
 		let params = ["AFTER", target, "timestamp=" + after.time, max];
-		return this.roundtripChatHistory(params).then((messages) => {
+		let messages = await this.roundtripChatHistory(params);
 		limit -= messages.length;
 		if (limit <= 0) {
 			throw new Error("Cannot fetch all chat history: too many messages");
 		}
-			if (messages.length == max) {
+		if (messages.length >= max) {
 			// There are still more messages to fetch
-				after.time = messages[messages.length - 1].tags.time;
+			after = { ...after, time: messages[messages.length - 1].tags.time };
-				return this.fetchHistoryBetween(target, after, before, limit);
+			return await this.fetchHistoryBetween(target, after, before, limit);
 		}
 		return { messages };
-		});
 	}
 
-	fetchHistoryTargets(t1, t2) {
+	async fetchHistoryTargets(t1, t2) {
 		let msg = {
 			command: "CHATHISTORY",
 			params: ["TARGETS", "timestamp=" + t1, "timestamp=" + t2, 1000],
 		};
-		return this.fetchBatch(msg, "draft/chathistory-targets").then((batch) => {
+		let batch = await this.fetchBatch(msg, "draft/chathistory-targets");
 		return batch.messages.map((msg) => {
-				if (msg.command != "CHATHISTORY" || msg.params[0] != "TARGETS") {
+			console.assert(msg.command === "CHATHISTORY" && msg.params[0] === "TARGETS");
-					throw new Error("Cannot fetch chat history targets: unexpected message " + msg);
-				}
 			return {
 				name: msg.params[1],
 				latestMessage: msg.params[2],
 			};
 		});
-		});
 	}
 
-	listBouncerNetworks() {
+	async listBouncerNetworks() {
 		let req = { command: "BOUNCER", params: ["LISTNETWORKS"] };
-		return this.fetchBatch(req, "soju.im/bouncer-networks").then((batch) => {
+		let batch = await this.fetchBatch(req, "soju.im/bouncer-networks");
 		let networks = new Map();
 		for (let msg of batch.messages) {
 			console.assert(msg.command === "BOUNCER" && msg.params[0] === "NETWORK");
@@ -941,7 +972,6 @@ export default class Client extends EventTarget {
 			networks.set(id, params);
 		}
 		return networks;
-		});
 	}
 
 	monitor(target) {
@@ -1015,4 +1045,22 @@ export default class Client extends EventTarget {
 			return { message: msg.params[2] };
 		});
 	}
+
+	supportsReadMarker() {
+		return this.caps.enabled.has("draft/read-marker");
+	}
+
+	fetchReadMarker(target) {
+		this.send({
+			command: "MARKREAD",
+			params: [target],
+		});
+	}
+
+	setReadMarker(target, t) {
+		this.send({
+			command: "MARKREAD",
+			params: [target, "timestamp="+t],
+		});
+	}
 }

lib/index.js

@@ -4,5 +4,5 @@ import { h } from "../node_modules/preact/dist/preact.module.js";
 import htm from "../node_modules/htm/dist/htm.module.js";
 export const html = htm.bind(h);
 
-import * as linkifyjs from "../node_modules/linkifyjs/dist/linkify.module.js";
+import * as linkifyjs from "../node_modules/linkifyjs/dist/linkify.es.js";
 export { linkifyjs };

lib/irc.js

@@ -1,3 +1,5 @@
+import * as base64 from "./base64.js";
+
 // RFC 1459
 export const RPL_WELCOME = "001";
 export const RPL_YOURHOST = "002";
@@ -52,6 +54,7 @@ export const ERR_BADCHANNELKEY = "475";
 // RFC 2812
 export const ERR_UNAVAILRESOURCE = "437";
 // Other
+export const RPL_CHANNEL_URL = "328";
 export const RPL_CREATIONTIME = "329";
 export const RPL_QUIETLIST = "728";
 export const RPL_ENDOFQUIETLIST = "729";
@@ -71,8 +74,24 @@ export const ERR_SASLTOOLONG = "905";
 export const ERR_SASLABORTED = "906";
 export const ERR_SASLALREADY = "907";
 
-export const STD_MEMBERSHIPS = "~&@%+";
+export const STD_MEMBERSHIP_NAMES = {
-export const STD_CHANTYPES = "#&+!";
+	"~": "owner",
+	"&": "admin",
+	"@": "operator",
+	"%": "halfop",
+	"+": "voice",
+};
+
+export const STD_MEMBERSHIP_MODES = {
+	"~": "q",
+	"&": "a",
+	"@": "o",
+	"%": "h",
+	"+": "v",
+};
+
+const STD_MEMBERSHIPS = "~&@%+";
+const STD_CHANTYPES = "#&+!";
 
 const tagEscapeMap = {
 	";": "\\:",
@@ -101,10 +120,10 @@ export function parseTags(s) {
 		let parts = s.split("=", 2);
 		let k = parts[0];
 		let v = null;
-		if (parts.length == 2) {
+		if (parts.length === 2) {
 			v = unescapeTag(parts[1]);
 			if (v.endsWith("\\")) {
-				v = v.slice(0, v.length - 1)
+				v = v.slice(0, v.length - 1);
 			}
 		}
 		tags[k] = v;
@@ -126,12 +145,6 @@ export function formatTags(tags) {
 }
 
 export function parsePrefix(s) {
-	let prefix = {
-		name: null,
-		user: null,
-		host: null,
-	};
-
 	let host = null;
 	let i = s.indexOf("@");
 	if (i > 0) {
@@ -228,7 +241,7 @@ export function formatMessage(msg) {
 	s += msg.command;
 	if (msg.params && msg.params.length > 0) {
 		for (let i = 0; i < msg.params.length - 1; i++) {
-			s += " " + msg.params[i]
+			s += " " + msg.params[i];
 		}
 
 		let last = String(msg.params[msg.params.length - 1]);
@@ -259,10 +272,11 @@ export function parseTargetPrefix(s, allowedPrefixes = STD_MEMBERSHIPS) {
 const alphaNum = (() => {
 	try {
 		return new RegExp(/^[\p{L}0-9]$/, "u");
-	} catch (e) {
+	} catch (_e) {
 		return new RegExp(/^[a-zA-Z0-9]$/, "u");
 	}
 })();
+const space = new RegExp(/^\s$/);
 
 function isWordBoundary(ch) {
 	switch (ch) {
@@ -275,14 +289,39 @@ function isWordBoundary(ch) {
 	}
 }
 
+function isURIPrefix(text) {
+	for (let i = text.length - 1; i >= 0; i--) {
+		if (space.test(text[i])) {
+			text = text.slice(i);
+			break;
+		}
+	}
+
+	let i = text.indexOf("://");
+	if (i <= 0) {
+		return false;
+	}
+
+	// See RFC 3986 section 3
+	let ch = text[i - 1];
+	switch (ch) {
+	case "+":
+	case "-":
+	case ".":
+		return true;
+	default:
+		return alphaNum.test(ch);
+	}
+}
+
 export function isHighlight(msg, nick, cm) {
-	if (msg.command != "PRIVMSG" && msg.command != "NOTICE") {
+	if (msg.command !== "PRIVMSG" && msg.command !== "NOTICE") {
 		return false;
 	}
 
 	nick = cm(nick);
 
-	if (msg.prefix && cm(msg.prefix.name) == nick) {
+	if (msg.prefix && cm(msg.prefix.name) === nick) {
 		return false; // Our own messages aren't highlights
 	}
 
@@ -301,7 +340,7 @@ export function isHighlight(msg, nick, cm) {
 		if (i + nick.length < text.length) {
 			right = text[i + nick.length];
 		}
-		if (isWordBoundary(left) && isWordBoundary(right)) {
+		if (isWordBoundary(left) && isWordBoundary(right) && !isURIPrefix(text.slice(0, i))) {
 			return true;
 		}
 
@@ -310,7 +349,7 @@ export function isHighlight(msg, nick, cm) {
 }
 
 export function isServerBroadcast(msg) {
-	if (msg.command != "PRIVMSG" && msg.command != "NOTICE") {
+	if (msg.command !== "PRIVMSG" && msg.command !== "NOTICE") {
 		return false;
 	}
 	return msg.params[0].startsWith("$");
@@ -348,7 +387,7 @@ export function formatDate(date) {
 }
 
 export function parseCTCP(msg) {
-	if (msg.command != "PRIVMSG" && msg.command != "NOTICE") {
+	if (msg.command !== "PRIVMSG" && msg.command !== "NOTICE") {
 		return null;
 	}
 
@@ -468,7 +507,7 @@ export class Isupport {
 			return stdChanModes;
 		}
 		let chanModes = this.raw.get("CHANMODES").split(",");
-		if (chanModes.length != 4) {
+		if (chanModes.length !== 4) {
 			console.error("Invalid CHANMODES: ", this.raw.get("CHANMODES"));
 			return stdChanModes;
 		}
@@ -478,6 +517,40 @@ export class Isupport {
 	bot() {
 		return this.raw.get("BOT");
 	}
+
+	userLen() {
+		if (!this.raw.has("USERLEN")) {
+			return 20;
+		}
+		return parseInt(this.raw.get("USERLEN"), 10);
+	}
+
+	hostLen() {
+		if (!this.raw.has("HOSTLEN")) {
+			return 63;
+		}
+		return parseInt(this.raw.get("HOSTLEN"), 10);
+	}
+
+	lineLen() {
+		if (!this.raw.has("LINELEN")) {
+			return 512;
+		}
+		return parseInt(this.raw.get("LINELEN"), 10);
+	}
+
+	filehost() {
+		return this.raw.get("SOJU.IM/FILEHOST");
+	}
+}
+
+export function getMaxPrivmsgLen(isupport, nick, target) {
+	let user = "_".repeat(isupport.userLen());
+	let host = "_".repeat(isupport.hostLen());
+	let prefix = { name: nick, user, host };
+	let msg = { prefix, command: "PRIVMSG", params: [target, ""] };
+	let raw = formatMessage(msg) + "\r\n";
+	return isupport.lineLen() - raw.length;
 }
 
 export const CaseMapping = {
@@ -499,13 +572,13 @@ export const CaseMapping = {
 			let ch = str[i];
 			if ("A" <= ch && ch <= "Z") {
 				ch = ch.toLowerCase();
-			} else if (ch == "{") {
+			} else if (ch === "{") {
 				ch = "[";
-			} else if (ch == "}") {
+			} else if (ch === "}") {
 				ch = "]";
-			} else if (ch == "\\") {
+			} else if (ch === "\\") {
 				ch = "|";
-			} else if (ch == "~") {
+			} else if (ch === "~") {
 				ch = "^";
 			}
 			out += ch;
@@ -519,11 +592,11 @@ export const CaseMapping = {
 			let ch = str[i];
 			if ("A" <= ch && ch <= "Z") {
 				ch = ch.toLowerCase();
-			} else if (ch == "{") {
+			} else if (ch === "{") {
 				ch = "[";
-			} else if (ch == "}") {
+			} else if (ch === "}") {
 				ch = "]";
-			} else if (ch == "\\") {
+			} else if (ch === "\\") {
 				ch = "|";
 			}
 			out += ch;
@@ -808,6 +881,17 @@ export function parseURL(str) {
 	return { host, enttype, entity };
 }
 
+export function formatURL({ host, enttype, entity } = {}) {
+	host = host || "";
+	entity = entity || "";
+
+	let s = "irc://" + host + "/" + encodeURIComponent(entity);
+	if (enttype) {
+		s += ",is" + enttype;
+	}
+	return s;
+}
+
 export class CapRegistry {
 	available = new Map();
 	enabled = new Set();
@@ -870,3 +954,19 @@ export class CapRegistry {
 		return { command: "CAP", params: ["REQ", l.join(" ")] };
 	}
 }
+
+const maxSASLLength = 400;
+
+export function generateAuthenticateMessages(payload) {
+	let encoded = base64.encode(payload);
+
+	// <= instead of < because we need to send a final empty response if the
+	// last chunk is exactly 400 bytes long
+	let msgs = [];
+	for (let i = 0; i <= encoded.length; i += maxSASLLength) {
+		let chunk = encoded.substring(i, i + maxSASLLength);
+		msgs.push({ command: "AUTHENTICATE", params: [chunk || "+"] });
+	}
+
+	return msgs;
+}

lib/linkify.js

@@ -4,36 +4,33 @@ linkifyjs.options.defaults.defaultProtocol = "https";
 
 linkifyjs.registerCustomProtocol("irc");
 linkifyjs.registerCustomProtocol("ircs");
+linkifyjs.registerCustomProtocol("geo", true);
 
-linkifyjs.registerPlugin("ircChannel", ({ scanner, parser, utils }) => {
+const IRCChannelToken = linkifyjs.createTokenClass("ircChannel", {
-	const { POUND, DOMAIN, TLD, LOCALHOST, UNDERSCORE, DOT, HYPHEN } = scanner.tokens;
-	const START_STATE = parser.start;
-
-	const Channel = utils.createTokenClass("ircChannel", {
 	isLink: true,
 	toHref() {
-			return "irc:///" + this.toString();
+		return "irc:///" + this.v;
 	},
 });
 
-	const HASH_STATE = START_STATE.tt(POUND);
+linkifyjs.registerPlugin("ircChannel", ({ scanner, parser }) => {
+	const { POUND, UNDERSCORE, DOT, HYPHEN } = scanner.tokens;
+	const { alphanumeric } = scanner.tokens.groups;
 
-	const CHAN_STATE = HASH_STATE.tt(DOMAIN, Channel);
+	const Prefix = parser.start.tt(POUND);
-	HASH_STATE.tt(TLD, CHAN_STATE);
+	const Channel = new linkifyjs.State(IRCChannelToken);
-	HASH_STATE.tt(LOCALHOST, CHAN_STATE);
+	const Divider = Channel.tt(DOT);
-	HASH_STATE.tt(POUND, CHAN_STATE);
 
-	CHAN_STATE.tt(UNDERSCORE, CHAN_STATE);
+	Prefix.ta(alphanumeric, Channel);
-	CHAN_STATE.tt(DOMAIN, CHAN_STATE);
+	Prefix.tt(POUND, Channel);
-	CHAN_STATE.tt(TLD, CHAN_STATE);
+	Prefix.tt(UNDERSCORE, Channel);
-	CHAN_STATE.tt(LOCALHOST, CHAN_STATE);
+	Prefix.tt(DOT, Divider);
-
+	Prefix.tt(HYPHEN, Channel);
-	const CHAN_DIVIDER_STATE = CHAN_STATE.tt(DOT);
+	Channel.ta(alphanumeric, Channel);
-
+	Channel.tt(POUND, Channel);
-	CHAN_DIVIDER_STATE.tt(UNDERSCORE, CHAN_STATE);
+	Channel.tt(UNDERSCORE, Channel);
-	CHAN_DIVIDER_STATE.tt(DOMAIN, CHAN_STATE);
+	Channel.tt(HYPHEN, Channel);
-	CHAN_DIVIDER_STATE.tt(TLD, CHAN_STATE);
+	Divider.ta(alphanumeric, Channel);
-	CHAN_DIVIDER_STATE.tt(LOCALHOST, CHAN_STATE);
 });
 
 export default function linkify(text, onClick) {
@@ -46,7 +43,7 @@ export default function linkify(text, onClick) {
 			return;
 		}
 
-		const prefix = text.substring(last, match.start)
+		const prefix = text.substring(last, match.start);
 		children.push(prefix);
 
 		children.push(html`
@@ -61,7 +58,7 @@ export default function linkify(text, onClick) {
 		last = match.end;
 	});
 
-	const suffix = text.substring(last)
+	const suffix = text.substring(last);
 	children.push(suffix);
 
 	return children;

lib/oauth2.js

@@ -0,0 +1,109 @@
+function formatQueryString(params) {
+	let l = [];
+	for (let k in params) {
+		l.push(encodeURIComponent(k) + "=" + encodeURIComponent(params[k]));
+	}
+	return l.join("&");
+}
+
+export async function fetchServerMetadata(url) {
+	// TODO: handle path in config.oauth2.url
+	let resp;
+	try {
+		resp = await fetch(url + "/.well-known/oauth-authorization-server");
+		if (!resp.ok) {
+			throw new Error(`HTTP error: ${resp.status} ${resp.statusText}`);
+		}
+	} catch (err) {
+		console.warn("OAuth 2.0 server doesn't support Authorization Server Metadata (retrying with OpenID Connect Discovery): ", err);
+		resp = await fetch(url + "/.well-known/openid-configuration");
+		if (!resp.ok) {
+			throw new Error(`HTTP error: ${resp.status} ${resp.statusText}`);
+		}
+	}
+
+	let data = await resp.json();
+	if (!data.issuer) {
+		throw new Error("Missing issuer in response");
+	}
+	if (!data.authorization_endpoint) {
+		throw new Error("Missing authorization_endpoint in response");
+	}
+	if (!data.token_endpoint) {
+		throw new Error("Missing authorization_endpoint in response");
+	}
+	if (!data.response_types_supported.includes("code")) {
+		throw new Error("Server doesn't support authorization code response type");
+	}
+	return data;
+}
+
+export function redirectAuthorize({ serverMetadata, clientId, redirectUri, scope }) {
+	// TODO: move fragment to query string in redirect_uri
+	// TODO: use the state param to prevent cross-site request
+	// forgery
+	let params = {
+		response_type: "code",
+		client_id: clientId,
+		redirect_uri: redirectUri,
+	};
+	if (scope) {
+		params.scope = scope;
+	}
+	window.location.assign(serverMetadata.authorization_endpoint + "?" + formatQueryString(params));
+}
+
+function buildPostHeaders(clientId, clientSecret) {
+	let headers = {
+		"Content-Type": "application/x-www-form-urlencoded",
+		"Accept": "application/json",
+	};
+	if (clientSecret) {
+		headers["Authorization"] = "Basic " + btoa(encodeURIComponent(clientId) + ":" + encodeURIComponent(clientSecret));
+	}
+	return headers;
+}
+
+export async function exchangeCode({ serverMetadata, redirectUri, code, clientId, clientSecret }) {
+	let data = {
+		grant_type: "authorization_code",
+		code,
+		redirect_uri: redirectUri,
+	};
+	if (!clientSecret) {
+		data.client_id = clientId;
+	}
+
+	let resp = await fetch(serverMetadata.token_endpoint, {
+		method: "POST",
+		headers: buildPostHeaders(clientId, clientSecret),
+		body: formatQueryString(data),
+	});
+
+	if (!resp.ok) {
+		throw new Error(`HTTP error: ${resp.status} ${resp.statusText}`);
+	}
+	data = await resp.json();
+
+	if (data.error) {
+		throw new Error("Authentication failed: " + (data.error_description || data.error));
+	}
+
+	return data;
+}
+
+export async function introspectToken({ serverMetadata, token, clientId, clientSecret }) {
+	let resp = await fetch(serverMetadata.introspection_endpoint, {
+		method: "POST",
+		headers: buildPostHeaders(clientId, clientSecret),
+		body: formatQueryString({ token }),
+	});
+	if (!resp.ok) {
+		throw new Error(`HTTP error: ${resp.status} ${resp.statusText}`);
+	}
+	let data = await resp.json();
+	if (!data.active) {
+		throw new Error("Expired token");
+	}
+	return data;
+}

package.json

@@ -3,12 +3,16 @@
   "type": "module",
   "dependencies": {
     "htm": "^3.0.4",
-    "linkifyjs": "^3.0.2",
+    "linkifyjs": "^4.1.3",
-    "preact": "^10.5.9"
+    "preact": "10.17.1"
   },
   "devDependencies": {
+    "@eslint/js": "^9.11.1",
     "@parcel/packager-raw-url": "^2.0.0",
     "@parcel/transformer-webmanifest": "^2.0.0",
+    "@stylistic/eslint-plugin-js": "^2.8.0",
+    "eslint": "^9.11.1",
+    "globals": "^15.9.0",
     "node-static": "^0.7.11",
     "parcel": "^2.0.0",
     "split": "^1.0.1",
@@ -16,12 +20,14 @@
   },
   "scripts": {
     "start": "node ./dev-server.js",
-    "build": "parcel build"
+    "build": "parcel build",
+    "lint": "eslint"
   },
   "private": true,
   "targets": {
     "default": {
       "source": "index.html",
+      "context": "browser",
       "publicUrl": "."
     }
   },

state.js

@@ -43,22 +43,14 @@ export const BufferEventsDisplayMode = {
 
 export const SettingsContext = createContext("settings");
 
-export function getNickURL(nick) {
-	return "irc:///" + encodeURIComponent(nick) + ",isuser";
-}
-
-export function getChannelURL(channel) {
-	return "irc:///" + encodeURIComponent(channel);
-}
-
 export function getBufferURL(buf) {
 	switch (buf.type) {
 	case BufferType.SERVER:
-		return "irc:///";
+		return irc.formatURL();
 	case BufferType.CHANNEL:
-		return getChannelURL(buf.name);
+		return irc.formatURL({ entity: buf.name });
 	case BufferType.NICK:
-		return getNickURL(buf.name);
+		return irc.formatURL({ entity: buf.name, enttype: "user" });
 	}
 	throw new Error("Unknown buffer type: " + buf.type);
 }
@@ -144,22 +136,45 @@ function updateState(state, updater) {
 }
 
 function isServerBuffer(buf) {
-	return buf.type == BufferType.SERVER;
+	return buf.type === BufferType.SERVER;
+}
+
+function isChannelBuffer(buf) {
+	return buf.type === BufferType.CHANNEL;
+}
+
+function trimStartCharacter(s, c) {
+	let i = 0;
+	for (; i < s.length; ++i) {
+		if (s[i] !== c) {
+			break;
+		}
+	}
+	return s.substring(i);
 }
 
 /* Returns 1 if a should appear after b, -1 if a should appear before b, or
  * 0 otherwise. */
 function compareBuffers(a, b) {
-	if (a.server != b.server) {
+	if (a.server !== b.server) {
 		return a.server > b.server ? 1 : -1;
 	}
-	if (isServerBuffer(a) != isServerBuffer(b)) {
+	if (isServerBuffer(a) !== isServerBuffer(b)) {
 		return isServerBuffer(b) ? 1 : -1;
 	}
-	if (a.name != b.name) {
+
-		return a.name > b.name ? 1 : -1;
+	if (isChannelBuffer(a) && isChannelBuffer(b)) {
+		const strippedA = trimStartCharacter(a.name, a.name[0]);
+		const strippedB = trimStartCharacter(b.name, b.name[0]);
+		const cmp = strippedA.localeCompare(strippedB);
+
+		if (cmp !== 0) {
+			return cmp;
 		}
-	return 0;
+		// if they are the same when stripped, fallthough to default logic
+	}
+
+	return a.name.localeCompare(b.name);
 }
 
 function updateMembership(membership, letter, add, client) {
@@ -186,7 +201,7 @@ function updateMembership(membership, letter, add, client) {
 
 /* Insert a message in an immutable list of sorted messages. */
 function insertMessage(list, msg) {
-	if (list.length == 0) {
+	if (list.length === 0) {
 		return [msg];
 	} else if (!irc.findBatchByType(msg, "chathistory") || list[list.length - 1].tags.time <= msg.tags.time) {
 		return list.concat(msg);
@@ -326,7 +341,7 @@ export const State = {
 		let id = lastBufferID;
 
 		let type;
-		if (name == SERVER_BUFFER) {
+		if (name === SERVER_BUFFER) {
 			type = BufferType.SERVER;
 		} else if (client.isChannel(name)) {
 			type = BufferType.CHANNEL;
@@ -343,6 +358,7 @@ export const State = {
 			serverInfo: null, // if server
 			joined: false, // if channel
 			topic: null, // if channel
+			hasInitialWho: false, // if channel
 			members: new irc.CaseMapMap(null, client.cm), // if channel
 			messages: [],
 			unread: Unread.NONE,
@@ -401,7 +417,7 @@ export const State = {
 		case irc.RPL_ISUPPORT:
 			buffers = new Map(state.buffers);
 			state.buffers.forEach((buf) => {
-				if (buf.server != serverID) {
+				if (buf.server !== serverID) {
 					return;
 				}
 				let members = new irc.CaseMapMap(buf.members, client.cm);
@@ -459,10 +475,18 @@ export const State = {
 				});
 				return { members };
 			});
-			break;
+		case irc.RPL_ENDOFWHO:
-		case irc.RPL_WHOREPLY:
+			target = msg.params[1];
-		case irc.RPL_WHOSPCRPL:
+			if (msg.list.length === 0 && !client.isChannel(target) && target.indexOf("*") < 0) {
-			who = client.parseWhoReply(msg);
+				// Not a channel nor a mask, likely a nick
+				return updateUser(target, (user) => {
+					return { offline: true };
+				});
+			} else {
+				return updateServer((server) => {
+					let users = new irc.CaseMapMap(server.users);
+					for (let reply of msg.list) {
+						let who = client.parseWhoReply(reply);
 
 						if (who.flags !== undefined) {
 							who.away = who.flags.indexOf("G") >= 0; // H for here, G for gone
@@ -476,21 +500,16 @@ export const State = {
 
 						who.offline = false;
 
-			return updateUser(who.nick, who);
+						users.set(who.nick, who);
-		case irc.RPL_ENDOFWHO:
+					}
-			target = msg.params[1];
+					return { users };
-			if (msg.list.length == 0 && !client.isChannel(target) && target.indexOf("*") < 0) {
-				// Not a channel nor a mask, likely a nick
-				return updateUser(target, (user) => {
-					return { offline: true };
 				});
 			}
-			break;
 		case "JOIN":
 			channel = msg.params[0];
 
 			if (client.isMyNick(msg.prefix.name)) {
-				let [id, update] = State.createBuffer(state, channel, serverID, client);
+				let [_id, update] = State.createBuffer(state, channel, serverID, client);
 				state = { ...state, ...update };
 			}
 
@@ -548,7 +567,7 @@ export const State = {
 		case "QUIT":
 			buffers = new Map(state.buffers);
 			state.buffers.forEach((buf) => {
-				if (buf.server != serverID) {
+				if (buf.server !== serverID) {
 					return;
 				}
 				if (!buf.members.has(msg.prefix.name)) {
@@ -574,7 +593,7 @@ export const State = {
 
 			buffers = new Map(state.buffers);
 			state.buffers.forEach((buf) => {
-				if (buf.server != serverID) {
+				if (buf.server !== serverID) {
 					return;
 				}
 				if (!buf.members.has(msg.prefix.name)) {
@@ -615,7 +634,7 @@ export const State = {
 			return updateUser(msg.prefix.name, { account });
 		case "AWAY":
 			let awayMessage = msg.params[0];
-			return updateUser(msg.prefix.name, { away: !!awayMessage });
+			return updateUser(msg.prefix.name, { away: Boolean(awayMessage) });
 		case "TOPIC":
 			channel = msg.params[0];
 			topic = msg.params[1];
@@ -647,21 +666,12 @@ export const State = {
 				return { members };
 			});
 		case irc.RPL_MONONLINE:
-			targets = msg.params[1].split(",");
-
-			for (let target of targets) {
-				let prefix = irc.parsePrefix(target);
-				let update = updateUser(prefix.name, { offline: false });
-				state = { ...state, ...update };
-			}
-
-			return state;
 		case irc.RPL_MONOFFLINE:
 			targets = msg.params[1].split(",");
 
 			for (let target of targets) {
 				let prefix = irc.parsePrefix(target);
-				let update = updateUser(prefix.name, { offline: true });
+				let update = updateUser(prefix.name, { offline: msg.command === irc.RPL_MONOFFLINE });
 				state = { ...state, ...update };
 			}
 

store.js

@@ -1,4 +1,4 @@
-import { ReceiptType } from "./state.js";
+import { ReceiptType, Unread } from "./state.js";
 
 const PREFIX = "gamja_";
 
@@ -62,8 +62,6 @@ export class Buffer {
 		return JSON.stringify({
 			name: buf.name.toLowerCase(),
 			server: {
-				url: buf.server.url,
-				nick: buf.server.nick.toLowerCase(),
 				bouncerNetwork: buf.server.bouncerNetwork,
 			},
 		});
@@ -87,7 +85,7 @@ export class Buffer {
 		let updated = !this.m.has(key);
 		let prev = this.m.get(key) || {};
 
-		let unread = prev.unread;
+		let unread = prev.unread || Unread.NONE;
 		if (buf.unread !== undefined && buf.unread !== prev.unread) {
 			unread = buf.unread;
 			updated = true;
@@ -109,6 +107,12 @@ export class Buffer {
 			}
 		}
 
+		let closed = prev.closed || false;
+		if (buf.closed !== undefined && buf.closed !== prev.closed) {
+			closed = buf.closed;
+			updated = true;
+		}
+
 		if (!updated) {
 			return false;
 		}
@@ -117,9 +121,8 @@ export class Buffer {
 			name: buf.name,
 			unread,
 			receipts,
+			closed,
 			server: {
-				url: buf.server.url,
-				nick: buf.server.nick,
 				bouncerNetwork: buf.server.bouncerNetwork,
 			},
 		});
@@ -134,19 +137,25 @@ export class Buffer {
 	}
 
 	list(server) {
+		// Some gamja versions would store the same buffer multiple times
+		let names = new Set();
 		let buffers = [];
 		for (const buf of this.m.values()) {
-			if (buf.server.url !== server.url || buf.server.nick !== server.nick || buf.server.bouncerNetwork !== server.bouncerNetwork) {
+			if (buf.server.bouncerNetwork !== server.bouncerNetwork) {
+				continue;
+			}
+			if (names.has(buf.name)) {
 				continue;
 			}
 			buffers.push(buf);
+			names.add(buf.name);
 		}
 		return buffers;
 	}
 
 	clear(server) {
 		if (server) {
-			for (const buf of this.m.values()) {
+			for (const buf of this.list(server)) {
 				this.m.delete(this.key(buf));
 			}
 		} else {

style.css

@@ -154,9 +154,8 @@ button.danger:hover {
 	padding: 2px 10px;
 	box-sizing: border-box;
 }
-#buffer-list li.active a {
+#buffer-list li.error a {
-	color: white;
+	color: red;
-	background-color: var(--gray);
 }
 #buffer-list li.unread-message a {
 	color: #b37400;
@@ -164,6 +163,10 @@ button.danger:hover {
 #buffer-list li.unread-highlight a {
 	color: #22009b;
 }
+#buffer-list li.active a {
+	color: white;
+	background-color: var(--gray);
+}
 #buffer-list li:not(.type-server) a {
 	padding-left: 20px;
 }
@@ -299,7 +302,7 @@ button.danger:hover {
 .membership.admin {
 	color: blue;
 }
-.membership.op {
+.membership.operator {
 	color: var(--green);
 }
 .membership.halfop {
@@ -349,18 +352,27 @@ form input[type="text"],
 form input[type="username"],
 form input[type="password"],
 form input[type="url"],
-form input[type="email"] {
+form input[type="email"],
+form input[type="search"] {
 	box-sizing: border-box;
 	width: 100%;
+	font-family: inherit;
+	font-size: inherit;
 }
 
 a {
 	color: var(--green);
 }
 #buffer-list li a, a.timestamp, a.nick {
-	color: var(--gray);
 	text-decoration: none;
 }
+#buffer-list li a,
+a.nick {
+	color: var(--main-color);
+}
+a.timestamp {
+	color: var(--gray);
+}
 #buffer-list li a:hover, #buffer-list li a:active,
 a.timestamp:hover, a.timestamp:active,
 a.nick:hover, a.nick:active {
@@ -382,6 +394,7 @@ details summary[role="button"] {
 }
 #buffer .logline {
 	white-space: pre-wrap;
+	overflow: auto;
 }
 #buffer .talk, #buffer .motd {
 	color: var(--main-color);
@@ -556,21 +569,44 @@ kbd {
 	border-radius: 3px;
 }
 
+ul.switcher-list {
+	list-style-type: none;
+	margin: 0;
+	padding: 0;
+	margin-top: 10px;
+}
+ul.switcher-list li a {
+	display: inline-block;
+	width: 100%;
+	padding: 5px 10px;
+	margin: 4px 0;
+	box-sizing: border-box;
+	text-decoration: none;
+	color: inherit;
+}
+ul.switcher-list li a.selected {
+	background-color: rgba(0, 0, 0, 0.1);
+}
+ul.switcher-list .server {
+	float: right;
+	opacity: 0.8;
+}
+
 @media (prefers-color-scheme: dark) {
 	html {
 		scrollbar-color: var(--gray) transparent;
 	}
 
-	#buffer-list li.active a {
-		color: var(--sidebar-background);
-		background-color: white;
-	}
 	#buffer-list li.unread-message a {
 		color: var(--green);
 	}
 	#buffer-list li.unread-highlight a {
 		color: #0062cc;
 	}
+	#buffer-list li.active a {
+		color: var(--sidebar-background);
+		background-color: white;
+	}
 
 	#buffer-header .status-gone {
 		color: #fb885b;
@@ -583,7 +619,8 @@ kbd {
 	form input[type="username"],
 	form input[type="password"],
 	form input[type="url"],
-	form input[type="email"] {
+	form input[type="email"],
+	form input[type="search"] {
 		color: #ffffff;
 		background: var(--sidebar-background);
 		border: 1px solid #495057;
@@ -593,16 +630,12 @@ kbd {
 	form input[type="username"]:focus,
 	form input[type="password"]:focus,
 	form input[type="url"]:focus,
-	form input[type="email"]:focus {
+	form input[type="email"]:focus,
+	form input[type="search"]:focus {
 		outline: 0;
 		border-color: #3897ff;
 	}
 
-	#buffer-list li a,
-	a.nick {
-		color: var(--main-color);
-	}
-
 	#buffer {
 		background: var(--main-background);
 	}
@@ -672,6 +705,10 @@ kbd {
 		border: 1px solid var(--outline-color);
 		box-shadow: inset 0 -1px 0 var(--outline-color);
 	}
+
+	ul.switcher-list li a.selected {
+		background-color: rgba(255, 255, 255, 0.1);
+	}
 }
 
 @media (max-width: 640px) {