From f1e07bd43c70f2d85172a37e5d383ca77252e0f6 Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Wed, 16 Jul 2025 23:49:34 +0200
Subject: [PATCH 01/16] feat: create resizable sidebar component

---
 components/UserInterface/ResizableSidebar.vue | 117 ++++++++++++++++++
 1 file changed, 117 insertions(+)
 create mode 100644 components/UserInterface/ResizableSidebar.vue

diff --git a/components/UserInterface/ResizableSidebar.vue b/components/UserInterface/ResizableSidebar.vue
new file mode 100644
index 0000000..68c0dc7
--- /dev/null
+++ b/components/UserInterface/ResizableSidebar.vue
@@ -0,0 +1,117 @@
+<template>
+	<div ref="resizableSidebar" class="resizable-sidebar"
+			:style="{
+				'width': props.width,
+				'min-width': props.minWidth,
+				'max-width': props.maxWidth,
+				'border': props.borderSides == 'all' ? borderStyling : undefined,
+				'border-top': props.borderSides?.includes('top') ? borderStyling : undefined,
+				'border-bottom': props.borderSides?.includes('bottom') ? borderStyling : undefined,
+			}">
+		<div v-if="props.borderSides != 'right'" class="width-resizer-bar">
+			<div ref="widthResizer" class="width-resizer"></div>
+		</div>
+		<div class="sidebar-content">
+			<slot />
+		</div>
+		<div v-if="props.borderSides == 'right'" class="width-resizer-bar">
+			<div ref="widthResizer" class="width-resizer"></div>
+		</div>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import type { ContextMenuItem } from '~/types/interfaces';
+
+const props = defineProps<{ width?: string, minWidth: string, maxWidth: string, borderSides: "all" | "top" | "right" | "bottom" | "left" | ("top" | "right" | "bottom" | "left")[] }>();
+
+const borderStyling = ".1rem solid var(--padding-color)";
+
+const resizableSidebar = ref<HTMLDivElement>();
+const widthResizer = ref<HTMLDivElement>();
+
+const menuItems: ContextMenuItem[] = [
+	{ name: "Reset", callback: () => { resizableSidebar.value!.style.width = props.width ?? props.minWidth } }
+]
+
+onMounted(() => {
+	if (resizableSidebar.value && widthResizer.value) {
+		widthResizer.value.addEventListener("pointerdown", (e) => {
+			e.preventDefault();
+			if (e.button == 2) {
+				createContextMenu(e, menuItems);
+				return
+			};
+			document.body.style.cursor = "col-resize";
+			function handleMove(pointer: PointerEvent) {
+				if (resizableSidebar.value) {
+					console.log("moving");
+					console.log("pointer:", pointer);
+					console.log("width:", resizableSidebar.value.style.width);
+					let delta = 0;
+					if (props.borderSides == 'right') {
+						delta = resizableSidebar.value.getBoundingClientRect().left;
+					} else {
+						delta = resizableSidebar.value.getBoundingClientRect().right;
+					}
+					console.log("delta:", delta);
+					resizableSidebar.value.style.width = `${Math.abs(pointer.clientX - delta)}px`;
+				}
+			}
+
+			document.addEventListener("pointermove", handleMove);
+
+			document.addEventListener("pointerup", () => {
+				console.log("pointer up");
+				document.removeEventListener("pointermove", handleMove);
+				console.log("removed pointermove event listener");
+				document.body.style.cursor = "";
+			}, { once: true });
+		});
+	}
+});
+
+</script>
+
+<style>
+.resizable-sidebar > * {
+	box-sizing: border-box;
+}
+
+.resizable-sidebar {
+	display: flex;
+	background: var(--optional-channel-list-background);
+	background-color: var(--sidebar-background-color);
+	height: 100%;
+	flex: 0 0 auto;
+}
+
+.width-resizer {
+	width: .5rem;
+	cursor: col-resize;
+	position: absolute;
+	height: 100%;
+}
+
+.width-resizer-bar {
+	display: flex;
+	justify-content: center;
+	position: relative;
+	height: 100%;
+	width: 1px;
+	background-color: var(--padding-color);
+}
+
+.sidebar-content {
+	width: 100%;
+	padding-left: .25em;
+	padding-right: .25em;
+}
+
+.sidebar-content > :first-child {
+	width: 100%;
+	height: 100%;
+	overflow-y: scroll;
+	overflow-x: hidden;
+}
+</style>
\ No newline at end of file

