Implement closeChannel method.

client/components/Channel.vue

@@ -44,7 +44,7 @@ export default {
 	},
 	methods: {
 		close() {
-			this.$refs.wrapper.close();
+			this.$root.closeChannel(this.channel);
 		},
 	},
 };

client/components/ChannelWrapper.vue

@@ -14,7 +14,7 @@
 		:data-name="channel.name"
 		:aria-controls="'#chan-' + channel.id"
 		:aria-selected="activeChannel && channel === activeChannel.channel"
-		:style="closed ? {transition: 'none', opacity: 0.4} : null"
+		:style="channel.closed ? {transition: 'none', opacity: 0.4} : null"
 		role="tab"
 		@click="click"
 		@contextmenu.prevent="openContextMenu"
@@ -24,7 +24,6 @@
 </template>
 
 <script>
-import socket from "../js/socket";
 import isChannelCollapsed from "../js/helpers/isChannelCollapsed";
 
 export default {
@@ -33,11 +32,6 @@ export default {
 		network: Object,
 		channel: Object,
 	},
-	data() {
-		return {
-			closed: false,
-		};
-	},
 	computed: {
 		activeChannel() {
 			return this.$store.state.activeChannel;
@@ -47,14 +41,6 @@ export default {
 		},
 	},
 	methods: {
-		close() {
-			this.closed = true;
-
-			socket.emit("input", {
-				target: Number(this.channel.id),
-				text: "/close",
-			});
-		},
 		getAriaLabel() {
 			const extra = [];
 

client/components/NetworkLobby.vue

@@ -42,14 +42,12 @@
 				@click.stop="$emit('toggleJoinChannel')"
 			/>
 		</span>
-		<button class="close" hidden @click.stop="close" />
 	</ChannelWrapper>
 </template>
 
 <script>
 import roundBadgeNumber from "../js/helpers/roundBadgeNumber";
 import ChannelWrapper from "./ChannelWrapper.vue";
-import socket from "../js/socket";
 import storage from "../js/localStorage";
 
 export default {
@@ -73,17 +71,6 @@ export default {
 		},
 	},
 	methods: {
-		close() {
-			// eslint-disable-next-line no-alert
-			if (!confirm(`Are you sure you want to remove ${this.channel.name}?`)) {
-				return false;
-			}
-
-			socket.emit("input", {
-				target: Number(this.channel.id),
-				text: "/quit",
-			});
-		},
 		onCollapseClick() {
 			const networks = new Set(JSON.parse(storage.get("thelounge.networks.collapsed")));
 			this.network.isCollapsed = !this.network.isCollapsed;

client/js/helpers/contextMenu.js

@@ -139,13 +139,7 @@ export function generateChannelContextMenu($root, channel, network) {
 		type: "item",
 		class: "close",
 		action() {
-			const close = document.querySelector(
-				`.networks .chan[data-target="#chan-${channel.id}"] .close`
-			);
-
-			if (close) {
-				close.click();
-			}
+			$root.closeChannel(channel);
 		},
 	});
 

client/js/vue.js

@@ -29,6 +29,22 @@ const vueApp = new Vue({
 		switchToChannel(channel) {
 			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;
+			}
+
+			channel.closed = true;
+
+			socket.emit("input", {
+				target: Number(channel.id),
+				text: channel.type === "lobby" ? "/quit" : "/close",
+			});
+		},
 	},
 	render(createElement) {
 		return createElement(App, {