From b4d02c3c5689f17c260b6a3a89a0e16e779c7b85 Mon Sep 17 00:00:00 2001
From: Richard Lewis <richrd.lewis@gmail.com>
Date: Fri, 24 Apr 2020 10:20:40 +0300
Subject: [PATCH] Fix context menus in search results.

---
 client/components/ContextMenu.vue    |  19 +-
 client/components/Message.vue        |  13 +-
 client/components/Username.vue       |   4 +
 client/js/autocompletion-custom.js   | 340 ---------------------------
 client/js/helpers/contextMenu.js     |   6 +-
 client/js/helpers/parse.js           |   5 +
 client/js/store.js                   |  34 ++-
 src/plugins/messageStorage/sqlite.js |   8 +-
 8 files changed, 70 insertions(+), 359 deletions(-)
 delete mode 100644 client/js/autocompletion-custom.js

diff --git a/client/components/ContextMenu.vue b/client/components/ContextMenu.vue
index a1cfefc2..5b0b99d8 100644
--- a/client/components/ContextMenu.vue
+++ b/client/components/ContextMenu.vue
@@ -75,14 +75,19 @@ export default {
 			this.open(data.event, items);
 		},
 		openUserContextMenu(data) {
-			const {network, channel} = this.$store.state.activeChannel;
+			const activeChannel = this.$store.state.activeChannel;
+			// If there's an active network and channel use them
+			let {network, channel} = activeChannel ? activeChannel : {network: null, channel: null};
 
-			const items = generateUserContextMenu(
-				this.$root,
-				channel,
-				network,
-				channel.users.find((u) => u.nick === data.user.nick) || {nick: data.user.nick}
-			);
+			// Use network and channel from event if specified
+			network = data.network ? data.network : network;
+			channel = data.channel ? data.channel : channel;
+
+			const defaultUser = {nick: data.user.nick};
+			let user = channel ? channel.users.find((u) => u.nick === data.user.nick) : defaultUser;
+			user = user ? user : defaultUser;
+
+			const items = generateUserContextMenu(this.$root, channel, network, user);
 			this.open(data.event, items);
 		},
 		open(event, items) {
diff --git a/client/components/Message.vue b/client/components/Message.vue
index 96bdafcf..e27c50fd 100644
--- a/client/components/Message.vue
+++ b/client/components/Message.vue
@@ -24,9 +24,12 @@
 		<template v-else-if="message.type === 'action'">
 			<span class="from"><span class="only-copy">* </span></span>
 			<span class="content" dir="auto">
-				<Username :user="message.from" dir="auto" />&#32;<ParsedMessage
-					:message="message"
-				/>
+				<Username
+					:user="message.from"
+					:network="network"
+					:channel="channel"
+					dir="auto"
+				/>&#32;<ParsedMessage :message="message" />
 				<LinkPreview
 					v-for="preview in message.previews"
 					:key="preview.link"
@@ -40,7 +43,7 @@
 			<span v-if="message.type === 'message'" class="from">
 				<template v-if="message.from && message.from.nick">
 					<span class="only-copy">&lt;</span>
-					<Username :user="message.from" />
+					<Username :user="message.from" :network="network" :channel="channel" />
 					<span class="only-copy">&gt; </span>
 				</template>
 			</span>
@@ -54,7 +57,7 @@
 			<span v-else class="from">
 				<template v-if="message.from && message.from.nick">
 					<span class="only-copy">-</span>
-					<Username :user="message.from" />
+					<Username :user="message.from" :network="network" :channel="channel" />
 					<span class="only-copy">- </span>
 				</template>
 			</span>
diff --git a/client/components/Username.vue b/client/components/Username.vue
index a301da37..ea3a2011 100644
--- a/client/components/Username.vue
+++ b/client/components/Username.vue
@@ -19,6 +19,8 @@ export default {
 		user: Object,
 		active: Boolean,
 		onHover: Function,
+		channel: Object,
+		network: Object,
 	},
 	computed: {
 		nickColor() {
@@ -33,6 +35,8 @@ export default {
 			this.$root.$emit("contextmenu:user", {
 				event: event,
 				user: this.user,
+				network: this.network,
+				channel: this.channel,
 			});
 		},
 	},
diff --git a/client/js/autocompletion-custom.js b/client/js/autocompletion-custom.js
deleted file mode 100644
index 8e237323..00000000
--- a/client/js/autocompletion-custom.js
+++ /dev/null
@@ -1,340 +0,0 @@
-/*
-"use strict";
-
-const constants = require("./constants");
-
-import Mousetrap from "mousetrap";
-import {Textcomplete, Textarea} from "textcomplete";
-import fuzzy from "fuzzy";
-
-import emojiMap from "./helpers/simplemap.json";
-import store from "./store";
-
-export default enableAutocomplete;
-
-export default class CustomTextarea extends Textarea {
-
-}
-
-const emojiSearchTerms = Object.keys(emojiMap);
-const emojiStrategy = {
-	id: "emoji",
-	match: /(^|\s):([-+\w:?]{2,}):?$/,
-	search(term, callback) {
-		// Trim colon from the matched term,
-		// as we are unable to get a clean string from match regex
-		term = term.replace(/:$/, "");
-		callback(fuzzyGrep(term, emojiSearchTerms));
-	},
-	template([string, original]) {
-		return `<span class="emoji">${emojiMap[original]}</span> ${string}`;
-	},
-	replace([, original]) {
-		return "$1" + emojiMap[original];
-	},
-	index: 2,
-};
-
-const nicksStrategy = {
-	id: "nicks",
-	match: /(^|\s)(@([a-zA-Z_[\]\\^{}|`@][a-zA-Z0-9_[\]\\^{}|`-]*)?)$/,
-	search(term, callback) {
-		term = term.slice(1);
-
-		if (term[0] === "@") {
-			callback(completeNicks(term.slice(1), true).map((val) => ["@" + val[0], "@" + val[1]]));
-		} else {
-			callback(completeNicks(term, true));
-		}
-	},
-	template([string]) {
-		return string;
-	},
-	replace([, original]) {
-		return "$1" + replaceNick(original);
-	},
-	index: 2,
-};
-
-const chanStrategy = {
-	id: "chans",
-	match: /(^|\s)((?:#|\+|&|![A-Z0-9]{5})(?:[^\s]+)?)$/,
-	search(term, callback) {
-		callback(completeChans(term));
-	},
-	template([string]) {
-		return string;
-	},
-	replace([, original]) {
-		return "$1" + original;
-	},
-	index: 2,
-};
-
-const commandStrategy = {
-	id: "commands",
-	match: /^\/(\w*)$/,
-	search(term, callback) {
-		callback(completeCommands("/" + term));
-	},
-	template([string]) {
-		return string;
-	},
-	replace([, original]) {
-		return original;
-	},
-	index: 1,
-};
-
-const foregroundColorStrategy = {
-	id: "foreground-colors",
-	match: /\x03(\d{0,2}|[A-Za-z ]{0,10})$/,
-	search(term, callback) {
-		term = term.toLowerCase();
-
-		const matchingColorCodes = constants.colorCodeMap
-			.filter((i) => fuzzy.test(term, i[0]) || fuzzy.test(term, i[1]))
-			.map((i) => {
-				if (fuzzy.test(term, i[1])) {
-					return [
-						i[0],
-						fuzzy.match(term, i[1], {
-							pre: "<b>",
-							post: "</b>",
-						}).rendered,
-					];
-				}
-
-				return i;
-			});
-
-		callback(matchingColorCodes);
-	},
-	template(value) {
-		return `<span class="irc-fg${parseInt(value[0], 10)}">${value[1]}</span>`;
-	},
-	replace(value) {
-		return "\x03" + value[0];
-	},
-	index: 1,
-};
-
-const backgroundColorStrategy = {
-	id: "background-colors",
-	match: /\x03(\d{2}),(\d{0,2}|[A-Za-z ]{0,10})$/,
-	search(term, callback, match) {
-		term = term.toLowerCase();
-		const matchingColorCodes = constants.colorCodeMap
-			.filter((i) => fuzzy.test(term, i[0]) || fuzzy.test(term, i[1]))
-			.map((pair) => {
-				if (fuzzy.test(term, pair[1])) {
-					return [
-						pair[0],
-						fuzzy.match(term, pair[1], {
-							pre: "<b>",
-							post: "</b>",
-						}).rendered,
-					];
-				}
-
-				return pair;
-			})
-			.map((pair) => pair.concat(match[1])); // Needed to pass fg color to `template`...
-
-		callback(matchingColorCodes);
-	},
-	template(value) {
-		return `<span class="irc-fg${parseInt(value[2], 10)} irc-bg irc-bg${parseInt(
-			value[0],
-			10
-		)}">${value[1]}</span>`;
-	},
-	replace(value) {
-		return "\x03$1," + value[0];
-	},
-	index: 2,
-};
-
-function enableAutocomplete(input,) {
-	let tabCount = 0;
-	let lastMatch = "";
-	let currentMatches = [];
-
-	input.addEventListener("input", (e) => {
-		if (e.detail === "autocomplete") {
-			return;
-		}
-
-		tabCount = 0;
-		currentMatches = [];
-		lastMatch = "";
-	});
-
-	Mousetrap(input).bind(
-		"tab",
-		(e) => {
-			if (store.state.isAutoCompleting) {
-				return;
-			}
-
-			e.preventDefault();
-
-			const text = input.value;
-
-			if (tabCount === 0) {
-				lastMatch = text
-					.substring(0, input.selectionStart)
-					.split(/\s/)
-					.pop();
-
-				if (lastMatch.length === 0) {
-					return;
-				}
-
-				currentMatches = completeNicks(lastMatch, false);
-
-				if (currentMatches.length === 0) {
-					return;
-				}
-			}
-
-			const position = input.selectionStart - lastMatch.length;
-			const newMatch = replaceNick(
-				currentMatches[tabCount % currentMatches.length],
-				position
-			);
-			const remainder = text.substr(input.selectionStart);
-
-			input.value = text.substr(0, position) + newMatch + remainder;
-			input.selectionStart -= remainder.length;
-			input.selectionEnd = input.selectionStart;
-
-			// Propagate change to Vue model
-			input.dispatchEvent(
-				new CustomEvent("input", {
-					detail: "autocomplete",
-				})
-			);
-
-			lastMatch = newMatch;
-			tabCount++;
-		},
-		"keydown"
-	);
-
-	const editor = new CustomTextarea(input);
-	const textcomplete = new Textcomplete(editor, {
-		dropdown: {
-			className: "textcomplete-menu",
-			placement: "top",
-		},
-	});
-
-	textcomplete.register([
-		emojiStrategy,
-		nicksStrategy,
-		chanStrategy,
-		commandStrategy,
-		foregroundColorStrategy,
-		backgroundColorStrategy,
-	]);
-
-	// Activate the first item by default
-	// https://github.com/yuku-t/textcomplete/issues/93
-	textcomplete.on("rendered", () => {
-		if (textcomplete.dropdown.items.length > 0) {
-			textcomplete.dropdown.items[0].activate();
-		}
-	});
-
-	textcomplete.on("show", () => {
-		store.commit("isAutoCompleting", true);
-	});
-
-	textcomplete.on("hidden", () => {
-		store.commit("isAutoCompleting", false);
-	});
-
-	return {
-		hide() {
-			textcomplete.hide();
-		},
-		destroy() {
-			textcomplete.destroy();
-			store.commit("isAutoCompleting", false);
-		},
-	};
-}
-
-function replaceNick(original, position = 1) {
-	// If no postfix specified, return autocompleted nick as-is
-	if (!store.state.settings.nickPostfix) {
-		return original;
-	}
-
-	// If there is whitespace in the input already, append space to nick
-	if (position > 0 && /\s/.test(store.state.activeChannel.channel.pendingMessage)) {
-		return original + " ";
-	}
-
-	// If nick is first in the input, append specified postfix
-	return original + store.state.settings.nickPostfix;
-}
-
-function fuzzyGrep(term, array) {
-	const results = fuzzy.filter(term, array, {
-		pre: "<b>",
-		post: "</b>",
-	});
-	return results.map((el) => [el.string, el.original]);
-}
-
-function rawNicks() {
-	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 = 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 && store.state.activeChannel.channel.type === "query") {
-		return [otherUser, me];
-	}
-
-	// Return our own name by default for anything that isn't a channel or query
-	return [me];
-}
-
-function completeNicks(word, isFuzzy) {
-	const users = rawNicks();
-	word = word.toLowerCase();
-
-	if (isFuzzy) {
-		return fuzzyGrep(word, users);
-	}
-
-	return users.filter((w) => !w.toLowerCase().indexOf(word));
-}
-
-function completeCommands(word) {
-	const words = constants.commands.slice();
-
-	return fuzzyGrep(word, words);
-}
-
-function completeChans(word) {
-	const words = [];
-
-	for (const channel of store.state.activeChannel.network.channels) {
-		// Push all channels that start with the same CHANTYPE
-		if (channel.type === "channel" && channel.name[0] === word[0]) {
-			words.push(channel.name);
-		}
-	}
-
-	return fuzzyGrep(word, words);
-}
-*/
diff --git a/client/js/helpers/contextMenu.js b/client/js/helpers/contextMenu.js
index 49b3834e..f55e14f2 100644
--- a/client/js/helpers/contextMenu.js
+++ b/client/js/helpers/contextMenu.js
@@ -170,10 +170,12 @@ export function generateChannelContextMenu($root, channel, network) {
 }
 
 export function generateUserContextMenu($root, channel, network, user) {
-	const currentChannelUser = channel.users.find((u) => u.nick === network.nick) || {};
+	const currentChannelUser = channel
+		? channel.users.find((u) => u.nick === network.nick) || {}
+		: {};
 
 	const whois = () => {
-		const chan = $root.$store.getters.findChannelOnCurrentNetwork(user.nick);
+		const chan = network.channels.find((c) => c.name === user.nick);
 
 		if (chan) {
 			$root.switchToChannel(chan);
diff --git a/client/js/helpers/parse.js b/client/js/helpers/parse.js
index 69420cac..8f65f307 100644
--- a/client/js/helpers/parse.js
+++ b/client/js/helpers/parse.js
@@ -87,6 +87,9 @@ function parse(createElement, text, message = undefined, network = undefined) {
 
 	const parts = channelParts.concat(linkParts).concat(emojiParts).concat(nameParts);
 
+	// The channel the message belongs to might not exist if the user isn't joined to it.
+	const messageChannel = message ? message.channel : null;
+
 	// Merge the styling information with the channels / URLs / nicks / text objects and
 	// generate HTML strings with the resulting fragments
 	return merge(parts, styleFragments, cleanText).map((textPart) => {
@@ -184,6 +187,8 @@ function parse(createElement, text, message = undefined, network = undefined) {
 						user: {
 							nick: textPart.nick,
 						},
+						channel: messageChannel,
+						network,
 					},
 					attrs: {
 						dir: "auto",
diff --git a/client/js/store.js b/client/js/store.js
index 2fc66a53..af289965 100644
--- a/client/js/store.js
+++ b/client/js/store.js
@@ -17,7 +17,23 @@ function detectDesktopNotificationState() {
 	return "blocked";
 }
 
-const store = new Vuex.Store({
+let store = null;
+
+const setMessageNetworkChannel = (message) => {
+	const channelAndNetwork = store.getters.findChannelOnNetwork(
+		message.networkUuid,
+		message.channelName
+	);
+
+	if (channelAndNetwork) {
+		message.network = channelAndNetwork.network;
+		message.channel = channelAndNetwork.channel;
+	}
+
+	return message;
+};
+
+store = new Vuex.Store({
 	state: {
 		appLoaded: false,
 		activeChannel: null,
@@ -118,10 +134,24 @@ const store = new Vuex.Store({
 			state.messageSearchInProgress = value;
 		},
 		messageSearchResults(state, value) {
+			if (value) {
+				// Set the search results and add networks and channels to messages
+				state.messageSearchResults = {
+					...value,
+					...value.results.map(setMessageNetworkChannel),
+				};
+				return;
+			}
+
 			state.messageSearchResults = value;
 		},
 		addMessageSearchResults(state, value) {
-			value.results = [...state.messageSearchResults.results, ...value.results];
+			// Append the search results and add networks and channels to new messages
+			value.results = [
+				...state.messageSearchResults.results,
+				...value.results.map(setMessageNetworkChannel),
+			];
+
 			state.messageSearchResults = value;
 		},
 	},
diff --git a/src/plugins/messageStorage/sqlite.js b/src/plugins/messageStorage/sqlite.js
index 40a27fe9..cadd0edd 100644
--- a/src/plugins/messageStorage/sqlite.js
+++ b/src/plugins/messageStorage/sqlite.js
@@ -208,7 +208,7 @@ class MessageStorage {
 		}
 
 		let select =
-			'SELECT msg, type, time, channel FROM messages WHERE type = "message" AND (json_extract(msg, "$.text") LIKE ?';
+			'SELECT msg, type, time, network, channel FROM messages WHERE type = "message" AND (json_extract(msg, "$.text") LIKE ?';
 		const params = [`%${query.searchTerm}%`];
 
 		if (query.searchNicks) {
@@ -245,7 +245,7 @@ class MessageStorage {
 						target: query.channelName,
 						networkUuid: query.networkUuid,
 						offset: query.offset,
-						results: parseRowsToMessages(query.offset, rows),
+						results: parseSearchRowsToMessages(query.offset, rows),
 					};
 					resolve(response);
 				}
@@ -260,13 +260,15 @@ class MessageStorage {
 
 module.exports = MessageStorage;
 
-function parseRowsToMessages(id, rows) {
+function parseSearchRowsToMessages(id, rows) {
 	const messages = [];
 
 	for (const row of rows) {
 		const msg = JSON.parse(row.msg);
 		msg.time = row.time;
 		msg.type = row.type;
+		msg.networkUuid = row.network;
+		msg.channelName = row.channel;
 		msg.id = id;
 		messages.push(new Msg(msg));
 		id += 1;