From c295225c4303e14be722ed3659800fb2074cf9d8 Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Wed, 16 Jul 2025 23:50:41 +0200
Subject: [PATCH 02/16] chore: rename instances of cursor to pointer in
 createContextMenu component and ContextMenuItem interface

---
 components/UserInterface/ContextMenu.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/UserInterface/ContextMenu.vue b/components/UserInterface/ContextMenu.vue
index 1388bbd..5342b8c 100644
--- a/components/UserInterface/ContextMenu.vue
+++ b/components/UserInterface/ContextMenu.vue
@@ -7,13 +7,13 @@
 <script lang="ts" setup>
 import type { ContextMenuItem } from '~/types/interfaces';
 
-const props = defineProps<{ menuItems: ContextMenuItem[], cursorX: number, cursorY: number }>();
+const props = defineProps<{ menuItems: ContextMenuItem[], pointerX: number, pointerY: number }>();
 
 onMounted(() => {
 	const contextMenu = document.getElementById("context-menu");
 	if (contextMenu) {
-		contextMenu.style.left = props.cursorX.toString() + "px";
-		contextMenu.style.top = props.cursorY.toString() + "px";
+		contextMenu.style.left = props.pointerX.toString() + "px";
+		contextMenu.style.top = props.pointerY.toString() + "px";
 	}
 });
 

From eabe3b37049f96b7bdb805d9c365c8fa455e86f4 Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Wed, 16 Jul 2025 23:53:54 +0200
Subject: [PATCH 03/16] feat: remove old(?) CSS for middle-left-column in
 client layout

---
 layouts/client.vue | 10 ----------
 1 file changed, 10 deletions(-)

diff --git a/layouts/client.vue b/layouts/client.vue
index 46bdf89..6a0190d 100644
--- a/layouts/client.vue
+++ b/layouts/client.vue
@@ -243,16 +243,6 @@ function createDropdown() {
 	gap: var(--sidebar-icon-gap);
 }
 
-#middle-left-column {
-	padding-left: .25em;
-	padding-right: .25em;
-	border-right: 1px solid var(--padding-color);
-	min-width: 13em;
-	max-width: 13em;
-	overflow-y: scroll;
-	overflow-x: hidden;
-}
-
 #home-button {
 	height: var(--sidebar-icon-width);
 }

From b6970ffc1cd58ffed4110981a70a1994a535c835 Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Wed, 16 Jul 2025 23:54:19 +0200
Subject: [PATCH 04/16] style(ui): add border-right to guilds list sidebar

---
 layouts/client.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/layouts/client.vue b/layouts/client.vue
