add 'view discord as this user' to user right click menu, highlight m…

…entions and reactions from simulated user, removed pinned message highlight
slatinsky · Nov 4, 2023 · a1a4f98 · a1a4f98
1 parent 5edbd71
commit a1a4f98
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 7 deletions.
diff --git a/frontend/src/components/messages/MessageReactions.svelte b/frontend/src/components/messages/MessageReactions.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
+	import { currentUserId } from "../settings/settingsStore";
 	import { checkUrl } from "src/js/helpers";
 	import type { Reaction } from "src/js/interfaces";
-	import ImageGallery from "src/routes/channels/[guildId]/[channelId]/ImageGallery.svelte";
 	import ReactionsModal from "src/routes/channels/[guildId]/[channelId]/ReactionsModal.svelte";
 
 	export let reactions: Reaction[];
@@ -13,7 +13,8 @@
 
 <div class="chatlog__reactions">
 	{#each reactions as reaction}
-		<div class="chatlog__reaction" title=":{reaction.emoji.name}:" on:click={reactionsModal.viewReactions(reaction)}>
+		{@const emojiUsers = reaction?.users?.map(user => user._id) ?? []}
+		<div class:me={emojiUsers.includes($currentUserId)} class="chatlog__reaction" title=":{reaction.emoji.name}:" on:click={reactionsModal.viewReactions(reaction)}>
 			<img
 				class='chatlog__emoji chatlog__emoji--small'
 				src={checkUrl(reaction.emoji?.image)}
@@ -25,4 +26,14 @@
 			<span class="chatlog__reaction-count">{reaction.count}</span>
 		</div>
 	{/each}
-</div>
+</div>
+
+<style>
+	.chatlog__reaction {
+		margin-right: 4px;
+	}
+	.chatlog__reaction.me {
+		border: 1px solid #5561E9;
+		background-color: #34374F;
+	}
+</style>
diff --git a/frontend/src/components/messages/NewMessage.svelte b/frontend/src/components/messages/NewMessage.svelte
@@ -3,7 +3,7 @@
 	import type { Message } from 'src/js/interfaces';
 	import { renderDate, renderTimestamp } from 'src/js/time';
 	import { contextMenuItems} from '../menu/menuStore';
-	import { linkHandler, timestampFormat } from 'src/components/settings/settingsStore';
+	import { currentUserId, linkHandler, timestampFormat } from 'src/components/settings/settingsStore';
 	import MessageAttachments from './MessageAttachments.svelte';
 	import MessageEmbeds from './MessageEmbeds.svelte';
 	import MessageMarkdown from './MessageMarkdown.svelte';
@@ -123,7 +123,13 @@
 				}
 			},
 			{
-				"name": "Print message object to console",
+				"name": "View discord as this user",
+				"action": () => {
+					$currentUserId = message.author._id
+				}
+			},
+			{
+				"name": "Print message object to devtools",
 				"action": () => {
 					console.log(JSON.stringify(message, null, 2))
 				}
@@ -186,6 +192,8 @@
 	function generateAvatar(el: HTMLElement, authorId: string) {
 		el.src = identicons.generateSVGDataURIString(authorId, { width: 200, size: 3 })
 	}
+
+	$: isMessageHighlighted = message?.mentions?.map(m => m._id).includes($currentUserId)
 </script>
 
 <!-- Rewritten https://github.com/Tyrrrz/DiscordChatExporter/blob/master/DiscordChatExporter.Core/Exporting/Writers/Html/MessageGroupTemplate.cshtml to svelte -->
@@ -219,7 +227,7 @@
 	<div on:contextmenu|preventDefault={e=>onRightClick(e, message)}>
 		<div
 			id="{message.id}"
-			class="chatlog__message-container {message.isPinned
+			class="chatlog__message-container {isMessageHighlighted
 				? 'chatlog__message-container--pinned'
 				: ''}
 				{message.isDeleted
@@ -529,10 +537,20 @@
 		max-width: 100%;
 	}
 
+	.chatlog__message-container--pinned {
+		background-color: #444037;
+		border-left: 2px solid #F0B132;
+	}
+
 	.chatlog__message-container--deleted {
-		background-color: rgba(133, 0, 0, 0.10)
+		background-color: #4E363B;
 	}
 
+	.chatlog__message-container--pinned.chatlog__message-container--deleted {
+		background-color: #493B39;
+	}
+
+
 	audio {
 		max-width: 80%;
 		width: 700px;

diff --git a/frontend/src/components/settings/settingsStore.ts b/frontend/src/components/settings/settingsStore.ts
@@ -5,6 +5,7 @@ export const nameRenderer = writable("nickname");
 export const locale = writable('en');  // for date formatting
 export const dateFormat = writable('DD/MM/YYYY');
 export const timeFormat = writable('HH:mm');
+export const currentUserId = writable('');  // discord snowflake of the current user, '' if not "logged in"
 
 // for {#key} blocks
 export const timestampFormat = derived([dateFormat, timeFormat, locale], ([dateFormat, timeFormat, locale]) => {
@@ -54,6 +55,7 @@ withLocalStorage(linkHandler, "linkHandler", "string");
 withLocalStorage(channelScrollPosition, "channelScrollPosition", "string");
 withLocalStorage(hideSpoilers, "hideSpoilers", "bool");
 withLocalStorage(font, "font", "string");
+withLocalStorage(currentUserId, "currentUserId", "string");
 
 // old localstorage keys that should never be used again for backwards compatibility:
 // `dateFormat`, `timeFormat`