reactions.patch

commit 1fea5d213b25f7bf8a9bef405ef2e4a22bd2dfa3
Author: itsjohncs <johnsullivan.pem@gmail.com>
Date:   Tue Nov 2 01:27:12 2021 -0700

    wip

diff --git a/client/components/Message.vue b/client/components/Message.vue
index 4b3e5887..d6627a8f 100644
--- a/client/components/Message.vue
+++ b/client/components/Message.vue
@@ -91,6 +91,12 @@
 					:link="preview"
 					:channel="channel"
 				/>
+				<div class="msg-reactions">
+					<div
+						v-for="reaction in reactions"
+						class="msg-reaction"
+					>{{ reaction.reactionText }}</div>
+				</div>
 			</span>
 		</template>
 	</div>
@@ -141,6 +147,16 @@ export default {
 		messageComponent() {
 			return "message-" + this.message.type;
 		},
+		reactions() {
+			const serverId = this.message.serverId;
+
+			if (serverId && this.channel.reactions[serverId]) {
+				console.log("reactions", this.channel.reactions[serverId])
+				return this.channel.reactions[serverId];
+			}
+
+			return [];
+		}
 	},
 	methods: {
 		isAction() {
diff --git a/client/css/style.css b/client/css/style.css
index edf84fa5..c51c8cc2 100644
--- a/client/css/style.css
+++ b/client/css/style.css
@@ -518,6 +518,19 @@ p {
 	color: #222;
 }
 
+#chat .msg-reactions {
+	display: flex;
+}
+
+#chat .msg-reaction {
+	background-color: rgba(151, 234, 112, 0.15);
+	border-radius: 3px;
+	border: 1px solid #000;
+	padding: 0px 4px;
+	margin: 2px 4px;
+	color: #000;
+}
+
 #chat .toggle-button {
 	display: inline-block;
 	transition: opacity 0.2s, transform 0.2s;
diff --git a/client/js/.DS_Store b/client/js/.DS_Store
new file mode 100644
index 00000000..d4cdd6ea
Binary files /dev/null and b/client/js/.DS_Store differ
diff --git a/client/js/helpers/bucketMessages.js b/client/js/helpers/bucketMessages.js
new file mode 100644
index 00000000..86eec734
--- /dev/null
+++ b/client/js/helpers/bucketMessages.js
@@ -0,0 +1,20 @@
+"use strict";
+
+module.exports = bucketMessages;
+
+function bucketMessages(messages) {
+    const messagesWithReactions = [];
+    const messagesWithContent = [];
+
+    for (const msg of messages) {
+        if (msg.replyTo && msg.reactionText) {
+            messagesWithReactions.push(msg);
+        }
+
+        if (msg.type !== "tag_message") {
+            messagesWithContent.push(msg);
+        }
+    }
+
+    return {messagesWithReactions, messagesWithContent};
+}
diff --git a/client/js/socket-events/init.js b/client/js/socket-events/init.js
index fd0451d9..d85d7afd 100644
--- a/client/js/socket-events/init.js
+++ b/client/js/socket-events/init.js
@@ -1,6 +1,7 @@
 "use strict";
 
 import Vue from "vue";
+import bucketMessages from "../helpers/bucketMessages";
 import socket from "../socket";
 import storage from "../localStorage";
 import {router, switchToChannel, navigate} from "../router";
diff --git a/client/js/socket-events/more.js b/client/js/socket-events/more.js
index 34abf2c5..cd7e5e33 100644
--- a/client/js/socket-events/more.js
+++ b/client/js/socket-events/more.js
@@ -2,6 +2,7 @@
 
 import Vue from "vue";
 
+import bucketMessages from "../helpers/bucketMessages";
 import socket from "../socket";
 import store from "../store";
 
