refac

src/lib/components/layout/Sidebar.svelte

@@ -31,7 +31,8 @@
 		loadNextChatListPage,
 		refreshChatList,
 		registerFolderRefreshHandler,
-		setChatActive
+		setChatActive,
+		setChatReadAt
 	} from '$lib/stores/chatList';
 	import { onMount, getContext, tick, onDestroy } from 'svelte';
 
@@ -691,7 +692,14 @@
 	const chatActiveEventHandler = async (event: {
 		chat_id: string;
 		message_id: string;
-		data: { type: string; data: { active?: boolean } };
+		data: {
+			type: string;
+			data: {
+				active?: boolean;
+				last_read_at?: number;
+				folder_unread_counts?: Record<string, number>;
+			};
+		};
 	}) => {
 		if (event.data?.type === 'chat:active') {
 			const active = event.data.data.active ?? false;
@@ -700,6 +708,29 @@
 				await refreshChatRows();
 			}
 		} else if (event.data?.type === 'chat:list') {
+			const eventData = event.data.data ?? {};
+			const folderUnreadCounts = eventData.folder_unread_counts;
+			if (folderUnreadCounts) {
+				folders = Object.fromEntries(
+					Object.entries(folders).map(([id, folder]) => [
+						id,
+						id in folderUnreadCounts ? { ...folder, unread_count: folderUnreadCounts[id] } : folder
+					])
+				);
+				_folders.update((folderList) =>
+					folderList.map((folder) =>
+						folder.id in folderUnreadCounts
+							? { ...folder, unread_count: folderUnreadCounts[folder.id] }
+							: folder
+					)
+				);
+			}
+
+			if (typeof eventData.last_read_at === 'number') {
+				setChatReadAt(event.chat_id, eventData.last_read_at);
+				return;
+			}
+
 			refreshChatRows();
 		}
 	};

src/lib/components/layout/Sidebar/Folders.svelte

@@ -4,7 +4,6 @@
 	const dispatch = createEventDispatcher();
 
 	import RecursiveFolder from './RecursiveFolder.svelte';
-	import { chatId } from '$lib/stores';
 
 	export let folderRegistry = {};
 
@@ -42,16 +41,6 @@
 			folderRegistry[e.originFolderId]?.setFolderItems();
 		}
 	};
-
-	const loadFolderItems = () => {
-		for (const folderId of Object.keys(folders)) {
-			folderRegistry[folderId]?.setFolderItems();
-		}
-	};
-
-	$: if (folders || $chatId) {
-		loadFolderItems();
-	}
 </script>
 
 {#each ownedList as folderId (folderId)}

src/lib/components/layout/Sidebar/RecursiveFolder.svelte

@@ -433,10 +433,16 @@
 		}
 	};
 
-	$: if (open) {
+	$: if (open && chats === null) {
 		setFolderItems();
 	}
 
+	$: if (!open && chats !== null) {
+		chats = null;
+		chatsPage = 1;
+		hasMoreChats = false;
+	}
+
 	const renameHandler = async () => {
 		console.log('Edit');
 		await tick();

src/lib/stores/chatList.ts

@@ -123,6 +123,21 @@ export const setChatActive = (chatId: string, active: boolean): boolean => {
 	return found;
 };
 
+export const setChatReadAt = (chatId: string, lastReadAt: number): boolean => {
+	let found = false;
+	const updateChat = (chat: ChatListItem) => {
+		if (chat.id !== chatId) {
+			return chat;
+		}
+		found = true;
+		return { ...chat, last_read_at: lastReadAt };
+	};
+
+	chatsStore.update((items) => (items ? items.map(updateChat) : items));
+	pinnedChatsStore.update((items) => items.map(updateChat));
+	return found;
+};
+
 export const resetChatListState = () => {
 	requestGeneration += 1;
 	currentPage = 1;