refac

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

@@ -35,6 +35,7 @@
 
 	export let onDelete: Function = () => {};
 	export let onEdit: Function = () => {};
+	export let onThread: Function = () => {};
 	export let onReaction: Function = () => {};
 
 	let showButtons = false;
@@ -100,17 +101,18 @@
 						</Tooltip>
 					</ReactionPicker>
 
-					<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>
+					{#if message?.parent_id === null}
+						<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={() => {
+									onThread(message.id);
+								}}
+							>
+								<ChatBubbleOvalEllipsis />
+							</button>
+						</Tooltip>
+					{/if}
 
 					<Tooltip content={$i18n.t('Edit')}>
 						<button
@@ -288,6 +290,7 @@
 													].toLowerCase()}.svg"
 													alt={reaction.name}
 													class=" size-4"
+													loading="lazy"
 												/>
 											{:else}
 												<div>

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

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import XMark from '$lib/components/icons/XMark.svelte';
+
+	export let threadId = null;
+	export let channel = null;
+
+	export let onClose = () => {};
+</script>
+
+<div class="flex flex-col w-full h-full bg-gray-50 dark:bg-gray-900 px-3.5 py-3">
+	<div class="flex items-center justify-between">
+		<div class=" font-medium text-lg">Thread</div>
+
+		<div>
+			<button
+				class="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300 p-2"
+				on:click={() => {
+					onClose();
+				}}
+			>
+				<XMark />
+			</button>
+		</div>
+	</div>
+	{threadId}
+
+	{channel}
+</div>