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