chore(roomGroups) removed roomGroups

package.json

@@ -44,10 +44,10 @@
 	"dependencies": {
 		"@semaphore-protocol/group": "^3.10.1",
 		"@semaphore-protocol/identity": "^3.10.1",
-		"discreetly-interfaces": "^0.1.5",
+		"discreetly-interfaces": "^0.1.14",
 		"poseidon-lite": "^0.2.0",
 		"qr-scanner": "^1.4.2",
 		"qrcode": "^1.5.3",
 		"socket.io-client": "^4.7.1"
 	}
-}
+}

playwright.config.ts

@@ -1,12 +0,0 @@
-import type { PlaywrightTestConfig } from '@playwright/test';
-
-const config: PlaywrightTestConfig = {
-	webServer: {
-		command: 'npm run build && npm run preview',
-		port: 4173
-	},
-	testDir: 'tests',
-	testMatch: /(.+\.)?(test|spec)\.[jt]s/
-};
-
-export default config;

src/lib/rooms.ts

@@ -1,15 +1,10 @@
-import type { RoomGroupI } from 'discreetly-interfaces';
-export const roomGroups: RoomGroupI[] = [
+import type { RoomI } from 'discreetly-interfaces';
+export const rooms: RoomI[] = [
 	{
-		name: 'Loading...',
-		rooms: [
-			{
-				id: BigInt(0),
-				name: 'Loading Rooms',
-				membership: {
-					identityCommitments: [BigInt(0)]
-				}
-			}
-		]
+		id: BigInt(0),
+		name: 'Loading Rooms',
+		membership: {
+			identityCommitments: [BigInt(0)]
+		}
 	}
 ];

src/lib/stores.ts

@@ -3,10 +3,7 @@ import { browser } from '$app/environment';
 import type { ServerListI } from '$lib/types';
 
 // This is just a list of endpoints of servers to connect to, no other information, this is mainly for bootstraping the app
-export const serverListStore = storable(
-	[{ name: 'Localhost', url: 'http://localhost:3001/api/' } as ServerListI],
-	'servers'
-);
+export const serverListStore = storable([], 'servers');
 
 // This is what gets populated after querying the serverListStore, with the server's information, public rooms available, etc.
 export const serverDataStore = storable({}, 'serverData');

src/lib/types.ts

@@ -1,5 +1,5 @@
 import type { Identity } from '@semaphore-protocol/identity';
-import { rooms } from '../../../server/config/rooms';
+
 interface ButtonI {
 	link: string;
 	cls: string;

src/lib/utils.ts

@@ -1,5 +1,7 @@
 import { randomBigInt, genId } from 'discreetly-interfaces';
 import type { ServerI, ServerListI } from 'discreetly-interfaces';
+import { serverDataStore, serverListStore } from './stores';
+import { get } from 'svelte/store';
 
 async function fetchServer(server_url: string): Promise<ServerI | void> {
 	console.debug(`Fetching server ${server_url}`);
@@ -18,16 +20,17 @@ async function fetchServer(server_url: string): Promise<ServerI | void> {
 		});
 }
 
-function updateServers(
-	serverListStore: [],
-	serverDataStore: { [key: string]: ServerI }
-): { [key: string]: ServerI } {
-	serverListStore.forEach((server: ServerListI) => {
+function updateServers(): { [key: string]: ServerI } {
+	if (get(serverListStore).length < 1) {
+		console.error('serverListStore is empty');
+		serverListStore.set([{ name: 'Localhost', url: 'http://localhost:3001/api/' } as ServerListI]);
+	}
+	get(serverListStore).forEach((server: ServerListI) => {
 		console.log('fetching server data');
 		fetchServer(server.url).then((data) => {
 			console.log('setting server data');
-			if (serverDataStore[server.url]) {
-				Object.assign(serverDataStore[server.url], data as ServerI);
+			if (get(serverDataStore)[server.url]) {
+				Object.assign($serverDataStore[server.url], data as ServerI);
 			} else {
 				serverDataStore[server.url] = data as ServerI;
 			}

src/routes/chat/+layout.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import Chat from './Chat.svelte';
-	import type { RoomGroupI, RoomI } from 'discreetly-interfaces';
+	import type { RoomI } from 'discreetly-interfaces';
 	import { serverDataStore, selectedServer } from '$lib/stores';
 	import { onMount, tick } from 'svelte';
 
@@ -8,18 +8,15 @@
 
 	function setRoom(id: string) {
 		let room: RoomI;
-		const rooms = $serverDataStore[$selectedServer].roomGroups;
-		const temp_room = rooms
-			.map((group: RoomGroupI) => group.rooms)
-			.flat()
-			.find((room: RoomI) => room.id === id);
+		const rooms = $serverDataStore[$selectedServer].rooms;
+		const temp_room = rooms.find((room: RoomI) => room.id === id);
 
 		if (temp_room) {
 			console.debug('Setting Room to', temp_room.name);
 			room = temp_room;
-		} else if ($serverDataStore[$selectedServer].roomGroups[0]) {
+		} else if ($serverDataStore[$selectedServer].rooms[0]) {
 			console.debug('Setting Room to Default');
-			room = $serverDataStore[$selectedServer].roomGroups[0].rooms[0];
+			room = $serverDataStore[$selectedServer].rooms[0];
 		} else {
 			console.debug('Loading Rooms Still');
 			room = {

src/routes/chat/Chat.svelte

@@ -1,12 +1,20 @@
 <script lang="ts">
 	import { onMount, onDestroy } from 'svelte';
-	import { Avatar, ListBox } from '@skeletonlabs/skeleton';
-	import type { RoomGroupI, RoomI, MessageI } from 'discreetly-interfaces';
-	import { identityStore, selectedServer, messageStore, serverDataStore } from '$lib/stores';
+	import { Modal, modalStore } from '@skeletonlabs/skeleton';
+	import type { ModalSettings } from '@skeletonlabs/skeleton';
+	import type { RoomI, MessageI } from 'discreetly-interfaces';
+	import {
+		identityStore,
+		selectedServer,
+		messageStore,
+		serverDataStore,
+		serverListStore
+	} from '$lib/stores';
 	import { io } from 'socket.io-client';
 	import { genProof } from '$lib/prover';
 	import { Identity } from '@semaphore-protocol/identity';
 	import RateLimiter from '$lib/rateLimit';
+	import { updateServers } from '$lib/utils';
 
 	export let setRoom: (id: RoomI['id']) => any;
 	let messageText = '';
@@ -15,31 +23,19 @@
 	let currentEpoch: number = 0;
 	let messagesLeft: number = 0;
 	$: server = $serverDataStore[$selectedServer];
-	$: roomGroups = server.roomGroups;
 	$: selectedRoom = server.selectedRoom;
-	$: room = $serverDataStore[$selectedServer].roomGroups
-		.map((group: RoomGroupI) => group.rooms)
-		.flat()
-		.find((room: RoomI) => room.id === selectedRoom);
+	$: rooms = $serverDataStore[$selectedServer].rooms;
+	$: room = $serverDataStore[$selectedServer].rooms.find((room: RoomI) => room.id === selectedRoom);
 	$: () => {
 		if (!$messageStore[selectedRoom]) {
 			$messageStore[selectedRoom] = { messages: [] };
 		}
 	};
-	$: roomMessageStore = $messageStore[selectedRoom];
+
 	$: sendButtonText = messagesLeft > 0 ? 'Send (' + messagesLeft + ' left)' : 'X';
 	$: inRoom = $identityStore.rooms.hasOwnProperty(selectedRoom);
 	$: canSendMessage = inRoom && connected;
 
-	function getMembers(room: RoomI): string {
-		let total = 0;
-		total = room.membership?.identityCommitments?.length || 0;
-		if (!(total > 0)) {
-			return 'Cooming soon...';
-		}
-		return String(total.toString() + ' members');
-	}
-
 	let elemChat: HTMLElement;
 
 	// For some reason, eslint thinks ScrollBehavior is undefined...
@@ -87,6 +83,26 @@
 		}
 	}
 
+	const addServerModal: ModalSettings = {
+		type: 'prompt',
+		// Data
+		title: 'Enter Server Address',
+		body: 'Provide the server address.',
+		// Populates the input value and attributes
+		value: 'http://discreetly.chat/',
+		valueAttr: { type: 'url', required: true },
+		// Returns the updated response value
+		response: (r: string) => {
+			console.log('response:', r);
+			if ($serverListStore.includes(r)) {
+				console.warn('Server already exists');
+				return;
+			}
+			$serverListStore.push({ url: r, name: 'LOADING...' + r });
+			$serverDataStore = updateServers($serverListStore, $serverDataStore);
+		}
+	};
+
 	onMount(() => {
 		rateManager = new RateLimiter(1, room.rateLimit);
 		scrollChatBottom('instant');
@@ -130,9 +146,10 @@
 					console.debug('Creating room in message store', roomID);
 					$messageStore[roomID] = { messages: [] };
 				}
-				$messageStore[roomID].messages = [data, ...$messageStore[roomID].messages.reverse()];
-				$messageStore[roomID].messages = $messageStore[roomID].messages.slice(0, 500);
-				console.log($messageStore[roomID].messages.slice(0, 5));
+				$messageStore[roomID].messages = [data, ...$messageStore[roomID].messages.reverse()].slice(
+					0,
+					500
+				);
 				scrollChatBottom();
 			}
 		});
@@ -152,7 +169,7 @@
 	<!-- Navigation -->
 	<div id="sidebar" class="hidden lg:grid grid-rows-[auto_1fr_auto] border-r border-surface-500/30">
 		<!-- Header -->
-		<header class="border-b border-surface-500/30 p-4">
+		<header class="border-b border-surface-500/30 p-4 flex flex-row">
 			<select
 				class="select text-primary-500"
 				on:change={(event) => {
@@ -165,6 +182,13 @@
 				{/each}
 				<option value={'http://localhost:3001/api/'}>TESTING LOCALHOST</option>
 			</select>
+			<button
+				type="button"
+				class="btn btn-sm variant-ghost-primary ms-2"
+				on:click={() => {
+					modalStore.trigger(addServerModal);
+				}}>+</button
+			>
 		</header>
 		<!-- List -->
 		<div class="p-4 space-y-4 overflow-y-auto">
@@ -175,14 +199,12 @@
 					setRoom(event.target?.value);
 				}}
 			>
-				{#each roomGroups as group}
-					{#each group.rooms as room}
-						{#if room.id == selectedRoom}
-							<option value={room.id} selected>{room.name}</option>
-						{:else}
-							<option value={room.id}>{room.name}</option>
-						{/if}
-					{/each}
+				{#each rooms as room}
+					{#if room.id == selectedRoom}
+						<option value={room.id} selected>{room.name}</option>
+					{:else}
+						<option value={room.id}>{room.name}</option>
+					{/if}
 				{/each}
 			</select>
 		</div>
@@ -200,8 +222,8 @@
 		</header>
 		<!-- Conversation -->
 		<section id="conversation" bind:this={elemChat} class="p-4 overflow-y-auto space-y-4">
-			{#if roomMessageStore && roomMessageStore.messages}
-				{#each roomMessageStore.messages.reverse() as bubble}
+			{#if $messageStore[selectedRoom]}
+				{#each $messageStore[selectedRoom].messages.reverse() as bubble}
 					<div class="flex">
 						<div class="card p-4 space-y-2 bg-surface-200-700-token">
 							<header class="flex justify-between items-center">