index 6a0190d..8004c6f 100644
--- a/layouts/client.vue
+++ b/layouts/client.vue
@@ -224,6 +224,8 @@ function createDropdown() {
 	
 	background: var(--optional-sidebar-background);
 	background-color: var(--sidebar-background-color);
+
+	border-right: 1px solid var(--padding-color);
 }
 
 .left-column-segment {

From 0697e60ab90a5b293cd956bb074e76f6c62aa285 Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Wed, 16 Jul 2025 23:54:50 +0200
Subject: [PATCH 05/16] feat: convert channels list and members list sidebars
 to use resizable sidebar component

---
 .../[serverId]/channels/[channelId].vue       | 52 ++++++++-----------
 1 file changed, 23 insertions(+), 29 deletions(-)

diff --git a/pages/servers/[serverId]/channels/[channelId].vue b/pages/servers/[serverId]/channels/[channelId].vue
index 8915c72..b9e7cd6 100644
--- a/pages/servers/[serverId]/channels/[channelId].vue
+++ b/pages/servers/[serverId]/channels/[channelId].vue
@@ -1,25 +1,29 @@
 <template>
 	<NuxtLayout name="client">
-		<div id="middle-left-column" class="main-grid-row">
-			<div id="server-name-container">
-				<span id="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" />
+		<ResizableSidebar width="14rem" min-width="10rem" max-width="20rem" border-sides="right">
+			<div id="middle-left-column" class="main-grid-row">
+				<div id="server-name-container">
+					<span id="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>
 			</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>
 		<MessageArea :channel-url="channelUrlPath" />
-		<div id="members-container">
-			<div id="members-list">
-				<MemberEntry v-for="member of members" :member="member" tabindex="0"/>
+		<ResizableSidebar width="15rem" min-width="13rem" max-width="30rem" border-sides="left">
+			<div id="members-container">
+				<div id="members-list">
+					<MemberEntry v-for="member of members" :member="member" tabindex="0"/>
+				</div>
 			</div>
-		</div>
+		</ResizableSidebar>
 	</NuxtLayout>
 </template>
 
@@ -27,7 +31,8 @@
 import ChannelEntry from "~/components/Guild/ChannelEntry.vue";
 import GuildOptionsMenu from "~/components/Guild/GuildOptionsMenu.vue";
 import MemberEntry from "~/components/Guild/MemberEntry.vue";
-import type { ChannelResponse, GuildMemberResponse, GuildResponse, MessageResponse } from "~/types/interfaces";
+import ResizableSidebar from "~/components/UserInterface/ResizableSidebar.vue";
+import type { ChannelResponse, GuildMemberResponse, GuildResponse } from "~/types/interfaces";
 
 const route = useRoute();
 
@@ -87,18 +92,7 @@ function handleMemberClick(member: GuildMemberResponse) {
 </script>
 
 <style>
-#middle-left-column {
-	padding-left: .5em;
-	padding-right: .5em;
-	border-right: 1px solid var(--padding-color);
-	background: var(--optional-channel-list-background);
-	background-color: var(--sidebar-background-color);
-}
-
 #members-container {
-	min-width: 15rem;
-	max-width: 15rem;
-	border-left: 1px solid var(--padding-color);
 	background: var(--optional-member-list-background);
 }
 

From 808cc980a7ebd825f0f7e0bae32a55860be08653 Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Wed, 16 Jul 2025 23:55:33 +0200
Subject: [PATCH 06/16] feat: update createContextMenu util to require either
 PointerEvent or MouseEvent and update naming of cursor to pointer

---
 utils/createContextMenu.ts | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/utils/createContextMenu.ts b/utils/createContextMenu.ts
index 88fe6fb..cf93a37 100644
--- a/utils/createContextMenu.ts
+++ b/utils/createContextMenu.ts
@@ -2,15 +2,19 @@ import { render } from "vue";
 import ContextMenu from "~/components/UserInterface/ContextMenu.vue";
 import type { ContextMenuItem } from "~/types/interfaces";
 
