From 28f5e8dc27011459aefb10af47219f94d19e4fa4 Mon Sep 17 00:00:00 2001
From: Temmie <git@beaver.mom>
Date: Fri, 8 Aug 2025 02:01:36 +0200
Subject: [PATCH 01/22] feat: implement a proper navbar

---
 components/UserInterface/Navbar.vue           | 124 +++++++++++++++
 layouts/client.vue                            | 147 +++++++++---------
 .../[serverId]/channels/[channelId].vue       |  16 +-
 types/interfaces.ts                           |  16 ++
 4 files changed, 227 insertions(+), 76 deletions(-)
 create mode 100644 components/UserInterface/Navbar.vue

diff --git a/components/UserInterface/Navbar.vue b/components/UserInterface/Navbar.vue
new file mode 100644
index 0000000..9f4ba1d
--- /dev/null
+++ b/components/UserInterface/Navbar.vue
@@ -0,0 +1,124 @@
+<template>
+	<div id="navbar">
+		<div v-for="entry of props.clientItems" id="navbar-left">
+			<button class="navbar-item" :title="entry.title"
+					@click.prevent="entry.callback()">
+				<Icon :name="entry.icon" class="navbar-item-icon" />
+			</button>
+		</div>
+		<div id="navbar-middle">
+			<NuxtImg v-if="props.contextIcon"
+				class="context-icon"
+				:alt="props.contextName"
+				:src="props.contextIcon" />
+			<DefaultIcon v-else-if="props.contextName && props.guildUuid"
+				class="context-icon" 
+				:alt="props.contextName"
+				:name="props.contextName" :seed="props.guildUuid"/>
+			
+			<div class="context-title">
+				{{ props.contextName }}
+			</div>
+		</div>
+		<div v-for="entry of props.channelItems" id="navbar-right">
+			<button class="navbar-item" :title="entry.title"
+					@click.prevent="entry.callback()">
+				<Icon :name="entry.icon" class="navbar-item-icon" />
+			</button>
+		</div>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import type { NavbarInterface, NavbarItem } from '~/types/interfaces';
+
+const props = defineProps<NavbarInterface>();
+
+</script>
+
+<style scoped>
+#navbar {
+	--navbar-height: 5dvh;
+	--navbar-icon-size: 3dvh;
+	--navbar-gap: calc(3dvh * .2);
+	--side-margins: calc(.6dvw + .35dvh); /* try to make it reasonable at any aspect ratio */
+
+	left: 0;
+	right: 0;
+	top: 0;
+	
+	min-height: var(--navbar-height);
+	max-height: var(--navbar-height);
+	width: 100%;
+
+	display: flex;
+	justify-content: center;
+
+	background: var(--optional-topbar-background);
+	background-color: var(--topbar-background-color);
+	border-bottom: 1px solid var(--padding-color);
+}
+
+#navbar-left,
+#navbar-middle,
+#navbar-right {
+	top: 0;
+	height: var(--navbar-height);
+
+	display: inline-flex;
+	justify-content: center;
+	align-items: center;
+	gap: var(--navbar-gap);
+}
+
+#navbar-left {
+	left: var(--side-margins);
+	position: absolute;
+}
+
+#navbar-middle {
+	max-width: 50dvw;
+}
+
+#navbar-right {
+	right: var(--side-margins);
+	position: absolute;
+}
+
+.context-icon {
+	height: calc(var(--navbar-height) * 0.7);
+	width: calc(var(--navbar-height) * 0.7);
+	border-radius: var(--guild-icon-radius);
+}
+
+.context-title {
+	min-height: var(--navbar-height);
+	max-height: var(--navbar-height);
+
+	font-weight: 500;
+	font-size: calc(var(--navbar-height) * .5);
+	line-height: calc(var(--navbar-height) * .9);
+}
+
+.navbar-item {
+	color: var(--reply-text-color);
+	background-color: transparent;
+	border: none;
+	cursor: pointer;
+	padding: 0;
+
+	transition: color 300ms;
+	display: flex;
+	align-items: center;
+	height: var(--navbar-icon-size);
+}
+
+.navbar-item:hover {
+	color: var(--primary-highlighted-color);
+}
+
+.navbar-item-icon {
+	width: var(--navbar-icon-size);
+	height: 100%;
+}
+</style>
\ No newline at end of file
diff --git a/layouts/client.vue b/layouts/client.vue
index 800a097..fc525a3 100644
--- a/layouts/client.vue
+++ b/layouts/client.vue
@@ -1,13 +1,7 @@
 <template>
 	<Loading v-show="loading" />
 	<div :class="{ hidden: loading, visible: !loading }" id="client-root">
-		<div id="homebar">
-			<div class="homebar-item">
-				<marquee>
-					gorb!!!!!
-				</marquee>
-			</div>
-		</div>
+		<Navbar id="navbar" v-bind="navbar" />
 		<div id="page-content">
 			<div id="left-column">
 				<div class="left-column-segment">
@@ -52,14 +46,16 @@ import DefaultIcon from '~/components/DefaultIcon.vue';
 import GuildDropdown from '~/components/Guild/GuildDropdown.vue';
 import Loading from '~/components/Popups/Loading.vue';
 import Button from '~/components/UserInterface/Button.vue';
+import Navbar from '~/components/UserInterface/Navbar.vue';
 import VerticalSpacer from '~/components/UserInterface/VerticalSpacer.vue';
-import type { GuildResponse } from '~/types/interfaces';
+import type { GuildResponse, NavbarInterface, NavbarItem } from '~/types/interfaces';
 
 definePageMeta({
 	keepalive: true
 });
 
 const loading = useState("loading", () => false);
+const navbar = useState<NavbarInterface>("navbar")
 
 const createButtonContainer = ref<HTMLButtonElement>();
 
