blah/Weblah
1
0
Fork 0
mirror of https://github.com/Blah-IM/Weblah.git synced 2025-05-01 00:31:08 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

refactor: chat list item data

Browse source
This commit is contained in:
Shibo Lyu 2024-09-04 03:02:14 +08:00
parent 5954928834
commit c65ff6c892
3 changed files with 34 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/lib/richText.ts
View file

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

5
src/lib/types/chat.ts
View file

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

41
src/routes/(app)/ChatListItem.svelte
View file

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