feat: adjust width, min-width, and max-width of channels and members list sidebars and implement saving of widths

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 {

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 });
 		});
 	}

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 {