-export default (e: MouseEvent, menuItems: ContextMenuItem[]) => {
+export default (e: PointerEvent | MouseEvent, menuItems: ContextMenuItem[]) => {
   console.log("Rendering new context menu");
   const menuContainer = document.createElement("div");
+  console.log("hello");
   menuContainer.id = "context-menu";
   document.body.appendChild(menuContainer);
+  console.log("pointer x:", e.clientX);
+  console.log("pointer y:", e.clientY);
+  console.log("menu items:", menuItems);
   const contextMenu = h(ContextMenu, {
   	menuItems,
-  	cursorX: e.clientX,
-  	cursorY: e.clientY 
+  	pointerX: e.clientX,
+  	pointerY: e.clientY 
   });
   render(contextMenu, menuContainer);
   console.log("Rendered");

From 80df3dd13db317aea00d5fee4fa6eb1c7b875927 Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Fri, 18 Jul 2025 03:38:35 +0200
Subject: [PATCH 07/16] feat: adjust width, min-width, and max-width of
 channels and members list sidebars and implement saving of widths

---
 components/Guild/ChannelEntry.vue             |  2 +
 components/UserInterface/ResizableSidebar.vue | 11 +++--
 .../[serverId]/channels/[channelId].vue       | 44 ++++++++++++++-----
 3 files changed, 44 insertions(+), 13 deletions(-)

diff --git a/components/Guild/ChannelEntry.vue b/components/Guild/ChannelEntry.vue
index 98f210e..0c88a74 100644
--- a/components/Guild/ChannelEntry.vue
+++ b/components/Guild/ChannelEntry.vue
@@ -25,6 +25,8 @@ const isCurrentChannel = props.uuid == props.currentUuid;
 	color: inherit;
 	padding-left: .25em;
 	padding-right: .25em;
+	overflow: hidden;
+	text-overflow: ellipsis;
 }
 
 .channel-list-link-container {
diff --git a/components/UserInterface/ResizableSidebar.vue b/components/UserInterface/ResizableSidebar.vue
index 68c0dc7..5a5a0f6 100644
--- a/components/UserInterface/ResizableSidebar.vue
+++ b/components/UserInterface/ResizableSidebar.vue
@@ -23,7 +23,7 @@
 <script lang="ts" setup>
 import type { ContextMenuItem } from '~/types/interfaces';
 
-const props = defineProps<{ width?: string, minWidth: string, maxWidth: string, borderSides: "all" | "top" | "right" | "bottom" | "left" | ("top" | "right" | "bottom" | "left")[] }>();
+const props = defineProps<{ width?: string, minWidth: string, maxWidth: string, borderSides: "all" | "top" | "right" | "bottom" | "left" | ("top" | "right" | "bottom" | "left")[], localStorageName?: string }>();
 
 const borderStyling = ".1rem solid var(--padding-color)";
 
@@ -51,11 +51,13 @@ onMounted(() => {
 					let delta = 0;
 					if (props.borderSides == 'right') {
 						delta = resizableSidebar.value.getBoundingClientRect().left;
+						console.log("delta:", delta);
+						resizableSidebar.value.style.width = `${pointer.clientX - delta}px`;
 					} else {
 						delta = resizableSidebar.value.getBoundingClientRect().right;
+						console.log("delta:", delta);
+						resizableSidebar.value.style.width = `${delta - pointer.clientX}px`;
 					}
-					console.log("delta:", delta);
-					resizableSidebar.value.style.width = `${Math.abs(pointer.clientX - delta)}px`;
 				}
 			}
 
@@ -66,6 +68,9 @@ onMounted(() => {
 				document.removeEventListener("pointermove", handleMove);
 				console.log("removed pointermove event listener");
 				document.body.style.cursor = "";
+				if (resizableSidebar.value && props.localStorageName) {
+					localStorage.setItem(props.localStorageName, resizableSidebar.value.style.width);
+				}
 			}, { once: true });
 		});
 	}
diff --git a/pages/servers/[serverId]/channels/[channelId].vue b/pages/servers/[serverId]/channels/[channelId].vue
index b9e7cd6..7bcf1e9 100644
--- a/pages/servers/[serverId]/channels/[channelId].vue
+++ b/pages/servers/[serverId]/channels/[channelId].vue
@@ -1,9 +1,12 @@
 <template>
 	<NuxtLayout name="client">
-		<ResizableSidebar width="14rem" min-width="10rem" max-width="20rem" border-sides="right">
+		<ResizableSidebar
+				:width="middleLeftColumnWidth ? `${middleLeftColumnWidth}px` : '14rem'"
+				min-width="5rem" max-width="30rem"
+				border-sides="right" :local-storage-name="middleLeftColumnName">
 			<div id="middle-left-column" class="main-grid-row">
 				<div id="server-name-container">
-					<span id="server-name">{{ server?.name }}</span>
+					<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>
@@ -17,7 +20,10 @@
 			</div>
 		</ResizableSidebar>
 		<MessageArea :channel-url="channelUrlPath" />
-		<ResizableSidebar width="15rem" min-width="13rem" max-width="30rem" border-sides="left">
+		<ResizableSidebar
+				:width="membersContainerWidth ? `${membersContainerWidth}px` : '14rem'"
+				min-width="5.5rem" max-width="30rem"
+				border-sides="left" :local-storage-name="membersContainername">
 			<div id="members-container">
 				<div id="members-list">
 					<MemberEntry v-for="member of members" :member="member" tabindex="0"/>
@@ -49,23 +55,26 @@ const members = ref<GuildMemberResponse[]>();
 const showInvitePopup = ref(false);
 const showGuildSettings = ref(false);
 
+const middleLeftColumnWidth = ref<number>();
+const middleLeftColumnName = "channelsListWidth";
+
+const membersContainerWidth = ref<number>();
+const membersContainername = "membersListWidth"
+
 //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);
