refac: styling

src/lib/components/channel/MessageInput.svelte

@@ -36,6 +36,7 @@
 	import { getSuggestionRenderer } from '../common/RichTextInput/suggestions';
 	import CommandSuggestionList from '../chat/MessageInput/CommandSuggestionList.svelte';
 	import MentionList from './MessageInput/MentionList.svelte';
+	import Skeleton from '../chat/Messages/Skeleton.svelte';
 
 	export let placeholder = $i18n.t('Send a Message');
 
@@ -690,20 +691,24 @@
 						{/if}
 					</div>
 
-					<div class="relative">
-						<div class=" -mt-5">
 					{#if typingUsers.length > 0}
-								<div class=" text-xs px-4 mb-1">
+						<div
+							class=" absolute -top-6 pb-2.5 w-full bg-gradient-to-t to-transparent from-white dark:from-gray-900 pointer-events-none select-none"
+						>
+							<div class=" text-xs px-2 mt-1 flex items-center gap-1.5">
+								<Skeleton size="xs" />
+
+								<div>
 									<span class=" font-normal text-black dark:text-white">
 										{typingUsers.map((user) => user.name).join(', ')}
 									</span>
 									{$i18n.t('is typing...')}
 								</div>
+							</div>
+						</div>
 					{/if}
 				</div>
 			</div>
-				</div>
-			</div>
 
 			<div class="">
 				{#if recording}
@@ -811,7 +816,7 @@
 											json={true}
 											messageInput={true}
 											richText={$settings?.richTextInput ?? true}
-											{showFormattingToolbar}
+											showFormattingToolbar={$settings?.showFormattingToolbar ?? false}
 											shiftEnter={!($settings?.ctrlEnterToSend ?? false) &&
 												(!$mobile ||
 													!(

src/lib/components/chat/Messages/Skeleton.svelte

@@ -2,13 +2,21 @@
 	export let size = 'md';
 </script>
 
-<span class="relative flex {size === 'md' ? 'size-3 my-2' : 'size-2 my-1'} mx-1">
+<span
+	class="relative flex {size === 'md'
+		? 'size-3 my-2'
+		: size === 'xs'
+			? 'size-1.5 my-1'
+			: 'size-2 my-1'} mx-1"
+>
 	<span
 		class="absolute inline-flex h-full w-full animate-pulse rounded-full bg-gray-700 dark:bg-gray-200 opacity-75"
 	></span>
 	<span
 		class="relative inline-flex {size === 'md'
 			? 'size-3'
+			: size === 'xs'
+				? 'size-1.5'
 				: 'size-2'} rounded-full bg-black dark:bg-white animate-size"
 	></span>
 </span>