feat: Improve Join functionality and SelectRoom component

- Added a code transformation to lowercase before sending to the server in the Join component.
- Modified the SelectRoom component to use a list layout instead of a dropdown menu.
- Added a click event to each room item in the SelectRoom component to update the selected room.
- Updated the styles for the SelectRoom component to improve readability.

fix: Handle errors in merkle proof generation

- Added error handling for generating merkle proofs with rate commitments and identity commitments in the Prover module.

style: Adjust grid template columns in Chat page

- Adjusted the grid template columns in the Chat page to make the sidebar narrower.

fix: Improve error handling in InputPrompt component

- Added validation for empty messages and messages that exceed the character limit.
- Added error handling for cases where generating merkle proofs fail, displaying appropriate error messages.

style: Adjust padding in Sidebar component

- Adjusted the padding in the Sidebar component to improve spacing.

feat: Reset state on identity deletion

- Reset the state on identity deletion by setting identityStore, configStore, roomsStore, selectedRoom, and messageStore to their initial values.

src/lib/components/Join.svelte

@@ -9,9 +9,11 @@
 	let acceptedRoomNames: string[] = [];
 
 	async function addCode(newCode: string) {
-		console.log($selectedServer);
 		const idc = getCommitment();
-		const result = (await postInviteCode($selectedServer, { code: newCode, idc })) as JoinResponseI;
+		const result = (await postInviteCode($selectedServer, {
+			code: newCode.toLowerCase(),
+			idc
+		})) as JoinResponseI;
 		console.log('INVITE CODE RESPONSE: ', result);
 		if (result.status == 'valid' || result.status == 'already-added') {
 			acceptedRoomNames = await updateRooms($selectedServer, result.roomIds);

src/lib/components/SelectRoom.svelte

@@ -1,8 +1,12 @@
 <script lang="ts">
 	import { selectedServer, selectedRoom, currentRoomsStore } from '$lib/stores';
+
+	function setRoom(roomId: string) {
+		$selectedRoom[$selectedServer] = roomId;
+	}
 </script>
 
-<select class="select text-primary-500" size="8" bind:value={$selectedRoom[$selectedServer]}>
+<!-- <select class="select text-primary-500" bind:value={$selectedRoom[$selectedServer]}>
 	{#each $currentRoomsStore as room}
 		{#if room.roomId == $selectedRoom[$selectedServer]}
 			<option value={room.roomId} title={room.roomId ? room.roomId.toString() : ''} selected
@@ -12,4 +16,29 @@
 			<option value={room.roomId}>{room.name}</option>
 		{/if}
 	{/each}
-</select>
+</select> -->
+
+<dl class="m-2 md:my-3 md:mx-2">
+	{#each $currentRoomsStore as room}
+		<div
+			class="border my-1 md:my-2 py-1 px-2 md:py-3 md:px-4 rounded-token border-surface-400-500-token"
+			class:bg-primary-active-token={room.roomId == $selectedRoom[$selectedServer]}
+			on:click={() => {
+				setRoom(room.roomId.toString());
+			}}
+		>
+			<span class="flex-auto">
+				<dt>{room.name}</dt>
+				<dd class="hidden sm:block"><small>Members: ~{room.identities?.length ?? '?'}</small></dd>
+			</span>
+		</div>
+	{/each}
+</dl>
+
+<style>
+	dl div {
+		display: flex;
+		align-items: center;
+		white-space: nowrap;
+	}
+</style>

src/lib/crypto/prover.ts

@@ -37,11 +37,14 @@ async function merkleProofFromRoom(
 	let mp: MerkleProof;
 	try {
 		mp = group.generateMerkleProof(group.indexOf(rateCommitment));
-	} catch {
+	} catch (err1: unknown) {
+		console.warn((err1 as Error).message);
+		console.warn('Could not generate Merkle Proof with Rate Commitment');
 		try {
 			mp = group.generateMerkleProof(group.indexOf(identityCommitment));
-		} catch {
-			throw new Error('Could not generate merkle proof');
+		} catch (err: unknown) {
+			console.error((err as Error).message);
+			throw new Error('Could not generate Merkle Proof with Identity Commitment');
 		}
 	}
 	return mp;

src/routes/chat/+page.svelte

@@ -12,7 +12,7 @@
 	#chat-wrapper {
 		height: 100%;
 		display: grid;
-		grid-template-columns: minmax(30%, 200px) 1fr;
+		grid-template-columns: minmax(20%, 200px) 1fr;
 		grid-template-rows: auto;
 		grid-template-areas: 'sidebar chat';
 	}

src/routes/chat/InputPrompt.svelte

@@ -56,11 +56,16 @@
 			sendingMessage = false;
 			return false;
 		}
-		if (messageText.length === 0) {
+		if (messageText.length < 1) {
 			alert('MESSAGE IS EMPTY');
 			sendingMessage = false;
 			return false;
 		}
+		if (messageText.length > 2000) {
+			alert('MESSAGE IS TOO LONG');
+			sendingMessage = false;
+			return false;
+		}
 		return true;
 	}
 
@@ -75,15 +80,27 @@
 
 		const identity = getIdentity();
 		const room = $currentSelectedRoom;
-		genProof(room, messageText, identity, currentEpoch, messageId, userMessageLimit).then((msg) => {
-			socket.emit('validateMessage', msg);
-			console.debug('Sending message: ', msg);
-			if (currentRateLimit.lastEpoch == currentEpoch) {
-				currentRateLimit.messagesSent++;
-			}
-			messageText = '';
-			sendingMessage = false;
-		});
+		genProof(room, messageText, identity, currentEpoch, messageId, userMessageLimit)
+			.then((msg) => {
+				socket.emit('validateMessage', msg);
+				console.debug('Sending message: ', msg);
+				if (currentRateLimit.lastEpoch == currentEpoch) {
+					currentRateLimit.messagesSent++;
+				}
+				messageText = '';
+				sendingMessage = false;
+			})
+			.catch((err) => {
+				if (err.message.includes('Merkle Proof')) {
+					alert(
+						"Could not generate Merkle Proof. You either don't belong in the room or you don't have an updated member list."
+					);
+				} else {
+					alert(err);
+				}
+				console.error('Error sending message: ', err);
+				sendingMessage = false;
+			});
 	}
 
 	function onPromptKeydown(event: KeyboardEvent): void {
@@ -98,6 +115,7 @@
 	<div class="input-group input-group-divider grid-cols-[1fr_auto] rounded-container-token">
 		<textarea
 			bind:value={messageText}
+			maxlength="2000"
 			class="p-1 md:p-2 text-primary-400 border"
 			class:bg-surface-900={!canSendMessage}
 			class:bg-surface-500={canSendMessage}

src/routes/chat/Sidebar.svelte

@@ -9,7 +9,7 @@
 		<SelectServer />
 	</header>
 	<!-- List -->
-	<div class="p-4 space-y-4 overflow-y-auto">
+	<div class="p-1 md:p-2 overflow-y-auto">
 		<SelectRoom />
 	</div>
 	<!-- Footer -->

src/routes/identity/DeleteIdentity.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { configDefaults } from '$lib/defaults';
-	import { configStore, identityStore } from '$lib/stores';
+	import { configStore, identityStore, messageStore, roomsStore, selectedRoom } from '$lib/stores';
 	import type { IdentityStoreI } from '$lib/types';
 	import { onMount } from 'svelte';
 
@@ -11,6 +11,9 @@
 		console.warn('DELETING IDENTITY');
 		$identityStore = {} as IdentityStoreI;
 		$configStore = configDefaults;
+		$roomsStore = {};
+		$selectedRoom = {};
+		$messageStore = {};
 	}
 
 	onMount(() => {