Replace confirm() with context menu

window.confirm() blocks the javascript thread and will cause the socket connection to drop

client/components/ContextMenu.vue

@@ -35,7 +35,11 @@
 
 <script>
 import Mousetrap from "mousetrap";
-import {generateUserContextMenu, generateChannelContextMenu} from "../js/helpers/contextMenu.js";
+import {
+	generateUserContextMenu,
+	generateChannelContextMenu,
+	generateRemoveNetwork,
+} from "../js/helpers/contextMenu.js";
 
 export default {
 	name: "ContextMenu",
@@ -60,6 +64,7 @@ export default {
 
 		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);
@@ -67,8 +72,13 @@ export default {
 
 		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);
@@ -117,12 +127,12 @@ export default {
 			this.activeItem = id;
 		},
 		clickItem(item) {
+			this.close();
+
 			if (item.action) {
 				item.action();
-				this.close();
 			} else if (item.link) {
 				this.$router.push(item.link);
-				this.close();
 			}
 		},
 		clickActiveItem() {
@@ -142,7 +152,7 @@ export default {
 			const nextItem = this.items[currentIndex];
 
 			// If the next item we would select is a divider, skip over it
-			if (nextItem && !nextItem.action && !nextItem.link) {
+			if (nextItem && nextItem.type === "divider") {
 				currentIndex += direction;
 			}
 
@@ -166,7 +176,7 @@ export default {
 			const menuWidth = this.$refs.contextMenu.offsetWidth;
 			const menuHeight = this.$refs.contextMenu.offsetHeight;
 
-			if (element.classList.contains("menu")) {
+			if (element && element.classList.contains("menu")) {
 				return {
 					left: element.getBoundingClientRect().left - (menuWidth - element.offsetWidth),
 					top: element.getBoundingClientRect().top + element.offsetHeight,

client/js/helpers/contextMenu.js

@@ -265,3 +265,31 @@ export function generateUserContextMenu($root, channel, network, user) {
 
 	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",
+		},
+	];
+}

client/js/vue.js

@@ -30,19 +30,30 @@ const vueApp = new Vue({
 			navigate("RoutedChat", {id: channel.id});
 		},
 		closeChannel(channel) {
-			if (
-				channel.type === "lobby" &&
-				// eslint-disable-next-line no-alert
-				!confirm(`Are you sure you want to remove ${channel.name}?`)
-			) {
-				return false;
+			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: channel.type === "lobby" ? "/quit" : "/close",
+				text: "/close",
 			});
 		},
 	},