From e6856a9e7dfd2db800e0acabdda1f9b4417d6994 Mon Sep 17 00:00:00 2001
From: Mary Strodl <ipadlover8322@gmail.com>
Date: Tue, 26 Jan 2021 17:51:22 -0500
Subject: [PATCH] client: lay some groundwork for jump to message

---
 .gitignore                                  |  6 ++++
 client/components/Chat.vue                  |  8 ++++-
 client/components/DateMarker.vue            |  1 +
 client/components/Message.vue               |  7 +++-
 client/components/MessageCondensed.vue      |  1 +
 client/components/MessageList.vue           |  4 +++
 client/components/RoutedChat.vue            |  7 +++-
 client/components/Windows/SearchResults.vue | 40 ++++++++++++++-------
 8 files changed, 59 insertions(+), 15 deletions(-)

diff --git a/.gitignore b/.gitignore
index 348de645..f2f74c47 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,9 @@
+# Emacs/Vim turds
+.\#*\#
+\#*\#
+*~
+.tern-port
+
 node_modules/
 npm-debug.log*
 yarn-debug.log*
diff --git a/client/components/Chat.vue b/client/components/Chat.vue
index ec0063b2..9a789ad3 100644
--- a/client/components/Chat.vue
+++ b/client/components/Chat.vue
@@ -90,7 +90,12 @@
 					>
 						<div class="scroll-down-arrow" />
 					</div>
-					<MessageList ref="messageList" :network="network" :channel="channel" />
+					<MessageList
+						ref="messageList"
+						:network="network"
+						:channel="channel"
+						:focused="focused"
+					/>
 					<ChatUserList v-if="channel.type === 'channel'" :channel="channel" />
 				</div>
 			</div>
@@ -133,6 +138,7 @@ export default {
 	props: {
 		network: Object,
 		channel: Object,
+		focused: String,
 	},
 	computed: {
 		specialComponent() {
diff --git a/client/components/DateMarker.vue b/client/components/DateMarker.vue
index c8cf5468..4b6fa37c 100644
--- a/client/components/DateMarker.vue
+++ b/client/components/DateMarker.vue
@@ -17,6 +17,7 @@ export default {
 	name: "DateMarker",
 	props: {
 		message: Object,
+		focused: Boolean,
 	},
 	computed: {
 		localeDate() {
diff --git a/client/components/Message.vue b/client/components/Message.vue
index fa0d920a..cff56be9 100644
--- a/client/components/Message.vue
+++ b/client/components/Message.vue
@@ -3,7 +3,11 @@
 		:id="'msg-' + message.id"
 		:class="[
 			'msg',
-			{self: message.self, highlight: message.highlight, 'previous-source': isPreviousSource},
+			{
+				self: message.self,
+				highlight: message.highlight || focused,
+				'previous-source': isPreviousSource,
+			},
 		]"
 		:data-type="message.type"
 		:data-command="message.command"
@@ -110,6 +114,7 @@ export default {
 		network: Object,
 		keepScrollPosition: Function,
 		isPreviousSource: Boolean,
+		focused: Boolean,
 	},
 	computed: {
 		timeFormat() {
diff --git a/client/components/MessageCondensed.vue b/client/components/MessageCondensed.vue
index b14e6dd6..279fd8b1 100644
--- a/client/components/MessageCondensed.vue
+++ b/client/components/MessageCondensed.vue
@@ -30,6 +30,7 @@ export default {
 		network: Object,
 		messages: Array,
 		keepScrollPosition: Function,
+		focused: Boolean,
 	},
 	data() {
 		return {
diff --git a/client/components/MessageList.vue b/client/components/MessageList.vue
index d0dceb31..ca1f18cd 100644
--- a/client/components/MessageList.vue
+++ b/client/components/MessageList.vue
@@ -23,6 +23,7 @@
 					v-if="shouldDisplayDateMarker(message, id)"
 					:key="message.id + '-date'"
 					:message="message"
+					:focused="message.id == focused"
 				/>
 				<div
 					v-if="shouldDisplayUnreadMarker(message.id)"
@@ -38,6 +39,7 @@
 					:network="network"
 					:keep-scroll-position="keepScrollPosition"
 					:messages="message.messages"
+					:focused="message.id == focused"
 				/>
 				<Message
 					v-else
@@ -47,6 +49,7 @@
 					:message="message"
 					:keep-scroll-position="keepScrollPosition"
 					:is-previous-source="isPreviousSource(message, id)"
+					:focused="message.id == focused"
 					@toggle-link-preview="onLinkPreviewToggle"
 				/>
 			</template>
@@ -75,6 +78,7 @@ export default {
 	props: {
 		network: Object,
 		channel: Object,
+		focused: String,
 	},
 	computed: {
 		condensedMessages() {
diff --git a/client/components/RoutedChat.vue b/client/components/RoutedChat.vue
index b84a2e89..46a79bea 100644
--- a/client/components/RoutedChat.vue
+++ b/client/components/RoutedChat.vue
@@ -1,5 +1,10 @@
 <template>
-	<Chat v-if="activeChannel" :network="activeChannel.network" :channel="activeChannel.channel" />
+	<Chat
+		v-if="activeChannel"
+		:network="activeChannel.network"
+		:channel="activeChannel.channel"
+		:focused="this.$route.query.focused"
+	/>
 </template>
 
 <script>
diff --git a/client/components/Windows/SearchResults.vue b/client/components/Windows/SearchResults.vue
index 5d1596c5..687c7a23 100644
--- a/client/components/Windows/SearchResults.vue
+++ b/client/components/Windows/SearchResults.vue
@@ -56,18 +56,20 @@
 							aria-relevant="additions"
 						>
 							<template v-for="(message, id) in messages">
-								<DateMarker
-									v-if="shouldDisplayDateMarker(message, id)"
-									:key="message.date"
-									:message="message"
-								/>
-								<Message
-									:key="message.id"
-									:channel="channel"
-									:network="network"
-									:message="message"
-									:data-id="message.id"
-								/>
+								<div class="result" v-on:click="jump(message, id)">
+									<DateMarker
+										v-if="shouldDisplayDateMarker(message, id)"
+										:key="message.date"
+										:message="message"
+									/>
+									<Message
+										:key="message.id"
+										:channel="channel"
+										:network="network"
+										:message="message"
+										:data-id="message.id"
+									/>
+								</div>
 							</template>
 						</div>
 					</div>
@@ -210,6 +212,20 @@ export default {
 				el.scrollTop = el.scrollHeight;
 			});
 		},
+		jump(message, id) {
+			// TODO: Implement jumping to messages!
+			// This is difficult because it means client will need to handle a potentially nonlinear message set
+			// (loading IntersectionObserver both before AND after the messages)
+			// this.$router.push({
+			// 	name: "MessageList",
+			// 	params: {
+			// 		id: this.chan.id,
+			// 	},
+			//  query: {
+			//    focused: id
+			//  }
+			// });
+		},
 	},
 };
 </script>