From 1c5b13632314156e71098a7bdc3400fd76b945ce Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Sat, 31 May 2025 17:12:07 +0200
Subject: [PATCH] feat: change to fetch guild members list and improve
 appearance of members list

---
 .../[serverId]/channels/[channelId].vue       | 63 ++++---------------
 1 file changed, 13 insertions(+), 50 deletions(-)

diff --git a/pages/servers/[serverId]/channels/[channelId].vue b/pages/servers/[serverId]/channels/[channelId].vue
index ac36105..4f3e4ec 100644
--- a/pages/servers/[serverId]/channels/[channelId].vue
+++ b/pages/servers/[serverId]/channels/[channelId].vue
@@ -26,9 +26,9 @@
 		<MessageArea :channel-url="channelUrlPath" />
 		<div id="members-list">
 			<div class="member-item" v-for="member of members">
-				<img v-if="member.avatar" :src="member.avatar" :alt="member.displayName" height="30" />
-				<Icon v-else name="lucide:user" size="30" />
-				<span class="member-display-name">{{ member.displayName }}</span>
+				<img v-if="member.user.avatar" class="member-avatar" :src="member.user.avatar" :alt="member.user.display_name ?? member.user.username" />
+				<Icon v-else class="member-avatar" name="lucide:user" />
+				<span class="member-display-name">{{ member.user.display_name ?? member.user.username }}</span>
 			</div>
 		</div>
 	</NuxtLayout>
@@ -52,53 +52,9 @@ import type { ChannelResponse, GuildResponse, MessageResponse } from "~/types/in
 
 //const servers = await fetchWithApi("/servers") as { uuid: string, name: string, description: string }[];
 //console.log("channelid: servers:", servers);
-const members = [
-	{
-		id: "3287484395",
-		displayName: "SauceyRed",
-		avatar: ""
-	},
-	{
-		id: "3287484395",
-		displayName: "JustTemmie",
-		avatar: ""
-	},
-	{
-		id: "3287484395",
-		displayName: "GOIN!!!!!!",
-		avatar: ""
-	},
-	{
-		id: "3287484395",
-		displayName: "SauceyRed",
-		avatar: ""
-	},
-	{
-		id: "3287484395",
-		displayName: "Hatsune Miku Official",
-		avatar: ""
-	},
-	{
-		id: "3287484395",
-		displayName: "Hatsune Miku Official",
-		avatar: ""
-	},
-	{
-		id: "3287484395",
-		displayName: "Hatsune Miku Official",
-		avatar: ""
-	},
-	{
-		id: "3287484395",
-		displayName: "SauceyRed",
-		avatar: ""
-	},
-	{
-		id: "3287484395",
-		displayName: "SauceyRed",
-		avatar: ""
-	}
-];
+
+const { fetchMembers } = useApi();
+const members = await fetchMembers(route.params.serverId as string);
 
 onMounted(async () => {
 	console.log("channelid: set loading to true");
@@ -129,6 +85,7 @@ function toggleInvitePopup(e: Event) {
 	align-items: center;
 	margin-top: .5em;
 	margin-bottom: .5em;
+	gap: .5em;
 }
 
 #members-list {
@@ -153,4 +110,10 @@ function toggleInvitePopup(e: Event) {
 	gap: 1dvh;
 }
 
+.member-avatar {
+	height: 2.3em;
+	width: 2.3em;
+	border-radius: 50%;
+}
+
 </style>
\ No newline at end of file