i18n: add missing translations

src/lib/components/channel/Messages.svelte

@@ -59,7 +59,7 @@
 			>
 				<div class="w-full flex justify-center py-1 text-xs animate-pulse items-center gap-2">
 					<Spinner className=" size-4" />
-					<div class=" ">Loading...</div>
+					<div class=" ">{$i18n.t('Loading...')}</div>
 				</div>
 			</Loader>
 		{:else if !thread}
@@ -84,7 +84,7 @@
 					</div>
 				{:else}
 					<div class="flex justify-center text-xs items-center gap-2 py-5">
-						<div class=" ">Start of the channel</div>
+						<div class=" ">{$i18n.t('Start of the channel')}</div>
 					</div>
 				{/if}
 

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

@@ -1,5 +1,8 @@
 <script lang="ts">
 	import { DropdownMenu } from 'bits-ui';
+	import { getContext } from 'svelte';
+
+	const i18n = getContext('i18n');
 
 	import { flyAndScale } from '$lib/utils/transitions';
 	import { WEBUI_BASE_URL } from '$lib/constants';
@@ -76,7 +79,7 @@
 								</div>
 
 								<div class=" -translate-y-[1px]">
-									<span class="text-xs"> Active </span>
+									<span class="text-xs"> {$i18n.t('Active')} </span>
 								</div>
 							{:else}
 								<div>
@@ -86,7 +89,7 @@
 								</div>
 
 								<div class=" -translate-y-[1px]">
-									<span class="text-xs"> Away </span>
+									<span class="text-xs"> {$i18n.t('Away')} </span>
 								</div>
 							{/if}
 						</div>

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

@@ -132,7 +132,7 @@
 		<!-- Virtualized Emoji List -->
 		<div class="w-full flex justify-start h-96 overflow-y-auto px-3 pb-3 text-sm">
 			{#if emojiRows.length === 0}
-				<div class="text-center text-xs text-gray-500 dark:text-gray-400">No results</div>
+				<div class="text-center text-xs text-gray-500 dark:text-gray-400">{$i18n.t('No results')}</div>
 			{:else}
 				<div class="w-full flex ml-0.5">
 					<VirtualList rowHeight={ROW_HEIGHT} items={emojiRows} height={384} let:item>

src/lib/components/channel/Thread.svelte

@@ -8,9 +8,11 @@
 	import XMark from '$lib/components/icons/XMark.svelte';
 	import MessageInput from './MessageInput.svelte';
 	import Messages from './Messages.svelte';
-	import { onDestroy, onMount, tick } from 'svelte';
+	import { onDestroy, onMount, tick, getContext } from 'svelte';
 	import { toast } from 'svelte-sonner';
 
+	const i18n = getContext('i18n');
+
 	export let threadId = null;
 	export let channel = null;
 
@@ -158,7 +160,7 @@
 {#if channel}
 	<div class="flex flex-col w-full h-full bg-gray-50 dark:bg-gray-850">
 		<div class="flex items-center justify-between px-3.5 pt-3">
-			<div class=" font-medium text-lg">Thread</div>
+			<div class=" font-medium text-lg">{$i18n.t('Thread')}</div>
 
 			<div>
 				<button