From 6a3c8e898296d7d71ed30a45a514e53eb35d2244 Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Thu, 29 May 2025 22:16:42 +0200
Subject: [PATCH] feat: improve channel list appearance

---
 components/Channel.vue                            | 13 ++++++++-----
 pages/servers/[serverId]/channels/[channelId].vue | 15 ++++++++++-----
 2 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/components/Channel.vue b/components/Channel.vue
index a0cdc78..a41974a 100644
--- a/components/Channel.vue
+++ b/components/Channel.vue
@@ -1,19 +1,21 @@
 <template>
-  <div v-if="current" class="channel-list-link-container">
+  <div v-if="isCurrentChannel" class="channel-list-link-container rounded-corners current-channel">
 	<NuxtLink class="channel-list-link" :href="props.href">
-		# {{ name }}
+		# {{ props.name }}
 	</NuxtLink>
   </div>
-  <div v-else class="channel-list-link-container current-channel">
+  <div v-else class="channel-list-link-container rounded-corners">
 	<NuxtLink class="channel-list-link" :href="props.href">
-		# {{ name }}
+		# {{ props.name }}
 	</NuxtLink>
   </div>
 </template>
 
 <script lang="ts" setup>
 
-const props = defineProps<{ name: string, href: string, current?: boolean }>();
+const props = defineProps<{ name: string, uuid: string, currentUuid: string, href: string }>();
+
+const isCurrentChannel = props.uuid == props.currentUuid;
 
 </script>
 
@@ -30,6 +32,7 @@ const props = defineProps<{ name: string, href: string, current?: boolean }>();
 	display: flex;
 	height: 4dvh;
 	white-space: nowrap;
+	align-items: center;
 }
 
 .current-channel {
diff --git a/pages/servers/[serverId]/channels/[channelId].vue b/pages/servers/[serverId]/channels/[channelId].vue
index eb6ba46..2b5d225 100644
--- a/pages/servers/[serverId]/channels/[channelId].vue
+++ b/pages/servers/[serverId]/channels/[channelId].vue
@@ -18,9 +18,8 @@
 				</h3>
 			</div>
 			<div id="channels-list">
-				<Channel v-for="channel of channels" v-if="route.params.channelId == channel?.uuid" :name="channel.name"
-					:href="route.path" :current="true" />
-				<Channel v-for="channel of channels" v-else :name="channel.name"
+				<Channel 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>
@@ -102,19 +101,19 @@ const members = [
 ];
 
 onMounted(async () => {
-	loading.value = true;
 	console.log("channelid: set loading to true");
 	server.value = await fetchWithApi(`servers/${route.params.serverId}`);
 
 	channels.value = await fetchWithApi(
 		`servers/${route.params.serverId}/channels`
 	);
+	console.log("channels:", channels.value);
 	channel.value = await fetchWithApi(
 		route.path
 	);
+	console.log("channel:", channel.value);
 
 	console.log("channelid: channel:", channel);
-	loading.value = false;
 	console.log("channelid: set loading to false");
 });
 
@@ -151,4 +150,10 @@ function toggleInvitePopup(e: Event) {
 	border-left: 1px solid rgb(70, 70, 70);
 }
 
+#channels-list {
+	display: flex;
+	flex-direction: column;
+	gap: 1dvh;
+}
+
 </style>
\ No newline at end of file