client: lay some groundwork for jump to message

.gitignore

@@ -1,3 +1,9 @@
+# Emacs/Vim turds
+.\#*\#
+\#*\#
+*~
+.tern-port
+
 node_modules/
 npm-debug.log*
 yarn-debug.log*

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() {

client/components/DateMarker.vue

@@ -17,6 +17,7 @@ export default {
 	name: "DateMarker",
 	props: {
 		message: Object,
+		focused: Boolean,
 	},
 	computed: {
 		localeDate() {

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() {

client/components/MessageCondensed.vue

@@ -30,6 +30,7 @@ export default {
 		network: Object,
 		messages: Array,
 		keepScrollPosition: Function,
+		focused: Boolean,
 	},
 	data() {
 		return {

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() {

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>

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>