wip: start work on members list placeholders

feat: update members fetching to handle endpoint pagination update
2025-08-05 03:50:59 +02:00 · 2025-08-05 03:42:39 +02:00
38 changed files with 205 additions and 466 deletions
--- a/app.vue
+++ b/app.vue
@ -9,13 +9,14 @@
 <script lang="ts" setup>
 import ContextMenu from '~/components/UserInterface/ContextMenu.vue';
 import type { ContextMenuInterface } from './types/interfaces';
+import loadPreferredTheme from '~/utils/loadPreferredTheme';

 const banner = useState("banner", () => false);

 const contextMenu = useState<ContextMenuInterface>("contextMenu");

 onMounted(() => {
-	loadPreferredThemes()
+	loadPreferredTheme()

 	document.removeEventListener("contextmenu", contextMenuHandler);
 	document.addEventListener("contextmenu", (e) => {
--- a/components/DefaultIcon.vue
+++ b/components/DefaultIcon.vue
@ -1,12 +1,10 @@
 <template>
  <div :style="`background-color: ${generateIrcColor(seed, 50)}`"
 	class="default-icon">
-		<div class="default-icon-text-container">
 		<span class="default-icon-text">
 			{{ previewName }}
 		</span>
  </div>
-  </div>
 </template>

 <script lang="ts" setup>
@ -33,17 +31,12 @@ if (props.name.length > 3) {
 </script>

 <style scoped>
-.default-icon, .default-icon-text-container {
+.default-icon {
 	display: flex;
 	align-items: center;
 	justify-content: center;
 }

-.default-icon-text-container {
-	height: 100%;
-	width: 100%;
-}
-
 .default-icon-text {
 	/* helps centre the icon, yes, this is NOT perfect */
 	margin-top: -0.15em;
--- a/components/Guild/GuildDropdown.vue
+++ b/components/Guild/GuildDropdown.vue
@ -27,7 +27,7 @@ const props = defineProps<{ options: DropdownOption[] }>();
 }

 .dropdown-option {
-  border: .09rem solid var(--padding-color);
+  border: .09rem solid rgb(70, 70, 70);
 }

 .dropdown-button {
--- a/components/Guild/MemberEntry.vue
+++ b/components/Guild/MemberEntry.vue
@ -1,9 +1,7 @@
 <template>
    <div class="member-item" @click.prevent="showModalPopup" tabindex="0">
        <Avatar :profile="props.member" class="member-avatar"/>
-        <span class="member-display-name" :style="`color: ${generateIrcColor(props.member.user.uuid)}`">
-            {{ getDisplayName(props.member) }}
-        </span>
+        <span class="member-display-name">{{ getDisplayName(props.member) }}</span>
    </div>
    <ModalProfilePopup v-if="modalPopupVisible" :profile="props.member"
        :onFinish="hideModalPopup" :keepalive="false"/>
--- a/components/Message.vue
+++ b/components/Message.vue
@ -1,6 +1,6 @@
 <template>
 	<div v-if="props.type == 'normal' || props.replyMessage" ref="messageElement" @contextmenu="showContextMenu($event, contextMenu, menuItems)" :id="props.last ? 'last-message' : undefined"
-			class="message normal-message" :class="{ 'mentioned': (props.replyMessage || props.isMentioned) && props.message.member.user.uuid != props.me.uuid && props.replyMessage?.member.user.uuid == props.me.uuid }" :data-message-id="props.messageId"
+			class="message normal-message" :class="{ 'mentioned': (props.replyMessage || props.isMentioned) && props.message.user.uuid != props.me.uuid && props.replyMessage?.user.uuid == props.me.uuid }" :data-message-id="props.messageId"
 			:editing.sync="props.editing" :replying-to.sync="props.replyingTo">
 		<div v-if="props.replyMessage" class="message-reply-svg">
 			<svg
@ -25,7 +25,7 @@
 			</svg>
 		</div>
 		<MessageReply v-if="props.replyMessage" :id="props.message.uuid"
-			:author="getDisplayName(props.replyMessage.member)"
+			:author="getDisplayName(props.replyMessage.user)"
 			:text="props.replyMessage?.message"
 			:reply-id="props.replyMessage.uuid" max-width="reply" />
 		<div class="left-column">
@ -149,12 +149,12 @@ const menuItems: ContextMenuItem[] = [
 ]

 console.log("me:", props.me);
-if (props.author?.user.uuid == props.me.uuid) {
+if (props.author?.uuid == props.me.uuid) {
 	// Inserts "edit" option at index 1 (below the "reply" option)
 	menuItems.splice(1, 0, { name: "Edit (WIP)", icon: "lucide:square-pen", type: "normal", callback: () => { /* if (messageElement.value) editMessage(messageElement.value, props) */ } });
 }

-if (props.author?.user.uuid == props.me.uuid /* || check message delete permission*/) {
+if (props.author?.uuid == props.me.uuid /* || check message delete permission*/) {
 	// Inserts "edit" option at index 2 (below the "edit" option)
 	menuItems.splice(2, 0, { name: "Delete (WIP)", icon: "lucide:trash", type: "danger", callback: () => {} });
 }
@ -270,11 +270,11 @@ function getDayDifference(date1: Date, date2: Date) {
 */

 .mentioned {
-	background-color: var(--chat-important-background-color);
+	background-color: rgba(0, 255, 166, 0.123);
 }

 .mentioned:hover {
-	background-color: var(--chat-important-highlighted-background-color);
+	background-color: rgba(90, 255, 200, 0.233);
 }

 .message-reply-svg {
@ -299,7 +299,7 @@ function getDayDifference(date1: Date, date2: Date) {
 <style>

 .replying-to {
-	background-color: var(--chat-featured-message-color);
+	background-color: var(--primary-highlighted-color);
 }

 </style>
--- a/components/MessageArea.vue
+++ b/components/MessageArea.vue
@ -1,13 +1,13 @@
 <template>
 	<div id="message-area">
 		<div id="messages" ref="messagesElement">
-			<Message v-for="(message, i) of messages" :username="getDisplayName(message.member.user)" :key="message.uuid"
-				:text="message.message" :timestamp="messageTimestamps[message.uuid]" :img="message.member.user.avatar"
+			<Message v-for="(message, i) of messages" :username="getDisplayName(message.user)" :key="message.uuid"
+				:text="message.message" :timestamp="messageTimestamps[message.uuid]" :img="message.user.avatar"
 				:format="timeFormat" :type="messagesType[message.uuid]"
 				:margin-bottom="(messages[i + 1] && messagesType[messages[i + 1].uuid] == 'normal') ?? false"
-				:last="i == messages.length - 1" :message-id="message.uuid" :author="message.member" :me="me"
+				:last="i == messages.length - 1" :message-id="message.uuid" :author="message.user" :me="me"
 				:message="message" :is-reply="message.reply_to"
-				:author-color="`${generateIrcColor(message.member.user.uuid)}`"
+				:author-color="`${generateIrcColor(message.user.uuid)}`"
 				:reply-message="message.reply_to ? getReplyMessage(message.reply_to) : undefined" />
 		</div>
 		<div id="message-box" class="rounded-corners">
@ -67,33 +67,33 @@ const previousMessage = ref<MessageResponse>();
 function groupMessage(message: MessageResponse, options?: { prevMessage?: MessageResponse, reverse?: boolean }) {
 	messageTimestamps.value[message.uuid] = uuidToTimestamp(message.uuid);
 	console.log("message:", message.message);
-	console.log("author:", message.member.user.username, `(${message.member.uuid})`);
+	console.log("author:", message.user.username, `(${message.user.uuid})`);

-	if (!previousMessage.value || previousMessage.value && message.member.uuid != previousMessage.value.member.uuid) {
+	if (!previousMessage.value || previousMessage.value && message.user.uuid != previousMessage.value.user.uuid) {
 		console.log("no previous message or author is different than last messsage's");
 		messagesType.value[message.uuid] = "normal";
 		previousMessage.value = message;
 		console.log("set previous message to:", previousMessage.value.message);
-		console.log(`setting first post by user ${message.member.user.username} to "${message.message}" with timestamp ${messageTimestamps.value[message.uuid]}`);
-		firstMessageByUsers.value[message.member.uuid] = message;
+		console.log(`setting first post by user ${message.user.username} to "${message.message}" with timestamp ${messageTimestamps.value[message.uuid]}`);
+		firstMessageByUsers.value[message.user.uuid] = message;
 		return;
 	}


-	const firstByUser = firstMessageByUsers.value[message.member.uuid];
+	const firstByUser = firstMessageByUsers.value[message.user.uuid];
 	if (firstByUser) {
 		console.log("first by user exists:", firstByUser);
-		if (message.member.uuid != firstByUser.member.uuid) {
+		if (message.user.uuid != firstByUser.user.uuid) {
 			console.log("message is by new user, setting their first message")
-			firstMessageByUsers.value[message.member.uuid] = message;
+			firstMessageByUsers.value[message.user.uuid] = message;
 			console.log("RETURNING FALSE");
 			messagesType.value[message.uuid] = "normal";
 			return;
 		}
 	} else {
 		console.log("first by user doesn't exist");
-		console.log(`setting first post by user ${message.member.user.username} to "${message.message}" with timestamp ${messageTimestamps.value[message.uuid]}`);
-		firstMessageByUsers.value[message.member.uuid] = message;
+		console.log(`setting first post by user ${message.user.username} to "${message.message}" with timestamp ${messageTimestamps.value[message.uuid]}`);
+		firstMessageByUsers.value[message.user.uuid] = message;
 		console.log("RETURNING FALSE");
 		messagesType.value[message.uuid] = "normal";
 		return;
@ -111,8 +111,8 @@ function groupMessage(message: MessageResponse, options?: { prevMessage?: Messag
 	console.log("group?", lessThanMax);
 	if (!lessThanMax) {
 		console.log("diff exceeds max");
-		console.log(`setting first post by user ${message.member.user.username} to "${message.message}" with timestamp ${messageTimestamps.value[message.uuid]}`)
-		firstMessageByUsers.value[message.member.uuid] = message;
+		console.log(`setting first post by user ${message.user.username} to "${message.message}" with timestamp ${messageTimestamps.value[message.uuid]}`)
+		firstMessageByUsers.value[message.user.uuid] = message;
 		messagesType.value[message.uuid] = "normal";
 		return;
 	}
--- a/components/Modal/Invite.vue
+++ b/components/Modal/Invite.vue
@ -40,8 +40,7 @@ function copyInvite(type: "link" | "code") {
  if (!invite.value) return;

  if (type == "link") {
-	const runtimeConfig = useRuntimeConfig();
-    const inviteUrl = URL.parse(`invite/${invite.value}`, `${window.location.protocol}//${window.location.host}${runtimeConfig.app.baseURL}`);
+    const inviteUrl = URL.parse(`invite/${invite.value}`, `${window.location.protocol}//${window.location.host}`);
    if (inviteUrl) {
      navigator.clipboard.writeText(inviteUrl.href);
    }
--- a/components/Modal/ProfilePopup.vue
+++ b/components/Modal/ProfilePopup.vue
@ -214,21 +214,8 @@ function buttonEditProfile() {
 	
 	align-self: center;

-	width: 100%;
 	font-size: .8em;
 	font-weight: lighter;
-
-	white-space: pre-line;
-	line-height: 1;
-	max-height: 7em; /* 7 x 1 */
-
-	overflow-y: auto;
-	overflow-x: hidden;
-	scrollbar-width: none;
-}
-
-#about-me-text::-webkit-scrollbar {
-	display: none;
 }


--- a/components/Settings/AppSettings/Appearance.vue
+++ b/components/Settings/AppSettings/Appearance.vue
@ -2,45 +2,20 @@
  <div>
    <h1>Appearance</h1>
    
-    <h2>Themes</h2>
+    <p class="subtitle">THEMES</p>
    <div class="themes">
-      <p class="subtitle">STYLES</p>
-      <div class="styles">
-        <div v-for="style of styles" class="theme-preview-container">
-          <span class="theme-instance"
-              :title="style.displayName"
-              @click="changeTheme(StyleLayout.Style, style)">
-            <div class="theme-content-container">
-              <span class="style-background"
-                :style="{background:`linear-gradient(${style.previewGradient})`}"
-              ></span>
-              <span class="theme-title" :style="{color:`${style.complementaryColor}`}">
-                {{ style.displayName }}
+      <div v-for="theme of themes" class="theme-preview-container">
+        <span class="theme-preview"
+          :title="theme.displayName"
+          :style="{background:`linear-gradient(${theme.previewGradient})`}"
+          @click="changeTheme(theme.id, theme.themeUrl)"
+        >
+          <span class="theme-title" :style="{color:`${theme.complementaryColor}`}">
+            {{ theme.displayName }}
          </span>
-            </div>
        </span>
      </div>
    </div>
-      <p class="subtitle">LAYOUTS</p>
-      <div class="layouts">
-        <div v-for="layout of layouts" class="theme-preview-container">
-          <div class="theme-instance"
-              :title="layout.displayName"
-              @click="changeTheme(StyleLayout.Layout, layout)">
-            <div class="theme-content-container">
-              <span class="layout-background"
-                :style="{backgroundImage:`url(${layout.previewImageUrl})`}"
-              ></span>
-              <span class="theme-title" :style="{color:`${layout.complementaryColor}`}">
-                {{ layout.displayName }}
-              </span>
-              <!-- this breaks if it's a nuxtimg, i don't know why -->
-              <img class="layout-preview" :src="layout.previewImageUrl"></img>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>

    <!-- <p class="subtitle">Icons</p>
    <div class="icons">
@ -57,120 +32,39 @@
 <script lang="ts" setup>
 import RadioButtons from '~/components/UserInterface/RadioButtons.vue';
 import type { TimeFormat } from '~/types/settings';
-import { settingSave, settingsLoad } from '#imports';
+import loadPreferredTheme from '~/utils/loadPreferredTheme';
+import settingSave from '~/utils/settingSave';

 const runtimeConfig = useRuntimeConfig()
+const defaultThemes = runtimeConfig.public.defaultThemes
 const baseURL = runtimeConfig.app.baseURL;
-const styleFolder = `${baseURL}/themes/style`
-const layoutFolder = `${baseURL}/themes/layout`
-
 const timeFormatTextStrings = ["Auto", "12-Hour", "24-Hour"]

-enum StyleLayout {
-  Style,
-  Layout
-}
+const themes: Array<Theme> = []

 interface Theme {
+  id: string
  displayName: string
+  previewGradient: string
  complementaryColor: string
-  cssData: string
  themeUrl: string
-  previewGradient?: string
-  previewImageUrl?: string
 }

-async function parseTheme(url: string): Promise<Theme | void> {
-  const styleData: any = await $fetch(url)
-
-  if (typeof styleData != "string") {
-    return
+function changeTheme(id: string, url: string) {
+  settingSave("selectedThemeId", id)
+  loadPreferredTheme()
 }

-  const metadataMatch = styleData.match(/\/\*([\s\S]*?)\*\//);
-  if (!metadataMatch) {
-    alert(`Failed to fetch metadata for a theme, panicking`)
-    return
-  }
+async function fetchThemes() {
+  for (const theme of defaultThemes) {
+    const themeConfig = await $fetch(`${baseURL}themes/${theme}.json`) as Theme
+    themeConfig.id = theme

-  const commentContent = metadataMatch[0].trim().split("\n");
-  const cssData = styleData.substring(metadataMatch[0].length).trim();
-
-  let displayName: string | undefined
-  let complementaryColor: string | undefined
-  let previewGradient: string | undefined
-  let previewImageUrl: string | undefined
-
-  for (const line of commentContent) {
-    const lineArray = line.split("=")
-    if (lineArray.length === 2) {
-      switch (lineArray[0].trim()) {
-        case "displayName":
-          displayName = lineArray[1].trim()
-          break
-        case "complementaryColor":
-          complementaryColor = lineArray[1].trim()
-          break
-        case "previewGradient":
-          previewGradient = lineArray[1].trim()
-          break
-        case "previewImageUrl":
-          previewImageUrl = `${layoutFolder}/${lineArray[1].trim()}`
-          console.log(previewImageUrl)
-          break
-      }
+    themes.push(themeConfig)
  }
 }

-  console.log(displayName, complementaryColor, previewGradient, previewImageUrl, cssData)
-  if (!(displayName && complementaryColor && cssData && (previewGradient || previewImageUrl))) {
-    return
-  }
-
-  return {
-    displayName,
-    complementaryColor,
-    cssData,
-    themeUrl: url,
-    previewGradient,
-    previewImageUrl,
-  }
-}
-
-async function parseThemeLayout(
-  folder: string,
-  incomingThemeList: string[],
-  outputThemeList: Theme[]) {
-    for (const theme of incomingThemeList) {
-      const parsedThemeData = await parseTheme(`${folder}/${theme}`)
-      
-      if (parsedThemeData) {
-        outputThemeList.push(parsedThemeData)
-      }
-    }
-}
-
-const styles: Theme[] = [];
-const layouts: Theme[] = [];
-
-const styleList = await $fetch(`${styleFolder}/styles.json`)
-const layoutList = await $fetch(`${layoutFolder}/layouts.json`)
-
-if (Array.isArray(styleList)) {
-  await parseThemeLayout(styleFolder, styleList, styles)
-}
-if (Array.isArray(layoutList)) {
-  await parseThemeLayout(layoutFolder, layoutList, layouts)
-}
-
-function changeTheme(themeType: StyleLayout, theme: Theme) {
-  if (themeType == StyleLayout.Style) {
-    settingSave("selectedThemeStyle", theme.themeUrl)
-  } else {
-    settingSave("selectedThemeLayout", theme.themeUrl)
-  }
-  loadPreferredThemes()
-}
+await fetchThemes()

 async function onTimeFormatClicked(index: number) {
  let format: "auto" | "12" | "24" = "auto"
@ -190,89 +84,29 @@ async function onTimeFormatClicked(index: number) {

 <style scoped>
 .themes {
-  --instance-size: 5em;
-}
-.styles, .layouts {
  display: flex;
 }

 .theme-preview-container {
  margin: .5em;
-  width: var(--instance-size);
-  height: var(--instance-size);
+  width: 5em;
+  height: 5em;
 }

-.theme-instance {
-  width: var(--instance-size);
-  height: var(--instance-size);
+.theme-preview {
+  width: 5em;
+  height: 5em;
  border-radius: 100%;
  border: .1em solid var(--primary-color);

  display: inline-block;
+  text-align: center;
+  align-content: center;
  cursor: pointer;
 }

-.theme-content-container {
-  position: relative;
-
-  text-align: center;
-  align-content: center;
-}
-
-.style-background, .layout-background {
-  position: absolute;
-
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-
-  width: var(--instance-size);
-  height: var(--instance-size);
-
-  border-radius: 100%;
-}
-
-.layout-background {
-  background-size: cover;
-  background-repeat: no-repeat;
-  filter: brightness(35%);
-}
-
-.layout-preview {
-  position: absolute;
-  pointer-events: none;
-
-  border: 0 solid var(--primary-color);
-  transform: translate(0, calc(var(--instance-size) / 2));
-  transition: all 250ms;
-
-  height: 0;
-  width: calc((height / 9) * 16);
-  max-height: 40dvh;
-}
-
-.theme-instance:hover .layout-preview {
-  border: .1em solid var(--primary-color);
-  filter: drop-shadow(0 0 .2em var(--secondary-color));
-  transform: translate(3.5em, -4em);
-  
-  height: 40dvw;
-}
-
 .theme-title {
-  position: absolute;
-  
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  
-  width: 100%;
-  height: 100%;
-  
  font-size: .8em;
-  /* i CANNOT explain this line height calculation, but it works for a font size of .8em no matter what size the instances are */
-  line-height: calc(var(--instance-size) * 1.25); 
+  line-height: 5em; /* same height as the parent to centre it vertically */
 }
 </style>
--- a/components/Settings/UserSettings/Profile.vue
+++ b/components/Settings/UserSettings/Profile.vue
@ -15,11 +15,8 @@
        <label for="profile-pronouns-input" class="subtitle">PRONOUNS</label>
        <input id="profile-pronouns-input" class="profile-data-input" type="text" v-model="user.pronouns" placeholder="Enter pronouns" />
        <label for="profile-about-me-input" class="subtitle">ABOUT ME</label>
-        <div id="profile-about-me-input" class="profile-data-input profile-textarea-input"
-          placeholder="About Me" maxlength="240" wrap="soft" rows="8"
-          autocorrect="off" spellcheck="true" contenteditable="true"
-          @keyup="handleAboutMeKeyUp" ref="aboutMeInput">
-        </div>
+        <input id="profile-about-me-input" class="profile-data-input" type="text" v-model="user.about" placeholder="About me" />
+
        <Button style="margin-top: 2dvh" text="Save Changes" :callback="saveChanges"></Button>
      </div>

@ -45,7 +42,6 @@ import type { UserResponse } from '~/types/interfaces';
 let newPfpFile: File;
 const isCropPopupVisible = ref(false);
 const cropImageSrc = ref("")
-const aboutMeInput = ref<HTMLDivElement>()

 const { fetchUser } = useAuth();

@ -129,12 +125,6 @@ function handleCrop(blob: Blob, url: string) {
 function closeCropPopup() {
  isCropPopupVisible.value = false
 }
-
-function handleAboutMeKeyUp(event: KeyboardEvent) {
-  if (user && aboutMeInput.value) {
-    user.about = aboutMeInput.value.innerText
-  }
-}
 </script>

 <style scoped>
@ -149,9 +139,8 @@ function handleAboutMeKeyUp(event: KeyboardEvent) {

 .profile-data-input {
  min-width: 30dvw;
-  max-width: 30dvw;
  margin: 0.07dvh;
-  padding: .1em .7em;
+  padding: 0.1dvh 0.7dvw;
  height: 2.5em;
  font-size: 1em;
  border-radius: 8px;
@ -160,12 +149,6 @@ function handleAboutMeKeyUp(event: KeyboardEvent) {
  background-color: var(--accent-color);
 }

-.profile-textarea-input {
-  padding: .6em .7em;
-
-  height: fit-content;
-}
-
 #profile-popup {
  margin-left: 2dvw;
 }
--- a/components/User/UserEntry.vue
+++ b/components/User/UserEntry.vue
@ -2,9 +2,7 @@
    <NuxtLink class="user-item" :href="`/me/${user.uuid}`" tabindex="0">
        <Avatar :profile="props.user" class="user-avatar"/>

-        <span class="user-display-name" :style="`color: ${generateIrcColor(props.user.uuid)}`">
-            {{ getDisplayName(props.user) }}
-        </span>
+        <span class="user-display-name">{{ getDisplayName(props.user) }}</span>
 	</NuxtLink>
 </template>

--- a/components/User/UserPopup.vue
+++ b/components/User/UserPopup.vue
@ -12,7 +12,7 @@
        <span v-if="props.user.pronouns"> - {{ props.user.pronouns }}</span>
      </p>
      <div id="about-me" v-if="props.user.about">
-        {{ props.user.about.trim() }}
+        {{ props.user.about }}
      </div>
    </div>
  </div>
@ -84,12 +84,5 @@ const props = defineProps<{
  margin-top: 32px;
  padding: 16px;
  font-size: 16px;
-  
-  white-space: pre-line;
-  line-height: 1;
-  max-height: 7em; /* 7 x 1 */
-
-  overflow-y: auto;
-  overflow-x: hidden;
 }
 </style>
--- a/components/UserInterface/ContextMenu.vue
+++ b/components/UserInterface/ContextMenu.vue
@ -50,7 +50,7 @@ function runCallback(item: ContextMenuItem) {
 	height: 2rem;
 	width: 100%;
 	color: var(--text-color);
-	background-color: var(--popup-background-color);
+	background-color: var(--sidebar-highlighted-background-color);
 	border: none;
 	text-align: left;
 	padding-left: 1rem;
@ -58,7 +58,7 @@ function runCallback(item: ContextMenuItem) {
 }

 .context-menu-item:hover {
-	background-color: var(--popup-highlighted-background-color);
+	background-color: rgb(50, 50, 50);
 }

 .context-menu-item-danger {
--- a/components/UserInterface/MessageReply.vue
+++ b/components/UserInterface/MessageReply.vue
@ -58,7 +58,7 @@ function scrollToReply(e: MouseEvent) {
 		console.log("scrolling into view");
 		reply.scrollIntoView({ behavior: "smooth", block: "center" });
 		reply.style.transition = "background-color .3s";
-		reply.style.backgroundColor = "var(--chat-featured-message-color)";
+		reply.style.backgroundColor = "var(--primary-highlighted-color)";
 		setTimeout(() => {
 			reply.style.backgroundColor = "";
 		}, 1000);
--- a/components/UserInterface/ResizableSidebar.vue
+++ b/components/UserInterface/ResizableSidebar.vue
@ -34,7 +34,7 @@ const storedWidth = ref<string>();
 const contextMenu = useState<ContextMenuInterface>("contextMenu");

 const menuItems: ContextMenuItem[] = [
-	{ name: "Reset", type: "normal", callback: () => {
+	{ name: "Reset", callback: () => {
 		const defaultWidth = props.width ?? props.minWidth;
 		resizableSidebar.value!.style.width = defaultWidth;
 		if (props.localStorageName) {
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@ -30,6 +30,9 @@ export default defineNuxtConfig({
      messageGroupingMaxDifference: 300000,
      buildTimeString: new Date().toISOString(),
      gitHash: process.env.GIT_SHORT_REV || "N/A",
+      defaultThemes: [
+        "light", "ash", "dark", "rainbow-capitalism"
+      ]
    }
  },
  /* nitro: {
--- a/pages/servers/[serverId]/channels/[channelId].vue
+++ b/pages/servers/[serverId]/channels/[channelId].vue
@ -25,6 +25,7 @@
 			<div id="members-container">
 				<div id="members-list">
 					<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,6 +91,8 @@ onActivated(async () => {
 async function setArrayVariables() {
 	const membersRes = await fetchMembers(route.params.serverId as string);
 	members.value = membersRes.objects;
+	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`);
 	console.log("channels:", channels.value);
@ -98,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>
--- a/public/themes/style/ash.css
+++ b/public/themes/style/ash.css
@ -1,9 +1,3 @@
-/*
-displayName = Ash
-previewGradient = 45deg, #2f2e2d, #46423b
-complementaryColor = white
-*/
-
 :root {
 	--text-color: #f0e5e0;
 	--secondary-text-color: #e8e0db;
@ -12,18 +6,12 @@ complementaryColor = white

 	--chat-background-color: #2f2e2d;
    --chat-highlighted-background-color: #3f3b38;
-	--chat-important-background-color: #ffcf5f38;
-	--chat-important-highlighted-background-color: #ffa86f4f;
-	--chat-featured-message-color: #4f3f2f60;
-	--popup-background-color: #2f2828;
-	--popup-highlighted-background-color: #382f2f;
-
 	--sidebar-background-color: #3e3a37;
 	--sidebar-highlighted-background-color: #46423b;
 	--topbar-background-color: #3a3733;
 	--chatbox-background-color: #3a3733;

-    --padding-color: #4f4f4f;
+    --padding-color: #e0e0e0;

 	--primary-color: #f07028;
 	--primary-highlighted-color: #f28f4b;
@ -31,4 +19,11 @@ complementaryColor = white
 	--secondary-highlighted-color: #885830;
 	--accent-color: #a04b24;
 	--accent-highlighted-color: #b86038;
+
+	--sidebar-width: 2.5em;
+	--standard-radius: .5em;
+	--button-radius: .6em;
+	--guild-icon-radius: 20%;
+	--pfp-radius: 50%;
+	--preferred-font: Arial;
 }
--- a/public/themes/ash.json
+++ b/public/themes/ash.json
@ -0,0 +1,6 @@
+{
+	"displayName": "Ash",
+	"previewGradient": "45deg, #2f2e2d, #46423b",
+	"complementaryColor": "white",
+	"themeUrl": "ash.css"
+}
--- a/public/themes/style/dark.css
+++ b/public/themes/style/dark.css
@ -1,9 +1,3 @@
-/*
-displayName = Dark
-previewGradient = 45deg, #1f1e1d, #36322b
-complementaryColor = white
-*/
-
 :root {
 	--text-color: #f7eee8;
 	--secondary-text-color: #f0e8e4;
@ -12,12 +6,6 @@ complementaryColor = white

 	--chat-background-color: #1f1e1d;
    --chat-highlighted-background-color: #2f2b28;
-	--chat-important-background-color: #ffc44f2f;
-	--chat-important-highlighted-background-color: #ffa45f4a;
-	--chat-featured-message-color: #4f2f1f58;
-	--popup-background-color: #2f1f1f;
-	--popup-highlighted-background-color: #3f2f2f;
-
 	--sidebar-background-color: #2e2a27;
 	--sidebar-highlighted-background-color: #36322b;
 	--topbar-background-color: #2a2723;
@ -31,4 +19,14 @@ complementaryColor = white
 	--secondary-highlighted-color: #8f5b2c;
 	--accent-color: #b35719;
 	--accent-highlighted-color: #c76a2e;
+
+	--sidebar-icon-width: 2.5em;
+	--sidebar-icon-gap: .25em;
+	--sidebar-margin: .5em;
+	
+	--standard-radius: .5em;
+	--button-radius: .6em;
+	--guild-icon-radius: 15%;
+	--pfp-radius: 50%;
+	--preferred-font: Arial;
 }
--- a/public/themes/dark.json
+++ b/public/themes/dark.json
@ -0,0 +1,6 @@
+{
+	"displayName": "Dark",
+	"previewGradient": "45deg, #1f1e1d, #36322b",
+	"complementaryColor": "white",
+	"themeUrl": "dark.css"
+}
--- a/public/themes/style/description.css
+++ b/public/themes/style/description.css
@ -1,11 +1,4 @@
-/*
-displayName = Description
-previewGradient = 45deg, #ff8f8f, #8f8fff
-complementaryColor = black
-*/
-
 /* this is not a real theme, but rather a template for themes */
-
 :root {
 	--text-color: #161518;
 	--secondary-text-color: #2b2930;
@ -13,12 +6,6 @@ complementaryColor = black

    --chat-background-color: #80808000;
    --chat-highlighted-background-color: #ffffff20;
-	--chat-important-background-color: #ffc44f2f;
-	--chat-important-highlighted-background-color: #ffa45f4a;
-	--chat-featured-message-color: #4f2f1f58;
-	--popup-background-color: #2f1f1f;
-	--popup-highlighted-background-color: #3f2f2f;
-
 	--sidebar-background-color: #80808000;
 	--sidebar-highlighted-background-color: #ffffff20;
 	--topbar-background-color: #80808000;
@ -33,6 +20,12 @@ complementaryColor = black
    --accent-color: #ff218c80;
    --accent-highlighted-color: #df1b6f80;

+	--sidebar-width: 2.5em;
+	--standard-radius: .5em;
+	--button-radius: .6em;
+	--pfp-radius: 50%;
+	--preferred-font: Arial;
+
    --optional-body-background: ; /* background element for the body */
    --optional-chat-background: ; /* background element for the chat box */
 	--optional-topbar-background: ; /* background element for the topbar */
--- a/public/themes/layout/gorb.css
+++ b/public/themes/layout/gorb.css
@ -1,17 +0,0 @@
-/*
-displayName = Gorb
-previewImageUrl = gorb.jpg
-complementaryColor = white
-*/
-
-:root {
-	--sidebar-icon-width: 2.5em;
-	--sidebar-icon-gap: .25em;
-	--sidebar-margin: .5em;
-	
-	--standard-radius: .5em;
-	--button-radius: .6em;
-	--guild-icon-radius: 15%;
-	--pfp-radius: 50%;
-	--preferred-font: Arial;
-}
--- a/public/themes/layout/gorb.jpg
+++ b/public/themes/layout/gorb.jpg
--- a/public/themes/layout/layouts.json
+++ b/public/themes/layout/layouts.json
@ -1,3 +0,0 @@
-[
-	"gorb.css"
-]
--- a/public/themes/style/light.css
+++ b/public/themes/style/light.css
@ -1,9 +1,3 @@
-/*
-displayName = Light
-previewGradient = 45deg, #f0ebe8, #d4d0ca
-complementaryColor = black
-*/
-
 :root {
 	--text-color: #170f08;
 	--secondary-text-color: #2f2b28;
@ -12,12 +6,6 @@ complementaryColor = black

    --chat-background-color: #f0ebe8;
    --chat-highlighted-background-color: #e8e4e0;
-    --chat-important-background-color: #df5f0b26;
-    --chat-important-hightlighted-background-color: #df5f0b3d;
-    --chat-featured-message-color: #e8ac841f;
-    --popup-background-color: #e8e4e0;
-    --popup-highlighted-background-color: #dfdbd6;
-
 	--sidebar-background-color: #dbd8d4;
 	--sidebar-highlighted-background-color: #d4d0ca;
 	--topbar-background-color: #dfdbd6;
@ -31,4 +19,10 @@ complementaryColor = black
    --secondary-highlighted-color: #f8b68a;
    --accent-color: #e68b4e;
    --accent-highlighted-color: #f69254;
+
+	--sidebar-width: 2.5em;
+	--standard-radius: .5em;
+	--button-radius: .6em;
+	--pfp-radius: 50%;
+	--preferred-font: Arial;
 }
--- a/public/themes/light.json
+++ b/public/themes/light.json
@ -0,0 +1,6 @@
+{
+	"displayName": "Light",
+	"previewGradient": "45deg, #f0ebe8, #d4d0ca",
+	"complementaryColor": "black",
+	"themeUrl": "light.css"
+}
--- a/public/themes/style/rainbow-capitalism.css
+++ b/public/themes/style/rainbow-capitalism.css
@ -1,23 +1,11 @@
-/*
-displayName = Woke
-previewGradient = 45deg, #ed2224, #ed2224, #f35b22, #f99621, #f5c11e, #f1eb1b 27%, #f1eb1b, #f1eb1b 33%, #63c720, #0c9b49, #21878d, #3954a5, #61379b, #93288e, #93288e
-complementaryColor = white
-*/
-
 :root {
-	--text-color: #000000;
-	--secondary-text-color: #1f1f1f;
+	--text-color: #161518;
+	--secondary-text-color: #2b2930;
 	--reply-text-color: #969696;
 	--danger-text-color: #ff0000;

-    --chat-background-color: #b0b0b040;
+    --chat-background-color: #80808000;
    --chat-highlighted-background-color: #ffffff20;
-	--chat-important-background-color: #ff4f4f80;
-	--chat-important-highlighted-background-color: #ff6f6fa0;
-	--chat-featured-message-color: #4f8f4f80;
-	--popup-background-color: #80808080;
-	--popup-highlighted-background-color: #9f9f9f9f;
-
 	--sidebar-background-color: #80808000;
 	--sidebar-highlighted-background-color: #ffffff20;
 	--topbar-background-color: #80808000;
@ -32,6 +20,12 @@ complementaryColor = white
    --accent-color: #ff218c80;
    --accent-highlighted-color: #df1b6f80;

+	--sidebar-width: 2.5em;
+	--standard-radius: .5em;
+	--button-radius: .6em;
+	--pfp-radius: 50%;
+	--preferred-font: Arial;
+
    /* --optional-body-background: background */
    --optional-body-background: linear-gradient(45deg, #ed222480, #ed222480, #ed222480, #ed222480, #ed222480, #ed222480, #f35b2280, #f9962180, #f5c11e80, #f1eb1b80, #f1eb1b80, #f1eb1b80, #63c72080, #0c9b4980, #21878d80, #3954a580, #61379b80, #93288e80);
 	--optional-topbar-background: linear-gradient(-12.5deg, cyan, pink, white, pink, cyan);
--- a/public/themes/rainbow-capitalism.json
+++ b/public/themes/rainbow-capitalism.json
@ -0,0 +1,6 @@
+{
+	"displayName": "Woke",
+	"previewGradient": "45deg, #ed2224, #ed2224, #f35b22, #f99621, #f5c11e, #f1eb1b 27%, #f1eb1b, #f1eb1b 33%, #63c720, #0c9b49, #21878d, #3954a5, #61379b, #93288e, #93288e",
+	"complementaryColor": "white",
+	"themeUrl": "rainbow-capitalism.css"
+}
--- a/public/themes/style/styles.json
+++ b/public/themes/style/styles.json
@ -1,6 +0,0 @@
-[
-	"ash.css",
-	"dark.css",
-	"light.css",
-	"rainbow-capitalism.css"
-]
--- a/types/enums.ts
+++ b/types/enums.ts
@ -1,11 +0,0 @@
-export const enum Permission {
-	SendMessage = 1,
-	ManageChannel = 2,
-	ManageRole = 4,
-	CreateInvite = 8,
-	ManageInvite = 16,
-	ManageGuild = 32,
-	ManageMember = 64,
-	BanMember = 128,
-	KickMember = 256
-}
--- a/types/interfaces.ts
+++ b/types/interfaces.ts
@ -19,17 +19,16 @@ export interface GuildResponse {
    description: string | null,
    icon: string | null,
    owner_uuid: string,
-    roles: RoleResponse[],
+    roles: [],
    member_count: number
 }

 export interface GuildMemberResponse {
 	uuid: string,
 	nickname: string,
+	user_uuid: string,
 	guild_uuid: string,
-	is_owner: boolean,
-	user: UserResponse,
-	roles: RoleResponse[]
+	user: UserResponse
 }

 export interface GuildMembersResponse {
@ -53,7 +52,7 @@ export interface MessageResponse {
 	user_uuid: string,
 	message: string,
 	reply_to: string | null,
-	member: GuildMemberResponse,
+	user: UserResponse,
 }

 export interface InviteResponse {
--- a/types/props.ts
+++ b/types/props.ts
@ -1,9 +1,9 @@
-import type { GuildMemberResponse, MessageResponse, UserResponse } from "./interfaces";
+import type { MessageResponse, UserResponse } from "./interfaces";

 export interface MessageProps {
 	class?: string,
 	img?: string | null,
-	author: GuildMemberResponse
+	author: UserResponse
 	text: string,
 	timestamp: number,
 	format: "12" | "24",
--- a/types/settings.ts
+++ b/types/settings.ts
@ -1,7 +1,6 @@
 export interface ClientSettings {
+	selectedThemeId?: string, // the ID of the theme, not the URL, for example "dark"
 	timeFormat?: TimeFormat
-	selectedThemeStyle?: string // URL
-	selectedThemeLayout?: string // URL
 }

 export interface TimeFormat {
--- a/utils/hasPermission.ts
+++ b/utils/hasPermission.ts
@ -1,11 +0,0 @@
-import type { Permission } from "~/types/enums";
-import type { GuildMemberResponse } from "~/types/interfaces";
-
-export default (member: GuildMemberResponse, permission: Permission) => {
-	for (const role of member.roles) {
-		if (role.permissions & permission) {
-			return true;
-		}
-	}
-	return false;
-}
--- a/utils/loadPreferredTheme.ts
+++ b/utils/loadPreferredTheme.ts
@ -0,0 +1,28 @@
+let themeLinkElement: HTMLLinkElement | null;
+
+export default function loadPreferredTheme() {
+  const currentTheme = settingsLoad().selectedThemeId ?? "dark"
+
+  if (themeLinkElement) {
+    themeLinkElement.href = getThemeUrl(currentTheme);
+  } else {
+    // create the theme link if one doesn't already exist
+    useHead({
+      link: [{
+        id: "main-theme",
+        rel: "stylesheet",
+        href: getThemeUrl(currentTheme)
+      }]
+    })
+
+    themeLinkElement = document.getElementById('main-theme') as HTMLLinkElement;
+  }
+}
+
+function getThemeUrl(id: string): string {
+  const runtimeConfig = useRuntimeConfig()
+  const baseURL = runtimeConfig.app.baseURL;
+
+  // this should preferrably use version hash, but that's not implemented yet
+  return `${baseURL}themes/${id}.css?v=${runtimeConfig.public.buildTimeString}`
+}
--- a/utils/loadPreferredThemes.ts
+++ b/utils/loadPreferredThemes.ts
@ -1,52 +0,0 @@
-let styleLinkElement: HTMLLinkElement | null;
-let layoutLinkElement: HTMLLinkElement | null;
-
-
-export default () => {
-  const runtimeConfig = useRuntimeConfig()
-  const baseURL = runtimeConfig.app.baseURL;
-  
-  let currentStyle = settingsLoad().selectedThemeStyle ?? undefined
-  let currentLayout = settingsLoad().selectedThemeLayout ?? `${baseURL}themes/layout/gorb.css`
-
-  if (!currentStyle) {
-    if (prefersLight()) {
-      currentStyle = `${baseURL}themes/style/light.css`
-    } else {
-      currentStyle = `${baseURL}themes/style/dark.css`
-    }
-  }
-
-  if (styleLinkElement) {
-    styleLinkElement.href = currentStyle;
-  } else {
-    createStyleHead("style-theme", currentStyle)
-    styleLinkElement = document.getElementById('style-theme') as HTMLLinkElement;
-  }
-
-  if (layoutLinkElement) {
-    layoutLinkElement.href = currentLayout;
-  } else {
-    createStyleHead("style-layout", currentLayout)
-    layoutLinkElement = document.getElementById('style-layout') as HTMLLinkElement;
-  }
-}
-
-// create a new theme link if one doesn't already exist
-function createStyleHead(id: string, themeUrl: string) {
-  useHead({
-    link: [{
-      id: id,
-      rel: "stylesheet",
-      href: themeUrl
-    }]
-  })
-}
-
-function prefersLight(): boolean {
-  if (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches) {
-    return true
-  }
-
-  return false
-}
--- a/utils/replyToMessage.ts
+++ b/utils/replyToMessage.ts
@ -2,8 +2,6 @@ import { render } from "vue";
 import MessageReply from "~/components/UserInterface/MessageReply.vue";
 import type { MessageProps } from "~/types/props";

-const { getDisplayName } = useProfile()
-
 export default (element: HTMLDivElement, props: MessageProps) => {
 	console.log("element:", element);
 	const messageBox = document.getElementById("message-box") as HTMLDivElement;
Author	SHA1	Message	Date
SauceyRed	7d0294e808	wip: start work on members list placeholders All checks were successful ci/woodpecker/push/build-and-publish Pipeline was successful Details	2025-08-05 03:50:59 +02:00
SauceyRed	c465753111	feat: update members fetching to handle endpoint pagination update	2025-08-05 03:42:39 +02:00