From 5283d10cfba39bfe9d7c67f27f50c13abb83b43c Mon Sep 17 00:00:00 2001
From: Max Leiter <maxwell.leiter@gmail.com>
Date: Wed, 1 Jun 2022 22:35:01 -0700
Subject: [PATCH] Add MONITOR support and status icons for queries

---
 client/components/Channel.vue             |   7 ++
 client/components/Chat.vue                |   8 ++
 client/components/ChatUserList.vue        | 123 +++++++++++++++++++++-
 client/components/MessageTypes/away.vue   |  12 ++-
 client/components/Settings/Appearance.vue |   8 ++
 client/components/StatusIcon.vue          |  81 ++++++++++++++
 client/components/Username.vue            |  29 ++++-
 client/css/style.css                      | 112 --------------------
 client/js/settings.ts                     |   3 +
 client/js/socket-events/users.ts          |  28 +++++
 src/client.ts                             |   2 +
 src/models/chan.ts                        |   5 +
 src/models/msg.ts                         |   4 +-
 src/models/network.ts                     |  38 ++++++-
 src/models/user.ts                        |   4 +
 src/plugins/irc-events/account.ts         |  24 +++++
 src/plugins/irc-events/away.ts            |   5 +
 src/plugins/irc-events/connection.ts      |   5 +
 src/plugins/irc-events/join.ts            |  34 +++++-
 src/plugins/irc-events/users.ts           |  40 +++++++
 src/types/modules/irc-framework.d.ts      |   7 +-
 src/types/socket-events.d.ts              |   4 +
 22 files changed, 453 insertions(+), 130 deletions(-)
 create mode 100644 client/components/StatusIcon.vue
 create mode 100644 src/plugins/irc-events/account.ts
 create mode 100644 src/plugins/irc-events/users.ts

diff --git a/client/components/Channel.vue b/client/components/Channel.vue
index c21e55d2..5710f22c 100644
--- a/client/components/Channel.vue
+++ b/client/components/Channel.vue
@@ -2,6 +2,11 @@
 	<!-- TODO: investigate -->
 	<ChannelWrapper ref="wrapper" v-bind="$props">
 		<span class="name">{{ channel.name }}</span>
+		<StatusIcon
+			v-if="channel.type === 'query' && network.status.connected"
+			:online="channel.isOnline"
+			:away="!!channel.userAway"
+		/>
 		<span
 			v-if="channel.unread"
 			:class="{highlight: channel.highlight && !channel.muted}"
@@ -34,11 +39,13 @@ import roundBadgeNumber from "../js/helpers/roundBadgeNumber";
 import useCloseChannel from "../js/hooks/use-close-channel";
 import {ClientChan, ClientNetwork} from "../js/types";
 import ChannelWrapper from "./ChannelWrapper.vue";