@@ -68,60 +64,60 @@ const api = useApi();
 
 const options = [
 	{ name: "Join", value: "join", callback: async () => {
-			console.log("join guild!");
-			const div = document.createElement("div");
-			const guildJoinModal = h(ModalBase, {
-				title: "Join Guild",
-				id: "guild-join-modal",
-				onClose: () => {
-					unrender(div);
-				},
-				onCancel: () => {
-					unrender(div);
-				},
-				style: "height: 20dvh; width: 15dvw"
+		console.log("join guild!");
+		const div = document.createElement("div");
+		const guildJoinModal = h(ModalBase, {
+			title: "Join Guild",
+			id: "guild-join-modal",
+			onClose: () => {
+				unrender(div);
 			},
-			[
-				h("input", {
-					id: "guild-invite-input",
-					type: "text",
-					placeholder: "oyqICZ",
-				}),
-				h(Button, {
-					text: "Join",
-					variant: "normal",
-					callback: async () => {
-						const input = document.getElementById("guild-invite-input") as HTMLInputElement;
-						const invite = input.value;
-						if (invite.length == 6) {
-							try {
-								const joinedGuild = await api.joinGuild(invite);
-								guilds.push(joinedGuild);
-								return await navigateTo(`/servers/${joinedGuild.uuid}`);
-							} catch (error) {
-								alert(`Couldn't use invite: ${error}`);
-							}
+			onCancel: () => {
+				unrender(div);
+			},
+			style: "height: 20dvh; width: 15dvw"
+		},
+		[
+			h("input", {
+				id: "guild-invite-input",
+				type: "text",
+				placeholder: "oyqICZ",
+			}),
+			h(Button, {
+				text: "Join",
+				variant: "normal",
+				callback: async () => {
+					const input = document.getElementById("guild-invite-input") as HTMLInputElement;
+					const invite = input.value;
+					if (invite.length == 6) {
+						try {
+							const joinedGuild = await api.joinGuild(invite);
+							guilds.push(joinedGuild);
+							return await navigateTo(`/servers/${joinedGuild.uuid}`);
+						} catch (error) {
+							alert(`Couldn't use invite: ${error}`);
 						}
 					}
-				})
-			]);
-			document.body.appendChild(div);
-			render(guildJoinModal, div);
-		}
-	},
-	{ name: "Create", value: "create", callback: async () => {
-			console.log("create guild");
-			const user = await useAuth().getUser();
-			const div = document.createElement("div");
-			const guildCreateModal = h(ModalBase, {
-				title: "Create a Guild",
-				id: "guild-join-modal",
-				onClose: () => {
-					unrender(div);
-				},
-				onCancel: () => {
-					unrender(div);
-				},
+				}
+			})
+		]);
+		document.body.appendChild(div);
+		render(guildJoinModal, div);
+	}
+},
+{ name: "Create", value: "create", callback: async () => {
+	console.log("create guild");
+	const user = await useAuth().getUser();
+	const div = document.createElement("div");
+	const guildCreateModal = h(ModalBase, {
+		title: "Create a Guild",
+		id: "guild-join-modal",
+		onClose: () => {
+			unrender(div);
+		},
+		onCancel: () => {
+			unrender(div);
+		},
 				style: "height: 20dvh; width: 15dvw;"
 			},
 			[
@@ -154,6 +150,23 @@ const options = [
 
 const guilds = await api.fetchMyGuilds();
 
+onMounted(() => {
+	if (!navbar.value) {
+		const helpItem = {
+			title: "Source",
+			icon: "lucide:code-xml",
+			callback: () => { open("https://git.gorb.app/gorb/frontend") } 
+		} as NavbarItem
+
+		navbar.value = {
+			clientItems: [
+				helpItem
+			],
+			channelItems: [] // set by the channel
+		} as NavbarInterface
+	}
+})
+
 function createDropdown() {
 	const dropdown = h(GuildDropdown, { options });
 	const div = document.createElement("div");
@@ -192,22 +205,6 @@ function createDropdown() {
 	transition: opacity 500ms;
 }
 
-#homebar {
-	min-height: 4dvh;
-	display: flex;
-	justify-content: space-evenly;
-	align-items: center;
-	background: var(--optional-topbar-background);
-	background-color: var(--topbar-background-color);
-	border-bottom: 1px solid var(--padding-color);
-	padding-left: 5dvw;
-	padding-right: 5dvw;
-}
-
-.homebar-item {
-	width: 100dvw;
-}
-
 #page-content {
 	display: flex;
 	flex-direction: row;
diff --git a/pages/servers/[serverId]/channels/[channelId].vue b/pages/servers/[serverId]/channels/[channelId].vue
index f07dabd..6e30d56 100644
--- a/pages/servers/[serverId]/channels/[channelId].vue
+++ b/pages/servers/[serverId]/channels/[channelId].vue
@@ -36,11 +36,12 @@ import ChannelEntry from "~/components/Guild/ChannelEntry.vue";
 import GuildOptionsMenu from "~/components/Guild/GuildOptionsMenu.vue";
 import MemberEntry from "~/components/Guild/MemberEntry.vue";
 import ResizableSidebar from "~/components/UserInterface/ResizableSidebar.vue";
-import type { ChannelResponse, GuildMemberResponse, GuildResponse } from "~/types/interfaces";
+import type { ChannelResponse, GuildMemberResponse, GuildResponse, NavbarInterface } from "~/types/interfaces";
 
 const route = useRoute();
 
 const loading = useState("loading");
+const navbar = useState<NavbarInterface>("navbar");
 
 const channelUrlPath = `channels/${route.params.channelId}`;
 
@@ -65,13 +66,18 @@ onMounted(async () => {
 	console.log("fetched guild");
 	await setArrayVariables();
 	console.log("set array variables");
+
+	updateNavbar()
 });
 
 onActivated(async () => {
 	console.log("activating");
+	updateNavbar()
+
 	const guildUrl = `guilds/${route.params.serverId}`;
 	server.value = await fetchWithApi(guildUrl);
 	console.log("fetched guild");
+	
 	await setArrayVariables();
 	console.log("set array variables");
 });
@@ -98,6 +104,14 @@ function toggleInvitePopup(e: Event) {
 
 function handleMemberClick(member: GuildMemberResponse) {
 }
+
+function updateNavbar() {
+	if (server.value) {
+		navbar.value.contextName = server.value.name
+		navbar.value.contextIcon = server.value.icon ?? undefined
+		navbar.value.guildUuid = server.value.uuid
+	}
+}
 </script>
 
 <style>
diff --git a/types/interfaces.ts b/types/interfaces.ts
index d175d76..3b18a74 100644
--- a/types/interfaces.ts
+++ b/types/interfaces.ts
@@ -121,3 +121,19 @@ export interface ContextMenuInterface {
 	pointerY: number,
 	items: ContextMenuItem[]
 }
+
+export interface NavbarItem {
+	title: string,
+	icon: string,
+	hasPing?: boolean, // whether to draw a "ping" icon or not
+	callback: (...args: any[]) => any;
+}
+
+export interface NavbarInterface {
+	clientItems: NavbarItem[]
+	channelItems: NavbarItem[] // search bar will require some changes
+	contextName?: string
+	contextIcon?: string
+	guildUuid?: string
+}
+
-- 
2.47.3


From 89150a6cc68440ab5e70a70b0936a0e7fb4782c1 Mon Sep 17 00:00:00 2001
From: Temmie <git@beaver.mom>
Date: Fri, 8 Aug 2025 02:07:58 +0200
Subject: [PATCH 02/22] feat: add "Direct Messages" state to navbar

---
 components/UserInterface/Navbar.vue |  4 +---
 pages/me/index.vue                  | 17 +++++++++++++++++
 2 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/components/UserInterface/Navbar.vue b/components/UserInterface/Navbar.vue
index 9f4ba1d..5a7460c 100644
--- a/components/UserInterface/Navbar.vue
+++ b/components/UserInterface/Navbar.vue
@@ -9,11 +9,9 @@
 		<div id="navbar-middle">
 			<NuxtImg v-if="props.contextIcon"
 				class="context-icon"
-				:alt="props.contextName"
 				:src="props.contextIcon" />
 			<DefaultIcon v-else-if="props.contextName && props.guildUuid"
 				class="context-icon" 
-				:alt="props.contextName"
 				:name="props.contextName" :seed="props.guildUuid"/>
 			
 			<div class="context-title">
@@ -97,7 +95,7 @@ const props = defineProps<NavbarInterface>();
 
 	font-weight: 500;
 	font-size: calc(var(--navbar-height) * .5);
-	line-height: calc(var(--navbar-height) * .9);
+	line-height: var(--navbar-height);
 }
 
 .navbar-item {
diff --git a/pages/me/index.vue b/pages/me/index.vue
index a0d0384..e2f79d2 100644
--- a/pages/me/index.vue
+++ b/pages/me/index.vue
@@ -23,16 +23,33 @@ import DirectMessagesSidebar from '~/components/Me/DirectMessagesSidebar.vue';
 import Button from '~/components/UserInterface/Button.vue';
 import AddFriend from '~/components/Me/AddFriend.vue';
 import FriendsList from '~/components/Me/FriendsList.vue';
+import type { NavbarInterface } from '~/types/interfaces';
 
 const { fetchFriends } = useApi();
 
 let filter = ref("all");
+const navbar = useState<NavbarInterface>("navbar")
 
 const friends = await fetchFriends()
 
 function updateFilter(newFilter: string) {
 	filter.value = newFilter;
 }
+
+onMounted(async () => {
+	updateNavbar()
+})
+
+onActivated(async () => {
+	updateNavbar()
+})
+
+function updateNavbar() {
+	const runtimeConfig = useRuntimeConfig();
+	navbar.value.channelItems = []
+	navbar.value.contextName = "Direct Messages"
+	navbar.value.contextIcon = `${runtimeConfig.app.baseURL}/icon.svg`
+}
 </script>
 
 <style module>
-- 
2.47.3


From eb4427ff4b500cdc5df2b71175112010e9e19fec Mon Sep 17 00:00:00 2001
From: Temmie <git@beaver.mom>
Date: Fri, 8 Aug 2025 02:16:21 +0200
Subject: [PATCH 03/22] refactor: move logic for default icon navbar itself

---
 components/UserInterface/Navbar.vue | 5 +++++
 pages/me/index.vue                  | 3 +--
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/components/UserInterface/Navbar.vue b/components/UserInterface/Navbar.vue
index 5a7460c..dea9dde 100644
--- a/components/UserInterface/Navbar.vue
+++ b/components/UserInterface/Navbar.vue
@@ -13,6 +13,8 @@
 			<DefaultIcon v-else-if="props.contextName && props.guildUuid"
 				class="context-icon" 
 				:name="props.contextName" :seed="props.guildUuid"/>
+			<NuxtImg v-else
+				:src="defaultIcon" />
 			
 			<div class="context-title">
 				{{ props.contextName }}
@@ -32,6 +34,9 @@ import type { NavbarInterface, NavbarItem } from '~/types/interfaces';
 
 const props = defineProps<NavbarInterface>();
 
+const runtimeConfig = useRuntimeConfig();
+const defaultIcon = `${runtimeConfig.app.baseURL}/icon.svg`
+
 </script>
 
 <style scoped>
diff --git a/pages/me/index.vue b/pages/me/index.vue
index e2f79d2..a421af4 100644
--- a/pages/me/index.vue
+++ b/pages/me/index.vue
@@ -45,10 +45,9 @@ onActivated(async () => {
 })
 
 function updateNavbar() {
-	const runtimeConfig = useRuntimeConfig();
 	navbar.value.channelItems = []
 	navbar.value.contextName = "Direct Messages"
-	navbar.value.contextIcon = `${runtimeConfig.app.baseURL}/icon.svg`
+	navbar.value.contextIcon = undefined
 }
 </script>
 
-- 
2.47.3


From 5ca4762f01ad9626b03140ed594baf4dd5ec43fd Mon Sep 17 00:00:00 2001
From: Temmie <git@beaver.mom>
Date: Fri, 8 Aug 2025 02:23:46 +0200
Subject: [PATCH 04/22] style: make client and channel items optional

---
 components/UserInterface/Navbar.vue | 4 ++--
 types/interfaces.ts                 | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/components/UserInterface/Navbar.vue b/components/UserInterface/Navbar.vue
index dea9dde..622d50f 100644
--- a/components/UserInterface/Navbar.vue
+++ b/components/UserInterface/Navbar.vue
@@ -1,6 +1,6 @@
 <template>
 	<div id="navbar">
-		<div v-for="entry of props.clientItems" id="navbar-left">
+		<div v-if="props.clientItems" v-for="entry of props.clientItems" id="navbar-left">
 			<button class="navbar-item" :title="entry.title"
 					@click.prevent="entry.callback()">
 				<Icon :name="entry.icon" class="navbar-item-icon" />
@@ -20,7 +20,7 @@
 				{{ props.contextName }}
 			</div>
 		</div>
-		<div v-for="entry of props.channelItems" id="navbar-right">
+		<div v-if="props.channelItems" v-for="entry of props.channelItems" id="navbar-right">
 			<button class="navbar-item" :title="entry.title"
 					@click.prevent="entry.callback()">
 				<Icon :name="entry.icon" class="navbar-item-icon" />
diff --git a/types/interfaces.ts b/types/interfaces.ts
index 3b18a74..dc0c9f6 100644
--- a/types/interfaces.ts
+++ b/types/interfaces.ts
@@ -130,8 +130,8 @@ export interface NavbarItem {
 }
 
 export interface NavbarInterface {
-	clientItems: NavbarItem[]
-	channelItems: NavbarItem[] // search bar will require some changes
+	clientItems?: NavbarItem[]
+	channelItems?: NavbarItem[] // search bar will require some changes
 	contextName?: string
 	contextIcon?: string
 	guildUuid?: string
-- 
2.47.3


From 3ac8595af66c7e406ee75bd5f195a0c7961df4c9 Mon Sep 17 00:00:00 2001
From: Temmie <git@beaver.mom>
Date: Fri, 8 Aug 2025 02:27:50 +0200
Subject: [PATCH 05/22] fix: a crash related to accessing navbar values before
 setup

---
 components/UserInterface/Navbar.vue | 1 +
 pages/me/index.vue                  | 9 ++++++---
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/components/UserInterface/Navbar.vue b/components/UserInterface/Navbar.vue
index 622d50f..b45138f 100644
--- a/components/UserInterface/Navbar.vue
+++ b/components/UserInterface/Navbar.vue
@@ -14,6 +14,7 @@
 				class="context-icon" 
 				:name="props.contextName" :seed="props.guildUuid"/>
 			<NuxtImg v-else
+				class="context-icon"
 				:src="defaultIcon" />
 			
 			<div class="context-title">
diff --git a/pages/me/index.vue b/pages/me/index.vue
index a421af4..a48fb72 100644
--- a/pages/me/index.vue
+++ b/pages/me/index.vue
@@ -45,9 +45,12 @@ onActivated(async () => {
 })
 
 function updateNavbar() {
-	navbar.value.channelItems = []
-	navbar.value.contextName = "Direct Messages"
-	navbar.value.contextIcon = undefined
+	if (navbar.value) {
+		navbar.value.channelItems = []
+		navbar.value.contextName = "Direct Messages"
+		navbar.value.contextIcon = undefined
+		navbar.value.guildUuid = undefined
+	}
 }
 </script>
 
-- 
2.47.3


From 19c562f46091a573d49e8942f09ad06fd048a97d Mon Sep 17 00:00:00 2001
From: Temmie <git@beaver.mom>
Date: Mon, 11 Aug 2025 01:06:54 +0200
Subject: [PATCH 06/22] refactor: move updateNavbar() into ./utils function

---
 pages/me/[userId].vue                         | 10 +++++++++
 pages/me/index.vue                            | 15 ++-----------
 .../[serverId]/channels/[channelId].vue       | 11 ++--------
 types/interfaces.ts                           |  6 +++++
 utils/updateNavbar.ts                         | 22 +++++++++++++++++++
 5 files changed, 42 insertions(+), 22 deletions(-)
 create mode 100644 utils/updateNavbar.ts

diff --git a/pages/me/[userId].vue b/pages/me/[userId].vue
index 209ffab..2ec68a2 100644
--- a/pages/me/[userId].vue
+++ b/pages/me/[userId].vue
@@ -8,6 +8,16 @@
 
 <script lang="ts" setup>
 import DirectMessagesSidebar from '~/components/Me/DirectMessagesSidebar.vue';
+
+onMounted(async () => {
+	updateNavbar({isDirectMessages: true})
+
+})
+
+onActivated(async () => {
+	updateNavbar({isDirectMessages: true})
+
+})
 </script>
 
 <style>
diff --git a/pages/me/index.vue b/pages/me/index.vue
index a48fb72..5691b79 100644
--- a/pages/me/index.vue
+++ b/pages/me/index.vue
@@ -23,12 +23,10 @@ import DirectMessagesSidebar from '~/components/Me/DirectMessagesSidebar.vue';
 import Button from '~/components/UserInterface/Button.vue';
 import AddFriend from '~/components/Me/AddFriend.vue';
 import FriendsList from '~/components/Me/FriendsList.vue';
-import type { NavbarInterface } from '~/types/interfaces';
 
 const { fetchFriends } = useApi();
 
 let filter = ref("all");
-const navbar = useState<NavbarInterface>("navbar")
 
 const friends = await fetchFriends()
 
@@ -37,21 +35,12 @@ function updateFilter(newFilter: string) {
 }
 
 onMounted(async () => {
-	updateNavbar()
+	updateNavbar({isDirectMessages: true})
 })
 
 onActivated(async () => {
-	updateNavbar()
+	updateNavbar({isDirectMessages: true})
 })
-
-function updateNavbar() {
-	if (navbar.value) {
-		navbar.value.channelItems = []
-		navbar.value.contextName = "Direct Messages"
-		navbar.value.contextIcon = undefined
-		navbar.value.guildUuid = undefined
-	}
-}
 </script>
 
 <style module>
diff --git a/pages/servers/[serverId]/channels/[channelId].vue b/pages/servers/[serverId]/channels/[channelId].vue
index 6e30d56..b8ea85f 100644
--- a/pages/servers/[serverId]/channels/[channelId].vue
+++ b/pages/servers/[serverId]/channels/[channelId].vue
@@ -67,12 +67,12 @@ onMounted(async () => {
 	await setArrayVariables();
 	console.log("set array variables");
 
-	updateNavbar()
+	updateNavbar({guild: server.value})
 });
 
 onActivated(async () => {
 	console.log("activating");
-	updateNavbar()
+	updateNavbar({guild: server.value})
 
 	const guildUrl = `guilds/${route.params.serverId}`;
 	server.value = await fetchWithApi(guildUrl);
@@ -105,13 +105,6 @@ function toggleInvitePopup(e: Event) {
 function handleMemberClick(member: GuildMemberResponse) {
 }
 
-function updateNavbar() {
-	if (server.value) {
-		navbar.value.contextName = server.value.name
-		navbar.value.contextIcon = server.value.icon ?? undefined
-		navbar.value.guildUuid = server.value.uuid
-	}
-}
 </script>
 
 <style>
diff --git a/types/interfaces.ts b/types/interfaces.ts
index dc0c9f6..62a7c16 100644
--- a/types/interfaces.ts
+++ b/types/interfaces.ts
@@ -137,3 +137,9 @@ export interface NavbarInterface {
 	guildUuid?: string
 }
 
+export interface NavbarOptions {
+	guild?: GuildResponse
+	channel?: ChannelResponse
+	isDirectMessages?: boolean
+}
+
diff --git a/utils/updateNavbar.ts b/utils/updateNavbar.ts
new file mode 100644
index 0000000..1d99501
--- /dev/null
+++ b/utils/updateNavbar.ts
@@ -0,0 +1,22 @@
+import type { NavbarInterface, NavbarOptions } from "~/types/interfaces";
+
+const navbar = useState<NavbarInterface>("navbar")
+
+export default async (options: NavbarOptions) => {
+	await nextTick()
+	
+	if (navbar.value) {
+		if (options.guild) {
+			navbar.value.channelItems = []
+			navbar.value.contextName = options.guild?.name
+			navbar.value.contextIcon = options.guild?.icon ?? undefined
+			navbar.value.guildUuid = options.guild?.uuid
+		}
+		else if (options.isDirectMessages) {
+			navbar.value.channelItems = []
+			navbar.value.contextName = "Direct Messages"
+			navbar.value.contextIcon = undefined
+			navbar.value.guildUuid = undefined
+		}
+	}
+}
\ No newline at end of file
-- 
2.47.3


From 5ce236c936158c33eea5dac786097f6217ef9aa9 Mon Sep 17 00:00:00 2001
From: Temmie <git@beaver.mom>
Date: Mon, 11 Aug 2025 01:08:50 +0200
Subject: [PATCH 07/22] chore: refactor NavbarItem to INavbar

---
 components/UserInterface/Navbar.vue               | 4 ++--
 layouts/client.vue                                | 6 +++---
 pages/servers/[serverId]/channels/[channelId].vue | 4 ++--
 types/interfaces.ts                               | 2 +-
 utils/updateNavbar.ts                             | 6 +++---
 5 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/components/UserInterface/Navbar.vue b/components/UserInterface/Navbar.vue
index b45138f..b6bc294 100644
--- a/components/UserInterface/Navbar.vue
+++ b/components/UserInterface/Navbar.vue
@@ -31,9 +31,9 @@
 </template>
 
 <script lang="ts" setup>
-import type { NavbarInterface, NavbarItem } from '~/types/interfaces';
+import type { INavbar, NavbarItem } from '~/types/interfaces';
 
-const props = defineProps<NavbarInterface>();
+const props = defineProps<INavbar>();
 
 const runtimeConfig = useRuntimeConfig();
 const defaultIcon = `${runtimeConfig.app.baseURL}/icon.svg`
diff --git a/layouts/client.vue b/layouts/client.vue
index fc525a3..f2582cf 100644
--- a/layouts/client.vue
+++ b/layouts/client.vue
@@ -48,14 +48,14 @@ import Loading from '~/components/Popups/Loading.vue';
 import Button from '~/components/UserInterface/Button.vue';
 import Navbar from '~/components/UserInterface/Navbar.vue';
 import VerticalSpacer from '~/components/UserInterface/VerticalSpacer.vue';
-import type { GuildResponse, NavbarInterface, NavbarItem } from '~/types/interfaces';
+import type { GuildResponse, INavbar, NavbarItem } from '~/types/interfaces';
 
 definePageMeta({
 	keepalive: true
 });
 
 const loading = useState("loading", () => false);
-const navbar = useState<NavbarInterface>("navbar")
+const navbar = useState<INavbar>("navbar")
 
 const createButtonContainer = ref<HTMLButtonElement>();
 
@@ -163,7 +163,7 @@ onMounted(() => {
 				helpItem
 			],
 			channelItems: [] // set by the channel
-		} as NavbarInterface
+		} as INavbar
 	}
 })
 
diff --git a/pages/servers/[serverId]/channels/[channelId].vue b/pages/servers/[serverId]/channels/[channelId].vue
index b8ea85f..024676e 100644
--- a/pages/servers/[serverId]/channels/[channelId].vue
+++ b/pages/servers/[serverId]/channels/[channelId].vue
@@ -36,12 +36,12 @@ import ChannelEntry from "~/components/Guild/ChannelEntry.vue";
 import GuildOptionsMenu from "~/components/Guild/GuildOptionsMenu.vue";
 import MemberEntry from "~/components/Guild/MemberEntry.vue";
 import ResizableSidebar from "~/components/UserInterface/ResizableSidebar.vue";
-import type { ChannelResponse, GuildMemberResponse, GuildResponse, NavbarInterface } from "~/types/interfaces";
+import type { ChannelResponse, GuildMemberResponse, GuildResponse, INavbar } from "~/types/interfaces";
 
 const route = useRoute();
 
 const loading = useState("loading");
-const navbar = useState<NavbarInterface>("navbar");
+const navbar = useState<INavbar>("navbar");
 
 const channelUrlPath = `channels/${route.params.channelId}`;
 
diff --git a/types/interfaces.ts b/types/interfaces.ts
index 62a7c16..c23fbe5 100644
--- a/types/interfaces.ts
+++ b/types/interfaces.ts
@@ -129,7 +129,7 @@ export interface NavbarItem {
 	callback: (...args: any[]) => any;
 }
 
-export interface NavbarInterface {
+export interface INavbar {
 	clientItems?: NavbarItem[]
 	channelItems?: NavbarItem[] // search bar will require some changes
 	contextName?: string
diff --git a/utils/updateNavbar.ts b/utils/updateNavbar.ts
index 1d99501..bd181d1 100644
--- a/utils/updateNavbar.ts
+++ b/utils/updateNavbar.ts
@@ -1,10 +1,10 @@
-import type { NavbarInterface, NavbarOptions } from "~/types/interfaces";
+import type { INavbar, NavbarOptions } from "~/types/interfaces";
 
-const navbar = useState<NavbarInterface>("navbar")
+const navbar = useState<INavbar>("navbar")
 
 export default async (options: NavbarOptions) => {
 	await nextTick()
-	
+
 	if (navbar.value) {
 		if (options.guild) {
 			navbar.value.channelItems = []
-- 
2.47.3


From 74b698d72809acc920dc758f59777475c90fe12d Mon Sep 17 00:00:00 2001
From: Temmie <git@beaver.mom>
Date: Mon, 11 Aug 2025 01:11:27 +0200
Subject: [PATCH 08/22] chore: change type hinting syntax on navbar init

---
 layouts/client.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/layouts/client.vue b/layouts/client.vue
index f2582cf..98816ce 100644
--- a/layouts/client.vue
+++ b/layouts/client.vue
@@ -152,18 +152,18 @@ const guilds = await api.fetchMyGuilds();
 
 onMounted(() => {
 	if (!navbar.value) {
-		const helpItem = {
+		const sourceLinkItem: NavbarItem = {
 			title: "Source",
 			icon: "lucide:code-xml",
 			callback: () => { open("https://git.gorb.app/gorb/frontend") } 
-		} as NavbarItem
+		}
 
 		navbar.value = {
 			clientItems: [
-				helpItem
+				sourceLinkItem
 			],
 			channelItems: [] // set by the channel
-		} as INavbar
+		}
 	}
 })
 
-- 
2.47.3


From 687d491e2a555cd6cfea47ebdbac69c08ccf4d53 Mon Sep 17 00:00:00 2001
From: Temmie <git@beaver.mom>
Date: Mon, 11 Aug 2025 01:13:47 +0200
Subject: [PATCH 09/22] chore: remove trailing new lines

---
 pages/me/[userId].vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/pages/me/[userId].vue b/pages/me/[userId].vue
index 2ec68a2..650e14f 100644
--- a/pages/me/[userId].vue
+++ b/pages/me/[userId].vue
@@ -11,12 +11,10 @@ import DirectMessagesSidebar from '~/components/Me/DirectMessagesSidebar.vue';
 
 onMounted(async () => {
 	updateNavbar({isDirectMessages: true})
-
 })
 
 onActivated(async () => {
 	updateNavbar({isDirectMessages: true})
-
 })
 </script>
 
-- 
2.47.3


From 254f7c25e37acade9ee15e6a3315aa7659c456bb Mon Sep 17 00:00:00 2001
From: Temmie <git@beaver.mom>
Date: Mon, 11 Aug 2025 01:14:36 +0200
Subject: [PATCH 10/22] chore: remove unused navbar state reference

---
 pages/servers/[serverId]/channels/[channelId].vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/pages/servers/[serverId]/channels/[channelId].vue b/pages/servers/[serverId]/channels/[channelId].vue
index 024676e..d8ca7ab 100644
--- a/pages/servers/[serverId]/channels/[channelId].vue
+++ b/pages/servers/[serverId]/channels/[channelId].vue
@@ -41,7 +41,6 @@ import type { ChannelResponse, GuildMemberResponse, GuildResponse, INavbar } fro
 const route = useRoute();
 
 const loading = useState("loading");
-const navbar = useState<INavbar>("navbar");
 
 const channelUrlPath = `channels/${route.params.channelId}`;
 
-- 
2.47.3


From 5c38f9f9fc96048c0105a4c69adf6625b8073586 Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Mon, 11 Aug 2025 01:47:04 +0200
Subject: [PATCH 11/22] feat: move initialization of navbar state variable to
 the initializer parameter of its definition

---
 layouts/client.vue | 30 ++++++++++++------------------
 1 file changed, 12 insertions(+), 18 deletions(-)

diff --git a/layouts/client.vue b/layouts/client.vue
index 98816ce..c327107 100644
--- a/layouts/client.vue
+++ b/layouts/client.vue
@@ -55,7 +55,18 @@ definePageMeta({
 });
 
 const loading = useState("loading", () => false);
-const navbar = useState<INavbar>("navbar")
+const navbar = useState<INavbar>("navbar", () => {
+	return {
+		clientItems: [
+			{
+				title: "Source",
+				icon: "lucide:code-xml",
+				callback: () => { open("https://git.gorb.app/gorb/frontend") } 
+			}
+		],
+		channelItems: [] // set by the channel
+	}
+})
 
 const createButtonContainer = ref<HTMLButtonElement>();
 
@@ -150,23 +161,6 @@ const options = [
 
 const guilds = await api.fetchMyGuilds();
 
-onMounted(() => {
-	if (!navbar.value) {
-		const sourceLinkItem: NavbarItem = {
-			title: "Source",
-			icon: "lucide:code-xml",
-			callback: () => { open("https://git.gorb.app/gorb/frontend") } 
-		}
-
-		navbar.value = {
-			clientItems: [
-				sourceLinkItem
-			],
-			channelItems: [] // set by the channel
-		}
-	}
-})
-
 function createDropdown() {
 	const dropdown = h(GuildDropdown, { options });
 	const div = document.createElement("div");
-- 
2.47.3


From 4f47b5df74c683d994de72488afd5d357001cb86 Mon Sep 17 00:00:00 2001
From: Temmie <git@beaver.mom>
Date: Wed, 13 Aug 2025 20:42:04 +0200
Subject: [PATCH 12/22] style: add navbar css variables to layout theme

---
 public/themes/layout/gorb.css | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/public/themes/layout/gorb.css b/public/themes/layout/gorb.css
index 7b8e88b..054ae91 100644
--- a/public/themes/layout/gorb.css
+++ b/public/themes/layout/gorb.css
@@ -8,6 +8,11 @@ complementaryColor = white
 	--sidebar-icon-width: 2.5em;
 	--sidebar-icon-gap: .25em;
 	--sidebar-margin: .5em;
+
+	--navbar-height: 5dvh;
+	--navbar-icon-size: 3dvh;
+	--navbar-gap: calc(3dvh * .2);
+	--side-margins: calc(.6dvw + .35dvh); /* try to make it reasonable at any aspect ratio */
 	
 	--standard-radius: .5em;
 	--button-radius: .6em;
-- 
2.47.3


From d60259074ddff8549b31eb492515e730b16b6836 Mon Sep 17 00:00:00 2001
From: Temmie <git@beaver.mom>
Date: Wed, 13 Aug 2025 20:43:06 +0200
Subject: [PATCH 13/22] refactor: remove navbar, add guildNavbar

---
 .../Navbar.vue => Guild/GuildNavbar.vue}      | 44 +------------------
 1 file changed, 2 insertions(+), 42 deletions(-)
 rename components/{UserInterface/Navbar.vue => Guild/GuildNavbar.vue} (51%)

diff --git a/components/UserInterface/Navbar.vue b/components/Guild/GuildNavbar.vue
similarity index 51%
rename from components/UserInterface/Navbar.vue
rename to components/Guild/GuildNavbar.vue
index b6bc294..da5212e 100644
--- a/components/UserInterface/Navbar.vue
+++ b/components/Guild/GuildNavbar.vue
@@ -1,56 +1,18 @@
 <template>
 	<div id="navbar">
-		<div v-if="props.clientItems" v-for="entry of props.clientItems" id="navbar-left">
-			<button class="navbar-item" :title="entry.title"
-					@click.prevent="entry.callback()">
-				<Icon :name="entry.icon" class="navbar-item-icon" />
-			</button>
-		</div>
-		<div id="navbar-middle">
-			<NuxtImg v-if="props.contextIcon"
-				class="context-icon"
-				:src="props.contextIcon" />
-			<DefaultIcon v-else-if="props.contextName && props.guildUuid"
-				class="context-icon" 
-				:name="props.contextName" :seed="props.guildUuid"/>
-			<NuxtImg v-else
-				class="context-icon"
-				:src="defaultIcon" />
-			
-			<div class="context-title">
-				{{ props.contextName }}
-			</div>
-		</div>
-		<div v-if="props.channelItems" v-for="entry of props.channelItems" id="navbar-right">
-			<button class="navbar-item" :title="entry.title"
-					@click.prevent="entry.callback()">
-				<Icon :name="entry.icon" class="navbar-item-icon" />
-			</button>
-		</div>
+		<!--  -->
 	</div>
 </template>
 
 <script lang="ts" setup>
-import type { INavbar, NavbarItem } from '~/types/interfaces';
+import type { INavbar } from '~/types/interfaces';
 
 const props = defineProps<INavbar>();
 
-const runtimeConfig = useRuntimeConfig();
-const defaultIcon = `${runtimeConfig.app.baseURL}/icon.svg`
-
 </script>
 
 <style scoped>
 #navbar {
-	--navbar-height: 5dvh;
-	--navbar-icon-size: 3dvh;
-	--navbar-gap: calc(3dvh * .2);
-	--side-margins: calc(.6dvw + .35dvh); /* try to make it reasonable at any aspect ratio */
-
-	left: 0;
-	right: 0;
-	top: 0;
-	
 	min-height: var(--navbar-height);
 	max-height: var(--navbar-height);
 	width: 100%;
@@ -77,7 +39,6 @@ const defaultIcon = `${runtimeConfig.app.baseURL}/icon.svg`
 
 #navbar-left {
 	left: var(--side-margins);
-	position: absolute;
 }
 
 #navbar-middle {
@@ -86,7 +47,6 @@ const defaultIcon = `${runtimeConfig.app.baseURL}/icon.svg`
 
 #navbar-right {
 	right: var(--side-margins);
-	position: absolute;
 }
 
 .context-icon {
-- 
2.47.3


From 2a43f2b678ab532a495af826a840ad552f04602a Mon Sep 17 00:00:00 2001
From: Temmie <git@beaver.mom>
Date: Wed, 13 Aug 2025 20:43:50 +0200
Subject: [PATCH 14/22] refactor: move MemberList and GuildSidebar out of
 client.vue

---
 components/Guild/GuildSidebar.vue |  90 ++++++++++++
 components/Guild/MemberEntry.vue  |  13 +-
 components/Guild/MemberList.vue   |  44 ++++++
 layouts/client.vue                | 237 ++----------------------------
 4 files changed, 157 insertions(+), 227 deletions(-)
 create mode 100644 components/Guild/GuildSidebar.vue
 create mode 100644 components/Guild/MemberList.vue

diff --git a/components/Guild/GuildSidebar.vue b/components/Guild/GuildSidebar.vue
new file mode 100644
index 0000000..4d361e4
--- /dev/null
+++ b/components/Guild/GuildSidebar.vue
@@ -0,0 +1,90 @@
+<!-- TODO  -->
+
+<template>
+	<ResizableSidebar
+			width="14rem" min-width="8rem" max-width="30rem"
+			border-sides="right" local-storage-name="middleLeftColumn">
+
+		<div id="guild-sidebar">
+			<div id="guild-top-container">
+				<span id="guild-name" :title="props.guild?.name">{{ props.guild?.name }}</span>
+				<button id="guild-settings-button" @click="toggleGuildSettings">
+					<Icon name="lucide:chevron-down" />
+				</button>
+
+				<GuildOptionsMenu v-if="showGuildSettings" />
+			</div>
+			<div id="channels-list">
+				<ChannelEntry v-for="channel of channels"
+					:name="channel.name"
+					:uuid="channel.uuid" :current-uuid="(route.params.channelId as string)"
+					:href="`/servers/${route.params.serverId}/channels/${channel.uuid}`" />
+			</div>
+		</div>
+	</ResizableSidebar>
+</template>
+
+<script lang="ts" setup>
+import ChannelEntry from "~/components/Guild/ChannelEntry.vue";
+import ResizableSidebar from "../UserInterface/ResizableSidebar.vue";
+import type { ChannelResponse, GuildResponse, INavbar } from "~/types/interfaces";
+
+const props = defineProps<{
+    guild: GuildResponse
+}>();
+
+const route = useRoute();
+const { fetchChannels } = useApi();
+
+const showGuildSettings = ref(false);
+
+const channels: ChannelResponse[] = await fetchChannels(props.guild.uuid);
+
+function toggleGuildSettings(e: Event) {
+	e.preventDefault();
+	showGuildSettings.value = !showGuildSettings.value;
+}
+
+</script>
+
+<style scoped>
+#channels-list {
+	background: var(--optional-channel-list-background);
+	background-color: var(--sidebar-background-color);
+
+	display: flex;
+	flex-direction: column;
+	gap: .5em;
+	text-overflow: ellipsis;
+	
+	padding-top: .5em;
+	padding-bottom: .5em;
+	max-height: calc(100% - 1em); /* 100% - top and bottom padding */
+}
+
+#guild-top-container {
+	min-height: var(--navbar-height);
+	max-height: var(--navbar-height);
+	width: 100%;
+
+	display: flex;
+	justify-content: center;
+	position: relative;
+
+	border-bottom: 1px solid var(--padding-color);
+}
+
+#guild-name {
+	font-size: 1.5em;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+#guild-settings-button {
+	background-color: transparent;
+	font-size: 1em;
+	color: white;
+	border: none;
+	padding: 0%;
+}
+</style>
diff --git a/components/Guild/MemberEntry.vue b/components/Guild/MemberEntry.vue
index baf0e67..1c7b843 100644
--- a/components/Guild/MemberEntry.vue
+++ b/components/Guild/MemberEntry.vue
@@ -32,7 +32,13 @@ function hideModalPopup() {
 
 <style>
 .member-item {
-    position: relative;
+	display: flex;
+	margin-top: .5em;
+	margin-bottom: .5em;
+	gap: .5em;
+	align-items: center;
+	text-align: left;
+	cursor: pointer;
 }
 
 .member-avatar {
@@ -41,4 +47,9 @@ function hideModalPopup() {
 	min-width: 2.3em;
 	max-width: 2.3em;
 }
+
+.member-display-name {
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
 </style>
diff --git a/components/Guild/MemberList.vue b/components/Guild/MemberList.vue
new file mode 100644
index 0000000..1f55244
--- /dev/null
+++ b/components/Guild/MemberList.vue
@@ -0,0 +1,44 @@
+<template>
+	<ResizableSidebar
+			width="14rem" min-width="5.5rem" max-width="30rem"
+			border-sides="left" local-storage-name="membersListWidth">
+		<div id="members-container">
+			<div id="members-list">
+				<MemberEntry v-for="member of members.objects" :member="member" tabindex="0"/>
+			</div>
+		</div>
+	</ResizableSidebar>
+</template>
+
+<script lang="ts" setup>
+import ResizableSidebar from "../UserInterface/ResizableSidebar.vue";
+import MemberEntry from "./MemberEntry.vue";
+import type { GuildResponse } from "~/types/interfaces";
+
+const props = defineProps<{
+    guild: GuildResponse
+}>();
+
+const { fetchMembers } = useApi();
+
+// TODO implement paging
+const members = await fetchMembers(props.guild.uuid)
+
+</script>
+
+<style scoped>
+#members-container {
+	background: var(--optional-member-list-background);
+
+	padding-top: .5em;
+	padding-bottom: .5em;
+	max-height: calc(100% - 1em); /* 100% - top and bottom padding */
+}
+
+#members-list {
+	display: flex;
+	flex-direction: column;
+	overflow-x: hidden;
+	overflow-y: scroll;
+}
+</style>
\ No newline at end of file
diff --git a/layouts/client.vue b/layouts/client.vue
index c327107..dd0ef44 100644
--- a/layouts/client.vue
+++ b/layouts/client.vue
@@ -1,183 +1,23 @@
 <template>
 	<Loading v-show="loading" />
+
 	<div :class="{ hidden: loading, visible: !loading }" id="client-root">
-		<Navbar id="navbar" v-bind="navbar" />
-		<div id="page-content">
-			<div id="left-column">
-				<div class="left-column-segment">
-					<NuxtLink id="home-button" href="/me">
-						<img class="sidebar-icon" src="/public/icon.svg"/>
-					</NuxtLink>
-				</div>
-				<VerticalSpacer />
-				<div class="left-column-segment" id="left-column-middle">
-					<NuxtLink v-for="guild of guilds" :href="`/servers/${guild.uuid}`" id="guild-icon-container">
-						<NuxtImg v-if="guild.icon"
-							class="sidebar-icon guild-icon"
-							:alt="guild.name"
-							:src="guild.icon" />
-						<DefaultIcon v-else 
-							class="sidebar-icon guild-icon" 
-							:alt="guild.name"
-							:name="guild.name" :seed="guild.uuid"/>
-					</NuxtLink>
-				</div>
-				<VerticalSpacer />
-				<div class="left-column-segment">
-					<div ref="createButtonContainer">
-						<button id="create-button" class="sidebar-bottom-buttons" @click.prevent="createDropdown">
-							<Icon id="create-icon" name="lucide:square-plus" alt="Create or join guild"/>
-						</button>
-					</div>
-					<NuxtLink id="settings-menu" class="sidebar-bottom-buttons" href="/settings">
-						<Icon name="lucide:settings" alt="Settings menu" />
-					</NuxtLink>
-				</div>
-			</div>
+		<div class="flex-container-row">
+			<GuildList />
 			<slot />
 		</div>
 	</div>
 </template>
 
 <script lang="ts" setup>
-import { ModalBase } from '#components';
-import { render } from 'vue';
-import DefaultIcon from '~/components/DefaultIcon.vue';
-import GuildDropdown from '~/components/Guild/GuildDropdown.vue';
 import Loading from '~/components/Popups/Loading.vue';
-import Button from '~/components/UserInterface/Button.vue';
-import Navbar from '~/components/UserInterface/Navbar.vue';
-import VerticalSpacer from '~/components/UserInterface/VerticalSpacer.vue';
-import type { GuildResponse, INavbar, NavbarItem } from '~/types/interfaces';
+import GuildList from '~/components/UserInterface/GuildList.vue';
 
 definePageMeta({
 	keepalive: true
 });
 
 const loading = useState("loading", () => false);
-const navbar = useState<INavbar>("navbar", () => {
-	return {
-		clientItems: [
-			{
-				title: "Source",
-				icon: "lucide:code-xml",
-				callback: () => { open("https://git.gorb.app/gorb/frontend") } 
-			}
-		],
-		channelItems: [] // set by the channel
-	}
-})
-
-const createButtonContainer = ref<HTMLButtonElement>();
-
-const { getDisplayName } = useProfile()
-const api = useApi();
-
-const options = [
-	{ name: "Join", value: "join", callback: async () => {
-		console.log("join guild!");
-		const div = document.createElement("div");
-		const guildJoinModal = h(ModalBase, {
-			title: "Join Guild",
-			id: "guild-join-modal",
-			onClose: () => {
-				unrender(div);
-			},
-			onCancel: () => {
-				unrender(div);
-			},
-			style: "height: 20dvh; width: 15dvw"
-		},
-		[
-			h("input", {
-				id: "guild-invite-input",
-				type: "text",
-				placeholder: "oyqICZ",
-			}),
-			h(Button, {
-				text: "Join",
-				variant: "normal",
-				callback: async () => {
-					const input = document.getElementById("guild-invite-input") as HTMLInputElement;
-					const invite = input.value;
-					if (invite.length == 6) {
-						try {
-							const joinedGuild = await api.joinGuild(invite);
-							guilds.push(joinedGuild);
-							return await navigateTo(`/servers/${joinedGuild.uuid}`);
-						} catch (error) {
-							alert(`Couldn't use invite: ${error}`);
-						}
-					}
-				}
-			})
-		]);
-		document.body.appendChild(div);
-		render(guildJoinModal, div);
-	}
-},
-{ name: "Create", value: "create", callback: async () => {
-	console.log("create guild");
-	const user = await useAuth().getUser();
-	const div = document.createElement("div");
-	const guildCreateModal = h(ModalBase, {
-		title: "Create a Guild",
-		id: "guild-join-modal",
-		onClose: () => {
-			unrender(div);
-		},
-		onCancel: () => {
-			unrender(div);
-		},
-				style: "height: 20dvh; width: 15dvw;"
-			},
-			[
-				h("input", {
-					id: "guild-name-input",
-					type: "text",
-					placeholder: `${getDisplayName(user!)}'s Awesome Bouncy Castle'`,
-					style: "width: 100%"
-				}),
-				h(Button, {
-					text: "Create!",
-					variant: "normal",
-					callback: async () => {
-						const input = document.getElementById("guild-name-input") as HTMLInputElement;
-						const name = input.value;
-						try {
-							const guild = (await api.createGuild(name)) as GuildResponse;
-							await api.createChannel(guild.uuid, "general");
-						} catch (error) {
-							alert(`Couldn't create guild: ${error}`);
-						}
-					}
-				})
-			]);
-			document.body.appendChild(div);
-			render(guildCreateModal, div);
-		}
-	}
-];
-
-const guilds = await api.fetchMyGuilds();
-
-function createDropdown() {
-	const dropdown = h(GuildDropdown, { options });
-	const div = document.createElement("div");
-	div.classList.add("dropdown", "destroy-on-click");
-	if (createButtonContainer.value) {
-		createButtonContainer.value.appendChild(div);
-	} else {
-		document.body.appendChild(div);
-	}
-	render(dropdown, div);
-	div.addEventListener("keyup", (e) => {
-		if (e.key == "Escape") {
-			unrender(div);
-		}
-	});
-	div.focus();
-}
 
 </script>
 
@@ -186,8 +26,6 @@ function createDropdown() {
 	height: 100dvh;
 	width: 100dvw;
 	display: flex;
-	flex-direction: column;
-	text-align: center;
 }
 
 .hidden {
@@ -199,73 +37,20 @@ function createDropdown() {
 	transition: opacity 500ms;
 }
 
-#page-content {
+
+.flex-container-row,
+.flex-container-column {
 	display: flex;
-	flex-direction: row;
-	flex-grow: 1;
     overflow: auto;
-}
-
-#left-column {
-	display: flex;
-	flex-direction: column;
-
-	padding-left: var(--sidebar-margin);
-	padding-right: var(--sidebar-margin);
-	padding-top: .5em;
-	
-	background: var(--optional-sidebar-background);
-	background-color: var(--sidebar-background-color);
-
-	border-right: 1px solid var(--padding-color);
-}
-
-.left-column-segment {
-	display: flex;
-	flex-direction: column;
-
-	scrollbar-width: none;
-}
-
-.left-column-segment::-webkit-scrollbar {
-	display: none;
-}
-
-#left-column-middle {
-	overflow-y: scroll;
 	flex-grow: 1;
-	gap: var(--sidebar-icon-gap);
 }
 
-#home-button {
-	height: var(--sidebar-icon-width);
+.flex-container-row {
+	flex-direction: row;
 }
 
-#guild-icon-container {
-	text-decoration: none;
-}
-
-.guild-icon {
-	border-radius: var(--guild-icon-radius);
-}
-
-.sidebar-icon {
-	width: var(--sidebar-icon-width);
-	height: var(--sidebar-icon-width);
-}
-
-.sidebar-bottom-buttons {
-	color: var(--primary-color);
-	background-color: transparent;
-	border: none;
-	cursor: pointer;
-	font-size: 2.4rem;
-	padding: 0;
-	display: inline-block;
-}
-
-.sidebar-bottom-buttons:hover {
-	color: var(--primary-highlighted-color);
+.flex-container-column {
+	flex-direction: column;
 }
 
 </style>
-- 
2.47.3


From a9af11dcb84a81e0b57f74998c384e408c0b12ad Mon Sep 17 00:00:00 2001
From: Temmie <git@beaver.mom>
Date: Wed, 13 Aug 2025 20:52:10 +0200
Subject: [PATCH 15/22] refactor: move sidebar to own component

---
 components/UserInterface/SidebarColumn.vue    | 218 ++++++++++++++++++
 layouts/client.vue                            |   4 +-
 .../[serverId]/channels/[channelId].vue       | 169 ++------------
 3 files changed, 239 insertions(+), 152 deletions(-)
 create mode 100644 components/UserInterface/SidebarColumn.vue

diff --git a/components/UserInterface/SidebarColumn.vue b/components/UserInterface/SidebarColumn.vue
new file mode 100644
index 0000000..f09cee3
--- /dev/null
+++ b/components/UserInterface/SidebarColumn.vue
@@ -0,0 +1,218 @@
+<template>
+	<div id="sidebar-column">
+		<div class="side-column-segment">
+			<NuxtLink id="home-button" href="/me">
+				<img class="sidebar-icon" src="/public/icon.svg"/>
+			</NuxtLink>
+		</div>
+
+		<VerticalSpacer />
+		<div class="sidebar-column-segment" id="guild-column">
+			<NuxtLink v-for="guild of guilds" :href="`/servers/${guild.uuid}`" id="guild-icon-container">
+				<NuxtImg v-if="guild.icon"
+					class="sidebar-icon guild-icon"
+					:alt="guild.name"
+					:src="guild.icon" />
+				<DefaultIcon v-else 
+					class="sidebar-icon guild-icon" 
+					:alt="guild.name"
+					:name="guild.name" :seed="guild.uuid"/>
+			</NuxtLink>
+		</div>
+		<VerticalSpacer />
+
+		<div class="sidebar-column-segment">
+			<div ref="createButtonContainer">
+				<button id="create-button" class="sidebar-bottom-buttons" @click.prevent="createDropdown">
+					<Icon id="create-icon" name="lucide:square-plus" alt="Create or join guild"/>
+				</button>
+			</div>
+			<NuxtLink id="settings-menu" class="sidebar-bottom-buttons" href="/settings">
+				<Icon name="lucide:settings" alt="Settings menu" />
+			</NuxtLink>
+		</div>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import { ModalBase } from '#components';
+import { render } from 'vue';
+import GuildDropdown from '~/components/Guild/GuildDropdown.vue';
+import DefaultIcon from '~/components/DefaultIcon.vue';
+import Button from '~/components/UserInterface/Button.vue';
+import VerticalSpacer from '~/components/UserInterface/VerticalSpacer.vue';
+import type { GuildResponse } from '~/types/interfaces';
+
+const { getDisplayName } = useProfile()
+const { fetchMyGuilds, joinGuild, createGuild, createChannel } = useApi();
+
+const createButtonContainer = ref<HTMLButtonElement>();
+
+const guilds = await fetchMyGuilds();
+
+// TODO we need to turn this into an actual modal
+const options = [
+	{ name: "Join", value: "join", callback: async () => {
+		console.log("join guild!");
+		const div = document.createElement("div");
+		const guildJoinModal = h(ModalBase, {
+			title: "Join Guild",
+			id: "guild-join-modal",
+			onClose: () => {
+				unrender(div);
+			},
+			onCancel: () => {
+				unrender(div);
+			},
+			style: "height: 20dvh; width: 15dvw"
+		},
+		[
+			h("input", {
+				id: "guild-invite-input",
+				type: "text",
+				placeholder: "oyqICZ",
+			}),
+			h(Button, {
+				text: "Join",
+				variant: "normal",
+				callback: async () => {
+					const input = document.getElementById("guild-invite-input") as HTMLInputElement;
+					const invite = input.value;
+					if (invite.length == 6) {
+						try {
+							const joinedGuild = await joinGuild(invite);
+							guilds.push(joinedGuild);
+							return await navigateTo(`/servers/${joinedGuild.uuid}`);
+						} catch (error) {
+							alert(`Couldn't use invite: ${error}`);
+						}
+					}
+				}
+			})
+		]);
+		document.body.appendChild(div);
+		render(guildJoinModal, div);
+	}
+},
+{ name: "Create", value: "create", callback: async () => {
+	console.log("create guild");
+	const user = await useAuth().getUser();
+	const div = document.createElement("div");
+	const guildCreateModal = h(ModalBase, {
+		title: "Create a Guild",
+		id: "guild-join-modal",
+		onClose: () => {
+			unrender(div);
+		},
+		onCancel: () => {
+			unrender(div);
+		},
+				style: "height: 20dvh; width: 15dvw;"
+			},
+			[
+				h("input", {
+					id: "guild-name-input",
+					type: "text",
+					placeholder: `${getDisplayName(user!)}'s Awesome Bouncy Castle'`,
+					style: "width: 100%"
+				}),
+				h(Button, {
+					text: "Create!",
+					variant: "normal",
+					callback: async () => {
+						const input = document.getElementById("guild-name-input") as HTMLInputElement;
+						const name = input.value;
+						try {
+							const guild = (await createGuild(name)) as GuildResponse;
+							await createChannel(guild.uuid, "general");
+						} catch (error) {
+							alert(`Couldn't create guild: ${error}`);
+						}
+					}
+				})
+			]);
+			document.body.appendChild(div);
+			render(guildCreateModal, div);
+		}
+	}
+];
+
+function createDropdown() {
+	const dropdown = h(GuildDropdown, { options });
+	const div = document.createElement("div");
+	div.classList.add("dropdown", "destroy-on-click");
+	if (createButtonContainer.value) {
+		createButtonContainer.value.appendChild(div);
+	} else {
+		document.body.appendChild(div);
+	}
+	render(dropdown, div);
+	div.addEventListener("keyup", (e) => {
+		if (e.key == "Escape") {
+			unrender(div);
+		}
+	});
+	div.focus();
+}
+</script>
+
+<style scoped>
+#sidebar-column {
+	display: flex;
+	flex-direction: column;
+
+	padding-left: var(--sidebar-margin);
+	padding-right: var(--sidebar-margin);
+	padding-top: .5em;
+	
+	background: var(--optional-sidebar-background);
+	background-color: var(--sidebar-background-color);
+
+	border-right: 1px solid var(--padding-color);
+	text-align: center;
+}
+
+#guild-column {
+	overflow-y: scroll;
+	flex-grow: 1;
+	gap: var(--sidebar-icon-gap);
+}
+#guild-icon-container {
+	text-decoration: none;
+}
+
+.sidebar-column-segment {
+	display: flex;
+	flex-direction: column;
+
+	scrollbar-width: none;
+}
+.guild-column-segment::-webkit-scrollbar {
+	display: none;
+}
+
+#home-button {
+	height: var(--sidebar-icon-width);
+}
+
+.guild-icon {
+	border-radius: var(--guild-icon-radius);
+}
+.sidebar-icon {
+	width: var(--sidebar-icon-width);
+	height: var(--sidebar-icon-width);
+}
+
+.sidebar-bottom-buttons {
+	color: var(--primary-color);
+	background-color: transparent;
+	border: none;
+	cursor: pointer;
+	font-size: 2.4rem;
+	padding: 0;
+	display: inline-block;
+}
+.sidebar-bottom-buttons:hover {
+	color: var(--primary-highlighted-color);
+}
+</style>
\ No newline at end of file
diff --git a/layouts/client.vue b/layouts/client.vue
index dd0ef44..eb1c524 100644
--- a/layouts/client.vue
+++ b/layouts/client.vue
@@ -3,7 +3,7 @@
 
 	<div :class="{ hidden: loading, visible: !loading }" id="client-root">
 		<div class="flex-container-row">
-			<GuildList />
+			<SidebarColumn />
 			<slot />
 		</div>
 	</div>
@@ -11,7 +11,7 @@
 
 <script lang="ts" setup>
 import Loading from '~/components/Popups/Loading.vue';
-import GuildList from '~/components/UserInterface/GuildList.vue';
+import SidebarColumn from '~/components/UserInterface/SidebarColumn.vue';
 
 definePageMeta({
 	keepalive: true
diff --git a/pages/servers/[serverId]/channels/[channelId].vue b/pages/servers/[serverId]/channels/[channelId].vue
index d8ca7ab..62844a7 100644
--- a/pages/servers/[serverId]/channels/[channelId].vue
+++ b/pages/servers/[serverId]/channels/[channelId].vue
@@ -1,169 +1,38 @@
 <template>
 	<NuxtLayout name="client">
-		<ResizableSidebar
-				width="14rem" min-width="8rem" max-width="30rem"
-				border-sides="right" local-storage-name="middleLeftColumn">
-			<div id="middle-left-column" class="main-grid-row">
-				<div id="server-name-container">
-					<span id="server-name" :title="server?.name">{{ server?.name }}</span>
-					<button id="server-settings-button" @click="toggleGuildSettings">
-						<Icon id="server-settings-icon" name="lucide:chevron-down" />
-					</button>
-					<GuildOptionsMenu v-if="showGuildSettings" />
-				</div>
-				<div id="channels-list">
-					<ChannelEntry v-for="channel of channels" :name="channel.name"
-						:uuid="channel.uuid" :current-uuid="(route.params.channelId as string)"
-						:href="`/servers/${route.params.serverId}/channels/${channel.uuid}`" />
-				</div>
+		<GuildSidebar v-if="guild" :guild="guild" />
+		<div class="flex-container-column">
+			<GuildNavbar id="navbar"
+				:guild="guild" />
+
+			<div class="flex-container-row">
+				<MessageArea :channel-url="channelUrlPath" />
+				<GuildMemberList v-if="guild" :guild="guild" />
 			</div>
-		</ResizableSidebar>
-		<MessageArea :channel-url="channelUrlPath" />
-		<ResizableSidebar
-				width="14rem" min-width="5.5rem" max-width="30rem"
-				border-sides="left" local-storage-name="membersListWidth">
-			<div id="members-container">
-				<div id="members-list">
-					<MemberEntry v-for="member of members" :member="member" tabindex="0"/>
-				</div>
-			</div>
-		</ResizableSidebar>
+		</div>
 	</NuxtLayout>
 </template>
 
 <script lang="ts" setup>
-import ChannelEntry from "~/components/Guild/ChannelEntry.vue";
-import GuildOptionsMenu from "~/components/Guild/GuildOptionsMenu.vue";
-import MemberEntry from "~/components/Guild/MemberEntry.vue";
-import ResizableSidebar from "~/components/UserInterface/ResizableSidebar.vue";
-import type { ChannelResponse, GuildMemberResponse, GuildResponse, INavbar } from "~/types/interfaces";
+import type { GuildResponse, INavbar } from "~/types/interfaces";
 
 const route = useRoute();
-
-const loading = useState("loading");
+const { fetchGuild } = useApi()
 
 const channelUrlPath = `channels/${route.params.channelId}`;
 
-const server = ref<GuildResponse | undefined>();
-const channels = ref<ChannelResponse[] | undefined>();
-const channel = ref<ChannelResponse | undefined>();
+const guild: GuildResponse | undefined = await fetchGuild(route.params.serverId as string)
 
-const members = ref<GuildMemberResponse[]>();
+// function toggleInvitePopup(e: Event) {
+// 	e.preventDefault();
+// 	showInvitePopup.value = !showInvitePopup.value;
+// }
 
-const showInvitePopup = ref(false);
-const showGuildSettings = ref(false);
-
-//const servers = await fetchWithApi("/servers") as { uuid: string, name: string, description: string }[];
-//console.log("channelid: servers:", servers);
-
-const { fetchMembers } = useApi();
-
-onMounted(async () => {
-	console.log("mounting");
-	const guildUrl = `guilds/${route.params.serverId}`;
-	server.value = await fetchWithApi(guildUrl);
-	console.log("fetched guild");
-	await setArrayVariables();
-	console.log("set array variables");
-
-	updateNavbar({guild: server.value})
-});
-
-onActivated(async () => {
-	console.log("activating");
-	updateNavbar({guild: server.value})
-
-	const guildUrl = `guilds/${route.params.serverId}`;
-	server.value = await fetchWithApi(guildUrl);
-	console.log("fetched guild");
-	
-	await setArrayVariables();
-	console.log("set array variables");
-});
-
-async function setArrayVariables() {
-	const membersRes = await fetchMembers(route.params.serverId as string);
-	members.value = membersRes.objects;
-	const guildUrl = `guilds/${route.params.serverId}`;
-	channels.value = await fetchWithApi(`${guildUrl}/channels`);
-	console.log("channels:", channels.value);
-	channel.value = await fetchWithApi(`/channels/${route.params.channelId}`);
-	console.log("channel:", channel.value);
-}
-
-function toggleGuildSettings(e: Event) {
-	e.preventDefault();
-	showGuildSettings.value = !showGuildSettings.value;
-}
-
-function toggleInvitePopup(e: Event) {
-	e.preventDefault();
-	showInvitePopup.value = !showInvitePopup.value;
-}
-
-function handleMemberClick(member: GuildMemberResponse) {
-}
+// function handleMemberClick(member: GuildMemberResponse) {
+// }
 
 </script>
 
-<style>
-#members-container {
-	background: var(--optional-member-list-background);
-}
+<style scoped>
 
-#members-list {
-	display: flex;
-	flex-direction: column;
-	overflow-x: hidden;
-	overflow-y: scroll;
-	padding-left: 1.25em;
-	padding-right: 1.25em;
-	padding-top: 0.75em;
-	padding-bottom: 0.75em;
-	max-height: calc(100% - 0.75em * 2); /* 100% - top and bottom */
-}
-
-.member-item {
-	display: flex;
-	margin-top: .5em;
-	margin-bottom: .5em;
-	gap: .5em;
-	align-items: center;
-	text-align: left;
-	cursor: pointer;
-}
-
-#channels-list {
-	display: flex;
-	flex-direction: column;
-	gap: .5em;
-	text-overflow: ellipsis;
-}
-
-.member-display-name {
-	overflow: hidden;
-	text-overflow: ellipsis;
-}
-
-#server-name-container {
-	padding-top: 3dvh;
-	padding-bottom: 3dvh;
-	display: flex;
-	justify-content: center;
-	position: relative;
-}
-
-#server-name {
-	font-size: 1.5em;
-	overflow: hidden;
-	text-overflow: ellipsis;
-}
-
-#server-settings-button {
-	background-color: transparent;
-	font-size: 1em;
-	color: white;
-	border: none;
-	padding: 0%;
-}
 </style>
\ No newline at end of file
-- 
2.47.3


From e64cc878b8f51f65a66c8af78ac9436ecc5fc554 Mon Sep 17 00:00:00 2001
From: Temmie <git@beaver.mom>
Date: Wed, 13 Aug 2025 20:52:32 +0200
Subject: [PATCH 16/22] chore: remove now unused stuff

---
 app.vue               |  1 +
 pages/index.vue       | 16 +---------------
 types/interfaces.ts   |  6 +-----
 utils/updateNavbar.ts | 22 ----------------------
 4 files changed, 3 insertions(+), 42 deletions(-)
 delete mode 100644 utils/updateNavbar.ts

diff --git a/app.vue b/app.vue
index 8f0571f..6899675 100644
--- a/app.vue
+++ b/app.vue
@@ -9,6 +9,7 @@
 <script lang="ts" setup>
 import ContextMenu from '~/components/UserInterface/ContextMenu.vue';
 import type { ContextMenuInterface } from './types/interfaces';
+import type { INavbar } from '~/types/interfaces';
 
 const banner = useState("banner", () => false);
 
diff --git a/pages/index.vue b/pages/index.vue
index cb5f57e..30e0793 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,18 +1,4 @@
-<template>
-  <NuxtLayout>
-
-  </NuxtLayout>
-</template>
-
 <script lang="ts" setup>
 await navigateTo("/me/", { replace: true })
 
-definePageMeta({
-	layout: "client"
-});
-
-</script>
-
-<style>
-
-</style>
\ No newline at end of file
+</script>
\ No newline at end of file
diff --git a/types/interfaces.ts b/types/interfaces.ts
index c23fbe5..2ee2108 100644
--- a/types/interfaces.ts
+++ b/types/interfaces.ts
@@ -130,11 +130,7 @@ export interface NavbarItem {
 }
 
 export interface INavbar {
-	clientItems?: NavbarItem[]
-	channelItems?: NavbarItem[] // search bar will require some changes
-	contextName?: string
-	contextIcon?: string
-	guildUuid?: string
+	guild: GuildResponse
 }
 
 export interface NavbarOptions {
diff --git a/utils/updateNavbar.ts b/utils/updateNavbar.ts
deleted file mode 100644
index bd181d1..0000000
--- a/utils/updateNavbar.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import type { INavbar, NavbarOptions } from "~/types/interfaces";
-
-const navbar = useState<INavbar>("navbar")
-
-export default async (options: NavbarOptions) => {
-	await nextTick()
-
-	if (navbar.value) {
-		if (options.guild) {
-			navbar.value.channelItems = []
-			navbar.value.contextName = options.guild?.name
-			navbar.value.contextIcon = options.guild?.icon ?? undefined
-			navbar.value.guildUuid = options.guild?.uuid
-		}
-		else if (options.isDirectMessages) {
-			navbar.value.channelItems = []
-			navbar.value.contextName = "Direct Messages"
-			navbar.value.contextIcon = undefined
-			navbar.value.guildUuid = undefined
-		}
-	}
-}
\ No newline at end of file
-- 
2.47.3


From 27a30d08a696e10ee1690fa129d98b2ff356a378 Mon Sep 17 00:00:00 2001
From: Temmie <git@beaver.mom>
Date: Wed, 13 Aug 2025 20:56:00 +0200
Subject: [PATCH 17/22] refactor: move resizableSidebar padding into children

---
 components/Guild/GuildSidebar.vue             | 31 ++++++++++---------
 components/Guild/MemberList.vue               |  3 ++
 components/UserInterface/ResizableSidebar.vue |  3 +-
 3 files changed, 21 insertions(+), 16 deletions(-)

diff --git a/components/Guild/GuildSidebar.vue b/components/Guild/GuildSidebar.vue
index 4d361e4..0d44f69 100644
--- a/components/Guild/GuildSidebar.vue
+++ b/components/Guild/GuildSidebar.vue
@@ -48,20 +48,6 @@ function toggleGuildSettings(e: Event) {
 </script>
 
 <style scoped>
-#channels-list {
-	background: var(--optional-channel-list-background);
-	background-color: var(--sidebar-background-color);
-
-	display: flex;
-	flex-direction: column;
-	gap: .5em;
-	text-overflow: ellipsis;
-	
-	padding-top: .5em;
-	padding-bottom: .5em;
-	max-height: calc(100% - 1em); /* 100% - top and bottom padding */
-}
-
 #guild-top-container {
 	min-height: var(--navbar-height);
 	max-height: var(--navbar-height);
@@ -87,4 +73,21 @@ function toggleGuildSettings(e: Event) {
 	border: none;
 	padding: 0%;
 }
+
+#channels-list {
+	background: var(--optional-channel-list-background);
+	background-color: var(--sidebar-background-color);
+
+	display: flex;
+	flex-direction: column;
+	gap: .5em;
+	text-overflow: ellipsis;
+	
+	padding-top: .5em;
+	padding-bottom: .5em;
+	max-height: calc(100% - 1em); /* 100% - top and bottom padding */
+
+	padding-left: .5em;
+	padding-right: .5em;
+}
 </style>
diff --git a/components/Guild/MemberList.vue b/components/Guild/MemberList.vue
index 1f55244..9b4fa19 100644
--- a/components/Guild/MemberList.vue
+++ b/components/Guild/MemberList.vue
@@ -40,5 +40,8 @@ const members = await fetchMembers(props.guild.uuid)
 	flex-direction: column;
 	overflow-x: hidden;
 	overflow-y: scroll;
+
+	padding-left: .5em;
+	padding-right: .5em;
 }
 </style>
\ No newline at end of file
diff --git a/components/UserInterface/ResizableSidebar.vue b/components/UserInterface/ResizableSidebar.vue
index 79e95bd..2ea411b 100644
--- a/components/UserInterface/ResizableSidebar.vue
+++ b/components/UserInterface/ResizableSidebar.vue
@@ -135,8 +135,7 @@ function loadStoredWidth() {
 
 .sidebar-content {
 	width: 100%;
-	padding-left: .25em;
-	padding-right: .25em;
+	height: 100%;
 }
 
 .sidebar-content > :first-child {
-- 
2.47.3


From 74ba8ea91d0050cb87741c47a6cce07c79067f6a Mon Sep 17 00:00:00 2001
From: Temmie <git@beaver.mom>
Date: Wed, 13 Aug 2025 20:56:47 +0200
Subject: [PATCH 18/22] fix: crash whilst loading DMs

---
 pages/me/index.vue                                | 8 --------
 pages/servers/[serverId]/channels/[channelId].vue | 3 ++-
 2 files changed, 2 insertions(+), 9 deletions(-)

diff --git a/pages/me/index.vue b/pages/me/index.vue
index 5691b79..a0d0384 100644
--- a/pages/me/index.vue
+++ b/pages/me/index.vue
@@ -33,14 +33,6 @@ const friends = await fetchFriends()
 function updateFilter(newFilter: string) {
 	filter.value = newFilter;
 }
-
-onMounted(async () => {
-	updateNavbar({isDirectMessages: true})
-})
-
-onActivated(async () => {
-	updateNavbar({isDirectMessages: true})
-})
 </script>
 
 <style module>
diff --git a/pages/servers/[serverId]/channels/[channelId].vue b/pages/servers/[serverId]/channels/[channelId].vue
index 62844a7..74466b9 100644
--- a/pages/servers/[serverId]/channels/[channelId].vue
+++ b/pages/servers/[serverId]/channels/[channelId].vue
@@ -2,7 +2,8 @@
 	<NuxtLayout name="client">
 		<GuildSidebar v-if="guild" :guild="guild" />
 		<div class="flex-container-column">
-			<GuildNavbar id="navbar"
+			<GuildNavbar id="navbar" 
+				v-if="guild"
 				:guild="guild" />
 
 			<div class="flex-container-row">
-- 
2.47.3


From e3288c0787f0091a410c3c47193c7f7cb82175f8 Mon Sep 17 00:00:00 2001
From: Temmie <git@beaver.mom>
Date: Wed, 13 Aug 2025 21:23:29 +0200
Subject: [PATCH 19/22] feat: update navbar with new content

---
 components/Guild/GuildNavbar.vue              | 95 +++++++++----------
 components/MessageArea.vue                    |  2 +
 .../[serverId]/channels/[channelId].vue       | 16 ++--
 public/themes/layout/gorb.css                 |  1 -
 types/interfaces.ts                           |  1 +
 5 files changed, 56 insertions(+), 59 deletions(-)

diff --git a/components/Guild/GuildNavbar.vue b/components/Guild/GuildNavbar.vue
index da5212e..127057f 100644
--- a/components/Guild/GuildNavbar.vue
+++ b/components/Guild/GuildNavbar.vue
@@ -1,6 +1,20 @@
 <template>
-	<div id="navbar">
-		<!--  -->
+	<div id="navbar" class="navbar-row">
+		<div id="channel-info" class="navbar-row">
+			<!-- h1 to help screen readers -->
+			<h1 id="channel-name">
+				# {{ channel.name }}
+			</h1>
+			<span id="channel-description">
+				{{ channel.description }}
+			</span>
+		</div>
+
+		<div id="buttons" class="navbar-row">
+			<a class="button" href="https://git.gorb.app/gorb/frontend">
+				<Icon name="lucide:code-xml" title="Source"/>
+			</a>
+		</div>
 	</div>
 </template>
 
@@ -12,77 +26,54 @@ const props = defineProps<INavbar>();
 </script>
 
 <style scoped>
+.navbar-row {
+	display: flex;
+	flex-direction: row;
+}
+
 #navbar {
+	--font-size: calc(var(--navbar-height) * 0.45);
+	--side-margins: calc(var(--font-size) * 0.5);
+	
 	min-height: var(--navbar-height);
 	max-height: var(--navbar-height);
 	width: 100%;
 
-	display: flex;
-	justify-content: center;
-
 	background: var(--optional-topbar-background);
 	background-color: var(--topbar-background-color);
 	border-bottom: 1px solid var(--padding-color);
 }
 
-#navbar-left,
-#navbar-middle,
-#navbar-right {
-	top: 0;
-	height: var(--navbar-height);
+#channel-info {
+	margin-left: var(--side-margins);
+	gap: calc(var(--font-size) * 0.75);
 
-	display: inline-flex;
-	justify-content: center;
 	align-items: center;
-	gap: var(--navbar-gap);
 }
 
-#navbar-left {
-	left: var(--side-margins);
-}
-
-#navbar-middle {
-	max-width: 50dvw;
-}
-
-#navbar-right {
-	right: var(--side-margins);
-}
-
-.context-icon {
-	height: calc(var(--navbar-height) * 0.7);
-	width: calc(var(--navbar-height) * 0.7);
-	border-radius: var(--guild-icon-radius);
-}
-
-.context-title {
-	min-height: var(--navbar-height);
-	max-height: var(--navbar-height);
-
+#channel-name {
+	font-size: var(--font-size);
 	font-weight: 500;
-	font-size: calc(var(--navbar-height) * .5);
-	line-height: var(--navbar-height);
 }
 
-.navbar-item {
+#channel-description {
+	font-size: calc(var(--font-size) * 0.8);
+	text-overflow: ellipsis;
+
+	/* TODO make new theme colour? unsure of it's name, this is good enough for now */
 	color: var(--reply-text-color);
-	background-color: transparent;
-	border: none;
-	cursor: pointer;
-	padding: 0;
+}
 
-	transition: color 300ms;
-	display: flex;
+#buttons {
+	margin-right: var(--side-margins);
+
+	flex-grow: 1;
 	align-items: center;
-	height: var(--navbar-icon-size);
+	justify-content: end;
 }
 
