Add context menu when clicking inline channel name (#4376)

client/components/ContextMenu.vue

@@ -39,7 +39,11 @@
 </template>
 
 <script>
-import {generateUserContextMenu, generateChannelContextMenu} from "../js/helpers/contextMenu.js";
+import {
+	generateUserContextMenu,
+	generateChannelContextMenu,
+	generateInlineChannelContextMenu,
+} from "../js/helpers/contextMenu.js";
 import eventbus from "../js/eventbus";
 
 export default {
@@ -65,12 +69,14 @@ export default {
 		eventbus.on("contextmenu:cancel", this.close);
 		eventbus.on("contextmenu:user", this.openUserContextMenu);
 		eventbus.on("contextmenu:channel", this.openChannelContextMenu);
+		eventbus.on("contextmenu:inline-channel", this.openInlineChannelContextMenu);
 	},
 	destroyed() {
 		eventbus.off("escapekey", this.close);
 		eventbus.off("contextmenu:cancel", this.close);
 		eventbus.off("contextmenu:user", this.openUserContextMenu);
 		eventbus.off("contextmenu:channel", this.openChannelContextMenu);
+		eventbus.off("contextmenu:inline-channel", this.openInlineChannelContextMenu);
 
 		this.close();
 	},
@@ -94,6 +100,11 @@ export default {
 			const items = generateChannelContextMenu(this.$root, data.channel, data.network);
 			this.open(data.event, items);
 		},
+		openInlineChannelContextMenu(data) {
+			const {network} = this.$store.state.activeChannel;
+			const items = generateInlineChannelContextMenu(this.$root, data.channel, network);
+			this.open(data.event, items);
+		},
 		openUserContextMenu(data) {
 			const {network, channel} = this.$store.state.activeChannel;
 

client/components/InlineChannel.vue

@@ -1,11 +1,17 @@
 <template>
-	<span class="inline-channel" dir="auto" role="button" tabindex="0" @click="onClick"
+	<span
+		class="inline-channel"
+		dir="auto"
+		role="button"
+		tabindex="0"
+		@click.prevent="openContextMenu"
+		@contextmenu.prevent="openContextMenu"
 		><slot></slot
 	></span>
 </template>
 
 <script>
-import socket from "../js/socket";
+import eventbus from "../js/eventbus";
 
 export default {
 	name: "InlineChannel",
@@ -13,16 +19,10 @@ export default {
 		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,
+		openContextMenu() {
+			eventbus.emit("contextmenu:inline-channel", {
+				event: event,
+				channel: this.channel,
 			});
 		},
 	},

client/js/helpers/contextMenu.js

@@ -183,6 +183,43 @@ export function generateChannelContextMenu($root, channel, network) {
 	return items;
 }
 
+export function generateInlineChannelContextMenu($root, chan, network) {
+	const join = () => {
+		const channel = network.channels.find((c) => c.name === chan);
+
+		if (channel) {
+			$root.switchToChannel(channel);
+		}
+
+		socket.emit("input", {
+			target: $root.$store.state.activeChannel.channel.id,
+			text: "/join " + chan,
+		});
+	};
+
+	const channel = network.channels.find((c) => c.name === chan);
+
+	if (channel) {
+		return [
+			{
+				label: "Go to channel",
+				type: "item",
+				class: "chan",
+				link: `/chan-${channel.id}`,
+			},
+		];
+	}
+
+	return [
+		{
+			label: "Join channel",
+			type: "item",
+			class: "join",
+			action: join,
+		},
+	];
+}
+
 export function generateUserContextMenu($root, channel, network, user) {
 	const currentChannelUser = channel
 		? channel.users.find((u) => u.nick === network.nick) || {}