+import StatusIcon from "./StatusIcon.vue";
 
 export default defineComponent({
 	name: "Channel",
 	components: {
 		ChannelWrapper,
+		StatusIcon,
 	},
 	props: {
 		network: {
diff --git a/client/components/Chat.vue b/client/components/Chat.vue
index 0c2f8a7a..1ff1b776 100644
--- a/client/components/Chat.vue
+++ b/client/components/Chat.vue
@@ -21,6 +21,12 @@
 					<span class="title" :aria-label="'Currently open ' + channel.type">{{
 						channel.name
 					}}</span>
+					<StatusIcon
+						v-if="channel.type === 'query'"
+						:online="channel.isOnline"
+						:away="!!channel.userAway"
+						tooltip-dir="e"
+					/>
 					<div v-if="channel.editTopic === true" class="topic-container">
 						<input
 							ref="topicInput"
@@ -136,6 +142,7 @@ import ListIgnored from "./Special/ListIgnored.vue";
 import {defineComponent, PropType, ref, computed, watch, nextTick, onMounted, Component} from "vue";
 import type {ClientNetwork, ClientChan} from "../js/types";
 import {useStore} from "../js/store";
+import StatusIcon from "./StatusIcon.vue";
 
 export default defineComponent({
 	name: "Chat",
@@ -146,6 +153,7 @@ export default defineComponent({
 		ChatUserList,
 		SidebarToggle,
 		MessageSearchForm,
+		StatusIcon,
 	},
 	props: {
 		network: {type: Object as PropType<ClientNetwork>, required: true},
diff --git a/client/components/ChatUserList.vue b/client/components/ChatUserList.vue
index 18711058..1288fb88 100644
--- a/client/components/ChatUserList.vue
+++ b/client/components/ChatUserList.vue
@@ -31,16 +31,15 @@
 				:class="['user-mode', getModeClass(String(mode))]"
 			>
 				<template v-if="userSearchInput.length > 0">
-					<!-- eslint-disable -->
 					<Username
 						v-for="user in users"
 						:key="user.original.nick + '-search'"
 						:on-hover="hoverUser"
 						:active="user.original === activeUser"
 						:user="(user.original as any)"
-						v-html="user.string"
+						:html="user.string"
+						:include-status-icon="true"
 					/>
-					<!-- eslint-enable -->
 				</template>
 				<template v-else>
 					<Username
@@ -49,6 +48,7 @@
 						:on-hover="hoverUser"
 						:active="user === activeUser"
 						:user="user"
+						:include-status-icon="true"
 					/>
 				</template>
 			</div>
@@ -56,6 +56,123 @@
 	</aside>
 </template>
 
+<style>
+.userlist {
+	border-left: 1px solid #e7e7e7;
+	width: 180px;
+	display: none;
+	flex-direction: column;
+	flex-shrink: 0;
+	touch-action: pan-y;
+}
+
+.userlist .count {
+	background: #fafafa;
+	height: 45px;
+	flex-shrink: 0;
+	position: relative;
+}
+.userlist .search {
+	color: var(--body-color);
+	appearance: none;
+	border: 0;
+	background: none;
+	font: inherit;
+	outline: 0;
+	padding: 13px;
+	padding-right: 30px;
+	width: 100%;
+}
+
+.userlist .names {
+	flex-grow: 1;
+	overflow: auto;
+	overflow-x: hidden;
+	padding-bottom: 10px;
+	width: 100%;
+	touch-action: pan-y;
+	scrollbar-width: thin;
+	overscroll-behavior: contain;
+	-webkit-overflow-scrolling: touch;
+}
+
+#viewport.userlist-open #chat .userlist {
+	display: flex;
+}
+
+#chat .names .user {
+	display: block;
+	line-height: 1.6;
+	padding: 0 16px;
+	white-space: nowrap;
+}
+
+#chat .user-mode {
+	margin-bottom: 15px;
+}
+
+#chat .user-mode::before {
+	background: var(--window-bg-color);
+	color: var(--body-color-muted);
+	display: block;
+	font-size: 0.85em;
+	line-height: 1.6;
+	padding: 5px 16px;
+	position: sticky;
+	top: 0;
+	z-index: 1;
+}
+
+#chat .user-mode.owner::before {
+	content: "Owners";
+}
+
+#chat .user-mode.admin::before {
+	content: "Administrators";
+}
+
+#chat .user-mode.op::before {
+	content: "Operators";
+}
+
+#chat .user-mode.half-op::before {
+	content: "Half-Operators";
+}
+
+#chat .user-mode.voice::before {
+	content: "Voiced";
+}
+
+#chat .user-mode.normal::before {
+	content: "Users";
+}
+
+#chat .user-mode-search::before {
+	content: "Search Results";
+}
+
+/* Status icon */
+#chat .names .status {
+	margin-left: -3px;
+	margin-right: 2px;
+}
+
+@media (max-width: 768px) {
+	#chat .userlist {
+		background-color: var(--window-bg-color);
+		height: 100%;
+		position: absolute;
+		right: 0;
+		transform: translateX(180px);
+		transition: transform 0.2s;
+	}
+
+	#viewport.userlist-open #chat .userlist {
+		transform: translateX(0);
+	}
+}
+</style>
+
 <script lang="ts">
 import {filter as fuzzyFilter} from "fuzzy";
 import {computed, defineComponent, nextTick, PropType, ref} from "vue";