-.navbar-item:hover {
-	color: var(--primary-highlighted-color);
-}
-
-.navbar-item-icon {
-	width: var(--navbar-icon-size);
-	height: 100%;
+.button {
+	color: var(--secondary-text-color);
+	right: 0;
 }
 </style>
\ No newline at end of file
diff --git a/components/MessageArea.vue b/components/MessageArea.vue
index 26645cd..c3367b7 100644
--- a/components/MessageArea.vue
+++ b/components/MessageArea.vue
@@ -47,6 +47,8 @@ import { generateIrcColor } from '#imports';
 const { getDisplayName } = useProfile()
 const { fetchMe } = useApi()
 
+// TODO this file is a mess, and we need to stop using fetchWithApi
+
 const props = defineProps<{ channelUrl: string, amount?: number, offset?: number }>();
 
 const me = await fetchMe() as UserResponse;
diff --git a/pages/servers/[serverId]/channels/[channelId].vue b/pages/servers/[serverId]/channels/[channelId].vue
index 74466b9..b6ed93f 100644
--- a/pages/servers/[serverId]/channels/[channelId].vue
+++ b/pages/servers/[serverId]/channels/[channelId].vue
@@ -3,8 +3,9 @@
 		<GuildSidebar v-if="guild" :guild="guild" />
 		<div class="flex-container-column">
 			<GuildNavbar id="navbar" 
-				v-if="guild"
-				:guild="guild" />
+				v-if="guild && channel"
+				:guild="guild"
+				:channel="channel"/>
 
 			<div class="flex-container-row">
 				<MessageArea :channel-url="channelUrlPath" />
@@ -15,14 +16,17 @@
 </template>
 
 <script lang="ts" setup>
-import type { GuildResponse, INavbar } from "~/types/interfaces";
 
 const route = useRoute();
-const { fetchGuild } = useApi()
+const { fetchGuild, fetchChannel } = useApi()
 
-const channelUrlPath = `channels/${route.params.channelId}`;
+const channelId = route.params.channelId as string
+const guildId = route.params.serverId as string
 
-const guild: GuildResponse | undefined = await fetchGuild(route.params.serverId as string)
+const channelUrlPath = `channels/${channelId}`;
+
+const guild = await fetchGuild(guildId)
+const channel = await fetchChannel(channelId)
 
 // function toggleInvitePopup(e: Event) {
 // 	e.preventDefault();
diff --git a/public/themes/layout/gorb.css b/public/themes/layout/gorb.css
index 054ae91..37b5834 100644
--- a/public/themes/layout/gorb.css
+++ b/public/themes/layout/gorb.css
@@ -12,7 +12,6 @@ complementaryColor = white
 	--navbar-height: 5dvh;
 	--navbar-icon-size: 3dvh;
 	--navbar-gap: calc(3dvh * .2);
-	--side-margins: calc(.6dvw + .35dvh); /* try to make it reasonable at any aspect ratio */
 	
 	--standard-radius: .5em;
 	--button-radius: .6em;
diff --git a/types/interfaces.ts b/types/interfaces.ts
index 2ee2108..bb6489b 100644
--- a/types/interfaces.ts
+++ b/types/interfaces.ts
@@ -131,6 +131,7 @@ export interface NavbarItem {
 
 export interface INavbar {
 	guild: GuildResponse
+	channel: ChannelResponse
 }
 
 export interface NavbarOptions {
-- 
2.47.3


From c9843bf4f213160cf5e57d145cf851f89af3d1e8 Mon Sep 17 00:00:00 2001
From: Temmie <git@beaver.mom>
Date: Wed, 13 Aug 2025 21:26:14 +0200
Subject: [PATCH 20/22] style: change navbar button colours on hoverr

---
 components/Guild/GuildNavbar.vue | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/components/Guild/GuildNavbar.vue b/components/Guild/GuildNavbar.vue
index 127057f..c490d73 100644
--- a/components/Guild/GuildNavbar.vue
+++ b/components/Guild/GuildNavbar.vue
@@ -74,6 +74,12 @@ const props = defineProps<INavbar>();
 
 .button {
 	color: var(--secondary-text-color);
+	transition: color 300ms;
+
 	right: 0;
 }
+
+.button:hover {
+	color: var(--primary-highlighted-color);
+}
 </style>
\ No newline at end of file
-- 
2.47.3


From bb00f288f7ab0d6b766bd07578483d81067b2b01 Mon Sep 17 00:00:00 2001
From: Temmie <git@beaver.mom>
Date: Wed, 13 Aug 2025 21:28:11 +0200
Subject: [PATCH 21/22] style: rename guildnavbar to channelnavbar

---
 components/Guild/{GuildNavbar.vue => ChannelNavbar.vue} | 0
 pages/servers/[serverId]/channels/[channelId].vue       | 2 +-
 2 files changed, 1 insertion(+), 1 deletion(-)
 rename components/Guild/{GuildNavbar.vue => ChannelNavbar.vue} (100%)

diff --git a/components/Guild/GuildNavbar.vue b/components/Guild/ChannelNavbar.vue
similarity index 100%
rename from components/Guild/GuildNavbar.vue
rename to components/Guild/ChannelNavbar.vue
diff --git a/pages/servers/[serverId]/channels/[channelId].vue b/pages/servers/[serverId]/channels/[channelId].vue
index b6ed93f..e82a317 100644
--- a/pages/servers/[serverId]/channels/[channelId].vue
+++ b/pages/servers/[serverId]/channels/[channelId].vue
@@ -2,7 +2,7 @@
 	<NuxtLayout name="client">
 		<GuildSidebar v-if="guild" :guild="guild" />
 		<div class="flex-container-column">
-			<GuildNavbar id="navbar" 
+			<GuildChannelNavbar id="navbar" 
 				v-if="guild && channel"
 				:guild="guild"
 				:channel="channel"/>
-- 
2.47.3


From 8acf6a77eb9b089b5dfdbfb7dce1feb1c765bc24 Mon Sep 17 00:00:00 2001
From: Temmie <git@beaver.mom>
Date: Wed, 13 Aug 2025 21:31:24 +0200
Subject: [PATCH 22/22] chore: remove unused imports

---
 app.vue                           | 1 -
 components/Guild/GuildSidebar.vue | 2 --
 2 files changed, 3 deletions(-)

diff --git a/app.vue b/app.vue
index 6899675..8f0571f 100644
--- a/app.vue
+++ b/app.vue
@@ -9,7 +9,6 @@
 <script lang="ts" setup>
 import ContextMenu from '~/components/UserInterface/ContextMenu.vue';
 import type { ContextMenuInterface } from './types/interfaces';
-import type { INavbar } from '~/types/interfaces';
 
 const banner = useState("banner", () => false);
 
diff --git a/components/Guild/GuildSidebar.vue b/components/Guild/GuildSidebar.vue
index 0d44f69..50c376e 100644
--- a/components/Guild/GuildSidebar.vue
+++ b/components/Guild/GuildSidebar.vue
@@ -1,5 +1,3 @@
-<!-- TODO  -->
-
 <template>
 	<ResizableSidebar
 			width="14rem" min-width="8rem" max-width="30rem"
-- 
2.47.3