From c46575311189268f21e2cad983a8dc136da4e792 Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Tue, 5 Aug 2025 03:28:46 +0200
Subject: [PATCH 1/2] feat: update members fetching to handle endpoint
 pagination update

---
 composables/api.ts                                | 13 ++++++++++---
 pages/servers/[serverId]/channels/[channelId].vue |  3 +++
 types/interfaces.ts                               |  7 +++++++
 3 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/composables/api.ts b/composables/api.ts
index 56d4e66..c949bc0 100644
--- a/composables/api.ts
+++ b/composables/api.ts
@@ -1,4 +1,4 @@
-import type { ChannelResponse, GuildMemberResponse, GuildResponse, MessageResponse, StatsResponse, UserResponse } from "~/types/interfaces";
+import type { ChannelResponse, GuildMemberResponse, GuildMembersResponse, GuildResponse, MessageResponse, StatsResponse, UserResponse } from "~/types/interfaces";
 
 function ensureIsArray(list: any) {
 	if (Array.isArray(list)) {
@@ -33,8 +33,15 @@ export const useApi = () => {
 		return await fetchWithApi(`/channels/${channelId}`)
 	}
 
-	async function fetchMembers(guildId: string): Promise<GuildMemberResponse[]> {
-		return ensureIsArray(await fetchWithApi(`/guilds/${guildId}/members`));
+	async function fetchMembers(guildId: string, options?: { per_page?: number, page?: number }): Promise<GuildMembersResponse> {
+		const query = new URLSearchParams();
+		query.set("page", options?.page ? options.page.toString() : "1");
+		if (options?.per_page) {
+			query.set("per_page", options.per_page.toString());
+		}
+
+		console.log("members query:", query);
+		return await fetchWithApi(`/guilds/${guildId}/members?${query.toString()}`) as GuildMembersResponse;
 	}
 
 	async function fetchMember(guildId: string, memberId: string): Promise<GuildMemberResponse | undefined> {
diff --git a/pages/servers/[serverId]/channels/[channelId].vue b/pages/servers/[serverId]/channels/[channelId].vue
index 137e5e3..07ea532 100644
--- a/pages/servers/[serverId]/channels/[channelId].vue
+++ b/pages/servers/[serverId]/channels/[channelId].vue
@@ -77,7 +77,10 @@ onActivated(async () => {
 });
 
 async function setArrayVariables() {
+	const membersRes = await fetchMembers(route.params.serverId as string);
+	members.value = membersRes.objects;
 	members.value = await fetchMembers(route.params.serverId as string);
+	console.log("Placeholder count:", totalMemberCount.value);
 	const guildUrl = `guilds/${route.params.serverId}`;
 	channels.value = await fetchWithApi(`${guildUrl}/channels`);
 	console.log("channels:", channels.value);
diff --git a/types/interfaces.ts b/types/interfaces.ts
index 4fa629f..508ca3d 100644
--- a/types/interfaces.ts
+++ b/types/interfaces.ts
@@ -31,6 +31,13 @@ export interface GuildMemberResponse {
 	user: UserResponse
 }
 
+export interface GuildMembersResponse {
+	objects: GuildMemberResponse[],
+	amount: number,
+	pages: number,
+	page: number
+}
+
 export interface ChannelResponse {
 	uuid: string,
 	guild_uuid: string,

From 7d0294e8089e4dd4ed4bcb8d09edaa5a1aaaf72a Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Tue, 5 Aug 2025 03:35:45 +0200
Subject: [PATCH 2/2] wip: start work on members list placeholders

---
 .../[serverId]/channels/[channelId].vue       | 30 +++++++++++++++++--
 1 file changed, 28 insertions(+), 2 deletions(-)

diff --git a/pages/servers/[serverId]/channels/[channelId].vue b/pages/servers/[serverId]/channels/[channelId].vue
index 07ea532..b2e0782 100644
--- a/pages/servers/[serverId]/channels/[channelId].vue
+++ b/pages/servers/[serverId]/channels/[channelId].vue
@@ -24,7 +24,8 @@
 				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"/>
+					<MemberEntry v-for="member of members" :member="member" tabindex="0" />
+					<GuildMemberEntryPlaceholder v-for="n in totalMemberCount" />
 				</div>
 			</div>
 		</ResizableSidebar>
@@ -49,6 +50,7 @@ const channels = ref<ChannelResponse[] | undefined>();
 const channel = ref<ChannelResponse | undefined>();
 
 const members = ref<GuildMemberResponse[]>();
+const totalMemberCount = ref(0);
 
 const showInvitePopup = ref(false);
 const showGuildSettings = ref(false);
@@ -65,6 +67,16 @@ onMounted(async () => {
 	console.log("fetched guild");
 	await setArrayVariables();
 	console.log("set array variables");
+	const membersList = document.getElementById("members-list");
+	if (membersList) {
+		membersList.addEventListener("scroll", (e) => {
+			if (e.target && e.target instanceof Element) {
+				if (isVisible(e.target)) {
+					
+				}
+			}
+		});
+	}
 });
 
 onActivated(async () => {
@@ -79,7 +91,7 @@ onActivated(async () => {
 async function setArrayVariables() {
 	const membersRes = await fetchMembers(route.params.serverId as string);
 	members.value = membersRes.objects;
-	members.value = await fetchMembers(route.params.serverId as string);
+	totalMemberCount.value = (membersRes.amount * membersRes.pages) - membersRes.amount;
 	console.log("Placeholder count:", totalMemberCount.value);
 	const guildUrl = `guilds/${route.params.serverId}`;
 	channels.value = await fetchWithApi(`${guildUrl}/channels`);
@@ -100,6 +112,20 @@ function toggleInvitePopup(e: Event) {
 
 function handleMemberClick(member: GuildMemberResponse) {
 }
+
+function isVisible(element: Element) {
+  const rect = element.getBoundingClientRect();
+  return (
+      rect.top >= 0 &&
+      rect.left >= 0 &&
+      rect.bottom <= (
+          window.innerHeight ||
+          document.documentElement.clientHeight) &&
+      rect.right <= (
+          window.innerWidth ||
+          document.documentElement.clientWidth)
+  );
+}
 </script>
 
 <style>