@@ -21,7 +22,11 @@ socket.on("more", function (data) {
 	);
 	channel.moreHistoryAvailable =
 		data.totalMessages > channel.messages.length + data.messages.length;
-	channel.messages.unshift(...data.messages);
+
+	const {messagesWithReactions, messagesWithContent} = bucketMessages(data.messages);
+
+	store.commit("addReactions", {channelId: data.chan, messages: messagesWithReactions});
+	channel.messages.unshift(...messagesWithContent);
 
 	Vue.nextTick(() => {
 		channel.historyLoading = false;
diff --git a/client/js/socket-events/msg.js b/client/js/socket-events/msg.js
index 682274a2..ccc290cb 100644
--- a/client/js/socket-events/msg.js
+++ b/client/js/socket-events/msg.js
@@ -1,6 +1,7 @@
 "use strict";
 
 import socket from "../socket";
+import bucketMessages from "../helpers/bucketMessages";
 import cleanIrcMessage from "../helpers/ircmessageparser/cleanIrcMessage";
 import store from "../store";
 import {switchToChannel} from "../router";
@@ -16,14 +17,27 @@ try {
 	};
 }
 
-socket.on("msg", function (data) {
+socket.on("msg", function(data) {
 	const receivingChannel = store.getters.findChannel(data.chan);
 
 	if (!receivingChannel) {
 		return;
 	}
 
-	let channel = receivingChannel.channel;
+	const {network, channel} = receivingChannel;
+
+	const {messagesWithReactions, messagesWithContent} = bucketMessages([data.msg]);
+
+	if (messagesWithReactions.length !== 0) {
+		store.commit("addReactions", {channelId: data.chan, messages: [data.msg]});
+	}
+
+	if (messagesWithContent.length !== 0) {
+		handleMessageWithContent(data, network, channel);
+	}
+});
+
+function handleMessageWithContent(data, network, channel) {
 	let isActiveChannel =
 		store.state.activeChannel && store.state.activeChannel.channel === channel;
 
@@ -33,7 +47,7 @@ socket.on("msg", function (data) {
 		// We only want to put errors/notices in active channel if they arrive on the same network
 		if (
 			store.state.activeChannel &&
-			store.state.activeChannel.network === receivingChannel.network
+			store.state.activeChannel.network === network
 		) {
 			channel = store.state.activeChannel.channel;
 
@@ -92,7 +106,7 @@ socket.on("msg", function (data) {
 	if (channel.type === "channel") {
 		updateUserList(channel, data.msg);
 	}
-});
+}
 
 function notifyMessage(targetId, channel, activeChannel, msg) {
 	if (msg.highlight || (store.state.settings.notifyAllMessages && msg.type === "message")) {
diff --git a/client/js/store.js b/client/js/store.js
index 83ce7f86..0347749f 100644
--- a/client/js/store.js
+++ b/client/js/store.js
@@ -129,6 +129,25 @@ const store = new Vuex.Store({
 
 			state.messageSearchResults = value;
 		},
+		addReactions(state, {channelId, messages}) {
+			const channel = this.getters.findChannel(channelId)?.found;
+
+			if (!channel) {
+				console.log("not found");
+				return;
+			}
+
+			for (const msg of messages) {
+				let reactions = channel.reactions[msg.replyTo];
+
+				if (!reactions) {
+					reactions = [];
+					Vue.set(channel.reactions, msg.replyTo, reactions);
+				}
+
+				targetReactions.push(msg);
+			}
+		}
 	},
 	getters: {
 		findChannelOnCurrentNetwork: (state) => (name) => {
@@ -211,6 +230,8 @@ const store = new Vuex.Store({
 				channel.usersOutdated = true;
 			}
 
+			channel.reactions = {};
+
 			return channel;
 		},
 	},
diff --git a/src/models/chan.js b/src/models/chan.js
index fe9494fb..9f9ce4dc 100644
--- a/src/models/chan.js
+++ b/src/models/chan.js
@@ -62,7 +62,7 @@ Chan.prototype.pushMessage = function (client, msg, increasesUnread) {
 		this.unread = 0;
 		this.firstUnread = msg.id;
 		this.highlight = 0;
-	} else if (!isOpen) {
+	} else if (!isOpen && msg.type !== Msg.Type.TAG_MESSAGE) {
 		if (!this.firstUnread) {
 			this.firstUnread = msg.id;
 		}
diff --git a/src/models/msg.js b/src/models/msg.js
index 705f4e1d..b64c5bae 100644
--- a/src/models/msg.js
+++ b/src/models/msg.js
@@ -71,6 +71,7 @@ Msg.Type = {
 	NOTICE: "notice",
 	PART: "part",
 	QUIT: "quit",
+	TAG_MESSAGE: "tag_message",
 	CTCP: "ctcp",
 	CTCP_REQUEST: "ctcp_request",
 	CHGHOST: "chghost",
diff --git a/src/plugins/irc-events/message.js b/src/plugins/irc-events/message.js
index 0d67ff61..5d4782b3 100644
--- a/src/plugins/irc-events/message.js
+++ b/src/plugins/irc-events/message.js
@@ -25,6 +25,11 @@ module.exports = function (irc, network) {
 		handleMessage(data);
 	});
 
+	irc.on("tagmsg", function (data) {
+		data.type = Msg.Type.TAG_MESSAGE;
+		handleMessage(data);
+	});
+
 	irc.on("wallops", function (data) {
 		data.from_server = true;
 		data.type = Msg.Type.WALLOPS;
@@ -114,6 +119,9 @@ module.exports = function (irc, network) {
 			from: from,
 			highlight: highlight,
 			users: [],
+			serverId: data.tags.msgid,
+			replyTo: data.tags["+draft/reply"],
+			reactionText: data.tags["+draft/react"],
 		});
 
 		if (showInActive) {
@@ -121,7 +129,7 @@ module.exports = function (irc, network) {
 		}
 
 		// remove IRC formatting for custom highlight testing
-		const cleanMessage = cleanIrcMessage(data.message);
+		const cleanMessage = data.message ? cleanIrcMessage(data.message) : "";
 
 		// Self messages in channels are never highlighted
 		// Non-self messages are highlighted as soon as the nick is detected
diff --git a/src/plugins/messageStorage/sqlite.js b/src/plugins/messageStorage/sqlite.js
index cc8ccdf8..7b2588a5 100644
--- a/src/plugins/messageStorage/sqlite.js
+++ b/src/plugins/messageStorage/sqlite.js
@@ -132,6 +132,8 @@ class MessageStorage {
 			return newMsg;
 		}, {});
 
+		console.log("indexing", {msg, clonedMsg});
+
 		this.database.serialize(() =>
 			this.database.run(
 				"INSERT INTO messages(network, channel, time, type, msg) VALUES(?, ?, ?, ?, ?)",
@@ -191,6 +193,8 @@ class MessageStorage {
 								const newMsg = new Msg(msg);
 								newMsg.id = this.client.idMsg++;
 
+								console.log("loaded", newMsg);
+
 								return newMsg;
 							})
 						);