From c65ff6c89270b987f12e2e676de24880dfb6ea2a Mon Sep 17 00:00:00 2001
From: Shibo Lyu <github@of.sb>
Date: Wed, 4 Sep 2024 03:02:14 +0800
Subject: [PATCH] refactor: chat list item data

---
 src/lib/richText.ts                  |  6 +++-
 src/lib/types/chat.ts                |  5 ++++
 src/routes/(app)/ChatListItem.svelte | 41 ++++++++++++++++------------
 3 files changed, 34 insertions(+), 18 deletions(-)

diff --git a/src/lib/richText.ts b/src/lib/richText.ts
index f7f278d..73fa0ab 100644
--- a/src/lib/richText.ts
+++ b/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('');
+}
diff --git a/src/lib/types/chat.ts b/src/lib/types/chat.ts
index af245a5..8f14463 100644
--- a/src/lib/types/chat.ts
+++ b/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;
 };
diff --git a/src/routes/(app)/ChatListItem.svelte b/src/routes/(app)/ChatListItem.svelte
index 8211bc4..b58b4af 100644
--- a/src/routes/(app)/ChatListItem.svelte
+++ b/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,20 +19,28 @@
 		<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>
-				<time
-					class="truncate text-xs text-sf-tertiary"
-					datetime={chat.lastMessage.date.toISOString()}
-					title={formatMessageDate(chat.lastMessage.date, true)}
-				>
-					{formatMessageDate(chat.lastMessage.date)}
-				</time>
+				{#if chat.lastMessage}
+					<time
+						class="truncate text-xs text-sf-tertiary"
+						datetime={chat.lastMessage.date.toISOString()}
+						title={formatMessageDate(chat.lastMessage.date, true)}
+					>
+						{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.id !== chat.lastMessage.sender.id}
-						<span class="text-sf-primary">{chat.lastMessage.sender.name}: </span>
+					{#if chat.lastMessage}
+						{#if chat.id !== chat.lastMessage.sender.id}
+							<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