refactor: chat list item data

src/lib/richText.ts

@@ -45,7 +45,7 @@ function deltaAttributesToBlahRichTextSpanAttributes(
 	return isObjectEmpty(blahRichTextSpanAttributes) ? null : blahRichTextSpanAttributes;
 }
 
-export function deltaToBlahRichText(delta: Delta, trim?: boolean = true): BlahRichText {
+export function deltaToBlahRichText(delta: Delta, trim: boolean = true): BlahRichText {
 	const spans: BlahRichText = [];
 
 	let lastText = '';
@@ -97,3 +97,7 @@ export function deltaToBlahRichText(delta: Delta, trim?: boolean = true): BlahRi
 
 	return spans;
 }
+
+export function blahRichTextToPlainText(richText: BlahRichText): string {
+	return richText.map((span) => (typeof span === 'string' ? span : span[0])).join('');
+}

src/lib/types/chat.ts

@@ -1,6 +1,11 @@
+import type { Message } from './message';
+
 export type Chat = {
+	server: string;
 	id: string;
 	name: string;
 	profilePictureUrl?: string;
 	type: 'group' | 'peer' | 'channel';
+	lastMessage?: Message;
+	unreadCount?: number;
 };

src/routes/(app)/ChatListItem.svelte

@@ -1,13 +1,12 @@
 <script lang="ts">
-	import { formatMessageDate, formatUnreadCount } from '$lib/formatters';
 	import { AvatarBeam } from 'svelte-boring-avatars';
 
-	export let chat: {
-		id: string;
-		name: string;
-		lastMessage: { sender: { id: string; name: string }; content: string; date: Date };
-		unreadCount?: number;
-	};
+	import { formatMessageDate, formatUnreadCount } from '$lib/formatters';
+	import type { Chat } from '$lib/types';
+	import { currentKeyPair } from '$lib/keystore';
+	import { blahRichTextToPlainText } from '$lib/richText';
+
+	export let chat: Chat;
 </script>
 
 <li
@@ -20,6 +19,7 @@
 		<div class="relative min-w-0 flex-1">
 			<div class="flex items-center gap-1">
 				<h3 class="flex-1 truncate text-sm font-semibold">{chat.name}</h3>
+				{#if chat.lastMessage}
 					<time
 						class="truncate text-xs text-sf-tertiary"
 						datetime={chat.lastMessage.date.toISOString()}
@@ -27,13 +27,20 @@
 					>
 						{formatMessageDate(chat.lastMessage.date)}
 					</time>
+				{/if}
 			</div>
 			<div class="flex items-end gap-1">
 				<p class="line-clamp-2 h-[2.5em] flex-1 text-sm leading-tight text-sf-secondary">
+					{#if chat.lastMessage}
 						{#if chat.id !== chat.lastMessage.sender.id}
-						<span class="text-sf-primary">{chat.lastMessage.sender.name}: </span>
+							<span class="text-sf-primary">
+								{chat.lastMessage.sender.id === $currentKeyPair.id
+									? 'You'
+									: chat.lastMessage.sender.name}:
+							</span>
+						{/if}
+						{blahRichTextToPlainText(chat.lastMessage.content)}
 					{/if}
-					{chat.lastMessage.content}
 				</p>
 				{#if chat.unreadCount}
 					<span