diff --git a/client/components/MessageTypes/away.vue b/client/components/MessageTypes/away.vue
index 39ca76d1..4814e547 100644
--- a/client/components/MessageTypes/away.vue
+++ b/client/components/MessageTypes/away.vue
@@ -4,13 +4,15 @@
 		<template v-else>
 			<Username :user="message.from" />
 			is away
-			<i class="away-message">(<ParsedMessage :network="network" :message="message" />)</i>
+			<i v-if="awayMessage" class="away-message"
+				>(<ParsedMessage :network="network" :message="message" />)</i
+			>
 		</template>
 	</span>
 </template>
 
 <script lang="ts">
-import {defineComponent, PropType} from "vue";
+import {computed, defineComponent, PropType} from "vue";
 import type {ClientNetwork, ClientMessage} from "../../js/types";
 import ParsedMessage from "../ParsedMessage.vue";
 import Username from "../Username.vue";
@@ -31,5 +33,11 @@ export default defineComponent({
 			required: true,
 		},
 	},
+	setup(props) {
+		const awayMessage = computed(() => props.message.text.trim());
+		return {
+			awayMessage,
+		};
+	},
 });
 </script>
diff --git a/client/components/Settings/Appearance.vue b/client/components/Settings/Appearance.vue
index 529c0272..155a623c 100644
--- a/client/components/Settings/Appearance.vue
+++ b/client/components/Settings/Appearance.vue
@@ -98,6 +98,14 @@
 				/>
 				Enable autocomplete
 			</label>
+			<label class="opt">
+				<input
+					:checked="store.state.settings.statusIcons"
+					type="checkbox"
+					name="statusIcons"
+				/>
+				Enable status icons
+			</label>
 		</div>
 		<div>
 			<label class="opt">
