fix profiles a little more idk

src/components/Room.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import type { IRoom } from "$types/rooms";
+
+	export let room: IRoom;
+</script>
+
+<div class="room">
+	<h3>{room.name}</h3>
+	<p>{room.description}</p>
+</div>
+
+<style>
+	.room {
+		border: solid thin #353e52;
+		padding: 8px 12px;
+	}
+</style>

src/routes/+layout.svelte

@@ -6,7 +6,7 @@
 	import { page } from "$app/stores";
 	import "$lib/css/index.css";
 	import { Button } from "flowbite-svelte";
-	import { CodeBranchOutline, DiscordSolid, DownloadOutline } from "flowbite-svelte-icons";
+	import { CodeBranchOutline, DiscordSolid, UserCircleSolid } from "flowbite-svelte-icons";
 
 	const excludedRoutesNav = ["/mockup/boot", "/mockup/w11"];
 	const excludedRoutesBg = ["/mockup", "/mockup/w11"];
@@ -30,6 +30,11 @@
 					<DiscordSolid />
 				</Button>
 			</a>
+			<a href="/account">
+				<Button class="!p-2" pill={true}>
+					<UserCircleSolid />
+				</Button>
+			</a>
 		</div>
 	</div>
 {/if}

src/routes/account/+page.server.ts

@@ -1,10 +1,13 @@
+import { RoomManager } from "$lib/server/class/Room.js";
 import { useAuth } from "$lib/util/api";
 
 export async function load(opts) {
 	const apiKey = opts.cookies.get("token");
 	const user = await useAuth(apiKey || "unused");
+	const rooms = RoomManager.getRooms().map((r) => r.toJSON());
 	return {
 		user: { ...user },
+		rooms,
 		token: apiKey,
 	};
 }

src/routes/account/+page.svelte

@@ -3,6 +3,7 @@
 	import { SuyuAPI } from "$lib/client/api";
 	import type { CreateAccountResponse } from "$types/api";
 	import type { PageData } from "./$types";
+	import Room from "$components/Room.svelte";
 
 	export let data: PageData;
 	let base64Token: string;
@@ -48,11 +49,12 @@
 </script>
 
 <div class="panel-blur main-panel">
-	<h2>Account Settings</h2>
+	<h2>Online Services</h2>
 	<p>
 		{#if data?.token && data?.user && data.user.username}
 			<p>Username: {data.user.username}</p>
 			<p>Token: <code>{base64Token}</code></p>
+			<button class="danger" on:click={deleteAccount}>Delete Account</button>
 		{:else}
 			<p>
 				It appears you don't have an account; please register one to access suyu's online
@@ -64,20 +66,23 @@
 			</div>
 		{/if}
 	</p>
-	<div class="float-bottom-right">
-		<button class="danger" on:click={deleteAccount}>Delete Account</button>
+	<h2>Rooms</h2>
+	<div class="rooms">
+		{#each data.rooms as room}
+			<Room {room} />
+		{/each}
 	</div>
 </div>
 
 <style>
 	.main-panel {
 		position: fixed;
-		top: 50%;
 		left: 50%;
-		transform: translate(-50%, calc(-50% + 40px));
+		transform: translate(-50%);
+		margin-top: 60px;
 		width: calc(100% - 120px);
 		height: calc(100% - 240px);
-		max-height: 600px;
+		max-height: 1000px;
 		min-height: 400px;
 		max-width: 1000px;
 		padding: 28px 36px;
@@ -102,16 +107,10 @@
 		overflow: hidden;
 		text-overflow: ellipsis;
 		white-space: pre;
+		width: fit-content;
 		max-width: 100%;
 		display: block;
 		margin-top: 4px;
-		margin-bottom: 4px;
-	}
-
-	.float-bottom-right {
-		position: absolute;
-		bottom: 0;
-		right: 0;
-		margin: 16px;
+		margin-bottom: 16px;
 	}
 </style>