better autoscroll, handle the word wrong room id

src/app.postcss

@@ -50,6 +50,7 @@
 	--orangered: #fa5f5f;
 	--max-red: #de1a1a;
 	--yellow: #fad14b;
+	--header-height: 3.81rem;
 }
 
 @tailwind components;

src/lib/components/Server/SelectRoom.svelte

@@ -8,7 +8,6 @@
 
 	function setRoom(roomId: string) {
 		$selectedRoom[$selectedServer] = roomId;
-		updateMessages($selectedServer, roomId);
 		drawerStore.close();
 		goto('/chat');
 	}
@@ -25,8 +24,7 @@
 			}}
 			title={`id: ${room.roomId},
 epoch length(s): ${(room.rateLimit ? room.rateLimit : 1) / 1000},
-'message limit': ${room.userMessageLimit}`}
-		>
+'message limit': ${room.userMessageLimit}`}>
 			<span class="flex-auto">
 				<dt>{room.name}</dt>
 				<dd class="hidden sm:block"><small>Members: ~{room.identities?.length ?? '?'}</small></dd>

src/lib/utils/rooms.ts

@@ -5,8 +5,7 @@ import {
 	selectedServer,
 	serverStore,
 	messageStore,
-	currentSelectedRoom,
-	alertQueue
+	currentSelectedRoom
 } from '$lib/stores';
 import { get } from 'svelte/store';
 import {
@@ -25,28 +24,44 @@ export function roomListForServer(server: string = get(selectedServer)): RoomI[]
 function updateRoomStore(rooms: RoomI[], serverURL: string = get(selectedServer)) {
 	// Update the roomStore directly
 	roomsStore.update((store) => {
-		rooms.forEach((room) => {
-			const roomId = String(room.roomId);
-			store[roomId] = { ...room, server: serverURL };
+		const newStore = { ...store };
+		const filteredRooms = rooms.filter((room) => String(room.roomId) !== '0071');
+		filteredRooms.forEach((room) => {
+			let roomId = String(room.roomId);
+			if (roomId === '0071') {
+				roomId = '7001';
+				room.roomId = '7001';
+			}
+			if (newStore['0071']) {
+				delete newStore['0071'];
+			}
+			newStore[roomId] = { ...room, server: serverURL };
 		});
-		return store;
+		console.debug(newStore);
+		return newStore;
 	});
 	// Update the serverStore
 	serverStore.update((store) => {
 		rooms.forEach((room) => {
-			const roomId = String(room.roomId);
+			let roomId = String(room.roomId);
+			if (roomId === '0071') {
+				roomId = '7001';
+				room.roomId = '7001';
+				store[serverURL].rooms?.filter((id) => id !== '0071');
+			}
 			store[serverURL].rooms?.push(roomId);
 		});
 		return store;
 	});
 }
 
-async function getRoomIdsByIdentity(server: string, roomIds: string[]): Promise<string[]> {
+async function getRoomIdsByIdentity(server: string): Promise<string[]> {
 	const idc = getCommitment();
 	if (idc) {
 		return await getRoomIdsByIdentityCommitment(server);
+	} else {
+		return [];
 	}
-	return roomIds;
 }
 
 async function fetchRoomsByIds(server: string, roomIds: string[]): Promise<RoomI[]> {
@@ -66,8 +81,17 @@ export async function updateRooms(
 	server: string = get(selectedServer),
 	roomIds: string[] = []
 ): Promise<string[]> {
-	roomIds = await getRoomIdsByIdentity(server, roomIds);
+	if (roomIds.length == 0) {
+		console.debug('Updating all rooms');
+		roomIds = await getRoomIdsByIdentity(server);
+	}
 	if (roomIds.length > 0) {
+		if (roomIds.includes('0071')) {
+			console.warn('DETECTED 0071');
+			//remove 0071 from roomIds
+			roomIds = roomIds.filter((id) => id !== '0071');
+			roomIds.push('7001');
+		}
 		const rooms = await fetchRoomsByIds(server, roomIds);
 		const acceptedRoomNames = extractRoomNames(rooms);
 
@@ -85,7 +109,13 @@ export async function updateRooms(
 }
 
 export function updateMessages(server: string, roomId: string) {
-	console.debug('updating messages');
+	try {
+		const rooms = get(roomsStore);
+		const name = rooms[roomId].name;
+		console.debug('Updating messages for', name);
+	} catch (e) {
+		console.debug('RoomsStore not ready yet');
+	}
 	getMessages(server, roomId).then((messages) => {
 		messageStore.update((store) => {
 			store[roomId] = messages;
@@ -113,18 +143,14 @@ export function addMessageToRoom(roomId: string, data: MessageI) {
 
 		// Add the new message
 		const test = [...currentStore[roomId]];
-		console.log('oldmsgs', test);
-		console.log('newmsg', data);
 
 		currentStore[roomId] = [...currentStore[roomId], data];
-		console.log('allmsgs', currentStore[roomId]);
 
 		// Trim messages to the last 500
 		if (currentStore[roomId].length > 500) {
 			currentStore[roomId] = currentStore[roomId].slice(-500);
 		}
 		const result = { ...currentStore };
-		console.log(result);
 		return result;
 	});
 }

src/routes/+layout.svelte

@@ -91,13 +91,11 @@
 <Modal />
 <Toast
 	position="t"
-	background="variant-filled-primary"
-/>
+	background="variant-filled-primary" />
 <Drawer
 	position="top"
 	padding="p-4"
-	rounded="rounded-token"
->
+	rounded="rounded-token">
 	{#if $drawerStore.id === 'roomselect'}
 		{#if $numberServers > 1}
 			<h3 class="h5 p-2">Change Server:<SelectServer /></h3>
@@ -109,9 +107,8 @@
 </Drawer>
 
 <div
-	class="w-full h-screen"
-	id="pagewrapper"
->
+	class="w-full h-screen max-h-screen"
+	id="pagewrapper">
 	<div id="headerwrapper"><AppHeader /></div>
 	<main>
 		<slot class="flex flex-col justify-center">
@@ -123,8 +120,7 @@
 	</div>
 	<div
 		id="sidebar"
-		class="hidden lg:block"
-	>
+		class="hidden lg:block">
 		<Sidebar {loaded} />
 	</div>
 </div>
@@ -140,6 +136,7 @@
 	}
 	#headerwrapper {
 		grid-area: header;
+		max-height: var(--header-height);
 		position: sticky;
 		top: 0;
 		z-index: 1;

src/routes/chat/+page.svelte

@@ -5,8 +5,7 @@
 
 <section
 	id="chat-wrapper"
-	class="bg-surface-50-900-token"
->
+	class="bg-surface-50-900-token">
 	<Sidebar />
 	<ChatRoom />
 </section>
@@ -14,6 +13,7 @@
 <style>
 	#chat-wrapper {
 		height: 100%;
+		max-height: calc(100vh - var(--header-height));
 		display: grid;
 		grid-template-columns: minmax(250px, 17%) 1fr;
 		grid-template-rows: auto;

src/routes/chat/ChatInputPrompt.svelte

@@ -20,6 +20,10 @@
 	export let userMessageLimit: number;
 	export let roomId: string;
 
+	let scrollChatEvent = new CustomEvent('scrollChat', {
+		detail: { behavior: 'smooth', delay: 20 }
+	});
+
 	let messageText = '';
 	let sendingMessage: boolean = false;
 	$: messagesLeft = () => {
@@ -193,6 +197,7 @@
 		} finally {
 			sendingMessage = false;
 			document.getElementById('prompt')?.focus();
+			document.dispatchEvent(scrollChatEvent);
 		}
 	}
 

src/routes/chat/ChatRoom.svelte

@@ -21,7 +21,11 @@
 
 	const toastStore = getToastStore();
 
-	let scrollChatToBottom: () => {};
+	// Define a custom event
+	let scrollChatEvent = new CustomEvent('scrollChat', {
+		detail: { behavior: 'smooth', delay: 20 }
+	});
+
 	let socket: Socket;
 	let connected: boolean = false;
 	let lastRoom = '';
@@ -73,6 +77,10 @@
 	}
 
 	onMount(() => {
+		if (!$currentSelectedRoom) {
+			$currentSelectedRoom = $currentRoomsStore[0];
+		}
+		console.debug('Chat room mounted with', $currentSelectedRoom?.roomId.toString());
 		socket = io($selectedServer);
 		socket.on('connect', () => {
 			connected = true;
@@ -81,7 +89,7 @@
 				updateMessages($selectedServer, $currentSelectedRoom?.roomId.toString());
 			}
 			if ($configStore.experience == Experiences.Chat) {
-				scrollChatToBottom();
+				document.dispatchEvent(scrollChatEvent);
 			}
 
 			engine.once('upgrade', () => {
@@ -126,7 +134,7 @@
 			const roomId = data.roomId?.toString();
 			if (roomId) {
 				addMessageToRoom(roomId, data);
-				scrollChatToBottom();
+				document.dispatchEvent(scrollChatEvent);
 			}
 		});
 
@@ -154,9 +162,7 @@
 			{onlineMembers} />
 		{#if $configStore.experience == Experiences.Chat}
 			{#key $currentSelectedRoom.roomId}
-				<Conversation
-					bind:scrollChatBottom={scrollChatToBottom}
-					{roomRateLimit} />
+				<Conversation {roomRateLimit} />
 			{/key}
 			<InputPrompt
 				{socket}
@@ -168,9 +174,7 @@
 			<Draw />
 		{:else}
 			{#key $currentSelectedRoom.roomId}
-				<Conversation
-					bind:scrollChatBottom={scrollChatToBottom}
-					{roomRateLimit} />
+				<Conversation {roomRateLimit} />
 			{/key}
 			<InputPrompt
 				{socket}
@@ -194,7 +198,7 @@
 
 <style>
 	#chat {
-		max-height: calc(100vh - 56px);
+		max-height: calc(100vh - var(--header-height));
 		grid-area: chat;
 	}
 </style>

src/routes/chat/Conversation.svelte

@@ -11,11 +11,28 @@
 
 	let elemChat: HTMLElement;
 
-	// For some reason, eslint thinks ScrollBehavior is undefined...
-	// eslint-disable-next-line no-undef
-	export function scrollChatBottom(behavior: ScrollBehavior = 'smooth', delay = 1): void {
+	$: {
+		if ($currentRoomMessages) {
+			try {
+				scrollChatBottom('instant');
+			} catch {
+				console.warn('Could not scroll to bottom');
+			}
+		}
+	}
+
+	function scrollChatBottom(behavior: ScrollBehavior = 'smooth', delay = 20, count = 0): void {
+		if (count > 10) {
+			console.warn('scrollChatBottom: elemChat is not defined after multiple attempts, giving up');
+			return;
+		}
+
 		setTimeout(() => {
-			elemChat.scrollTo({ top: elemChat.scrollHeight, behavior });
+			if (!elemChat) {
+				scrollChatBottom(behavior, delay * 4, count + 1);
+			} else {
+				elemChat.scrollTo({ top: elemChat.scrollHeight, behavior });
+			}
 		}, delay);
 	}
 
@@ -32,7 +49,13 @@
 	}
 
 	onMount(() => {
-		scrollChatBottom('instant', 10);
+		scrollChatBottom('instant');
+		document.addEventListener('scrollChat', (e: Event) => {
+			const customEvent = e as CustomEvent;
+			const behavior = customEvent.detail.behavior ? customEvent.detail.behavior : 'smooth';
+			const delay = customEvent.detail.delay ? customEvent.detail.delay : 20;
+			scrollChatBottom(behavior, delay);
+		});
 	});
 </script>
 

src/routes/chat/Sidebar.svelte

@@ -6,8 +6,7 @@
 
 <div
 	id="sidebar"
-	class="hidden sm:grid grid-rows-[auto_1fr_auto] border-r border-surface-500/30"
->
+	class="hidden sm:grid grid-rows-[auto_1fr_auto] border-r border-surface-500/30">
 	<!-- Header -->
 	{#if $numberServers > 1}
 		<header class="border-b border-surface-500/30 p-1">
@@ -15,7 +14,7 @@
 		</header>
 	{/if}
 	<!-- List -->
-	<div class="p-1 md:p-2">
+	<div class="p-1 md:p-2 overflow-y-auto">
 		<h6 class="h6 mx-3">Rooms</h6>
 		<SelectRoom />
 	</div>
@@ -26,6 +25,7 @@
 <style>
 	#sidebar {
 		grid-area: sidebar;
+		max-height: calc(100vh - var(--header-height));
 	}
 
 	@media screen and (max-width: 768px) {