-	await setArrayVariables();
-});
-
 onActivated(async () => {
 	console.log("activating");
+	loadSidebarWidths();
+	console.log("loaded sidebar widths");
 	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() {
@@ -77,6 +86,18 @@ async function setArrayVariables() {
 	console.log("channel:", channel.value);
 }
 
+function loadSidebarWidths() {
+	const channelsListWidth = localStorage.getItem(middleLeftColumnName);
+	if (channelsListWidth) {
+		middleLeftColumnWidth.value = parseInt(channelsListWidth) || undefined;
+	}
+
+	const membersListWidth = localStorage.getItem(membersContainername);
+	if (membersListWidth) {
+		membersContainerWidth.value = parseInt(membersListWidth) || undefined;
+	}
+}
+
 function toggleGuildSettings(e: Event) {
 	e.preventDefault();
 	showGuildSettings.value = !showGuildSettings.value;
@@ -122,6 +143,7 @@ function handleMemberClick(member: GuildMemberResponse) {
 	display: flex;
 	flex-direction: column;
 	gap: .5em;
+	text-overflow: ellipsis;
 }
 
 .member-avatar {
@@ -145,6 +167,8 @@ function handleMemberClick(member: GuildMemberResponse) {
 
 #server-name {
 	font-size: 1.5em;
+	overflow: hidden;
+	text-overflow: ellipsis;
 }
 
 #server-settings-button {

From 4b1db5961a5488ac15b5f856c80b6952a8f3fa44 Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Fri, 18 Jul 2025 03:39:23 +0200
Subject: [PATCH 08/16] feat: add channel name tooltip to ChannelEntry
 component

---
 components/Guild/ChannelEntry.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/Guild/ChannelEntry.vue b/components/Guild/ChannelEntry.vue
index 0c88a74..9d785db 100644
--- a/components/Guild/ChannelEntry.vue
+++ b/components/Guild/ChannelEntry.vue
@@ -1,10 +1,10 @@
 <template>
-  <div v-if="isCurrentChannel" class="channel-list-link-container rounded-corners current-channel" tabindex="0">
+  <div v-if="isCurrentChannel" class="channel-list-link-container rounded-corners current-channel" tabindex="0" :title="props.name">
 	<NuxtLink class="channel-list-link" :href="props.href" tabindex="-1">
 		# {{ props.name }}
 	</NuxtLink>
   </div>
-  <div v-else class="channel-list-link-container rounded-corners" tabindex="0">
+  <div v-else class="channel-list-link-container rounded-corners" tabindex="0" :title="props.name">
 	<NuxtLink class="channel-list-link" :href="props.href" tabindex="-1">
 		# {{ props.name }}
 	</NuxtLink>

From 315258a8d537fc57f0625e640feb7e37eb0eedd2 Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Fri, 18 Jul 2025 03:57:02 +0200
Subject: [PATCH 09/16] style(ui): change width resizer's cursor from
 col-resize to ew-resize

---
 components/UserInterface/ResizableSidebar.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/UserInterface/ResizableSidebar.vue b/components/UserInterface/ResizableSidebar.vue
index 5a5a0f6..3d43b80 100644
--- a/components/UserInterface/ResizableSidebar.vue
+++ b/components/UserInterface/ResizableSidebar.vue
@@ -42,7 +42,7 @@ onMounted(() => {
 				createContextMenu(e, menuItems);
 				return
 			};
-			document.body.style.cursor = "col-resize";
+			document.body.style.cursor = "ew-resize";
 			function handleMove(pointer: PointerEvent) {
 				if (resizableSidebar.value) {
 					console.log("moving");

From 317ec4bcd6192926da27b08b76a571b30d01e21e Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Fri, 18 Jul 2025 04:07:29 +0200
Subject: [PATCH 10/16] feat: add back onMounted in channelId view

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

diff --git a/pages/servers/[serverId]/channels/[channelId].vue b/pages/servers/[serverId]/channels/[channelId].vue
index 7bcf1e9..f3c97da 100644
--- a/pages/servers/[serverId]/channels/[channelId].vue
+++ b/pages/servers/[serverId]/channels/[channelId].vue
@@ -66,6 +66,15 @@ const membersContainername = "membersListWidth"
 
 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");
+});
+
 onActivated(async () => {
 	console.log("activating");
 	loadSidebarWidths();

From 118f098b460c4f3690f38c6fffa4b6e7d75fb563 Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Fri, 18 Jul 2025 04:09:16 +0200
Subject: [PATCH 11/16] fix: that the reset context menu option reset resizable
 sidebar width to the localStorage value rather than the default value

---
 components/UserInterface/ResizableSidebar.vue | 20 ++++++++++++++++++-
 .../[serverId]/channels/[channelId].vue       | 20 ++-----------------
 2 files changed, 21 insertions(+), 19 deletions(-)

diff --git a/components/UserInterface/ResizableSidebar.vue b/components/UserInterface/ResizableSidebar.vue
index 3d43b80..3017dbc 100644
--- a/components/UserInterface/ResizableSidebar.vue
+++ b/components/UserInterface/ResizableSidebar.vue
@@ -1,7 +1,7 @@
 <template>
 	<div ref="resizableSidebar" class="resizable-sidebar"
 			:style="{
-				'width': props.width,
+				'width': storedWidth ? `${storedWidth}px` : props.width,
 				'min-width': props.minWidth,
 				'max-width': props.maxWidth,
 				'border': props.borderSides == 'all' ? borderStyling : undefined,
@@ -29,12 +29,15 @@ const borderStyling = ".1rem solid var(--padding-color)";
 
 const resizableSidebar = ref<HTMLDivElement>();
 const widthResizer = ref<HTMLDivElement>();
+const storedWidth = ref<number>();
 
 const menuItems: ContextMenuItem[] = [
 	{ name: "Reset", callback: () => { resizableSidebar.value!.style.width = props.width ?? props.minWidth } }
 ]
 
 onMounted(() => {
+	loadStoredWidth();
+
 	if (resizableSidebar.value && widthResizer.value) {
 		widthResizer.value.addEventListener("pointerdown", (e) => {
 			e.preventDefault();
@@ -76,6 +79,21 @@ onMounted(() => {
 	}
 });
 
+onActivated(() => {
+	console.log("[res] activated");
+	loadStoredWidth();
+});
+
+function loadStoredWidth() {
+	if (props.localStorageName) {
+		const storedWidthValue = localStorage.getItem(props.localStorageName);
+		if (storedWidthValue) {
+			storedWidth.value = parseInt(storedWidthValue) || undefined;
+			console.log("[res] loaded stored width");
+		}
+	}
+}
+
 </script>
 
 <style>
diff --git a/pages/servers/[serverId]/channels/[channelId].vue b/pages/servers/[serverId]/channels/[channelId].vue
index f3c97da..cdc59e4 100644
--- a/pages/servers/[serverId]/channels/[channelId].vue
+++ b/pages/servers/[serverId]/channels/[channelId].vue
@@ -1,8 +1,7 @@
 <template>
 	<NuxtLayout name="client">
 		<ResizableSidebar
-				:width="middleLeftColumnWidth ? `${middleLeftColumnWidth}px` : '14rem'"
-				min-width="5rem" max-width="30rem"
+				width="14rem" min-width="5rem" max-width="30rem"
 				border-sides="right" :local-storage-name="middleLeftColumnName">
 			<div id="middle-left-column" class="main-grid-row">
 				<div id="server-name-container">
@@ -21,8 +20,7 @@
 		</ResizableSidebar>
 		<MessageArea :channel-url="channelUrlPath" />
 		<ResizableSidebar
-				:width="membersContainerWidth ? `${membersContainerWidth}px` : '14rem'"
-				min-width="5.5rem" max-width="30rem"
+				width="14rem" min-width="5.5rem" max-width="30rem"
 				border-sides="left" :local-storage-name="membersContainername">
 			<div id="members-container">
 				<div id="members-list">
@@ -77,8 +75,6 @@ onMounted(async () => {
 
 onActivated(async () => {
 	console.log("activating");
-	loadSidebarWidths();
-	console.log("loaded sidebar widths");
 	const guildUrl = `guilds/${route.params.serverId}`;
 	server.value = await fetchWithApi(guildUrl);
 	console.log("fetched guild");
@@ -95,18 +91,6 @@ async function setArrayVariables() {
 	console.log("channel:", channel.value);
 }
 
-function loadSidebarWidths() {
-	const channelsListWidth = localStorage.getItem(middleLeftColumnName);
-	if (channelsListWidth) {
-		middleLeftColumnWidth.value = parseInt(channelsListWidth) || undefined;
-	}
-
-	const membersListWidth = localStorage.getItem(membersContainername);
-	if (membersListWidth) {
-		membersContainerWidth.value = parseInt(membersListWidth) || undefined;
-	}
-}
-
 function toggleGuildSettings(e: Event) {
 	e.preventDefault();
 	showGuildSettings.value = !showGuildSettings.value;

From 89d0023c07682adaf3eea610d72ba1dc4e724219 Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Fri, 18 Jul 2025 04:37:15 +0200
Subject: [PATCH 12/16] chore: remove unused variables in channelId view

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

diff --git a/pages/servers/[serverId]/channels/[channelId].vue b/pages/servers/[serverId]/channels/[channelId].vue
index cdc59e4..801680b 100644
--- a/pages/servers/[serverId]/channels/[channelId].vue
+++ b/pages/servers/[serverId]/channels/[channelId].vue
@@ -53,10 +53,7 @@ const members = ref<GuildMemberResponse[]>();
 const showInvitePopup = ref(false);
 const showGuildSettings = ref(false);
 
-const middleLeftColumnWidth = ref<number>();
 const middleLeftColumnName = "channelsListWidth";
-
-const membersContainerWidth = ref<number>();
 const membersContainername = "membersListWidth"
 
 //const servers = await fetchWithApi("/servers") as { uuid: string, name: string, description: string }[];

From 60e7a42f925eb76e6fb196245e2d308b50ef42b2 Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Fri, 18 Jul 2025 04:37:49 +0200
Subject: [PATCH 13/16] feat: convert friends list sidebar into resizable
 sidebar

---
 components/Me/DirectMessagesSidebar.vue | 37 +++++++++++++------------
 1 file changed, 20 insertions(+), 17 deletions(-)

diff --git a/components/Me/DirectMessagesSidebar.vue b/components/Me/DirectMessagesSidebar.vue
index 4b5df7a..b3d1788 100644
--- a/components/Me/DirectMessagesSidebar.vue
+++ b/components/Me/DirectMessagesSidebar.vue
@@ -1,27 +1,30 @@
 <template>
-	<div id="middle-left-column">
-		<div id="friend-sidebar">
-			<div>
-				<h3>Direct Messages</h3>
-			</div>
-			<VerticalSpacer />
-
-			<NuxtLink class="user-item" :href="`/me`" tabindex="0">
-				<Icon class="user-avatar" name="lucide:user" />
-				<span class="user-display-name">Friends</span>
-			</NuxtLink>
-			<VerticalSpacer />
-			
-			<div id="direct-message-list">
-				<UserEntry v-for="user of friends" :user="user"
-						:href="`/me/${user.uuid}`"/> 
+	<ResizableSidebar width="14rem" min-width="10rem" max-width="30rem" border-sides="right" local-storage-name="friendsListWidth">
+		<div id="middle-left-column">
+			<div id="friend-sidebar">
+				<div>
+					<h3>Direct Messages</h3>
+				</div>
+				<VerticalSpacer />
+	
+				<NuxtLink class="user-item" :href="`/me`" tabindex="0">
+					<Icon class="user-avatar" name="lucide:user" />
+					<span class="user-display-name">Friends</span>
+				</NuxtLink>
+				<VerticalSpacer />
+				
+				<div id="direct-message-list">
+					<UserEntry v-for="user of friends" :user="user"
+							:href="`/me/${user.uuid}`"/> 
+				</div>
 			</div>
 		</div>
-	</div>
+	</ResizableSidebar>
 </template>
 
 <script lang="ts" setup>
 import VerticalSpacer from '~/components/UserInterface/VerticalSpacer.vue';
+import ResizableSidebar from '../UserInterface/ResizableSidebar.vue';
 
 const { fetchFriends } = useApi();
 

From 49e8c3425490fd72ca5430ee8a23759b8a970e64 Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Fri, 18 Jul 2025 07:44:07 +0200
Subject: [PATCH 14/16] fix: make channel list and DM list width share storage
 name

---
 components/Me/DirectMessagesSidebar.vue           | 2 +-
 pages/servers/[serverId]/channels/[channelId].vue | 9 +++------
 2 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/components/Me/DirectMessagesSidebar.vue b/components/Me/DirectMessagesSidebar.vue
index b3d1788..b06890b 100644
--- a/components/Me/DirectMessagesSidebar.vue
+++ b/components/Me/DirectMessagesSidebar.vue
@@ -1,5 +1,5 @@
 <template>
-	<ResizableSidebar width="14rem" min-width="10rem" max-width="30rem" border-sides="right" local-storage-name="friendsListWidth">
+	<ResizableSidebar width="14rem" min-width="8rem" max-width="30rem" border-sides="right" local-storage-name="middleLeftColumn">
 		<div id="middle-left-column">
 			<div id="friend-sidebar">
 				<div>
diff --git a/pages/servers/[serverId]/channels/[channelId].vue b/pages/servers/[serverId]/channels/[channelId].vue
index 801680b..045a269 100644
--- a/pages/servers/[serverId]/channels/[channelId].vue
+++ b/pages/servers/[serverId]/channels/[channelId].vue
@@ -1,8 +1,8 @@
 <template>
 	<NuxtLayout name="client">
 		<ResizableSidebar
-				width="14rem" min-width="5rem" max-width="30rem"
-				border-sides="right" :local-storage-name="middleLeftColumnName">
+				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>
@@ -21,7 +21,7 @@
 		<MessageArea :channel-url="channelUrlPath" />
 		<ResizableSidebar
 				width="14rem" min-width="5.5rem" max-width="30rem"
-				border-sides="left" :local-storage-name="membersContainername">
+				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"/>
@@ -53,9 +53,6 @@ const members = ref<GuildMemberResponse[]>();
 const showInvitePopup = ref(false);
 const showGuildSettings = ref(false);
 
-const middleLeftColumnName = "channelsListWidth";
-const membersContainername = "membersListWidth"
-
 //const servers = await fetchWithApi("/servers") as { uuid: string, name: string, description: string }[];
 //console.log("channelid: servers:", servers);
 

From ad7a6b5bb6dd5cf2ebc7505bb1b46df5b20e78a1 Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Fri, 18 Jul 2025 08:01:45 +0200
Subject: [PATCH 15/16] fix: add ellipsis overflow to DM list

---
 components/User/UserEntry.vue | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/components/User/UserEntry.vue b/components/User/UserEntry.vue
index b3ad40f..7e4ab4a 100644
--- a/components/User/UserEntry.vue
+++ b/components/User/UserEntry.vue
@@ -37,4 +37,10 @@ const props = defineProps<{
     width: 2.3em;
     height: 2.3em;
 }
+
+.user-display-name {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
 </style>

From 3a65cfd10a989dd2e4bebe58e7e8582085ee33be Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Fri, 18 Jul 2025 08:05:11 +0200
Subject: [PATCH 16/16] fix: ensure avatars don't squish depending on sidebar
 width

---
 components/User/UserEntry.vue                     | 6 ++++--
 pages/servers/[serverId]/channels/[channelId].vue | 7 ++++---
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/components/User/UserEntry.vue b/components/User/UserEntry.vue
index 7e4ab4a..5abea85 100644
--- a/components/User/UserEntry.vue
+++ b/components/User/UserEntry.vue
@@ -34,8 +34,10 @@ const props = defineProps<{
 }
 
 .user-avatar {
-    width: 2.3em;
-    height: 2.3em;
+    min-width: 2.3em;
+    max-width: 2.3em;
+    min-width: 2.3em;
+    max-height: 2.3em;
 }
 
 .user-display-name {
diff --git a/pages/servers/[serverId]/channels/[channelId].vue b/pages/servers/[serverId]/channels/[channelId].vue
index 045a269..89d5ca4 100644
--- a/pages/servers/[serverId]/channels/[channelId].vue
+++ b/pages/servers/[serverId]/channels/[channelId].vue
@@ -134,9 +134,10 @@ function handleMemberClick(member: GuildMemberResponse) {
 }
 
 .member-avatar {
-	height: 2.3em;
-	width: 2.3em;
-	border-radius: 50%;
+    min-width: 2.3em;
+    max-width: 2.3em;
+    min-width: 2.3em;
+    max-height: 2.3em;
 }
 
 .member-display-name {