diff --git a/.eslintignore b/.eslintignore
index f261dd2e..1f2ae53f 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -1,5 +1,2 @@
-# third party
-client/js/libs/jquery/*.js
-
 public/
 coverage/
diff --git a/.npmignore b/.npmignore
index 616d4ced..7a6412fb 100644
--- a/.npmignore
+++ b/.npmignore
@@ -9,8 +9,8 @@
 # Ignore client folder as it's being built into public/ folder
 # except for the specified files which are used by the server
 client/**
-!client/js/libs/handlebars/ircmessageparser/findLinks.js
-!client/js/libs/handlebars/ircmessageparser/cleanIrcMessage.js
+!client/js/helpers/ircmessageparser/findLinks.js
+!client/js/helpers/ircmessageparser/cleanIrcMessage.js
 !client/index.html.tpl
 
 public/js/bundle.vendor.js.map
diff --git a/client/components/App.vue b/client/components/App.vue
index 76820e4d..09841cde 100644
--- a/client/components/App.vue
+++ b/client/components/App.vue
@@ -1,95 +1,44 @@
 <template>
-	<div id="viewport" role="tablist">
-		<aside id="sidebar">
-			<div class="scrollable-area">
-				<div class="logo-container">
-					<img
-						:src="`img/logo-${isPublic() ? 'horizontal-' : ''}transparent-bg.svg`"
-						class="logo"
-						alt="The Lounge"
-					/>
-					<img
-						:src="
-							`img/logo-${isPublic() ? 'horizontal-' : ''}transparent-bg-inverted.svg`
-						"
-						class="logo-inverted"
-						alt="The Lounge"
-					/>
-				</div>
-				<NetworkList :networks="networks" :active-channel="activeChannel" />
-			</div>
-			<footer id="footer">
-				<span class="tooltipped tooltipped-n tooltipped-no-touch" aria-label="Sign in"
-					><button
-						class="icon sign-in"
-						data-target="#sign-in"
-						aria-label="Sign in"
-						role="tab"
-						aria-controls="sign-in"
-						aria-selected="false"
-				/></span>
-				<span
-					class="tooltipped tooltipped-n tooltipped-no-touch"
-					aria-label="Connect to network"
-					><button
-						class="icon connect"
-						data-target="#connect"
-						aria-label="Connect to network"
-						role="tab"
-						aria-controls="connect"
-						aria-selected="false"
-				/></span>
-				<span class="tooltipped tooltipped-n tooltipped-no-touch" aria-label="Settings"
-					><button
-						class="icon settings"
-						data-target="#settings"
-						aria-label="Settings"
-						role="tab"
-						aria-controls="settings"
-						aria-selected="false"
-				/></span>
-				<span class="tooltipped tooltipped-n tooltipped-no-touch" aria-label="Help"
-					><button
-						class="icon help"
-						data-target="#help"
-						aria-label="Help"
-						role="tab"
-						aria-controls="help"
-						aria-selected="false"
-				/></span>
-			</footer>
-		</aside>
-		<div id="sidebar-overlay" />
+	<div id="viewport" :class="viewportClasses" role="tablist">
+		<Sidebar v-if="$store.state.appLoaded" :overlay="$refs.overlay" />
+		<div id="sidebar-overlay" ref="overlay" @click="$store.commit('sidebarOpen', false)" />
 		<article id="windows">
-			<Chat
-				v-if="activeChannel"
-				:network="activeChannel.network"
-				:channel="activeChannel.channel"
-			/>
-			<div id="sign-in" class="window" role="tabpanel" aria-label="Sign-in" />
-			<div id="connect" class="window" role="tabpanel" aria-label="Connect" />
-			<div id="settings" class="window" role="tabpanel" aria-label="Settings" />
-			<div id="help" class="window" role="tabpanel" aria-label="Help" />
-			<div id="changelog" class="window" aria-label="Changelog" />
+			<router-view ref="window"></router-view>
 		</article>
+		<ImageViewer ref="imageViewer" />
+		<ContextMenu ref="contextMenu" />
+		<div id="upload-overlay"></div>
 	</div>
 </template>
 
 <script>
-const throttle = require("lodash/throttle");
+import throttle from "lodash/throttle";
+import constants from "../js/constants";
+import storage from "../js/localStorage";
 
-import NetworkList from "./NetworkList.vue";
-import Chat from "./Chat.vue";
+import Sidebar from "./Sidebar.vue";
+import ImageViewer from "./ImageViewer.vue";
+import ContextMenu from "./ContextMenu.vue";
 
 export default {
 	name: "App",
 	components: {
-		NetworkList,
-		Chat,
+		Sidebar,
+		ImageViewer,
+		ContextMenu,
 	},
-	props: {
-		activeChannel: Object,
-		networks: Array,
+	computed: {
+		viewportClasses() {
+			return {
+				notified: this.$store.getters.highlightCount > 0,
+				"menu-open": this.$store.state.appLoaded && this.$store.state.sidebarOpen,
+				"menu-dragging": this.$store.state.sidebarDragging,
+				"userlist-open": this.$store.state.userlistOpen,
+			};
+		},
+	},
+	created() {
+		this.prepareOpenStates();
 	},
 	mounted() {
 		// Make a single throttled resize listener available to all components
@@ -113,7 +62,6 @@ export default {
 		clearTimeout(this.dayChangeTimeout);
 	},
 	methods: {
-		isPublic: () => document.body.classList.contains("public"),
 		msUntilNextDay() {
 			// Compute how many milliseconds are remaining until the next day starts
 			const today = new Date();
@@ -121,6 +69,25 @@ export default {
 
 			return tommorow - today;
 		},
+		prepareOpenStates() {
+			const viewportWidth = window.outerWidth;
+			let isUserlistOpen = storage.get("thelounge.state.userlist");
+
+			if (viewportWidth > constants.mobileViewportPixels) {
+				this.$store.commit(
+					"sidebarOpen",
+					storage.get("thelounge.state.sidebar") !== "false"
+				);
+			}
+
+			// If The Lounge is opened on a small screen (less than 1024px), and we don't have stored
+			// user list state, close it by default
+			if (viewportWidth >= 1024 && isUserlistOpen !== "true" && isUserlistOpen !== "false") {
+				isUserlistOpen = "true";
+			}
+
+			this.$store.commit("userlistOpen", isUserlistOpen === "true");
+		},
 	},
 };
 </script>
diff --git a/client/components/Channel.vue b/client/components/Channel.vue
index e48df51a..05a68003 100644
--- a/client/components/Channel.vue
+++ b/client/components/Channel.vue
@@ -1,8 +1,8 @@
 <template>
-	<ChannelWrapper :network="network" :channel="channel" :active-channel="activeChannel">
+	<ChannelWrapper ref="wrapper" :network="network" :channel="channel">
 		<span class="name">{{ channel.name }}</span>
 		<span v-if="channel.unread" :class="{highlight: channel.highlight}" class="badge">{{
-			channel.unread | roundBadgeNumber
+			unreadCount
 		}}</span>
 		<template v-if="channel.type === 'channel'">
 			<span
@@ -13,18 +13,19 @@
 				<span class="parted-channel-icon" />
 			</span>
 			<span class="close-tooltip tooltipped tooltipped-w" aria-label="Leave">
-				<button class="close" aria-label="Leave" />
+				<button class="close" aria-label="Leave" @click.stop="close" />
 			</span>
 		</template>
 		<template v-else>
 			<span class="close-tooltip tooltipped tooltipped-w" aria-label="Close">
-				<button class="close" aria-label="Close" />
+				<button class="close" aria-label="Close" @click.stop="close" />
 			</span>
 		</template>
 	</ChannelWrapper>
 </template>
 
 <script>
+import roundBadgeNumber from "../js/helpers/roundBadgeNumber";
 import ChannelWrapper from "./ChannelWrapper.vue";
 
 export default {
@@ -33,9 +34,18 @@ export default {
 		ChannelWrapper,
 	},
 	props: {
-		activeChannel: Object,
 		network: Object,
 		channel: Object,
 	},
+	computed: {
+		unreadCount() {
+			return roundBadgeNumber(this.channel.unread);
+		},
+	},
+	methods: {
+		close() {
+			this.$root.closeChannel(this.channel);
+		},
+	},
 };
 </script>
diff --git a/client/components/ChannelWrapper.vue b/client/components/ChannelWrapper.vue
index 6e010735..7cbee728 100644
--- a/client/components/ChannelWrapper.vue
+++ b/client/components/ChannelWrapper.vue
@@ -1,11 +1,8 @@
 <template>
+	<!-- TODO: move closed style to it's own class -->
 	<div
-		v-if="
-			!network.isCollapsed ||
-				channel.highlight ||
-				channel.type === 'lobby' ||
-				(activeChannel && channel === activeChannel.channel)
-		"
+		v-if="isChannelVisible"
+		ref="element"
 		:class="[
 			'chan',
 			channel.type,
@@ -14,24 +11,34 @@
 		]"
 		:aria-label="getAriaLabel()"
 		:title="getAriaLabel()"
-		:data-id="channel.id"
-		:data-target="'#chan-' + channel.id"
 		:data-name="channel.name"
 		:aria-controls="'#chan-' + channel.id"
 		:aria-selected="activeChannel && channel === activeChannel.channel"
+		:style="channel.closed ? {transition: 'none', opacity: 0.4} : null"
 		role="tab"
+		@click="click"
+		@contextmenu.prevent="openContextMenu"
 	>
 		<slot :network="network" :channel="channel" :activeChannel="activeChannel" />
 	</div>
 </template>
 
 <script>
+import isChannelCollapsed from "../js/helpers/isChannelCollapsed";
+
 export default {
 	name: "ChannelWrapper",
 	props: {
 		network: Object,
 		channel: Object,
-		activeChannel: Object,
+	},
+	computed: {
+		activeChannel() {
+			return this.$store.state.activeChannel;
+		},
+		isChannelVisible() {
+			return !isChannelCollapsed(this.network, this.channel);
+		},
 	},
 	methods: {
 		getAriaLabel() {
@@ -51,6 +58,16 @@ export default {
 
 			return this.channel.name;
 		},
+		click() {
+			this.$root.switchToChannel(this.channel);
+		},
+		openContextMenu(event) {
+			this.$root.$emit("contextmenu:channel", {
+				event: event,
+				channel: this.channel,
+				network: this.network,
+			});
+		},
 	},
 };
 </script>
diff --git a/client/components/Chat.vue b/client/components/Chat.vue
index 2be5ee3a..c6fb5ef8 100644
--- a/client/components/Chat.vue
+++ b/client/components/Chat.vue
@@ -2,23 +2,20 @@
 	<div id="chat-container" class="window" :data-current-channel="channel.name">
 		<div
 			id="chat"
-			:data-id="channel.id"
 			:class="{
-				'hide-motd': !this.$root.settings.motd,
-				'colored-nicks': this.$root.settings.coloredNicks,
-				'show-seconds': this.$root.settings.showSeconds,
+				'hide-motd': !$store.state.settings.motd,
+				'colored-nicks': $store.state.settings.coloredNicks,
+				'show-seconds': $store.state.settings.showSeconds,
 			}"
 		>
 			<div
 				:id="'chan-' + channel.id"
 				:class="[channel.type, 'chan', 'active']"
-				:data-id="channel.id"
-				:data-type="channel.type"
 				:aria-label="channel.name"
 				role="tabpanel"
 			>
 				<div class="header">
-					<button class="lt" aria-label="Toggle channel list" />
+					<SidebarToggle />
 					<span class="title">{{ channel.name }}</span>
 					<div v-if="channel.editTopic === true" class="topic-container">
 						<input
@@ -38,13 +35,21 @@
 							:network="network"
 							:text="channel.topic"
 					/></span>
-					<button class="menu" aria-label="Open the context menu" />
+					<button
+						class="menu"
+						aria-label="Open the context menu"
+						@click="openContextMenu"
+					/>
 					<span
 						v-if="channel.type === 'channel'"
 						class="rt-tooltip tooltipped tooltipped-w"
 						aria-label="Toggle user list"
 					>
-						<button class="rt" aria-label="Toggle user list" />
+						<button
+							class="rt"
+							aria-label="Toggle user list"
+							@click="$store.commit('toggleUserlist')"
+						/>
 					</span>
 				</div>
 				<div v-if="channel.type === 'special'" class="chat-content">
@@ -77,11 +82,11 @@
 			</div>
 		</div>
 		<div
-			v-if="this.$root.currentUserVisibleError"
+			v-if="this.$store.state.currentUserVisibleError"
 			id="user-visible-error"
 			@click="hideUserVisibleError"
 		>
-			{{ this.$root.currentUserVisibleError }}
+			{{ this.$store.state.currentUserVisibleError }}
 		</div>
 		<span id="upload-progressbar" />
 		<ChatInput :network="network" :channel="channel" />
@@ -89,11 +94,12 @@
 </template>
 
 <script>
-const socket = require("../js/socket");
+import socket from "../js/socket";
 import ParsedMessage from "./ParsedMessage.vue";
 import MessageList from "./MessageList.vue";
 import ChatInput from "./ChatInput.vue";
 import ChatUserList from "./ChatUserList.vue";
+import SidebarToggle from "./SidebarToggle.vue";
 import ListBans from "./Special/ListBans.vue";
 import ListInvites from "./Special/ListInvites.vue";
 import ListChannels from "./Special/ListChannels.vue";
@@ -106,6 +112,7 @@ export default {
 		MessageList,
 		ChatInput,
 		ChatUserList,
+		SidebarToggle,
 	},
 	props: {
 		network: Object,
@@ -127,9 +134,32 @@ export default {
 			return undefined;
 		},
 	},
+	watch: {
+		channel() {
+			this.channelChanged();
+		},
+	},
+	mounted() {
+		this.channelChanged();
+	},
 	methods: {
+		channelChanged() {
+			// Triggered when active channel is set or changed
+			this.channel.highlight = 0;
+			this.channel.unread = 0;
+
+			socket.emit("open", this.channel.id);
+
+			if (this.channel.usersOutdated) {
+				this.channel.usersOutdated = false;
+
+				socket.emit("names", {
+					target: this.channel.id,
+				});
+			}
+		},
 		hideUserVisibleError() {
-			this.$root.currentUserVisibleError = null;
+			this.$store.commit("currentUserVisibleError", null);
 		},
 		editTopic() {
 			if (this.channel.type === "channel") {
@@ -150,6 +180,13 @@ export default {
 				socket.emit("input", {target, text});
 			}
 		},
+		openContextMenu(event) {
+			this.$root.$emit("contextmenu:channel", {
+				event: event,
+				channel: this.channel,
+				network: this.network,
+			});
+		},
 	},
 };
 </script>
diff --git a/client/components/ChatInput.vue b/client/components/ChatInput.vue
index d10f0305..ca590ea0 100644
--- a/client/components/ChatInput.vue
+++ b/client/components/ChatInput.vue
@@ -8,12 +8,11 @@
 			:value="channel.pendingMessage"
 			:placeholder="getInputPlaceholder(channel)"
 			:aria-label="getInputPlaceholder(channel)"
-			class="mousetrap"
 			@input="setPendingMessage"
 			@keypress.enter.exact.prevent="onSubmit"
 		/>
 		<span
-			v-if="this.$root.isFileUploadEnabled"
+			v-if="$store.state.serverConfiguration.fileUpload"
 			id="upload-tooltip"
 			class="tooltipped tooltipped-w tooltipped-no-touch"
 			aria-label="Upload file"
@@ -30,7 +29,7 @@
 				id="upload"
 				type="button"
 				aria-label="Upload file"
-				:disabled="!this.$root.isConnected"
+				:disabled="!$store.state.isConnected"
 			/>
 		</span>
 		<span
@@ -42,18 +41,19 @@
 				id="submit"
 				type="submit"
 				aria-label="Send message"
-				:disabled="!this.$root.isConnected"
+				:disabled="!$store.state.isConnected"
 			/>
 		</span>
 	</form>
 </template>
 
 <script>
-const commands = require("../js/commands/index");
-const socket = require("../js/socket");
-const upload = require("../js/upload");
-const Mousetrap = require("mousetrap");
-const {wrapCursor} = require("undate");
+import Mousetrap from "mousetrap";
+import {wrapCursor} from "undate";
+import autocompletion from "../js/autocompletion";
+import commands from "../js/commands/index";
+import socket from "../js/socket";
+import upload from "../js/upload";
 
 const formattingHotkeys = {
 	"mod+k": "\x03",
@@ -80,6 +80,8 @@ const bracketWraps = {
 	_: "_",
 };
 
+let autocompletionRef = null;
+
 export default {
 	name: "ChatInput",
 	props: {
@@ -87,13 +89,18 @@ export default {
 		channel: Object,
 	},
 	watch: {
+		"channel.id"() {
+			if (autocompletionRef) {
+				autocompletionRef.hide();
+			}
+		},
 		"channel.pendingMessage"() {
 			this.setInputSize();
 		},
 	},
 	mounted() {
-		if (this.$root.settings.autocomplete) {
-			require("../js/autocompletion").enable(this.$refs.input);
+		if (this.$store.state.settings.autocomplete) {
+			autocompletionRef = autocompletion(this.$refs.input);
 		}
 
 		const inputTrap = Mousetrap(this.$refs.input);
@@ -119,7 +126,10 @@ export default {
 		});
 
 		inputTrap.bind(["up", "down"], (e, key) => {
-			if (this.$root.isAutoCompleting || e.target.selectionStart !== e.target.selectionEnd) {
+			if (
+				this.$store.state.isAutoCompleting ||
+				e.target.selectionStart !== e.target.selectionEnd
+			) {
 				return;
 			}
 
@@ -144,12 +154,16 @@ export default {
 			return false;
 		});
 
-		if (this.$root.isFileUploadEnabled) {
+		if (this.$store.state.serverConfiguration.fileUpload) {
 			upload.mounted();
 		}
 	},
 	destroyed() {
-		require("../js/autocompletion").disable();
+		if (autocompletionRef) {
+			autocompletionRef.destroy();
+			autocompletionRef = null;
+		}
+
 		upload.abort();
 	},
 	methods: {
@@ -187,7 +201,7 @@ export default {
 			this.$refs.input.click();
 			this.$refs.input.focus();
 
-			if (!this.$root.isConnected) {
+			if (!this.$store.state.isConnected) {
 				return false;
 			}
 
@@ -198,6 +212,10 @@ export default {
 				return false;
 			}
 
+			if (autocompletionRef) {
+				autocompletionRef.hide();
+			}
+
 			this.channel.inputHistoryPosition = 0;
 			this.channel.pendingMessage = "";
 			this.$refs.input.value = "";
diff --git a/client/components/ChatUserList.vue b/client/components/ChatUserList.vue
index ed6f2e5a..890b83fc 100644
--- a/client/components/ChatUserList.vue
+++ b/client/components/ChatUserList.vue
@@ -26,12 +26,13 @@
 				:class="['user-mode', getModeClass(mode)]"
 			>
 				<template v-if="userSearchInput.length > 0">
-					<UsernameFiltered
+					<Username
 						v-for="user in users"
 						:key="user.original.nick"
 						:on-hover="hoverUser"
 						:active="user.original === activeUser"
-						:user="user"
+						:user="user.original"
+						v-html="user.original.mode + user.string"
 					/>
 				</template>
 				<template v-else>
@@ -49,9 +50,8 @@
 </template>
 
 <script>
-const fuzzy = require("fuzzy");
+import {filter as fuzzyFilter} from "fuzzy";
 import Username from "./Username.vue";
-import UsernameFiltered from "./UsernameFiltered.vue";
 
 const modes = {
 	"~": "owner",
@@ -67,7 +67,6 @@ export default {
 	name: "ChatUserList",
 	components: {
 		Username,
-		UsernameFiltered,
 	},
 	props: {
 		channel: Object,
@@ -82,7 +81,7 @@ export default {
 		// filteredUsers is computed, to avoid unnecessary filtering
 		// as it is shared between filtering and keybindings.
 		filteredUsers() {
-			return fuzzy.filter(this.userSearchInput, this.channel.users, {
+			return fuzzyFilter(this.userSearchInput, this.channel.users, {
 				pre: "<b>",
 				post: "</b>",
 				extract: (u) => u.nick,
@@ -149,6 +148,7 @@ export default {
 			// Prevent propagation to stop global keybind handler from capturing pagedown/pageup
 			// and redirecting it to the message list container for scrolling
 			event.stopImmediatePropagation();
+			event.preventDefault();
 
 			let users = this.channel.users;
 
diff --git a/client/components/ContextMenu.vue b/client/components/ContextMenu.vue
new file mode 100644
index 00000000..d782d295
--- /dev/null
+++ b/client/components/ContextMenu.vue
@@ -0,0 +1,200 @@
+<template>
+	<div
+		v-if="isOpen"
+		id="context-menu-container"
+		@click="containerClick"
+		@contextmenu.prevent="containerClick"
+	>
+		<ul
+			id="context-menu"
+			ref="contextMenu"
+			role="menu"
+			:style="style"
+			tabindex="-1"
+			@mouseleave="activeItem = -1"
+			@keydown.enter.prevent="clickActiveItem"
+		>
+			<template v-for="(item, id) of items">
+				<li
+					:key="item.name"
+					:class="[
+						'context-menu-' + item.type,
+						item.class ? 'context-menu-' + item.class : null,
+						{active: id === activeItem},
+					]"
+					role="menuitem"
+					@mouseover="hoverItem(id)"
+					@click="clickItem(item)"
+				>
+					{{ item.label }}
+				</li>
+			</template>
+		</ul>
+	</div>
+</template>
+
+<script>
+import Mousetrap from "mousetrap";
+import {
+	generateUserContextMenu,
+	generateChannelContextMenu,
+	generateRemoveNetwork,
+} from "../js/helpers/contextMenu.js";
+
+export default {
+	name: "ContextMenu",
+	props: {
+		message: Object,
+	},
+	data() {
+		return {
+			isOpen: false,
+			previousActiveElement: null,
+			items: [],
+			activeItem: -1,
+			style: {
+				left: 0,
+				top: 0,
+			},
+		};
+	},
+	mounted() {
+		Mousetrap.bind("esc", this.close);
+		Mousetrap.bind(["up", "down", "tab", "shift+tab"], this.navigateMenu);
+
+		this.$root.$on("contextmenu:user", this.openUserContextMenu);
+		this.$root.$on("contextmenu:channel", this.openChannelContextMenu);
+		this.$root.$on("contextmenu:removenetwork", this.openRemoveNetworkContextMenu);
+	},
+	destroyed() {
+		Mousetrap.unbind("esc", this.close);
+		Mousetrap.unbind(["up", "down", "tab", "shift+tab"], this.navigateMenu);
+
+		this.$root.$off("contextmenu:user", this.openUserContextMenu);
+		this.$root.$off("contextmenu:channel", this.openChannelContextMenu);
+		this.$root.$off("contextmenu:removenetwork", this.openRemoveNetworkContextMenu);
+	},
+	methods: {
+		openRemoveNetworkContextMenu(data) {
+			const items = generateRemoveNetwork(this.$root, data.lobby);
+			this.open(data.event, items);
+		},
+		openChannelContextMenu(data) {
+			const items = generateChannelContextMenu(this.$root, data.channel, data.network);
+			this.open(data.event, items);
+		},
+		openUserContextMenu(data) {
+			const {network, channel} = this.$store.state.activeChannel;
+
+			const items = generateUserContextMenu(
+				this.$root,
+				channel,
+				network,
+				channel.users.find((u) => u.nick === data.user.nick) || {nick: data.user.nick}
+			);
+			this.open(data.event, items);
+		},
+		open(event, items) {
+			event.preventDefault();
+
+			this.previousActiveElement = document.activeElement;
+			this.items = items;
+			this.activeItem = 0;
+			this.isOpen = true;
+
+			// Position the menu and set the focus on the first item after it's size has updated
+			this.$nextTick(() => {
+				const pos = this.positionContextMenu(event);
+				this.style.left = pos.left + "px";
+				this.style.top = pos.top + "px";
+				this.$refs.contextMenu.focus();
+			});
+		},
+		close() {
+			if (!this.isOpen) {
+				return;
+			}
+
+			this.isOpen = false;
+			this.items = [];
+
+			if (this.previousActiveElement) {
+				this.previousActiveElement.focus();
+				this.previousActiveElement = null;
+			}
+		},
+		hoverItem(id) {
+			this.activeItem = id;
+		},
+		clickItem(item) {
+			this.close();
+
+			if (item.action) {
+				item.action();
+			} else if (item.link) {
+				this.$router.push(item.link);
+			}
+		},
+		clickActiveItem() {
+			if (this.items[this.activeItem]) {
+				this.clickItem(this.items[this.activeItem]);
+			}
+		},
+		navigateMenu(event, key) {
+			event.preventDefault();
+
+			const direction = key === "down" || key === "tab" ? 1 : -1;
+
+			let currentIndex = this.activeItem;
+
+			currentIndex += direction;
+
+			const nextItem = this.items[currentIndex];
+
+			// If the next item we would select is a divider, skip over it
+			if (nextItem && nextItem.type === "divider") {
+				currentIndex += direction;
+			}
+
+			if (currentIndex < 0) {
+				currentIndex += this.items.length;
+			}
+
+			if (currentIndex > this.items.length - 1) {
+				currentIndex -= this.items.length;
+			}
+
+			this.activeItem = currentIndex;
+		},
+		containerClick(event) {
+			if (event.currentTarget === event.target) {
+				this.close();
+			}
+		},
+		positionContextMenu(event) {
+			const element = event.target;
+			const menuWidth = this.$refs.contextMenu.offsetWidth;
+			const menuHeight = this.$refs.contextMenu.offsetHeight;
+
+			if (element && element.classList.contains("menu")) {
+				return {
+					left: element.getBoundingClientRect().left - (menuWidth - element.offsetWidth),
+					top: element.getBoundingClientRect().top + element.offsetHeight,
+				};
+			}
+
+			const offset = {left: event.pageX, top: event.pageY};
+
+			if (window.innerWidth - offset.left < menuWidth) {
+				offset.left = window.innerWidth - menuWidth;
+			}
+
+			if (window.innerHeight - offset.top < menuHeight) {
+				offset.top = window.innerHeight - menuHeight;
+			}
+
+			return offset;
+		},
+	},
+};
+</script>
diff --git a/client/components/DateMarker.vue b/client/components/DateMarker.vue
index a7d89a00..eacef30f 100644
--- a/client/components/DateMarker.vue
+++ b/client/components/DateMarker.vue
@@ -1,13 +1,16 @@
 <template>
 	<div :aria-label="localeDate" class="date-marker-container tooltipped tooltipped-s">
 		<div class="date-marker">
-			<span :data-label="friendlyDate()" class="date-marker-text" />
+			<span :aria-label="friendlyDate()" class="date-marker-text" />
 		</div>
 	</div>
 </template>
 
 <script>
-const moment = require("moment");
+import dayjs from "dayjs";
+import calendar from "dayjs/plugin/calendar";
+
+dayjs.extend(calendar);
 
 export default {
 	name: "DateMarker",
@@ -16,7 +19,7 @@ export default {
 	},
 	computed: {
 		localeDate() {
-			return moment(this.message.time).format("D MMMM YYYY");
+			return dayjs(this.message.time).format("D MMMM YYYY");
 		},
 	},
 	mounted() {
@@ -40,7 +43,7 @@ export default {
 		},
 		friendlyDate() {
 			// See http://momentjs.com/docs/#/displaying/calendar-time/
-			return moment(this.message.time).calendar(null, {
+			return dayjs(this.message.time).calendar(null, {
 				sameDay: "[Today]",
 				lastDay: "[Yesterday]",
 				lastWeek: "D MMMM YYYY",
diff --git a/client/components/ImageViewer.vue b/client/components/ImageViewer.vue
new file mode 100644
index 00000000..0e10c5d6
--- /dev/null
+++ b/client/components/ImageViewer.vue
@@ -0,0 +1,354 @@
+<template>
+	<div
+		id="image-viewer"
+		ref="viewer"
+		:class="{opened: link !== null}"
+		@wheel="onMouseWheel"
+		@touchstart.passive="onTouchStart"
+		@click="onClick"
+	>
+		<template v-if="link !== null">
+			<button class="close-btn" aria-label="Close"></button>
+			<a class="open-btn" :href="link.link" target="_blank" rel="noopener"></a>
+
+			<img
+				ref="image"
+				:src="link.thumb"
+				alt=""
+				:style="computeImageStyles"
+				@load="onImageLoad"
+				@mousedown="onImageMouseDown"
+				@touchstart.passive="onImageTouchStart"
+			/>
+		</template>
+	</div>
+</template>
+
+<script>
+import Mousetrap from "mousetrap";
+
+export default {
+	name: "ImageViewer",
+	data() {
+		return {
+			link: null,
+			position: {
+				x: 0,
+				y: 0,
+			},
+			transform: {
+				x: 0,
+				y: 0,
+				scale: 0,
+			},
+		};
+	},
+	computed: {
+		computeImageStyles() {
+			return {
+				left: `${this.position.x}px`,
+				top: `${this.position.y}px`,
+				transform: `translate3d(${this.transform.x}px, ${this.transform.y}px, 0) scale3d(${this.transform.scale}, ${this.transform.scale}, 1)`,
+			};
+		},
+	},
+	watch: {
+		link() {
+			// TODO: history.pushState
+			if (this.link === null) {
+				return;
+			}
+
+			this.$root.$on("resize", this.correctPosition);
+		},
+	},
+	mounted() {
+		Mousetrap.bind("esc", this.closeViewer);
+	},
+	destroyed() {
+		Mousetrap.unbind("esc", this.closeViewer);
+	},
+	methods: {
+		closeViewer() {
+			if (this.link === null) {
+				return;
+			}
+
+			this.$root.$off("resize", this.correctPosition);
+			this.link = null;
+		},
+		onImageLoad() {
+			this.prepareImage();
+		},
+		prepareImage() {
+			const viewer = this.$refs.viewer;
+			const image = this.$refs.image;
+			const width = viewer.offsetWidth;
+			const height = viewer.offsetHeight;
+			const scale = Math.min(1, width / image.width, height / image.height);
+
+			this.position.x = -image.naturalWidth / 2;
+			this.position.y = -image.naturalHeight / 2;
+			this.transform.scale = Math.max(scale, 0.1);
+			this.transform.x = width / 2;
+			this.transform.y = height / 2;
+		},
+		calculateZoomShift(newScale, x, y, oldScale) {
+			const imageWidth = this.$refs.image.width;
+			const centerX = this.$refs.viewer.offsetWidth / 2;
+			const centerY = this.$refs.viewer.offsetHeight / 2;
+
+			return {
+				x:
+					centerX -
+					((centerX - (y - (imageWidth * x) / 2)) / x) * newScale +
+					(imageWidth * newScale) / 2,
+				y:
+					centerY -
+					((centerY - (oldScale - (imageWidth * x) / 2)) / x) * newScale +
+					(imageWidth * newScale) / 2,
+			};
+		},
+		correctPosition() {
+			const image = this.$refs.image;
+			const widthScaled = image.width * this.transform.scale;
+			const heightScaled = image.height * this.transform.scale;
+			const containerWidth = this.$refs.viewer.offsetWidth;
+			const containerHeight = this.$refs.viewer.offsetHeight;
+
+			if (widthScaled < containerWidth) {
+				this.transform.x = containerWidth / 2;
+			} else if (this.transform.x - widthScaled / 2 > 0) {
+				this.transform.x = widthScaled / 2;
+			} else if (this.transform.x + widthScaled / 2 < containerWidth) {
+				this.transform.x = containerWidth - widthScaled / 2;
+			}
+
+			if (heightScaled < containerHeight) {
+				this.transform.y = containerHeight / 2;
+			} else if (this.transform.y - heightScaled / 2 > 0) {
+				this.transform.y = heightScaled / 2;
+			} else if (this.transform.y + heightScaled / 2 < containerHeight) {
+				this.transform.y = containerHeight - heightScaled / 2;
+			}
+		},
+		// Reduce multiple touch points into a single x/y/scale
+		reduceTouches(touches) {
+			let totalX = 0;
+			let totalY = 0;
+			let totalScale = 0;
+
+			for (let i = 0; i < touches.length; i++) {
+				const x = touches[i].clientX;
+				const y = touches[i].clientY;
+
+				totalX += x;
+				totalY += y;
+
+				for (let i2 = 0; i2 < touches.length; i2++) {
+					if (i !== i2) {
+						const x2 = touches[i2].clientX;
+						const y2 = touches[i2].clientY;
+						totalScale += Math.sqrt((x - x2) * (x - x2) + (y - y2) * (y - y2));
+					}
+				}
+			}
+
+			if (totalScale === 0) {
+				totalScale = 1;
+			}
+
+			return {
+				x: totalX / touches.length,
+				y: totalY / touches.length,
+				scale: totalScale / touches.length,
+			};
+		},
+		onTouchStart(e) {
+			// prevent sidebar touchstart event, we don't want to interact with sidebar while in image viewer
+			e.stopImmediatePropagation();
+		},
+		// Touch image manipulation:
+		// 1. Move around by dragging it with one finger
+		// 2. Change image scale by using two fingers
+		onImageTouchStart(e) {
+			const image = this.$refs.image;
+			let touch = this.reduceTouches(e.touches);
+			let currentTouches = e.touches;
+			let touchEndFingers = 0;
+
+			const currentTransform = {
+				x: touch.x,
+				y: touch.y,
+				scale: touch.scale,
+			};
+
+			const startTransform = {
+				x: this.transform.x,
+				y: this.transform.y,
+				scale: this.transform.scale,
+			};
+
+			const touchMove = (moveEvent) => {
+				touch = this.reduceTouches(moveEvent.touches);
+
+				// TODO: There's bugs with multi finger interactions, needs more testing
+				if (currentTouches.length !== moveEvent.touches.length) {
+					currentTransform.x = touch.x;
+					currentTransform.y = touch.y;
+					currentTransform.scale = touch.scale;
+					startTransform.x = this.transform.x;
+					startTransform.y = this.transform.y;
+					startTransform.scale = this.transform.scale;
+				}
+
+				const deltaX = touch.x - currentTransform.x;
+				const deltaY = touch.y - currentTransform.y;
+				const deltaScale = touch.scale / currentTransform.scale;
+				currentTouches = moveEvent.touches;
+				touchEndFingers = 0;
+
+				const newScale = Math.min(3, Math.max(0.1, startTransform.scale * deltaScale));
+				const fixedPosition = this.calculateZoomShift(
+					newScale,
+					startTransform.scale,
+					startTransform.x,
+					startTransform.y
+				);
+
+				if (newScale > 1) {
+					this.transform.x = fixedPosition.x + deltaX;
+					this.transform.y = fixedPosition.y + deltaY;
+				} else if (Math.abs(deltaX) > Math.abs(deltaY)) {
+					this.transform.x = fixedPosition.x + deltaX;
+				} else {
+					this.transform.y = fixedPosition.y + deltaY;
+				}
+
+				this.transform.scale = newScale;
+			};
+
+			const touchEnd = (endEvent) => {
+				const changedTouches = endEvent.changedTouches.length;
+
+				if (currentTouches.length > changedTouches + touchEndFingers) {
+					touchEndFingers += changedTouches;
+					return;
+				}
+
+				// todo: this is swipe to close, but it's not working very well due to unfinished delta calculation
+				/* if (
+					this.transform.scale <= 1 &&
+					endEvent.changedTouches[0].clientY - startTransform.y <= -70
+				) {
+					return this.closeViewer();
+				}*/
+
+				this.correctPosition();
+
+				image.removeEventListener("touchmove", touchMove, {passive: true});
+				image.removeEventListener("touchend", touchEnd, {passive: true});
+			};
+
+			image.addEventListener("touchmove", touchMove, {passive: true});
+			image.addEventListener("touchend", touchEnd, {passive: true});
+		},
+		// Image mouse manipulation:
+		// 1. Mouse wheel scrolling will zoom in and out
+		// 2. If image is zoomed in, simply dragging it will move it around
+		onImageMouseDown(e) {
+			// todo: ignore if in touch event currently?
+			// only left mouse
+			if (e.which !== 1) {
+				return;
+			}
+
+			e.stopPropagation();
+			e.preventDefault();
+
+			const viewer = this.$refs.viewer;
+			const image = this.$refs.image;
+
+			const startX = e.clientX;
+			const startY = e.clientY;
+			const startTransformX = this.transform.x;
+			const startTransformY = this.transform.y;
+			const widthScaled = image.width * this.transform.scale;
+			const heightScaled = image.height * this.transform.scale;
+			const containerWidth = viewer.offsetWidth;
+			const containerHeight = viewer.offsetHeight;
+			const centerX = this.transform.x - widthScaled / 2;
+			const centerY = this.transform.y - heightScaled / 2;
+			let movedDistance = 0;
+
+			const mouseMove = (moveEvent) => {
+				moveEvent.stopPropagation();
+				moveEvent.preventDefault();
+
+				const newX = moveEvent.clientX - startX;
+				const newY = moveEvent.clientY - startY;
+
+				movedDistance = Math.max(movedDistance, Math.abs(newX), Math.abs(newY));
+
+				if (centerX < 0 || widthScaled + centerX > containerWidth) {
+					this.transform.x = startTransformX + newX;
+				}
+
+				if (centerY < 0 || heightScaled + centerY > containerHeight) {
+					this.transform.y = startTransformY + newY;
+				}
+			};
+
+			const mouseUp = (upEvent) => {
+				this.correctPosition();
+
+				if (movedDistance < 2 && upEvent.button === 0) {
+					this.closeViewer();
+				}
+
+				image.removeEventListener("mousemove", mouseMove);
+				image.removeEventListener("mouseup", mouseUp);
+			};
+
+			image.addEventListener("mousemove", mouseMove);
+			image.addEventListener("mouseup", mouseUp);
+		},
+		// If image is zoomed in, holding ctrl while scrolling will move the image up and down
+		onMouseWheel(e) {
+			// if image viewer is closing (css animation), you can still trigger mousewheel
+			// TODO: Figure out a better fix for this
+			if (this.link === null) {
+				return;
+			}
+
+			e.preventDefault(); // TODO: Can this be passive?
+
+			if (e.ctrlKey) {
+				this.transform.y += e.deltaY;
+			} else {
+				const delta = e.deltaY > 0 ? 0.1 : -0.1;
+				const newScale = Math.min(3, Math.max(0.1, this.transform.scale + delta));
+				const fixedPosition = this.calculateZoomShift(
+					newScale,
+					this.transform.scale,
+					this.transform.x,
+					this.transform.y
+				);
+				this.transform.scale = newScale;
+				this.transform.x = fixedPosition.x;
+				this.transform.y = fixedPosition.y;
+			}
+
+			this.correctPosition();
+		},
+		onClick(e) {
+			// If click triggers on the image, ignore it
+			if (e.target === this.$refs.image) {
+				return;
+			}
+
+			this.closeViewer();
+		},
+	},
+};
+</script>
diff --git a/client/components/InlineChannel.vue b/client/components/InlineChannel.vue
new file mode 100644
index 00000000..2a1478cf
--- /dev/null
+++ b/client/components/InlineChannel.vue
@@ -0,0 +1,30 @@
+<template>
+	<span class="inline-channel" dir="auto" role="button" tabindex="0" @click="onClick"
+		><slot></slot
+	></span>
+</template>
+
+<script>
+import socket from "../js/socket";
+
+export default {
+	name: "InlineChannel",
+	props: {
+		channel: String,
+	},
+	methods: {
+		onClick() {
+			const existingChannel = this.$store.getters.findChannelOnCurrentNetwork(this.channel);
+
+			if (existingChannel) {
+				this.$root.switchToChannel(existingChannel);
+			}
+
+			socket.emit("input", {
+				target: this.$store.state.activeChannel.channel.id,
+				text: "/join " + this.channel,
+			});
+		},
+	},
+};
+</script>
diff --git a/client/components/JoinChannel.vue b/client/components/JoinChannel.vue
index 7d0e1669..f18ca848 100644
--- a/client/components/JoinChannel.vue
+++ b/client/components/JoinChannel.vue
@@ -59,14 +59,12 @@ export default {
 	},
 	methods: {
 		onSubmit() {
-			const channelToFind = this.inputChannel.toLowerCase();
-			const existingChannel = this.network.channels.find(
-				(c) => c.name.toLowerCase() === channelToFind
+			const existingChannel = this.$store.getters.findChannelOnCurrentNetwork(
+				this.inputChannel
 			);
 
 			if (existingChannel) {
-				const $ = require("jquery");
-				$(`#sidebar .chan[data-id="${existingChannel.id}"]`).trigger("click");
+				this.$root.switchToChannel(existingChannel);
 			} else {
 				const chanTypes = this.network.serverOptions.CHANTYPES;
 				let channel = this.inputChannel;
diff --git a/client/components/LinkPreview.vue b/client/components/LinkPreview.vue
index 298ec998..41692ae9 100644
--- a/client/components/LinkPreview.vue
+++ b/client/components/LinkPreview.vue
@@ -1,5 +1,11 @@
 <template>
-	<div v-if="link.shown" v-show="link.canDisplay" ref="container" class="preview" dir="ltr">
+	<div
+		v-if="link.shown"
+		v-show="link.sourceLoaded || link.type === 'link'"
+		ref="container"
+		class="preview"
+		dir="ltr"
+	>
 		<div
 			ref="content"
 			:class="['toggle-content', 'toggle-type-' + link.type, {opened: isContentShown}]"
@@ -7,10 +13,12 @@
 			<template v-if="link.type === 'link'">
 				<a
 					v-if="link.thumb"
+					v-show="link.sourceLoaded"
 					:href="link.link"
 					class="toggle-thumbnail"
 					target="_blank"
 					rel="noopener"
+					@click="onThumbnailClick"
 				>
 					<img
 						:src="link.thumb"
@@ -54,24 +62,45 @@
 				</div>
 			</template>
 			<template v-else-if="link.type === 'image'">
-				<a :href="link.link" class="toggle-thumbnail" target="_blank" rel="noopener">
-					<img :src="link.thumb" decoding="async" alt="" @load="onPreviewReady" />
+				<a
+					:href="link.link"
+					class="toggle-thumbnail"
+					target="_blank"
+					rel="noopener"
+					@click="onThumbnailClick"
+				>
+					<img
+						v-show="link.sourceLoaded"
+						:src="link.thumb"
+						decoding="async"
+						alt=""
+						@load="onPreviewReady"
+					/>
 				</a>
 			</template>
 			<template v-else-if="link.type === 'video'">
-				<video preload="metadata" controls @canplay="onPreviewReady">
+				<video
+					v-show="link.sourceLoaded"
+					preload="metadata"
+					controls
+					@canplay="onPreviewReady"
+				>
 					<source :src="link.media" :type="link.mediaType" />
 				</video>
 			</template>
 			<template v-else-if="link.type === 'audio'">
-				<audio controls preload="metadata" @canplay="onPreviewReady">
+				<audio
+					v-show="link.sourceLoaded"
+					controls
+					preload="metadata"
+					@canplay="onPreviewReady"
+				>
 					<source :src="link.media" :type="link.mediaType" />
 				</audio>
 			</template>
 			<template v-else-if="link.type === 'error'">
 				<em v-if="link.error === 'image-too-big'">
-					This image is larger than {{ link.maxSize | friendlysize }} and cannot be
-					previewed.
+					This image is larger than {{ imageMaxSize }} and cannot be previewed.
 					<a :href="link.link" target="_blank" rel="noopener">Click here</a>
 					to open it in a new window.
 				</em>
@@ -101,6 +130,8 @@
 </template>
 
 <script>
+import friendlysize from "../js/helpers/friendlysize";
+
 export default {
 	name: "LinkPreview",
 	props: {
@@ -117,6 +148,13 @@ export default {
 		moreButtonLabel() {
 			return this.isContentShown ? "Less" : "More";
 		},
+		imageMaxSize() {
+			if (!this.link.maxSize) {
+				return;
+			}
+
+			return friendlysize(this.link.maxSize);
+		},
 	},
 	watch: {
 		"link.type"() {
@@ -138,7 +176,7 @@ export default {
 	destroyed() {
 		// Let this preview go through load/canplay events again,
 		// Otherwise the browser can cause a resize on video elements
-		this.link.canDisplay = false;
+		this.link.sourceLoaded = false;
 	},
 	methods: {
 		onPreviewUpdate() {
@@ -147,32 +185,37 @@ export default {
 				return;
 			}
 
-			// Error don't have any media to render
+			// Error does not have any media to render
 			if (this.link.type === "error") {
 				this.onPreviewReady();
 			}
 
 			// If link doesn't have a thumbnail, render it
-			if (this.link.type === "link" && !this.link.thumb) {
-				this.onPreviewReady();
+			if (this.link.type === "link") {
+				this.handleResize();
+				this.keepScrollPosition();
 			}
 		},
 		onPreviewReady() {
-			this.$set(this.link, "canDisplay", true);
+			this.$set(this.link, "sourceLoaded", true);
 
 			this.keepScrollPosition();
 
-			if (this.link.type !== "link") {
-				return;
+			if (this.link.type === "link") {
+				this.handleResize();
 			}
-
-			this.handleResize();
 		},
 		onThumbnailError() {
 			// If thumbnail fails to load, hide it and show the preview without it
 			this.link.thumb = "";
 			this.onPreviewReady();
 		},
+		onThumbnailClick(e) {
+			e.preventDefault();
+
+			const imageViewer = this.$root.$refs.app.$refs.imageViewer;
+			imageViewer.link = this.link;
+		},
 		onMoreClick() {
 			this.isContentShown = !this.isContentShown;
 			this.keepScrollPosition();
@@ -194,8 +237,8 @@ export default {
 				case "error":
 					defaultState =
 						this.link.error === "image-too-big"
-							? this.$root.settings.media
-							: this.$root.settings.links;
+							? this.$store.state.settings.media
+							: this.$store.state.settings.links;
 					break;
 
 				case "loading":
@@ -203,11 +246,11 @@ export default {
 					break;
 
 				case "link":
-					defaultState = this.$root.settings.links;
+					defaultState = this.$store.state.settings.links;
 					break;
 
 				default:
-					defaultState = this.$root.settings.media;
+					defaultState = this.$store.state.settings.media;
 			}
 
 			this.link.shown = this.link.shown && defaultState;
diff --git a/client/components/LinkPreviewFileSize.vue b/client/components/LinkPreviewFileSize.vue
index 3e2b0179..4fa03bc6 100644
--- a/client/components/LinkPreviewFileSize.vue
+++ b/client/components/LinkPreviewFileSize.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script>
-const constants = require("../js/constants");
+import constants from "../js/constants";
 
 export default {
 	name: "LinkPreviewFileSize",
diff --git a/client/components/Message.vue b/client/components/Message.vue
index 5f5c68ec..b10daf9b 100644
--- a/client/components/Message.vue
+++ b/client/components/Message.vue
@@ -21,7 +21,6 @@
 			<span class="from"><span class="only-copy">* </span></span>
 			<span class="content" dir="auto">
 				<Username :user="message.from" dir="auto" />&#32;<ParsedMessage
-					:network="network"
 					:message="message"
 				/>
 				<LinkPreview
@@ -68,13 +67,12 @@
 </template>
 
 <script>
+import dayjs from "dayjs";
 import Username from "./Username.vue";
 import LinkPreview from "./LinkPreview.vue";
 import ParsedMessage from "./ParsedMessage.vue";
 import MessageTypes from "./MessageTypes";
-
-const moment = require("moment");
-const constants = require("../js/constants");
+import constants from "../js/constants";
 
 MessageTypes.ParsedMessage = ParsedMessage;
 MessageTypes.LinkPreview = LinkPreview;
@@ -85,24 +83,22 @@ export default {
 	components: MessageTypes,
 	props: {
 		message: Object,
+		channel: Object,
 		network: Object,
 		keepScrollPosition: Function,
 	},
 	computed: {
 		messageTime() {
-			const format = this.$root.settings.showSeconds
+			const format = this.$store.state.settings.showSeconds
 				? constants.timeFormats.msgWithSeconds
 				: constants.timeFormats.msgDefault;
 
-			return moment(this.message.time).format(format);
+			return dayjs(this.message.time).format(format);
 		},
 		messageComponent() {
 			return "message-" + this.message.type;
 		},
 	},
-	mounted() {
-		require("../js/renderPreview");
-	},
 	methods: {
 		isAction() {
 			return typeof MessageTypes["message-" + this.message.type] !== "undefined";
diff --git a/client/components/MessageCondensed.vue b/client/components/MessageCondensed.vue
index 5b504fce..b3897e8f 100644
--- a/client/components/MessageCondensed.vue
+++ b/client/components/MessageCondensed.vue
@@ -18,7 +18,7 @@
 </template>
 
 <script>
-const constants = require("../js/constants");
+import constants from "../js/constants";
 import Message from "./Message.vue";
 
 export default {
diff --git a/client/components/MessageList.vue b/client/components/MessageList.vue
index 710485bc..6d811442 100644
--- a/client/components/MessageList.vue
+++ b/client/components/MessageList.vue
@@ -3,7 +3,7 @@
 		<div :class="['show-more', {show: channel.moreHistoryAvailable}]">
 			<button
 				ref="loadMoreButton"
-				:disabled="channel.historyLoading || !$root.isConnected"
+				:disabled="channel.historyLoading || !$store.state.isConnected"
 				class="btn"
 				@click="onShowMoreClick"
 			>
@@ -42,6 +42,7 @@
 				<Message
 					v-else
 					:key="message.id"
+					:channel="channel"
 					:network="network"
 					:message="message"
 					:keep-scroll-position="keepScrollPosition"
@@ -55,8 +56,8 @@
 <script>
 require("intersection-observer");
 
-const constants = require("../js/constants");
-const clipboard = require("../js/clipboard");
+import constants from "../js/constants";
+import clipboard from "../js/clipboard";
 import socket from "../js/socket";
 import Message from "./Message.vue";
 import MessageCondensed from "./MessageCondensed.vue";
@@ -80,14 +81,14 @@ export default {
 			}
 
 			// If actions are hidden, just return a message list with them excluded
-			if (this.$root.settings.statusMessages === "hidden") {
+			if (this.$store.state.settings.statusMessages === "hidden") {
 				return this.channel.messages.filter(
 					(message) => !constants.condensedTypes.includes(message.type)
 				);
 			}
 
 			// If actions are not condensed, just return raw message list
-			if (this.$root.settings.statusMessages !== "condensed") {
+			if (this.$store.state.settings.statusMessages !== "condensed") {
 				return this.channel.messages;
 			}
 
@@ -218,8 +219,6 @@ export default {
 			this.keepScrollPosition();
 
 			// Tell the server we're toggling so it remembers at page reload
-			// TODO Avoid sending many single events when using `/collapse` or `/expand`
-			// See https://github.com/thelounge/thelounge/issues/1377
 			socket.emit("msg:preview:toggle", {
 				target: this.channel.id,
 				msgId: message.id,
@@ -228,7 +227,7 @@ export default {
 			});
 		},
 		onShowMoreClick() {
-			if (!this.$root.isConnected) {
+			if (!this.$store.state.isConnected) {
 				return;
 			}
 
diff --git a/client/components/MessageTypes/index.js b/client/components/MessageTypes/index.js
index e595a33a..4d873bd6 100644
--- a/client/components/MessageTypes/index.js
+++ b/client/components/MessageTypes/index.js
@@ -6,7 +6,7 @@
 // Second argument says it's recursive, third makes sure we only load templates.
 const requireViews = require.context(".", false, /\.vue$/);
 
-module.exports = requireViews.keys().reduce((acc, path) => {
+export default requireViews.keys().reduce((acc, path) => {
 	acc["message-" + path.substring(2, path.length - 4)] = requireViews(path).default;
 
 	return acc;
diff --git a/client/components/NetworkForm.vue b/client/components/NetworkForm.vue
new file mode 100644
index 00000000..a6735fdf
--- /dev/null
+++ b/client/components/NetworkForm.vue
@@ -0,0 +1,242 @@
+<template>
+	<div id="connect" class="window" role="tabpanel" aria-label="Connect">
+		<div class="header">
+			<SidebarToggle />
+		</div>
+		<form class="container" method="post" action="" @submit.prevent="onSubmit">
+			<div class="row">
+				<div class="col-sm-12">
+					<h1 class="title">
+						<template v-if="defaults.uuid">
+							<input type="hidden" name="uuid" :value="defaults.uuid" />
+							Edit {{ defaults.name }}
+						</template>
+						<template v-else>
+							<template v-if="config.public">The Lounge - </template>
+							Connect
+							<template v-if="!config.displayNetwork">
+								<template v-if="config.lockNetwork">
+									to {{ defaults.name }}
+								</template>
+							</template>
+						</template>
+					</h1>
+				</div>
+				<template v-if="config.displayNetwork">
+					<div>
+						<div class="col-sm-12">
+							<h2>Network settings</h2>
+						</div>
+						<div class="col-sm-3">
+							<label for="connect:name">Name</label>
+						</div>
+						<div class="col-sm-9">
+							<input
+								id="connect:name"
+								class="input"
+								name="name"
+								:value="defaults.name"
+								maxlength="100"
+							/>
+						</div>
+						<div class="col-sm-3">
+							<label for="connect:host">Server</label>
+						</div>
+						<div class="col-sm-6 col-xs-8">
+							<input
+								id="connect:host"
+								class="input"
+								name="host"
+								:value="defaults.host"
+								aria-label="Server address"
+								maxlength="255"
+								required
+								:disabled="config.lockNetwork ? true : false"
+							/>
+						</div>
+						<div class="col-sm-3 col-xs-4">
+							<div class="port">
+								<input
+									class="input"
+									type="number"
+									min="1"
+									max="65535"
+									name="port"
+									:value="defaults.port"
+									aria-label="Server port"
+									:disabled="config.lockNetwork ? true : false"
+								/>
+							</div>
+						</div>
+						<div class="clearfix" />
+						<div class="col-sm-9 col-sm-offset-3">
+							<label class="tls">
+								<input
+									type="checkbox"
+									name="tls"
+									:checked="defaults.tls ? true : false"
+									:disabled="config.lockNetwork ? true : false"
+								/>
+								Use secure connection (TLS)
+							</label>
+						</div>
+						<div class="col-sm-9 col-sm-offset-3">
+							<label class="tls">
+								<input
+									type="checkbox"
+									name="rejectUnauthorized"
+									:checked="defaults.rejectUnauthorized ? true : false"
+									:disabled="config.lockNetwork ? true : false"
+								/>
+								Only allow trusted certificates
+							</label>
+						</div>
+						<div class="clearfix" />
+					</div>
+				</template>
+				<div class="col-sm-12">
+					<h2>User preferences</h2>
+				</div>
+				<div class="col-sm-3">
+					<label for="connect:nick">Nick</label>
+				</div>
+				<div class="col-sm-9">
+					<input
+						id="connect:nick"
+						class="input nick"
+						name="nick"
+						:value="defaults.nick"
+						maxlength="100"
+						required
+						@input="onNickChanged"
+					/>
+				</div>
+				<template v-if="!config.useHexIp">
+					<div class="col-sm-3">
+						<label for="connect:username">Username</label>
+					</div>
+					<div class="col-sm-9">
+						<input
+							id="connect:username"
+							ref="usernameInput"
+							class="input username"
+							name="username"
+							:value="defaults.username"
+							maxlength="512"
+						/>
+					</div>
+				</template>
+				<div class="col-sm-3">
+					<label for="connect:password">Password</label>
+				</div>
+				<div class="col-sm-9 password-container">
+					<RevealPassword v-slot:default="slotProps">
+						<input
+							id="connect:password"
+							v-model="defaults.password"
+							class="input"
+							:type="slotProps.isVisible ? 'text' : 'password'"
+							name="password"
+							maxlength="512"
+						/>
+					</RevealPassword>
+				</div>
+				<div class="col-sm-3">
+					<label for="connect:realname">Real name</label>
+				</div>
+				<div class="col-sm-9">
+					<input
+						id="connect:realname"
+						class="input"
+						name="realname"
+						:value="defaults.realname"
+						maxlength="512"
+					/>
+				</div>
+				<template v-if="defaults.uuid">
+					<div class="col-sm-3">
+						<label for="connect:commands">Commands</label>
+					</div>
+					<div class="col-sm-9">
+						<textarea
+							id="connect:commands"
+							class="input"
+							name="commands"
+							placeholder="One raw command per line, each command will be executed on new connection"
+							:value="defaults.commands ? defaults.commands.join('\n') : ''"
+						/>
+					</div>
+					<div class="col-sm-9 col-sm-offset-3">
+						<button type="submit" class="btn" :disabled="disabled ? true : false">
+							Save
+						</button>
+					</div>
+				</template>
+				<template v-else>
+					<div class="col-sm-3">
+						<label for="connect:channels">Channels</label>
+					</div>
+					<div class="col-sm-9">
+						<input
+							id="connect:channels"
+							class="input"
+							name="join"
+							:value="defaults.join"
+						/>
+					</div>
+					<div class="col-sm-9 col-sm-offset-3">
+						<button type="submit" class="btn" :disabled="disabled ? true : false">
+							Connect
+						</button>
+					</div>
+				</template>
+			</div>
+		</form>
+	</div>
+</template>
+
+<script>
+import RevealPassword from "./RevealPassword.vue";
+import SidebarToggle from "./SidebarToggle.vue";
+
+export default {
+	name: "NetworkForm",
+	components: {
+		RevealPassword,
+		SidebarToggle,
+	},
+	props: {
+		handleSubmit: Function,
+		defaults: Object,
+		disabled: Boolean,
+	},
+	data() {
+		return {
+			config: this.$store.state.serverConfiguration,
+			previousUsername: this.defaults.username,
+		};
+	},
+	methods: {
+		onNickChanged(event) {
+			if (
+				!this.$refs.usernameInput.value ||
+				this.$refs.usernameInput.value === this.previousUsername
+			) {
+				this.$refs.usernameInput.value = event.target.value;
+			}
+
+			this.previousUsername = event.target.value;
+		},
+		onSubmit(event) {
+			const formData = new FormData(event.target);
+			const data = {};
+
+			for (const item of formData.entries()) {
+				data[item[0]] = item[1];
+			}
+
+			this.handleSubmit(data);
+		},
+	},
+};
+</script>
diff --git a/client/components/NetworkList.vue b/client/components/NetworkList.vue
index f099b840..c10e2f8d 100644
--- a/client/components/NetworkList.vue
+++ b/client/components/NetworkList.vue
@@ -26,14 +26,11 @@
 				'not-connected': !network.status.connected,
 				'not-secure': !network.status.secure,
 			}"
-			:data-uuid="network.uuid"
-			:data-nick="network.nick"
 			class="network"
 			role="region"
 		>
 			<NetworkLobby
 				:network="network"
-				:active-channel="activeChannel"
 				:is-join-channel-shown="network.isJoinChannelShown"
 				@toggleJoinChannel="network.isJoinChannelShown = !network.isJoinChannelShown"
 			/>
@@ -63,7 +60,6 @@
 					:key="channel.id"
 					:channel="channel"
 					:network="network"
-					:active-channel="activeChannel"
 				/>
 			</Draggable>
 		</div>
@@ -86,9 +82,10 @@ export default {
 		Channel,
 		Draggable,
 	},
-	props: {
-		activeChannel: Object,
-		networks: Array,
+	computed: {
+		networks() {
+			return this.$store.state.networks;
+		},
 	},
 	methods: {
 		isCurrentlyInTouch(e) {
@@ -116,8 +113,7 @@ export default {
 				return;
 			}
 
-			const {findChannel} = require("../js/vue");
-			const channel = findChannel(e.moved.element.id);
+			const channel = this.$store.getters.findChannel(e.moved.element.id);
 
 			if (!channel) {
 				return;
diff --git a/client/components/NetworkLobby.vue b/client/components/NetworkLobby.vue
index 2d802710..0f22af13 100644
--- a/client/components/NetworkLobby.vue
+++ b/client/components/NetworkLobby.vue
@@ -1,5 +1,5 @@
 <template>
-	<ChannelWrapper :network="network" :channel="channel" :active-channel="activeChannel">
+	<ChannelWrapper :network="network" :channel="channel">
 		<button
 			v-if="network.channels.length > 1"
 			:aria-controls="'network-' + network.uuid"
@@ -28,7 +28,7 @@
 				<span class="not-connected-icon" />
 			</span>
 			<span v-if="channel.unread" :class="{highlight: channel.highlight}" class="badge">{{
-				channel.unread | roundBadgeNumber
+				unreadCount
 			}}</span>
 		</div>
 		<span
@@ -46,8 +46,9 @@
 </template>
 
 <script>
+import roundBadgeNumber from "../js/helpers/roundBadgeNumber";
 import ChannelWrapper from "./ChannelWrapper.vue";
-const storage = require("../js/localStorage");
+import storage from "../js/localStorage";
 
 export default {
 	name: "Channel",
@@ -55,7 +56,6 @@ export default {
 		ChannelWrapper,
 	},
 	props: {
-		activeChannel: Object,
 		network: Object,
 		isJoinChannelShown: Boolean,
 	},
@@ -66,6 +66,9 @@ export default {
 		joinChannelLabel() {
 			return this.isJoinChannelShown ? "Cancel" : "Join a channel…";
 		},
+		unreadCount() {
+			return roundBadgeNumber(this.channel.unread);
+		},
 	},
 	methods: {
 		onCollapseClick() {
diff --git a/client/components/ParsedMessage.vue b/client/components/ParsedMessage.vue
index eaad359f..842cbb34 100644
--- a/client/components/ParsedMessage.vue
+++ b/client/components/ParsedMessage.vue
@@ -1,5 +1,5 @@
 <script>
-const parse = require("../js/libs/handlebars/parse");
+import parse from "../js/helpers/parse";
 
 export default {
 	name: "ParsedMessage",
diff --git a/client/components/RevealPassword.vue b/client/components/RevealPassword.vue
new file mode 100644
index 00000000..d9d1323c
--- /dev/null
+++ b/client/components/RevealPassword.vue
@@ -0,0 +1,33 @@
+<template>
+	<div>
+		<slot :isVisible="isVisible" />
+		<span
+			ref="revealButton"
+			type="button"
+			:class="[
+				'reveal-password tooltipped tooltipped-n tooltipped-no-delay',
+				{'reveal-password-visible': isVisible},
+			]"
+			:aria-label="isVisible ? 'Hide password' : 'Show password'"
+			@click="onClick"
+		>
+			<span :aria-label="isVisible ? 'Hide password' : 'Show password'" />
+		</span>
+	</div>
+</template>
+
+<script>
+export default {
+	name: "RevealPassword",
+	data() {
+		return {
+			isVisible: false,
+		};
+	},
+	methods: {
+		onClick() {
+			this.isVisible = !this.isVisible;
+		},
+	},
+};
+</script>
diff --git a/client/components/RoutedChat.vue b/client/components/RoutedChat.vue
new file mode 100644
index 00000000..b84a2e89
--- /dev/null
+++ b/client/components/RoutedChat.vue
@@ -0,0 +1,35 @@
+<template>
+	<Chat v-if="activeChannel" :network="activeChannel.network" :channel="activeChannel.channel" />
+</template>
+
+<script>
+// Temporary component for routing channels and lobbies
+import Chat from "./Chat.vue";
+
+export default {
+	name: "RoutedChat",
+	components: {
+		Chat,
+	},
+	computed: {
+		activeChannel() {
+			const chanId = parseInt(this.$route.params.id, 10);
+			const channel = this.$store.getters.findChannel(chanId);
+			return channel;
+		},
+	},
+	watch: {
+		activeChannel() {
+			this.setActiveChannel();
+		},
+	},
+	mounted() {
+		this.setActiveChannel();
+	},
+	methods: {
+		setActiveChannel() {
+			this.$store.commit("activeChannel", this.activeChannel);
+		},
+	},
+};
+</script>
diff --git a/client/components/Session.vue b/client/components/Session.vue
new file mode 100644
index 00000000..e10d8951
--- /dev/null
+++ b/client/components/Session.vue
@@ -0,0 +1,50 @@
+<template>
+	<p>
+		<button class="btn pull-right remove-session" @click.prevent="signOut">
+			<template v-if="session.current">
+				Sign out
+			</template>
+			<template v-else>
+				Revoke
+			</template>
+		</button>
+
+		<strong>{{ session.agent }}</strong>
+
+		<a :href="'https://ipinfo.io/' + session.ip" target="_blank" rel="noopener">{{
+			session.ip
+		}}</a>
+
+		<template v-if="!session.current">
+			<br />
+			<template v-if="session.active">
+				<em>Currently active</em>
+			</template>
+			<template v-else>
+				Last used on <time>{{ session.lastUse | localetime }}</time>
+			</template>
+		</template>
+	</p>
+</template>
+
+<script>
+import Auth from "../js/auth";
+import socket from "../js/socket";
+
+export default {
+	name: "Session",
+	props: {
+		session: Object,
+	},
+	methods: {
+		signOut() {
+			if (!this.session.current) {
+				socket.emit("sign-out", this.session.token);
+			} else {
+				socket.emit("sign-out");
+				Auth.signout();
+			}
+		},
+	},
+};
+</script>
diff --git a/client/components/Sidebar.vue b/client/components/Sidebar.vue
new file mode 100644
index 00000000..742c2d33
--- /dev/null
+++ b/client/components/Sidebar.vue
@@ -0,0 +1,190 @@
+<template>
+	<aside id="sidebar" ref="sidebar">
+		<div class="scrollable-area">
+			<div class="logo-container">
+				<img
+					:src="`img/logo-${isPublic() ? 'horizontal-' : ''}transparent-bg.svg`"
+					class="logo"
+					alt="The Lounge"
+				/>
+				<img
+					:src="`img/logo-${isPublic() ? 'horizontal-' : ''}transparent-bg-inverted.svg`"
+					class="logo-inverted"
+					alt="The Lounge"
+				/>
+				<span
+					v-if="isDevelopment"
+					title="The Lounge has been built in development mode"
+					:style="{
+						backgroundColor: '#ff9e18',
+						color: '#000',
+						padding: '2px',
+						borderRadius: '4px',
+						fontSize: '12px',
+					}"
+					>DEVELOPER</span
+				>
+			</div>
+			<NetworkList />
+		</div>
+		<footer id="footer">
+			<span
+				class="tooltipped tooltipped-n tooltipped-no-touch"
+				aria-label="Connect to network"
+				><router-link
+					to="/connect"
+					tag="button"
+					active-class="active"
+					:class="['icon', 'connect']"
+					aria-label="Connect to network"
+					role="tab"
+					aria-controls="connect"
+					:aria-selected="$route.name === 'Connect'"
+			/></span>
+			<span class="tooltipped tooltipped-n tooltipped-no-touch" aria-label="Settings"
+				><router-link
+					to="/settings"
+					tag="button"
+					active-class="active"
+					:class="['icon', 'settings']"
+					aria-label="Settings"
+					role="tab"
+					aria-controls="settings"
+					:aria-selected="$route.name === 'Settings'"
+			/></span>
+			<span class="tooltipped tooltipped-n tooltipped-no-touch" aria-label="Help"
+				><router-link
+					to="/help"
+					tag="button"
+					active-class="active"
+					:class="['icon', 'help']"
+					aria-label="Help"
+					role="tab"
+					aria-controls="help"
+					:aria-selected="$route.name === 'Help'"
+			/></span>
+		</footer>
+	</aside>
+</template>
+
+<script>
+import NetworkList from "./NetworkList.vue";
+
+export default {
+	name: "Sidebar",
+	components: {
+		NetworkList,
+	},
+	props: {
+		overlay: HTMLElement,
+	},
+	data() {
+		return {
+			isDevelopment: process.env.NODE_ENV !== "production",
+		};
+	},
+	mounted() {
+		this.touchStartPos = null;
+		this.touchCurPos = null;
+		this.touchStartTime = 0;
+		this.menuWidth = 0;
+		this.menuIsMoving = false;
+		this.menuIsAbsolute = false;
+
+		this.onTouchStart = (e) => {
+			this.touchStartPos = this.touchCurPos = e.touches.item(0);
+
+			if (e.touches.length !== 1) {
+				this.onTouchEnd();
+				return;
+			}
+
+			const styles = window.getComputedStyle(this.$refs.sidebar);
+
+			this.menuWidth = parseFloat(styles.width);
+			this.menuIsAbsolute = styles.position === "absolute";
+
+			if (!this.$store.state.sidebarOpen || this.touchStartPos.screenX > this.menuWidth) {
+				this.touchStartTime = Date.now();
+
+				document.body.addEventListener("touchmove", this.onTouchMove, {passive: true});
+				document.body.addEventListener("touchend", this.onTouchEnd, {passive: true});
+			}
+		};
+
+		this.onTouchMove = (e) => {
+			const touch = (this.touchCurPos = e.touches.item(0));
+			let distX = touch.screenX - this.touchStartPos.screenX;
+			const distY = touch.screenY - this.touchStartPos.screenY;
+
+			if (!this.menuIsMoving) {
+				// tan(45°) is 1. Gestures in 0°-45° (< 1) are considered horizontal, so
+				// menu must be open; gestures in 45°-90° (>1) are considered vertical, so
+				// chat windows must be scrolled.
+				if (Math.abs(distY / distX) >= 1) {
+					this.onTouchEnd();
+					return;
+				}
+
+				const devicePixelRatio = window.devicePixelRatio || 2;
+
+				if (Math.abs(distX) > devicePixelRatio) {
+					this.$store.commit("sidebarDragging", true);
+					this.menuIsMoving = true;
+				}
+			}
+
+			// Do not animate the menu on desktop view
+			if (!this.menuIsAbsolute) {
+				return;
+			}
+
+			if (this.$store.state.sidebarOpen) {
+				distX += this.menuWidth;
+			}
+
+			if (distX > this.menuWidth) {
+				distX = this.menuWidth;
+			} else if (distX < 0) {
+				distX = 0;
+			}
+
+			this.$refs.sidebar.style.transform = "translate3d(" + distX + "px, 0, 0)";
+			this.overlay.style.opacity = distX / this.menuWidth;
+		};
+
+		this.onTouchEnd = () => {
+			const diff = this.touchCurPos.screenX - this.touchStartPos.screenX;
+			const absDiff = Math.abs(diff);
+
+			if (
+				absDiff > this.menuWidth / 2 ||
+				(Date.now() - this.touchStartTime < 180 && absDiff > 50)
+			) {
+				this.toggle(diff > 0);
+			}
+
+			document.body.removeEventListener("touchmove", this.onTouchMove);
+			document.body.removeEventListener("touchend", this.onTouchEnd);
+			this.$store.commit("sidebarDragging", false);
+
+			this.$refs.sidebar.style.transform = null;
+			this.overlay.style.opacity = null;
+
+			this.touchStartPos = null;
+			this.touchCurPos = null;
+			this.touchStartTime = 0;
+			this.menuIsMoving = false;
+		};
+
+		this.toggle = (state) => {
+			this.$store.commit("sidebarOpen", state);
+		};
+
+		document.body.addEventListener("touchstart", this.onTouchStart, {passive: true});
+	},
+	methods: {
+		isPublic: () => document.body.classList.contains("public"),
+	},
+};
+</script>
diff --git a/client/components/SidebarToggle.vue b/client/components/SidebarToggle.vue
new file mode 100644
index 00000000..6e0a7319
--- /dev/null
+++ b/client/components/SidebarToggle.vue
@@ -0,0 +1,9 @@
+<template>
+	<button class="lt" aria-label="Toggle channel list" @click="$store.commit('toggleSidebar')" />
+</template>
+
+<script>
+export default {
+	name: "SidebarToggle",
+};
+</script>
diff --git a/client/components/Username.vue b/client/components/Username.vue
index f1486e21..80f6023f 100644
--- a/client/components/Username.vue
+++ b/client/components/Username.vue
@@ -1,14 +1,18 @@
 <template>
 	<span
-		:class="['user', $options.filters.colorClass(user.nick), {active: active}]"
+		:class="['user', nickColor, {active: active}]"
 		:data-name="user.nick"
 		role="button"
 		v-on="onHover ? {mouseover: hover} : {}"
-		>{{ user.mode }}{{ user.nick }}</span
+		@click.prevent="openContextMenu"
+		@contextmenu.prevent="openContextMenu"
+		><slot>{{ user.mode }}{{ user.nick }}</slot></span
 	>
 </template>
 
 <script>
+import colorClass from "../js/helpers/colorClass";
+
 export default {
 	name: "Username",
 	props: {
@@ -16,10 +20,21 @@ export default {
 		active: Boolean,
 		onHover: Function,
 	},
+	computed: {
+		nickColor() {
+			return colorClass(this.user.nick);
+		},
+	},
 	methods: {
 		hover() {
 			return this.onHover(this.user);
 		},
+		openContextMenu(event) {
+			this.$root.$emit("contextmenu:user", {
+				event: event,
+				user: this.user,
+			});
+		},
 	},
 };
 </script>
diff --git a/client/components/UsernameFiltered.vue b/client/components/UsernameFiltered.vue
deleted file mode 100644
index 93e18f6d..00000000
--- a/client/components/UsernameFiltered.vue
+++ /dev/null
@@ -1,25 +0,0 @@
-<template>
-	<span
-		:class="['user', $options.filters.colorClass(user.original.nick), {active: active}]"
-		:data-name="user.original.nick"
-		role="button"
-		@mouseover="hover"
-		v-html="user.original.mode + user.string"
-	/>
-</template>
-
-<script>
-export default {
-	name: "UsernameFiltered",
-	props: {
-		user: Object,
-		active: Boolean,
-		onHover: Function,
-	},
-	methods: {
-		hover() {
-			this.onHover ? this.onHover(this.user.original) : null;
-		},
-	},
-};
-</script>
diff --git a/client/components/VersionChecker.vue b/client/components/VersionChecker.vue
new file mode 100644
index 00000000..d9c390f1
--- /dev/null
+++ b/client/components/VersionChecker.vue
@@ -0,0 +1,69 @@
+<template>
+	<div id="version-checker" :class="[$store.state.versionStatus]">
+		<p v-if="$store.state.versionStatus === 'loading'">
+			Checking for updates...
+		</p>
+		<p v-if="$store.state.versionStatus === 'new-version'">
+			The Lounge <b>{{ $store.state.versionData.latest.version }}</b>
+			<template v-if="$store.state.versionData.latest.prerelease">
+				(pre-release)
+			</template>
+			is now available.
+			<br />
+
+			<a :href="$store.state.versionData.latest.url" target="_blank" rel="noopener">
+				Read more on GitHub
+			</a>
+		</p>
+		<p v-if="$store.state.versionStatus === 'new-packages'">
+			The Lounge is up to date, but there are out of date packages Run
+			<code>thelounge upgrade</code> on the server to upgrade packages.
+		</p>
+		<template v-if="$store.state.versionStatus === 'up-to-date'">
+			<p>
+				The Lounge is up to date!
+			</p>
+
+			<button
+				v-if="$store.state.versionDataExpired"
+				id="check-now"
+				class="btn btn-small"
+				@click="checkNow"
+			>
+				Check now
+			</button>
+		</template>
+		<template v-if="$store.state.versionStatus === 'error'">
+			<p>
+				Information about latest releases could not be retrieved.
+			</p>
+
+			<button id="check-now" class="btn btn-small" @click="checkNow">Try again</button>
+		</template>
+	</div>
+</template>
+
+<script>
+import socket from "../js/socket";
+
+export default {
+	name: "VersionChecker",
+	data() {
+		return {
+			status: "loading",
+		};
+	},
+	mounted() {
+		if (!this.$store.state.versionData) {
+			this.checkNow();
+		}
+	},
+	methods: {
+		checkNow() {
+			this.$store.commit("versionData", null);
+			this.$store.commit("versionStatus", "loading");
+			socket.emit("changelog");
+		},
+	},
+};
+</script>
diff --git a/client/components/Windows/Changelog.vue b/client/components/Windows/Changelog.vue
new file mode 100644
index 00000000..a516934b
--- /dev/null
+++ b/client/components/Windows/Changelog.vue
@@ -0,0 +1,87 @@
+<template>
+	<div id="changelog" class="window" aria-label="Changelog">
+		<div class="header">
+			<SidebarToggle />
+		</div>
+		<div class="container">
+			<router-link id="back-to-help" to="/help">« Help</router-link>
+
+			<template
+				v-if="
+					$store.state.versionData &&
+						$store.state.versionData.current &&
+						$store.state.versionData.current.version
+				"
+			>
+				<h1 class="title">
+					Release notes for {{ $store.state.versionData.current.version }}
+				</h1>
+
+				<template v-if="$store.state.versionData.current.changelog">
+					<h3>Introduction</h3>
+					<div
+						ref="changelog"
+						class="changelog-text"
+						v-html="$store.state.versionData.current.changelog"
+					></div>
+				</template>
+				<template v-else>
+					<p>Unable to retrieve releases from GitHub.</p>
+					<p>
+						<a
+							:href="
+								`https://github.com/thelounge/thelounge/releases/tag/v${$store.state.serverConfiguration.version}`
+							"
+							target="_blank"
+							rel="noopener"
+							>View release notes for this version on GitHub</a
+						>
+					</p>
+				</template>
+			</template>
+			<p v-else>Loading changelog…</p>
+		</div>
+	</div>
+</template>
+
+<script>
+import socket from "../../js/socket";
+import SidebarToggle from "../SidebarToggle.vue";
+
+export default {
+	name: "Changelog",
+	components: {
+		SidebarToggle,
+	},
+	mounted() {
+		if (!this.$store.state.versionData) {
+			socket.emit("changelog");
+		}
+
+		this.patchChangelog();
+	},
+	updated() {
+		this.patchChangelog();
+	},
+	methods: {
+		patchChangelog() {
+			if (!this.$refs.changelog) {
+				return;
+			}
+
+			const links = this.$refs.changelog.querySelectorAll("a");
+
+			for (const link of links) {
+				// Make sure all links will open a new tab instead of exiting the application
+				link.setAttribute("target", "_blank");
+				link.setAttribute("rel", "noopener");
+
+				if (link.querySelector("img")) {
+					// Add required metadata to image links, to support built-in image viewer
+					link.classList.add("toggle-thumbnail");
+				}
+			}
+		},
+	},
+};
+</script>
diff --git a/client/components/Windows/Connect.vue b/client/components/Windows/Connect.vue
new file mode 100644
index 00000000..f9f6d156
--- /dev/null
+++ b/client/components/Windows/Connect.vue
@@ -0,0 +1,112 @@
+<template>
+	<NetworkForm :handle-submit="handleSubmit" :defaults="defaults" :disabled="disabled" />
+</template>
+
+<script>
+import socket from "../../js/socket";
+import NetworkForm from "../NetworkForm.vue";
+
+export default {
+	name: "Connect",
+	components: {
+		NetworkForm,
+	},
+	props: {
+		queryParams: Object,
+	},
+	data() {
+		// Merge settings from url params into default settings
+		const defaults = Object.assign(
+			{},
+			this.$store.state.serverConfiguration.defaults,
+			this.parseOverrideParams(this.queryParams)
+		);
+		return {
+			disabled: false,
+			defaults,
+		};
+	},
+	methods: {
+		handleSubmit(data) {
+			this.disabled = true;
+			socket.emit("network:new", data);
+		},
+		parseOverrideParams(params) {
+			const parsedParams = {};
+
+			for (let key of Object.keys(params)) {
+				if (!params[key]) {
+					continue;
+				}
+
+				let value = params[key];
+
+				// Param can contain multiple values in an array if its supplied more than once
+				if (Array.isArray(value)) {
+					value = value[0];
+				}
+
+				// Support `channels` as a compatibility alias with other clients
+				if (key === "channels") {
+					key = "join";
+				}
+
+				if (
+					!Object.prototype.hasOwnProperty.call(
+						this.$store.state.serverConfiguration.defaults,
+						key
+					)
+				) {
+					continue;
+				}
+
+				// When the network is locked, URL overrides should not affect disabled fields
+				if (
+					this.$store.state.serverConfiguration.lockNetwork &&
+					["host", "port", "tls", "rejectUnauthorized"].includes(key)
+				) {
+					continue;
+				}
+
+				// When the network is not displayed, its name in the UI is not customizable
+				if (!this.$store.state.serverConfiguration.displayNetwork && key === "name") {
+					continue;
+				}
+
+				if (key === "join") {
+					value = value
+						.split(",")
+						.map((chan) => {
+							if (!chan.match(/^[#&!+]/)) {
+								return `#${chan}`;
+							}
+
+							return chan;
+						})
+						.join(", ");
+				}
+
+				// Override server provided defaults with parameters passed in the URL if they match the data type
+				switch (typeof this.$store.state.serverConfiguration.defaults[key]) {
+					case "boolean":
+						if (value === "0" || value === "false") {
+							parsedParams[key] = false;
+						} else {
+							parsedParams[key] = !!value;
+						}
+
+						break;
+					case "number":
+						parsedParams[key] = Number(value);
+						break;
+					case "string":
+						parsedParams[key] = String(value);
+						break;
+				}
+			}
+
+			return parsedParams;
+		},
+	},
+};
+</script>
diff --git a/client/components/Windows/Help.vue b/client/components/Windows/Help.vue
new file mode 100644
index 00000000..1ffb0d82
--- /dev/null
+++ b/client/components/Windows/Help.vue
@@ -0,0 +1,703 @@
+<template>
+	<div id="help" class="window" role="tabpanel" aria-label="Help">
+		<div class="header">
+			<SidebarToggle />
+		</div>
+		<div class="container">
+			<h1 class="title">Help</h1>
+
+			<h2>
+				<small class="pull-right">
+					v{{ $store.state.serverConfiguration.version }} (<router-link
+						id="view-changelog"
+						to="/changelog"
+						>release notes</router-link
+					>)
+				</small>
+				About The Lounge
+			</h2>
+
+			<div class="about">
+				<VersionChecker />
+
+				<template v-if="$store.state.serverConfiguration.gitCommit">
+					<p>
+						The Lounge is running from source (<a
+							:href="
+								`https://github.com/thelounge/thelounge/tree/${$store.state.serverConfiguration.gitCommit}`
+							"
+							target="_blank"
+							rel="noopener"
+							>commit <code>{{ $store.state.serverConfiguration.gitCommit }}</code></a
+						>).
+					</p>
+
+					<ul>
+						<li>
+							Compare
+							<a
+								:href="
+									`https://github.com/thelounge/thelounge/compare/${$store.state.serverConfiguration.gitCommit}...master`
+								"
+								target="_blank"
+								rel="noopener"
+								>between
+								<code>{{ $store.state.serverConfiguration.gitCommit }}</code> and
+								<code>master</code></a
+							>
+							to see what you are missing
+						</li>
+						<li>
+							Compare
+							<a
+								:href="
+									`https://github.com/thelounge/thelounge/compare/${$store.state.serverConfiguration.version}...${$store.state.serverConfiguration.gitCommit}`
+								"
+								target="_blank"
+								rel="noopener"
+								>between
+								<code>{{ $store.state.serverConfiguration.version }}</code> and
+								<code>{{ $store.state.serverConfiguration.gitCommit }}</code></a
+							>
+							to see your local changes
+						</li>
+					</ul>
+				</template>
+
+				<p>
+					<a
+						href="https://thelounge.chat/"
+						target="_blank"
+						rel="noopener"
+						class="website-link"
+						>Website</a
+					>
+				</p>
+				<p>
+					<a
+						href="https://thelounge.chat/docs/"
+						target="_blank"
+						rel="noopener"
+						class="documentation-link"
+						>Documentation</a
+					>
+				</p>
+				<p>
+					<a
+						href="https://github.com/thelounge/thelounge/issues/new"
+						target="_blank"
+						rel="noopener"
+						class="report-issue-link"
+						>Report an issue…</a
+					>
+				</p>
+			</div>
+
+			<h2>Keyboard Shortcuts</h2>
+
+			<div class="help-item">
+				<div class="subject">
+					<span v-if="!isApple"><kbd>Alt</kbd> <kbd>Shift</kbd> <kbd>↓</kbd></span>
+					<span v-else><kbd>⌥</kbd> <kbd>⇧</kbd> <kbd>↓</kbd></span>
+				</div>
+				<div class="description">
+					<p>Switch to the next lobby in the channel list.</p>
+				</div>
+			</div>
+
+			<div class="help-item">
+				<div class="subject">
+					<span v-if="!isApple"><kbd>Alt</kbd> <kbd>Shift</kbd> <kbd>↑</kbd></span>
+					<span v-else><kbd>⌥</kbd> <kbd>⇧</kbd> <kbd>↑</kbd></span>
+				</div>
+				<div class="description">
+					<p>Switch to the previous lobby in the channel list.</p>
+				</div>
+			</div>
+
+			<div class="help-item">
+				<div class="subject">
+					<span v-if="!isApple"><kbd>Alt</kbd> <kbd>↓</kbd></span>
+					<span v-else><kbd>⌥</kbd> <kbd>↓</kbd></span>
+				</div>
+				<div class="description">
+					<p>Switch to the next window in the channel list.</p>
+				</div>
+			</div>
+
+			<div class="help-item">
+				<div class="subject">
+					<span v-if="!isApple"><kbd>Alt</kbd> <kbd>↑</kbd></span>
+					<span v-else><kbd>⌥</kbd> <kbd>↑</kbd></span>
+				</div>
+				<div class="description">
+					<p>Switch to the previous window in the channel list.</p>
+				</div>
+			</div>
+
+			<div class="help-item">
+				<div class="subject">
+					<span v-if="!isApple"><kbd>Alt</kbd> <kbd>A</kbd></span>
+					<span v-else><kbd>⌥</kbd> <kbd>A</kbd></span>
+				</div>
+				<div class="description">
+					<p>Switch to the first window with unread messages.</p>
+				</div>
+			</div>
+
+			<div class="help-item">
+				<div class="subject">
+					<span v-if="!isApple"><kbd>Ctrl</kbd> <kbd>K</kbd></span>
+					<span v-else><kbd>⌘</kbd> <kbd>K</kbd></span>
+				</div>
+				<div class="description">
+					<p>
+						Mark any text typed after this shortcut to be colored. After hitting this
+						shortcut, enter an integer in the range
+						<code>0—15</code> to select the desired color, or use the autocompletion
+						menu to choose a color name (see below).
+					</p>
+					<p>
+						Background color can be specified by putting a comma and another integer in
+						the range <code>0—15</code> after the foreground color number
+						(autocompletion works too).
+					</p>
+					<p>
+						A color reference can be found
+						<a
+							href="https://modern.ircdocs.horse/formatting.html#colors"
+							target="_blank"
+							rel="noopener"
+							>here</a
+						>.
+					</p>
+				</div>
+			</div>
+
+			<div class="help-item">
+				<div class="subject">
+					<span v-if="!isApple"><kbd>Ctrl</kbd> <kbd>B</kbd></span>
+					<span v-else><kbd>⌘</kbd> <kbd>B</kbd></span>
+				</div>
+				<div class="description">
+					<p>
+						Mark all text typed after this shortcut as
+						<span class="irc-bold">bold</span>.
+					</p>
+				</div>
+			</div>
+
+			<div class="help-item">
+				<div class="subject">
+					<span v-if="!isApple"><kbd>Ctrl</kbd> <kbd>U</kbd></span>
+					<span v-else><kbd>⌘</kbd> <kbd>U</kbd></span>
+				</div>
+				<div class="description">
+					<p>
+						Mark all text typed after this shortcut as
+						<span class="irc-underline">underlined</span>.
+					</p>
+				</div>
+			</div>
+
+			<div class="help-item">
+				<div class="subject">
+					<span v-if="!isApple"><kbd>Ctrl</kbd> <kbd>I</kbd></span>
+					<span v-else><kbd>⌘</kbd> <kbd>I</kbd></span>
+				</div>
+				<div class="description">
+					<p>
+						Mark all text typed after this shortcut as
+						<span class="irc-italic">italics</span>.
+					</p>
+				</div>
+			</div>
+
+			<div class="help-item">
+				<div class="subject">
+					<span v-if="!isApple"><kbd>Ctrl</kbd> <kbd>S</kbd></span>
+					<span v-else><kbd>⌘</kbd> <kbd>S</kbd></span>
+				</div>
+				<div class="description">
+					<p>
+						Mark all text typed after this shortcut as
+						<span class="irc-strikethrough">struck through</span>.
+					</p>
+				</div>
+			</div>
+
+			<div class="help-item">
+				<div class="subject">
+					<span v-if="!isApple"><kbd>Ctrl</kbd> <kbd>M</kbd></span>
+					<span v-else><kbd>⌘</kbd> <kbd>M</kbd></span>
+				</div>
+				<div class="description">
+					<p>
+						Mark all text typed after this shortcut as
+						<span class="irc-monospace">monospaced</span>.
+					</p>
+				</div>
+			</div>
+
+			<div class="help-item">
+				<div class="subject">
+					<span v-if="!isApple"><kbd>Ctrl</kbd> <kbd>O</kbd></span>
+					<span v-else><kbd>⌘</kbd> <kbd>O</kbd></span>
+				</div>
+				<div class="description">
+					<p>
+						Mark all text typed after this shortcut to be reset to its original
+						formatting.
+					</p>
+				</div>
+			</div>
+
+			<h2>Autocompletion</h2>
+
+			<p>
+				To auto-complete nicknames, channels, commands, and emoji, type one of the
+				characters below to open a suggestion list. Use the <kbd>↑</kbd> and
+				<kbd>↓</kbd> keys to highlight an item, and insert it by pressing <kbd>Tab</kbd> or
+				<kbd>Enter</kbd> (or by clicking the desired item).
+			</p>
+			<p>
+				Autocompletion can be disabled in settings.
+			</p>
+
+			<div class="help-item">
+				<div class="subject">
+					<code>@</code>
+				</div>
+				<div class="description">
+					<p>Nickname</p>
+				</div>
+			</div>
+
+			<div class="help-item">
+				<div class="subject">
+					<code>#</code>
+				</div>
+				<div class="description">
+					<p>Channel</p>
+				</div>
+			</div>
+
+			<div class="help-item">
+				<div class="subject">
+					<code>/</code>
+				</div>
+				<div class="description">
+					<p>Commands (see list of commands below)</p>
+				</div>
+			</div>
+
+			<div class="help-item">
+				<div class="subject">
+					<code>:</code>
+				</div>
+				<div class="description">
+					<p>
+						Emoji (note: requires two search characters, to avoid conflicting with
+						common emoticons like <code>:)</code>)
+					</p>
+				</div>
+			</div>
+
+			<h2>Commands</h2>
+
+			<div class="help-item">
+				<div class="subject">
+					<code>/away [message]</code>
+				</div>
+				<div class="description">
+					<p>Mark yourself as away with an optional message.</p>
+				</div>
+			</div>
+
+			<div class="help-item">
+				<div class="subject">
+					<code>/back</code>
+				</div>
+				<div class="description">
+					<p>Remove your away status (set with <code>/away</code>).</p>
+				</div>
+			</div>
+
+			<div class="help-item">
+				<div class="subject">
+					<code>/ban nick</code>
+				</div>
+				<div class="description">
+					<p>
+						Ban (<code>+b</code>) a user from the current channel. This can be a
+						nickname or a hostmask.
+					</p>
+				</div>
+			</div>
+
+			<div class="help-item">
+				<div class="subject">
+					<code>/banlist</code>
+				</div>
+				<div class="description">
+					<p>Load the banlist for the current channel.</p>
+				</div>
+			</div>
+
+			<div class="help-item">
+				<div class="subject">
+					<code>/collapse</code>
+				</div>
+				<div class="description">
+					<p>
+						Collapse all previews in the current channel (opposite of
+						<code>/expand</code>)
+					</p>
+				</div>
+			</div>
+
+			<div class="help-item">
+				<div class="subject">
+					<code>/connect host [port]</code>
+				</div>
+				<div class="description">
+					<p>
+						Connect to a new IRC network. If <code>port</code> starts with a
+						<code>+</code> sign, the connection will be made secure using TLS.
+					</p>
+					<p>Alias: <code>/server</code></p>
+				</div>
+			</div>
+
+			<div class="help-item">
+				<div class="subject">
+					<code>/ctcp target cmd [args]</code>
+				</div>
+				<div class="description">
+					<p>
+						Send a <abbr title="Client-to-client protocol">CTCP</abbr>
+						request. Read more about this on
+						<a
+							href="https://en.wikipedia.org/wiki/Client-to-client_protocol"
+							target="_blank"
+							rel="noopener"
+							>the dedicated Wikipedia article</a
+						>.
+					</p>
+				</div>
+			</div>
+
+			<div class="help-item">
+				<div class="subject">
+					<code>/deop nick [...nick]</code>
+				</div>
+				<div class="description">
+					<p>
+						Remove op (<code>-o</code>) from one or several users in the current
+						channel.
+					</p>
+				</div>
+			</div>
+
+			<div class="help-item">
+				<div class="subject">
+					<code>/devoice nick [...nick]</code>
+				</div>
+				<div class="description">
+					<p>
+						Remove voice (<code>-v</code>) from one or several users in the current
+						channel.
+					</p>
+				</div>
+			</div>
+
+			<div class="help-item">
+				<div class="subject">
+					<code>/disconnect [message]</code>
+				</div>
+				<div class="description">
+					<p>
+						Disconnect from the current network with an optionally-provided message.
+					</p>
+				</div>
+			</div>
+
+			<div class="help-item">
+				<div class="subject">
+					<code>/expand</code>
+				</div>
+				<div class="description">
+					<p>
+						Expand all previews in the current channel (opposite of
+						<code>/collapse</code>)
+					</p>
+				</div>
+			</div>
+
+			<div class="help-item">
+				<div class="subject">
+					<code>/invite nick [channel]</code>
+				</div>
+				<div class="description">
+					<p>
+						Invite a user to the specified channel. If
+						<code>channel</code> is omitted, user will be invited to the current
+						channel.
+					</p>
+				</div>
+			</div>
+
+			<div class="help-item">
+				<div class="subject">
+					<code>/ignore nick</code>
+				</div>
+				<div class="description">
+					<p>
+						Block any messages from the specified user on the current network. This can
+						be a nickname or a hostmask.
+					</p>
+				</div>
+			</div>
+
+			<div class="help-item">
+				<div class="subject">
+					<code>/ignorelist</code>
+				</div>
+				<div class="description">
+					<p>Load the list of ignored users for the current network.</p>
+				</div>
+			</div>
+
+			<div class="help-item">
+				<div class="subject">
+					<code>/join channel</code>
+				</div>
+				<div class="description">
+					<p>Join a channel.</p>
+				</div>
+			</div>
+
+			<div class="help-item">
+				<div class="subject">
+					<code>/kick nick</code>
+				</div>
+				<div class="description">
+					<p>Kick a user from the current channel.</p>
+				</div>
+			</div>
+
+			<div class="help-item">
+				<div class="subject">
+					<code>/list</code>
+				</div>
+				<div class="description">
+					<p>Retrieve a list of available channels on this network.</p>
+				</div>
+			</div>
+
+			<div class="help-item">
+				<div class="subject">
+					<code>/me message</code>
+				</div>
+				<div class="description">
+					<p>
+						Send an action message to the current channel. The Lounge will display it
+						inline, as if the message was posted in the third person.
+					</p>
+				</div>
+			</div>
+
+			<div class="help-item">
+				<div class="subject">
+					<code>/mode flags [args]</code>
+				</div>
+				<div class="description">
+					<p>
+						Set the given flags to the current channel if the active window is a
+						channel, another user if the active window is a private message window, or
+						yourself if the current window is a server window.
+					</p>
+				</div>
+			</div>
+
+			<div class="help-item">
+				<div class="subject">
+					<code>/msg channel message</code>
+				</div>
+				<div class="description">
+					<p>Send a message to the specified channel.</p>
+				</div>
+			</div>
+
+			<div class="help-item">
+				<div class="subject">
+					<code>/nick newnick</code>
+				</div>
+				<div class="description">
+					<p>Change your nickname on the current network.</p>
+				</div>
+			</div>
+
+			<div class="help-item">
+				<div class="subject">
+					<code>/notice channel message</code>
+				</div>
+				<div class="description">
+					<p>Sends a notice message to the specified channel.</p>
+				</div>
+			</div>
+
+			<div class="help-item">
+				<div class="subject">
+					<code>/op nick [...nick]</code>
+				</div>
+				<div class="description">
+					<p>
+						Give op (<code>+o</code>) to one or several users in the current channel.
+					</p>
+				</div>
+			</div>
+
+			<div class="help-item">
+				<div class="subject">
+					<code>/part [channel]</code>
+				</div>
+				<div class="description">
+					<p>
+						Close the specified channel or private message window, or the current
+						channel if <code>channel</code> is omitted.
+					</p>
+					<p>Aliases: <code>/close</code>, <code>/leave</code></p>
+				</div>
+			</div>
+
+			<div class="help-item">
+				<div class="subject">
+					<code>/rejoin</code>
+				</div>
+				<div class="description">
+					<p>
+						Leave and immediately rejoin the current channel. Useful to quickly get op
+						from ChanServ in an empty channel, for example.
+					</p>
+					<p>Alias: <code>/cycle</code></p>
+				</div>
+			</div>
+
+			<div class="help-item">
+				<div class="subject">
+					<code>/query nick</code>
+				</div>
+				<div class="description">
+					<p>Send a private message to the specified user.</p>
+				</div>
+			</div>
+
+			<div class="help-item">
+				<div class="subject">
+					<code>/quit [message]</code>
+				</div>
+				<div class="description">
+					<p>
+						Disconnect from the current network with an optional message.
+					</p>
+				</div>
+			</div>
+
+			<div class="help-item">
+				<div class="subject">
+					<code>/raw message</code>
+				</div>
+				<div class="description">
+					<p>Send a raw message to the current IRC network.</p>
+					<p>Aliases: <code>/quote</code>, <code>/send</code></p>
+				</div>
+			</div>
+
+			<div class="help-item">
+				<div class="subject">
+					<code>/slap nick</code>
+				</div>
+				<div class="description">
+					<p>Slap someone in the current channel with a trout!</p>
+				</div>
+			</div>
+
+			<div class="help-item">
+				<div class="subject">
+					<code>/topic [newtopic]</code>
+				</div>
+				<div class="description">
+					<p>
+						Get the topic in the current channel. If <code>newtopic</code> is specified,
+						sets the topic in the current channel.
+					</p>
+				</div>
+			</div>
+
+			<div class="help-item">
+				<div class="subject">
+					<code>/unban nick</code>
+				</div>
+				<div class="description">
+					<p>
+						Unban (<code>-b</code>) a user from the current channel. This can be a
+						nickname or a hostmask.
+					</p>
+				</div>
+			</div>
+
+			<div class="help-item">
+				<div class="subject">
+					<code>/unignore nick</code>
+				</div>
+				<div class="description">
+					<p>
+						Unblock messages from the specified user on the current network. This can be
+						a nickname or a hostmask.
+					</p>
+				</div>
+			</div>
+
+			<div class="help-item">
+				<div class="subject">
+					<code>/voice nick [...nick]</code>
+				</div>
+				<div class="description">
+					<p>
+						Give voice (<code>+v</code>) to one or several users in the current channel.
+					</p>
+				</div>
+			</div>
+
+			<div class="help-item">
+				<div class="subject">
+					<code>/whois nick</code>
+				</div>
+				<div class="description">
+					<p>
+						Retrieve information about the given user on the current network.
+					</p>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+import SidebarToggle from "../SidebarToggle.vue";
+import VersionChecker from "../VersionChecker.vue";
+
+export default {
+	name: "Help",
+	components: {
+		SidebarToggle,
+		VersionChecker,
+	},
+	data() {
+		return {
+			isApple: navigator.platform.match(/(Mac|iPhone|iPod|iPad)/i) || false,
+		};
+	},
+};
+</script>
diff --git a/client/components/Windows/NetworkEdit.vue b/client/components/Windows/NetworkEdit.vue
new file mode 100644
index 00000000..e0bc4899
--- /dev/null
+++ b/client/components/Windows/NetworkEdit.vue
@@ -0,0 +1,50 @@
+<template>
+	<NetworkForm
+		v-if="networkData"
+		:handle-submit="handleSubmit"
+		:defaults="networkData"
+		:disabled="disabled"
+	/>
+</template>
+
+<script>
+import socket from "../../js/socket";
+import NetworkForm from "../NetworkForm.vue";
+
+export default {
+	name: "NetworkEdit",
+	components: {
+		NetworkForm,
+	},
+	data() {
+		return {
+			disabled: false,
+			networkData: null,
+		};
+	},
+	watch: {
+		"$route.params.uuid"() {
+			this.setNetworkData();
+		},
+	},
+	mounted() {
+		this.setNetworkData();
+	},
+	methods: {
+		setNetworkData() {
+			socket.emit("network:get", this.$route.params.uuid);
+			this.networkData = this.$store.getters.findNetwork(this.$route.params.uuid);
+		},
+		handleSubmit(data) {
+			this.disabled = true;
+			socket.emit("network:edit", data);
+
+			// TODO: move networks to vuex and update state when the network info comes in
+			const network = this.$store.getters.findNetwork(data.uuid);
+			network.name = network.channels[0].name = data.name;
+
+			this.$root.switchToChannel(network.channels[0]);
+		},
+	},
+};
+</script>
diff --git a/client/components/Windows/Settings.vue b/client/components/Windows/Settings.vue
new file mode 100644
index 00000000..e4ec148a
--- /dev/null
+++ b/client/components/Windows/Settings.vue
@@ -0,0 +1,590 @@
+<template>
+	<div id="settings" class="window" role="tabpanel" aria-label="Settings">
+		<div class="header">
+			<SidebarToggle />
+		</div>
+		<form ref="settingsForm" class="container" @change="onChange" @submit.prevent>
+			<h1 class="title">Settings</h1>
+
+			<div class="row">
+				<div class="col-sm-6">
+					<label class="opt">
+						<input
+							:checked="$store.state.settings.advanced"
+							type="checkbox"
+							name="advanced"
+						/>
+						Advanced settings
+					</label>
+				</div>
+			</div>
+
+			<div class="row">
+				<div v-if="canRegisterProtocol || hasInstallPromptEvent" class="col-sm-12">
+					<h2>Native app</h2>
+					<button
+						v-if="hasInstallPromptEvent"
+						type="button"
+						class="btn"
+						@click.prevent="nativeInstallPrompt"
+					>
+						Add The Lounge to Home screen
+					</button>
+					<button
+						v-if="canRegisterProtocol"
+						type="button"
+						class="btn"
+						@click.prevent="registerProtocol"
+					>
+						Open irc:// URLs with The Lounge
+					</button>
+				</div>
+
+				<div
+					v-if="
+						!$store.state.serverConfiguration.public && $store.state.settings.advanced
+					"
+					class="col-sm-12"
+				>
+					<h2>
+						Settings synchronisation
+						<span
+							class="tooltipped tooltipped-n tooltipped-no-delay"
+							aria-label="Note: This is an experimental feature and may change in future releases."
+						>
+							<button
+								class="extra-experimental"
+								aria-label="Note: This is an experimental feature and may change in future releases."
+							/>
+						</span>
+					</h2>
+					<label class="opt">
+						<input
+							:checked="$store.state.settings.syncSettings"
+							type="checkbox"
+							name="syncSettings"
+						/>
+						Synchronize settings with other clients
+					</label>
+					<template v-if="!$store.state.settings.syncSettings">
+						<div v-if="$store.state.serverHasSettings" class="settings-sync-panel">
+							<p>
+								<strong>Warning:</strong> Checking this box will override the
+								settings of this client with those stored on the server.
+							</p>
+							<p>
+								Use the button below to enable synchronization, and override any
+								settings already synced to the server.
+							</p>
+							<button type="button" class="btn btn-small" @click="onForceSyncClick">
+								Sync settings and enable
+							</button>
+						</div>
+						<div v-else class="settings-sync-panel">
+							<p>
+								<strong>Warning:</strong> No settings have been synced before.
+								Enabling this will sync all settings of this client as the base for
+								other clients.
+							</p>
+						</div>
+					</template>
+				</div>
+
+				<div class="col-sm-12">
+					<h2>Messages</h2>
+				</div>
+				<div class="col-sm-6">
+					<label class="opt">
+						<input :checked="$store.state.settings.motd" type="checkbox" name="motd" />
+						Show <abbr title="Message Of The Day">MOTD</abbr>
+					</label>
+				</div>
+				<div class="col-sm-6">
+					<label class="opt">
+						<input
+							:checked="$store.state.settings.showSeconds"
+							type="checkbox"
+							name="showSeconds"
+						/>
+						Show seconds in timestamp
+					</label>
+				</div>
+				<div class="col-sm-12">
+					<h2>
+						Status messages
+						<span
+							class="tooltipped tooltipped-n tooltipped-no-delay"
+							aria-label="Joins, parts, kicks, nick changes, away changes, and mode changes"
+						>
+							<button
+								class="extra-help"
+								aria-label="Joins, parts, kicks, nick changes, away changes, and mode changes"
+							/>
+						</span>
+					</h2>
+				</div>
+				<div class="col-sm-12">
+					<label class="opt">
+						<input
+							:checked="$store.state.settings.statusMessages === 'shown'"
+							type="radio"
+							name="statusMessages"
+							value="shown"
+						/>
+						Show all status messages individually
+					</label>
+					<label class="opt">
+						<input
+							:checked="$store.state.settings.statusMessages === 'condensed'"
+							type="radio"
+							name="statusMessages"
+							value="condensed"
+						/>
+						Condense status messages together
+					</label>
+					<label class="opt">
+						<input
+							:checked="$store.state.settings.statusMessages === 'hidden'"
+							type="radio"
+							name="statusMessages"
+							value="hidden"
+						/>
+						Hide all status messages
+					</label>
+				</div>
+				<div class="col-sm-12">
+					<h2>Visual Aids</h2>
+				</div>
+				<div class="col-sm-12">
+					<label class="opt">
+						<input
+							:checked="$store.state.settings.coloredNicks"
+							type="checkbox"
+							name="coloredNicks"
+						/>
+						Enable colored nicknames
+					</label>
+					<label class="opt">
+						<input
+							:checked="$store.state.settings.autocomplete"
+							type="checkbox"
+							name="autocomplete"
+						/>
+						Enable autocomplete
+					</label>
+				</div>
+				<div v-if="$store.state.settings.advanced" class="col-sm-12">
+					<label class="opt">
+						<label for="nickPostfix" class="sr-only">
+							Nick autocomplete postfix (e.g. <code>, </code>)
+						</label>
+						<input
+							id="nickPostfix"
+							:value="$store.state.settings.nickPostfix"
+							type="text"
+							name="nickPostfix"
+							class="input"
+							placeholder="Nick autocomplete postfix (e.g. ', ')"
+						/>
+					</label>
+				</div>
+
+				<div class="col-sm-12">
+					<h2>Theme</h2>
+				</div>
+				<div class="col-sm-12">
+					<label for="theme-select" class="sr-only">Theme</label>
+					<select
+						id="theme-select"
+						:value="$store.state.settings.theme"
+						name="theme"
+						class="input"
+					>
+						<option
+							v-for="theme in $store.state.serverConfiguration.themes"
+							:key="theme.name"
+							:value="theme.name"
+						>
+							{{ theme.displayName }}
+						</option>
+					</select>
+				</div>
+
+				<template v-if="$store.state.settings.prefetch">
+					<div class="col-sm-12">
+						<h2>Link previews</h2>
+					</div>
+					<div class="col-sm-6">
+						<label class="opt">
+							<input
+								:checked="$store.state.settings.media"
+								type="checkbox"
+								name="media"
+							/>
+							Auto-expand media
+						</label>
+					</div>
+					<div class="col-sm-6">
+						<label class="opt">
+							<input
+								:checked="$store.state.settings.links"
+								type="checkbox"
+								name="links"
+							/>
+							Auto-expand websites
+						</label>
+					</div>
+				</template>
+
+				<template v-if="!$store.state.serverConfiguration.public">
+					<div class="col-sm-12">
+						<h2>Push Notifications</h2>
+					</div>
+					<div class="col-sm-12">
+						<button
+							id="pushNotifications"
+							type="button"
+							class="btn"
+							:disabled="
+								$store.state.pushNotificationState !== 'supported' &&
+									$store.state.pushNotificationState !== 'subscribed'
+							"
+							@click="onPushButtonClick"
+						>
+							<template v-if="$store.state.pushNotificationState === 'subscribed'">
+								Unsubscribe from push notifications
+							</template>
+							<template v-else-if="$store.state.pushNotificationState === 'loading'">
+								Loading…
+							</template>
+							<template v-else>
+								Subscribe to push notifications
+							</template>
+						</button>
+						<div v-if="$store.state.pushNotificationState === 'nohttps'" class="error">
+							<strong>Warning</strong>: Push notifications are only supported over
+							HTTPS connections.
+						</div>
+						<div
+							v-if="$store.state.pushNotificationState === 'unsupported'"
+							class="error"
+						>
+							<strong>Warning</strong>:
+							<span>Push notifications are not supported by your browser.</span>
+						</div>
+					</div>
+				</template>
+
+				<div class="col-sm-12">
+					<h2>Browser Notifications</h2>
+				</div>
+				<div class="col-sm-12">
+					<label class="opt">
+						<input
+							id="desktopNotifications"
+							:checked="$store.state.settings.desktopNotifications"
+							type="checkbox"
+							name="desktopNotifications"
+						/>
+						Enable browser notifications<br />
+						<div
+							v-if="$store.state.desktopNotificationState === 'unsupported'"
+							class="error"
+						>
+							<strong>Warning</strong>: Notifications are not supported by your
+							browser.
+						</div>
+						<div
+							v-if="$store.state.desktopNotificationState === 'blocked'"
+							id="warnBlockedDesktopNotifications"
+							class="error"
+						>
+							<strong>Warning</strong>: Notifications are blocked by your browser.
+						</div>
+					</label>
+				</div>
+				<div class="col-sm-12">
+					<label class="opt">
+						<input
+							:checked="$store.state.settings.notification"
+							type="checkbox"
+							name="notification"
+						/>
+						Enable notification sound
+					</label>
+				</div>
+				<div class="col-sm-12">
+					<div class="opt">
+						<button id="play" @click.prevent="playNotification">Play sound</button>
+					</div>
+				</div>
+
+				<div v-if="$store.state.settings.advanced" class="col-sm-12">
+					<label class="opt">
+						<input
+							:checked="$store.state.settings.notifyAllMessages"
+							type="checkbox"
+							name="notifyAllMessages"
+						/>
+						Enable notification for all messages
+					</label>
+				</div>
+
+				<div v-if="$store.state.settings.advanced" class="col-sm-12">
+					<label class="opt">
+						<label for="highlights" class="sr-only">
+							Custom highlights (comma-separated keywords)
+						</label>
+						<input
+							id="highlights"
+							:value="$store.state.settings.highlights"
+							type="text"
+							name="highlights"
+							class="input"
+							placeholder="Custom highlights (comma-separated keywords)"
+						/>
+					</label>
+				</div>
+
+				<div
+					v-if="
+						!$store.state.serverConfiguration.public &&
+							!$store.state.serverConfiguration.ldapEnabled
+					"
+					id="change-password"
+				>
+					<div class="col-sm-12">
+						<h2>Change password</h2>
+					</div>
+					<div class="col-sm-12 password-container">
+						<label for="old_password_input" class="sr-only">
+							Enter current password
+						</label>
+						<RevealPassword v-slot:default="slotProps">
+							<input
+								id="old_password_input"
+								:type="slotProps.isVisible ? 'text' : 'password'"
+								name="old_password"
+								class="input"
+								placeholder="Enter current password"
+							/>
+						</RevealPassword>
+					</div>
+					<div class="col-sm-12 password-container">
+						<label for="new_password_input" class="sr-only">
+							Enter desired new password
+						</label>
+						<RevealPassword v-slot:default="slotProps">
+							<input
+								id="new_password_input"
+								:type="slotProps.isVisible ? 'text' : 'password'"
+								name="new_password"
+								class="input"
+								placeholder="Enter desired new password"
+							/>
+						</RevealPassword>
+					</div>
+					<div class="col-sm-12 password-container">
+						<label for="verify_password_input" class="sr-only">
+							Repeat new password
+						</label>
+						<RevealPassword v-slot:default="slotProps">
+							<input
+								id="verify_password_input"
+								:type="slotProps.isVisible ? 'text' : 'password'"
+								name="verify_password"
+								class="input"
+								placeholder="Repeat new password"
+							/>
+						</RevealPassword>
+					</div>
+					<div
+						v-if="passwordChangeStatus && passwordChangeStatus.success"
+						class="col-sm-12 feedback success"
+					>
+						Successfully updated your password
+					</div>
+					<div
+						v-else-if="passwordChangeStatus && passwordChangeStatus.error"
+						class="col-sm-12 feedback error"
+					>
+						{{ passwordErrors[passwordChangeStatus.error] }}
+					</div>
+					<div class="col-sm-12">
+						<button type="submit" class="btn" @click.prevent="changePassword">
+							Change password
+						</button>
+					</div>
+				</div>
+
+				<div v-if="$store.state.settings.advanced" class="col-sm-12">
+					<h2>Custom Stylesheet</h2>
+				</div>
+				<div v-if="$store.state.settings.advanced" class="col-sm-12">
+					<label for="user-specified-css-input" class="sr-only">
+						Custom stylesheet. You can override any style with CSS here.
+					</label>
+					<textarea
+						id="user-specified-css-input"
+						:value="$store.state.settings.userStyles"
+						class="input"
+						name="userStyles"
+						placeholder="/* You can override any style with CSS here */"
+					/>
+				</div>
+			</div>
+
+			<div v-if="!$store.state.serverConfiguration.public" class="session-list">
+				<h2>Sessions</h2>
+
+				<h3>Current session</h3>
+				<div v-if="$store.getters.currentSession" id="session-current">
+					<Session :session="$store.getters.currentSession" />
+				</div>
+
+				<h3>Other sessions</h3>
+				<div id="session-list">
+					<p v-if="$store.state.sessions.length == 0">Loading…</p>
+					<p v-else-if="$store.getters.otherSessions.length == 0">
+						<em>You are not currently logged in to any other device.</em>
+					</p>
+					<template v-else>
+						<Session
+							v-for="session in $store.getters.otherSessions"
+							:key="session.token"
+							:session="session"
+						/>
+					</template>
+				</div>
+			</div>
+		</form>
+	</div>
+</template>
+
+<script>
+import socket from "../../js/socket";
+import webpush from "../../js/webpush";
+import RevealPassword from "../RevealPassword.vue";
+import Session from "../Session.vue";
+import SidebarToggle from "../SidebarToggle.vue";
+
+let installPromptEvent = null;
+
+window.addEventListener("beforeinstallprompt", (e) => {
+	e.preventDefault();
+	installPromptEvent = e;
+});
+
+export default {
+	name: "Settings",
+	components: {
+		RevealPassword,
+		Session,
+		SidebarToggle,
+	},
+	data() {
+		return {
+			canRegisterProtocol: false,
+			passwordChangeStatus: null,
+			passwordErrors: {
+				missing_fields: "Please enter a new password",
+				password_mismatch: "Both new password fields must match",
+				password_incorrect:
+					"The current password field does not match your account password",
+				update_failed: "Failed to update your password",
+			},
+		};
+	},
+	computed: {
+		hasInstallPromptEvent() {
+			// TODO: This doesn't hide the button after clicking
+			return installPromptEvent !== null;
+		},
+	},
+	mounted() {
+		socket.emit("sessions:get");
+
+		// Enable protocol handler registration if supported
+		if (window.navigator.registerProtocolHandler) {
+			this.canRegisterProtocol = true;
+		}
+	},
+	methods: {
+		onChange(event) {
+			const ignore = ["old_password", "new_password", "verify_password"];
+
+			const name = event.target.name;
+
+			if (ignore.includes(name)) {
+				return;
+			}
+
+			let value;
+
+			if (event.target.type === "checkbox") {
+				value = event.target.checked;
+			} else {
+				value = event.target.value;
+			}
+
+			this.$store.dispatch("settings/update", {name, value, sync: true});
+		},
+		changePassword() {
+			const allFields = new FormData(this.$refs.settingsForm);
+			const data = {
+				old_password: allFields.get("old_password"),
+				new_password: allFields.get("new_password"),
+				verify_password: allFields.get("verify_password"),
+			};
+
+			if (!data.old_password || !data.new_password || !data.verify_password) {
+				this.passwordChangeStatus = {
+					success: false,
+					error: "missing_fields",
+				};
+				return;
+			}
+
+			if (data.new_password !== data.verify_password) {
+				this.passwordChangeStatus = {
+					success: false,
+					error: "password_mismatch",
+				};
+				return;
+			}
+
+			socket.once("change-password", (response) => {
+				this.passwordChangeStatus = response;
+			});
+
+			socket.emit("change-password", data);
+		},
+		onForceSyncClick() {
+			this.$store.dispatch("settings/syncAll", true);
+			this.$store.dispatch("settings/update", {
+				name: "syncSettings",
+				value: true,
+				sync: true,
+			});
+		},
+		registerProtocol() {
+			const uri = document.location.origin + document.location.pathname + "?uri=%s";
+
+			window.navigator.registerProtocolHandler("irc", uri, "The Lounge");
+			window.navigator.registerProtocolHandler("ircs", uri, "The Lounge");
+		},
+		nativeInstallPrompt() {
+			installPromptEvent.prompt();
+			installPromptEvent = null;
+		},
+		playNotification() {
+			const pop = new Audio();
+			pop.src = "audio/pop.wav";
+			pop.play();
+		},
+		onPushButtonClick() {
+			webpush.togglePushSubscription();
+		},
+	},
+};
+</script>
diff --git a/client/components/Windows/SignIn.vue b/client/components/Windows/SignIn.vue
new file mode 100644
index 00000000..0d95ced9
--- /dev/null
+++ b/client/components/Windows/SignIn.vue
@@ -0,0 +1,105 @@
+<template>
+	<div id="sign-in" class="window" role="tabpanel" aria-label="Sign-in">
+		<form class="container" method="post" action="" @submit="onSubmit">
+			<img
+				src="img/logo-vertical-transparent-bg.svg"
+				class="logo"
+				alt="The Lounge"
+				width="256"
+				height="170"
+			/>
+			<img
+				src="img/logo-vertical-transparent-bg-inverted.svg"
+				class="logo-inverted"
+				alt="The Lounge"
+				width="256"
+				height="170"
+			/>
+
+			<label for="signin-username">Username</label>
+			<input
+				id="signin-username"
+				ref="username"
+				class="input"
+				type="text"
+				name="username"
+				autocapitalize="none"
+				autocorrect="off"
+				autocomplete="username"
+				:value="getStoredUser()"
+				required
+				autofocus
+			/>
+
+			<div class="password-container">
+				<label for="signin-password">Password</label>
+				<RevealPassword v-slot:default="slotProps">
+					<input
+						id="signin-password"
+						ref="password"
+						:type="slotProps.isVisible ? 'text' : 'password'"
+						name="password"
+						class="input"
+						autocapitalize="none"
+						autocorrect="off"
+						autocomplete="current-password"
+						required
+					/>
+				</RevealPassword>
+			</div>
+
+			<div v-if="errorShown" class="error">Authentication failed.</div>
+
+			<button :disabled="inFlight" type="submit" class="btn">Sign in</button>
+		</form>
+	</div>
+</template>
+
+<script>
+import storage from "../../js/localStorage";
+import socket from "../../js/socket";
+import RevealPassword from "../RevealPassword.vue";
+
+export default {
+	name: "SignIn",
+	components: {
+		RevealPassword,
+	},
+	data() {
+		return {
+			inFlight: false,
+			errorShown: false,
+		};
+	},
+	mounted() {
+		socket.on("auth:failed", this.onAuthFailed);
+	},
+	beforeDestroy() {
+		socket.off("auth:failed", this.onAuthFailed);
+	},
+	methods: {
+		onAuthFailed() {
+			this.inFlight = false;
+			this.errorShown = true;
+		},
+		onSubmit(event) {
+			event.preventDefault();
+
+			this.inFlight = true;
+			this.errorShown = false;
+
+			const values = {
+				user: this.$refs.username.value,
+				password: this.$refs.password.value,
+			};
+
+			storage.set("user", values.user);
+
+			socket.emit("auth:perform", values);
+		},
+		getStoredUser() {
+			return storage.get("user");
+		},
+	},
+};
+</script>
diff --git a/client/css/style.css b/client/css/style.css
index 96ed5c79..2bc2fd03 100644
--- a/client/css/style.css
+++ b/client/css/style.css
@@ -278,6 +278,7 @@ kbd {
 #help .report-issue-link::before,
 #image-viewer .previous-image-btn::before,
 #image-viewer .next-image-btn::before,
+#image-viewer .open-btn::before,
 #sidebar .not-secure-icon::before,
 #sidebar .not-connected-icon::before,
 #sidebar .parted-channel-icon::before,
@@ -323,7 +324,6 @@ kbd {
 
 #sidebar .chan.special::before { content: "\f03a"; /* http://fontawesome.io/icon/list/ */ }
 
-#footer .sign-in::before { content: "\f023"; /* http://fontawesome.io/icon/lock/ */ }
 #footer .connect::before { content: "\f067"; /* http://fontawesome.io/icon/plus/ */ }
 #footer .settings::before { content: "\f013"; /* http://fontawesome.io/icon/cog/ */ }
 #footer .help::before { content: "\f059"; /* http://fontawesome.io/icon/question/ */ }
@@ -477,6 +477,10 @@ kbd {
 	content: "\f105"; /* http://fontawesome.io/icon/angle-right/ */
 }
 
+#image-viewer .open-btn::before {
+	content: "\f35d"; /* https://fontawesome.com/icons/external-link-alt?style=solid */
+}
+
 /* End icons */
 
 #viewport {
@@ -559,6 +563,7 @@ kbd {
 	display: none;
 	flex-direction: column;
 	width: 220px;
+	max-height: 100%;
 	will-change: transform;
 }
 
@@ -848,26 +853,6 @@ background on hover (unless active) */
 	border-radius: 5px;
 }
 
-.signed-out #footer .sign-in {
-	display: inline-block;
-}
-
-.signed-out #footer .connect {
-	display: none;
-}
-
-.public #footer .sign-in {
-	display: none;
-}
-
-#footer .sign-in {
-	display: none;
-}
-
-.signed-out #sidebar {
-	display: none; /* Hide the sidebar when user is signed out */
-}
-
 #windows li,
 #windows p,
 #windows label,
@@ -908,7 +893,8 @@ background on hover (unless active) */
 
 .window {
 	background: var(--window-bg-color);
-	display: none;
+	display: flex;
+	flex-direction: column;
 	overflow-y: auto;
 	height: 100%;
 	scrollbar-width: thin;
@@ -949,11 +935,6 @@ background on hover (unless active) */
 	margin: 20px 0 10px;
 }
 
-#windows .window.active {
-	display: flex;
-	flex-direction: column;
-}
-
 #windows .header {
 	line-height: 45px;
 	height: 45px;
@@ -1253,7 +1234,7 @@ background on hover (unless active) */
 }
 
 #chat .date-marker-text::before {
-	content: attr(data-label);
+	content: attr(aria-label);
 	background-color: var(--window-bg-color);
 	color: var(--date-marker-color);
 	padding: 0 10px;
@@ -1486,6 +1467,10 @@ background on hover (unless active) */
 	transform: rotate(90deg);
 }
 
+#chat .preview {
+	display: flex; /* Fix odd margin added by inline-flex in .toggle-content */
+}
+
 #chat .toggle-content {
 	background: #f6f6f6;
 	border-radius: 5px;
@@ -1749,7 +1734,6 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
 
 #sign-in .error {
 	color: #e74c3c;
-	display: none; /* This message gets displayed on error only */
 	margin-top: 1em;
 	width: 100%;
 }
@@ -1780,8 +1764,33 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
 	margin-top: 30px;
 }
 
-#settings .sync-warning-base {
-	display: none;
+#settings .settings-sync-panel {
+	padding: 10px;
+	margin-bottom: 16px;
+	border-radius: 2px;
+	background-color: #d9edf7;
+	color: #31708f;
+}
+
+#settings .settings-sync-panel p:last-child {
+	margin-bottom: 0;
+}
+
+#settings .settings-sync-panel .btn {
+	color: #007bff;
+	border-color: #007bff;
+	margin-bottom: 0;
+}
+
+#settings .settings-sync-panel .btn:hover,
+#settings .settings-sync-panel .btn:focus {
+	background-color: #007bff;
+	color: #fff;
+}
+
+#settings .settings-sync-panel .btn:active,
+#settings .settings-sync-panel .btn:focus {
+	box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.5);
 }
 
 #settings .opt {
@@ -1878,7 +1887,7 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
 	content: "\f00c"; /* https://fontawesome.com/icons/check?style=solid */
 }
 
-.password-container .reveal-password.visible span::before {
+.password-container .reveal-password-visible span::before {
 	content: "\f070"; /* https://fontawesome.com/icons/eye-slash?style=solid */
 	color: #ff4136;
 }
@@ -1903,15 +1912,6 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
 	margin-bottom: 0;
 }
 
-.is-apple #help .key-all,
-#help .key-apple {
-	display: none;
-}
-
-.is-apple #help .key-apple {
-	display: inline-block;
-}
-
 .whois {
 	display: grid;
 	grid-template-columns: max-content auto;
@@ -2003,11 +2003,6 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
 	color: #3c763d;
 }
 
-#version-checker.up-to-date #check-now {
-	/* "Check now" button is hidden until data expires */
-	display: none;
-}
-
 #version-checker.up-to-date::before {
 	content: "\f00c"; /* http://fontawesome.io/icon/check/ */
 }
@@ -2101,7 +2096,6 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
 }
 
 #context-menu-container {
-	display: none;
 	position: absolute;
 	top: 0;
 	left: 0;
@@ -2123,6 +2117,7 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
 	box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
 	border: 1px solid rgba(0, 0, 0, 0.15);
 	border-radius: 5px;
+	outline: 0;
 }
 
 .context-menu-divider {
@@ -2142,17 +2137,16 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
 	line-height: 1.4;
 	transition: background-color 0.2s;
 	border-radius: 3px;
+	white-space: nowrap;
 }
 
-.context-menu-item:focus,
+.context-menu-item.active,
 .textcomplete-item:focus,
-.context-menu-item:hover,
 .textcomplete-item:hover,
 .textcomplete-menu .active,
 #chat .userlist .user.active {
 	background-color: rgba(0, 0, 0, 0.1);
 	transition: none;
-	outline: 0;
 }
 
 .context-menu-item::before,
@@ -2625,6 +2619,7 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
 
 #upload-overlay,
 #image-viewer,
+#image-viewer .open-btn,
 #image-viewer .close-btn {
 	/* Vertically and horizontally center stuff */
 	display: flex;
@@ -2645,6 +2640,7 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
 	opacity: 0;
 	transition: opacity 0.2s, visibility 0.2s;
 	z-index: 999;
+	user-select: none;
 }
 
 #image-viewer.opened {
@@ -2658,6 +2654,7 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
 }
 
 #image-viewer .close-btn,
+#image-viewer .open-btn,
 #image-viewer .previous-image-btn,
 #image-viewer .next-image-btn {
 	position: fixed;
@@ -2679,6 +2676,14 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
 	content: "×";
 }
 
+#image-viewer .open-btn {
+	right: 0;
+	bottom: 0;
+	top: auto;
+	height: 2em;
+	z-index: 1002;
+}
+
 #image-viewer .previous-image-btn,
 #image-viewer .next-image-btn {
 	bottom: 0;
@@ -2699,19 +2704,10 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
 	opacity: 1;
 }
 
-#image-viewer .image-link {
-	margin: 10px;
-}
-
-#image-viewer .image-link:hover {
-	opacity: 1;
-}
-
-#image-viewer .image-link img {
-	max-width: 100%;
-
-	/* Top/Bottom margins + button height + image/button margin */
-	max-height: calc(100vh - 2 * 10px - 37px - 10px);
+#image-viewer > img {
+	cursor: grab;
+	position: absolute;
+	transform-origin: 50% 50%;
 
 	/* Checkered background for transparent images */
 	background-position: 0 0, 10px 10px;
@@ -2721,10 +2717,6 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
 		linear-gradient(45deg, #eee 25%, #fff 25%, #fff 75%, #eee 75%, #eee 100%);
 }
 
-#image-viewer .open-btn {
-	margin: 0 auto 10px;
-}
-
 /* Correctly handle multiple successive whitespace characters.
    For example: user has quit ( ===> L   O   L <=== )  */
 
diff --git a/client/index.html.tpl b/client/index.html.tpl
index eb584d7b..e66d5539 100644
--- a/client/index.html.tpl
+++ b/client/index.html.tpl
@@ -47,27 +47,22 @@
 	<meta name="theme-color" content="<%- themeColor %>">
 
 	</head>
-	<body class="signed-out<%- public ? " public" : "" %>" data-transports="<%- JSON.stringify(transports) %>">
+	<body class="<%- public ? " public" : "" %>" data-transports="<%- JSON.stringify(transports) %>">
+		<div id="viewport"></div>
 		<div id="loading">
 			<div class="window">
 				<div id="loading-status-container">
 					<img src="img/logo-vertical-transparent-bg.svg" class="logo" alt="The Lounge" width="256" height="170">
 					<img src="img/logo-vertical-transparent-bg-inverted.svg" class="logo-inverted" alt="The Lounge" width="256" height="170">
-					<p id="loading-page-message"><a href="https://enable-javascript.com/" target="_blank" rel="noopener">Your JavaScript must be enabled.</a></p>
+					<p id="loading-page-message">The Lounge requires a modern browser with JavaScript enabled.</p>
 				</div>
 				<div id="loading-reload-container">
 					<p id="loading-slow">This is taking longer than it should, there might be connectivity issues.</p>
 					<button id="loading-reload" class="btn">Reload page</button>
 				</div>
-				<script async src="js/loading-error-handlers.js?v=<%- cacheBust %>"></script>
 			</div>
 		</div>
-		<div id="viewport"></div>
-
-		<div id="context-menu-container"></div>
-		<div id="image-viewer"></div>
-		<div id="upload-overlay"></div>
-
+		<script src="js/loading-error-handlers.js?v=<%- cacheBust %>"></script>
 		<script src="js/bundle.vendor.js?v=<%- cacheBust %>"></script>
 		<script src="js/bundle.js?v=<%- cacheBust %>"></script>
 	</body>
diff --git a/client/js/auth.js b/client/js/auth.js
index 5d8982fb..308031fd 100644
--- a/client/js/auth.js
+++ b/client/js/auth.js
@@ -1,11 +1,11 @@
 "use strict";
 
-const localStorage = require("./localStorage");
-const location = require("./location");
+import storage from "./localStorage";
+import location from "./location";
 
-module.exports = class Auth {
+export default class Auth {
 	static signout() {
-		localStorage.clear();
+		storage.clear();
 		location.reload();
 	}
-};
+}
diff --git a/client/js/autocompletion.js b/client/js/autocompletion.js
index 30aff41e..1b281563 100644
--- a/client/js/autocompletion.js
+++ b/client/js/autocompletion.js
@@ -1,30 +1,14 @@
 "use strict";
 
-const $ = require("jquery");
-const fuzzy = require("fuzzy");
-const Mousetrap = require("mousetrap");
-const {Textcomplete, Textarea} = require("textcomplete");
-const emojiMap = require("./libs/simplemap.json");
-const constants = require("./constants");
-const {vueApp} = require("./vue");
+import Mousetrap from "mousetrap";
+import {Textcomplete, Textarea} from "textcomplete";
+import fuzzy from "fuzzy";
 
-let input;
-let textcomplete;
-let enabled = false;
+import emojiMap from "./helpers/simplemap.json";
+import constants from "./constants";
+import store from "./store";
 
-module.exports = {
-	enable: enableAutocomplete,
-	disable() {
-		if (enabled) {
-			$("#form").off("submit.tabcomplete");
-			input.off("input.tabcomplete");
-			Mousetrap(input.get(0)).unbind("tab", "keydown");
-			textcomplete.destroy();
-			enabled = false;
-			vueApp.isAutoCompleting = false;
-		}
-	},
-};
+export default enableAutocomplete;
 
 const emojiSearchTerms = Object.keys(emojiMap);
 const emojiStrategy = {
@@ -61,17 +45,17 @@ const nicksStrategy = {
 	},
 	replace([, original], position = 1) {
 		// If no postfix specified, return autocompleted nick as-is
-		if (!vueApp.settings.nickPostfix) {
+		if (!store.state.settings.nickPostfix) {
 			return original;
 		}
 
 		// If there is whitespace in the input already, append space to nick
-		if (position > 0 && /\s/.test($("#input").val())) {
+		if (position > 0 && /\s/.test(store.state.activeChannel.channel.pendingMessage)) {
 			return original + " ";
 		}
 
 		// If nick is first in the input, append specified postfix
-		return original + vueApp.settings.nickPostfix;
+		return original + store.state.settings.nickPostfix;
 	},
 	index: 1,
 };
@@ -175,14 +159,12 @@ const backgroundColorStrategy = {
 	index: 2,
 };
 
-function enableAutocomplete(inputRef) {
-	enabled = true;
+function enableAutocomplete(input) {
 	let tabCount = 0;
 	let lastMatch = "";
 	let currentMatches = [];
-	input = $(inputRef);
 
-	input.on("input.tabcomplete", (e) => {
+	input.addEventListener("input", (e) => {
 		if (e.detail === "autocomplete") {
 			return;
 		}
@@ -192,21 +174,20 @@ function enableAutocomplete(inputRef) {
 		lastMatch = "";
 	});
 
-	Mousetrap(input.get(0)).bind(
+	Mousetrap(input).bind(
 		"tab",
 		(e) => {
-			if (vueApp.isAutoCompleting) {
+			if (store.state.isAutoCompleting) {
 				return;
 			}
 
 			e.preventDefault();
 
-			const text = input.val();
-			const element = input.get(0);
+			const text = input.value;
 
 			if (tabCount === 0) {
 				lastMatch = text
-					.substring(0, element.selectionStart)
+					.substring(0, input.selectionStart)
 					.split(/\s/)
 					.pop();
 
@@ -221,19 +202,19 @@ function enableAutocomplete(inputRef) {
 				}
 			}
 
-			const position = element.selectionStart - lastMatch.length;
+			const position = input.selectionStart - lastMatch.length;
 			const newMatch = nicksStrategy.replace(
 				[0, currentMatches[tabCount % currentMatches.length]],
 				position
 			);
-			const remainder = text.substr(element.selectionStart);
+			const remainder = text.substr(input.selectionStart);
 
-			input.val(text.substr(0, position) + newMatch + remainder);
-			element.selectionStart -= remainder.length;
-			element.selectionEnd = element.selectionStart;
+			input.value = text.substr(0, position) + newMatch + remainder;
+			input.selectionStart -= remainder.length;
+			input.selectionEnd = input.selectionStart;
 
 			// Propagate change to Vue model
-			element.dispatchEvent(
+			input.dispatchEvent(
 				new CustomEvent("input", {
 					detail: "autocomplete",
 				})
@@ -245,8 +226,8 @@ function enableAutocomplete(inputRef) {
 		"keydown"
 	);
 
-	const editor = new Textarea(input.get(0));
-	textcomplete = new Textcomplete(editor, {
+	const editor = new Textarea(input);
+	const textcomplete = new Textcomplete(editor, {
 		dropdown: {
 			className: "textcomplete-menu",
 			placement: "top",
@@ -271,16 +252,22 @@ function enableAutocomplete(inputRef) {
 	});
 
 	textcomplete.on("show", () => {
-		vueApp.isAutoCompleting = true;
+		store.commit("isAutoCompleting", true);
 	});
 
 	textcomplete.on("hidden", () => {
-		vueApp.isAutoCompleting = false;
+		store.commit("isAutoCompleting", false);
 	});
 
-	$("#form").on("submit.tabcomplete", () => {
-		textcomplete.hide();
-	});
+	return {
+		hide() {
+			textcomplete.hide();
+		},
+		destroy() {
+			textcomplete.destroy();
+			store.commit("isAutoCompleting", false);
+		},
+	};
 }
 
 function fuzzyGrep(term, array) {
@@ -292,17 +279,17 @@ function fuzzyGrep(term, array) {
 }
 
 function rawNicks() {
-	if (vueApp.activeChannel.channel.users.length > 0) {
-		const users = vueApp.activeChannel.channel.users.slice();
+	if (store.state.activeChannel.channel.users.length > 0) {
+		const users = store.state.activeChannel.channel.users.slice();
 
 		return users.sort((a, b) => b.lastMessage - a.lastMessage).map((u) => u.nick);
 	}
 
-	const me = vueApp.activeChannel.network.nick;
-	const otherUser = vueApp.activeChannel.channel.name;
+	const me = store.state.activeChannel.network.nick;
+	const otherUser = store.state.activeChannel.channel.name;
 
 	// If this is a query, add their name to autocomplete
-	if (me !== otherUser && vueApp.activeChannel.channel.type === "query") {
+	if (me !== otherUser && store.state.activeChannel.channel.type === "query") {
 		return [otherUser, me];
 	}
 
@@ -318,7 +305,7 @@ function completeNicks(word, isFuzzy) {
 		return fuzzyGrep(word, users);
 	}
 
-	return $.grep(users, (w) => !w.toLowerCase().indexOf(word));
+	return users.filter((w) => !w.toLowerCase().indexOf(word));
 }
 
 function completeCommands(word) {
@@ -330,7 +317,7 @@ function completeCommands(word) {
 function completeChans(word) {
 	const words = [];
 
-	for (const channel of vueApp.activeChannel.network.channels) {
+	for (const channel of store.state.activeChannel.network.channels) {
 		if (channel.type === "channel") {
 			words.push(channel.name);
 		}
diff --git a/client/js/clipboard.js b/client/js/clipboard.js
index a2db3586..0b1bc986 100644
--- a/client/js/clipboard.js
+++ b/client/js/clipboard.js
@@ -1,6 +1,6 @@
 "use strict";
 
-module.exports = function(chat) {
+export default function(chat) {
 	// Disable in Firefox as it already copies flex text correctly
 	if (typeof window.InstallTrigger !== "undefined") {
 		return;
@@ -28,4 +28,4 @@ module.exports = function(chat) {
 		selection.removeAllRanges();
 		selection.addRange(range);
 	}, 0);
-};
+}
diff --git a/client/js/commands/collapse.js b/client/js/commands/collapse.js
index aa63e567..0645898a 100644
--- a/client/js/commands/collapse.js
+++ b/client/js/commands/collapse.js
@@ -1,8 +1,36 @@
 "use strict";
 
-const $ = require("jquery");
+import socket from "../socket";
+import store from "../store";
+
+function input() {
+	const messageIds = [];
+
+	for (const message of store.state.activeChannel.channel.messages) {
+		let toggled = false;
+
+		for (const preview of message.previews) {
+			if (preview.shown) {
+				preview.shown = false;
+				toggled = true;
+			}
+		}
+
+		if (toggled) {
+			messageIds.push(message.id);
+		}
+	}
+
+	// Tell the server we're toggling so it remembers at page reload
+	if (messageIds.length > 0) {
+		socket.emit("msg:preview:toggle", {
+			target: store.state.activeChannel.channel.id,
+			messageIds: messageIds,
+			shown: false,
+		});
+	}
 
-exports.input = function() {
-	$(".chan.active .toggle-button.toggle-preview.opened").click();
 	return true;
-};
+}
+
+export default {input};
diff --git a/client/js/commands/expand.js b/client/js/commands/expand.js
index b98c420c..b59b15be 100644
--- a/client/js/commands/expand.js
+++ b/client/js/commands/expand.js
@@ -1,8 +1,36 @@
 "use strict";
 
-const $ = require("jquery");
+import socket from "../socket";
+import store from "../store";
+
+function input() {
+	const messageIds = [];
+
+	for (const message of store.state.activeChannel.channel.messages) {
+		let toggled = false;
+
+		for (const preview of message.previews) {
+			if (!preview.shown) {
+				preview.shown = true;
+				toggled = true;
+			}
+		}
+
+		if (toggled) {
+			messageIds.push(message.id);
+		}
+	}
+
+	// Tell the server we're toggling so it remembers at page reload
+	if (messageIds.length > 0) {
+		socket.emit("msg:preview:toggle", {
+			target: store.state.activeChannel.channel.id,
+			messageIds: messageIds,
+			shown: true,
+		});
+	}
 
-exports.input = function() {
-	$(".chan.active .toggle-button.toggle-preview:not(.opened)").click();
 	return true;
-};
+}
+
+export default {input};
diff --git a/client/js/commands/index.js b/client/js/commands/index.js
index f6f313c8..554c7ab0 100644
--- a/client/js/commands/index.js
+++ b/client/js/commands/index.js
@@ -8,14 +8,14 @@
 // Second argument says it's recursive, third makes sure we only load javascript.
 const commands = require.context("./", true, /\.js$/);
 
-module.exports = commands.keys().reduce((acc, path) => {
+export default commands.keys().reduce((acc, path) => {
 	const command = path.substring(2, path.length - 3);
 
 	if (command === "index") {
 		return acc;
 	}
 
-	acc[command] = commands(path);
+	acc[command] = commands(path).default;
 
 	return acc;
 }, {});
diff --git a/client/js/commands/join.js b/client/js/commands/join.js
index 51780d9b..dd62994e 100644
--- a/client/js/commands/join.js
+++ b/client/js/commands/join.js
@@ -1,17 +1,15 @@
 "use strict";
 
-const $ = require("jquery");
-
-exports.input = function(args) {
-	const utils = require("../utils");
-	const socket = require("../socket");
-	const {vueApp} = require("../vue");
+import socket from "../socket";
+import store from "../store";
+import {switchToChannel} from "../router";
 
+function input(args) {
 	if (args.length > 0) {
 		let channels = args[0];
 
 		if (channels.length > 0) {
-			const chanTypes = vueApp.activeChannel.network.serverOptions.CHANTYPES;
+			const chanTypes = store.state.activeChannel.network.serverOptions.CHANTYPES;
 			const channelList = args[0].split(",");
 
 			if (chanTypes && chanTypes.length > 0) {
@@ -24,26 +22,28 @@ exports.input = function(args) {
 
 			channels = channelList.join(",");
 
-			const chan = utils.findCurrentNetworkChan(channels);
+			const chan = store.getters.findChannelOnCurrentNetwork(channels);
 
 			if (chan) {
-				$(`#sidebar .chan[data-id="${chan.id}"]`).trigger("click");
+				switchToChannel(chan);
 			} else {
 				socket.emit("input", {
 					text: `/join ${channels} ${args.length > 1 ? args[1] : ""}`,
-					target: vueApp.activeChannel.channel.id,
+					target: store.state.activeChannel.channel.id,
 				});
 
 				return true;
 			}
 		}
-	} else if (vueApp.activeChannel.channel.type === "channel") {
+	} else if (store.state.activeChannel.channel.type === "channel") {
 		// If `/join` command is used without any arguments, re-join current channel
 		socket.emit("input", {
-			target: vueApp.activeChannel.channel.id,
-			text: `/join ${vueApp.activeChannel.channel.name}`,
+			target: store.state.activeChannel.channel.id,
+			text: `/join ${store.state.activeChannel.channel.name}`,
 		});
 
 		return true;
 	}
-};
+}
+
+export default {input};
diff --git a/client/js/constants.js b/client/js/constants.js
index 40677f70..4ff328ec 100644
--- a/client/js/constants.js
+++ b/client/js/constants.js
@@ -29,11 +29,13 @@ const timeFormats = {
 
 const sizeUnits = ["B", "KiB", "MiB", "GiB", "TiB"];
 
-module.exports = {
+export default {
 	colorCodeMap,
 	commands: [],
 	condensedTypes,
 	condensedTypesQuery,
 	timeFormats,
 	sizeUnits,
+	// Same value as media query in CSS that forces sidebars to become overlays
+	mobileViewportPixels: 768,
 };
diff --git a/client/js/contextMenu.js b/client/js/contextMenu.js
deleted file mode 100644
index 16e1a8ff..00000000
--- a/client/js/contextMenu.js
+++ /dev/null
@@ -1,168 +0,0 @@
-"use strict";
-
-const $ = require("jquery");
-const Mousetrap = require("mousetrap");
-const templates = require("../views");
-
-const contextMenuContainer = $("#context-menu-container");
-
-module.exports = class ContextMenu {
-	constructor(contextMenuItems, contextMenuActions, selectedElement, event) {
-		this.previousActiveElement = document.activeElement;
-		this.contextMenuItems = contextMenuItems;
-		this.contextMenuActions = contextMenuActions;
-		this.selectedElement = selectedElement;
-		this.event = event;
-	}
-
-	show() {
-		const contextMenu = showContextMenu(
-			this.contextMenuItems,
-			this.selectedElement,
-			this.event
-		);
-		this.bindEvents(contextMenu);
-		return false;
-	}
-
-	hide() {
-		contextMenuContainer
-			.hide()
-			.empty()
-			.off(".contextMenu");
-
-		Mousetrap.unbind("escape");
-	}
-
-	bindEvents(contextMenu) {
-		const contextMenuActions = this.contextMenuActions;
-
-		contextMenuActions.execute = (id, ...args) =>
-			contextMenuActions[id] && contextMenuActions[id](...args);
-
-		const clickItem = (item) => {
-			const itemData = item.attr("data-data");
-			const contextAction = item.attr("data-action");
-
-			this.hide();
-
-			contextMenuActions.execute(contextAction, itemData);
-		};
-
-		contextMenu.on("click", ".context-menu-item", function() {
-			clickItem($(this));
-		});
-
-		const trap = Mousetrap(contextMenu.get(0));
-
-		trap.bind(["up", "down"], (e, key) => {
-			const items = contextMenu.find(".context-menu-item");
-
-			let index = items.toArray().findIndex((item) => $(item).is(":focus"));
-
-			if (key === "down") {
-				index = (index + 1) % items.length;
-			} else {
-				index = Math.max(index, 0) - 1;
-			}
-
-			items.eq(index).trigger("focus");
-		});
-
-		trap.bind("enter", () => {
-			const item = contextMenu.find(".context-menu-item:focus");
-
-			if (item.length) {
-				clickItem(item);
-			}
-
-			return false;
-		});
-
-		// Hide context menu when clicking or right clicking outside of it
-		contextMenuContainer.on("click.contextMenu contextmenu.contextMenu", (e) => {
-			// Do not close the menu when clicking inside of the context menu (e.g. on a divider)
-			if ($(e.target).prop("id") === "context-menu") {
-				return;
-			}
-
-			this.hide();
-			return false;
-		});
-
-		// Hide the context menu when pressing escape within the context menu container
-		Mousetrap.bind("escape", () => {
-			this.hide();
-
-			// Return focus to the previously focused element
-			$(this.previousActiveElement).trigger("focus");
-
-			return false;
-		});
-	}
-};
-
-function showContextMenu(contextMenuItems, selectedElement, event) {
-	const target = $(event.currentTarget);
-	const contextMenu = $("<ul>", {
-		id: "context-menu",
-		role: "menu",
-	});
-
-	for (const item of contextMenuItems) {
-		if (item.check(target)) {
-			if (item.divider) {
-				contextMenu.append(templates.contextmenu_divider());
-			} else {
-				contextMenu.append(
-					templates.contextmenu_item({
-						class:
-							typeof item.className === "function"
-								? item.className(target)
-								: item.className,
-						action: item.actionId,
-						text:
-							typeof item.displayName === "function"
-								? item.displayName(target)
-								: item.displayName,
-						data: typeof item.data === "function" ? item.data(target) : item.data,
-					})
-				);
-			}
-		}
-	}
-
-	contextMenuContainer.html(contextMenu).show();
-
-	contextMenu
-		.css(positionContextMenu(contextMenu, selectedElement, event))
-		.find(".context-menu-item:first-child")
-		.trigger("focus");
-
-	return contextMenu;
-}
-
-function positionContextMenu(contextMenu, selectedElement, e) {
-	let offset;
-	const menuWidth = contextMenu.outerWidth();
-	const menuHeight = contextMenu.outerHeight();
-
-	if (selectedElement.hasClass("menu")) {
-		offset = selectedElement.offset();
-		offset.left -= menuWidth - selectedElement.outerWidth();
-		offset.top += selectedElement.outerHeight();
-		return offset;
-	}
-
-	offset = {left: e.pageX, top: e.pageY};
-
-	if (window.innerWidth - offset.left < menuWidth) {
-		offset.left = window.innerWidth - menuWidth;
-	}
-
-	if (window.innerHeight - offset.top < menuHeight) {
-		offset.top = window.innerHeight - menuHeight;
-	}
-
-	return offset;
-}
diff --git a/client/js/contextMenuFactory.js b/client/js/contextMenuFactory.js
deleted file mode 100644
index 0b6d43be..00000000
--- a/client/js/contextMenuFactory.js
+++ /dev/null
@@ -1,404 +0,0 @@
-"use strict";
-
-const $ = require("jquery");
-const socket = require("./socket");
-const utils = require("./utils");
-const ContextMenu = require("./contextMenu");
-const contextMenuActions = [];
-const contextMenuItems = [];
-const {vueApp, findChannel} = require("./vue");
-
-module.exports = {
-	addContextMenuItem,
-	createContextMenu,
-};
-
-addDefaultItems();
-
-/**
- * Used for adding context menu items. eg:
- *
- * addContextMenuItem({
- * 		check: (target) => target.hasClass("user"),
- * 		className: "customItemName",
- * 	 	data: (target) => target.attr("data-name"),
- * 	 	displayName: "Do something",
- * 	 	callback: (name) => console.log(name), // print the name of the user to console
- * });
- *
- * @param opts
- * @param {function(Object)} [opts.check] - Function to check whether item should show on the context menu, called with the target jquery element, shows if return is truthy
- * @param {string|function(Object)} opts.className - class name for the menu item, should be prefixed for non-default menu items (if function, called with jquery element, and uses return value)
- * @param {string|function(Object)} opts.data - data that will be sent to the callback function (if function, called with jquery element, and uses return value)
- * @param {string|function(Object)} opts.displayName - text to display on the menu item (if function, called with jquery element, and uses return value)
- * @param {function(Object)} opts.callback - Function to call when the context menu item is clicked, called with the data requested in opts.data
- */
-function addContextMenuItem(opts) {
-	opts.check = opts.check || (() => true);
-	opts.actionId = contextMenuActions.push(opts.callback) - 1;
-	contextMenuItems.push(opts);
-}
-
-function addContextDivider(opts) {
-	opts.check = opts.check || (() => true);
-	opts.divider = true;
-	contextMenuItems.push(opts);
-}
-
-function createContextMenu(that, event) {
-	return new ContextMenu(contextMenuItems, contextMenuActions, that, event);
-}
-
-function addWhoisItem() {
-	function whois(itemData) {
-		const chan = utils.findCurrentNetworkChan(itemData);
-
-		if (chan) {
-			$(`#sidebar .chan[data-id="${chan.id}"]`).trigger("click");
-		}
-
-		socket.emit("input", {
-			target: Number($("#chat").attr("data-id")),
-			text: "/whois " + itemData,
-		});
-	}
-
-	addContextMenuItem({
-		check: (target) => target.hasClass("user"),
-		className: "user",
-		displayName: (target) => target.attr("data-name"),
-		data: (target) => target.attr("data-name"),
-		callback: whois,
-	});
-
-	addContextDivider({
-		check: (target) => target.hasClass("user"),
-	});
-
-	addContextMenuItem({
-		check: (target) => target.hasClass("user") || target.hasClass("query"),
-		className: "action-whois",
-		displayName: "User information",
-		data: (target) => target.attr("data-name") || target.attr("aria-label"),
-		callback: whois,
-	});
-}
-
-function addQueryItem() {
-	function query(itemData) {
-		const chan = utils.findCurrentNetworkChan(itemData);
-
-		if (chan) {
-			$(`#sidebar .chan[data-id="${chan.id}"]`).trigger("click");
-		}
-
-		socket.emit("input", {
-			target: Number($("#chat").attr("data-id")),
-			text: "/query " + itemData,
-		});
-	}
-
-	addContextMenuItem({
-		check: (target) => target.hasClass("user"),
-		className: "action-query",
-		displayName: "Direct messages",
-		data: (target) => target.attr("data-name"),
-		callback: query,
-	});
-}
-
-function addCloseItem() {
-	function getCloseDisplay(target) {
-		if (target.hasClass("lobby")) {
-			return "Remove";
-		} else if (target.hasClass("channel")) {
-			return "Leave";
-		}
-
-		return "Close";
-	}
-
-	addContextMenuItem({
-		check: (target) => target.hasClass("chan"),
-		className: "close",
-		displayName: getCloseDisplay,
-		data: (target) => target.attr("data-target"),
-		callback: (itemData) => utils.closeChan($(`.networks .chan[data-target="${itemData}"]`)),
-	});
-}
-
-function addConnectItem() {
-	function connect(itemData) {
-		socket.emit("input", {
-			target: Number(itemData),
-			text: "/connect",
-		});
-	}
-
-	addContextMenuItem({
-		check: (target) => target.hasClass("lobby") && target.parent().hasClass("not-connected"),
-		className: "connect",
-		displayName: "Connect",
-		data: (target) => target.attr("data-id"),
-		callback: connect,
-	});
-}
-
-function addDisconnectItem() {
-	function disconnect(itemData) {
-		socket.emit("input", {
-			target: Number(itemData),
-			text: "/disconnect",
-		});
-	}
-
-	addContextMenuItem({
-		check: (target) => target.hasClass("lobby") && !target.parent().hasClass("not-connected"),
-		className: "disconnect",
-		displayName: "Disconnect",
-		data: (target) => target.attr("data-id"),
-		callback: disconnect,
-	});
-}
-
-function addKickItem() {
-	function kick(itemData) {
-		socket.emit("input", {
-			target: Number($("#chat").attr("data-id")),
-			text: "/kick " + itemData,
-		});
-	}
-
-	addContextMenuItem({
-		check: (target) =>
-			utils.hasRoleInChannel(target.closest(".chan"), ["op"]) &&
-			target.closest(".chan").attr("data-type") === "channel",
-		className: "action-kick",
-		displayName: "Kick",
-		data: (target) => target.attr("data-name"),
-		callback: kick,
-	});
-}
-
-function addOpItem() {
-	function op(itemData) {
-		socket.emit("input", {
-			target: Number($("#chat").attr("data-id")),
-			text: "/op " + itemData,
-		});
-	}
-
-	addContextMenuItem({
-		check: (target) =>
-			utils.hasRoleInChannel(target.closest(".chan"), ["op"]) &&
-			!utils.hasRoleInChannel(target.closest(".chan"), ["op"], target.attr("data-name")),
-		className: "action-op",
-		displayName: "Give operator (+o)",
-		data: (target) => target.attr("data-name"),
-		callback: op,
-	});
-}
-
-function addDeopItem() {
-	function deop(itemData) {
-		socket.emit("input", {
-			target: Number($("#chat").attr("data-id")),
-			text: "/deop " + itemData,
-		});
-	}
-
-	addContextMenuItem({
-		check: (target) =>
-			utils.hasRoleInChannel(target.closest(".chan"), ["op"]) &&
-			utils.hasRoleInChannel(target.closest(".chan"), ["op"], target.attr("data-name")),
-		className: "action-op",
-		displayName: "Revoke operator (-o)",
-		data: (target) => target.attr("data-name"),
-		callback: deop,
-	});
-}
-
-function addVoiceItem() {
-	function voice(itemData) {
-		socket.emit("input", {
-			target: Number($("#chat").attr("data-id")),
-			text: "/voice " + itemData,
-		});
-	}
-
-	addContextMenuItem({
-		check: (target) =>
-			utils.hasRoleInChannel(target.closest(".chan"), ["op"]) &&
-			!utils.hasRoleInChannel(target.closest(".chan"), ["voice"], target.attr("data-name")),
-		className: "action-voice",
-		displayName: "Give voice (+v)",
-		data: (target) => target.attr("data-name"),
-		callback: voice,
-	});
-}
-
-function addDevoiceItem() {
-	function devoice(itemData) {
-		socket.emit("input", {
-			target: Number($("#chat").attr("data-id")),
-			text: "/devoice " + itemData,
-		});
-	}
-
-	addContextMenuItem({
-		check: (target) =>
-			utils.hasRoleInChannel(target.closest(".chan"), ["op"]) &&
-			utils.hasRoleInChannel(target.closest(".chan"), ["voice"], target.attr("data-name")),
-		className: "action-voice",
-		displayName: "Revoke voice (-v)",
-		data: (target) => target.attr("data-name"),
-		callback: devoice,
-	});
-}
-
-function addFocusItem() {
-	function focusChan(itemData) {
-		$(`.networks .chan[data-target="${itemData}"]`).click();
-	}
-
-	const getClass = (target) => {
-		if (target.hasClass("lobby")) {
-			return "network";
-		} else if (target.hasClass("query")) {
-			return "query";
-		}
-
-		return "chan";
-	};
-
-	addContextMenuItem({
-		check: (target) => target.hasClass("chan"),
-		className: getClass,
-		displayName: (target) => target.attr("data-name") || target.attr("aria-label"),
-		data: (target) => target.attr("data-target"),
-		callback: focusChan,
-	});
-
-	addContextDivider({
-		check: (target) => target.hasClass("chan"),
-	});
-}
-
-function addEditNetworkItem() {
-	function edit(itemData) {
-		socket.emit("network:get", itemData);
-		$('button[data-target="#connect"]').trigger("click");
-	}
-
-	addContextMenuItem({
-		check: (target) => target.hasClass("lobby"),
-		className: "edit",
-		displayName: "Edit this network…",
-		data: (target) => target.closest(".network").attr("data-uuid"),
-		callback: edit,
-	});
-}
-
-function addChannelListItem() {
-	function list(itemData) {
-		socket.emit("input", {
-			target: parseInt(itemData, 10),
-			text: "/list",
-		});
-	}
-
-	addContextMenuItem({
-		check: (target) => target.hasClass("lobby"),
-		className: "list",
-		displayName: "List all channels",
-		data: (target) => target.attr("data-id"),
-		callback: list,
-	});
-}
-
-function addEditTopicItem() {
-	function setEditTopic(itemData) {
-		findChannel(Number(itemData)).channel.editTopic = true;
-		document.querySelector(`#sidebar .chan[data-id="${Number(itemData)}"]`).click();
-
-		vueApp.$nextTick(() => {
-			document.querySelector(`#chan-${Number(itemData)} .topic-input`).focus();
-		});
-	}
-
-	addContextMenuItem({
-		check: (target) => target.hasClass("channel"),
-		className: "edit",
-		displayName: "Edit topic",
-		data: (target) => target.attr("data-id"),
-		callback: setEditTopic,
-	});
-}
-
-function addBanListItem() {
-	function banlist(itemData) {
-		socket.emit("input", {
-			target: parseInt(itemData, 10),
-			text: "/banlist",
-		});
-	}
-
-	addContextMenuItem({
-		check: (target) => target.hasClass("channel"),
-		className: "list",
-		displayName: "List banned users",
-		data: (target) => target.attr("data-id"),
-		callback: banlist,
-	});
-}
-
-function addJoinItem() {
-	function openJoinForm(itemData) {
-		findChannel(Number(itemData)).network.isJoinChannelShown = true;
-	}
-
-	addContextMenuItem({
-		check: (target) => target.hasClass("lobby"),
-		className: "join",
-		displayName: "Join a channel…",
-		data: (target) => target.attr("data-id"),
-		callback: openJoinForm,
-	});
-}
-
-function addIgnoreListItem() {
-	function ignorelist(itemData) {
-		socket.emit("input", {
-			target: parseInt(itemData, 10),
-			text: "/ignorelist",
-		});
-	}
-
-	addContextMenuItem({
-		check: (target) => target.hasClass("lobby"),
-		className: "list",
-		displayName: "List ignored users",
-		data: (target) => target.attr("data-id"),
-		callback: ignorelist,
-	});
-}
-
-function addDefaultItems() {
-	addFocusItem();
-	addWhoisItem();
-	addQueryItem();
-	addKickItem();
-	addOpItem();
-	addDeopItem();
-	addVoiceItem();
-	addDevoiceItem();
-	addEditNetworkItem();
-	addJoinItem();
-	addChannelListItem();
-	addEditTopicItem();
-	addBanListItem();
-	addIgnoreListItem();
-	addConnectItem();
-	addDisconnectItem();
-	addCloseItem();
-}
diff --git a/client/js/libs/handlebars/colorClass.js b/client/js/helpers/colorClass.js
similarity index 91%
rename from client/js/libs/handlebars/colorClass.js
rename to client/js/helpers/colorClass.js
index 2339bc73..c327c0e3 100644
--- a/client/js/libs/handlebars/colorClass.js
+++ b/client/js/helpers/colorClass.js
@@ -1,7 +1,7 @@
 "use strict";
 
 // Generates a string from "color-1" to "color-32" based on an input string
-module.exports = function(str) {
+export default (str) => {
 	let hash = 0;
 
 	for (let i = 0; i < str.length; i++) {
diff --git a/client/js/helpers/contextMenu.js b/client/js/helpers/contextMenu.js
new file mode 100644
index 00000000..a9818a0f
--- /dev/null
+++ b/client/js/helpers/contextMenu.js
@@ -0,0 +1,295 @@
+"use strict";
+
+import socket from "../socket";
+
+export function generateChannelContextMenu($root, channel, network) {
+	const typeMap = {
+		lobby: "network",
+		channel: "chan",
+		query: "query",
+		special: "chan",
+	};
+
+	const closeMap = {
+		lobby: "Remove",
+		channel: "Leave",
+		query: "Close",
+		special: "Close",
+	};
+
+	let items = [
+		{
+			label: channel.name,
+			type: "item",
+			class: typeMap[channel.type],
+			link: `/chan-${channel.id}`,
+		},
+		{
+			type: "divider",
+		},
+	];
+
+	// Add menu items for lobbies
+	if (channel.type === "lobby") {
+		items = [
+			...items,
+			{
+				label: "Edit this network…",
+				type: "item",
+				class: "edit",
+				link: `/edit-network/${network.uuid}`,
+			},
+			{
+				label: "Join a channel…",
+				type: "item",
+				class: "join",
+				action: () => (network.isJoinChannelShown = true),
+			},
+			{
+				label: "List all channels",
+				type: "item",
+				class: "list",
+				action: () =>
+					socket.emit("input", {
+						target: channel.id,
+						text: "/list",
+					}),
+			},
+			{
+				label: "List ignored users",
+				type: "item",
+				class: "list",
+				action: () =>
+					socket.emit("input", {
+						target: channel.id,
+						text: "/ignorelist",
+					}),
+			},
+			network.status.connected
+				? {
+						label: "Disconnect",
+						type: "item",
+						class: "disconnect",
+						action: () =>
+							socket.emit("input", {
+								target: channel.id,
+								text: "/disconnect",
+							}),
+				  }
+				: {
+						label: "Connect",
+						type: "item",
+						class: "connect",
+						action: () =>
+							socket.emit("input", {
+								target: channel.id,
+								text: "/connect",
+							}),
+				  },
+		];
+	}
+
+	// Add menu items for channels
+	if (channel.type === "channel") {
+		items.push({
+			label: "Edit topic",
+			type: "item",
+			class: "edit",
+			action() {
+				channel.editTopic = true;
+				$root.switchToChannel(channel);
+
+				$root.$nextTick(() =>
+					document.querySelector(`#chan-${channel.id} .topic-input`).focus()
+				);
+			},
+		});
+		items.push({
+			label: "List banned users",
+			type: "item",
+			class: "list",
+			action() {
+				socket.emit("input", {
+					target: channel.id,
+					text: "/banlist",
+				});
+			},
+		});
+	}
+
+	// Add menu items for queries
+	if (channel.type === "query") {
+		items.push({
+			label: "User information",
+			type: "item",
+			class: "action-whois",
+			action() {
+				$root.switchToChannel(channel);
+				socket.emit("input", {
+					target: channel.id,
+					text: "/whois " + channel.name,
+				});
+			},
+		});
+	}
+
+	// Add close menu item
+	items.push({
+		label: closeMap[channel.type],
+		type: "item",
+		class: "close",
+		action() {
+			$root.closeChannel(channel);
+		},
+	});
+
+	return items;
+}
+
+export function generateUserContextMenu($root, channel, network, user) {
+	const currentChannelUser = channel.users.find((u) => u.nick === network.nick) || {};
+
+	const whois = () => {
+		const chan = $root.$store.getters.findChannelOnCurrentNetwork(user.nick);
+
+		if (chan) {
+			$root.switchToChannel(chan);
+		}
+
+		socket.emit("input", {
+			target: channel.id,
+			text: "/whois " + user.nick,
+		});
+	};
+
+	const items = [
+		{
+			label: user.nick,
+			type: "item",
+			class: "user",
+			action: whois,
+		},
+		{
+			type: "divider",
+		},
+		{
+			label: "User information",
+			type: "item",
+			class: "action-whois",
+			action: whois,
+		},
+		{
+			label: "Direct messages",
+			type: "item",
+			class: "action-query",
+			action() {
+				const chan = $root.$store.getters.findChannelOnCurrentNetwork(user.nick);
+
+				if (chan) {
+					$root.switchToChannel(chan);
+				}
+
+				socket.emit("input", {
+					target: channel.id,
+					text: "/query " + user.nick,
+				});
+			},
+		},
+	];
+
+	if (currentChannelUser.mode === "@") {
+		items.push({
+			label: "Kick",
+			type: "item",
+			class: "action-kick",
+			action() {
+				socket.emit("input", {
+					target: channel.id,
+					text: "/kick " + user.nick,
+				});
+			},
+		});
+
+		if (user.mode === "@") {
+			items.push({
+				label: "Revoke operator (-o)",
+				type: "item",
+				class: "action-op",
+				action() {
+					socket.emit("input", {
+						target: channel.id,
+						text: "/deop " + user.nick,
+					});
+				},
+			});
+		} else {
+			items.push({
+				label: "Give operator (+o)",
+				type: "item",
+				class: "action-op",
+				action() {
+					socket.emit("input", {
+						target: channel.id,
+						text: "/op " + user.nick,
+					});
+				},
+			});
+		}
+
+		if (user.mode === "+") {
+			items.push({
+				label: "Revoke voice (-v)",
+				type: "item",
+				class: "action-voice",
+				action() {
+					socket.emit("input", {
+						target: channel.id,
+						text: "/devoice " + user.nick,
+					});
+				},
+			});
+		} else {
+			items.push({
+				label: "Give voice (+v)",
+				type: "item",
+				class: "action-voice",
+				action() {
+					socket.emit("input", {
+						target: channel.id,
+						text: "/voice " + user.nick,
+					});
+				},
+			});
+		}
+	}
+
+	return items;
+}
+
+export function generateRemoveNetwork($root, lobby) {
+	return [
+		{
+			label: lobby.name,
+			type: "item",
+			class: "network",
+		},
+		{
+			type: "divider",
+		},
+		{
+			label: "Yes, remove this",
+			type: "item",
+			action() {
+				lobby.closed = true;
+				socket.emit("input", {
+					target: Number(lobby.id),
+					text: "/quit",
+				});
+			},
+		},
+		{
+			label: "Cancel",
+			type: "item",
+		},
+	];
+}
diff --git a/client/js/libs/handlebars/friendlysize.js b/client/js/helpers/friendlysize.js
similarity index 90%
rename from client/js/libs/handlebars/friendlysize.js
rename to client/js/helpers/friendlysize.js
index bd485f82..5400a440 100644
--- a/client/js/libs/handlebars/friendlysize.js
+++ b/client/js/helpers/friendlysize.js
@@ -2,7 +2,7 @@
 
 const sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
 
-module.exports = function(size) {
+export default (size) => {
 	// Loosely inspired from https://stackoverflow.com/a/18650828/1935861
 	const i = size > 0 ? Math.floor(Math.log(size) / Math.log(1024)) : 0;
 	const fixedSize = parseFloat((size / Math.pow(1024, i)).toFixed(1));
diff --git a/client/js/libs/fullnamemap.json b/client/js/helpers/fullnamemap.json
similarity index 100%
rename from client/js/libs/fullnamemap.json
rename to client/js/helpers/fullnamemap.json
diff --git a/client/js/libs/handlebars/ircmessageparser/anyIntersection.js b/client/js/helpers/ircmessageparser/anyIntersection.js
similarity index 91%
rename from client/js/libs/handlebars/ircmessageparser/anyIntersection.js
rename to client/js/helpers/ircmessageparser/anyIntersection.js
index 458c0333..557ad945 100644
--- a/client/js/libs/handlebars/ircmessageparser/anyIntersection.js
+++ b/client/js/helpers/ircmessageparser/anyIntersection.js
@@ -11,4 +11,4 @@ function anyIntersection(a, b) {
 	);
 }
 
-module.exports = anyIntersection;
+export default anyIntersection;
diff --git a/client/js/libs/handlebars/ircmessageparser/cleanIrcMessage.js b/client/js/helpers/ircmessageparser/cleanIrcMessage.js
similarity index 100%
rename from client/js/libs/handlebars/ircmessageparser/cleanIrcMessage.js
rename to client/js/helpers/ircmessageparser/cleanIrcMessage.js
diff --git a/client/js/libs/handlebars/ircmessageparser/fill.js b/client/js/helpers/ircmessageparser/fill.js
similarity index 97%
rename from client/js/libs/handlebars/ircmessageparser/fill.js
rename to client/js/helpers/ircmessageparser/fill.js
index 564cf478..8ae271d4 100644
--- a/client/js/libs/handlebars/ircmessageparser/fill.js
+++ b/client/js/helpers/ircmessageparser/fill.js
@@ -32,4 +32,4 @@ function fill(existingEntries, text) {
 	return result;
 }
 
-module.exports = fill;
+export default fill;
diff --git a/client/js/libs/handlebars/ircmessageparser/findChannels.js b/client/js/helpers/ircmessageparser/findChannels.js
similarity index 94%
rename from client/js/libs/handlebars/ircmessageparser/findChannels.js
rename to client/js/helpers/ircmessageparser/findChannels.js
index d7a7385d..044dfcb9 100644
--- a/client/js/libs/handlebars/ircmessageparser/findChannels.js
+++ b/client/js/helpers/ircmessageparser/findChannels.js
@@ -3,7 +3,7 @@
 // Escapes the RegExp special characters "^", "$", "", ".", "*", "+", "?", "(",
 // ")", "[", "]", "{", "}", and "|" in string.
 // See https://lodash.com/docs/#escapeRegExp
-const escapeRegExp = require("lodash/escapeRegExp");
+import escapeRegExp from "lodash/escapeRegExp";
 
 // Given an array of channel prefixes (such as "#" and "&") and an array of user
 // modes (such as "@" and "+"), this function extracts channels and nicks from a
@@ -40,4 +40,4 @@ function findChannels(text, channelPrefixes, userModes) {
 	return result;
 }
 
-module.exports = findChannels;
+export default findChannels;
diff --git a/client/js/libs/handlebars/ircmessageparser/findEmoji.js b/client/js/helpers/ircmessageparser/findEmoji.js
similarity index 91%
rename from client/js/libs/handlebars/ircmessageparser/findEmoji.js
rename to client/js/helpers/ircmessageparser/findEmoji.js
index 93ba7cb6..4559c96f 100644
--- a/client/js/libs/handlebars/ircmessageparser/findEmoji.js
+++ b/client/js/helpers/ircmessageparser/findEmoji.js
@@ -17,4 +17,4 @@ function findEmoji(text) {
 	return result;
 }
 
-module.exports = findEmoji;
+export default findEmoji;
diff --git a/client/js/libs/handlebars/ircmessageparser/findLinks.js b/client/js/helpers/ircmessageparser/findLinks.js
similarity index 100%
rename from client/js/libs/handlebars/ircmessageparser/findLinks.js
rename to client/js/helpers/ircmessageparser/findLinks.js
diff --git a/client/js/libs/handlebars/ircmessageparser/findNames.js b/client/js/helpers/ircmessageparser/findNames.js
similarity index 94%
rename from client/js/libs/handlebars/ircmessageparser/findNames.js
rename to client/js/helpers/ircmessageparser/findNames.js
index 5ce136b5..58fee254 100644
--- a/client/js/libs/handlebars/ircmessageparser/findNames.js
+++ b/client/js/helpers/ircmessageparser/findNames.js
@@ -25,4 +25,4 @@ function findNames(text, users) {
 	return result;
 }
 
-module.exports = findNames;
+export default findNames;
diff --git a/client/js/libs/handlebars/ircmessageparser/merge.js b/client/js/helpers/ircmessageparser/merge.js
similarity index 94%
rename from client/js/libs/handlebars/ircmessageparser/merge.js
rename to client/js/helpers/ircmessageparser/merge.js
index ce569f4a..5d22930b 100644
--- a/client/js/libs/handlebars/ircmessageparser/merge.js
+++ b/client/js/helpers/ircmessageparser/merge.js
@@ -1,7 +1,7 @@
 "use strict";
 
-const anyIntersection = require("./anyIntersection");
-const fill = require("./fill");
+import anyIntersection from "./anyIntersection";
+import fill from "./fill";
 
 // Merge text part information within a styling fragment
 function assign(textPart, fragment) {
@@ -51,4 +51,4 @@ function merge(textParts, styleFragments, cleanText) {
 	});
 }
 
-module.exports = merge;
+export default merge;
diff --git a/client/js/libs/handlebars/ircmessageparser/parseStyle.js b/client/js/helpers/ircmessageparser/parseStyle.js
similarity index 99%
rename from client/js/libs/handlebars/ircmessageparser/parseStyle.js
rename to client/js/helpers/ircmessageparser/parseStyle.js
index 8a6734c3..e1671332 100644
--- a/client/js/libs/handlebars/ircmessageparser/parseStyle.js
+++ b/client/js/helpers/ircmessageparser/parseStyle.js
@@ -234,4 +234,4 @@ function prepare(text) {
 	);
 }
 
-module.exports = prepare;
+export default prepare;
diff --git a/client/js/helpers/isChannelCollapsed.js b/client/js/helpers/isChannelCollapsed.js
new file mode 100644
index 00000000..5c49da1b
--- /dev/null
+++ b/client/js/helpers/isChannelCollapsed.js
@@ -0,0 +1,15 @@
+"use strict";
+
+import store from "../store";
+
+export default (network, channel) => {
+	if (!network.isCollapsed || channel.highlight || channel.type === "lobby") {
+		return false;
+	}
+
+	if (store.state.activeChannel && channel === store.state.activeChannel.channel) {
+		return false;
+	}
+
+	return true;
+};
diff --git a/client/js/helpers/localetime.js b/client/js/helpers/localetime.js
new file mode 100644
index 00000000..74b7546f
--- /dev/null
+++ b/client/js/helpers/localetime.js
@@ -0,0 +1,5 @@
+"use strict";
+
+import dayjs from "dayjs";
+
+export default (time) => dayjs(time).format("D MMMM YYYY, HH:mm:ss");
diff --git a/client/js/libs/handlebars/parse.js b/client/js/helpers/parse.js
similarity index 80%
rename from client/js/libs/handlebars/parse.js
rename to client/js/helpers/parse.js
index 9488c020..61a388a1 100644
--- a/client/js/libs/handlebars/parse.js
+++ b/client/js/helpers/parse.js
@@ -1,15 +1,17 @@
 "use strict";
 
-const parseStyle = require("./ircmessageparser/parseStyle");
-const findChannels = require("./ircmessageparser/findChannels");
-const findLinks = require("./ircmessageparser/findLinks");
-const findEmoji = require("./ircmessageparser/findEmoji");
-const findNames = require("./ircmessageparser/findNames");
-const merge = require("./ircmessageparser/merge");
-const colorClass = require("./colorClass");
-const emojiMap = require("../fullnamemap.json");
-const LinkPreviewToggle = require("../../../components/LinkPreviewToggle.vue").default;
-const LinkPreviewFileSize = require("../../../components/LinkPreviewFileSize.vue").default;
+import parseStyle from "./ircmessageparser/parseStyle";
+import findChannels from "./ircmessageparser/findChannels";
+import findLinks from "./ircmessageparser/findLinks";
+import findEmoji from "./ircmessageparser/findEmoji";
+import findNames from "./ircmessageparser/findNames";
+import merge from "./ircmessageparser/merge";
+import emojiMap from "./fullnamemap.json";
+import LinkPreviewToggle from "../../components/LinkPreviewToggle.vue";
+import LinkPreviewFileSize from "../../components/LinkPreviewFileSize.vue";
+import InlineChannel from "../../components/InlineChannel.vue";
+import Username from "../../components/Username.vue";
+
 const emojiModifiersRegex = /[\u{1f3fb}-\u{1f3ff}]/gu;
 
 // Create an HTML `span` with styling information for a given fragment
@@ -68,7 +70,7 @@ function createFragment(fragment, createElement) {
 
 // Transform an IRC message potentially filled with styling control codes, URLs,
 // nicknames, and channels into a string of HTML elements to display on the client.
-module.exports = function parse(createElement, text, message = undefined, network = undefined) {
+function parse(createElement, text, message = undefined, network = undefined) {
 	// Extract the styling information and get the plain text version from it
 	const styleFragments = parseStyle(text);
 	const cleanText = styleFragments.map((fragment) => fragment.text).join("");
@@ -151,14 +153,10 @@ module.exports = function parse(createElement, text, message = undefined, networ
 			);
 		} else if (textPart.channel) {
 			return createElement(
-				"span",
+				InlineChannel,
 				{
-					class: ["inline-channel"],
-					attrs: {
-						role: "button",
-						dir: "auto",
-						tabindex: 0,
-						"data-chan": textPart.channel,
+					props: {
+						channel: textPart.channel,
 					},
 				},
 				fragments
@@ -183,13 +181,15 @@ module.exports = function parse(createElement, text, message = undefined, networ
 			);
 		} else if (textPart.nick) {
 			return createElement(
-				"span",
+				Username,
 				{
-					class: ["user", colorClass(textPart.nick)],
+					props: {
+						user: {
+							nick: textPart.nick,
+						},
+					},
 					attrs: {
-						role: "button",
 						dir: "auto",
-						"data-name": textPart.nick,
 					},
 				},
 				fragments
@@ -198,4 +198,6 @@ module.exports = function parse(createElement, text, message = undefined, networ
 
 		return fragments;
 	});
-};
+}
+
+export default parse;
diff --git a/client/js/helpers/parseIrcUri.js b/client/js/helpers/parseIrcUri.js
new file mode 100644
index 00000000..9ed09073
--- /dev/null
+++ b/client/js/helpers/parseIrcUri.js
@@ -0,0 +1,56 @@
+"use strict";
+
+export default (stringUri) => {
+	const data = {};
+
+	try {
+		// https://tools.ietf.org/html/draft-butcher-irc-url-04
+		const uri = new URL(stringUri);
+
+		// Replace protocol with a "special protocol" (that's what it's called in WHATWG spec)
+		// So that the uri can be properly parsed
+		if (uri.protocol === "irc:") {
+			uri.protocol = "http:";
+
+			if (!uri.port) {
+				uri.port = 6667;
+			}
+
+			data.tls = false;
+		} else if (uri.protocol === "ircs:") {
+			uri.protocol = "https:";
+
+			if (!uri.port) {
+				uri.port = 6697;
+			}
+
+			data.tls = true;
+		} else {
+			return;
+		}
+
+		if (!uri.hostname) {
+			return {};
+		}
+
+		data.host = data.name = uri.hostname;
+		data.port = uri.port;
+
+		let channel = "";
+
+		if (uri.pathname.length > 1) {
+			channel = uri.pathname.substr(1); // Remove slash
+		}
+
+		if (uri.hash.length > 1) {
+			channel += uri.hash;
+		}
+
+		// We don't split channels or append # here because the connect window takes care of that
+		data.join = channel;
+	} catch (e) {
+		// do nothing on invalid uri
+	}
+
+	return data;
+};
diff --git a/client/js/libs/handlebars/roundBadgeNumber.js b/client/js/helpers/roundBadgeNumber.js
similarity index 77%
rename from client/js/libs/handlebars/roundBadgeNumber.js
rename to client/js/helpers/roundBadgeNumber.js
index 34c18c96..77cdb6e5 100644
--- a/client/js/libs/handlebars/roundBadgeNumber.js
+++ b/client/js/helpers/roundBadgeNumber.js
@@ -1,6 +1,6 @@
 "use strict";
 
-module.exports = function(count) {
+export default (count) => {
 	if (count < 1000) {
 		return count.toString();
 	}
diff --git a/client/js/libs/simplemap.json b/client/js/helpers/simplemap.json
similarity index 100%
rename from client/js/libs/simplemap.json
rename to client/js/helpers/simplemap.json
diff --git a/client/js/keybinds.js b/client/js/keybinds.js
index e16043e1..e1b0c850 100644
--- a/client/js/keybinds.js
+++ b/client/js/keybinds.js
@@ -1,72 +1,70 @@
 "use strict";
 
-const $ = require("jquery");
-const Mousetrap = require("mousetrap");
-const utils = require("./utils");
-const {vueApp} = require("./vue");
+import Mousetrap from "mousetrap";
 
+import store from "./store";
+import {switchToChannel} from "./router";
+import isChannelCollapsed from "./helpers/isChannelCollapsed";
+
+// Switch to the next/previous window in the channel list.
 Mousetrap.bind(["alt+up", "alt+down"], function(e, keys) {
-	const sidebar = $("#sidebar");
-	const channels = sidebar.find(".chan").not(".network.collapsed :not(.lobby)");
-	const index = channels.index(channels.filter(".active"));
-	const direction = keys.split("+").pop();
-	let target;
-
-	switch (direction) {
-		case "up":
-			target = (channels.length + (index - 1 + channels.length)) % channels.length;
-			break;
-
-		case "down":
-			target = (channels.length + (index + 1 + channels.length)) % channels.length;
-			break;
+	if (store.state.networks.length === 0) {
+		return false;
 	}
 
-	target = channels.eq(target).click();
-	utils.scrollIntoViewNicely(target[0]);
+	const direction = keys.split("+").pop() === "up" ? -1 : 1;
+	const flatChannels = [];
+	let index = -1;
+
+	for (const network of store.state.networks) {
+		for (const channel of network.channels) {
+			if (isChannelCollapsed(network, channel)) {
+				continue;
+			}
+
+			if (
+				index === -1 &&
+				store.state.activeChannel &&
+				store.state.activeChannel.channel === channel
+			) {
+				index = flatChannels.length;
+			}
+
+			flatChannels.push(channel);
+		}
+	}
+
+	// Circular array, and a modulo bug workaround because in JS it stays negative
+	const length = flatChannels.length;
+	index = (((index + direction) % length) + length) % length;
+
+	jumpToChannel(flatChannels[index]);
 
 	return false;
 });
 
+// Switch to the next/previous lobby in the channel list
 Mousetrap.bind(["alt+shift+up", "alt+shift+down"], function(e, keys) {
-	const sidebar = $("#sidebar");
-	const lobbies = sidebar.find(".lobby");
-	const direction = keys.split("+").pop();
-	let index = lobbies.index(lobbies.filter(".active"));
-	let target;
+	const length = store.state.networks.length;
 
-	switch (direction) {
-		case "up":
-			if (index < 0) {
-				target = lobbies.index(
-					sidebar
-						.find(".channel")
-						.filter(".active")
-						.siblings(".lobby")[0]
-				);
-			} else {
-				target = (lobbies.length + (index - 1 + lobbies.length)) % lobbies.length;
-			}
-
-			break;
-
-		case "down":
-			if (index < 0) {
-				index = lobbies.index(
-					sidebar
-						.find(".channel")
-						.filter(".active")
-						.siblings(".lobby")[0]
-				);
-			}
-
-			target = (lobbies.length + (index + 1 + lobbies.length)) % lobbies.length;
-
-			break;
+	if (length === 0) {
+		return false;
 	}
 
-	target = lobbies.eq(target).click();
-	utils.scrollIntoViewNicely(target[0]);
+	const direction = keys.split("+").pop() === "up" ? -1 : 1;
+	let index = 0;
+
+	// If we're in another window, jump to first lobby
+	if (store.state.activeChannel) {
+		index = store.state.networks.findIndex((n) => n === store.state.activeChannel.network);
+
+		// If we're in a channel, and it's not the lobby, jump to lobby of this network when going up
+		if (direction !== -1 || store.state.activeChannel.channel.type === "lobby") {
+			index = (((index + direction) % length) + length) % length;
+		}
+	}
+
+	jumpToChannel(store.state.networks[index].channels[0]);
 
 	return false;
 });
@@ -74,28 +72,36 @@ Mousetrap.bind(["alt+shift+up", "alt+shift+down"], function(e, keys) {
 // Jump to the first window with a highlight in it, or the first with unread
 // activity if there are none with highlights.
 Mousetrap.bind(["alt+a"], function() {
-	let targetchan;
+	let targetChannel;
 
-	outer_loop: for (const network of vueApp.networks) {
+	outer_loop: for (const network of store.state.networks) {
 		for (const chan of network.channels) {
 			if (chan.highlight) {
-				targetchan = chan;
+				targetChannel = chan;
 				break outer_loop;
 			}
 
-			if (chan.unread && !targetchan) {
-				targetchan = chan;
+			if (chan.unread && !targetChannel) {
+				targetChannel = chan;
 			}
 		}
 	}
 
-	if (targetchan) {
-		$(`#sidebar .chan[data-id="${targetchan.id}"]`).trigger("click");
+	if (targetChannel) {
+		jumpToChannel(targetChannel);
 	}
 
 	return false;
 });
 
+function jumpToChannel(targetChannel) {
+	switchToChannel(targetChannel);
+
+	scrollIntoViewNicely(
+		document.querySelector(`#sidebar .chan[aria-controls="#chan-${targetChannel.id}"]`)
+	);
+}
+
 // Ignored keys which should not automatically focus the input bar
 const ignoredKeys = {
 	8: true, // Backspace
@@ -132,7 +138,7 @@ const ignoredKeys = {
 	224: true, // Meta
 };
 
-$(document).on("keydown", (e) => {
+document.addEventListener("keydown", (e) => {
 	// Ignore any key that uses alt modifier
 	// Ignore keys defined above
 	if (e.altKey || ignoredKeys[e.which]) {
@@ -146,7 +152,12 @@ $(document).on("keydown", (e) => {
 
 	// Redirect pagedown/pageup keys to messages container so it scrolls
 	if (e.which === 33 || e.which === 34) {
-		$("#windows .window.active .chan.active .chat").trigger("focus");
+		const chat = document.querySelector("#windows .chan.active .chat");
+
+		if (chat) {
+			chat.focus();
+		}
+
 		return;
 	}
 
@@ -157,14 +168,23 @@ $(document).on("keydown", (e) => {
 		return;
 	}
 
-	const input = $("#input");
+	const input = document.getElementById("input");
+
+	if (!input) {
+		return;
+	}
+
+	input.focus();
 
 	// On enter, focus the input but do not propagate the event
 	// This way, a new line is not inserted
 	if (e.which === 13) {
-		input.trigger("focus");
-		return false;
+		e.preventDefault();
 	}
-
-	input.trigger("focus");
 });
+
+function scrollIntoViewNicely(el) {
+	// Ideally this would use behavior: "smooth", but that does not consistently work in e.g. Chrome
+	// https://github.com/iamdustan/smoothscroll/issues/28#issuecomment-364061459
+	el.scrollIntoView({block: "center", inline: "nearest"});
+}
diff --git a/client/js/libs/handlebars/equal.js b/client/js/libs/handlebars/equal.js
deleted file mode 100644
index 2d25ea9d..00000000
--- a/client/js/libs/handlebars/equal.js
+++ /dev/null
@@ -1,16 +0,0 @@
-"use strict";
-
-module.exports = function(a, b, opt) {
-	if (arguments.length !== 3) {
-		throw new Error("Handlebars helper `equal` expects 3 arguments");
-	}
-
-	a = a.toString();
-	b = b.toString();
-
-	if (a === b) {
-		return opt.fn(this);
-	}
-
-	return opt.inverse(this);
-};
diff --git a/client/js/libs/handlebars/localetime.js b/client/js/libs/handlebars/localetime.js
deleted file mode 100644
index 17a6043d..00000000
--- a/client/js/libs/handlebars/localetime.js
+++ /dev/null
@@ -1,7 +0,0 @@
-"use strict";
-
-const moment = require("moment");
-
-module.exports = function(time) {
-	return moment(time).format("D MMMM YYYY, HH:mm:ss");
-};
diff --git a/client/js/loading-error-handlers.js b/client/js/loading-error-handlers.js
index d6c118c6..922175fb 100644
--- a/client/js/loading-error-handlers.js
+++ b/client/js/loading-error-handlers.js
@@ -1,4 +1,4 @@
-/* eslint strict: 0, no-var: 0 */
+/* eslint strict: 0 */
 "use strict";
 
 /*
@@ -9,71 +9,66 @@
  */
 
 (function() {
-	var msg = document.getElementById("loading-page-message");
+	const msg = document.getElementById("loading-page-message");
+	msg.textContent = "Loading the app…";
 
-	if (msg) {
-		msg.textContent = "Loading the app…";
+	document
+		.getElementById("loading-reload")
+		.addEventListener("click", () => location.reload(true));
 
-		document.getElementById("loading-reload").addEventListener("click", function() {
-			location.reload(true);
-		});
-	}
-
-	var displayReload = function displayReload() {
-		var loadingReload = document.getElementById("loading-reload");
+	const displayReload = () => {
+		const loadingReload = document.getElementById("loading-reload");
 
 		if (loadingReload) {
 			loadingReload.style.visibility = "visible";
 		}
 	};
 
-	var loadingSlowTimeout = setTimeout(function() {
-		var loadingSlow = document.getElementById("loading-slow");
-
-		// The parent element, #loading, is being removed when the app is loaded.
-		// Since the timer is not cancelled, `loadingSlow` can be not found after
-		// 5s. Wrap everything in this block to make sure nothing happens if the
-		// element does not exist (i.e. page has loaded).
-		if (loadingSlow) {
-			loadingSlow.style.visibility = "visible";
-			displayReload();
-		}
+	const loadingSlowTimeout = setTimeout(() => {
+		const loadingSlow = document.getElementById("loading-slow");
+		loadingSlow.style.visibility = "visible";
+		displayReload();
 	}, 5000);
 
-	window.g_LoungeErrorHandler = function LoungeErrorHandler(e) {
-		var message = document.getElementById("loading-page-message");
-		message.textContent =
-			"An error has occurred that prevented the client from loading correctly.";
+	const errorHandler = (e) => {
+		msg.textContent = "An error has occurred that prevented the client from loading correctly.";
 
-		var summary = document.createElement("summary");
+		const summary = document.createElement("summary");
 		summary.textContent = "More details";
 
-		var data = document.createElement("pre");
+		const data = document.createElement("pre");
 		data.textContent = e.message; // e is an ErrorEvent
 
-		var info = document.createElement("p");
+		const info = document.createElement("p");
 		info.textContent = "Open the developer tools of your browser for more information.";
 
-		var details = document.createElement("details");
+		const details = document.createElement("details");
 		details.appendChild(summary);
 		details.appendChild(data);
 		details.appendChild(info);
-		message.parentNode.insertBefore(details, message.nextSibling);
+		msg.parentNode.insertBefore(details, msg.nextSibling);
 
 		window.clearTimeout(loadingSlowTimeout);
 		displayReload();
 	};
 
-	window.addEventListener("error", window.g_LoungeErrorHandler);
+	window.addEventListener("error", errorHandler);
+
+	window.g_TheLoungeRemoveLoading = () => {
+		delete window.g_TheLoungeRemoveLoading;
+		window.clearTimeout(loadingSlowTimeout);
+		window.removeEventListener("error", errorHandler);
+		document.getElementById("loading").remove();
+	};
 
 	// Trigger early service worker registration
 	if ("serviceWorker" in navigator) {
 		navigator.serviceWorker.register("service-worker.js");
 
 		// Handler for messages coming from the service worker
-		var messageHandler = function ServiceWorkerMessageHandler(event) {
+		const messageHandler = (event) => {
 			if (event.data.type === "fetch-error") {
-				window.g_LoungeErrorHandler({
+				errorHandler({
 					message: `Service worker failed to fetch an url: ${event.data.message}`,
 				});
 
diff --git a/client/js/localStorage.js b/client/js/localStorage.js
index b2877b72..709ada0e 100644
--- a/client/js/localStorage.js
+++ b/client/js/localStorage.js
@@ -10,7 +10,7 @@
 // https://github.com/thelounge/thelounge/issues/2699
 // https://www.chromium.org/for-testers/bug-reporting-guidelines/uncaught-securityerror-failed-to-read-the-localstorage-property-from-window-access-is-denied-for-this-document
 
-module.exports = {
+export default {
 	set(key, value) {
 		try {
 			window.localStorage.setItem(key, value);
diff --git a/client/js/location.js b/client/js/location.js
index eed5e273..cf490ee5 100644
--- a/client/js/location.js
+++ b/client/js/location.js
@@ -2,7 +2,7 @@
 
 // This is a thin wrapper around `window.location`, in order to contain the
 // side-effects. Do not add logic to it as it cannot be tested, only mocked.
-module.exports = {
+export default {
 	reload() {
 		window.location.reload();
 	},
diff --git a/client/js/lounge.js b/client/js/lounge.js
deleted file mode 100644
index 2fd3fb97..00000000
--- a/client/js/lounge.js
+++ /dev/null
@@ -1,248 +0,0 @@
-"use strict";
-
-// vendor libraries
-const $ = require("jquery");
-
-// our libraries
-const socket = require("./socket");
-
-const {vueApp, findChannel} = require("./vue");
-
-window.vueMounted = () => {
-	require("./socket-events");
-	const slideoutMenu = require("./slideout");
-	const contextMenuFactory = require("./contextMenuFactory");
-	const storage = require("./localStorage");
-	const utils = require("./utils");
-	require("./webpush");
-	require("./keybinds");
-
-	const sidebar = $("#sidebar, #footer");
-	const viewport = $("#viewport");
-
-	function storeSidebarVisibility(name, state) {
-		storage.set(name, state);
-
-		vueApp.$emit("resize");
-	}
-
-	// If sidebar overlay is visible and it is clicked, close the sidebar
-	$("#sidebar-overlay").on("click", () => {
-		slideoutMenu.toggle(false);
-
-		if ($(window).outerWidth() > utils.mobileViewportPixels) {
-			storeSidebarVisibility("thelounge.state.sidebar", false);
-		}
-	});
-
-	$("#windows").on("click", "button.lt", () => {
-		const isOpen = !slideoutMenu.isOpen();
-
-		slideoutMenu.toggle(isOpen);
-
-		if ($(window).outerWidth() > utils.mobileViewportPixels) {
-			storeSidebarVisibility("thelounge.state.sidebar", isOpen);
-		}
-	});
-
-	viewport.on("click", ".rt", function() {
-		const isOpen = !viewport.hasClass("userlist-open");
-
-		viewport.toggleClass("userlist-open", isOpen);
-		storeSidebarVisibility("thelounge.state.userlist", isOpen);
-
-		return false;
-	});
-
-	viewport.on("contextmenu", ".network .chan", function(e) {
-		return contextMenuFactory.createContextMenu($(this), e).show();
-	});
-
-	viewport.on("click contextmenu", ".user", function(e) {
-		// If user is selecting text, do not open context menu
-		// This primarily only targets mobile devices where selection is performed with touch
-		if (!window.getSelection().isCollapsed) {
-			return true;
-		}
-
-		return contextMenuFactory.createContextMenu($(this), e).show();
-	});
-
-	viewport.on("click", "#chat .menu", function(e) {
-		e.currentTarget = $(
-			`#sidebar .chan[data-id="${$(this)
-				.closest(".chan")
-				.attr("data-id")}"]`
-		)[0];
-		return contextMenuFactory.createContextMenu($(this), e).show();
-	});
-
-	if (navigator.platform.match(/(Mac|iPhone|iPod|iPad)/i)) {
-		$(document.body).addClass("is-apple");
-	}
-
-	viewport.on("click", ".inline-channel", function() {
-		const name = $(this).attr("data-chan");
-		const chan = utils.findCurrentNetworkChan(name);
-
-		if (chan) {
-			$(`#sidebar .chan[data-id="${chan.id}"]`).trigger("click");
-		}
-
-		socket.emit("input", {
-			target: vueApp.activeChannel.channel.id,
-			text: "/join " + name,
-		});
-	});
-
-	const openWindow = function openWindow(e, {pushState, replaceHistory} = {}) {
-		const self = $(this);
-		const target = self.attr("data-target");
-
-		if (!target) {
-			return;
-		}
-
-		// This is a rather gross hack to account for sources that are in the
-		// sidebar specifically. Needs to be done better when window management gets
-		// refactored.
-		const inSidebar = self.parents("#sidebar, #footer").length > 0;
-		const channel = inSidebar ? findChannel(Number(self.attr("data-id"))) : null;
-
-		if (vueApp.activeChannel) {
-			const {channel: lastChannel} = vueApp.activeChannel;
-
-			// If user clicks on the currently active channel, do nothing
-			if (channel && lastChannel === channel.channel) {
-				return;
-			}
-
-			if (lastChannel.messages.length > 0) {
-				lastChannel.firstUnread = lastChannel.messages[lastChannel.messages.length - 1].id;
-			}
-
-			if (lastChannel.messages.length > 100) {
-				lastChannel.messages.splice(0, lastChannel.messages.length - 100);
-				lastChannel.moreHistoryAvailable = true;
-			}
-		}
-
-		if (inSidebar) {
-			vueApp.activeChannel = channel;
-
-			if (channel) {
-				channel.channel.highlight = 0;
-				channel.channel.unread = 0;
-			}
-
-			socket.emit("open", channel ? channel.channel.id : null);
-
-			if ($(window).outerWidth() <= utils.mobileViewportPixels) {
-				slideoutMenu.toggle(false);
-			}
-		}
-
-		const lastActive = $("#windows > .active");
-
-		lastActive.removeClass("active");
-
-		const chan = $(target)
-			.addClass("active")
-			.trigger("show");
-
-		utils.synchronizeNotifiedState();
-
-		if (self.hasClass("chan")) {
-			vueApp.$nextTick(() => $("#chat-container").addClass("active"));
-		}
-
-		const chanChat = chan.find(".chat");
-
-		if (chanChat.length > 0 && channel.type !== "special") {
-			// On touch devices unfocus (blur) the input to correctly close the virtual keyboard
-			// An explicit blur is required, as the keyboard may open back up if the focus remains
-			// See https://github.com/thelounge/thelounge/issues/2257
-			$("#input").trigger("ontouchstart" in window ? "blur" : "focus");
-		}
-
-		if (channel && channel.channel.usersOutdated) {
-			channel.channel.usersOutdated = false;
-
-			socket.emit("names", {
-				target: channel.channel.id,
-			});
-		}
-
-		// Pushes states to history web API when clicking elements with a data-target attribute.
-		// States are very trivial and only contain a single `clickTarget` property which
-		// contains a CSS selector that targets elements which takes the user to a different view
-		// when clicked. The `popstate` event listener will trigger synthetic click events using that
-		// selector and thus take the user to a different view/state.
-		if (pushState === false) {
-			return false;
-		}
-
-		const state = {};
-
-		if (self.prop("id")) {
-			state.clickTarget = `#${self.prop("id")}`;
-		} else if (self.hasClass("chan")) {
-			state.clickTarget = `#sidebar .chan[data-id="${self.attr("data-id")}"]`;
-		} else {
-			state.clickTarget = `#footer button[data-target="${target}"]`;
-		}
-
-		if (history && history.pushState) {
-			if (replaceHistory && history.replaceState) {
-				history.replaceState(state, null, target);
-			} else {
-				history.pushState(state, null, target);
-			}
-		}
-
-		return false;
-	};
-
-	sidebar.on("click", ".chan, button", openWindow);
-	$("#help").on("click", "#view-changelog, #back-to-help", openWindow);
-	$("#changelog").on("click", "#back-to-help", openWindow);
-
-	sidebar.on("click", ".close", function() {
-		utils.closeChan($(this).closest(".chan"));
-	});
-
-	$(document).on("visibilitychange focus click", () => {
-		utils.synchronizeNotifiedState();
-	});
-
-	window.addEventListener("popstate", (e) => {
-		const {state} = e;
-
-		if (!state) {
-			return;
-		}
-
-		let {clickTarget} = state;
-
-		if (clickTarget) {
-			// This will be true when click target corresponds to opening a thumbnail,
-			// browsing to the previous/next thumbnail, or closing the image viewer.
-			const imageViewerRelated = clickTarget.includes(".toggle-thumbnail");
-
-			// If the click target is not related to the image viewer but the viewer
-			// is currently opened, we need to close it.
-			if (!imageViewerRelated && $("#image-viewer").hasClass("opened")) {
-				clickTarget += ", #image-viewer";
-			}
-
-			// Emit the click to the target, while making sure it is not going to be
-			// added to the state again.
-			$(clickTarget).trigger("click", {
-				pushState: false,
-			});
-		}
-	});
-
-	// Only start opening socket.io connection after all events have been registered
-	socket.open();
-};
diff --git a/client/js/options.js b/client/js/options.js
deleted file mode 100644
index 140272b0..00000000
--- a/client/js/options.js
+++ /dev/null
@@ -1,278 +0,0 @@
-"use strict";
-
-const $ = require("jquery");
-const storage = require("./localStorage");
-const socket = require("./socket");
-const {vueApp} = require("./vue");
-require("../js/autocompletion");
-
-const $windows = $("#windows");
-const $settings = $("#settings");
-const $theme = $("#theme");
-const $userStyles = $("#user-specified-css");
-
-const noCSSparamReg = /[?&]nocss/;
-
-// Not yet available at this point but used in various functionaly.
-// Will be assigned when `initialize` is called.
-let $syncWarningOverride;
-let $syncWarningBase;
-let $forceSyncButton;
-let $warningUnsupported;
-let $warningBlocked;
-
-// Default settings
-const settings = vueApp.settings;
-
-const noSync = ["syncSettings"];
-
-// alwaysSync is reserved for settings that should be synced
-// to the server regardless of the clients sync setting.
-const alwaysSync = ["highlights"];
-
-const defaultThemeColor = document.querySelector('meta[name="theme-color"]').content;
-
-// Process usersettings from localstorage.
-let userSettings = JSON.parse(storage.get("settings")) || false;
-
-if (!userSettings) {
-	// Enable sync by default if there are no user defined settings.
-	settings.syncSettings = true;
-} else {
-	for (const key in settings) {
-		// Older The Lounge versions converted highlights to an array, turn it back into a string
-		if (key === "highlights" && typeof userSettings[key] === "object") {
-			userSettings[key] = userSettings[key].join(", ");
-		}
-
-		// Make sure the setting in local storage has the same type that the code expects
-		if (
-			typeof userSettings[key] !== "undefined" &&
-			typeof settings[key] === typeof userSettings[key]
-		) {
-			settings[key] = userSettings[key];
-		}
-	}
-}
-
-// Apply custom CSS and themes on page load
-// Done here and not on init because on slower devices and connections
-// it can take up to several seconds before init is called.
-if (typeof userSettings.userStyles === "string" && !noCSSparamReg.test(window.location.search)) {
-	$userStyles.html(userSettings.userStyles);
-}
-
-if (
-	typeof userSettings.theme === "string" &&
-	$theme.attr("href") !== `themes/${userSettings.theme}.css`
-) {
-	$theme.attr("href", `themes/${userSettings.theme}.css`);
-}
-
-userSettings = null;
-
-module.exports = {
-	alwaysSync,
-	noSync,
-	initialized: false,
-	settings,
-	syncAllSettings,
-	processSetting,
-	initialize,
-};
-
-// Updates the checkbox and warning in settings.
-// When notifications are not supported, this is never called (because
-// checkbox state can not be changed).
-function updateDesktopNotificationStatus() {
-	if (Notification.permission === "denied") {
-		$warningBlocked.show();
-	} else {
-		$warningBlocked.hide();
-	}
-}
-
-function applySetting(name, value) {
-	if (name === "syncSettings" && value) {
-		$syncWarningOverride.hide();
-		$forceSyncButton.hide();
-	} else if (name === "theme") {
-		const themeUrl = `themes/${value}.css`;
-
-		if ($theme.attr("href") !== themeUrl) {
-			$theme.attr("href", themeUrl);
-
-			const newTheme = $settings.find("#theme-select option[value='" + value + "']");
-			let themeColor = defaultThemeColor;
-
-			if (newTheme.length > 0 && newTheme[0].dataset.themeColor) {
-				themeColor = newTheme[0].dataset.themeColor;
-			}
-
-			document.querySelector('meta[name="theme-color"]').content = themeColor;
-		}
-	} else if (name === "userStyles" && !noCSSparamReg.test(window.location.search)) {
-		$userStyles.html(value);
-	} else if (name === "desktopNotifications") {
-		if ("Notification" in window && value && Notification.permission !== "granted") {
-			Notification.requestPermission(updateDesktopNotificationStatus);
-		} else if (!value) {
-			$warningBlocked.hide();
-		}
-	} else if (name === "advanced") {
-		$("#settings [data-advanced]").toggle(settings[name]);
-	}
-}
-
-function settingSetEmit(name, value) {
-	socket.emit("setting:set", {name, value});
-}
-
-// When sync is `true` the setting will also be send to the backend for syncing.
-function updateSetting(name, value, sync) {
-	const currentOption = settings[name];
-
-	// Only update and process when the setting is actually changed.
-	if (currentOption !== value) {
-		settings[name] = value;
-		storage.set("settings", JSON.stringify(settings));
-		applySetting(name, value);
-
-		// Sync is checked, request settings from server.
-		if (name === "syncSettings" && value) {
-			socket.emit("setting:get");
-			$syncWarningOverride.hide();
-			$syncWarningBase.hide();
-			$forceSyncButton.hide();
-		} else if (name === "syncSettings") {
-			$syncWarningOverride.show();
-			$forceSyncButton.show();
-		}
-
-		if (settings.syncSettings && !noSync.includes(name) && sync) {
-			settingSetEmit(name, value);
-		} else if (alwaysSync.includes(name) && sync) {
-			settingSetEmit(name, value);
-		}
-	}
-}
-
-function syncAllSettings(force = false) {
-	// Sync all settings if sync is enabled or force is true.
-	if (settings.syncSettings || force) {
-		for (const name in settings) {
-			if (!noSync.includes(name)) {
-				settingSetEmit(name, settings[name]);
-			} else if (alwaysSync.includes(name)) {
-				settingSetEmit(name, settings[name]);
-			}
-		}
-
-		$syncWarningOverride.hide();
-		$syncWarningBase.hide();
-		$forceSyncButton.hide();
-	} else {
-		$syncWarningOverride.hide();
-		$forceSyncButton.hide();
-		$syncWarningBase.show();
-	}
-}
-
-// If `save` is set to true it will pass the setting to `updateSetting()`  processSetting
-function processSetting(name, value, save) {
-	if (name === "userStyles") {
-		$settings.find("#user-specified-css-input").val(value);
-	} else if (name === "highlights") {
-		$settings.find(`input[name=${name}]`).val(value);
-	} else if (name === "nickPostfix") {
-		$settings.find(`input[name=${name}]`).val(value);
-	} else if (name === "statusMessages") {
-		$settings.find(`input[name=${name}][value=${value}]`).prop("checked", true);
-	} else if (name === "theme") {
-		$settings.find("#theme-select").val(value);
-	} else if (typeof value === "boolean") {
-		$settings.find(`input[name=${name}]`).prop("checked", value);
-	}
-
-	// No need to also call processSetting when `save` is true.
-	// updateSetting does take care of that.
-	if (save) {
-		// Sync is false as applySetting is never called as the result of a user changing the setting.
-		updateSetting(name, value, false);
-	} else {
-		applySetting(name, value);
-	}
-}
-
-function initialize() {
-	$warningBlocked = $settings.find("#warnBlockedDesktopNotifications");
-	$warningUnsupported = $settings.find("#warnUnsupportedDesktopNotifications");
-
-	$syncWarningOverride = $settings.find(".sync-warning-override");
-	$syncWarningBase = $settings.find(".sync-warning-base");
-	$forceSyncButton = $settings.find(".force-sync-button");
-
-	$warningBlocked.hide();
-	module.exports.initialized = true;
-
-	// Settings have now entirely updated, apply settings to the client.
-	for (const name in settings) {
-		processSetting(name, settings[name], false);
-	}
-
-	// If browser does not support notifications
-	// display proper message in settings.
-	if ("Notification" in window) {
-		$warningUnsupported.hide();
-		$windows.on("show", "#settings", updateDesktopNotificationStatus);
-	} else {
-		$warningUnsupported.show();
-	}
-
-	$settings.on("change", "input, select, textarea", function(e) {
-		// We only want to trigger on human triggered changes.
-		if (e.originalEvent) {
-			const $self = $(this);
-			const type = $self.prop("type");
-			const name = $self.prop("name");
-
-			if (type === "radio") {
-				if ($self.prop("checked")) {
-					updateSetting(name, $self.val(), true);
-				}
-			} else if (type === "checkbox") {
-				updateSetting(name, $self.prop("checked"), true);
-				settings[name] = $self.prop("checked");
-			} else if (type !== "password") {
-				updateSetting(name, $self.val(), true);
-			}
-		}
-	});
-
-	$settings.find("#forceSync").on("click", () => {
-		syncAllSettings(true);
-	});
-
-	// Local init is done, let's sync
-	// We always ask for synced settings even if it is disabled.
-	// Settings can be mandatory to sync and it is used to determine sync base state.
-	socket.emit("setting:get");
-
-	// Protocol handler
-	const defaultClientButton = $("#make-default-client");
-
-	if (window.navigator.registerProtocolHandler) {
-		defaultClientButton.on("click", function() {
-			const uri = document.location.origin + document.location.pathname + "?uri=%s";
-
-			window.navigator.registerProtocolHandler("irc", uri, "The Lounge");
-			window.navigator.registerProtocolHandler("ircs", uri, "The Lounge");
-
-			return false;
-		});
-
-		$("#native-app").prop("hidden", false);
-	} else {
-		defaultClientButton.hide();
-	}
-}
diff --git a/client/js/renderPreview.js b/client/js/renderPreview.js
deleted file mode 100644
index d6d7095f..00000000
--- a/client/js/renderPreview.js
+++ /dev/null
@@ -1,134 +0,0 @@
-"use strict";
-
-const $ = require("jquery");
-const Mousetrap = require("mousetrap");
-const templates = require("../views");
-
-/* Image viewer */
-
-const imageViewer = $("#image-viewer");
-
-$("#windows").on("click", ".toggle-thumbnail", function(event, data = {}) {
-	const link = $(this);
-
-	// Passing `data`, specifically `data.pushState`, to not add the action to the
-	// history state if back or forward buttons were pressed.
-	openImageViewer(link, data);
-
-	// Prevent the link to open a new page since we're opening the image viewer,
-	// but keep it a link to allow for Ctrl/Cmd+click.
-	// By binding this event on #chat we prevent input gaining focus after clicking.
-	return false;
-});
-
-imageViewer.on("click", function(event, data = {}) {
-	// Passing `data`, specifically `data.pushState`, to not add the action to the
-	// history state if back or forward buttons were pressed.
-	closeImageViewer(data);
-});
-
-Mousetrap.bind("esc", () => closeImageViewer());
-
-Mousetrap.bind(["left", "right"], (e, key) => {
-	if (imageViewer.hasClass("opened")) {
-		const direction = key === "left" ? "previous" : "next";
-		imageViewer.find(`.${direction}-image-btn`).trigger("click");
-	}
-});
-
-function openImageViewer(link, {pushState = true} = {}) {
-	$(".previous-image").removeClass("previous-image");
-	$(".next-image").removeClass("next-image");
-
-	// The next two blocks figure out what are the previous/next images. We first
-	// look within the same message, as there can be multiple thumbnails per
-	// message, and if not, we look at previous/next messages and take the
-	// last/first thumbnail available.
-	// Only expanded thumbnails are being cycled through.
-
-	// Previous image
-	let previousImage = link
-		.closest(".preview")
-		.prev(".preview")
-		.find(".toggle-content .toggle-thumbnail")
-		.last();
-
-	if (!previousImage.length) {
-		previousImage = link
-			.closest(".msg")
-			.prevAll()
-			.find(".toggle-content .toggle-thumbnail")
-			.last();
-	}
-
-	previousImage.addClass("previous-image");
-
-	// Next image
-	let nextImage = link
-		.closest(".preview")
-		.next(".preview")
-		.find(".toggle-content .toggle-thumbnail")
-		.first();
-
-	if (!nextImage.length) {
-		nextImage = link
-			.closest(".msg")
-			.nextAll()
-			.find(".toggle-content .toggle-thumbnail")
-			.first();
-	}
-
-	nextImage.addClass("next-image");
-
-	imageViewer.html(
-		templates.image_viewer({
-			image: link.find("img").prop("src"),
-			link: link.prop("href"),
-			type: link.parent().hasClass("toggle-type-link") ? "link" : "image",
-			hasPreviousImage: previousImage.length > 0,
-			hasNextImage: nextImage.length > 0,
-		})
-	);
-
-	// Turn off transitionend listener before opening the viewer,
-	// which caused image viewer to become empty in rare cases
-	imageViewer.off("transitionend").addClass("opened");
-
-	// History management
-	if (pushState) {
-		let clickTarget = "";
-
-		// Images can be in a message (channel URL previews) or not (window URL
-		// preview, e.g. changelog). This is sub-optimal and needs improvement to
-		// make image preview more generic and not specific for channel previews.
-		if (link.closest(".msg").length > 0) {
-			clickTarget = `#${link.closest(".msg").prop("id")} `;
-		}
-
-		clickTarget += `a.toggle-thumbnail[href="${link.prop("href")}"] img`;
-		history.pushState({clickTarget}, null, null);
-	}
-}
-
-imageViewer.on("click", ".previous-image-btn", function() {
-	$(".previous-image").trigger("click");
-	return false;
-});
-
-imageViewer.on("click", ".next-image-btn", function() {
-	$(".next-image").trigger("click");
-	return false;
-});
-
-function closeImageViewer({pushState = true} = {}) {
-	imageViewer.removeClass("opened").one("transitionend", function() {
-		imageViewer.empty();
-	});
-
-	// History management
-	if (pushState) {
-		const clickTarget =
-			"#sidebar " + `.chan[data-id="${$("#sidebar .chan.active").attr("data-id")}"]`;
-		history.pushState({clickTarget}, null, null);
-	}
-}
diff --git a/client/js/router.js b/client/js/router.js
new file mode 100644
index 00000000..aaf7071b
--- /dev/null
+++ b/client/js/router.js
@@ -0,0 +1,144 @@
+"use strict";
+
+import Vue from "vue";
+import VueRouter from "vue-router";
+
+Vue.use(VueRouter);
+
+import SignIn from "../components/Windows/SignIn.vue";
+import Connect from "../components/Windows/Connect.vue";
+import Settings from "../components/Windows/Settings.vue";
+import Help from "../components/Windows/Help.vue";
+import Changelog from "../components/Windows/Changelog.vue";
+import NetworkEdit from "../components/Windows/NetworkEdit.vue";
+import RoutedChat from "../components/RoutedChat.vue";
+import constants from "./constants";
+import store from "./store";
+
+const router = new VueRouter({
+	routes: [
+		{
+			name: "SignIn",
+			path: "/sign-in",
+			component: SignIn,
+			beforeEnter(to, from, next) {
+				// Prevent navigating to sign-in when already signed in
+				if (store.state.appLoaded) {
+					next(false);
+					return;
+				}
+
+				next();
+			},
+		},
+	],
+});
+
+router.beforeEach((to, from, next) => {
+	// Disallow navigating to non-existing routes
+	if (store.state.appLoaded && !to.matched.length) {
+		next(false);
+		return;
+	}
+
+	// Disallow navigating to invalid channels
+	if (to.name === "RoutedChat" && !store.getters.findChannel(Number(to.params.id))) {
+		next(false);
+		return;
+	}
+
+	// Handle closing image viewer with the browser back button
+	if (!router.app.$refs.app) {
+		next();
+		return;
+	}
+
+	const imageViewer = router.app.$root.$refs.app.$refs.imageViewer;
+
+	if (imageViewer && imageViewer.link) {
+		imageViewer.closeViewer();
+		next(false);
+		return;
+	}
+
+	next();
+});
+
+router.afterEach((to) => {
+	if (store.state.appLoaded) {
+		if (window.innerWidth <= constants.mobileViewportPixels) {
+			store.commit("sidebarOpen", false);
+		}
+	}
+
+	if (store.state.activeChannel) {
+		const channel = store.state.activeChannel.channel;
+
+		if (to.name !== "RoutedChat") {
+			store.commit("activeChannel", null);
+		}
+
+		// When switching out of a channel, mark everything as read
+		if (channel.messages.length > 0) {
+			channel.firstUnread = channel.messages[channel.messages.length - 1].id;
+		}
+
+		if (channel.messages.length > 100) {
+			channel.messages.splice(0, channel.messages.length - 100);
+			channel.moreHistoryAvailable = true;
+		}
+	}
+});
+
+function initialize() {
+	router.addRoutes([
+		{
+			name: "Connect",
+			path: "/connect",
+			component: Connect,
+			props: (route) => ({queryParams: route.query}),
+		},
+		{
+			name: "Settings",
+			path: "/settings",
+			component: Settings,
+		},
+		{
+			name: "Help",
+			path: "/help",
+			component: Help,
+		},
+		{
+			name: "Changelog",
+			path: "/changelog",
+			component: Changelog,
+		},
+		{
+			name: "NetworkEdit",
+			path: "/edit-network/:uuid",
+			component: NetworkEdit,
+		},
+		{
+			name: "RoutedChat",
+			path: "/chan-:id",
+			component: RoutedChat,
+		},
+	]);
+}
+
+function navigate(routeName, params = {}) {
+	if (router.currentRoute.name) {
+		router.push({name: routeName, params}).catch(() => {});
+	} else {
+		// If current route is null, replace the history entry
+		// This prevents invalid entries from lingering in history,
+		// and then the route guard preventing proper navigation
+		router.replace({name: routeName, params}).catch(() => {});
+	}
+}
+
+function switchToChannel(channel) {
+	return navigate("RoutedChat", {id: channel.id});
+}
+
+export {initialize, router, navigate, switchToChannel};
diff --git a/client/js/settings.js b/client/js/settings.js
new file mode 100644
index 00000000..94d03b9c
--- /dev/null
+++ b/client/js/settings.js
@@ -0,0 +1,115 @@
+import socket from "./socket";
+
+const defaultSettingConfig = {
+	apply() {},
+	default: null,
+	sync: null,
+};
+
+export const config = normalizeConfig({
+	syncSettings: {
+		default: true,
+		sync: "never",
+		apply(store, value) {
+			if (value) {
+				socket.emit("setting:get");
+			}
+		},
+	},
+	advanced: {
+		default: false,
+	},
+	autocomplete: {
+		default: true,
+	},
+	nickPostfix: {
+		default: "",
+	},
+	coloredNicks: {
+		default: true,
+	},
+	desktopNotifications: {
+		default: false,
+		apply(store, value) {
+			store.commit("refreshDesktopNotificationState", null, {root: true});
+
+			if ("Notification" in window && value && Notification.permission !== "granted") {
+				Notification.requestPermission(() =>
+					store.commit("refreshDesktopNotificationState", null, {root: true})
+				);
+			}
+		},
+	},
+	highlights: {
+		default: "",
+		sync: "always",
+	},
+	links: {
+		default: true,
+	},
+	motd: {
+		default: true,
+	},
+	notification: {
+		default: true,
+	},
+	notifyAllMessages: {
+		default: false,
+	},
+	showSeconds: {
+		default: false,
+	},
+	statusMessages: {
+		default: "condensed",
+	},
+	theme: {
+		default: document.getElementById("theme").dataset.serverTheme,
+		apply(store, value) {
+			const themeEl = document.getElementById("theme");
+			const themeUrl = `themes/${value}.css`;
+
+			if (themeEl.attributes.href.value === themeUrl) {
+				return;
+			}
+
+			themeEl.attributes.href.value = themeUrl;
+			const newTheme = store.state.serverConfiguration.themes.filter(
+				(theme) => theme.name === value
+			)[0];
+			const themeColor =
+				newTheme.themeColor || document.querySelector('meta[name="theme-color"]').content;
+			document.querySelector('meta[name="theme-color"]').content = themeColor;
+		},
+	},
+	media: {
+		default: true,
+	},
+	userStyles: {
+		default: "",
+		apply(store, value) {
+			if (!/[?&]nocss/.test(window.location.search)) {
+				document.getElementById("user-specified-css").innerHTML = value;
+			}
+		},
+	},
+});
+
+export function createState() {
+	const state = {};
+
+	for (const settingName in config) {
+		state[settingName] = config[settingName].default;
+	}
+
+	return state;
+}
+
+function normalizeConfig(obj) {
+	const newConfig = {};
+
+	for (const settingName in obj) {
+		newConfig[settingName] = {...defaultSettingConfig, ...obj[settingName]};
+	}
+
+	return newConfig;
+}
diff --git a/client/js/slideout.js b/client/js/slideout.js
deleted file mode 100644
index f285ac3b..00000000
--- a/client/js/slideout.js
+++ /dev/null
@@ -1,112 +0,0 @@
-"use strict";
-
-const viewport = document.getElementById("viewport");
-const menu = document.getElementById("sidebar");
-const sidebarOverlay = document.getElementById("sidebar-overlay");
-
-let touchStartPos = null;
-let touchCurPos = null;
-let touchStartTime = 0;
-let menuWidth = 0;
-let menuIsOpen = false;
-let menuIsMoving = false;
-let menuIsAbsolute = false;
-
-class SlideoutMenu {
-	static enable() {
-		document.body.addEventListener("touchstart", onTouchStart, {passive: true});
-	}
-
-	static toggle(state) {
-		menuIsOpen = state;
-		viewport.classList.toggle("menu-open", state);
-	}
-
-	static isOpen() {
-		return menuIsOpen;
-	}
-}
-
-function onTouchStart(e) {
-	touchStartPos = touchCurPos = e.touches.item(0);
-
-	if (e.touches.length !== 1) {
-		onTouchEnd();
-		return;
-	}
-
-	const styles = window.getComputedStyle(menu);
-
-	menuWidth = parseFloat(styles.width);
-	menuIsAbsolute = styles.position === "absolute";
-
-	if (!menuIsOpen || touchStartPos.screenX > menuWidth) {
-		touchStartTime = Date.now();
-
-		document.body.addEventListener("touchmove", onTouchMove, {passive: true});
-		document.body.addEventListener("touchend", onTouchEnd, {passive: true});
-	}
-}
-
-function onTouchMove(e) {
-	const touch = (touchCurPos = e.touches.item(0));
-	let distX = touch.screenX - touchStartPos.screenX;
-	const distY = touch.screenY - touchStartPos.screenY;
-
-	if (!menuIsMoving) {
-		// tan(45°) is 1. Gestures in 0°-45° (< 1) are considered horizontal, so
-		// menu must be open; gestures in 45°-90° (>1) are considered vertical, so
-		// chat windows must be scrolled.
-		if (Math.abs(distY / distX) >= 1) {
-			onTouchEnd();
-			return;
-		}
-
-		const devicePixelRatio = window.devicePixelRatio || 2;
-
-		if (Math.abs(distX) > devicePixelRatio) {
-			viewport.classList.toggle("menu-dragging", true);
-			menuIsMoving = true;
-		}
-	}
-
-	// Do not animate the menu on desktop view
-	if (!menuIsAbsolute) {
-		return;
-	}
-
-	if (menuIsOpen) {
-		distX += menuWidth;
-	}
-
-	if (distX > menuWidth) {
-		distX = menuWidth;
-	} else if (distX < 0) {
-		distX = 0;
-	}
-
-	menu.style.transform = "translate3d(" + distX + "px, 0, 0)";
-	sidebarOverlay.style.opacity = distX / menuWidth;
-}
-
-function onTouchEnd() {
-	const diff = touchCurPos.screenX - touchStartPos.screenX;
-	const absDiff = Math.abs(diff);
-
-	if (absDiff > menuWidth / 2 || (Date.now() - touchStartTime < 180 && absDiff > 50)) {
-		SlideoutMenu.toggle(diff > 0);
-	}
-
-	document.body.removeEventListener("touchmove", onTouchMove);
-	document.body.removeEventListener("touchend", onTouchEnd);
-	viewport.classList.toggle("menu-dragging", false);
-	menu.style.transform = null;
-	sidebarOverlay.style.opacity = null;
-
-	touchStartPos = null;
-	touchCurPos = null;
-	touchStartTime = 0;
-	menuIsMoving = false;
-}
-
-module.exports = SlideoutMenu;
diff --git a/client/js/socket-events/auth.js b/client/js/socket-events/auth.js
index 3fd5e66d..76658a00 100644
--- a/client/js/socket-events/auth.js
+++ b/client/js/socket-events/auth.js
@@ -1,112 +1,100 @@
 "use strict";
 
-const $ = require("jquery");
-const socket = require("../socket");
-const storage = require("../localStorage");
-const utils = require("../utils");
-const templates = require("../../views");
-const {vueApp} = require("../vue");
+import socket from "../socket";
+import storage from "../localStorage";
+import {router, navigate} from "../router";
+import store from "../store";
+import location from "../location";
+let lastServerHash = null;
 
-socket.on("auth", function(data) {
+socket.on("auth:success", function() {
+	store.commit("currentUserVisibleError", "Loading messages…");
+	updateLoadingMessage();
+});
+
+socket.on("auth:failed", function() {
+	storage.remove("token");
+
+	if (store.state.appLoaded) {
+		return reloadPage("Authentication failed, reloading…");
+	}
+
+	showSignIn();
+});
+
+socket.on("auth:start", function(serverHash) {
 	// If we reconnected and serverHash differs, that means the server restarted
 	// And we will reload the page to grab the latest version
-	if (utils.serverHash > -1 && data.serverHash > -1 && data.serverHash !== utils.serverHash) {
-		socket.disconnect();
-		vueApp.isConnected = false;
-		vueApp.currentUserVisibleError = "Server restarted, reloading…";
-		location.reload(true);
-		return;
+	if (lastServerHash && serverHash !== lastServerHash) {
+		return reloadPage("Server restarted, reloading…");
 	}
 
-	const login = $("#sign-in");
+	lastServerHash = serverHash;
 
-	if (data.serverHash > -1) {
-		utils.serverHash = data.serverHash;
-
-		login.html(templates.windows.sign_in());
-
-		utils.togglePasswordField("#sign-in .reveal-password");
-
-		login.find("form").on("submit", function() {
-			const form = $(this);
-
-			form.find(".btn").prop("disabled", true);
-
-			const values = {};
-			$.each(form.serializeArray(), function(i, obj) {
-				values[obj.name] = obj.value;
-			});
-
-			storage.set("user", values.user);
-
-			socket.emit("auth", values);
-
-			return false;
-		});
-	} else {
-		login.find(".btn").prop("disabled", false);
-	}
-
-	let token;
 	const user = storage.get("user");
+	const token = storage.get("token");
+	const doFastAuth = user && token;
 
-	if (!data.success) {
-		if (login.length === 0) {
-			socket.disconnect();
-			vueApp.isConnected = false;
-			vueApp.currentUserVisibleError = "Authentication failed, reloading…";
-			location.reload();
-			return;
-		}
+	// If we reconnect and no longer have a stored token, reload the page
+	if (store.state.appLoaded && !doFastAuth) {
+		return reloadPage("Authentication failed, reloading…");
+	}
 
-		storage.remove("token");
+	// If we have user and token stored, perform auth without showing sign-in first
+	if (doFastAuth) {
+		store.commit("currentUserVisibleError", "Authorizing…");
+		updateLoadingMessage();
 
-		const error = login.find(".error");
-		error
-			.show()
-			.closest("form")
-			.one("submit", function() {
-				error.hide();
-			});
-	} else if (user) {
-		token = storage.get("token");
+		let lastMessage = -1;
 
-		if (token) {
-			vueApp.currentUserVisibleError = "Authorizing…";
-			$("#loading-page-message").text(vueApp.currentUserVisibleError);
+		for (const network of store.state.networks) {
+			for (const chan of network.channels) {
+				if (chan.messages.length > 0) {
+					const id = chan.messages[chan.messages.length - 1].id;
 
-			let lastMessage = -1;
-
-			for (const network of vueApp.networks) {
-				for (const chan of network.channels) {
-					if (chan.messages.length > 0) {
-						const id = chan.messages[chan.messages.length - 1].id;
-
-						if (lastMessage < id) {
-							lastMessage = id;
-						}
+					if (lastMessage < id) {
+						lastMessage = id;
 					}
 				}
 			}
-
-			const openChannel = (vueApp.activeChannel && vueApp.activeChannel.channel.id) || null;
-
-			socket.emit("auth", {user, token, lastMessage, openChannel});
 		}
-	}
 
-	if (user) {
-		login.find("input[name='user']").val(user);
-	}
+		const openChannel =
+			(store.state.activeChannel && store.state.activeChannel.channel.id) || null;
 
-	if (token) {
-		return;
-	}
-
-	$("#loading").remove();
-	$("#footer")
-		.find(".sign-in")
-		.trigger("click", {
-			pushState: false,
+		socket.emit("auth:perform", {
+			user,
+			token,
+			lastMessage,
+			openChannel,
+			hasConfig: store.state.serverConfiguration !== null,
 		});
+	} else {
+		showSignIn();
+	}
 });
+
+function showSignIn() {
+	// TODO: this flashes grey background because it takes a little time for vue to mount signin
+	if (window.g_TheLoungeRemoveLoading) {
+		window.g_TheLoungeRemoveLoading();
+	}
+
+	if (router.currentRoute.name !== "SignIn") {
+		navigate("SignIn");
+	}
+}
+
+function reloadPage(message) {
+	socket.disconnect();
+	store.commit("currentUserVisibleError", message);
+	location.reload(true);
+}
+
+function updateLoadingMessage() {
+	const loading = document.getElementById("loading-page-message");
+
+	if (loading) {
+		loading.textContent = store.state.currentUserVisibleError;
+	}
+}
diff --git a/client/js/socket-events/change_password.js b/client/js/socket-events/change_password.js
deleted file mode 100644
index 09bb144e..00000000
--- a/client/js/socket-events/change_password.js
+++ /dev/null
@@ -1,31 +0,0 @@
-"use strict";
-
-const $ = require("jquery");
-const socket = require("../socket");
-
-socket.on("change-password", function(data) {
-	const passwordForm = $("#change-password");
-
-	if (data.error || data.success) {
-		const message = data.success ? data.success : data.error;
-		const feedback = passwordForm.find(".feedback");
-
-		if (data.success) {
-			feedback.addClass("success").removeClass("error");
-		} else {
-			feedback.addClass("error").removeClass("success");
-		}
-
-		feedback.text(message).show();
-		feedback.closest("form").one("submit", function() {
-			feedback.hide();
-		});
-	}
-
-	passwordForm
-		.find("input")
-		.val("")
-		.end()
-		.find(".btn")
-		.prop("disabled", false);
-});
diff --git a/client/js/socket-events/changelog.js b/client/js/socket-events/changelog.js
index f78053d1..f840e575 100644
--- a/client/js/socket-events/changelog.js
+++ b/client/js/socket-events/changelog.js
@@ -1,30 +1,12 @@
 "use strict";
 
-const $ = require("jquery");
-const socket = require("../socket");
-const templates = require("../../views");
-
-// Requests version information if it hasn't been retrieved before (or if it has
-// been removed from the page, i.e. when clicking on "Check now". Displays a
-// loading state until received.
-function requestIfNeeded() {
-	if ($("#version-checker").is(":empty")) {
-		renderVersionChecker({status: "loading"});
-		socket.emit("changelog");
-	}
-}
+import socket from "../socket";
+import store from "../store";
 
 socket.on("changelog", function(data) {
-	// 1. Release notes window for the current version
-	$("#changelog").html(templates.windows.changelog(data.current));
+	store.commit("versionData", data);
+	store.commit("versionDataExpired", false);
 
-	const links = $("#changelog .changelog-text a");
-	// Make sure all links will open a new tab instead of exiting the application
-	links.prop("target", "_blank");
-	// Add required metadata to image links, to support built-in image viewer
-	links.has("img").addClass("toggle-thumbnail");
-
-	// 2. Version checker visible in Help window
 	let status;
 
 	if (data.latest) {
@@ -37,31 +19,11 @@ socket.on("changelog", function(data) {
 		status = "error";
 	}
 
-	renderVersionChecker({
-		latest: data.latest,
-		status,
-	});
+	store.commit("versionStatus", status);
 
 	// When there is a button to refresh the checker available, display it when
 	// data is expired. Before that, server would return same information anyway.
 	if (data.expiresAt) {
-		setTimeout(() => $("#version-checker #check-now").show(), data.expiresAt - Date.now());
+		setTimeout(() => store.commit("versionDataExpired", true), data.expiresAt - Date.now());
 	}
 });
-
-$("#help, #changelog").on("show", requestIfNeeded);
-
-// When clicking the "Check now" button, remove current checker information and
-// request a new one. Loading will be displayed in the meantime.
-$("#help").on("click", "#check-now", () => {
-	$("#version-checker").empty();
-	requestIfNeeded();
-});
-
-// Given a status and latest release information, update the version checker
-// (CSS class and content)
-function renderVersionChecker({status, latest}) {
-	$("#version-checker")
-		.prop("class", status)
-		.html(templates.version_checker({latest, status}));
-}
diff --git a/client/js/socket-events/commands.js b/client/js/socket-events/commands.js
index f7ca9073..682e53ce 100644
--- a/client/js/socket-events/commands.js
+++ b/client/js/socket-events/commands.js
@@ -1,5 +1,5 @@
-const constants = require("../constants");
-const socket = require("../socket");
+import constants from "../constants";
+import socket from "../socket";
 
 socket.on("commands", function(commands) {
 	if (commands) {
diff --git a/client/js/socket-events/configuration.js b/client/js/socket-events/configuration.js
index 8449cd3b..f619f30b 100644
--- a/client/js/socket-events/configuration.js
+++ b/client/js/socket-events/configuration.js
@@ -1,229 +1,35 @@
 "use strict";
 
-const $ = require("jquery");
-const socket = require("../socket");
-const templates = require("../../views");
-const options = require("../options");
-const webpush = require("../webpush");
-const connect = $("#connect");
-const utils = require("../utils");
-const upload = require("../upload");
-const {vueApp} = require("../vue");
+import socket from "../socket";
+import upload from "../upload";
+import store from "../store";
 
-window.addEventListener("beforeinstallprompt", (installPromptEvent) => {
-	$("#webapp-install-button")
-		.on("click", function() {
-			if (installPromptEvent && installPromptEvent.prompt) {
-				installPromptEvent.prompt();
-			}
+socket.once("configuration", function(data) {
+	store.commit("serverConfiguration", data);
 
-			$(this).prop("hidden", true);
-		})
-		.prop("hidden", false);
-
-	$("#native-app").prop("hidden", false);
-});
-
-socket.on("configuration", function(data) {
-	vueApp.isFileUploadEnabled = data.fileUpload;
-
-	if (options.initialized) {
-		// Likely a reconnect, request sync for possibly missed settings.
-		socket.emit("setting:get");
-		return;
-	}
-
-	$("#settings").html(templates.windows.settings(data));
-	$("#help").html(templates.windows.help(data));
-	$("#changelog").html(templates.windows.changelog());
-
-	$("#settings").on("show", () => {
-		$("#session-list").html("<p>Loading…</p>");
-		socket.emit("sessions:get");
-	});
-
-	$("#play").on("click", () => {
-		const pop = new Audio();
-		pop.src = "audio/pop.wav";
-		pop.play();
-	});
+	// 'theme' setting depends on serverConfiguration.themes so
+	// settings cannot be applied before this point
+	store.dispatch("settings/applyAll");
+	socket.emit("setting:get");
 
 	if (data.fileUpload) {
-		upload.initialize(data.fileUploadMaxFileSize);
+		upload.initialize();
 	}
 
-	utils.togglePasswordField("#change-password .reveal-password");
-
-	options.initialize();
-	webpush.initialize();
-
 	// If localStorage contains a theme that does not exist on this server, switch
 	// back to its default theme.
-	const currentTheme = data.themes.find((t) => t.name === options.settings.theme);
+	const currentTheme = data.themes.find((t) => t.name === store.state.settings.theme);
 
 	if (currentTheme === undefined) {
-		options.processSetting("theme", data.defaultTheme, true);
+		store.commit("settings/update", {name: "theme", value: data.defaultTheme, sync: true});
 	} else if (currentTheme.themeColor) {
 		document.querySelector('meta[name="theme-color"]').content = currentTheme.themeColor;
 	}
 
-	function handleFormSubmit() {
-		const form = $(this);
-		const event = form.data("event");
-
-		form.find(".btn").prop("disabled", true);
-
-		const values = {};
-		$.each(form.serializeArray(), function(i, obj) {
-			if (obj.value !== "") {
-				values[obj.name] = obj.value;
-			}
-		});
-
-		socket.emit(event, values);
-
-		return false;
-	}
-
-	$("#change-password form").on("submit", handleFormSubmit);
-	connect.on("submit", "form", handleFormSubmit);
-
-	connect.on("show", function() {
-		connect
-			.html(templates.windows.connect(data))
-			.find("#connect\\:nick")
-			.on("focusin", function() {
-				// Need to set the first "lastvalue", so it can be used in the below function
-				const nick = $(this);
-				nick.data("lastvalue", nick.val());
-			})
-			.on("input", function() {
-				const nick = $(this).val();
-				const usernameInput = connect.find(".username");
-
-				// Because this gets called /after/ it has already changed, we need use the previous value
-				const lastValue = $(this).data("lastvalue");
-
-				// They were the same before the change, so update the username field
-				if (usernameInput.val() === lastValue) {
-					usernameInput.val(nick);
-				}
-
-				// Store the "previous" value, for next time
-				$(this).data("lastvalue", nick);
-			});
-
-		utils.togglePasswordField("#connect .reveal-password");
-	});
-
-	if ("URLSearchParams" in window) {
-		const params = new URLSearchParams(document.location.search);
-
-		if (params.has("uri")) {
-			parseIrcUri(params.get("uri") + location.hash, data);
-		} else if ($(document.body).hasClass("public")) {
-			parseOverrideParams(params, data);
-		}
+	if (document.body.classList.contains("public")) {
+		window.addEventListener(
+			"beforeunload",
+			() => "Are you sure you want to navigate away from this page?"
+		);
 	}
 });
-
-function parseIrcUri(stringUri, defaults) {
-	const data = Object.assign({}, defaults.defaults);
-
-	try {
-		// https://tools.ietf.org/html/draft-butcher-irc-url-04
-		const uri = new URL(stringUri);
-
-		// Replace protocol with a "special protocol" (that's what it's called in WHATWG spec)
-		// So that the uri can be properly parsed
-		if (uri.protocol === "irc:") {
-			uri.protocol = "http:";
-
-			if (!uri.port) {
-				uri.port = 6667;
-			}
-
-			data.tls = false;
-		} else if (uri.protocol === "ircs:") {
-			uri.protocol = "https:";
-
-			if (!uri.port) {
-				uri.port = 6697;
-			}
-
-			data.tls = true;
-		} else {
-			return;
-		}
-
-		data.host = data.name = uri.hostname;
-		data.port = uri.port;
-		data.username = window.decodeURIComponent(uri.username) || data.username;
-		data.password = window.decodeURIComponent(uri.password) || data.password;
-
-		let channel = (uri.pathname + uri.hash).substr(1);
-		const index = channel.indexOf(",");
-
-		if (index > -1) {
-			channel = channel.substring(0, index);
-		}
-
-		data.join = channel;
-
-		// TODO: Need to show connect window with uri params without overriding defaults
-		defaults.defaults = data;
-
-		$('button[data-target="#connect"]').trigger("click");
-	} catch (e) {
-		// do nothing on invalid uri
-	}
-}
-
-function parseOverrideParams(params, data) {
-	for (let [key, value] of params) {
-		// Support `channels` as a compatibility alias with other clients
-		if (key === "channels") {
-			key = "join";
-		}
-
-		if (!Object.prototype.hasOwnProperty.call(data.defaults, key)) {
-			continue;
-		}
-
-		// When the network is locked, URL overrides should not affect disabled fields
-		if (data.lockNetwork && ["host", "port", "tls", "rejectUnauthorized"].includes(key)) {
-			continue;
-		}
-
-		// When the network is not displayed, its name in the UI is not customizable
-		if (!data.displayNetwork && key === "name") {
-			continue;
-		}
-
-		if (key === "join") {
-			value = value
-				.split(",")
-				.map((chan) => {
-					if (!chan.match(/^[#&!+]/)) {
-						return `#${chan}`;
-					}
-
-					return chan;
-				})
-				.join(", ");
-		}
-
-		// Override server provided defaults with parameters passed in the URL if they match the data type
-		switch (typeof data.defaults[key]) {
-			case "boolean":
-				data.defaults[key] = value === "1" || value === "true";
-				break;
-			case "number":
-				data.defaults[key] = Number(value);
-				break;
-			case "string":
-				data.defaults[key] = String(value);
-				break;
-		}
-	}
-}
diff --git a/client/js/socket-events/connection.js b/client/js/socket-events/connection.js
new file mode 100644
index 00000000..70f0638b
--- /dev/null
+++ b/client/js/socket-events/connection.js
@@ -0,0 +1,69 @@
+import store from "../store";
+import socket from "../socket";
+
+socket.on("disconnect", handleDisconnect);
+socket.on("connect_error", handleDisconnect);
+socket.on("error", handleDisconnect);
+
+socket.on("reconnecting", function(attempt) {
+	store.commit("currentUserVisibleError", `Reconnecting… (attempt ${attempt})`);
+	updateLoadingMessage();
+});
+
+socket.on("connecting", function() {
+	store.commit("currentUserVisibleError", "Connecting…");
+	updateLoadingMessage();
+});
+
+socket.on("connect", function() {
+	// Clear send buffer when reconnecting, socket.io would emit these
+	// immediately upon connection and it will have no effect, so we ensure
+	// nothing is sent to the server that might have happened.
+	socket.sendBuffer = [];
+
+	store.commit("currentUserVisibleError", "Finalizing connection…");
+	updateLoadingMessage();
+});
+
+function handleDisconnect(data) {
+	const message = data.message || data;
+
+	store.commit("isConnected", false);
+
+	if (!socket.io.reconnection()) {
+		store.commit(
+			"currentUserVisibleError",
+			`Disconnected from the server (${message}), The Lounge does not reconnect in public mode.`
+		);
+		updateLoadingMessage();
+		return;
+	}
+
+	store.commit("currentUserVisibleError", `Waiting to reconnect… (${message})`);
+	updateLoadingMessage();
+
+	// If the server shuts down, socket.io skips reconnection
+	// and we have to manually call connect to start the process
+	// However, do not reconnect if TL client manually closed the connection
+	if (socket.io.skipReconnect && message !== "io client disconnect") {
+		requestIdleCallback(() => socket.connect(), 2000);
+	}
+}
+
+function requestIdleCallback(callback, timeout) {
+	if (window.requestIdleCallback) {
+		// During an idle period the user agent will run idle callbacks in FIFO order
+		// until either the idle period ends or there are no more idle callbacks eligible to be run.
+		window.requestIdleCallback(callback, {timeout});
+	} else {
+		callback();
+	}
+}
+
+function updateLoadingMessage() {
+	const loading = document.getElementById("loading-page-message");
+
+	if (loading) {
+		loading.textContent = store.state.currentUserVisibleError;
+	}
+}
diff --git a/client/js/socket-events/index.js b/client/js/socket-events/index.js
index 5453e74f..722ec3a7 100644
--- a/client/js/socket-events/index.js
+++ b/client/js/socket-events/index.js
@@ -1,25 +1,25 @@
 "use strict";
 
-require("./auth");
-require("./change_password");
-require("./commands");
-require("./init");
-require("./join");
-require("./more");
-require("./msg");
-require("./msg_preview");
-require("./msg_special");
-require("./names");
-require("./network");
-require("./nick");
-require("./open");
-require("./part");
-require("./quit");
-require("./sync_sort");
-require("./topic");
-require("./users");
-require("./sign_out");
-require("./sessions_list");
-require("./configuration");
-require("./changelog");
-require("./setting");
+import "./connection";
+import "./auth";
+import "./commands";
+import "./init";
+import "./join";
+import "./more";
+import "./msg";
+import "./msg_preview";
+import "./msg_special";
+import "./names";
+import "./network";
+import "./nick";
+import "./open";
+import "./part";
+import "./quit";
+import "./sync_sort";
+import "./topic";
+import "./users";
+import "./sign_out";
+import "./sessions_list";
+import "./configuration";
+import "./changelog";
+import "./setting";
diff --git a/client/js/socket-events/init.js b/client/js/socket-events/init.js
index bfd2b387..4174af2c 100644
--- a/client/js/socket-events/init.js
+++ b/client/js/socket-events/init.js
@@ -1,124 +1,70 @@
 "use strict";
 
-const $ = require("jquery");
-const escape = require("css.escape");
-const socket = require("../socket");
-const webpush = require("../webpush");
-const slideoutMenu = require("../slideout");
-const sidebar = $("#sidebar");
-const storage = require("../localStorage");
-const utils = require("../utils");
-const {vueApp, initChannel} = require("../vue");
+import socket from "../socket";
+import storage from "../localStorage";
+import {router, switchToChannel, navigate, initialize as routerInitialize} from "../router";
+import store from "../store";
+import parseIrcUri from "../helpers/parseIrcUri";
 
 socket.on("init", function(data) {
-	vueApp.currentUserVisibleError = "Rendering…";
-	$("#loading-page-message").text(vueApp.currentUserVisibleError);
+	store.commit("networks", mergeNetworkData(data.networks));
+	store.commit("isConnected", true);
+	store.commit("currentUserVisibleError", null);
 
-	const previousActive = vueApp.activeChannel && vueApp.activeChannel.channel.id;
-
-	vueApp.networks = mergeNetworkData(data.networks);
-	vueApp.isConnected = true;
-	vueApp.currentUserVisibleError = null;
-
-	if (!vueApp.initialized) {
-		vueApp.initialized = true;
-
-		if (data.token) {
-			storage.set("token", data.token);
-		}
-
-		webpush.configurePushNotifications(data.pushSubscription, data.applicationServerKey);
-
-		slideoutMenu.enable();
-
-		const viewport = $("#viewport");
-		const viewportWidth = $(window).outerWidth();
-		let isUserlistOpen = storage.get("thelounge.state.userlist");
-
-		if (viewportWidth > utils.mobileViewportPixels) {
-			slideoutMenu.toggle(storage.get("thelounge.state.sidebar") !== "false");
-		}
-
-		// If The Lounge is opened on a small screen (less than 1024px), and we don't have stored
-		// user list state, close it by default
-		if (viewportWidth >= 1024 && isUserlistOpen !== "true" && isUserlistOpen !== "false") {
-			isUserlistOpen = "true";
-		}
-
-		viewport.toggleClass("userlist-open", isUserlistOpen === "true");
-
-		$(document.body).removeClass("signed-out");
-		$("#loading").remove();
-		$("#sign-in").remove();
-
-		if (window.g_LoungeErrorHandler) {
-			window.removeEventListener("error", window.g_LoungeErrorHandler);
-			window.g_LoungeErrorHandler = null;
-		}
+	if (data.token) {
+		storage.set("token", data.token);
 	}
 
-	vueApp.$nextTick(() => openCorrectChannel(previousActive, data.active));
+	if (!store.state.appLoaded) {
+		// Routes are initialized after networks data is merged
+		// so the route guard for channels works correctly on page load
+		routerInitialize();
 
-	utils.confirmExit();
-	utils.synchronizeNotifiedState();
+		store.commit("appLoaded");
+
+		if (window.g_TheLoungeRemoveLoading) {
+			window.g_TheLoungeRemoveLoading();
+		}
+
+		// TODO: Review this code and make it better
+		if (!router.currentRoute.name || router.currentRoute.name === "SignIn") {
+			const channel = store.getters.findChannel(data.active);
+
+			if (channel) {
+				switchToChannel(channel.channel);
+			} else if (store.state.networks.length > 0) {
+				// Server is telling us to open a channel that does not exist
+				// For example, it can be unset if you first open the page after server start
+				switchToChannel(store.state.networks[0].channels[0]);
+			} else {
+				navigate("Connect");
+			}
+		}
+
+		if ("URLSearchParams" in window) {
+			handleQueryParams();
+		}
+	}
 });
 
-function openCorrectChannel(clientActive, serverActive) {
-	let target = $();
-
-	// Open last active channel
-	if (clientActive > 0) {
-		target = sidebar.find(`.chan[data-id="${clientActive}"]`);
-	}
-
-	// Open window provided in location.hash
-	if (target.length === 0 && window.location.hash) {
-		target = $(`[data-target="${escape(window.location.hash)}"]`).first();
-	}
-
-	// Open last active channel according to the server
-	if (serverActive > 0 && target.length === 0) {
-		target = sidebar.find(`.chan[data-id="${serverActive}"]`);
-	}
-
-	// Open first available channel
-	if (target.length === 0) {
-		target = sidebar.find(".chan").first();
-	}
-
-	// If target channel is found, open it
-	if (target.length > 0) {
-		target.trigger("click", {
-			replaceHistory: true,
-		});
-
-		return;
-	}
-
-	// Open the connect window
-	$("#footer .connect").trigger("click", {
-		pushState: false,
-	});
-}
-
 function mergeNetworkData(newNetworks) {
 	const collapsedNetworks = new Set(JSON.parse(storage.get("thelounge.networks.collapsed")));
 
 	for (let n = 0; n < newNetworks.length; n++) {
 		const network = newNetworks[n];
-		const currentNetwork = vueApp.networks.find((net) => net.uuid === network.uuid);
+		const currentNetwork = store.getters.findNetwork(network.uuid);
 
 		// If this network is new, set some default variables and initalize channel variables
 		if (!currentNetwork) {
 			network.isJoinChannelShown = false;
 			network.isCollapsed = collapsedNetworks.has(network.uuid);
-			network.channels.forEach(initChannel);
+			network.channels.forEach(store.getters.initChannel);
 
 			continue;
 		}
 
 		// Merge received network object into existing network object on the client
-		// so the object reference stays the same (e.g. for vueApp.currentChannel)
+		// so the object reference stays the same (e.g. for currentChannel state)
 		for (const key in network) {
 			if (!Object.prototype.hasOwnProperty.call(network, key)) {
 				continue;
@@ -148,13 +94,13 @@ function mergeChannelData(oldChannels, newChannels) {
 
 		// This is a new channel that was joined while client was disconnected, initialize it
 		if (!currentChannel) {
-			initChannel(channel);
+			store.getters.initChannel(channel);
 
 			continue;
 		}
 
 		// Merge received channel object into existing currentChannel
-		// so the object references are exactly the same (e.g. in vueApp.activeChannel)
+		// so the object references are exactly the same (e.g. in store.state.activeChannel)
 		for (const key in channel) {
 			if (!Object.prototype.hasOwnProperty.call(channel, key)) {
 				continue;
@@ -163,7 +109,10 @@ function mergeChannelData(oldChannels, newChannels) {
 			// Server sends an empty users array, client requests it whenever needed
 			if (key === "users") {
 				if (channel.type === "channel") {
-					if (vueApp.activeChannel && vueApp.activeChannel.channel === currentChannel) {
+					if (
+						store.state.activeChannel &&
+						store.state.activeChannel.channel === currentChannel
+					) {
 						// For currently open channel, request the user list straight away
 						socket.emit("names", {
 							target: channel.id,
@@ -201,3 +150,28 @@ function mergeChannelData(oldChannels, newChannels) {
 
 	return newChannels;
 }
+
+function handleQueryParams() {
+	const params = new URLSearchParams(document.location.search);
+
+	const cleanParams = () => {
+		// Remove query parameters from url without reloading the page
+		const cleanUri = window.location.origin + window.location.pathname + window.location.hash;
+		window.history.replaceState({}, document.title, cleanUri);
+	};
+
+	if (params.has("uri")) {
+		// Set default connection settings from IRC protocol links
+		const uri = params.get("uri");
+		const queryParams = parseIrcUri(uri);
+
+		cleanParams();
+		router.push({name: "Connect", query: queryParams});
+	} else if (document.body.classList.contains("public") && document.location.search) {
+		// Set default connection settings from url params
+		const queryParams = Object.fromEntries(params.entries());
+
+		cleanParams();
+		router.push({name: "Connect", query: queryParams});
+	}
+}
diff --git a/client/js/socket-events/join.js b/client/js/socket-events/join.js
index bcff04cc..d0da287b 100644
--- a/client/js/socket-events/join.js
+++ b/client/js/socket-events/join.js
@@ -1,22 +1,24 @@
 "use strict";
 
-const $ = require("jquery");
-const socket = require("../socket");
-const {vueApp, initChannel} = require("../vue");
+import socket from "../socket";
+import store from "../store";
+import {switchToChannel} from "../router";
 
 socket.on("join", function(data) {
-	initChannel(data.chan);
+	store.getters.initChannel(data.chan);
 
-	vueApp.networks
-		.find((n) => n.uuid === data.network)
-		.channels.splice(data.index || -1, 0, data.chan);
+	const network = store.getters.findNetwork(data.network);
+
+	if (!network) {
+		return;
+	}
+
+	network.channels.splice(data.index || -1, 0, data.chan);
 
 	// Queries do not automatically focus, unless the user did a whois
 	if (data.chan.type === "query" && !data.shouldOpen) {
 		return;
 	}
 
-	vueApp.$nextTick(() => {
-		$(`#sidebar .chan[data-id="${data.chan.id}"]`).trigger("click");
-	});
+	switchToChannel(store.getters.findChannel(data.chan.id).channel);
 });
diff --git a/client/js/socket-events/more.js b/client/js/socket-events/more.js
index 2a5547e9..51b4d395 100644
--- a/client/js/socket-events/more.js
+++ b/client/js/socket-events/more.js
@@ -1,10 +1,12 @@
 "use strict";
 
-const socket = require("../socket");
-const {vueApp, findChannel} = require("../vue");
+import Vue from "vue";
+
+import socket from "../socket";
+import store from "../store";
 
 socket.on("more", function(data) {
-	const channel = findChannel(data.chan);
+	const channel = store.getters.findChannel(data.chan);
 
 	if (!channel) {
 		return;
@@ -14,7 +16,7 @@ socket.on("more", function(data) {
 		data.totalMessages > channel.channel.messages.length + data.messages.length;
 	channel.channel.messages.unshift(...data.messages);
 
-	vueApp.$nextTick(() => {
+	Vue.nextTick(() => {
 		channel.channel.historyLoading = false;
 	});
 });
diff --git a/client/js/socket-events/msg.js b/client/js/socket-events/msg.js
index df5f1010..283deba0 100644
--- a/client/js/socket-events/msg.js
+++ b/client/js/socket-events/msg.js
@@ -1,12 +1,9 @@
 "use strict";
 
-const $ = require("jquery");
-const socket = require("../socket");
-const utils = require("../utils");
-const options = require("../options");
-const cleanIrcMessage = require("../libs/handlebars/ircmessageparser/cleanIrcMessage");
-const webpush = require("../webpush");
-const {vueApp, findChannel} = require("../vue");
+import socket from "../socket";
+import cleanIrcMessage from "../helpers/ircmessageparser/cleanIrcMessage";
+import store from "../store";
+import {switchToChannel} from "../router";
 
 let pop;
 
@@ -15,29 +12,30 @@ try {
 	pop.src = "audio/pop.wav";
 } catch (e) {
 	pop = {
-		play: $.noop,
+		play() {},
 	};
 }
 
 socket.on("msg", function(data) {
-	const receivingChannel = findChannel(data.chan);
+	const receivingChannel = store.getters.findChannel(data.chan);
 
 	if (!receivingChannel) {
 		return;
 	}
 
 	let channel = receivingChannel.channel;
-	const isActiveChannel = vueApp.activeChannel && vueApp.activeChannel.channel === channel;
+	const isActiveChannel =
+		store.state.activeChannel && store.state.activeChannel.channel === channel;
 
 	// Display received notices and errors in currently active channel.
 	// Reloading the page will put them back into the lobby window.
 	// We only want to put errors/notices in active channel if they arrive on the same network
 	if (
 		data.msg.showInActive &&
-		vueApp.activeChannel &&
-		vueApp.activeChannel.network === receivingChannel.network
+		store.state.activeChannel &&
+		store.state.activeChannel.network === receivingChannel.network
 	) {
-		channel = vueApp.activeChannel.channel;
+		channel = store.state.activeChannel.channel;
 
 		if (data.chan === channel.id) {
 			// If active channel is the intended channel for this message,
@@ -64,7 +62,7 @@ socket.on("msg", function(data) {
 	if (data.msg.self) {
 		channel.firstUnread = data.msg.id;
 	} else {
-		notifyMessage(data.chan, channel, vueApp.activeChannel, data.msg);
+		notifyMessage(data.chan, channel, store.state.activeChannel, data.msg);
 	}
 
 	let messageLimit = 0;
@@ -89,18 +87,12 @@ socket.on("msg", function(data) {
 			user.lastMessage = new Date(data.msg.time).getTime() || Date.now();
 		}
 	}
-
-	if (data.msg.self || data.msg.highlight) {
-		utils.synchronizeNotifiedState();
-	}
 });
 
 function notifyMessage(targetId, channel, activeChannel, msg) {
-	const button = $("#sidebar .chan[data-id='" + targetId + "']");
-
-	if (msg.highlight || (options.settings.notifyAllMessages && msg.type === "message")) {
+	if (msg.highlight || (store.state.settings.notifyAllMessages && msg.type === "message")) {
 		if (!document.hasFocus() || !activeChannel || activeChannel.channel !== channel) {
-			if (options.settings.notification) {
+			if (store.state.settings.notification) {
 				try {
 					pop.play();
 				} catch (exception) {
@@ -109,7 +101,7 @@ function notifyMessage(targetId, channel, activeChannel, msg) {
 			}
 
 			if (
-				options.settings.desktopNotifications &&
+				store.state.settings.desktopNotifications &&
 				"Notification" in window &&
 				Notification.permission === "granted"
 			) {
@@ -136,7 +128,7 @@ function notifyMessage(targetId, channel, activeChannel, msg) {
 				const timestamp = Date.parse(msg.time);
 
 				try {
-					if (webpush.hasServiceWorker) {
+					if (store.state.hasServiceWorker) {
 						navigator.serviceWorker.ready.then((registration) => {
 							registration.active.postMessage({
 								type: "notification",
@@ -155,9 +147,14 @@ function notifyMessage(targetId, channel, activeChannel, msg) {
 							timestamp: timestamp,
 						});
 						notify.addEventListener("click", function() {
-							window.focus();
-							button.trigger("click");
 							this.close();
+							window.focus();
+
+							const channelTarget = store.getters.findChannel(targetId);
+
+							if (channelTarget) {
+								switchToChannel(channelTarget);
+							}
 						});
 					}
 				} catch (exception) {
diff --git a/client/js/socket-events/msg_preview.js b/client/js/socket-events/msg_preview.js
index 8a7ed712..19085762 100644
--- a/client/js/socket-events/msg_preview.js
+++ b/client/js/socket-events/msg_preview.js
@@ -1,10 +1,12 @@
 "use strict";
 
-const socket = require("../socket");
-const {vueApp, findChannel} = require("../vue");
+import Vue from "vue";
+
+import socket from "../socket";
+import store from "../store";
 
 socket.on("msg:preview", function(data) {
-	const {channel} = findChannel(data.chan);
+	const {channel} = store.getters.findChannel(data.chan);
 	const message = channel.messages.find((m) => m.id === data.id);
 
 	if (!message) {
@@ -14,6 +16,6 @@ socket.on("msg:preview", function(data) {
 	const previewIndex = message.previews.findIndex((m) => m.link === data.preview.link);
 
 	if (previewIndex > -1) {
-		vueApp.$set(message.previews, previewIndex, data.preview);
+		Vue.set(message.previews, previewIndex, data.preview);
 	}
 });
diff --git a/client/js/socket-events/msg_special.js b/client/js/socket-events/msg_special.js
index 2e05c095..52c6ebef 100644
--- a/client/js/socket-events/msg_special.js
+++ b/client/js/socket-events/msg_special.js
@@ -1,13 +1,11 @@
 "use strict";
 
-const $ = require("jquery");
-const socket = require("../socket");
-const {vueApp, findChannel} = require("../vue");
+import socket from "../socket";
+import store from "../store";
+import {switchToChannel} from "../router";
 
 socket.on("msg:special", function(data) {
-	findChannel(data.chan).channel.data = data.data;
-
-	vueApp.$nextTick(() => {
-		$(`#sidebar .chan[data-id="${data.chan}"]`).trigger("click");
-	});
+	const channel = store.getters.findChannel(data.chan);
+	channel.channel.data = data.data;
+	switchToChannel(channel.channel);
 });
diff --git a/client/js/socket-events/names.js b/client/js/socket-events/names.js
index 73403264..ac0d1fa0 100644
--- a/client/js/socket-events/names.js
+++ b/client/js/socket-events/names.js
@@ -1,10 +1,10 @@
 "use strict";
 
-const socket = require("../socket");
-const {findChannel} = require("../vue");
+import socket from "../socket";
+import store from "../store";
 
 socket.on("names", function(data) {
-	const channel = findChannel(data.id);
+	const channel = store.getters.findChannel(data.id);
 
 	if (channel) {
 		channel.channel.users = data.users;
diff --git a/client/js/socket-events/network.js b/client/js/socket-events/network.js
index 5f5d86a6..0c071952 100644
--- a/client/js/socket-events/network.js
+++ b/client/js/socket-events/network.js
@@ -1,39 +1,32 @@
 "use strict";
 
-const $ = require("jquery");
-const socket = require("../socket");
-const templates = require("../../views");
-const sidebar = $("#sidebar");
-const utils = require("../utils");
-const {vueApp, initChannel, findChannel} = require("../vue");
+import Vue from "vue";
+
+import socket from "../socket";
+import store from "../store";
+import {switchToChannel} from "../router";
 
 socket.on("network", function(data) {
 	const network = data.networks[0];
 
 	network.isJoinChannelShown = false;
 	network.isCollapsed = false;
-	network.channels.forEach(initChannel);
+	network.channels.forEach(store.getters.initChannel);
 
-	vueApp.networks.push(network);
-
-	vueApp.$nextTick(() => {
-		sidebar
-			.find(".chan")
-			.last()
-			.trigger("click");
-	});
-
-	$("#connect")
-		.find(".btn")
-		.prop("disabled", false);
+	store.commit("networks", [...store.state.networks, network]);
+	switchToChannel(network.channels[0]);
 });
 
 socket.on("network:options", function(data) {
-	vueApp.networks.find((n) => n.uuid === data.network).serverOptions = data.serverOptions;
+	const network = store.getters.findNetwork(data.network);
+
+	if (network) {
+		network.serverOptions = data.serverOptions;
+	}
 });
 
 socket.on("network:status", function(data) {
-	const network = vueApp.networks.find((n) => n.uuid === data.network);
+	const network = store.getters.findNetwork(data.network);
 
 	if (!network) {
 		return;
@@ -51,7 +44,7 @@ socket.on("network:status", function(data) {
 });
 
 socket.on("channel:state", function(data) {
-	const channel = findChannel(data.chan);
+	const channel = store.getters.findChannel(data.chan);
 
 	if (channel) {
 		channel.channel.state = data.state;
@@ -59,22 +52,13 @@ socket.on("channel:state", function(data) {
 });
 
 socket.on("network:info", function(data) {
-	$("#connect")
-		.html(templates.windows.connect(data))
-		.find("form")
-		.on("submit", function() {
-			const uuid = $(this)
-				.find("input[name=uuid]")
-				.val();
-			const newName = $(this)
-				.find("#connect\\:name")
-				.val();
+	const network = store.getters.findNetwork(data.uuid);
 
-			const network = vueApp.networks.find((n) => n.uuid === uuid);
-			network.name = network.channels[0].name = newName;
+	if (!network) {
+		return;
+	}
 
-			sidebar.find(`.network[data-uuid="${uuid}"] .chan.lobby .name`).click();
-		});
-
-	utils.togglePasswordField("#connect .reveal-password");
+	for (const key in data) {
+		Vue.set(network, key, data[key]);
+	}
 });
diff --git a/client/js/socket-events/nick.js b/client/js/socket-events/nick.js
index cda8213c..6713b9b8 100644
--- a/client/js/socket-events/nick.js
+++ b/client/js/socket-events/nick.js
@@ -1,10 +1,10 @@
 "use strict";
 
-const socket = require("../socket");
-const {vueApp} = require("../vue");
+import socket from "../socket";
+import store from "../store";
 
 socket.on("nick", function(data) {
-	const network = vueApp.networks.find((n) => n.uuid === data.network);
+	const network = store.getters.findNetwork(data.network);
 
 	if (network) {
 		network.nick = data.nick;
diff --git a/client/js/socket-events/open.js b/client/js/socket-events/open.js
index e9b83c00..4bd01058 100644
--- a/client/js/socket-events/open.js
+++ b/client/js/socket-events/open.js
@@ -1,8 +1,7 @@
 "use strict";
 
-const socket = require("../socket");
-const utils = require("../utils");
-const {vueApp, findChannel} = require("../vue");
+import socket from "../socket";
+import store from "../store";
 
 // Sync unread badge and marker when other clients open a channel
 socket.on("open", function(id) {
@@ -11,12 +10,12 @@ socket.on("open", function(id) {
 	}
 
 	// Don't do anything if the channel is active on this client
-	if (vueApp.activeChannel && vueApp.activeChannel.channel.id === id) {
+	if (store.state.activeChannel && store.state.activeChannel.channel.id === id) {
 		return;
 	}
 
 	// Clear the unread badge
-	const channel = findChannel(id);
+	const channel = store.getters.findChannel(id);
 
 	if (channel) {
 		channel.channel.highlight = 0;
@@ -27,6 +26,4 @@ socket.on("open", function(id) {
 				channel.channel.messages[channel.channel.messages.length - 1].id;
 		}
 	}
-
-	utils.synchronizeNotifiedState();
 });
diff --git a/client/js/socket-events/part.js b/client/js/socket-events/part.js
index b080b87c..c9724a45 100644
--- a/client/js/socket-events/part.js
+++ b/client/js/socket-events/part.js
@@ -1,20 +1,16 @@
 "use strict";
 
-const $ = require("jquery");
-const socket = require("../socket");
-const utils = require("../utils");
-const {vueApp, findChannel} = require("../vue");
+import socket from "../socket";
+import store from "../store";
+import {switchToChannel} from "../router";
 
 socket.on("part", function(data) {
 	// When parting from the active channel/query, jump to the network's lobby
-	if (vueApp.activeChannel && vueApp.activeChannel.channel.id === data.chan) {
-		$("#sidebar .chan[data-id='" + data.chan + "']")
-			.closest(".network")
-			.find(".lobby")
-			.trigger("click");
+	if (store.state.activeChannel && store.state.activeChannel.channel.id === data.chan) {
+		switchToChannel(store.state.activeChannel.network.channels[0]);
 	}
 
-	const channel = findChannel(data.chan);
+	const channel = store.getters.findChannel(data.chan);
 
 	if (channel) {
 		channel.network.channels.splice(
@@ -22,6 +18,4 @@ socket.on("part", function(data) {
 			1
 		);
 	}
-
-	utils.synchronizeNotifiedState();
 });
diff --git a/client/js/socket-events/quit.js b/client/js/socket-events/quit.js
index 6dea3d45..31d296b3 100644
--- a/client/js/socket-events/quit.js
+++ b/client/js/socket-events/quit.js
@@ -1,26 +1,24 @@
 "use strict";
 
-const $ = require("jquery");
-const socket = require("../socket");
-const sidebar = $("#sidebar");
-const {vueApp} = require("../vue");
+import socket from "../socket";
+import {switchToChannel, navigate} from "../router";
+import store from "../store";
 
 socket.on("quit", function(data) {
-	vueApp.networks.splice(
-		vueApp.networks.findIndex((n) => n.uuid === data.network),
-		1
-	);
+	// If we're in a channel, and it's on the network that is being removed,
+	// then open another channel window
+	const isCurrentNetworkBeingRemoved =
+		store.state.activeChannel && store.state.activeChannel.network.uuid === data.network;
 
-	vueApp.$nextTick(() => {
-		const chan = sidebar.find(".chan");
+	store.commit("removeNetwork", data.network);
 
-		if (chan.length === 0) {
-			// Open the connect window
-			$("#footer .connect").trigger("click", {
-				pushState: false,
-			});
-		} else {
-			chan.eq(0).trigger("click");
-		}
-	});
+	if (!isCurrentNetworkBeingRemoved) {
+		return;
+	}
+
+	if (store.state.networks.length > 0) {
+		switchToChannel(store.state.networks[0].channels[0]);
+	} else {
+		navigate("Connect");
+	}
 });
diff --git a/client/js/socket-events/sessions_list.js b/client/js/socket-events/sessions_list.js
index 91e2a57a..818cfe2b 100644
--- a/client/js/socket-events/sessions_list.js
+++ b/client/js/socket-events/sessions_list.js
@@ -1,37 +1,9 @@
 "use strict";
 
-const $ = require("jquery");
-const Auth = require("../auth");
-const socket = require("../socket");
-const templates = require("../../views");
+import socket from "../socket";
+import store from "../store";
 
 socket.on("sessions:list", function(data) {
 	data.sort((a, b) => b.lastUse - a.lastUse);
-
-	let html = "";
-	data.forEach((connection) => {
-		if (connection.current) {
-			$("#session-current").html(templates.session(connection));
-			return;
-		}
-
-		html += templates.session(connection);
-	});
-
-	if (html.length === 0) {
-		html = "<p><em>You are not currently logged in to any other device.</em></p>";
-	}
-
-	$("#session-list").html(html);
-});
-
-$("#settings").on("click", ".remove-session", function() {
-	const token = $(this).data("token");
-
-	if (token) {
-		socket.emit("sign-out", token);
-	} else {
-		socket.emit("sign-out");
-		Auth.signout();
-	}
+	store.commit("sessions", data);
 });
diff --git a/client/js/socket-events/setting.js b/client/js/socket-events/setting.js
index 8bb9378b..e16e6c31 100644
--- a/client/js/socket-events/setting.js
+++ b/client/js/socket-events/setting.js
@@ -1,32 +1,24 @@
 "use strict";
 
-const socket = require("../socket");
-const options = require("../options");
-
-function evaluateSetting(name, value) {
-	if (
-		options.settings.syncSettings &&
-		options.settings[name] !== value &&
-		!options.noSync.includes(name)
-	) {
-		options.processSetting(name, value, true);
-	} else if (options.alwaysSync.includes(name)) {
-		options.processSetting(name, value, true);
-	}
-}
+import socket from "../socket";
+import store from "../store";
 
 socket.on("setting:new", function(data) {
 	const name = data.name;
 	const value = data.value;
-	evaluateSetting(name, value);
+	store.dispatch("settings/update", {name, value, sync: false});
 });
 
 socket.on("setting:all", function(settings) {
-	if (Object.keys(settings).length === 0) {
-		options.syncAllSettings();
-	} else {
+	const serverHasSettings = Object.keys(settings).length > 0;
+
+	store.commit("serverHasSettings", serverHasSettings);
+
+	if (serverHasSettings) {
 		for (const name in settings) {
-			evaluateSetting(name, settings[name]);
+			store.dispatch("settings/update", {name, value: settings[name], sync: false});
 		}
+	} else {
+		store.dispatch("settings/syncAll");
 	}
 });
diff --git a/client/js/socket-events/sign_out.js b/client/js/socket-events/sign_out.js
index 9cb5ebfb..d5f0e43f 100644
--- a/client/js/socket-events/sign_out.js
+++ b/client/js/socket-events/sign_out.js
@@ -1,7 +1,7 @@
 "use strict";
 
-const socket = require("../socket");
-const Auth = require("../auth");
+import socket from "../socket";
+import Auth from "../auth";
 
 socket.on("sign-out", function() {
 	Auth.signout();
diff --git a/client/js/socket-events/sync_sort.js b/client/js/socket-events/sync_sort.js
index 7fe41fbc..b2661ee8 100644
--- a/client/js/socket-events/sync_sort.js
+++ b/client/js/socket-events/sync_sort.js
@@ -1,19 +1,19 @@
 "use strict";
 
-const socket = require("../socket");
-const {vueApp} = require("../vue");
+import socket from "../socket";
+import store from "../store";
 
 socket.on("sync_sort", function(data) {
 	const order = data.order;
 
 	switch (data.type) {
 		case "networks":
-			vueApp.networks.sort((a, b) => order.indexOf(a.uuid) - order.indexOf(b.uuid));
+			store.commit("sortNetworks", (a, b) => order.indexOf(a.uuid) - order.indexOf(b.uuid));
 
 			break;
 
 		case "channels": {
-			const network = vueApp.networks.find((n) => n.uuid === data.target);
+			const network = store.getters.findNetwork(data.target);
 
 			if (!network) {
 				return;
diff --git a/client/js/socket-events/topic.js b/client/js/socket-events/topic.js
index 4bf3641b..a9ab5c8a 100644
--- a/client/js/socket-events/topic.js
+++ b/client/js/socket-events/topic.js
@@ -1,10 +1,10 @@
 "use strict";
 
-const socket = require("../socket");
-const {findChannel} = require("../vue");
+import socket from "../socket";
+import store from "../store";
 
 socket.on("topic", function(data) {
-	const channel = findChannel(data.chan);
+	const channel = store.getters.findChannel(data.chan);
 
 	if (channel) {
 		channel.channel.topic = data.topic;
diff --git a/client/js/socket-events/users.js b/client/js/socket-events/users.js
index ba439ccd..95fa49a4 100644
--- a/client/js/socket-events/users.js
+++ b/client/js/socket-events/users.js
@@ -1,16 +1,16 @@
 "use strict";
 
-const socket = require("../socket");
-const {vueApp, findChannel} = require("../vue");
+import socket from "../socket";
+import store from "../store";
 
 socket.on("users", function(data) {
-	if (vueApp.activeChannel && vueApp.activeChannel.channel.id === data.chan) {
+	if (store.state.activeChannel && store.state.activeChannel.channel.id === data.chan) {
 		return socket.emit("names", {
 			target: data.chan,
 		});
 	}
 
-	const channel = findChannel(data.chan);
+	const channel = store.getters.findChannel(data.chan);
 
 	if (channel) {
 		channel.channel.usersOutdated = true;
diff --git a/client/js/socket.js b/client/js/socket.js
index 7ccca5ee..509ba31f 100644
--- a/client/js/socket.js
+++ b/client/js/socket.js
@@ -1,59 +1,17 @@
 "use strict";
 
-const $ = require("jquery");
-const io = require("socket.io-client");
+import io from "socket.io-client";
 
 const socket = io({
-	transports: $(document.body).data("transports"),
+	transports: JSON.parse(document.body.dataset.transports),
 	path: window.location.pathname + "socket.io/",
 	autoConnect: false,
-	reconnection: !$(document.body).hasClass("public"),
+	reconnection: !document.body.classList.contains("public"),
 });
 
-module.exports = socket;
-
-const {vueApp} = require("./vue");
-const {requestIdleCallback} = require("./utils");
-
-socket.on("disconnect", handleDisconnect);
-socket.on("connect_error", handleDisconnect);
-socket.on("error", handleDisconnect);
-
-socket.on("reconnecting", function(attempt) {
-	vueApp.currentUserVisibleError = `Reconnecting… (attempt ${attempt})`;
-	$("#loading-page-message").text(vueApp.currentUserVisibleError);
-});
-
-socket.on("connecting", function() {
-	vueApp.currentUserVisibleError = "Connecting…";
-	$("#loading-page-message").text(vueApp.currentUserVisibleError);
-});
-
-socket.on("connect", function() {
-	// Clear send buffer when reconnecting, socket.io would emit these
-	// immediately upon connection and it will have no effect, so we ensure
-	// nothing is sent to the server that might have happened.
-	socket.sendBuffer = [];
-
-	vueApp.currentUserVisibleError = "Finalizing connection…";
-	$("#loading-page-message").text(vueApp.currentUserVisibleError);
-});
-
-socket.on("authorized", function() {
-	vueApp.currentUserVisibleError = "Loading messages…";
-	$("#loading-page-message").text(vueApp.currentUserVisibleError);
-});
-
-function handleDisconnect(data) {
-	const message = data.message || data;
-
-	vueApp.isConnected = false;
-	vueApp.currentUserVisibleError = `Waiting to reconnect… (${message})`;
-	$("#loading-page-message").text(vueApp.currentUserVisibleError);
-
-	// If the server shuts down, socket.io skips reconnection
-	// and we have to manually call connect to start the process
-	if (socket.io.skipReconnect) {
-		requestIdleCallback(() => socket.connect(), 2000);
-	}
+// Ease debugging socket during development
+if (process.env.NODE_ENV === "development") {
+	window.socket = socket;
 }
+
+export default socket;
diff --git a/client/js/store-settings.js b/client/js/store-settings.js
new file mode 100644
index 00000000..82d46365
--- /dev/null
+++ b/client/js/store-settings.js
@@ -0,0 +1,102 @@
+import storage from "./localStorage";
+import socket from "./socket";
+import {config, createState} from "./settings";
+
+export function createSettingsStore(store) {
+	return {
+		namespaced: true,
+		state: assignStoredSettings(createState(), loadFromLocalStorage()),
+		mutations: {
+			set(state, {name, value}) {
+				state[name] = value;
+			},
+		},
+		actions: {
+			syncAll({state}, force = false) {
+				if (state.syncSettings === false && force === false) {
+					return;
+				}
+
+				store.commit("serverHasSettings", true);
+
+				for (const name in state) {
+					if (config[name].sync !== "never" || config[name].sync === "always") {
+						socket.emit("setting:set", {name, value: state[name]});
+					}
+				}
+			},
+			applyAll({state}) {
+				for (const settingName in config) {
+					config[settingName].apply(store, state[settingName]);
+				}
+			},
+			update({state, commit}, {name, value, sync = false}) {
+				if (state[name] === value) {
+					return;
+				}
+
+				const settingConfig = config[name];
+
+				if (
+					sync === false &&
+					(state.syncSettings === false || settingConfig.sync === "never")
+				) {
+					return;
+				}
+
+				commit("set", {name, value});
+				storage.set("settings", JSON.stringify(state));
+				settingConfig.apply(store, value);
+
+				if (!sync) {
+					return;
+				}
+
+				if (
+					(state.syncSettings && settingConfig.sync !== "never") ||
+					settingConfig.sync === "always"
+				) {
+					socket.emit("setting:set", {name, value});
+				}
+			},
+		},
+	};
+}
+
+function loadFromLocalStorage() {
+	const storedSettings = JSON.parse(storage.get("settings")) || false;
+
+	if (!storedSettings) {
+		return {};
+	}
+
+	// Older The Lounge versions converted highlights to an array, turn it back into a string
+	if (typeof storedSettings.highlights === "object") {
+		storedSettings.highlights = storedSettings.highlights.join(", ");
+	}
+
+	return storedSettings;
+}
+
+/**
+ * Essentially Object.assign but does not overwrite and only assigns
+ * if key exists in both supplied objects and types match
+ *
+ * @param {object} defaultSettings
+ * @param {object} storedSettings
+ */
+function assignStoredSettings(defaultSettings, storedSettings) {
+	const newSettings = {...defaultSettings};
+
+	for (const key in defaultSettings) {
+		// Make sure the setting in local storage has the same type that the code expects
+		if (
+			typeof storedSettings[key] !== "undefined" &&
+			typeof defaultSettings[key] === typeof storedSettings[key]
+		) {
+			newSettings[key] = storedSettings[key];
+		}
+	}
+
+	return newSettings;
+}
diff --git a/client/js/store.js b/client/js/store.js
new file mode 100644
index 00000000..e68d7203
--- /dev/null
+++ b/client/js/store.js
@@ -0,0 +1,182 @@
+import Vue from "vue";
+import Vuex from "vuex";
+import {createSettingsStore} from "./store-settings";
+import storage from "./localStorage";
+
+const appName = document.title;
+
+Vue.use(Vuex);
+
+function detectDesktopNotificationState() {
+	if (!("Notification" in window)) {
+		return "unsupported";
+	} else if (Notification.permission === "granted") {
+		return "granted";
+	}
+
+	return "blocked";
+}
+
+const store = new Vuex.Store({
+	state: {
+		appLoaded: false,
+		activeChannel: null,
+		currentUserVisibleError: null,
+		desktopNotificationState: detectDesktopNotificationState(),
+		isAutoCompleting: false,
+		isConnected: false,
+		networks: [],
+		hasServiceWorker: false,
+		pushNotificationState: "unsupported",
+		serverConfiguration: null,
+		sessions: [],
+		sidebarOpen: false,
+		sidebarDragging: false,
+		userlistOpen: storage.get("thelounge.state.userlist") !== "false",
+		versionData: null,
+		versionStatus: "loading",
+		versionDataExpired: false,
+		serverHasSettings: false,
+	},
+	mutations: {
+		appLoaded(state) {
+			state.appLoaded = true;
+		},
+		activeChannel(state, channel) {
+			state.activeChannel = channel;
+		},
+		currentUserVisibleError(state, error) {
+			state.currentUserVisibleError = error;
+		},
+		refreshDesktopNotificationState(state) {
+			state.desktopNotificationState = detectDesktopNotificationState();
+		},
+		isAutoCompleting(state, isAutoCompleting) {
+			state.isAutoCompleting = isAutoCompleting;
+		},
+		isConnected(state, payload) {
+			state.isConnected = payload;
+		},
+		networks(state, networks) {
+			state.networks = networks;
+		},
+		removeNetwork(state, networkId) {
+			state.networks.splice(
+				store.state.networks.findIndex((n) => n.uuid === networkId),
+				1
+			);
+		},
+		sortNetworks(state, sortFn) {
+			state.networks.sort(sortFn);
+		},
+		hasServiceWorker(state) {
+			state.hasServiceWorker = true;
+		},
+		pushNotificationState(state, pushNotificationState) {
+			state.pushNotificationState = pushNotificationState;
+		},
+		serverConfiguration(state, serverConfiguration) {
+			state.serverConfiguration = serverConfiguration;
+		},
+		sessions(state, payload) {
+			state.sessions = payload;
+		},
+		sidebarOpen(state, payload) {
+			state.sidebarOpen = payload;
+		},
+		sidebarDragging(state, payload) {
+			state.sidebarDragging = payload;
+		},
+		toggleSidebar(state) {
+			state.sidebarOpen = !state.sidebarOpen;
+		},
+		toggleUserlist(state) {
+			state.userlistOpen = !state.userlistOpen;
+		},
+		userlistOpen(state, payload) {
+			state.userlistOpen = payload;
+		},
+		versionData(state, payload) {
+			state.versionData = payload;
+		},
+		versionStatus(state, payload) {
+			state.versionStatus = payload;
+		},
+		versionDataExpired(state, payload) {
+			state.versionDataExpired = payload;
+		},
+		serverHasSettings(state, value) {
+			state.serverHasSettings = value;
+		},
+	},
+	getters: {
+		currentSession: (state) => state.sessions.find((item) => item.current),
+		otherSessions: (state) => state.sessions.filter((item) => !item.current),
+		findChannelOnCurrentNetwork: (state) => (name) => {
+			name = name.toLowerCase();
+			return state.activeChannel.network.channels.find((c) => c.name.toLowerCase() === name);
+		},
+		findChannel: (state) => (id) => {
+			for (const network of state.networks) {
+				for (const channel of network.channels) {
+					if (channel.id === id) {
+						return {network, channel};
+					}
+				}
+			}
+
+			return null;
+		},
+		findNetwork: (state) => (uuid) => {
+			for (const network of state.networks) {
+				if (network.uuid === uuid) {
+					return network;
+				}
+			}
+
+			return null;
+		},
+		highlightCount(state) {
+			let highlightCount = 0;
+
+			for (const network of state.networks) {
+				for (const channel of network.channels) {
+					highlightCount += channel.highlight;
+				}
+			}
+
+			return highlightCount;
+		},
+		title(state, getters) {
+			const alertEventCount = getters.highlightCount ? `(${getters.highlightCount}) ` : "";
+
+			const channelname = state.activeChannel ? `${state.activeChannel.channel.name} — ` : "";
+
+			return alertEventCount + channelname + appName;
+		},
+		initChannel: () => (channel) => {
+			// TODO: This should be a mutation
+			channel.pendingMessage = "";
+			channel.inputHistoryPosition = 0;
+			channel.inputHistory = [""];
+			channel.historyLoading = false;
+			channel.scrolledToBottom = true;
+			channel.editTopic = false;
+
+			channel.moreHistoryAvailable = channel.totalMessages > channel.messages.length;
+			delete channel.totalMessages;
+
+			if (channel.type === "channel") {
+				channel.usersOutdated = true;
+			}
+
+			return channel;
+		},
+	},
+});
+
+// Settings module is registered dynamically because it benefits
+// from a direct reference to the store
+store.registerModule("settings", createSettingsStore(store));
+
+export default store;
diff --git a/client/js/upload.js b/client/js/upload.js
index 9633db9d..85f7da3c 100644
--- a/client/js/upload.js
+++ b/client/js/upload.js
@@ -1,12 +1,12 @@
 "use strict";
 
-const socket = require("./socket");
-const updateCursor = require("undate").update;
+import {update as updateCursor} from "undate";
+
+import socket from "./socket";
+import store from "./store";
 
 class Uploader {
-	init(maxFileSize) {
-		this.maxFileSize = maxFileSize;
-		this.vueApp = require("./vue").vueApp;
+	init() {
 		this.xhr = null;
 		this.fileQueue = [];
 
@@ -89,7 +89,7 @@ class Uploader {
 			return;
 		}
 
-		if (!this.vueApp.isConnected) {
+		if (!store.state.isConnected) {
 			this.handleResponse({
 				error: `You are currently disconnected, unable to initiate upload process.`,
 			});
@@ -98,9 +98,10 @@ class Uploader {
 		}
 
 		const wasQueueEmpty = this.fileQueue.length === 0;
+		const maxFileSize = store.state.serverConfiguration.fileUploadMaxFileSize;
 
 		for (const file of files) {
-			if (this.maxFileSize > 0 && file.size > this.maxFileSize) {
+			if (maxFileSize > 0 && file.size > maxFileSize) {
 				this.handleResponse({
 					error: `File ${file.name} is over the maximum allowed size`,
 				});
@@ -177,9 +178,7 @@ class Uploader {
 		this.setProgress(0);
 
 		if (response.error) {
-			// require here due to circular dependency
-			const {vueApp} = require("./vue");
-			vueApp.currentUserVisibleError = response.error;
+			store.commit("currentUserVisibleError", response.error);
 			return;
 		}
 
@@ -221,7 +220,7 @@ class Uploader {
 
 const instance = new Uploader();
 
-module.exports = {
+export default {
 	abort: () => instance.abort(),
 	initialize: () => instance.init(),
 	mounted: () => instance.mounted(),
diff --git a/client/js/utils.js b/client/js/utils.js
deleted file mode 100644
index 2ad4f2b1..00000000
--- a/client/js/utils.js
+++ /dev/null
@@ -1,180 +0,0 @@
-"use strict";
-
-const $ = require("jquery");
-const escape = require("css.escape");
-const viewport = $("#viewport");
-const {vueApp} = require("./vue");
-
-var serverHash = -1; // eslint-disable-line no-var
-
-module.exports = {
-	// Same value as media query in CSS that forces sidebars to become overlays
-	mobileViewportPixels: 768,
-	findCurrentNetworkChan,
-	serverHash,
-	confirmExit,
-	scrollIntoViewNicely,
-	hasRoleInChannel,
-	move,
-	closeChan,
-	synchronizeNotifiedState,
-	togglePasswordField,
-	requestIdleCallback,
-};
-
-function findCurrentNetworkChan(name) {
-	name = name.toLowerCase();
-
-	return vueApp.activeChannel.network.channels.find((c) => c.name.toLowerCase() === name);
-}
-
-// Given a channel element will determine if the lounge user or a given nick is one of the supplied roles.
-function hasRoleInChannel(channel, roles, nick) {
-	if (!channel || !roles) {
-		return false;
-	}
-
-	const channelID = channel.attr("data-id");
-	const network = $("#sidebar .network").has(`.chan[data-id="${channelID}"]`);
-	const target = nick || network.attr("data-nick");
-	const user = channel.find(`.names .user[data-name="${escape(target)}"]`).first();
-	return user.parent().is("." + roles.join(", ."));
-}
-
-// Reusable scrollIntoView parameters for channel list / user list
-function scrollIntoViewNicely(el) {
-	// Ideally this would use behavior: "smooth", but that does not consistently work in e.g. Chrome
-	// https://github.com/iamdustan/smoothscroll/issues/28#issuecomment-364061459
-	el.scrollIntoView({block: "center", inline: "nearest"});
-}
-
-const favicon = $("#favicon");
-
-function synchronizeNotifiedState() {
-	updateTitle();
-
-	let hasAnyHighlights = false;
-
-	for (const network of vueApp.networks) {
-		for (const chan of network.channels) {
-			if (chan.highlight > 0) {
-				hasAnyHighlights = true;
-				break;
-			}
-		}
-	}
-
-	toggleNotificationMarkers(hasAnyHighlights);
-}
-
-function toggleNotificationMarkers(newState) {
-	// Toggles the favicon to red when there are unread notifications
-	if (vueApp.isNotified !== newState) {
-		vueApp.isNotified = newState;
-
-		const old = favicon.prop("href");
-		favicon.prop("href", favicon.data("other"));
-		favicon.data("other", old);
-	}
-
-	// Toggles a dot on the menu icon when there are unread notifications
-	viewport.toggleClass("notified", newState);
-}
-
-function updateTitle() {
-	let title = vueApp.appName;
-
-	if (vueApp.activeChannel) {
-		title = `${vueApp.activeChannel.channel.name} — ${title}`;
-	}
-
-	// add highlight count to title
-	let alertEventCount = 0;
-
-	for (const network of vueApp.networks) {
-		for (const channel of network.channels) {
-			alertEventCount += channel.highlight;
-		}
-	}
-
-	if (alertEventCount > 0) {
-		title = `(${alertEventCount}) ${title}`;
-	}
-
-	document.title = title;
-}
-
-function togglePasswordField(elem) {
-	$(elem).on("click", function() {
-		const $this = $(this);
-		const input = $this.closest("div").find("input");
-
-		input.attr("type", input.attr("type") === "password" ? "text" : "password");
-
-		swapLabel($this);
-		swapLabel($this.find("span"));
-		$this.toggleClass("visible");
-	});
-}
-
-// Given a element, swap its aria-label with the content of `data-alt-label`
-function swapLabel(element) {
-	const altText = element.data("alt-label");
-	element.data("alt-label", element.attr("aria-label")).attr("aria-label", altText);
-}
-
-function confirmExit() {
-	if ($(document.body).hasClass("public")) {
-		window.onbeforeunload = function() {
-			return "Are you sure you want to navigate away from this page?";
-		};
-	}
-}
-
-function move(array, old_index, new_index) {
-	if (new_index >= array.length) {
-		let k = new_index - array.length;
-
-		while (k-- + 1) {
-			this.push(undefined);
-		}
-	}
-
-	array.splice(new_index, 0, array.splice(old_index, 1)[0]);
-	return array;
-}
-
-function closeChan(chan) {
-	const socket = require("./socket");
-	let cmd = "/close";
-
-	if (chan.hasClass("lobby")) {
-		cmd = "/quit";
-		const server = chan.find(".name").html();
-
-		// eslint-disable-next-line no-alert
-		if (!confirm(`Are you sure you want to remove ${server}?`)) {
-			return false;
-		}
-	}
-
-	socket.emit("input", {
-		target: Number(chan.attr("data-id")),
-		text: cmd,
-	});
-	chan.css({
-		transition: "none",
-		opacity: 0.4,
-	});
-	return false;
-}
-
-function requestIdleCallback(callback, timeout) {
-	if (window.requestIdleCallback) {
-		// During an idle period the user agent will run idle callbacks in FIFO order
-		// until either the idle period ends or there are no more idle callbacks eligible to be run.
-		window.requestIdleCallback(callback, {timeout});
-	} else {
-		callback();
-	}
-}
diff --git a/client/js/vue.js b/client/js/vue.js
index 2477e80f..7f024ec7 100644
--- a/client/js/vue.js
+++ b/client/js/vue.js
@@ -1,93 +1,105 @@
 "use strict";
 
-const Vue = require("vue").default;
-const App = require("../components/App.vue").default;
-const roundBadgeNumber = require("./libs/handlebars/roundBadgeNumber");
-const localetime = require("./libs/handlebars/localetime");
-const friendlysize = require("./libs/handlebars/friendlysize");
-const colorClass = require("./libs/handlebars/colorClass");
+import Vue from "vue";
+import store from "./store";
+import App from "../components/App.vue";
+import localetime from "./helpers/localetime";
+import storage from "./localStorage";
+import {router, navigate} from "./router";
+import constants from "./constants";
+import socket from "./socket";
 
 Vue.filter("localetime", localetime);
-Vue.filter("friendlysize", friendlysize);
-Vue.filter("colorClass", colorClass);
-Vue.filter("roundBadgeNumber", roundBadgeNumber);
+
+import "./socket-events";
+import "./webpush";
+import "./keybinds";
+
+const favicon = document.getElementById("favicon");
+const faviconNormal = favicon.getAttribute("href");
+const faviconAlerted = favicon.dataset.other;
 
 const vueApp = new Vue({
 	el: "#viewport",
-	data: {
-		activeChannel: null,
-		appName: document.title,
-		currentUserVisibleError: null,
-		initialized: false,
-		isAutoCompleting: false,
-		isConnected: false,
-		isFileUploadEnabled: false,
-		isNotified: false,
-		networks: [],
-		settings: {
-			syncSettings: false,
-			advanced: false,
-			autocomplete: true,
-			nickPostfix: "",
-			coloredNicks: true,
-			desktopNotifications: false,
-			highlights: "",
-			links: true,
-			motd: true,
-			notification: true,
-			notifyAllMessages: false,
-			showSeconds: false,
-			statusMessages: "condensed",
-			theme: document.getElementById("theme").dataset.serverTheme,
-			media: true,
-			userStyles: "",
-		},
-	},
+	router,
 	mounted() {
-		Vue.nextTick(() => window.vueMounted());
+		socket.open();
+	},
+	methods: {
+		switchToChannel(channel) {
+			navigate("RoutedChat", {id: channel.id});
+		},
+		closeChannel(channel) {
+			if (channel.type === "lobby") {
+				const el = document.querySelector(
+					`#sidebar .chan[aria-controls="#chan-${channel.id}"]`
+				);
+				const rect = el.getBoundingClientRect();
+				const event = new MouseEvent("click", {
+					view: window,
+					clientX: rect.x + 10,
+					clientY: rect.y,
+				});
+
+				this.$root.$emit("contextmenu:removenetwork", {
+					event: event,
+					lobby: channel,
+				});
+
+				return;
+			}
+
+			channel.closed = true;
+
+			socket.emit("input", {
+				target: Number(channel.id),
+				text: "/close",
+			});
+		},
 	},
 	render(createElement) {
 		return createElement(App, {
+			ref: "app",
 			props: this,
 		});
 	},
+	store,
 });
 
-Vue.config.errorHandler = function(e) {
-	console.error(e); // eslint-disable-line
-	vueApp.currentUserVisibleError = `Vue error: ${e.message}. Please check devtools and report it in #thelounge`;
-};
-
-function findChannel(id) {
-	for (const network of vueApp.networks) {
-		for (const channel of network.channels) {
-			if (channel.id === id) {
-				return {network, channel};
-			}
+store.watch(
+	(state) => state.sidebarOpen,
+	(sidebarOpen) => {
+		if (window.outerWidth > constants.mobileViewportPixels) {
+			storage.set("thelounge.state.sidebar", sidebarOpen);
+			vueApp.$emit("resize");
 		}
 	}
+);
 
-	return null;
-}
-
-function initChannel(channel) {
-	channel.pendingMessage = "";
-	channel.inputHistoryPosition = 0;
-	channel.inputHistory = [""];
-	channel.historyLoading = false;
-	channel.scrolledToBottom = true;
-	channel.editTopic = false;
-
-	channel.moreHistoryAvailable = channel.totalMessages > channel.messages.length;
-	delete channel.totalMessages;
-
-	if (channel.type === "channel") {
-		channel.usersOutdated = true;
+store.watch(
+	(state) => state.userlistOpen,
+	(userlistOpen) => {
+		storage.set("thelounge.state.userlist", userlistOpen);
+		vueApp.$emit("resize");
 	}
-}
+);
 
-module.exports = {
-	vueApp,
-	findChannel,
-	initChannel,
+store.watch(
+	(_, getters) => getters.title,
+	(title) => {
+		document.title = title;
+	}
+);
+
+// Toggles the favicon to red when there are unread notifications
+store.watch(
+	(_, getters) => getters.highlightCount,
+	(highlightCount) => {
+		favicon.setAttribute("href", highlightCount > 0 ? faviconAlerted : faviconNormal);
+	}
+);
+
+Vue.config.errorHandler = function(e) {
+	store.commit("currentUserVisibleError", `Vue error: ${e.message}`);
+	console.error(e); // eslint-disable-line
 };
diff --git a/client/js/webpush.js b/client/js/webpush.js
index 24272e7f..4161dfeb 100644
--- a/client/js/webpush.js
+++ b/client/js/webpush.js
@@ -1,161 +1,100 @@
 "use strict";
 
-const $ = require("jquery");
-const storage = require("./localStorage");
-const socket = require("./socket");
+import socket from "./socket";
+import store from "./store";
+import {switchToChannel} from "./router";
 
-let pushNotificationsButton;
-let clientSubscribed = null;
-let applicationServerKey;
+export default {togglePushSubscription};
 
 if ("serviceWorker" in navigator) {
 	navigator.serviceWorker.addEventListener("message", (event) => {
 		if (event.data && event.data.type === "open") {
-			$("#sidebar")
-				.find(`.chan[data-target="#${event.data.channel}"]`)
-				.trigger("click");
+			const id = parseInt(event.data.channel.substr(5), 10); // remove "chan-" prefix
+
+			const channelTarget = store.getters.findChannel(id);
+
+			if (channelTarget) {
+				switchToChannel(channelTarget.channel);
+			}
 		}
 	});
 }
 
-module.exports.hasServiceWorker = false;
-
-module.exports.configurePushNotifications = (subscribedOnServer, key) => {
-	applicationServerKey = key;
-
-	// If client has push registration but the server knows nothing about it,
-	// this subscription is broken and client has to register again
-	if (clientSubscribed === true && subscribedOnServer === false) {
-		pushNotificationsButton.prop("disabled", true);
-
-		navigator.serviceWorker.ready
-			.then((registration) => registration.pushManager.getSubscription())
-			.then((subscription) => subscription && subscription.unsubscribe())
-			.then((successful) => {
-				if (successful) {
-					alternatePushButton().prop("disabled", false);
-				}
-			});
-	}
-};
-
-module.exports.initialize = () => {
-	pushNotificationsButton = $("#pushNotifications");
-
+socket.once("push:issubscribed", function(hasSubscriptionOnServer) {
 	if (!isAllowedServiceWorkersHost()) {
+		store.commit("pushNotificationState", "nohttps");
 		return;
 	}
 
-	$("#pushNotificationsHttps").hide();
-
-	if ("serviceWorker" in navigator) {
-		navigator.serviceWorker
-			.register("service-worker.js")
-			.then((registration) => {
-				module.exports.hasServiceWorker = true;
-
-				if (!registration.pushManager) {
-					return;
-				}
-
-				return registration.pushManager.getSubscription().then((subscription) => {
-					$("#pushNotificationsUnsupported").hide();
-
-					pushNotificationsButton.prop("disabled", false).on("click", onPushButton);
-
-					clientSubscribed = !!subscription;
-
-					if (clientSubscribed) {
-						alternatePushButton();
-					}
-				});
-			})
-			.catch((err) => {
-				$("#pushNotificationsUnsupported span").text(err);
-			});
+	if (!("serviceWorker" in navigator)) {
+		return;
 	}
-};
 
-function onPushButton() {
-	pushNotificationsButton.prop("disabled", true);
+	navigator.serviceWorker
+		.register("service-worker.js")
+		.then((registration) => {
+			store.commit("hasServiceWorker");
+
+			if (!registration.pushManager) {
+				return;
+			}
+
+			return registration.pushManager.getSubscription().then((subscription) => {
+				// If client has push registration but the server knows nothing about it,
+				// this subscription is broken and client has to register again
+				if (subscription && hasSubscriptionOnServer === false) {
+					subscription.unsubscribe().then((successful) => {
+						store.commit(
+							"pushNotificationState",
+							successful ? "supported" : "unsupported"
+						);
+					});
+				} else {
+					store.commit(
+						"pushNotificationState",
+						subscription ? "subscribed" : "supported"
+					);
+				}
+			});
+		})
+		.catch((err) => {
+			store.commit("pushNotificationState", "unsupported");
+			console.error(err); // eslint-disable-line no-console
+		});
+});
+
+function togglePushSubscription() {
+	store.commit("pushNotificationState", "loading");
 
 	navigator.serviceWorker.ready
 		.then((registration) =>
-			registration.pushManager
-				.getSubscription()
-				.then((existingSubscription) => {
-					if (existingSubscription) {
-						socket.emit("push:unregister");
+			registration.pushManager.getSubscription().then((existingSubscription) => {
+				if (existingSubscription) {
+					socket.emit("push:unregister");
 
-						return existingSubscription.unsubscribe();
-					}
+					return existingSubscription.unsubscribe().then((successful) => {
+						store.commit(
+							"pushNotificationState",
+							successful ? "supported" : "unsupported"
+						);
+					});
+				}
 
-					return registration.pushManager
-						.subscribe({
-							applicationServerKey: urlBase64ToUint8Array(applicationServerKey),
-							userVisibleOnly: true,
-						})
-						.then((subscription) => {
-							const rawKey = subscription.getKey ? subscription.getKey("p256dh") : "";
-							const key = rawKey
-								? window.btoa(String.fromCharCode(...new Uint8Array(rawKey)))
-								: "";
-							const rawAuthSecret = subscription.getKey
-								? subscription.getKey("auth")
-								: "";
-							const authSecret = rawAuthSecret
-								? window.btoa(String.fromCharCode(...new Uint8Array(rawAuthSecret)))
-								: "";
-
-							socket.emit("push:register", {
-								token: storage.get("token"),
-								endpoint: subscription.endpoint,
-								keys: {
-									p256dh: key,
-									auth: authSecret,
-								},
-							});
-
-							return true;
-						});
-				})
-				.then((successful) => {
-					if (successful) {
-						alternatePushButton().prop("disabled", false);
-					}
-				})
+				return registration.pushManager
+					.subscribe({
+						applicationServerKey: store.state.serverConfiguration.applicationServerKey,
+						userVisibleOnly: true,
+					})
+					.then((subscription) => {
+						socket.emit("push:register", subscription.toJSON());
+						store.commit("pushNotificationState", "subscribed");
+					});
+			})
 		)
 		.catch((err) => {
-			$("#pushNotificationsUnsupported")
-				.find("span")
-				.text(`An error has occurred: ${err}`)
-				.end()
-				.show();
+			store.commit("pushNotificationState", "unsupported");
+			console.error(err); // eslint-disable-line no-console
 		});
-
-	return false;
-}
-
-function alternatePushButton() {
-	const text = pushNotificationsButton.text();
-
-	return pushNotificationsButton
-		.text(pushNotificationsButton.data("text-alternate"))
-		.data("text-alternate", text);
-}
-
-function urlBase64ToUint8Array(base64String) {
-	const padding = "=".repeat((4 - (base64String.length % 4)) % 4);
-	const base64 = (base64String + padding).replace(/-/g, "+").replace(/_/g, "/");
-
-	const rawData = window.atob(base64);
-	const outputArray = new Uint8Array(rawData.length);
-
-	for (let i = 0; i < rawData.length; ++i) {
-		outputArray[i] = rawData.charCodeAt(i);
-	}
-
-	return outputArray;
 }
 
 function isAllowedServiceWorkersHost() {
diff --git a/client/service-worker.js b/client/service-worker.js
index af8021fa..153a2659 100644
--- a/client/service-worker.js
+++ b/client/service-worker.js
@@ -156,7 +156,7 @@ self.addEventListener("notificationclick", function(event) {
 			.then((clientList) => {
 				if (clientList.length === 0) {
 					if (clients.openWindow) {
-						return clients.openWindow(`.#${event.notification.tag}`);
+						return clients.openWindow(`.#/${event.notification.tag}`);
 					}
 
 					return;
diff --git a/client/themes/default.css b/client/themes/default.css
index cc2497ba..d8155503 100644
--- a/client/themes/default.css
+++ b/client/themes/default.css
@@ -17,10 +17,6 @@
 		padding: 0;
 	}
 
-	#viewport #sign-in {
-		margin-left: 0;
-	}
-
 	#footer .icon {
 		border-radius: 0;
 	}
diff --git a/client/views/contextmenu_divider.tpl b/client/views/contextmenu_divider.tpl
deleted file mode 100644
index c341b5c6..00000000
--- a/client/views/contextmenu_divider.tpl
+++ /dev/null
@@ -1 +0,0 @@
-<li class="context-menu-divider" aria-hidden="true"></li>
diff --git a/client/views/contextmenu_item.tpl b/client/views/contextmenu_item.tpl
deleted file mode 100644
index fbbb3f2b..00000000
--- a/client/views/contextmenu_item.tpl
+++ /dev/null
@@ -1,3 +0,0 @@
-<li class="context-menu-item context-menu-{{class}}" data-action="{{action}}"{{#if data}} data-data="{{data}}"{{/if}} tabindex="0" role="menuitem">
-	{{text}}
-</li>
diff --git a/client/views/image_viewer.tpl b/client/views/image_viewer.tpl
deleted file mode 100644
index 71306050..00000000
--- a/client/views/image_viewer.tpl
+++ /dev/null
@@ -1,21 +0,0 @@
-<button class="close-btn" aria-label="Close"></button>
-
-{{#if hasPreviousImage}}
-  <button class="previous-image-btn" aria-label="Previous image"></button>
-{{/if}}
-
-{{#if hasNextImage}}
-  <button class="next-image-btn" aria-label="Next image"></button>
-{{/if}}
-
-<a class="image-link" href="{{link}}" target="_blank">
-  <img src="{{image}}" decoding="async" alt="">
-</a>
-
-<a class="btn open-btn" href="{{link}}" target="_blank">
-  {{#equal type "image"}}
-    Open image
-  {{else}}
-    Visit page
-  {{/equal}}
-</a>
diff --git a/client/views/index.js b/client/views/index.js
deleted file mode 100644
index 170b3e51..00000000
--- a/client/views/index.js
+++ /dev/null
@@ -1,30 +0,0 @@
-"use strict";
-
-// This creates a version of `require()` in the context of the current
-// directory, so we iterate over its content, which is a map statically built by
-// Webpack.
-// Second argument says it's recursive, third makes sure we only load templates.
-const requireViews = require.context(".", true, /\.tpl$/);
-
-module.exports = requireViews.keys().reduce((acc, path) => {
-	// We are going to create nested properties on the accumulator object.
-	let tmp = acc;
-
-	// Split path by folders, and create a new property if necessary/
-	// First 2 characters are "./"/
-	// Last element in the array ends with `.tpl` and needs to be `require`d.
-	path.substr(2)
-		.split("/")
-		.forEach((key) => {
-			if (key.endsWith(".tpl")) {
-				//
-				tmp[key.substr(0, key.length - 4)] = requireViews(path);
-			} else {
-				tmp[key] = tmp[key] || {};
-			}
-
-			tmp = tmp[key];
-		});
-
-	return acc;
-}, {});
diff --git a/client/views/reveal-password.tpl b/client/views/reveal-password.tpl
deleted file mode 100644
index f6cc9812..00000000
--- a/client/views/reveal-password.tpl
+++ /dev/null
@@ -1,3 +0,0 @@
-<span class="reveal-password tooltipped tooltipped-n tooltipped-no-delay" aria-label="Show password" data-alt-label="Hide password">
-  <span type="button" aria-label="Show password" data-alt-label="Hide password"></span>
-</span>
diff --git a/client/views/session.tpl b/client/views/session.tpl
deleted file mode 100644
index 7951bfc4..00000000
--- a/client/views/session.tpl
+++ /dev/null
@@ -1,25 +0,0 @@
-<p>
-	<button
-		class="btn pull-right remove-session"
-		{{#unless current}}data-token="{{token}}"{{/unless}}
-	>
-		{{#if current}}
-			Sign out
-		{{else}}
-			Revoke
-		{{/if}}
-	</button>
-
-	<strong>{{agent}}</strong>
-
-	<a href="https://ipinfo.io/{{ip}}" target="_blank" rel="noopener">{{ip}}</a>
-
-{{#unless current}}
-	<br>
-	{{#if active}}
-		<em>Currently active</em>
-	{{else}}
-		Last used on <time>{{localetime lastUse}}</time>
-	{{/if}}
-{{/unless}}
-</p>
diff --git a/client/views/version_checker.tpl b/client/views/version_checker.tpl
deleted file mode 100644
index fc1e8eee..00000000
--- a/client/views/version_checker.tpl
+++ /dev/null
@@ -1,33 +0,0 @@
-{{#equal status "loading"}}
-	<p>
-		Checking for updates...
-	</p>
-{{else equal status "new-version"}}
-	<p>
-		The Lounge <b>{{latest.version}}</b>{{#if latest.prerelease}} (pre-release){{/if}}
-		is now available.
-		<br>
-
-		<a href="{{latest.url}}" target="_blank" rel="noopener">
-			Read more on GitHub
-		</a>
-	</p>
-{{else equal status "new-packages"}}
-	<p>
-		The Lounge is up to date, but there are out of date packages
-		
-		Run <code>thelounge upgrade</code> on the server to upgrade packages.
-	</p>
-{{else equal status "up-to-date"}}
-	<p>
-		The Lounge is up to date!
-	</p>
-
-	<button id="check-now" class="btn btn-small">Check now</button>
-{{else equal status "error"}}
-	<p>
-		Information about latest releases could not be retrieved.
-	</p>
-
-	<button id="check-now" class="btn btn-small">Try again</button>
-{{/equal}}
diff --git a/client/views/windows/changelog.tpl b/client/views/windows/changelog.tpl
deleted file mode 100644
index 5d3326f1..00000000
--- a/client/views/windows/changelog.tpl
+++ /dev/null
@@ -1,20 +0,0 @@
-<div class="header">
-	<button class="lt" aria-label="Toggle channel list"></button>
-</div>
-<div class="container">
-	<a href="#" id="back-to-help" data-target="#help">« Help</a>
-
-	{{#if version}}
-		<h1 class="title">Release notes for {{version}}</h1>
-
-		{{#if changelog}}
-			<h3>Introduction</h3>
-			<div class="changelog-text">{{{changelog}}}</div>
-		{{else}}
-			<p>Unable to retrieve releases from GitHub.</p>
-			<p><a href="https://github.com/thelounge/thelounge/releases/tag/v{{version}}" target="_blank" rel="noopener">View release notes for this version on GitHub</a></p>
-		{{/if}}
-	{{else}}
-		<p>Loading changelog…</p>
-	{{/if}}
-</div>
diff --git a/client/views/windows/connect.tpl b/client/views/windows/connect.tpl
deleted file mode 100644
index 628c1764..00000000
--- a/client/views/windows/connect.tpl
+++ /dev/null
@@ -1,114 +0,0 @@
-<div class="header">
-	<button class="lt" aria-label="Toggle channel list"></button>
-</div>
-<form class="container" method="post" action="" data-event="{{#if defaults.uuid}}network:edit{{else}}network:new{{/if}}">
-	<div class="row">
-		<div class="col-sm-12">
-			<h1 class="title">
-				{{#if defaults.uuid}}
-					<input type="hidden" name="uuid" value="{{defaults.uuid}}">
-
-					Edit {{defaults.name}}
-				{{else}}
-					{{#if public}}The Lounge - {{/if}}
-					Connect
-					{{#unless displayNetwork}}
-						{{#if lockNetwork}}
-						to {{defaults.name}}
-						{{/if}}
-					{{/unless}}
-				{{/if}}
-			</h1>
-		</div>
-	{{#if displayNetwork}}
-		<div>
-			<div class="col-sm-12">
-				<h2>Network settings</h2>
-			</div>
-			<div class="col-sm-3">
-				<label for="connect:name">Name</label>
-			</div>
-			<div class="col-sm-9">
-				<input class="input" id="connect:name" name="name" value="{{defaults.name}}" maxlength="100">
-			</div>
-			<div class="col-sm-3">
-				<label for="connect:host">Server</label>
-			</div>
-			<div class="col-sm-6 col-xs-8">
-				<input class="input" id="connect:host" name="host" value="{{defaults.host}}" aria-label="Server address" maxlength="255" required {{#if lockNetwork}}disabled{{/if}}>
-			</div>
-			<div class="col-sm-3 col-xs-4">
-				<div class="port">
-					<input class="input" type="number" min="1" max="65535" name="port" value="{{defaults.port}}" aria-label="Server port" {{#if lockNetwork}}disabled{{/if}}>
-				</div>
-			</div>
-			<div class="clearfix"></div>
-			<div class="col-sm-9 col-sm-offset-3">
-				<label class="tls">
-					<input type="checkbox" name="tls" {{#if defaults.tls}}checked{{/if}} {{#if lockNetwork}}disabled{{/if}}>
-					Use secure connection (TLS)
-				</label>
-			</div>
-			<div class="col-sm-9 col-sm-offset-3">
-				<label class="tls">
-					<input type="checkbox" name="rejectUnauthorized" {{#if defaults.rejectUnauthorized}}checked{{/if}} {{#if lockNetwork}}disabled{{/if}}>
-					Only allow trusted certificates
-				</label>
-			</div>
-			<div class="clearfix"></div>
-		</div>
-	{{/if}}
-		<div class="col-sm-12">
-			<h2>User preferences</h2>
-		</div>
-		<div class="col-sm-3">
-			<label for="connect:nick">Nick</label>
-		</div>
-		<div class="col-sm-9">
-			<input class="input nick" id="connect:nick" name="nick" value="{{defaults.nick}}" maxlength="100" required>
-		</div>
-	{{#unless useHexIp}}
-		<div class="col-sm-3">
-			<label for="connect:username">Username</label>
-		</div>
-		<div class="col-sm-9">
-			<input class="input username" id="connect:username" name="username" value="{{defaults.username}}" maxlength="512">
-		</div>
-	{{/unless}}
-		<div class="col-sm-3">
-			<label for="connect:password">Password</label>
-		</div>
-		<div class="col-sm-9 password-container">
-			<input class="input" id="connect:password" type="password" name="password" value="{{defaults.password}}" maxlength="512">
-			{{> ../reveal-password}}
-		</div>
-		<div class="col-sm-3">
-			<label for="connect:realname">Real name</label>
-		</div>
-		<div class="col-sm-9">
-			<input class="input" id="connect:realname" name="realname" value="{{defaults.realname}}" maxlength="512">
-		</div>
-	{{#if defaults.uuid}}
-		<div class="col-sm-3">
-			<label for="connect:commands">Commands</label>
-		</div>
-		<div class="col-sm-9">
-			<textarea class="input" id="connect:commands" name="commands" placeholder="One raw command per line, each command will be executed on new connection">{{~#each defaults.commands~}}{{~this}}
-{{/each~}}</textarea>
-		</div>
-		<div class="col-sm-9 col-sm-offset-3">
-			<button type="submit" class="btn">Save</button>
-		</div>
-	{{else}}
-		<div class="col-sm-3">
-			<label for="connect:channels">Channels</label>
-		</div>
-		<div class="col-sm-9">
-			<input class="input" id="connect:channels" name="join" value="{{defaults.join}}">
-		</div>
-		<div class="col-sm-9 col-sm-offset-3">
-			<button type="submit" class="btn">Connect</button>
-		</div>
-	{{/if}}
-	</div>
-</form>
diff --git a/client/views/windows/help.tpl b/client/views/windows/help.tpl
deleted file mode 100644
index aa16dca9..00000000
--- a/client/views/windows/help.tpl
+++ /dev/null
@@ -1,608 +0,0 @@
-<div class="header">
-	<button class="lt" aria-label="Toggle channel list"></button>
-</div>
-<div class="container">
-	<h1 class="title">Help</h1>
-
-	<h2>
-		<small class="pull-right">
-			v{{version}}
-			(<a href="#" id="view-changelog" data-target="#changelog">release notes</a>)
-		</small>
-		About The Lounge
-	</h2>
-
-	<div class="about">
-		<div id="version-checker"></div>
-
-		{{#if gitCommit}}
-			<p>
-				The Lounge is running from source
-				(<a href="https://github.com/thelounge/thelounge/tree/{{gitCommit}}" target="_blank" rel="noopener">commit <code>{{gitCommit}}</code></a>).
-			</p>
-
-			<ul>
-				<li>
-					Compare
-					<a href="https://github.com/thelounge/thelounge/compare/{{gitCommit}}...master" target="_blank" rel="noopener">between <code>{{gitCommit}}</code> and <code>master</code></a>
-					to see what you are missing
-				</li>
-				<li>
-					Compare
-					<a href="https://github.com/thelounge/thelounge/compare/{{version}}...{{gitCommit}}" target="_blank" rel="noopener">between <code>{{version}}</code> and <code>{{gitCommit}}</code></a>
-					to see your local changes</li>
-			</ul>
-		{{/if}}
-
-		<p>
-			<a href="https://thelounge.chat/" target="_blank" rel="noopener" class="website-link">Website</a>
-		</p>
-		<p>
-			<a href="https://thelounge.chat/docs/" target="_blank" rel="noopener" class="documentation-link">Documentation</a>
-		</p>
-		<p>
-			<a href="https://github.com/thelounge/thelounge/issues/new" target="_blank" rel="noopener" class="report-issue-link">Report an issue…</a>
-		</p>
-	</div>
-
-	<h2>Keyboard Shortcuts</h2>
-
-	<div class="help-item">
-		<div class="subject">
-			<span class="key-all"><kbd>Alt</kbd> <kbd>Shift</kbd> <kbd>↓</kbd></span>
-			<span class="key-apple"><kbd>⌥</kbd> <kbd>⇧</kbd> <kbd>↓</kbd></span>
-		</div>
-		<div class="description">
-			<p>Switch to the next lobby in the channel list.</p>
-		</div>
-	</div>
-
-	<div class="help-item">
-		<div class="subject">
-			<span class="key-all"><kbd>Alt</kbd> <kbd>Shift</kbd> <kbd>↑</kbd></span>
-			<span class="key-apple"><kbd>⌥</kbd> <kbd>⇧</kbd> <kbd>↑</kbd></span>
-		</div>
-		<div class="description">
-			<p>Switch to the previous lobby in the channel list.</p>
-		</div>
-	</div>
-
-	<div class="help-item">
-		<div class="subject">
-			<span class="key-all"><kbd>Alt</kbd> <kbd>↓</kbd></span>
-			<span class="key-apple"><kbd>⌥</kbd> <kbd>↓</kbd></span>
-		</div>
-		<div class="description">
-			<p>Switch to the next window in the channel list.</p>
-		</div>
-	</div>
-
-	<div class="help-item">
-		<div class="subject">
-			<span class="key-all"><kbd>Alt</kbd> <kbd>↑</kbd></span>
-			<span class="key-apple"><kbd>⌥</kbd> <kbd>↑</kbd></span>
-		</div>
-		<div class="description">
-			<p>Switch to the previous window in the channel list.</p>
-		</div>
-	</div>
-
-	<div class="help-item">
-		<div class="subject">
-			<span class="key-all"><kbd>Alt</kbd> <kbd>A</kbd></span>
-			<span class="key-apple"><kbd>⌥</kbd> <kbd>A</kbd></span>
-		</div>
-		<div class="description">
-			<p>Switch to the first window with unread messages.</p>
-		</div>
-	</div>
-
-	<div class="help-item">
-		<div class="subject">
-			<span class="key-all"><kbd>Ctrl</kbd> <kbd>K</kbd></span>
-			<span class="key-apple"><kbd>⌘</kbd> <kbd>K</kbd></span>
-		</div>
-		<div class="description">
-			<p>
-				Mark any text typed after this shortcut to be colored. After
-				hitting this shortcut, enter an integer in the range
-				<code>0—15</code> to select the desired color, or use the
-				autocompletion menu to choose a color name (see below).
-			</p>
-			<p>
-				Background color can be specified by putting a comma and
-				another integer in the range <code>0—15</code> after the
-				foreground color number (autocompletion works too).
-			</p>
-			<p>
-				A color reference can be found
-				<a href="https://modern.ircdocs.horse/formatting.html#colors" target="_blank" rel="noopener">here</a>.
-			</p>
-		</div>
-	</div>
-
-	<div class="help-item">
-		<div class="subject">
-			<span class="key-all"><kbd>Ctrl</kbd> <kbd>B</kbd></span>
-			<span class="key-apple"><kbd>⌘</kbd> <kbd>B</kbd></span>
-		</div>
-		<div class="description">
-			<p>Mark all text typed after this shortcut as <span class="irc-bold">bold</span>.</p>
-		</div>
-	</div>
-
-	<div class="help-item">
-		<div class="subject">
-			<span class="key-all"><kbd>Ctrl</kbd> <kbd>U</kbd></span>
-			<span class="key-apple"><kbd>⌘</kbd> <kbd>U</kbd></span>
-		</div>
-		<div class="description">
-			<p>Mark all text typed after this shortcut as <span class="irc-underline">underlined</span>.</p>
-		</div>
-	</div>
-
-	<div class="help-item">
-		<div class="subject">
-			<span class="key-all"><kbd>Ctrl</kbd> <kbd>I</kbd></span>
-			<span class="key-apple"><kbd>⌘</kbd> <kbd>I</kbd></span>
-		</div>
-		<div class="description">
-			<p>Mark all text typed after this shortcut as <span class="irc-italic">italics</span>.</p>
-		</div>
-	</div>
-
-	<div class="help-item">
-		<div class="subject">
-			<span class="key-all"><kbd>Ctrl</kbd> <kbd>S</kbd></span>
-			<span class="key-apple"><kbd>⌘</kbd> <kbd>S</kbd></span>
-		</div>
-		<div class="description">
-			<p>Mark all text typed after this shortcut as <span class="irc-strikethrough">struck through</span>.</p>
-		</div>
-	</div>
-
-	<div class="help-item">
-		<div class="subject">
-			<span class="key-all"><kbd>Ctrl</kbd> <kbd>M</kbd></span>
-			<span class="key-apple"><kbd>⌘</kbd> <kbd>M</kbd></span>
-		</div>
-		<div class="description">
-			<p>Mark all text typed after this shortcut as <span class="irc-monospace">monospaced</span>.</p>
-		</div>
-	</div>
-
-	<div class="help-item">
-		<div class="subject">
-			<span class="key-all"><kbd>Ctrl</kbd> <kbd>O</kbd></span>
-			<span class="key-apple"><kbd>⌘</kbd> <kbd>O</kbd></span>
-		</div>
-		<div class="description">
-			<p>
-				Mark all text typed after this shortcut to be reset to its
-				original formatting.
-			</p>
-		</div>
-	</div>
-
-	<h2>Autocompletion</h2>
-
-	<p>
-		To auto-complete nicknames, channels, commands, and emoji, type one of the characters below to open
-		a suggestion list. Use the <kbd>↑</kbd> and <kbd>↓</kbd> keys to highlight an item, and insert it by
-		pressing <kbd>Tab</kbd> or <kbd>Enter</kbd> (or by clicking the desired item).
-	</p>
-	<p>
-		Autocompletion can be disabled in settings.
-	</p>
-
-	<div class="help-item">
-		<div class="subject">
-			<code>@</code>
-		</div>
-		<div class="description">
-			<p>Nickname</p>
-		</div>
-	</div>
-
-	<div class="help-item">
-		<div class="subject">
-			<code>#</code>
-		</div>
-		<div class="description">
-			<p>Channel</p>
-		</div>
-	</div>
-
-	<div class="help-item">
-		<div class="subject">
-			<code>/</code>
-		</div>
-		<div class="description">
-			<p>Commands (see list of commands below)</p>
-		</div>
-	</div>
-
-	<div class="help-item">
-		<div class="subject">
-			<code>:</code>
-		</div>
-		<div class="description">
-			<p>Emoji (note: requires two search characters, to avoid conflicting with common emoticons like <code>:)</code>)</p>
-		</div>
-	</div>
-
-	<h2>Commands</h2>
-
-	<div class="help-item">
-		<div class="subject">
-			<code>/away [message]</code>
-		</div>
-		<div class="description">
-			<p>Mark yourself as away with an optional message.</p>
-		</div>
-	</div>
-
-	<div class="help-item">
-		<div class="subject">
-			<code>/back</code>
-		</div>
-		<div class="description">
-			<p>Remove your away status (set with <code>/away</code>).</p>
-		</div>
-	</div>
-
-	<div class="help-item">
-		<div class="subject">
-			<code>/ban nick</code>
-		</div>
-		<div class="description">
-			<p>Ban (<code>+b</code>) a user from the current channel.
-			This can be a nickname or a hostmask.</p>
-		</div>
-	</div>
-
-	<div class="help-item">
-		<div class="subject">
-			<code>/banlist</code>
-		</div>
-		<div class="description">
-			<p>Load the banlist for the current channel.</p>
-		</div>
-	</div>
-
-	<div class="help-item">
-		<div class="subject">
-			<code>/collapse</code>
-		</div>
-		<div class="description">
-			<p>
-				Collapse all previews in the current channel (opposite of
-				<code>/expand</code>)
-			</p>
-		</div>
-	</div>
-
-	<div class="help-item">
-		<div class="subject">
-			<code>/connect host [port]</code>
-		</div>
-		<div class="description">
-			<p>
-				Connect to a new IRC network. If <code>port</code> starts with
-				a <code>+</code> sign, the connection will be made secure
-				using TLS.
-			</p>
-			<p>Alias: <code>/server</code></p>
-		</div>
-	</div>
-
-	<div class="help-item">
-		<div class="subject">
-			<code>/ctcp target cmd [args]</code>
-		</div>
-		<div class="description">
-			<p>
-				Send a <abbr title="Client-to-client protocol">CTCP</abbr>
-				request. Read more about this on
-				<a href="https://en.wikipedia.org/wiki/Client-to-client_protocol" target="_blank" rel="noopener">the dedicated Wikipedia article</a>.
-			</p>
-		</div>
-	</div>
-
-	<div class="help-item">
-		<div class="subject">
-			<code>/deop nick [...nick]</code>
-		</div>
-		<div class="description">
-			<p>
-				Remove op (<code>-o</code>) from one or several users in the
-				current channel.
-			</p>
-		</div>
-	</div>
-
-	<div class="help-item">
-		<div class="subject">
-			<code>/devoice nick [...nick]</code>
-		</div>
-		<div class="description">
-			<p>
-				Remove voice (<code>-v</code>) from one or several users in
-				the current channel.
-			</p>
-		</div>
-	</div>
-
-	<div class="help-item">
-		<div class="subject">
-			<code>/disconnect [message]</code>
-		</div>
-		<div class="description">
-			<p>
-				Disconnect from the current network with an
-				optionally-provided message.
-			</p>
-		</div>
-	</div>
-
-	<div class="help-item">
-		<div class="subject">
-			<code>/expand</code>
-		</div>
-		<div class="description">
-			<p>
-				Expand all previews in the current channel (opposite of
-				<code>/collapse</code>)
-			</p>
-		</div>
-	</div>
-
-	<div class="help-item">
-		<div class="subject">
-			<code>/invite nick [channel]</code>
-		</div>
-		<div class="description">
-			<p>
-				Invite a user to the specified channel. If
-				<code>channel</code> is omitted, user will be invited to the
-				current channel.
-			</p>
-		</div>
-	</div>
-
-	<div class="help-item">
-		<div class="subject">
-			<code>/ignore nick</code>
-		</div>
-		<div class="description">
-			<p>
-				Block any messages from the specified user on the current network.
-				This can be a nickname or a hostmask.</p>
-		</div>
-	</div>
-
-	<div class="help-item">
-		<div class="subject">
-			<code>/ignorelist</code>
-		</div>
-		<div class="description">
-			<p>Load the list of ignored users for the current network.</p>
-		</div>
-	</div>
-
-	<div class="help-item">
-		<div class="subject">
-			<code>/join channel</code>
-		</div>
-		<div class="description">
-			<p>Join a channel.</p>
-		</div>
-	</div>
-
-	<div class="help-item">
-		<div class="subject">
-			<code>/kick nick</code>
-		</div>
-		<div class="description">
-			<p>Kick a user from the current channel.</p>
-		</div>
-	</div>
-
-	<div class="help-item">
-		<div class="subject">
-			<code>/list</code>
-		</div>
-		<div class="description">
-			<p>Retrieve a list of available channels on this network.</p>
-		</div>
-	</div>
-
-	<div class="help-item">
-		<div class="subject">
-			<code>/me message</code>
-		</div>
-		<div class="description">
-			<p>
-				Send an action message to the current channel. The Lounge will
-				display it inline, as if the message was posted in the third
-				person.
-			</p>
-		</div>
-	</div>
-
-	<div class="help-item">
-		<div class="subject">
-			<code>/mode flags [args]</code>
-		</div>
-		<div class="description">
-			<p>
-				Set the given flags to the current channel if the active
-				window is a channel, another user if the active window is a
-				private message window, or yourself if the current window is a
-				server window.
-			</p>
-		</div>
-	</div>
-
-	<div class="help-item">
-		<div class="subject">
-			<code>/msg channel message</code>
-		</div>
-		<div class="description">
-			<p>Send a message to the specified channel.</p>
-		</div>
-	</div>
-
-	<div class="help-item">
-		<div class="subject">
-			<code>/nick newnick</code>
-		</div>
-		<div class="description">
-			<p>Change your nickname on the current network.</p>
-		</div>
-	</div>
-
-	<div class="help-item">
-		<div class="subject">
-			<code>/notice channel message</code>
-		</div>
-		<div class="description">
-			<p>Sends a notice message to the specified channel.</p>
-		</div>
-	</div>
-
-	<div class="help-item">
-		<div class="subject">
-			<code>/op nick [...nick]</code>
-		</div>
-		<div class="description">
-			<p>
-				Give op (<code>+o</code>) to one or several users in the
-				current channel.
-			</p>
-		</div>
-	</div>
-
-	<div class="help-item">
-		<div class="subject">
-			<code>/part [channel]</code>
-		</div>
-		<div class="description">
-			<p>
-				Close the specified channel or private message window, or the
-				current channel if <code>channel</code> is omitted.
-			</p>
-			<p>Aliases: <code>/close</code>, <code>/leave</code></p>
-		</div>
-	</div>
-
-	<div class="help-item">
-		<div class="subject">
-			<code>/rejoin</code>
-		</div>
-		<div class="description">
-			<p>
-				Leave and immediately rejoin the current channel. Useful to
-				quickly get op from ChanServ in an empty channel, for example.
-			</p>
-			<p>Alias: <code>/cycle</code></p>
-		</div>
-	</div>
-
-	<div class="help-item">
-		<div class="subject">
-			<code>/query nick</code>
-		</div>
-		<div class="description">
-			<p>Send a private message to the specified user.</p>
-		</div>
-	</div>
-
-	<div class="help-item">
-		<div class="subject">
-			<code>/quit [message]</code>
-		</div>
-		<div class="description">
-			<p>
-				Disconnect from the current network with an optional message.
-			</p>
-		</div>
-	</div>
-
-	<div class="help-item">
-		<div class="subject">
-			<code>/raw message</code>
-		</div>
-		<div class="description">
-			<p>Send a raw message to the current IRC network.</p>
-			<p>Aliases: <code>/quote</code>, <code>/send</code></p>
-		</div>
-	</div>
-
-	<div class="help-item">
-		<div class="subject">
-			<code>/slap nick</code>
-		</div>
-		<div class="description">
-			<p>Slap someone in the current channel with a trout!</p>
-		</div>
-	</div>
-
-	<div class="help-item">
-		<div class="subject">
-			<code>/topic [newtopic]</code>
-		</div>
-		<div class="description">
-			<p>
-				Get the topic in the current channel. 
-				If <code>newtopic</code> is specified, sets the 
-				topic in the current channel.
-			</p>
-		</div>
-	</div>
-
-	<div class="help-item">
-		<div class="subject">
-			<code>/unban nick</code>
-		</div>
-		<div class="description">
-			<p>Unban (<code>-b</code>) a user from the current channel.
-				This can be a nickname or a hostmask.</p>
-		</div>
-	</div>
-
-	<div class="help-item">
-		<div class="subject">
-			<code>/unignore nick</code>
-		</div>
-		<div class="description">
-			<p>
-				Unblock messages from the specified user on the current network.
-				This can be a nickname or a hostmask.</p>
-		</div>
-	</div>
-
-	<div class="help-item">
-		<div class="subject">
-			<code>/voice nick [...nick]</code>
-		</div>
-		<div class="description">
-			<p>
-				Give voice (<code>+v</code>) to one or several users in the
-				current channel.
-			</p>
-		</div>
-	</div>
-
-	<div class="help-item">
-		<div class="subject">
-			<code>/whois nick</code>
-		</div>
-		<div class="description">
-			<p>
-				Retrieve information about the given user on the current
-				network.
-			</p>
-		</div>
-	</div>
-</div>
diff --git a/client/views/windows/settings.tpl b/client/views/windows/settings.tpl
deleted file mode 100644
index c23bd718..00000000
--- a/client/views/windows/settings.tpl
+++ /dev/null
@@ -1,239 +0,0 @@
-<div class="header">
-	<button class="lt" aria-label="Toggle channel list"></button>
-</div>
-<div class="container">
-	<h1 class="title">Settings</h1>
-
-	<div class="row">
-		<div class="col-sm-6">
-			<label class="opt">
-				<input type="checkbox" name="advanced">
-				Advanced settings
-			</label>
-		</div>
-	</div>
-
-	<div class="row">
-		<div class="col-sm-12" id="native-app" hidden>
-			<h2>Native app</h2>
-			<button type="button" class="btn" id="webapp-install-button" hidden>Add The Lounge to Home screen</button>
-			<button type="button" class="btn" id="make-default-client">Open irc:// URLs with The Lounge</button>
-		</div>
-
-		{{#unless public}}
-		<div class="col-sm-12" data-advanced>
-			<h2>
-				Settings synchronisation
-				<span class="tooltipped tooltipped-n tooltipped-no-delay" aria-label="Note: This is an experimental feature and may change in future releases.">
-					<button class="extra-experimental" aria-label="Note: This is an experimental feature and may change in future releases."></button>
-				</span>
-			</h2>
-			<label class="opt">
-				<input type="checkbox" name="syncSettings">
-				Synchronize settings with other clients.
-			</label>
-			<p class="sync-warning-override"><strong>Warning</strong> Checking this box will override the settings of this client with those stored on the server.</p>
-			<p class="sync-warning-base"><strong>Warning</strong> No settings have been synced before. Enabling this will sync all settings of this client as the base for other clients.</p>
-			<div class="opt force-sync-button">
-				<button type="button" class="btn" id="forceSync">Force sync settings</button>
-				<p>This will override any settings already synced to the server.</p>
-			</div>
-		</div>
-		{{/unless}}
-		<div class="col-sm-12">
-			<h2>Messages</h2>
-		</div>
-		<div class="col-sm-6">
-			<label class="opt">
-				<input type="checkbox" name="motd">
-				Show <abbr title="Message Of The Day">MOTD</abbr>
-			</label>
-		</div>
-		<div class="col-sm-6">
-			<label class="opt">
-				<input type="checkbox" name="showSeconds">
-				Show seconds in timestamp
-			</label>
-		</div>
-		<div class="col-sm-12">
-			<h2>
-				Status messages
-				<span class="tooltipped tooltipped-n tooltipped-no-delay" aria-label="Joins, parts, kicks, nick changes, away changes, and mode changes">
-					<button class="extra-help" aria-label="Joins, parts, kicks, nick changes, away changes, and mode changes"></button>
-				</span>
-			</h2>
-		</div>
-		<div class="col-sm-12">
-			<label class="opt">
-				<input type="radio" name="statusMessages" value="shown">
-				Show all status messages individually
-			</label>
-			<label class="opt">
-				<input type="radio" name="statusMessages" value="condensed">
-				Condense status messages together
-			</label>
-			<label class="opt">
-				<input type="radio" name="statusMessages" value="hidden">
-				Hide all status messages
-			</label>
-		</div>
-		<div class="col-sm-12">
-			<h2>Visual Aids</h2>
-		</div>
-		<div class="col-sm-12">
-			<label class="opt">
-				<input type="checkbox" name="coloredNicks">
-				Enable colored nicknames
-			</label>
-			<label class="opt">
-				<input type="checkbox" name="autocomplete">
-				Enable autocomplete
-			</label>
-		</div>
-		<div class="col-sm-12" data-advanced>
-			<label class="opt">
-				<label for="nickPostfix" class="sr-only">Nick autocomplete postfix (e.g. <code>, </code>)</label>
-				<input type="text" id="nickPostfix" name="nickPostfix" class="input" placeholder="Nick autocomplete postfix (e.g. ', ')">
-			</label>
-		</div>
-
-		<div class="col-sm-12">
-			<h2>Theme</h2>
-		</div>
-		<div class="col-sm-12">
-			<label for="theme-select" class="sr-only">Theme</label>
-			<select id="theme-select" name="theme" class="input">
-				{{#each themes}}
-					<option value="{{name}}" data-theme-color="{{themeColor}}">
-						{{displayName}}
-					</option>
-				{{/each}}
-			</select>
-		</div>
-		{{#if prefetch}}
-		<div class="col-sm-12">
-			<h2>Link previews</h2>
-		</div>
-		<div class="col-sm-6">
-			<label class="opt">
-				<input type="checkbox" name="media">
-				Auto-expand media
-			</label>
-		</div>
-		<div class="col-sm-6">
-			<label class="opt">
-				<input type="checkbox" name="links">
-				Auto-expand websites
-			</label>
-		</div>
-		{{/if}}
-		{{#unless public}}
-		<div class="col-sm-12">
-			<h2>Push Notifications</h2>
-		</div>
-		<div class="col-sm-12">
-			<button type="button" class="btn" id="pushNotifications" disabled data-text-alternate="Unsubscribe from push notifications">Subscribe to push notifications</button>
-			<div class="error" id="pushNotificationsHttps">
-				<strong>Warning</strong>:
-				Push notifications are only supported over HTTPS connections.
-			</div>
-			<div class="error" id="pushNotificationsUnsupported">
-				<strong>Warning</strong>:
-				<span>Push notifications are not supported by your browser.</span>
-			</div>
-		</div>
-		{{/unless}}
-		<div class="col-sm-12">
-			<h2>Browser Notifications</h2>
-		</div>
-		<div class="col-sm-12">
-			<label class="opt">
-			<input id="desktopNotifications" type="checkbox" name="desktopNotifications">
-			Enable browser notifications<br>
-			<div class="error" id="warnUnsupportedDesktopNotifications">
-				<strong>Warning</strong>:
-				Notifications are not supported by your browser.
-			</div>
-			<div class="error" id="warnBlockedDesktopNotifications">
-				<strong>Warning</strong>:
-				Notifications are blocked by your browser.
-			</div>
-			</label>
-		</div>
-		<div class="col-sm-12">
-			<label class="opt">
-			<input type="checkbox" name="notification">
-			Enable notification sound
-			</label>
-		</div>
-		<div class="col-sm-12">
-			<div class="opt">
-				<button id="play">Play sound</button>
-			</div>
-		</div>
-
-		<div class="col-sm-12" data-advanced>
-			<label class="opt">
-				<input type="checkbox" name="notifyAllMessages">
-				Enable notification for all messages
-			</label>
-		</div>
-
-		<div class="col-sm-12" data-advanced>
-			<label class="opt">
-				<label for="highlights" class="sr-only">Custom highlights (comma-separated keywords)</label>
-				<input type="text" id="highlights" name="highlights" class="input" placeholder="Custom highlights (comma-separated keywords)">
-			</label>
-		</div>
-
-		{{#unless public}}
-			{{#unless ldapEnabled}}
-		<div id="change-password">
-			<form action="" method="post" data-event="change-password">
-				<div class="col-sm-12">
-					<h2>Change password</h2>
-				</div>
-				<div class="col-sm-12 password-container">
-					<label for="old_password_input" class="sr-only">Enter current password</label>
-					<input type="password" id="old_password_input" name="old_password" class="input" placeholder="Enter current password">
-					{{> ../reveal-password}}
-				</div>
-				<div class="col-sm-12 password-container">
-					<label for="new_password_input" class="sr-only">Enter desired new password</label>
-					<input type="password" id="new_password_input" name="new_password" class="input" placeholder="Enter desired new password">
-					{{> ../reveal-password}}
-				</div>
-				<div class="col-sm-12 password-container">
-					<label for="verify_password_input" class="sr-only">Repeat new password</label>
-					<input type="password" id="verify_password_input" name="verify_password" class="input" placeholder="Repeat new password">
-					{{> ../reveal-password}}
-				</div>
-				<div class="col-sm-12 feedback"></div>
-				<div class="col-sm-12">
-					<button type="submit" class="btn">Change password</button>
-				</div>
-			</form>
-		</div>
-			{{/unless}}
-		{{/unless}}
-		<div class="col-sm-12" data-advanced>
-			<h2>Custom Stylesheet</h2>
-		</div>
-		<div class="col-sm-12" data-advanced>
-			<label for="user-specified-css-input" class="sr-only">Custom stylesheet. You can override any style with CSS here.</label>
-			<textarea class="input" name="userStyles" id="user-specified-css-input" placeholder="/* You can override any style with CSS here */"></textarea>
-		</div>
-	</div>
-
-	{{#unless public}}
-		<div class="session-list">
-			<h2>Sessions</h2>
-
-			<h3>Current session</h3>
-			<div id="session-current"></div>
-
-			<h3>Other sessions</h3>
-			<div id="session-list"></div>
-		</div>
-	{{/unless}}
-</div>
diff --git a/client/views/windows/sign_in.tpl b/client/views/windows/sign_in.tpl
deleted file mode 100644
index 07964f9d..00000000
--- a/client/views/windows/sign_in.tpl
+++ /dev/null
@@ -1,17 +0,0 @@
-<form class="container" method="post" action="">
-	<img src="img/logo-vertical-transparent-bg.svg" class="logo" alt="The Lounge" width="256" height="170">
-	<img src="img/logo-vertical-transparent-bg-inverted.svg" class="logo-inverted" alt="The Lounge" width="256" height="170">
-
-	<label>Username</label>
-	<input class="input" type="text" name="user" autocapitalize="none" autocorrect="off" autocomplete="username" required autofocus>
-
-	<div class="password-container">
-		<label>Password</label>
-		<input class="input" type="password" name="password" autocapitalize="none" autocorrect="off" autocomplete="current-password" required>
-		{{> ../reveal-password}}
-	</div>
-
-	<div class="error">Authentication failed.</div>
-
-	<button type="submit" class="btn">Sign in</button>
-</form>
diff --git a/package.json b/package.json
index a549150e..adf2dd1b 100644
--- a/package.json
+++ b/package.json
@@ -82,25 +82,19 @@
     "chai": "4.2.0",
     "copy-webpack-plugin": "5.0.5",
     "css-loader": "3.2.0",
-    "css.escape": "1.5.1",
     "cssnano": "4.1.10",
+    "dayjs": "1.8.17",
     "emoji-regex": "8.0.0",
     "eslint": "6.7.0",
     "eslint-config-prettier": "6.7.0",
     "eslint-plugin-vue": "6.0.1",
     "fuzzy": "0.1.3",
     "graphql-request": "1.8.2",
-    "handlebars": "4.1.2",
-    "handlebars-loader": "1.7.1",
-    "html-minifier": "4.0.0",
-    "html-minifier-loader": "1.4.1",
     "husky": "3.1.0",
     "intersection-observer": "0.7.0",
-    "jquery": "3.4.1",
     "mini-css-extract-plugin": "0.8.0",
     "mocha": "6.2.2",
     "mochapack": "1.1.11",
-    "moment": "2.24.0",
     "mousetrap": "1.6.3",
     "npm-run-all": "4.1.5",
     "nyc": "14.1.1",
@@ -118,9 +112,11 @@
     "undate": "0.3.0",
     "vue": "2.6.10",
     "vue-loader": "15.7.2",
+    "vue-router": "3.1.3",
     "vue-server-renderer": "2.6.10",
     "vue-template-compiler": "2.6.10",
     "vuedraggable": "2.23.2",
+    "vuex": "3.1.2",
     "webpack": "4.41.2",
     "webpack-cli": "3.3.10",
     "webpack-dev-middleware": "3.7.2",
diff --git a/scripts/changelog.js b/scripts/changelog.js
index bf798503..d4e847a3 100644
--- a/scripts/changelog.js
+++ b/scripts/changelog.js
@@ -50,7 +50,7 @@ const colors = require("chalk");
 const fs = require("fs");
 const path = require("path");
 const GraphQLClient = require("graphql-request").GraphQLClient;
-const moment = require("moment");
+const dayjs = require("dayjs");
 const semver = require("semver");
 const util = require("util");
 const log = require("../src/log");
@@ -836,7 +836,7 @@ async function generateChangelogEntry(changelog, targetVersion) {
 	}
 
 	items.version = targetVersion;
-	items.date = moment().format("YYYY-MM-DD");
+	items.date = dayjs().format("YYYY-MM-DD");
 	items.fullChangelogUrl = fullChangelogUrl(previousVersion, targetVersion);
 
 	return {
diff --git a/scripts/generate-emoji.js b/scripts/generate-emoji.js
index 273207a1..d864d074 100644
--- a/scripts/generate-emoji.js
+++ b/scripts/generate-emoji.js
@@ -24,12 +24,12 @@ const fs = require("fs");
 	const fullNameEmojiMapOutput = JSON.stringify(fullNameEmojiMap, null, 2) + "\n";
 
 	fs.writeFileSync(
-		path.resolve(path.join(__dirname, "..", "client", "js", "libs", "simplemap.json")),
+		path.resolve(path.join(__dirname, "..", "client", "js", "helpers", "simplemap.json")),
 		emojiMapOutput
 	);
 
 	fs.writeFileSync(
-		path.resolve(path.join(__dirname, "..", "client", "js", "libs", "fullnamemap.json")),
+		path.resolve(path.join(__dirname, "..", "client", "js", "helpers", "fullnamemap.json")),
 		fullNameEmojiMapOutput
 	);
 })();
diff --git a/src/models/network.js b/src/models/network.js
index 407eb618..1df26436 100644
--- a/src/models/network.js
+++ b/src/models/network.js
@@ -10,21 +10,19 @@ const Helper = require("../helper");
 module.exports = Network;
 
 /**
- * @type {Object} List of keys which should not be sent to the client.
+ * @type {Object} List of keys which should be sent to the client by default.
  */
-const filteredFromClient = {
-	awayMessage: true,
-	chanCache: true,
-	highlightRegex: true,
-	irc: true,
-	password: true,
-	ignoreList: true,
-	keepNick: true,
+const fieldsForClient = {
+	uuid: true,
+	name: true,
+	nick: true,
+	serverOptions: true,
 };
 
 function Network(attr) {
 	_.defaults(this, attr, {
 		name: "",
+		nick: "",
 		host: "",
 		port: 6667,
 		tls: false,
@@ -294,7 +292,7 @@ Network.prototype.getFilteredClone = function(lastActiveChannel, lastMessage) {
 			newNetwork[prop] = this[prop].map((channel) =>
 				channel.getFilteredClone(lastActiveChannel, lastMessage)
 			);
-		} else if (!filteredFromClient[prop]) {
+		} else if (fieldsForClient[prop]) {
 			// Some properties that are not useful for the client are skipped
 			newNetwork[prop] = this[prop];
 		}
@@ -352,6 +350,32 @@ Network.prototype.addChannel = function(newChan) {
 	return index;
 };
 
+Network.prototype.exportForEdit = function() {
+	let fieldsToReturn;
+
+	if (Helper.config.displayNetwork) {
+		// Return fields required to edit a network
+		fieldsToReturn = [
+			"uuid",
+			"nick",
+			"name",
+			"host",
+			"port",
+			"tls",
+			"rejectUnauthorized",
+			"password",
+			"username",
+			"realname",
+			"commands",
+		];
+	} else {
+		// Same fields as in getClientConfiguration when network is hidden
+		fieldsToReturn = ["name", "nick", "username", "password", "realname"];
+	}
+
+	return _.pick(this, fieldsToReturn);
+};
+
 Network.prototype.export = function() {
 	const network = _.pick(this, [
 		"uuid",
diff --git a/src/plugins/irc-events/link.js b/src/plugins/irc-events/link.js
index b1e3c050..a358b9d0 100644
--- a/src/plugins/irc-events/link.js
+++ b/src/plugins/irc-events/link.js
@@ -5,8 +5,8 @@ const got = require("got");
 const URL = require("url").URL;
 const mime = require("mime-types");
 const Helper = require("../../helper");
-const cleanIrcMessage = require("../../../client/js/libs/handlebars/ircmessageparser/cleanIrcMessage");
-const findLinks = require("../../../client/js/libs/handlebars/ircmessageparser/findLinks");
+const cleanIrcMessage = require("../../../client/js/helpers/ircmessageparser/cleanIrcMessage");
+const findLinks = require("../../../client/js/helpers/ircmessageparser/findLinks");
 const storage = require("../storage");
 const currentFetchPromises = new Map();
 const imageTypeRegex = /^image\/.+/;
diff --git a/src/plugins/irc-events/message.js b/src/plugins/irc-events/message.js
index d8a3801e..8dc0dde7 100644
--- a/src/plugins/irc-events/message.js
+++ b/src/plugins/irc-events/message.js
@@ -3,7 +3,7 @@
 const Chan = require("../../models/chan");
 const Msg = require("../../models/msg");
 const LinkPrefetch = require("./link");
-const cleanIrcMessage = require("../../../client/js/libs/handlebars/ircmessageparser/cleanIrcMessage");
+const cleanIrcMessage = require("../../../client/js/helpers/ircmessageparser/cleanIrcMessage");
 const Helper = require("../../helper");
 const nickRegExp = /(?:\x03[0-9]{1,2}(?:,[0-9]{1,2})?)?([\w[\]\\`^{|}-]+)/g;
 
diff --git a/src/server.js b/src/server.js
index bf7191ea..a47b9f5a 100644
--- a/src/server.js
+++ b/src/server.js
@@ -174,11 +174,8 @@ module.exports = function(options = {}) {
 			if (Helper.config.public) {
 				performAuthentication.call(socket, {});
 			} else {
-				socket.emit("auth", {
-					serverHash: serverHash,
-					success: true,
-				});
-				socket.on("auth", performAuthentication);
+				socket.on("auth:perform", performAuthentication);
+				socket.emit("auth:start", serverHash);
 			}
 		});
 
@@ -337,7 +334,8 @@ function indexRequest(req, res) {
 }
 
 function initializeClient(socket, client, token, lastMessage, openChannel) {
-	socket.emit("authorized");
+	socket.off("auth:perform", performAuthentication);
+	socket.emit("auth:success");
 
 	client.clientAttach(socket.id, token);
 
@@ -399,7 +397,7 @@ function initializeClient(socket, client, token, lastMessage, openChannel) {
 			return;
 		}
 
-		socket.emit("network:info", getClientConfiguration(network.export()));
+		socket.emit("network:info", network.exportForEdit());
 	});
 
 	socket.on("network:edit", (data) => {
@@ -423,16 +421,10 @@ function initializeClient(socket, client, token, lastMessage, openChannel) {
 				const p1 = data.new_password;
 				const p2 = data.verify_password;
 
-				if (typeof p1 === "undefined" || p1 === "") {
+				if (typeof p1 === "undefined" || p1 === "" || p1 !== p2) {
 					socket.emit("change-password", {
-						error: "Please enter a new password",
-					});
-					return;
-				}
-
-				if (p1 !== p2) {
-					socket.emit("change-password", {
-						error: "Both new password fields must match",
+						error: "",
+						success: false,
 					});
 					return;
 				}
@@ -442,8 +434,8 @@ function initializeClient(socket, client, token, lastMessage, openChannel) {
 					.then((matching) => {
 						if (!matching) {
 							socket.emit("change-password", {
-								error:
-									"The current password field does not match your account password",
+								error: "password_incorrect",
+								success: false,
 							});
 							return;
 						}
@@ -451,12 +443,12 @@ function initializeClient(socket, client, token, lastMessage, openChannel) {
 						const hash = Helper.password.hash(p1);
 
 						client.setPassword(hash, (success) => {
-							const obj = {};
+							const obj = {success: false};
 
 							if (success) {
-								obj.success = "Successfully updated your password";
+								obj.success = true;
 							} else {
-								obj.error = "Failed to update your password";
+								obj.error = "update_failed";
 							}
 
 							socket.emit("change-password", obj);
@@ -500,11 +492,25 @@ function initializeClient(socket, client, token, lastMessage, openChannel) {
 		}
 
 		const networkAndChan = client.find(data.target);
+		const newState = Boolean(data.shown);
 
 		if (!networkAndChan) {
 			return;
 		}
 
+		// Process multiple message at once for /collapse and /expand commands
+		if (Array.isArray(data.messageIds)) {
+			for (const msgId of data.messageIds) {
+				const message = networkAndChan.chan.findMessage(msgId);
+
+				for (const preview of message.previews) {
+					preview.shown = newState;
+				}
+			}
+
+			return;
+		}
+
 		const message = networkAndChan.chan.findMessage(data.msgId);
 
 		if (!message) {
@@ -514,7 +520,7 @@ function initializeClient(socket, client, token, lastMessage, openChannel) {
 		const preview = message.findPreview(data.link);
 
 		if (preview) {
-			preview.shown = data.shown;
+			preview.shown = newState;
 		}
 	});
 
@@ -639,8 +645,6 @@ function initializeClient(socket, client, token, lastMessage, openChannel) {
 
 	const sendInitEvent = (tokenToSend) => {
 		socket.emit("init", {
-			applicationServerKey: manager.webPush.vapidKeys.publicKey,
-			pushSubscription: client.config.sessions[token],
 			active: openChannel,
 			networks: client.networks.map((network) =>
 				network.getFilteredClone(openChannel, lastMessage)
@@ -663,7 +667,7 @@ function initializeClient(socket, client, token, lastMessage, openChannel) {
 	}
 }
 
-function getClientConfiguration(network) {
+function getClientConfiguration() {
 	const config = _.pick(Helper.config, [
 		"public",
 		"lockNetwork",
@@ -676,10 +680,10 @@ function getClientConfiguration(network) {
 	config.ldapEnabled = Helper.config.ldap.enable;
 
 	if (config.displayNetwork) {
-		config.defaults = _.clone(network || Helper.config.defaults);
+		config.defaults = _.clone(Helper.config.defaults);
 	} else {
 		// Only send defaults that are visible on the client
-		config.defaults = _.pick(network || Helper.config.defaults, [
+		config.defaults = _.pick(Helper.config.defaults, [
 			"name",
 			"nick",
 			"username",
@@ -689,13 +693,12 @@ function getClientConfiguration(network) {
 		]);
 	}
 
-	if (!network) {
-		config.version = pkg.version;
-		config.gitCommit = Helper.getGitCommit();
-		config.themes = themes.getAll();
-		config.defaultTheme = Helper.config.theme;
-		config.defaults.nick = Helper.getDefaultNick();
-	}
+	config.applicationServerKey = manager.webPush.vapidKeys.publicKey;
+	config.version = pkg.version;
+	config.gitCommit = Helper.getGitCommit();
+	config.themes = themes.getAll();
+	config.defaultTheme = Helper.config.theme;
+	config.defaults.nick = Helper.getDefaultNick();
 
 	if (Uploader) {
 		config.fileUploadMaxFileSize = Uploader.getMaxFileSize();
@@ -732,7 +735,16 @@ function performAuthentication(data) {
 	};
 
 	const initClient = () => {
-		socket.emit("configuration", getClientConfiguration());
+		// Configuration does not change during runtime of TL,
+		// and the client listens to this event only once
+		if (!data.hasConfig) {
+			socket.emit("configuration", getClientConfiguration());
+
+			socket.emit(
+				"push:issubscribed",
+				token && client.config.sessions[token].pushSubscription ? true : false
+			);
+		}
 
 		client.config.browser = {
 			ip: getClientIp(socket),
@@ -783,7 +795,7 @@ function performAuthentication(data) {
 				);
 			}
 
-			socket.emit("auth", {success: false});
+			socket.emit("auth:failed");
 			return;
 		}
 
diff --git a/test/client/js/authTest.js b/test/client/js/authTest.js
index b551d954..b4fa4fc2 100644
--- a/test/client/js/authTest.js
+++ b/test/client/js/authTest.js
@@ -2,9 +2,9 @@
 
 const expect = require("chai").expect;
 const stub = require("sinon").stub;
-const Auth = require("../../../client/js/auth");
-const localStorage = require("../../../client/js/localStorage");
-const location = require("../../../client/js/location");
+const Auth = require("../../../client/js/auth").default;
+const localStorage = require("../../../client/js/localStorage").default;
+const location = require("../../../client/js/location").default;
 
 describe("Auth", function() {
 	describe(".signout", function() {
diff --git a/test/client/js/constantsTest.js b/test/client/js/constantsTest.js
index e9035f00..166a42f0 100644
--- a/test/client/js/constantsTest.js
+++ b/test/client/js/constantsTest.js
@@ -1,7 +1,7 @@
 "use strict";
 
 const expect = require("chai").expect;
-const constants = require("../../../client/js/constants");
+const constants = require("../../../client/js/constants").default;
 
 describe("client-side constants", function() {
 	describe(".colorCodeMap", function() {
diff --git a/test/client/js/libs/handlebars/friendlysizeTest.js b/test/client/js/helpers/friendlysizeTest.js
similarity index 73%
rename from test/client/js/libs/handlebars/friendlysizeTest.js
rename to test/client/js/helpers/friendlysizeTest.js
index 274495d0..709299a5 100644
--- a/test/client/js/libs/handlebars/friendlysizeTest.js
+++ b/test/client/js/helpers/friendlysizeTest.js
@@ -1,9 +1,9 @@
 "use strict";
 
 const expect = require("chai").expect;
-const friendlysize = require("../../../../../client/js/libs/handlebars/friendlysize");
+const friendlysize = require("../../../../client/js/helpers/friendlysize").default;
 
-describe("friendlysize Handlebars helper", function() {
+describe("friendlysize helper", function() {
 	it("should render big values in human-readable version", function() {
 		expect(friendlysize(51200)).to.equal("50 KB");
 	});
diff --git a/test/client/js/libs/handlebars/ircmessageparser/anyIntersection.js b/test/client/js/helpers/ircmessageparser/anyIntersection.js
similarity index 86%
rename from test/client/js/libs/handlebars/ircmessageparser/anyIntersection.js
rename to test/client/js/helpers/ircmessageparser/anyIntersection.js
index b80a44ed..84ae6b62 100644
--- a/test/client/js/libs/handlebars/ircmessageparser/anyIntersection.js
+++ b/test/client/js/helpers/ircmessageparser/anyIntersection.js
@@ -1,7 +1,8 @@
 "use strict";
 
 const expect = require("chai").expect;
-const anyIntersection = require("../../../../../../client/js/libs/handlebars/ircmessageparser/anyIntersection");
+const anyIntersection = require("../../../../../client/js/helpers/ircmessageparser/anyIntersection")
+	.default;
 
 describe("anyIntersection", () => {
 	it("should not intersect on edges", () => {
diff --git a/test/client/js/libs/handlebars/ircmessageparser/cleanIrcMessage.js b/test/client/js/helpers/ircmessageparser/cleanIrcMessage.js
similarity index 93%
rename from test/client/js/libs/handlebars/ircmessageparser/cleanIrcMessage.js
rename to test/client/js/helpers/ircmessageparser/cleanIrcMessage.js
index 34fe0b09..ba668636 100644
--- a/test/client/js/libs/handlebars/ircmessageparser/cleanIrcMessage.js
+++ b/test/client/js/helpers/ircmessageparser/cleanIrcMessage.js
@@ -1,7 +1,7 @@
 "use strict";
 
 const expect = require("chai").expect;
-const cleanIrcMessage = require("../../../../../../client/js/libs/handlebars/ircmessageparser/cleanIrcMessage");
+const cleanIrcMessage = require("../../../../../client/js/helpers/ircmessageparser/cleanIrcMessage");
 
 describe("cleanIrcMessage", function() {
 	it("should remove all formatting", function() {
diff --git a/test/client/js/libs/handlebars/ircmessageparser/fill.js b/test/client/js/helpers/ircmessageparser/fill.js
similarity index 91%
rename from test/client/js/libs/handlebars/ircmessageparser/fill.js
rename to test/client/js/helpers/ircmessageparser/fill.js
index 10edb5aa..82ffcf4a 100644
--- a/test/client/js/libs/handlebars/ircmessageparser/fill.js
+++ b/test/client/js/helpers/ircmessageparser/fill.js
@@ -1,7 +1,7 @@
 "use strict";
 
 const expect = require("chai").expect;
-const fill = require("../../../../../../client/js/libs/handlebars/ircmessageparser/fill");
+const fill = require("../../../../../client/js/helpers/ircmessageparser/fill").default;
 
 describe("fill", () => {
 	const text = "01234567890123456789";
diff --git a/test/client/js/libs/handlebars/ircmessageparser/findChannels.js b/test/client/js/helpers/ircmessageparser/findChannels.js
similarity index 95%
rename from test/client/js/libs/handlebars/ircmessageparser/findChannels.js
rename to test/client/js/helpers/ircmessageparser/findChannels.js
index 1946e484..7e653fd6 100644
--- a/test/client/js/libs/handlebars/ircmessageparser/findChannels.js
+++ b/test/client/js/helpers/ircmessageparser/findChannels.js
@@ -1,7 +1,8 @@
 "use strict";
 
 const expect = require("chai").expect;
-const findChannels = require("../../../../../../client/js/libs/handlebars/ircmessageparser/findChannels");
+const findChannels = require("../../../../../client/js/helpers/ircmessageparser/findChannels")
+	.default;
 
 describe("findChannels", () => {
 	it("should find single letter channel", () => {
diff --git a/test/client/js/libs/handlebars/ircmessageparser/findEmoji.js b/test/client/js/helpers/ircmessageparser/findEmoji.js
similarity index 92%
rename from test/client/js/libs/handlebars/ircmessageparser/findEmoji.js
rename to test/client/js/helpers/ircmessageparser/findEmoji.js
index 901bdd30..95d5370f 100644
--- a/test/client/js/libs/handlebars/ircmessageparser/findEmoji.js
+++ b/test/client/js/helpers/ircmessageparser/findEmoji.js
@@ -1,7 +1,7 @@
 "use strict";
 
 const expect = require("chai").expect;
-const findEmoji = require("../../../../../../client/js/libs/handlebars/ircmessageparser/findEmoji");
+const findEmoji = require("../../../../../client/js/helpers/ircmessageparser/findEmoji").default;
 
 describe("findEmoji", () => {
 	it("should find default emoji presentation character", () => {
diff --git a/test/client/js/libs/handlebars/ircmessageparser/findLinks.js b/test/client/js/helpers/ircmessageparser/findLinks.js
similarity index 98%
rename from test/client/js/libs/handlebars/ircmessageparser/findLinks.js
rename to test/client/js/helpers/ircmessageparser/findLinks.js
index 3be83250..57930565 100644
--- a/test/client/js/libs/handlebars/ircmessageparser/findLinks.js
+++ b/test/client/js/helpers/ircmessageparser/findLinks.js
@@ -1,7 +1,7 @@
 "use strict";
 
 const expect = require("chai").expect;
-const findLinks = require("../../../../../../client/js/libs/handlebars/ircmessageparser/findLinks");
+const findLinks = require("../../../../../client/js/helpers/ircmessageparser/findLinks");
 
 describe("findLinks", () => {
 	it("should find url", () => {
diff --git a/test/client/js/libs/handlebars/ircmessageparser/findNames.js b/test/client/js/helpers/ircmessageparser/findNames.js
similarity index 93%
rename from test/client/js/libs/handlebars/ircmessageparser/findNames.js
rename to test/client/js/helpers/ircmessageparser/findNames.js
index 3421bdba..7ce52655 100644
--- a/test/client/js/libs/handlebars/ircmessageparser/findNames.js
+++ b/test/client/js/helpers/ircmessageparser/findNames.js
@@ -1,7 +1,7 @@
 "use strict";
 
 const expect = require("chai").expect;
-const findNames = require("../../../../../../client/js/libs/handlebars/ircmessageparser/findNames");
+const findNames = require("../../../../../client/js/helpers/ircmessageparser/findNames").default;
 
 describe("findNames", () => {
 	it("should find nicks in text", () => {
diff --git a/test/client/js/libs/handlebars/ircmessageparser/merge.js b/test/client/js/helpers/ircmessageparser/merge.js
similarity index 96%
rename from test/client/js/libs/handlebars/ircmessageparser/merge.js
rename to test/client/js/helpers/ircmessageparser/merge.js
index cbafd0d3..18ac32bc 100644
--- a/test/client/js/libs/handlebars/ircmessageparser/merge.js
+++ b/test/client/js/helpers/ircmessageparser/merge.js
@@ -1,7 +1,7 @@
 "use strict";
 
 const expect = require("chai").expect;
-const merge = require("../../../../../../client/js/libs/handlebars/ircmessageparser/merge");
+const merge = require("../../../../../client/js/helpers/ircmessageparser/merge").default;
 
 describe("merge", () => {
 	it("should split style information", () => {
diff --git a/test/client/js/libs/handlebars/ircmessageparser/parseStyle.js b/test/client/js/helpers/ircmessageparser/parseStyle.js
similarity index 99%
rename from test/client/js/libs/handlebars/ircmessageparser/parseStyle.js
rename to test/client/js/helpers/ircmessageparser/parseStyle.js
index ee0ac44b..fed71455 100644
--- a/test/client/js/libs/handlebars/ircmessageparser/parseStyle.js
+++ b/test/client/js/helpers/ircmessageparser/parseStyle.js
@@ -1,7 +1,7 @@
 "use strict";
 
 const expect = require("chai").expect;
-const parseStyle = require("../../../../../../client/js/libs/handlebars/ircmessageparser/parseStyle");
+const parseStyle = require("../../../../../client/js/helpers/ircmessageparser/parseStyle").default;
 
 describe("parseStyle", () => {
 	it("should skip control codes", () => {
diff --git a/test/client/js/libs/handlebars/localetimeTest.js b/test/client/js/helpers/localetimeTest.js
similarity index 77%
rename from test/client/js/libs/handlebars/localetimeTest.js
rename to test/client/js/helpers/localetimeTest.js
index f5de1d51..589da875 100644
--- a/test/client/js/libs/handlebars/localetimeTest.js
+++ b/test/client/js/helpers/localetimeTest.js
@@ -1,9 +1,9 @@
 "use strict";
 
 const expect = require("chai").expect;
-const localetime = require("../../../../../client/js/libs/handlebars/localetime");
+const localetime = require("../../../../client/js/helpers/localetime").default;
 
-describe("localetime Handlebars helper", () => {
+describe("localetime helper", () => {
 	it("should render a human-readable date", () => {
 		// 12PM in UTC time
 		const date = new Date("2014-05-22T12:00:00Z");
diff --git a/test/client/js/libs/handlebars/parse.js b/test/client/js/helpers/parse.js
similarity index 90%
rename from test/client/js/libs/handlebars/parse.js
rename to test/client/js/helpers/parse.js
index b8bde3c9..9cdce2b8 100644
--- a/test/client/js/libs/handlebars/parse.js
+++ b/test/client/js/helpers/parse.js
@@ -3,7 +3,7 @@
 const expect = require("chai").expect;
 
 import {renderToString} from "@vue/server-test-utils";
-import ParsedMessageTestWrapper from "../../../components/ParsedMessageTestWrapper.vue";
+import ParsedMessageTestWrapper from "../../components/ParsedMessageTestWrapper.vue";
 
 function getParsedMessageContents(text, message) {
 	let contents = renderToString(ParsedMessageTestWrapper, {
@@ -19,7 +19,7 @@ function getParsedMessageContents(text, message) {
 	return contents;
 }
 
-describe("parse Handlebars helper", () => {
+describe("IRC formatted message parser", () => {
 	it("should not introduce xss", () => {
 		const testCases = [
 			{
@@ -30,7 +30,7 @@ describe("parse Handlebars helper", () => {
 			{
 				input: '#&">bug',
 				expected:
-					'<span role="button" dir="auto" tabindex="0" data-chan="#&amp;&quot;&gt;bug" class="inline-channel">#&amp;&quot;&gt;bug</span>',
+					'<span dir="auto" role="button" tabindex="0" class="inline-channel">#&amp;&quot;&gt;bug</span>',
 			},
 		];
 
@@ -184,21 +184,21 @@ describe("parse Handlebars helper", () => {
 			{
 				input: "#a",
 				expected:
-					'<span role="button" dir="auto" tabindex="0" data-chan="#a" class="inline-channel">' +
+					'<span dir="auto" role="button" tabindex="0" class="inline-channel">' +
 					"#a" +
 					"</span>",
 			},
 			{
 				input: "#test",
 				expected:
-					'<span role="button" dir="auto" tabindex="0" data-chan="#test" class="inline-channel">' +
+					'<span dir="auto" role="button" tabindex="0" class="inline-channel">' +
 					"#test" +
 					"</span>",
 			},
 			{
 				input: "#äöü",
 				expected:
-					'<span role="button" dir="auto" tabindex="0" data-chan="#äöü" class="inline-channel">' +
+					'<span dir="auto" role="button" tabindex="0" class="inline-channel">' +
 					"#äöü" +
 					"</span>",
 			},
@@ -206,7 +206,7 @@ describe("parse Handlebars helper", () => {
 				input: "inline #channel text",
 				expected:
 					"inline " +
-					'<span role="button" dir="auto" tabindex="0" data-chan="#channel" class="inline-channel">' +
+					'<span dir="auto" role="button" tabindex="0" class="inline-channel">' +
 					"#channel" +
 					"</span>" +
 					" text",
@@ -214,7 +214,7 @@ describe("parse Handlebars helper", () => {
 			{
 				input: "#1,000",
 				expected:
-					'<span role="button" dir="auto" tabindex="0" data-chan="#1,000" class="inline-channel">' +
+					'<span dir="auto" role="button" tabindex="0" class="inline-channel">' +
 					"#1,000" +
 					"</span>",
 			},
@@ -222,7 +222,7 @@ describe("parse Handlebars helper", () => {
 				input: "@#a",
 				expected:
 					"@" +
-					'<span role="button" dir="auto" tabindex="0" data-chan="#a" class="inline-channel">' +
+					'<span dir="auto" role="button" tabindex="0" class="inline-channel">' +
 					"#a" +
 					"</span>",
 			},
@@ -358,7 +358,7 @@ describe("parse Handlebars helper", () => {
 				input: "test, MaxLeiter",
 				expected:
 					"test, " +
-					'<span role="button" dir="auto" data-name="MaxLeiter" class="user color-12">' +
+					'<span data-name="MaxLeiter" role="button" dir="auto" class="user color-12">' +
 					"MaxLeiter" +
 					"</span>",
 			},
@@ -378,7 +378,7 @@ describe("parse Handlebars helper", () => {
 				users: ["MaxLeiter, test"],
 				input: "#test-channelMaxLeiter",
 				expected:
-					'<span role="button" dir="auto" tabindex="0" data-chan="#test-channelMaxLeiter" class="inline-channel">' +
+					'<span dir="auto" role="button" tabindex="0" class="inline-channel">' +
 					"#test-channelMaxLeiter" +
 					"</span>",
 			},
@@ -414,7 +414,7 @@ describe("parse Handlebars helper", () => {
 			{
 				input: "\x02#\x038,9thelounge",
 				expected:
-					'<span role="button" dir="auto" tabindex="0" data-chan="#thelounge" class="inline-channel">' +
+					'<span dir="auto" role="button" tabindex="0" class="inline-channel">' +
 					'<span class="irc-bold">#</span>' +
 					'<span class="irc-bold irc-fg8 irc-bg9">thelounge</span>' +
 					"</span>",
@@ -477,7 +477,7 @@ describe("parse Handlebars helper", () => {
 			input: "#i❤️thelounge",
 			// FIXME: Emoji in text should be `<span class="emoji">❤️</span>`. See https://github.com/thelounge/thelounge/issues/1784
 			expected:
-				'<span role="button" dir="auto" tabindex="0" data-chan="#i❤️thelounge" class="inline-channel">#i❤️thelounge</span>',
+				'<span dir="auto" role="button" tabindex="0" class="inline-channel">#i❤️thelounge</span>',
 		},
 	].forEach((item) => {
 		// TODO: In Node v6+, use `{name, input, expected}`
@@ -493,7 +493,7 @@ describe("parse Handlebars helper", () => {
 					'test \x0312#\x0312\x0312"te\x0312st\x0312\x0312\x0312\x0312\x0312\x0312\x0312\x0312\x0312\x0312\x0312a',
 				expected:
 					"test " +
-					'<span role="button" dir="auto" tabindex="0" data-chan="#&quot;testa" class="inline-channel">' +
+					'<span dir="auto" role="button" tabindex="0" class="inline-channel">' +
 					'<span class="irc-fg12">#&quot;testa</span>' +
 					"</span>",
 			},
@@ -554,7 +554,7 @@ describe("parse Handlebars helper", () => {
 
 		expect(actual).to.equal(
 			'Url: <a href="http://example.com/path" dir="auto" target="_blank" rel="noopener">http://example.com/path</a> ' +
-				'Channel: <span role="button" dir="auto" tabindex="0" data-chan="##channel" class="inline-channel">##channel</span>'
+				'Channel: <span dir="auto" role="button" tabindex="0" class="inline-channel">##channel</span>'
 		);
 	});
 
@@ -563,7 +563,7 @@ describe("parse Handlebars helper", () => {
 		const actual = getParsedMessageContents(input);
 
 		expect(actual).to.equal(
-			'<span role="button" dir="auto" tabindex="0" data-chan="#test-https://example.com" class="inline-channel">' +
+			'<span dir="auto" role="button" tabindex="0" class="inline-channel">' +
 				"#test-https://example.com" +
 				"</span>"
 		);
diff --git a/test/client/js/helpers/parseIrcUri.js b/test/client/js/helpers/parseIrcUri.js
new file mode 100644
index 00000000..968cf103
--- /dev/null
+++ b/test/client/js/helpers/parseIrcUri.js
@@ -0,0 +1,94 @@
+"use strict";
+
+const expect = require("chai").expect;
+const parseIrcUri = require("../../../../client/js/helpers/parseIrcUri").default;
+
+describe("parseIrcUri helper", function() {
+	it("should parse irc:// without port", function() {
+		expect(parseIrcUri("irc://example.com")).to.deep.equal({
+			tls: false,
+			name: "example.com",
+			host: "example.com",
+			port: "6667",
+			join: "",
+		});
+	});
+
+	it("should parse ircs:// without port", function() {
+		expect(parseIrcUri("ircs://example.com")).to.deep.equal({
+			tls: true,
+			name: "example.com",
+			host: "example.com",
+			port: "6697",
+			join: "",
+		});
+	});
+
+	it("should parse irc:// with port", function() {
+		expect(parseIrcUri("irc://example.com:1337")).to.deep.equal({
+			tls: false,
+			name: "example.com",
+			host: "example.com",
+			port: "1337",
+			join: "",
+		});
+	});
+
+	it("should parse ircs:// with port", function() {
+		expect(parseIrcUri("ircs://example.com:1337")).to.deep.equal({
+			tls: true,
+			name: "example.com",
+			host: "example.com",
+			port: "1337",
+			join: "",
+		});
+	});
+
+	it("should not parse invalid port", function() {
+		expect(parseIrcUri("ircs://example.com:lol")).to.deep.equal({});
+	});
+
+	it("should not parse plus in port", function() {
+		expect(parseIrcUri("irc://example.com:+6697")).to.deep.equal({});
+	});
+
+	it("should not channel on empty query and hash", function() {
+		const obj = {
+			tls: false,
+			name: "example.com",
+			host: "example.com",
+			port: "6667",
+			join: "",
+		};
+
+		expect(parseIrcUri("irc://example.com#")).to.deep.equal(obj);
+		expect(parseIrcUri("irc://example.com/")).to.deep.equal(obj);
+		expect(parseIrcUri("irc://example.com/#")).to.deep.equal(obj);
+	});
+
+	it("should parse multiple channels", function() {
+		const obj = {
+			tls: true,
+			name: "example.com",
+			host: "example.com",
+			port: "1337",
+			join: "#channel,channel2",
+		};
+
+		expect(parseIrcUri("ircs://example.com:1337#channel,channel2")).to.deep.equal(obj);
+		expect(parseIrcUri("ircs://example.com:1337/#channel,channel2")).to.deep.equal(obj);
+
+		obj.join = "channel,channel2";
+		expect(parseIrcUri("ircs://example.com:1337/channel,channel2")).to.deep.equal(obj);
+
+		obj.join = "chan,#chan2,#chan3";
+		expect(parseIrcUri("ircs://example.com:1337/chan,#chan2,#chan3")).to.deep.equal(obj);
+
+		obj.join = "&chan,@chan2,#chan3";
+		expect(parseIrcUri("ircs://example.com:1337/&chan,@chan2,#chan3")).to.deep.equal(obj);
+
+		// URL() drops empty hash
+		obj.join = "chan";
+		expect(parseIrcUri("ircs://example.com:1337/chan#")).to.deep.equal(obj);
+	});
+});
diff --git a/test/client/js/libs/handlebars/roundBadgeNumberTest.js b/test/client/js/helpers/roundBadgeNumberTest.js
similarity index 81%
rename from test/client/js/libs/handlebars/roundBadgeNumberTest.js
rename to test/client/js/helpers/roundBadgeNumberTest.js
index d514c77a..282e05de 100644
--- a/test/client/js/libs/handlebars/roundBadgeNumberTest.js
+++ b/test/client/js/helpers/roundBadgeNumberTest.js
@@ -1,9 +1,9 @@
 "use strict";
 
 const expect = require("chai").expect;
-const roundBadgeNumber = require("../../../../../client/js/libs/handlebars/roundBadgeNumber");
+const roundBadgeNumber = require("../../../../client/js/helpers/roundBadgeNumber").default;
 
-describe("roundBadgeNumber Handlebars helper", function() {
+describe("roundBadgeNumber helper", function() {
 	it("should return any number under 1000 as a string", function() {
 		expect(roundBadgeNumber(123)).to.equal("123");
 	});
diff --git a/test/client/js/libs/handlebars/equalTest.js b/test/client/js/libs/handlebars/equalTest.js
deleted file mode 100644
index 4ede777b..00000000
--- a/test/client/js/libs/handlebars/equalTest.js
+++ /dev/null
@@ -1,25 +0,0 @@
-"use strict";
-
-const expect = require("chai").expect;
-const equal = require("../../../../../client/js/libs/handlebars/equal");
-
-describe("equal Handlebars helper", function() {
-	const block = {
-		fn: () => "fn",
-		inverse: () => "inverse",
-	};
-
-	it("should render the first block if both values are equal", function() {
-		expect(equal("foo", "foo", block)).to.equal("fn");
-	});
-
-	it("should render the inverse block if values are not equal", function() {
-		expect(equal("foo", "bar", block)).to.equal("inverse");
-	});
-
-	it("should throw if too few or too many arguments are given", function() {
-		expect(() => equal("foo", block)).to.throw(Error, /expects 3 arguments/);
-
-		expect(() => equal("foo", "bar", "baz", block)).to.throw(Error, /expects 3 arguments/);
-	});
-});
diff --git a/test/models/network.js b/test/models/network.js
index f794ad4d..a546a549 100644
--- a/test/models/network.js
+++ b/test/models/network.js
@@ -227,21 +227,7 @@ describe("Network", function() {
 
 			expect(clone)
 				.to.be.an("object")
-				.that.has.all.keys(
-					"channels",
-					"commands",
-					"host",
-					"name",
-					"port",
-					"realname",
-					"serverOptions",
-					"status",
-					"tls",
-					"userDisconnected",
-					"rejectUnauthorized",
-					"uuid",
-					"username"
-				);
+				.that.has.all.keys("channels", "status", "nick", "name", "serverOptions", "uuid");
 
 			expect(clone.status)
 				.to.be.an("object")
diff --git a/test/server.js b/test/server.js
index 0f56b626..cc9340a2 100644
--- a/test/server.js
+++ b/test/server.js
@@ -72,7 +72,7 @@ describe("Server", function() {
 		});
 
 		it("should emit authorized message", (done) => {
-			client.on("authorized", done);
+			client.on("auth:success", done);
 		});
 
 		it("should create network", (done) => {
@@ -91,10 +91,38 @@ describe("Server", function() {
 			client.on("network", (data) => {
 				expect(data.networks).to.be.an("array");
 				expect(data.networks).to.have.lengthOf(1);
-				expect(data.networks[0].realname).to.equal("The Lounge Test");
+				expect(data.networks[0].nick).to.equal("test-user");
+				expect(data.networks[0].name).to.equal("Test Network");
 				expect(data.networks[0].channels).to.have.lengthOf(3);
 				expect(data.networks[0].channels[0].name).to.equal("Test Network");
 				expect(data.networks[0].channels[1].name).to.equal("#thelounge");
+				expect(data.networks[0].channels[2].name).to.equal("#spam");
+				done();
+			});
+		});
+
+		it("should emit configuration message", (done) => {
+			client.on("configuration", (data) => {
+				// Private key defined in vapid.json is "01020304050607080910111213141516" for this public key.
+				expect(data.applicationServerKey).to.equal(
+					"BM0eTDpvDnH7ewlHuXWcPTE1NjlJ06XWIS1cQeBTZmsg4EDx5sOpY7kdX1pniTo8RakL3UdfFuIbC8_zog_BWIM"
+				);
+
+				expect(data.public).to.equal(true);
+				expect(data.defaultTheme).to.equal("default");
+				expect(data.themes).to.be.an("array");
+				expect(data.lockNetwork).to.equal(false);
+				expect(data.displayNetwork).to.equal(true);
+				expect(data.useHexIp).to.equal(false);
+
+				done();
+			});
+		});
+
+		it("should emit push subscription state message", (done) => {
+			client.on("push:issubscribed", (data) => {
+				expect(data).to.be.false;
+
 				done();
 			});
 		});
@@ -105,12 +133,6 @@ describe("Server", function() {
 				expect(data.networks).to.be.an("array");
 				expect(data.networks).to.be.empty;
 				expect(data.token).to.be.null;
-				expect(data.pushSubscription).to.be.undefined;
-
-				// Private key defined in vapid.json is "01020304050607080910111213141516" for this public key.
-				expect(data.applicationServerKey).to.equal(
-					"BM0eTDpvDnH7ewlHuXWcPTE1NjlJ06XWIS1cQeBTZmsg4EDx5sOpY7kdX1pniTo8RakL3UdfFuIbC8_zog_BWIM"
-				);
 
 				done();
 			});
diff --git a/webpack.config-test.js b/webpack.config-test.js
index 70180236..8638a547 100644
--- a/webpack.config-test.js
+++ b/webpack.config-test.js
@@ -1,5 +1,7 @@
 "use strict";
 
+const webpack = require("webpack");
+const path = require("path");
 const config = require("./webpack.config.js");
 
 config.target = "node";
@@ -17,4 +19,15 @@ for (const rule of config.module.rules) {
 // - https://github.com/webpack/webpack/issues/6727#issuecomment-372589122
 config.optimization.splitChunks = false;
 
+// "Fixes" Critical dependency: the request of a dependency is an expression
+config.plugins.push(new webpack.ContextReplacementPlugin(/vue-server-renderer$/));
+
+// Client tests that require Vue may end up requireing socket.io
+config.plugins.push(
+	new webpack.NormalModuleReplacementPlugin(
+		/js(\/|\\)socket\.js/,
+		path.resolve(__dirname, "scripts/noop.js")
+	)
+);
+
 module.exports = config;
diff --git a/webpack.config.js b/webpack.config.js
index 06198be6..69be9269 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -10,7 +10,7 @@ const Helper = require("./src/helper.js");
 const config = {
 	mode: process.env.NODE_ENV === "production" ? "production" : "development",
 	entry: {
-		"js/bundle.js": [path.resolve(__dirname, "client/js/lounge.js")],
+		"js/bundle.js": [path.resolve(__dirname, "client/js/vue.js")],
 		"css/style": path.resolve(__dirname, "client/css/style.css"),
 	},
 	devtool: "source-map",
@@ -63,25 +63,6 @@ const config = {
 					},
 				},
 			},
-			{
-				test: /\.tpl$/,
-				include: [path.resolve(__dirname, "client/views")],
-				use: [
-					{
-						loader: "handlebars-loader",
-						options: {
-							helperDirs: [path.resolve(__dirname, "client/js/libs/handlebars")],
-							extensions: [".tpl"],
-						},
-					},
-					{
-						loader: "html-minifier-loader",
-						options: {
-							ignoreCustomFragments: [/{{[\s\S]*?}}/],
-						},
-					},
-				],
-			},
 		],
 	},
 	optimization: {
@@ -135,7 +116,6 @@ const config = {
 				to: "themes/[name].[ext]",
 			},
 		]),
-		new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
 		// socket.io uses debug, we don't need it
 		new webpack.NormalModuleReplacementPlugin(
 			/debug/,
diff --git a/yarn.lock b/yarn.lock
index ecf777b6..b8371652 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1300,11 +1300,6 @@ async-limiter@^1.0.0, async-limiter@~1.0.0:
   resolved "https://registry.yarnpkg.com/async-limiter/-/async-limiter-1.0.1.tgz#dd379e94f0db8310b08291f9d64c3209766617fd"
   integrity sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ==
 
-async@~0.2.10:
-  version "0.2.10"
-  resolved "https://registry.yarnpkg.com/async/-/async-0.2.10.tgz#b6bbe0b0674b9d719708ca38de8c237cb526c3d1"
-  integrity sha1-trvgsGdLnXGXCMo43owjfLUmw9E=
-
 asynckit@^0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
@@ -1442,11 +1437,6 @@ better-assert@~1.0.0:
   dependencies:
     callsite "1.0.0"
 
-big.js@^3.1.3:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/big.js/-/big.js-3.2.0.tgz#a5fc298b81b9e0dca2e458824784b65c52ba588e"
-  integrity sha512-+hN/Zh2D08Mx65pZ/4g5bsmNiZUuChDiQfTUQ7qJr4/kuopCr88xZsAXv6mBoZEsUI4OuGHlX59qE94K2mMW8Q==
-
 big.js@^5.2.2:
   version "5.2.2"
   resolved "https://registry.yarnpkg.com/big.js/-/big.js-5.2.2.tgz#65f0af382f578bcdc742bd9c281e9cb2d7768328"
@@ -1736,14 +1726,6 @@ callsites@^3.0.0:
   resolved "https://registry.yarnpkg.com/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73"
   integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==
 
-camel-case@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/camel-case/-/camel-case-3.0.0.tgz#ca3c3688a4e9cf3a4cda777dc4dcbc713249cf73"
-  integrity sha1-yjw2iKTpzzpM2nd9xNy8cTJJz3M=
-  dependencies:
-    no-case "^2.2.0"
-    upper-case "^1.1.1"
-
 camelcase-keys@^4.0.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/camelcase-keys/-/camelcase-keys-4.2.0.tgz#a2aa5fb1af688758259c32c141426d78923b9b77"
@@ -1924,13 +1906,6 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
-clean-css@^4.2.1:
-  version "4.2.1"
-  resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.2.1.tgz#2d411ef76b8569b6d0c84068dabe85b0aa5e5c17"
-  integrity sha512-4ZxI6dy4lrY6FHzfiy1aEOXgu4LIsW2MhwG0VBKdcoGoH/XLFgaHSdLTGr4O8Be6A8r3MOphEiI8Gc1n0ecf3g==
-  dependencies:
-    source-map "~0.6.0"
-
 cli-cursor@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/cli-cursor/-/cli-cursor-3.1.0.tgz#264305a7ae490d1d03bf0c9ba7c925d1753af307"
@@ -2045,7 +2020,12 @@ commander@4.0.1:
   resolved "https://registry.yarnpkg.com/commander/-/commander-4.0.1.tgz#b67622721785993182e807f4883633e6401ba53c"
   integrity sha512-IPF4ouhCP+qdlcmCedhxX4xiGBPyigb8v5NeUp+0LyhwLgxMqyp3S0vl7TAPfS/hiP7FC3caI/PB9lTmP8r1NA==
 
-commander@^2.19.0, commander@^2.20.0, commander@~2.20.3:
+commander@^2.20.0:
+  version "2.20.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.0.tgz#d58bb2b5c1ee8f87b0d340027e9e94e222c5a422"
+  integrity sha512-7j2y+40w61zy6YC2iRNpUe/NwhNyoXrYpHMrSunaMG64nRnaf96zO/KMQR4OyN/UnE5KLyEBnKHd4aG3rskjpQ==
+
+commander@~2.20.0:
   version "2.20.3"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
   integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
@@ -2421,11 +2401,6 @@ css-what@^3.2.1:
   resolved "https://registry.yarnpkg.com/css-what/-/css-what-3.2.1.tgz#f4a8f12421064621b456755e34a03a2c22df5da1"
   integrity sha512-WwOrosiQTvyms+Ti5ZC5vGEK0Vod3FTt1ca+payZqvKuGJF+dq7bG63DstxtN0dpm6FxY27a/zS3Wten+gEtGw==
 
-css.escape@1.5.1:
-  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/css.escape/-/css.escape-1.5.1.tgz#42e27d4fa04ae32f931a4b4d4191fa9cddee97cb"
-  integrity sha1-QuJ9T6BK4y+TGktNQZH6nN3ul8s=
-
 cssdb@^4.4.0:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/cssdb/-/cssdb-4.4.0.tgz#3bf2f2a68c10f5c6a08abd92378331ee803cddb0"
@@ -2535,6 +2510,11 @@ dashdash@^1.12.0:
   dependencies:
     assert-plus "^1.0.0"
 
+dayjs@1.8.17:
+  version "1.8.17"
+  resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.8.17.tgz#53ec413f2a7b02afbea1846d61bb260fa8567cea"
+  integrity sha512-47VY/htqYqr9GHd7HW/h56PpQzRBSJcxIQFwqL3P20bMF/3az5c3PWdVY3LmPXFl6cQCYHL7c79b9ov+2bOBbw==
+
 de-indent@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/de-indent/-/de-indent-1.0.2.tgz#b2038e846dc33baa5796128d0804b455b8c1e21d"
@@ -3353,11 +3333,6 @@ fast-text-encoding@^1.0.0:
   resolved "https://registry.yarnpkg.com/fast-text-encoding/-/fast-text-encoding-1.0.0.tgz#3e5ce8293409cfaa7177a71b9ca84e1b1e6f25ef"
   integrity sha512-R9bHCvweUxxwkDwhjav5vxpFvdPGlVngtqmx4pIZfSUhM/Q4NiIUHB456BAf+Q1Nwu3HEZYONtu+Rya+af4jiQ==
 
-fastparse@^1.0.0:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/fastparse/-/fastparse-1.1.2.tgz#91728c5a5942eced8531283c79441ee4122c35a9"
-  integrity sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ==
-
 fastq@^1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/fastq/-/fastq-1.6.0.tgz#4ec8a38f4ac25f21492673adb7eae9cfef47d1c2"
@@ -3857,27 +3832,6 @@ growl@1.10.5:
   resolved "https://registry.yarnpkg.com/growl/-/growl-1.10.5.tgz#f2735dc2283674fa67478b10181059355c369e5e"
   integrity sha512-qBr4OuELkhPenW6goKVXiv47US3clb3/IbuWF9KNKEijAy9oeHxU9IgzjvJhHkUzhaj7rOUD7+YGWqUjLp5oSA==
 
-handlebars-loader@1.7.1:
-  version "1.7.1"
-  resolved "https://registry.yarnpkg.com/handlebars-loader/-/handlebars-loader-1.7.1.tgz#07088f09d8a559344908f7c88c68c0ffdacc555d"
-  integrity sha512-Q+Z/hDPQzU8ZTlVnAe/0T1LHABlyhL7opNcSKcQDhmUXK2ByGTqib1Z2Tfv4Ic50WqDcLFWQcOb3mhjcBRbscQ==
-  dependencies:
-    async "~0.2.10"
-    fastparse "^1.0.0"
-    loader-utils "1.0.x"
-    object-assign "^4.1.0"
-
-handlebars@4.1.2:
-  version "4.1.2"
-  resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.1.2.tgz#b6b37c1ced0306b221e094fc7aca3ec23b131b67"
-  integrity sha512-nvfrjqvt9xQ8Z/w0ijewdD/vvWDTOweBUm96NTr66Wfvo1mJenBLwcYmPs3TIBP5ruzYGD7Hx/DaM9RmhroGPw==
-  dependencies:
-    neo-async "^2.6.0"
-    optimist "^0.6.1"
-    source-map "^0.6.1"
-  optionalDependencies:
-    uglify-js "^3.1.4"
-
 handlebars@^4.1.2:
   version "4.5.3"
   resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.5.3.tgz#5cf75bd8714f7605713511a56be7c349becb0482"
@@ -4007,7 +3961,7 @@ hasha@^3.0.0:
   dependencies:
     is-stream "^1.0.1"
 
-he@1.2.0, he@^1.1.0, he@^1.2.0:
+he@1.2.0, he@^1.1.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
   integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
@@ -4058,26 +4012,6 @@ html-entities@^1.2.0:
   resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-1.2.1.tgz#0df29351f0721163515dfb9e5543e5f6eed5162f"
   integrity sha1-DfKTUfByEWNRXfueVUPl9u7VFi8=
 
-html-minifier-loader@1.4.1:
-  version "1.4.1"
-  resolved "https://registry.yarnpkg.com/html-minifier-loader/-/html-minifier-loader-1.4.1.tgz#65f05e2a5f91f6b0713cc2081ae4ebe4bfc0d696"
-  integrity sha1-ZfBeKl+R9rBxPMIIGuTr5L/A1pY=
-  dependencies:
-    loader-utils "^1.1.0"
-
-html-minifier@4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/html-minifier/-/html-minifier-4.0.0.tgz#cca9aad8bce1175e02e17a8c33e46d8988889f56"
-  integrity sha512-aoGxanpFPLg7MkIl/DDFYtb0iWz7jMFGqFhvEDZga6/4QTjneiD8I/NXL1x5aaoCp7FSIT6h/OhykDdPsbtMig==
-  dependencies:
-    camel-case "^3.0.0"
-    clean-css "^4.2.1"
-    commander "^2.19.0"
-    he "^1.2.0"
-    param-case "^2.1.1"
-    relateurl "^0.2.7"
-    uglify-js "^3.5.1"
-
 html-tags@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/html-tags/-/html-tags-3.1.0.tgz#7b5e6f7e665e9fb41f30007ed9e0d41e97fb2140"
@@ -4758,11 +4692,6 @@ istanbul-reports@^2.2.4:
   dependencies:
     handlebars "^4.1.2"
 
-jquery@3.4.1:
-  version "3.4.1"
-  resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.4.1.tgz#714f1f8d9dde4bdfa55764ba37ef214630d80ef2"
-  integrity sha512-36+AdBzCL+y6qjw5Tx7HgzeGCzC81MDDgaUP8ld2zhx58HdqXGoBd+tHdrBMiyjGQs0Hxs/MLZTu/eHNJJuWPw==
-
 js-levenshtein@^1.1.3:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/js-levenshtein/-/js-levenshtein-1.1.6.tgz#c6cee58eb3550372df8deb85fad5ce66ce01d59d"
@@ -4826,11 +4755,6 @@ json-stringify-safe@~5.0.1:
   resolved "https://registry.yarnpkg.com/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz#1296a2d58fd45f19a0f6ce01d65701e2c735b6eb"
   integrity sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=
 
-json5@^0.5.0:
-  version "0.5.1"
-  resolved "https://registry.yarnpkg.com/json5/-/json5-0.5.1.tgz#1eade7acc012034ad84e2396767ead9fa5495821"
-  integrity sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE=
-
 json5@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/json5/-/json5-1.0.1.tgz#779fb0018604fa854eacbf6252180d83543e3dbe"
@@ -4988,15 +4912,6 @@ loader-runner@^2.4.0:
   resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-2.4.0.tgz#ed47066bfe534d7e84c4c7b9998c2a75607d9357"
   integrity sha512-Jsmr89RcXGIwivFY21FcRrisYZfvLMTWx5kOLc+JTxtpBOG6xML0vzbc6SEQG2FO9/4Fc3wW4LVcB5DmGflaRw==
 
-loader-utils@1.0.x:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.0.4.tgz#13f56197f1523a305891248b4c7244540848426c"
-  integrity sha1-E/Vhl/FSOjBYkSSLTHJEVAhIQmw=
-  dependencies:
-    big.js "^3.1.3"
-    emojis-list "^2.0.0"
-    json5 "^0.5.0"
-
 loader-utils@1.2.3, loader-utils@^1.0.2, loader-utils@^1.1.0, loader-utils@^1.2.3:
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.2.3.tgz#1ff5dc6911c9f0a062531a4c04b609406108c2c7"
@@ -5108,11 +5023,6 @@ loud-rejection@^1.0.0:
     currently-unhandled "^0.4.1"
     signal-exit "^3.0.0"
 
-lower-case@^1.1.1:
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/lower-case/-/lower-case-1.1.4.tgz#9a2cabd1b9e8e0ae993a4bf7d5875c39c42e8eac"
-  integrity sha1-miyr0bno4K6ZOkv31YdcOcQujqw=
-
 lowercase-keys@^1.0.0, lowercase-keys@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/lowercase-keys/-/lowercase-keys-1.0.1.tgz#6f9e30b47084d971a7c820ff15a6c5167b74c26f"
@@ -5518,11 +5428,6 @@ mochapack@1.1.11:
     toposort "^2.0.2"
     yargs "14.0.0"
 
-moment@2.24.0:
-  version "2.24.0"
-  resolved "https://registry.yarnpkg.com/moment/-/moment-2.24.0.tgz#0d055d53f5052aa653c9f6eb68bb5d12bf5c2b5b"
-  integrity sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg==
-
 mousetrap@1.6.3:
   version "1.6.3"
   resolved "https://registry.yarnpkg.com/mousetrap/-/mousetrap-1.6.3.tgz#80fee49665fd478bccf072c9d46bdf1bfed3558a"
@@ -5643,13 +5548,6 @@ nise@^1.5.2:
     lolex "^4.1.0"
     path-to-regexp "^1.7.0"
 
-no-case@^2.2.0:
-  version "2.3.2"
-  resolved "https://registry.yarnpkg.com/no-case/-/no-case-2.3.2.tgz#60b813396be39b3f1288a4c1ed5d1e7d28b464ac"
-  integrity sha512-rmTZ9kz+f3rCvK2TD1Ue/oZlns7OGoIWP4fc3llxxRXlOkHKoWPPWJOfFYpITabSow43QJbRIoHQXtt10VldyQ==
-  dependencies:
-    lower-case "^1.1.1"
-
 node-environment-flags@1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/node-environment-flags/-/node-environment-flags-1.0.5.tgz#fa930275f5bf5dae188d6192b24b4c8bbac3d76a"
@@ -6154,13 +6052,6 @@ parallel-transform@^1.1.0:
     inherits "^2.0.3"
     readable-stream "^2.1.5"
 
-param-case@^2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/param-case/-/param-case-2.1.1.tgz#df94fd8cf6531ecf75e6bef9a0858fbc72be2247"
-  integrity sha1-35T9jPZTHs915r75oIWPvHK+Ikc=
-  dependencies:
-    no-case "^2.2.0"
-
 parent-module@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/parent-module/-/parent-module-1.0.1.tgz#691d2709e78c79fae3a156622452d00762caaaa2"
@@ -7493,11 +7384,6 @@ regjsparser@^0.6.0:
   dependencies:
     jsesc "~0.5.0"
 
-relateurl@^0.2.7:
-  version "0.2.7"
-  resolved "https://registry.yarnpkg.com/relateurl/-/relateurl-0.2.7.tgz#54dbf377e51440aca90a4cd274600d3ff2d888a9"
-  integrity sha1-VNvzd+UUQKypCkzSdGANP/LYiKk=
-
 release-zalgo@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/release-zalgo/-/release-zalgo-1.0.0.tgz#09700b7e5074329739330e535c5a90fb67851730"
@@ -8093,7 +7979,7 @@ source-map@^0.5.0, source-map@^0.5.6:
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
   integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=
 
-source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.0, source-map@~0.6.1:
+source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
   integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
@@ -8831,12 +8717,12 @@ uc.micro@^1.0.1:
   resolved "https://registry.yarnpkg.com/uc.micro/-/uc.micro-1.0.6.tgz#9c411a802a409a91fc6cf74081baba34b24499ac"
   integrity sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==
 
-uglify-js@^3.1.4, uglify-js@^3.5.1:
-  version "3.6.9"
-  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.6.9.tgz#85d353edb6ddfb62a9d798f36e91792249320611"
-  integrity sha512-pcnnhaoG6RtrvHJ1dFncAe8Od6Nuy30oaJ82ts6//sGSXOP5UjBMEthiProjXmMNHOfd93sqlkztifFMcb+4yw==
+uglify-js@^3.1.4:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.6.0.tgz#704681345c53a8b2079fb6cec294b05ead242ff5"
+  integrity sha512-W+jrUHJr3DXKhrsS7NUVxn3zqMOFn0hL/Ei6v0anCIMoKC93TjcflTagwIHLW7SfMFfiQuktQyFVCFHGUE0+yg==
   dependencies:
-    commander "~2.20.3"
+    commander "~2.20.0"
     source-map "~0.6.1"
 
 undate@0.3.0:
@@ -9001,11 +8887,6 @@ upath@^1.1.1:
   resolved "https://registry.yarnpkg.com/upath/-/upath-1.2.0.tgz#8f66dbcd55a883acdae4408af8b035a5044c1894"
   integrity sha512-aZwGpamFO61g3OlfT7OQCHqhGnW43ieH9WZeP7QxN/G/jS4jfqUkZxoryvJgVPEcrl5NL/ggHsSmLMHuH64Lhg==
 
-upper-case@^1.1.1:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/upper-case/-/upper-case-1.1.3.tgz#f6b4501c2ec4cdd26ba78be7222961de77621598"
-  integrity sha1-9rRQHC7EzdJrp4vnIilh3ndiFZg=
-
 uri-js@^4.2.2:
   version "4.2.2"
   resolved "https://registry.yarnpkg.com/uri-js/-/uri-js-4.2.2.tgz#94c540e1ff772956e2299507c010aea6c8838eb0"
@@ -9187,6 +9068,11 @@ vue-loader@15.7.2:
     vue-hot-reload-api "^2.3.0"
     vue-style-loader "^4.1.0"
 
+vue-router@3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.1.3.tgz#e6b14fabc0c0ee9fda0e2cbbda74b350e28e412b"
+  integrity sha512-8iSa4mGNXBjyuSZFCCO4fiKfvzqk+mhL0lnKuGcQtO1eoj8nq3CmbEG8FwK5QqoqwDgsjsf1GDuisDX4cdb/aQ==
+
 vue-server-renderer@2.6.10:
   version "2.6.10"
   resolved "https://registry.yarnpkg.com/vue-server-renderer/-/vue-server-renderer-2.6.10.tgz#cb2558842ead360ae2ec1f3719b75564a805b375"
@@ -9234,6 +9120,11 @@ vuedraggable@2.23.2:
   dependencies:
     sortablejs "^1.10.1"
 
+vuex@3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/vuex/-/vuex-3.1.2.tgz#a2863f4005aa73f2587e55c3fadf3f01f69c7d4d"
+  integrity sha512-ha3jNLJqNhhrAemDXcmMJMKf1Zu4sybMPr9KxJIuOpVcsDQlTBYLLladav2U+g1AvdYDG5Gs0xBTb0M5pXXYFQ==
+
 watchpack@^1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-1.6.0.tgz#4bc12c2ebe8aa277a71f1d3f14d685c7b446cd00"