diff --git a/client/components/StatusIcon.vue b/client/components/StatusIcon.vue
new file mode 100644
index 00000000..a0a54614
--- /dev/null
+++ b/client/components/StatusIcon.vue
@@ -0,0 +1,81 @@
+<template>
+	<div
+		v-if="store.state.settings.statusIcons"
+		:class="['status', 'tooltipped tooltipped-no-touch', tooltipDirClass]"
+		:aria-label="ariaLabel"
+	>
+		<span :class="{online: online, offline: !online, away: away}" />
+	</div>
+</template>
+
+<style>
+.status {
+	width: 16px;
+	height: 16px;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.online::after,
+.away::after,
+.offline::after {
+	content: "";
+	width: 8px;
+	height: 8px;
+	border-radius: 50%;
+	display: inline-block;
+}
+
+.online::after {
+	background-color: #2ecc40;
+}
+
+.offline::after {
+	background-color: #ff4136;
+}
+
+.away::after {
+	background-color: gray;
+}
+
+.status {
+	z-index: 0;
+}
+</style>
+
+<script lang="ts">
+import {computed, PropType, defineComponent} from "vue";
+import {useStore} from "../js/store";
+export default defineComponent({
+	name: "StatusIcon",
+	props: {
+		online: Boolean,
+		away: Boolean,
+		tooltipDir: String as PropType<"n" | "s" | "e" | "w">,
+	},
+	setup(props) {
+		const store = useStore();
+
+		const tooltipDirClass = computed(
+			() => `tooltipped-${props.tooltipDir ? props.tooltipDir : "w"}`
+		);
+
+		const ariaLabel = computed(() => {
+			if (props.away) {
+				return "Away";
+			} else if (props.online) {
+				return "Online";
+			}
+
+			return "Offline";
+		});
+
+		return {
+			tooltipDirClass,
+			ariaLabel,
+			store,
+		};
+	},
+});
+</script>
diff --git a/client/components/Username.vue b/client/components/Username.vue
index 8dce43e8..83f9443a 100644
--- a/client/components/Username.vue
+++ b/client/components/Username.vue
@@ -6,8 +6,25 @@
 		v-on="onHover ? {mouseenter: hover} : {}"
 		@click.prevent="openContextMenu"
 		@contextmenu.prevent="openContextMenu"
-		><slot>{{ mode }}{{ user.nick }}</slot></span
-	>
+		><slot v-if="!html">
+			<StatusIcon
+				v-if="includeStatusIcon"
+				:away="!!user.away"
+				:tooltip-dir="'e'"
+				:online="true"
+			/>
+			{{ mode }}{{ user.nick }}
+		</slot>
+		<slot v-else>
+			<StatusIcon
+				v-if="includeStatusIcon"
+				:away="!!user.away"
+				:tooltip-dir="'e'"
+				:online="true"
+			/>
+			<span class="nick" v-html="html"></span>
+		</slot>
+	</span>
 </template>
 
 <script lang="ts">
@@ -15,7 +32,8 @@ import {computed, defineComponent, PropType} from "vue";
 import {UserInMessage} from "../../src/models/msg";
 import eventbus from "../js/eventbus";
 import colorClass from "../js/helpers/colorClass";
-import type {ClientChan, ClientNetwork, ClientUser} from "../js/types";
+import type {ClientChan, ClientNetwork} from "../js/types";
+import StatusIcon from "./StatusIcon.vue";
 
 type UsernameUser = Partial<UserInMessage> & {
 	mode?: string;
@@ -24,6 +42,9 @@ type UsernameUser = Partial<UserInMessage> & {
 
 export default defineComponent({
 	name: "Username",
+	components: {
+		StatusIcon,
+	},
 	props: {
 		user: {
 			// TODO: UserInMessage shouldn't be necessary here.
@@ -37,6 +58,8 @@ export default defineComponent({
 		},
 		channel: {type: Object as PropType<ClientChan>, required: false},
 		network: {type: Object as PropType<ClientNetwork>, required: false},
+		includeStatusIcon: Boolean,
+		html: String,
 	},
 	setup(props) {
 		const mode = computed(() => {
diff --git a/client/css/style.css b/client/css/style.css
index d28499d2..922e6c3c 100644
--- a/client/css/style.css
+++ b/client/css/style.css
@@ -664,10 +664,6 @@ p {
 	opacity: 1;
 }
 
-#viewport.userlist-open #chat .userlist {
-	display: flex;
-}
-
 #sidebar {
 	display: none;
 	flex-direction: column;
@@ -1221,15 +1217,6 @@ textarea.input {
 	outline: none;
 }
 
-#chat .userlist {
-	border-left: 1px solid #e7e7e7;
-	width: 180px;
-	display: none;
-	flex-direction: column;
-	flex-shrink: 0;
-	touch-action: pan-y;
-}
-
 /**
   * Toggled via JavaScript
   */
@@ -1300,10 +1287,6 @@ textarea.input {
 	content: "\f107"; /* https://fontawesome.com/icons/angle-down?style=solid */
 }
 
-.userlist-open .chat-view[data-type="channel"] .scroll-down {
-	right: 196px;
-}
-
 #chat .messages {
 	padding: 10px 0;
 	touch-action: pan-y;
@@ -1733,87 +1716,6 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
 	display: none;
 }
 
-#chat .userlist .count {
-	background: #fafafa;
-	height: 45px;
-	flex-shrink: 0;
-	position: relative;
-}
-
-#chat .userlist .search {
-	color: var(--body-color);
-	appearance: none;
-	border: 0;
-	background: none;
-	font: inherit;
-	outline: 0;
-	padding: 13px;
-	padding-right: 30px;
-	width: 100%;
-}
-
-#chat .userlist .names {
-	flex-grow: 1;
-	overflow: auto;
-	overflow-x: hidden;
-	padding-bottom: 10px;
-	width: 100%;
-	touch-action: pan-y;
-	scrollbar-width: thin;
-	overscroll-behavior: contain;
-	-webkit-overflow-scrolling: touch;
-}
-
-#chat .names .user {
-	display: block;
-	line-height: 1.6;
-	padding: 0 16px;
-	white-space: nowrap;
-}
-
-#chat .user-mode {
-	margin-bottom: 15px;
-}
-
-#chat .user-mode::before {
-	background: var(--window-bg-color);
-	color: var(--body-color-muted);
-	display: block;
-	font-size: 0.85em;
-	line-height: 1.6;
-	padding: 5px 16px;
-	position: sticky;
-	top: 0;
-}
-
-#chat .user-mode.owner::before {
-	content: "Owners";
-}
-
-#chat .user-mode.admin::before {
-	content: "Administrators";
-}
-
-#chat .user-mode.op::before {
-	content: "Operators";
-}
-
-#chat .user-mode.half-op::before {
-	content: "Half-Operators";
-}
-
-#chat .user-mode.voice::before {
-	content: "Voiced";
-}
-
-#chat .user-mode.normal::before {
-	content: "Users";
-}
-
-#chat .user-mode-search::before {
-	content: "Search Results";
-}
-
 #loading {
 	display: flex;
 	font-size: 14px;
