feat: chat list (joined)

src/routes/(app)/ChatList.svelte

@@ -1,115 +1,22 @@
 <script>
+	import { browser } from '$app/environment';
+	import { useChatList } from '$lib/chatList';
+	import { chatServerConnectionPool } from '$lib/chatServers';
 	import ChatListHeader from './ChatListHeader.svelte';
 	import ChatListItem from './ChatListItem.svelte';
+
+	const chatList = browser ? useChatList(chatServerConnectionPool.chatList) : null;
 </script>
 
 <div class="flex h-[100dvh] flex-col justify-stretch">
 	<ChatListHeader />
 	<div class="min-h-0 flex-1 touch-pan-y overflow-y-auto">
 		<ul>
-			<ChatListItem
-				chat={{
-					id: 'room-1',
-					name: 'Blah IM Interest Group',
-					lastMessage: {
-						sender: { id: '1', name: 'septs' },
-						content: '窄带通信吧，asn1 + bzip2 效果还是可以的',
-						date: new Date('2024-08-29T02:11Z')
-					},
-					unreadCount: 3
-				}}
-			/>
-			<ChatListItem
-				chat={{
-					id: 'room-2',
-					name: 'Laoself Chat',
-					lastMessage: {
-						sender: { id: '10', name: 'Richard Luo 🐱' },
-						content: '如果durov没事 那你是不是又可以拖延症复发了（',
-						date: new Date('2024-08-29T02:11Z')
-					}
-				}}
-			/>
-			<ChatListItem
-				chat={{
-					id: 'room-3',
-					name: 'Ubuntu中文',
-					lastMessage: {
-						sender: { id: '15', name: 'chen jianhao' },
-						content:
-							'就什么也没安装，昨晚好好的，就打开了pycharm而已，写完代码直接按设置好的快捷键alt+s 关机 重启就不行了',
-						date: new Date('2024-08-29T02:27Z')
-					},
-					unreadCount: 827469
-				}}
-			/>
-			<ChatListItem
-				chat={{
-					id: '1',
-					name: 'septs',
-					lastMessage: {
-						sender: { id: '1', name: 'septs' },
-						content: '验证 checksum 是否正确的代价还是可以接受的',
-						date: new Date('2024-08-28T02:54Z')
-					}
-				}}
-			/>
-			<ChatListItem
-				chat={{
-					id: '2',
-					name: 'oxa',
-					lastMessage: {
-						sender: { id: '2', name: 'oxa' },
-						content: '但似乎现在大家都讨厌 pgp ，觉得太复杂',
-						date: new Date('2024-08-28T02:37Z')
-					}
-				}}
-			/>
-			<ChatListItem
-				chat={{
-					id: '3',
-					name: 'omo',
-					lastMessage: {
-						sender: { id: '3', name: 'omo' },
-						content: '我對 revalidate 的理解是不經過 cache 直接重拉一遍',
-						date: new Date('2024-08-28T02:11Z')
-					},
-					unreadCount: 8
-				}}
-			/>
-			<ChatListItem
-				chat={{
-					id: '4',
-					name: 'Inno Aiolos',
-					lastMessage: {
-						sender: { id: '4', name: 'Inno Aiolos' },
-						content: '至少得把信息分发给所有广播自己是这个public key的destination',
-						date: new Date('2024-07-28T02:11Z')
-					}
-				}}
-			/>
-			<ChatListItem
-				chat={{
-					id: '5',
-					name: 'Gary です',
-					lastMessage: {
-						sender: { id: '5', name: 'Gary です' },
-						content: '没必要8，长毛象那样挺麻烦的',
-						date: new Date('2023-07-28T02:11Z')
-					}
-				}}
-			/>
-			<ChatListItem
-				chat={{
-					id: '6',
-					name: 'Chtholly Nota Seniorious',
-					lastMessage: {
-						sender: { id: '6', name: 'Chtholly Nota Seniorious' },
-						content: '遥遥领先！\n隔壁 nostr 最开始没有注意到这个问题，然后被狂灌置顶 spam',
-						date: new Date('2022-07-28T02:11Z')
-					}
-				}}
-			/>
+			{#if $chatList}
+				{#each $chatList as chat}
+					<ChatListItem {chat} />
+				{/each}
+			{/if}
 		</ul>
 	</div>
 </div>

src/routes/(app)/ChatListItem.svelte

@@ -7,12 +7,21 @@
 	import { blahRichTextToPlainText } from '$lib/richText';
 
 	export let chat: Chat;
+
+	let urlSafeEndpoint: string;
+	$: {
+		const url = new URL(chat.server);
+		urlSafeEndpoint = encodeURIComponent(url.hostname + url.pathname);
+	}
 </script>
 
 <li
 	class="relative after:absolute after:bottom-0 after:end-0 after:start-14 after:border-t-[0.5px] after:border-ss-secondary"
 >
-	<a href="/chats/{chat.id}" class="flex h-20 cursor-default items-center gap-2 px-2">
+	<a
+		href="/chats/{urlSafeEndpoint}/{chat.id}"
+		class="flex h-20 cursor-default items-center gap-2 px-2"
+	>
 		<div class="size-10">
 			<AvatarBeam size={40} name={chat.name} />
 		</div>

src/routes/(app)/chats/[server]/[chatId]/+page.svelte

@@ -28,7 +28,7 @@
 <div class="flex h-full w-full flex-col items-center justify-center">
 	{#if server}
 		{@const { info, messages, sendMessage } = useChat(server, roomId)}
-		<ChatPage {info} {messages} on:sendMessage={sendMessage} />
+		<ChatPage {info} {messages} on:sendMessage={(e) => sendMessage(e.detail)} />
 	{:else}
 		<ServiceMessage>
 			To view this chat, you need to connect to chat server

src/routes/(app)/chats/[server]/[chatId]/ChatInput.svelte

@@ -28,7 +28,7 @@
 </script>
 
 <form
-	class="flex items-end gap-2 border-t border-ss-secondary bg-sb-primary p-2 shadow-sm"
+	class="flex w-full items-end gap-2 border-t border-ss-secondary bg-sb-primary p-2 shadow-sm"
 	bind:this={form}
 	on:submit|preventDefault={submit}
 >

src/routes/(app)/chats/[server]/[chatId]/ChatPage.svelte

@@ -13,13 +13,13 @@
 	export let info: Readable<Chat>;
 	export let messages: Readable<Message[]>;
 
-	type $$Events = {
-		sendMessage: BlahRichText;
-	};
+	interface $$Events {
+		sendMessage: CustomEvent<BlahRichText>;
+	}
 </script>
 
 <ChatHeader info={$info} outsideUnreadCount={263723} />
-<BgPattern class="flex-1" pattern="charlieBrown">
+<BgPattern class="w-full flex-1" pattern="charlieBrown">
 	<ChatHistory messages={$messages} mySenderId={$currentKeyPair?.id} />
 </BgPattern>
 <ChatInput on:sendMessage />