enh: threads & reactions

src/lib/components/channel/Messages/Message.svelte

@@ -26,6 +26,8 @@
 	import Image from '$lib/components/common/Image.svelte';
 	import FileItem from '$lib/components/common/FileItem.svelte';
 	import ProfilePreview from './Message/ProfilePreview.svelte';
+	import ChatBubbleOvalEllipsis from '$lib/components/icons/ChatBubbleOvalEllipsis.svelte';
+	import FaceSmile from '$lib/components/icons/FaceSmile.svelte';
 
 	export let message;
 	export let showUserProfile = true;
@@ -66,29 +68,57 @@
 			? 'pt-1.5 pb-0.5'
 			: ''} w-full {($settings?.widescreenMode ?? null)
 			? 'max-w-full'
-			: 'max-w-5xl'} mx-auto group hover:bg-gray-500/5 transition relative"
+			: 'max-w-5xl'} mx-auto group hover:bg-gray-300/5 dark:hover:bg-gray-700/5 transition relative"
 	>
 		{#if (message.user_id === $user.id || $user.role === 'admin') && !edit}
 			<div class=" absolute invisible group-hover:visible right-1 -top-2 z-30">
 				<div
 					class="flex gap-1 rounded-lg bg-white dark:bg-gray-850 shadow-md p-0.5 border border-gray-100 dark:border-gray-800"
 				>
-					<button
-						class="hover:bg-gray-100 dark:hover:bg-gray-800 transition rounded-lg p-1"
-						on:click={() => {
-							edit = true;
-							editedContent = message.content;
-						}}
-					>
-						<Pencil />
-					</button>
-
-					<button
-						class="hover:bg-gray-100 dark:hover:bg-gray-800 transition rounded-lg p-1"
-						on:click={() => (showDeleteConfirmDialog = true)}
-					>
-						<GarbageBin />
-					</button>
+					<Tooltip content={$i18n.t('Reactions')}>
+						<button
+							class="hover:bg-gray-100 dark:hover:bg-gray-800 transition rounded-lg p-1"
+							on:click={() => {
+								edit = true;
+								editedContent = message.content;
+							}}
+						>
+							<FaceSmile />
+						</button>
+					</Tooltip>
+
+					<Tooltip content={$i18n.t('Reply in thread')}>
+						<button
+							class="hover:bg-gray-100 dark:hover:bg-gray-800 transition rounded-lg p-1"
+							on:click={() => {
+								edit = true;
+								editedContent = message.content;
+							}}
+						>
+							<ChatBubbleOvalEllipsis />
+						</button>
+					</Tooltip>
+
+					<Tooltip content={$i18n.t('Edit')}>
+						<button
+							class="hover:bg-gray-100 dark:hover:bg-gray-800 transition rounded-lg p-1"
+							on:click={() => {
+								edit = true;
+								editedContent = message.content;
+							}}
+						>
+							<Pencil />
+						</button>
+					</Tooltip>
+
+					<Tooltip content={$i18n.t('Delete')}>
+						<button
+							class="hover:bg-gray-100 dark:hover:bg-gray-800 transition rounded-lg p-1"
+							on:click={() => (showDeleteConfirmDialog = true)}
+						>
+							<GarbageBin />
+						</button>
+					</Tooltip>
 				</div>
 			</div>
 		{/if}

src/lib/components/icons/ChatBubbleOvalEllipsis.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	export let className = 'size-4';
+	export let strokeWidth = '1.5';
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	fill="none"
+	viewBox="0 0 24 24"
+	stroke-width={strokeWidth}
+	stroke="currentColor"
+	class={className}
+>
+	<path
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		d="M8.625 12a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H8.25m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H12m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0h-.375M21 12c0 4.556-4.03 8.25-9 8.25a9.764 9.764 0 0 1-2.555-.337A5.972 5.972 0 0 1 5.41 20.97a5.969 5.969 0 0 1-.474-.065 4.48 4.48 0 0 0 .978-2.025c.09-.457-.133-.901-.467-1.226C3.93 16.178 3 14.189 3 12c0-4.556 4.03-8.25 9-8.25s9 3.694 9 8.25Z"
+	/>
+</svg>

src/lib/components/icons/FaceSmile.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	export let className = 'size-4';
+	export let strokeWidth = '1.5';
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	fill="none"
+	viewBox="0 0 24 24"
+	stroke-width={strokeWidth}
+	stroke="currentColor"
+	class={className}
+>
+	<path
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		d="M15.182 15.182a4.5 4.5 0 0 1-6.364 0M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0ZM9.75 9.75c0 .414-.168.75-.375.75S9 10.164 9 9.75 9.168 9 9.375 9s.375.336.375.75Zm-.375 0h.008v.015h-.008V9.75Zm5.625 0c0 .414-.168.75-.375.75s-.375-.336-.375-.75.168-.75.375-.75.375.336.375.75Zm-.375 0h.008v.015h-.008V9.75Z"
+	/>
+</svg>