@@ -2693,20 +2595,6 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
 		position: relative;
 	}
 
-	#chat .userlist {
-		background-color: var(--window-bg-color);
-		height: 100%;
-		position: absolute;
-		right: 0;
-		transform: translateX(180px);
-		transition: transform 0.2s;
-		z-index: 1;
-	}
-
-	#viewport.userlist-open #chat .userlist {
-		transform: translateX(0);
-	}
-
 	#chat .header .title {
 		padding-left: 6px;
 	}
diff --git a/client/js/settings.ts b/client/js/settings.ts
index b42e230c..0624d479 100644
--- a/client/js/settings.ts
+++ b/client/js/settings.ts
@@ -31,6 +31,9 @@ const defaultConfig = {
 	coloredNicks: {
 		default: true,
 	},
+	statusIcons: {
+		default: true,
+	},
 	desktopNotifications: {
 		default: false,
 		sync: "never",
diff --git a/client/js/socket-events/users.ts b/client/js/socket-events/users.ts
index 1021c625..ecf66ff3 100644
--- a/client/js/socket-events/users.ts
+++ b/client/js/socket-events/users.ts
@@ -14,3 +14,31 @@ socket.on("users", function (data) {
 		channel.channel.usersOutdated = true;
 	}
 });
+
+socket.on("users:online", ({changedChannels, networkId}) => {
+	for (const network of store.state.networks) {
+		if (network.uuid === networkId) {
+			for (const channel of network.channels) {
+				if (changedChannels.includes(channel.name)) {
+					channel.isOnline = true;
+				}
+			}
+
+			break;
+		}
+	}
+});
+
+socket.on("users:offline", function ({changedChannels, networkId}) {
+	for (const network of store.state.networks) {
+		if (network.uuid === networkId) {
+			for (const channel of network.channels) {
+				if (changedChannels.includes(channel.name)) {
+					channel.isOnline = false;
+				}
+			}
+
+			break;
+		}
+	}
+});
diff --git a/src/client.ts b/src/client.ts
index cd42f96d..cbfc17b8 100644
--- a/src/client.ts
+++ b/src/client.ts
@@ -20,6 +20,7 @@ import ClientManager from "./clientManager";
 import {MessageStorage, SearchQuery} from "./plugins/messageStorage/types";
 
 const events = [
+	"account",
 	"away",
 	"cap",
 	"connection",
@@ -45,6 +46,7 @@ const events = [
 	"topic",
 	"welcome",
 	"whois",
+	"users",
 ];
 
 type ClientPushSubscription = {
diff --git a/src/models/chan.ts b/src/models/chan.ts
index ab3bed12..0b962e86 100644
--- a/src/models/chan.ts
+++ b/src/models/chan.ts
@@ -47,6 +47,7 @@ class Chan {
 	muted!: boolean;
 	type!: ChanType;
 	state!: ChanState;
+	isOnline?: boolean;
 
 	// These are added to the channel elsewhere and should not be saved.
 	userAway!: boolean;
@@ -73,6 +74,10 @@ class Chan {
 			users: new Map(),
 			muted: false,
 		});
+
+		if (this.type === ChanType.QUERY) {
+			this.isOnline = false;
+		}
 	}
 
 	destroy() {
diff --git a/src/models/msg.ts b/src/models/msg.ts
index 6a1d027c..e69827f9 100644
--- a/src/models/msg.ts
+++ b/src/models/msg.ts
@@ -35,6 +35,8 @@ export enum MessageType {
 	RAW = "raw",
 	PLUGIN = "plugin",
 	WALLOPS = "wallops",
+	ONLINE = "online",
+	OFFLINE = "offline",
 }
 
 class Msg {
@@ -59,7 +61,7 @@ class Msg {
 	command!: string;
 	invitedYou!: boolean;
 	gecos!: string;
-	account!: boolean;
+	account!: string;
 
 	// these are all just for error:
 	error!: string;
diff --git a/src/models/network.ts b/src/models/network.ts
index ed5038f5..57e2c15d 100644
--- a/src/models/network.ts
+++ b/src/models/network.ts
@@ -107,8 +107,12 @@ class Network {
 		CHANTYPES: string[];
 		PREFIX: Prefix;
 		NETWORK: string;
+		MONITOR: number;
 	};
 
+	monitorList!: string[];
+	toBeMonitored!: string[];
+
 	// TODO: this is only available on export
 	hasSTSPolicy!: boolean;
 
@@ -152,6 +156,8 @@ class Network {
 			chanCache: [],
 			ignoreList: [],
 			keepNick: null,
+			monitorList: [],
+			toBeMonitored: [],
 		});
 
 		if (!this.uuid) {
@@ -288,7 +294,8 @@ class Network {
 
 		this.irc.requestCap([
 			"znc.in/self-message", // Legacy echo-message for ZNC
-			"znc.in/playback", // See http://wiki.znc.in/Playback
+			"znc.in/playback", // See http://wiki.znc.in/Playback,
+			"draft/extended-monitor", // https://ircv3.net/specs/extensions/extended-monitor
 		]);
 	}
 
@@ -521,7 +528,27 @@ class Network {
 		return status;
 	}
 
-	addChannel(newChan: Chan) {
+	monitor(this: NetworkWithIrcFramework, target: string) {
+		this.irc.addMonitor(target);
+
+		if (this.monitorList.length < this.serverOptions.MONITOR) {
+			this.monitorList.push(target);
+		} else {
+			// TODO: ISON fallback?
+			this.toBeMonitored.push(target);
+		}
+	}
+
+	removeMonitor(this: NetworkWithIrcFramework, target: string) {
+		this.irc.removeMonitor(target);
+		this.monitorList = this.monitorList.filter((monitored) => monitored !== target);
+
+		if (this.toBeMonitored.length > 0) {
+			this.monitor(this.toBeMonitored.shift() as string);
+		}
+	}
+
+	addChannel(this: NetworkWithIrcFramework, newChan: Chan) {
 		let index = this.channels.length; // Default to putting as the last item in the array
 
 		// Don't sort special channels in amongst channels/users.
@@ -544,6 +571,13 @@ class Network {
 		}
 
 		this.channels.splice(index, 0, newChan);
+
+		if (newChan.type === ChanType.QUERY) {
+			if (!this.monitorList.includes(newChan.name)) {
+				this.monitor(newChan.name);
+			}
+		}
+
 		return index;
 	}
 
diff --git a/src/models/user.ts b/src/models/user.ts
index ea2d39b0..dba2f928 100644
--- a/src/models/user.ts
+++ b/src/models/user.ts
@@ -7,6 +7,7 @@ class User {
 	mode!: string;
 	away!: string;
 	nick!: string;
+	account!: string;
 	lastMessage!: number;
 
 	constructor(attr: Partial<User>, prefix?: Prefix) {
@@ -14,6 +15,7 @@ class User {
 			modes: [],
 			away: "",
 			nick: "",
+			account: "",
 			lastMessage: 0,
 		});
 
@@ -37,6 +39,8 @@ class User {
 			nick: this.nick,
 			modes: this.modes,
 			lastMessage: this.lastMessage,
+			away: this.away,
+			account: this.account,
 		};
 	}
 }
diff --git a/src/plugins/irc-events/account.ts b/src/plugins/irc-events/account.ts
new file mode 100644
index 00000000..91a7ed74
--- /dev/null
+++ b/src/plugins/irc-events/account.ts
@@ -0,0 +1,24 @@
+import {IrcEventHandler} from "../../client";
+
+import Msg, {MessageType} from "../../models/msg";
+
+export default <IrcEventHandler>function (irc, network) {
+	const client = this;
+
+	irc.on("account", function (data) {
+		network.channels.forEach((chan) => {
+			const user = chan.findUser(data.nick);
+
+			if (typeof user === "undefined") {
+				return;
+			}
+
+			user.account = data.account ? data.account : "";
+			chan.setUser(user);
+
+			client.emit("users", {
+				chan: chan.id,
+			});
+		});
+	});
+};
diff --git a/src/plugins/irc-events/away.ts b/src/plugins/irc-events/away.ts
index a2af0715..ca9d24cc 100644
--- a/src/plugins/irc-events/away.ts
+++ b/src/plugins/irc-events/away.ts
@@ -63,6 +63,11 @@ export default <IrcEventHandler>function (irc, network) {
 					}
 
 					user.away = away;
+					chan.setUser(user);
+
+					client.emit("users", {
+						chan: chan.id,
+					});
 
 					break;
 				}
diff --git a/src/plugins/irc-events/connection.ts b/src/plugins/irc-events/connection.ts
index dcb3be77..d51748b7 100644
--- a/src/plugins/irc-events/connection.ts
+++ b/src/plugins/irc-events/connection.ts
@@ -54,6 +54,10 @@ export default <IrcEventHandler>function (irc, network) {
 
 		network.channels.forEach((chan) => {
 			if (chan.type !== ChanType.CHANNEL) {
+				if (chan.type === ChanType.QUERY) {
+					network.monitor(chan.name);
+				}
+
 				return;
 			}
 
@@ -204,6 +208,7 @@ export default <IrcEventHandler>function (irc, network) {
 		}
 
 		network.serverOptions.NETWORK = data.options.NETWORK;
+		network.serverOptions.MONITOR = data.options.MONITOR;
 
 		client.emit("network:options", {
 			network: network.uuid,
diff --git a/src/plugins/irc-events/join.ts b/src/plugins/irc-events/join.ts
index 0c758f12..27274c70 100644
--- a/src/plugins/irc-events/join.ts
+++ b/src/plugins/irc-events/join.ts
@@ -1,13 +1,32 @@
 import Msg, {MessageType} from "../../models/msg";
+import Chan, {ChanState, ChanType} from "../../models/chan";
 import User from "../../models/user";
 import type {IrcEventHandler} from "../../client";
-import {ChanState} from "../../models/chan";
 
 export default <IrcEventHandler>function (irc, network) {
 	const client = this;
 
 	irc.on("join", function (data) {
+		const performWhoOnChannel = (chan: Chan) => {
+			if (chan.type !== ChanType.CHANNEL) {
+				return;
+			}
+
+			irc.who(chan.name, (whoData) => {
+				for (const user of whoData.users) {
+					chan.setUser(
+						new User({
+							nick: user.nick,
+							away: user.away,
+							account: user.account,
+						})
+					);
+				}
+			});
+		};
+
 		let chan = network.getChannel(data.channel);
+		const isSelf = data.nick === irc.user.nick;
 
 		if (typeof chan === "undefined") {
 			chan = client.createChannel({
@@ -26,7 +45,7 @@ export default <IrcEventHandler>function (irc, network) {
 
 			// Request channels' modes
 			network.irc.raw("MODE", chan.name);
-		} else if (data.nick === irc.user.nick) {
+		} else if (isSelf) {
 			chan.state = ChanState.JOINED;
 
 			client.emit("channel:state", {
@@ -35,7 +54,7 @@ export default <IrcEventHandler>function (irc, network) {
 			});
 		}
 
-		const user = new User({nick: data.nick});
+		const user = new User({nick: data.nick, account: data.account});
 		const msg = new Msg({
 			time: data.time,
 			from: user,
@@ -43,13 +62,18 @@ export default <IrcEventHandler>function (irc, network) {
 			gecos: data.gecos,
 			account: data.account,
 			type: MessageType.JOIN,
-			self: data.nick === irc.user.nick,
+			self: isSelf,
 		});
 		chan.pushMessage(client, msg);
 
-		chan.setUser(new User({nick: data.nick}));
+		chan.setUser(user);
 		client.emit("users", {
 			chan: chan.id,
 		});
+
+		// If we join a channel, we perform a WHO to get all the users away statuses
+		if (isSelf) {
+			performWhoOnChannel(chan);
+		}
 	});
 };
diff --git a/src/plugins/irc-events/users.ts b/src/plugins/irc-events/users.ts
new file mode 100644
index 00000000..ac971b59
--- /dev/null
+++ b/src/plugins/irc-events/users.ts
@@ -0,0 +1,40 @@
+"use strict";
+
+import type {IrcEventHandler} from "../../client";
+import {ChanType} from "../../models/chan";
+
+export default <IrcEventHandler>function (irc, network) {
+	const client = this;
+
+	irc.on("users online", function (data) {
+		const changedChannels: string[] = [];
+
+		for (const nick of data.nicks) {
+			for (const channel of network.channels) {
+				if (channel.type === ChanType.QUERY && channel.name === nick) {
+					channel.isOnline = true;
+					changedChannels.push(channel.name);
+					continue;
+				}
+			}
+		}
+
+		client.emit("users:online", {changedChannels, networkId: network.uuid});
+	});
+
+	irc.on("users offline", function (data) {
+		const changedChannels: string[] = [];
+
+		for (const nick of data.nicks) {
+			for (const channel of network.channels) {
+				if (channel.type === ChanType.QUERY && channel.name === nick) {
+					channel.isOnline = false;
+					changedChannels.push(channel.name);
+					continue;
+				}
+			}
+		}
+
+		client.emit("users:offline", {changedChannels, networkId: network.uuid});
+	});
+};
diff --git a/src/types/modules/irc-framework.d.ts b/src/types/modules/irc-framework.d.ts
index 3aca2482..5174661d 100644
--- a/src/types/modules/irc-framework.d.ts
+++ b/src/types/modules/irc-framework.d.ts
@@ -37,8 +37,7 @@ declare module "irc-framework" {
 		type: "privmsg" | "action"; // TODO
 	}
 	export interface JoinEventArgs {
-		// todo: is that wrong?
-		account: boolean;
+		account: string;
 		channel: string;
 		gecos: string;
 		hostname: string;
@@ -235,6 +234,10 @@ declare module "irc-framework" {
 
 		matchAction(match_regex: string, cb: (event: Event) => any): void;
 
+		addMonitor(target: string): void;
+
+		removeMonitor(target: string): void;
+
 		stringToBlocks(str: string, block_size?: number): string[];
 
 		on(eventType: string | symbol, cb: (event: any) => void): this;
diff --git a/src/types/socket-events.d.ts b/src/types/socket-events.d.ts
index f98faf4b..a8cc5171 100644
--- a/src/types/socket-events.d.ts
+++ b/src/types/socket-events.d.ts
@@ -120,6 +120,10 @@ interface ServerToClientEvents {
 		network: string;
 		chan: InitClientChan;
 	}) => void;
+
+	"users:online": (args: {changedChannels: string[]; networkId: string}) => void;
+
+	"users:offline": (args: {changedChannels: string[]; networkId: string}) => void;
 }
 
 interface ClientToServerEvents {