From 8a172db3f462182e5d381463833212fd36f9bc3d Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Wed, 16 Jul 2025 05:30:11 +0200
Subject: [PATCH 01/15] feat: refactor code to require refetching the theme
 whenever a new version releases

---
 app.vue                                       | 21 ++++++---------
 .../Settings/AppSettings/Appearance.vue       | 16 ++---------
 utils/loadPreferredTheme.ts                   | 27 +++++++++++++++++++
 3 files changed, 37 insertions(+), 27 deletions(-)
 create mode 100644 utils/loadPreferredTheme.ts

diff --git a/app.vue b/app.vue
index 6f6eae0..d7ea4c4 100644
--- a/app.vue
+++ b/app.vue
@@ -1,14 +1,18 @@
 <template>
-  <div>
-    <Banner v-if="banner" />
-    <NuxtPage :keepalive="true" />
-  </div>
+	<div>
+		<Banner v-if="banner" />
+		<NuxtPage :keepalive="true" />
+	</div>
 </template>
 
 <script lang="ts" setup>
+import loadPreferredTheme from '~/utils/loadPreferredTheme';
+
 const banner = useState("banner", () => false);
 
 onMounted(() => {
+	loadPreferredTheme()
+
 	document.removeEventListener("contextmenu", contextMenuHandler);
 	document.addEventListener("contextmenu", (e) => {
 		if (e.target instanceof Element && e.target.classList.contains("default-contextmenu")) return;
@@ -48,15 +52,6 @@ function contextMenuHandler(e: MouseEvent) {
 	//]);
 }
 
-const currentTheme = settingsLoad().selectedThemeId ?? "dark"
-const baseURL = useRuntimeConfig().app.baseURL;
-
-useHead({
-  link: [{
-		rel: "stylesheet",
-		href: `${baseURL}themes/${currentTheme}.css`
-	}]
-})
 </script>
 
 <style>
diff --git a/components/Settings/AppSettings/Appearance.vue b/components/Settings/AppSettings/Appearance.vue
index b81929f..579ccdd 100644
--- a/components/Settings/AppSettings/Appearance.vue
+++ b/components/Settings/AppSettings/Appearance.vue
@@ -32,13 +32,13 @@
 <script lang="ts" setup>
 import RadioButtons from '~/components/UserInterface/RadioButtons.vue';
 import type { TimeFormat } from '~/types/settings';
+import loadPreferredTheme from '~/utils/loadPreferredTheme';
 import settingSave from '~/utils/settingSave';
 
 const runtimeConfig = useRuntimeConfig()
 const defaultThemes = runtimeConfig.public.defaultThemes
 const baseURL = runtimeConfig.app.baseURL;
 const timeFormatTextStrings = ["Auto", "12-Hour", "24-Hour"]
-let themeLinkElement: HTMLLinkElement | null = null;
 
 const themes: Array<Theme> = []
 
@@ -51,20 +51,8 @@ interface Theme {
 }
 
 function changeTheme(id: string, url: string) {
-  if (themeLinkElement && themeLinkElement.getAttribute('href') === `${baseURL}themes/${url}`) {
-    return;
-  }
-
   settingSave("selectedThemeId", id)
-
-  // if the theme didn't originally load for some reason, create it
-  if (!themeLinkElement) {
-    themeLinkElement = document.createElement('link');
-    themeLinkElement.rel = 'stylesheet';
-    document.head.appendChild(themeLinkElement);
-  }
-
-  themeLinkElement.href = `${baseURL}themes/${url}`;
+  loadPreferredTheme()
 }
 
 async function fetchThemes() {
diff --git a/utils/loadPreferredTheme.ts b/utils/loadPreferredTheme.ts
new file mode 100644
index 0000000..2b25714
--- /dev/null
+++ b/utils/loadPreferredTheme.ts
@@ -0,0 +1,27 @@
+let themeLinkElement: HTMLLinkElement | null;
+
+export default function loadPreferredTheme() {
+  const runtimeConfig = useRuntimeConfig()
+  const baseURL = runtimeConfig.app.baseURL;
+  const currentTheme = settingsLoad().selectedThemeId ?? "dark"
+
+  if (themeLinkElement && themeLinkElement.getAttribute('href') === `${baseURL}themes/${currentTheme}.css`) {
+    return;
+  }
+
+  if (themeLinkElement) {
+    themeLinkElement.href = `${baseURL}themes/${currentTheme}.css`;
+  } else {
+    // create the theme link if one doesn't already exist
+    useHead({
+      link: [{
+        id: "main-theme",
+        rel: "stylesheet",
+        // this should preferrably use version hash, but that's not implemented yet
+        href: `${baseURL}themes/${currentTheme}.css?v=${runtimeConfig.public.buildTimeString}`
+      }]
+    })
+
+    themeLinkElement = document.getElementById('main-theme') as HTMLLinkElement;
+  }
+}
\ No newline at end of file

From 73606b6bc3f8fdbbf8a96e10f978388e4a54da2d Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Wed, 16 Jul 2025 05:35:56 +0200
Subject: [PATCH 02/15] fix: remove bad "caching" behaviour

---
 utils/loadPreferredTheme.ts | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/utils/loadPreferredTheme.ts b/utils/loadPreferredTheme.ts
index 2b25714..145f410 100644
--- a/utils/loadPreferredTheme.ts
+++ b/utils/loadPreferredTheme.ts
@@ -5,10 +5,6 @@ export default function loadPreferredTheme() {
   const baseURL = runtimeConfig.app.baseURL;
   const currentTheme = settingsLoad().selectedThemeId ?? "dark"
 
-  if (themeLinkElement && themeLinkElement.getAttribute('href') === `${baseURL}themes/${currentTheme}.css`) {
-    return;
-  }
-
   if (themeLinkElement) {
     themeLinkElement.href = `${baseURL}themes/${currentTheme}.css`;
   } else {

From 2ce09e7c7a3019d5526dccf61144cc0606832e33 Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Wed, 16 Jul 2025 05:37:44 +0200
Subject: [PATCH 03/15] fix: ensure both href theme updates result in the same
 url

---
 utils/loadPreferredTheme.ts | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/utils/loadPreferredTheme.ts b/utils/loadPreferredTheme.ts
index 145f410..6eb8099 100644
--- a/utils/loadPreferredTheme.ts
+++ b/utils/loadPreferredTheme.ts
@@ -1,23 +1,28 @@
 let themeLinkElement: HTMLLinkElement | null;
 
 export default function loadPreferredTheme() {
-  const runtimeConfig = useRuntimeConfig()
-  const baseURL = runtimeConfig.app.baseURL;
   const currentTheme = settingsLoad().selectedThemeId ?? "dark"
 
   if (themeLinkElement) {
-    themeLinkElement.href = `${baseURL}themes/${currentTheme}.css`;
+    themeLinkElement.href = getThemeUrl(currentTheme);
   } else {
     // create the theme link if one doesn't already exist
     useHead({
       link: [{
         id: "main-theme",
         rel: "stylesheet",
-        // this should preferrably use version hash, but that's not implemented yet
-        href: `${baseURL}themes/${currentTheme}.css?v=${runtimeConfig.public.buildTimeString}`
+        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}`
 }
\ No newline at end of file

From 56ccd61107b480d5668179fdc79907cb7870f337 Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Wed, 16 Jul 2025 10:44:23 +0200
Subject: [PATCH 04/15] style: ensure all api requests that return an array to
 return an empty array instead of undefined

---
 composables/api.ts | 27 +++++++++++++++------------
 1 file changed, 15 insertions(+), 12 deletions(-)

diff --git a/composables/api.ts b/composables/api.ts
index 48633e5..1b467a4 100644
--- a/composables/api.ts
+++ b/composables/api.ts
@@ -1,24 +1,32 @@
 import type { ChannelResponse, GuildMemberResponse, GuildResponse, MessageResponse, StatsResponse, UserResponse } from "~/types/interfaces";
 
+function ensureIsArray(list: any) {
+	if (Array.isArray(list)) {
+		return list
+	} else {
+		return []
+	}
+}
+
 export const useApi = () => {
-	async function fetchGuilds(): Promise<GuildResponse[] | undefined> {
-		return await fetchWithApi(`/guilds`);
+	async function fetchGuilds(): Promise<GuildResponse[]> {
+		return ensureIsArray(await fetchWithApi(`/guilds`));
 	}
 	
 	async function fetchGuild(guildId: string): Promise<GuildResponse | undefined> {
 		return await fetchWithApi(`/guilds/${guildId}`);
 	}
 
-	async function fetchChannels(guildId: string): Promise<ChannelResponse[] | undefined> {
-		return await fetchWithApi(`/guilds/${guildId}/channels`);
+	async function fetchChannels(guildId: string): Promise<ChannelResponse[]> {
+		return ensureIsArray(await fetchWithApi(`/guilds/${guildId}/channels`));
 	}
 
 	async function fetchChannel(channelId: string): Promise<ChannelResponse | undefined> {
 		return await fetchWithApi(`/channels/${channelId}`)
 	}
 
-	async function fetchMembers(guildId: string): Promise<GuildMemberResponse[] | undefined> {
-		return await fetchWithApi(`/guilds/${guildId}/members`);
+	async function fetchMembers(guildId: string): Promise<GuildMemberResponse[]> {
+		return ensureIsArray(await fetchWithApi(`/guilds/${guildId}/members`));
 	}
 
 	async function fetchMember(guildId: string, memberId: string): Promise<GuildMemberResponse | undefined> {
@@ -34,12 +42,7 @@ export const useApi = () => {
 	}
 	
 	async function fetchFriends(): Promise<UserResponse[]> {
-		const response = await fetchWithApi('/me/friends')
-		if (Array.isArray(response)) {
-			return response
-		} else {
-			return []
-		}
+		return ensureIsArray(await fetchWithApi('/me/friends'));
 	}
 
 	async function addFriend(username: string): Promise<void> {

From ea1f032ffc64d838bfaf4e80bb0c435c0e896acb Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Wed, 16 Jul 2025 10:47:03 +0200
Subject: [PATCH 05/15] feat: implemend fetchMyGuilds() api

---
 composables/api.ts | 5 +++++
 layouts/client.vue | 4 ++--
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/composables/api.ts b/composables/api.ts
index 1b467a4..220e98f 100644
--- a/composables/api.ts
+++ b/composables/api.ts
@@ -17,6 +17,10 @@ export const useApi = () => {
 		return await fetchWithApi(`/guilds/${guildId}`);
 	}
 
+	async function fetchMyGuilds(): Promise<GuildResponse[]> {
+		return ensureIsArray(await fetchWithApi(`/me/guilds`));
+	}
+
 	async function fetchChannels(guildId: string): Promise<ChannelResponse[]> {
 		return ensureIsArray(await fetchWithApi(`/guilds/${guildId}/channels`));
 	}
@@ -85,6 +89,7 @@ export const useApi = () => {
 	return {
 		fetchGuilds,
 		fetchGuild,
+		fetchMyGuilds,
 		fetchChannels,
 		fetchChannel,
 		fetchMembers,
diff --git a/layouts/client.vue b/layouts/client.vue
index 46bdf89..26a5ac9 100644
--- a/layouts/client.vue
+++ b/layouts/client.vue
@@ -95,7 +95,7 @@ const options = [
 						if (invite.length == 6) {
 							try {
 								const joinedGuild = await api.joinGuild(invite);
-								guilds?.push(joinedGuild);
+								guilds.push(joinedGuild);
 								return await navigateTo(`/servers/${joinedGuild.uuid}`);
 							} catch (error) {
 								alert(`Couldn't use invite: ${error}`);
@@ -151,7 +151,7 @@ const options = [
 	}
 ];
 
-const guilds: GuildResponse[] | undefined = await fetchWithApi("/me/guilds");
+const guilds = await api.fetchMyGuilds();
 
 function createDropdown() {
 	const dropdown = h(GuildDropdown, { options });

From 100d5e80eb4a375ba1941b270d2d266149db11d4 Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Wed, 16 Jul 2025 10:47:13 +0200
Subject: [PATCH 06/15] style: remove unused import

---
 components/User/UserPopup.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/components/User/UserPopup.vue b/components/User/UserPopup.vue
index 86b5a48..6674c9e 100644
--- a/components/User/UserPopup.vue
+++ b/components/User/UserPopup.vue
@@ -21,8 +21,6 @@
 <script lang="ts" setup>
 import type { UserResponse } from '~/types/interfaces';
 
-const { fetchMembers } = useApi();
-
 const props = defineProps<{
 	user: UserResponse
 }>();

From cbe50dd028334f65214fb5370027a7169709e2da Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Wed, 16 Jul 2025 10:47:50 +0200
Subject: [PATCH 07/15] fix: clean code to account for guaranteed array returns

---
 middleware/server.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/middleware/server.ts b/middleware/server.ts
index 9f575b0..48bd6a2 100644
--- a/middleware/server.ts
+++ b/middleware/server.ts
@@ -5,10 +5,10 @@ export default defineNuxtRouteMiddleware(async (to, from) => {
 
 	const guildId = to.params.serverId as string;
 
-	const channels: ChannelResponse[] | undefined = await fetchChannels(guildId);
+	const channels: ChannelResponse[] = await fetchChannels(guildId);
 	console.log("channels:", channels);
 
-	if (channels && channels.length > 0) {
+	if (channels.length > 0) {
 		console.log("wah");
 		return await navigateTo(`/servers/${guildId}/channels/${channels[0].uuid}`, { replace: true });
 	}

From 4229682d69530742f194d347a20020e1162df609 Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Wed, 16 Jul 2025 10:48:02 +0200
Subject: [PATCH 08/15] feat: sort member's list alphabetically

---
 pages/servers/[serverId]/channels/[channelId].vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/pages/servers/[serverId]/channels/[channelId].vue b/pages/servers/[serverId]/channels/[channelId].vue
index 8915c72..dbca349 100644
--- a/pages/servers/[serverId]/channels/[channelId].vue
+++ b/pages/servers/[serverId]/channels/[channelId].vue
@@ -64,7 +64,9 @@ onActivated(async () => {
 });
 
 async function setArrayVariables() {
-	members.value = await fetchMembers(route.params.serverId as string);
+	members.value = await fetchMembers(route.params.serverId as string).then((response) => {
+		return response.sort((a, b) => getDisplayName(a.user, a).localeCompare(getDisplayName(b.user, b)))
+	});
 	const guildUrl = `guilds/${route.params.serverId}`;
 	channels.value = await fetchWithApi(`${guildUrl}/channels`);
 	console.log("channels:", channels.value);

From f6ede67c26bfcbc0cfa0164e2f1a31bb0460b22e Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Wed, 16 Jul 2025 10:59:00 +0200
Subject: [PATCH 09/15] style: seperate out sortUsers and sortMembers

---
 components/Me/FriendsList.vue                     | 4 +---
 pages/servers/[serverId]/channels/[channelId].vue | 4 +---
 utils/sortMembers.ts                              | 7 +++++++
 utils/sortUsers.ts                                | 7 +++++++
 4 files changed, 16 insertions(+), 6 deletions(-)
 create mode 100644 utils/sortMembers.ts
 create mode 100644 utils/sortUsers.ts

diff --git a/components/Me/FriendsList.vue b/components/Me/FriendsList.vue
index 654957d..0a1481e 100644
--- a/components/Me/FriendsList.vue
+++ b/components/Me/FriendsList.vue
@@ -26,9 +26,7 @@
 <script lang="ts" setup>
 const { fetchFriends } = useApi();
 
-const friends = await fetchFriends().then((response) => {
-	return response.sort((a, b) => getDisplayName(a).localeCompare(getDisplayName(b)))
-})
+const friends = sortUsers(await fetchFriends())
 
 const props = defineProps<{
     variant: string
diff --git a/pages/servers/[serverId]/channels/[channelId].vue b/pages/servers/[serverId]/channels/[channelId].vue
index dbca349..5e39ef4 100644
--- a/pages/servers/[serverId]/channels/[channelId].vue
+++ b/pages/servers/[serverId]/channels/[channelId].vue
@@ -64,9 +64,7 @@ onActivated(async () => {
 });
 
 async function setArrayVariables() {
-	members.value = await fetchMembers(route.params.serverId as string).then((response) => {
-		return response.sort((a, b) => getDisplayName(a.user, a).localeCompare(getDisplayName(b.user, b)))
-	});
+	members.value = sortMembers(await fetchMembers(route.params.serverId as string))
 	const guildUrl = `guilds/${route.params.serverId}`;
 	channels.value = await fetchWithApi(`${guildUrl}/channels`);
 	console.log("channels:", channels.value);
diff --git a/utils/sortMembers.ts b/utils/sortMembers.ts
new file mode 100644
index 0000000..fba862c
--- /dev/null
+++ b/utils/sortMembers.ts
@@ -0,0 +1,7 @@
+import type { GuildMemberResponse } from "~/types/interfaces";
+
+export default function sortMembers(members: GuildMemberResponse[]): GuildMemberResponse[] {
+	return members.sort((a, b) => {
+		return getDisplayName(a.user, a).localeCompare(getDisplayName(b.user, b))
+	})
+}
\ No newline at end of file
diff --git a/utils/sortUsers.ts b/utils/sortUsers.ts
new file mode 100644
index 0000000..8be8613
--- /dev/null
+++ b/utils/sortUsers.ts
@@ -0,0 +1,7 @@
+import type { UserResponse } from "~/types/interfaces";
+
+export default function sortUsers(users: UserResponse[]): UserResponse[] {
+	return users.sort((a, b) => {
+		return getDisplayName(a).localeCompare(getDisplayName(b))
+	})
+}
\ No newline at end of file

From 0c4d42f3c1307081e51d0b5c2d7068dc2f62d559 Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Wed, 16 Jul 2025 11:27:35 +0200
Subject: [PATCH 10/15] style: remove function names from implicit util
 functions

---
 utils/getDisplayName.ts | 2 +-
 utils/hashing.ts        | 2 +-
 utils/sortMembers.ts    | 2 +-
 utils/sortUsers.ts      | 2 +-
 utils/validation.ts     | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/utils/getDisplayName.ts b/utils/getDisplayName.ts
index e712555..015edbc 100644
--- a/utils/getDisplayName.ts
+++ b/utils/getDisplayName.ts
@@ -1,6 +1,6 @@
 import type { GuildMemberResponse, UserResponse } from "~/types/interfaces";
 
-export function getDisplayName(user: UserResponse, member?: GuildMemberResponse): string {
+export default (user: UserResponse, member?: GuildMemberResponse): string => {
 	if (member?.nickname) return member.nickname
 	if (user.display_name) return user.display_name
 	return user.username
diff --git a/utils/hashing.ts b/utils/hashing.ts
index 847a9dc..d87af14 100644
--- a/utils/hashing.ts
+++ b/utils/hashing.ts
@@ -1,4 +1,4 @@
-export async function hashPassword(password: string) {
+export default async (password: string) => {
   const encodedPass = new TextEncoder().encode(password);
   const hashBuffer = await crypto.subtle.digest("SHA-384", encodedPass);
   const hashArray = Array.from(new Uint8Array(hashBuffer));
diff --git a/utils/sortMembers.ts b/utils/sortMembers.ts
index fba862c..87a1a2a 100644
--- a/utils/sortMembers.ts
+++ b/utils/sortMembers.ts
@@ -1,6 +1,6 @@
 import type { GuildMemberResponse } from "~/types/interfaces";
 
-export default function sortMembers(members: GuildMemberResponse[]): GuildMemberResponse[] {
+export default (members: GuildMemberResponse[]): GuildMemberResponse[] => {
 	return members.sort((a, b) => {
 		return getDisplayName(a.user, a).localeCompare(getDisplayName(b.user, b))
 	})
diff --git a/utils/sortUsers.ts b/utils/sortUsers.ts
index 8be8613..8708366 100644
--- a/utils/sortUsers.ts
+++ b/utils/sortUsers.ts
@@ -1,6 +1,6 @@
 import type { UserResponse } from "~/types/interfaces";
 
-export default function sortUsers(users: UserResponse[]): UserResponse[] {
+export default (users: UserResponse[]): UserResponse[] => {
 	return users.sort((a, b) => {
 		return getDisplayName(a).localeCompare(getDisplayName(b))
 	})
diff --git a/utils/validation.ts b/utils/validation.ts
index 48e13ef..9066df5 100644
--- a/utils/validation.ts
+++ b/utils/validation.ts
@@ -1,3 +1,3 @@
-export function validateUsername(username: string) {
+export default (username: string) => {
   return /^[\w.-]+$/.test(username);
 }
\ No newline at end of file

From 883ec0354d690984566ae6c72d813f7a2fc1ce4e Mon Sep 17 00:00:00 2001
From: Radical <radical@radical.fun>
Date: Thu, 17 Jul 2025 15:55:02 +0200
Subject: [PATCH 11/15] ci: add staging images

---
 .woodpecker/build-and-publish.yml | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/.woodpecker/build-and-publish.yml b/.woodpecker/build-and-publish.yml
index 98c7614..6001a00 100644
--- a/.woodpecker/build-and-publish.yml
+++ b/.woodpecker/build-and-publish.yml
@@ -23,3 +23,17 @@ steps:
     when:
     - branch: main
       event: push
+
+  - name: container-build-and-publish (staging)
+    image: docker
+    commands:
+      - docker login --username radical --password $PASSWORD git.gorb.app
+      - docker buildx build --platform linux/amd64,linux/arm64 --rm --push -t git.gorb.app/gorb/frontend:staging .
+    environment:
+      PASSWORD:
+        from_secret: docker_password
+    volumes:
+      - /var/run/podman/podman.sock:/var/run/docker.sock
+    when:
+    - branch: staging
+      event: push

From 8d53b2765ff6a3cb0d068b4775c14126a6f20d0d Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Fri, 18 Jul 2025 03:49:20 +0200
Subject: [PATCH 12/15] fix: hashPassword calls not working due to util file
 not matching function call name

---
 utils/{hashing.ts => hashPassword.ts} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename utils/{hashing.ts => hashPassword.ts} (100%)

diff --git a/utils/hashing.ts b/utils/hashPassword.ts
similarity index 100%
rename from utils/hashing.ts
rename to utils/hashPassword.ts

From 8ffe3aa738737d43fb6f04d1a27441392803ef91 Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Fri, 18 Jul 2025 03:49:29 +0200
Subject: [PATCH 13/15] feat: rename validation util file to validateUsername

---
 utils/{validation.ts => validateUsername.ts} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename utils/{validation.ts => validateUsername.ts} (100%)

diff --git a/utils/validation.ts b/utils/validateUsername.ts
similarity index 100%
rename from utils/validation.ts
rename to utils/validateUsername.ts

From 771c0699a773d59b0c08cc312d37251ef3c264b7 Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Fri, 18 Jul 2025 07:34:13 +0200
Subject: [PATCH 14/15] Merge remote-tracking branch 'origin/main' into
 sort-members-list

---
 .woodpecker/build-and-publish.yml   | 14 +++++
 components/UserInterface/Button.vue |  8 ++-
 composables/api.ts                  | 12 +++-
 layouts/auth.vue                    |  8 ++-
 middleware/auth.global.ts           |  2 +-
 pages/login.vue                     |  3 +-
 pages/recover.vue                   | 89 +++++++++++++++++++++++++++++
 pages/register.vue                  |  1 +
 pages/reset-password.vue            | 56 ++++++++++++++++++
 9 files changed, 186 insertions(+), 7 deletions(-)
 create mode 100644 pages/recover.vue
 create mode 100644 pages/reset-password.vue

diff --git a/.woodpecker/build-and-publish.yml b/.woodpecker/build-and-publish.yml
index 98c7614..6001a00 100644
--- a/.woodpecker/build-and-publish.yml
+++ b/.woodpecker/build-and-publish.yml
@@ -23,3 +23,17 @@ steps:
     when:
     - branch: main
       event: push
+
+  - name: container-build-and-publish (staging)
+    image: docker
+    commands:
+      - docker login --username radical --password $PASSWORD git.gorb.app
+      - docker buildx build --platform linux/amd64,linux/arm64 --rm --push -t git.gorb.app/gorb/frontend:staging .
+    environment:
+      PASSWORD:
+        from_secret: docker_password
+    volumes:
+      - /var/run/podman/podman.sock:/var/run/docker.sock
+    when:
+    - branch: staging
+      event: push
diff --git a/components/UserInterface/Button.vue b/components/UserInterface/Button.vue
index 66706de..467b65e 100644
--- a/components/UserInterface/Button.vue
+++ b/components/UserInterface/Button.vue
@@ -1,14 +1,14 @@
 <template>
-	<div @click="props.callback()" class="button" :class="props.variant + '-button'">
+	<button @click="props.callback ? props.callback() : null" class="button" :class="props.variant + '-button'">
 		{{ props.text }}
-	</div>
+	</button>
 </template>
 
 <script lang="ts" setup>
 
 const props = defineProps<{
 	text: string,
-	callback: CallableFunction,
+	callback?: CallableFunction,
 	variant?: "normal" | "scary" | "neutral",
 }>();
 
@@ -28,6 +28,8 @@ const props = defineProps<{
 	border-radius: 0.7rem;
 	text-decoration: none;
 	display: inline-block;
+
+	border: none;
 }
 
 .button:hover {
diff --git a/composables/api.ts b/composables/api.ts
index 220e98f..eff2c73 100644
--- a/composables/api.ts
+++ b/composables/api.ts
@@ -86,6 +86,14 @@ export const useApi = () => {
 		await fetchWithApi("/auth/verify-email", { method: "POST", body: { email } });
 	}
 
+	async function sendPasswordResetEmail(identifier: string): Promise<void> {
+		await fetchWithApi("/auth/reset-password", { method: "GET", query: { identifier } });
+	}
+
+	async function resetPassword(password: string, token: string) {
+		await fetchWithApi("/auth/reset-password", { method: "POST", body: { password, token } });
+	}
+
 	return {
 		fetchGuilds,
 		fetchGuild,
@@ -105,6 +113,8 @@ export const useApi = () => {
 		joinGuild,
 		createChannel,
 		fetchInstanceStats,
-		sendVerificationEmail
+		sendVerificationEmail,
+		sendPasswordResetEmail,
+		resetPassword
 	}
 }
diff --git a/layouts/auth.vue b/layouts/auth.vue
index 95eca49..7d21f00 100644
--- a/layouts/auth.vue
+++ b/layouts/auth.vue
@@ -18,6 +18,7 @@
 			</div>
 			<div v-else id="auth-form-container">
 				<slot />
+				<div v-if="!['/recover', '/reset-password'].includes(route.path)">Forgot password? Recover <NuxtLink href="/recover">here</NuxtLink>!</div>
 			</div>
 			<div v-if="instanceUrl">
 				Instance URL is set to <span style="color: var(--primary-color);">{{ instanceUrl }}</span>
@@ -36,7 +37,11 @@ const apiVersion = useRuntimeConfig().public.apiVersion;
 const apiBase = useCookie("api_base");
 const registrationEnabled = useState("registrationEnabled", () => true);
 
-const auth = useAuth();
+const route = useRoute();
+
+const query = route.query as Record<string, string>;
+const searchParams = new URLSearchParams(query);
+searchParams.delete("token");
 
 onMounted(async () => {
 	instanceUrl.value = useCookie("instance_url").value;
@@ -111,6 +116,7 @@ const form = reactive({
 #auth-form-container form {
 	display: flex;
 	flex-direction: column;
+	align-items: center;
 	text-align: left;
 	margin-top: 10dvh;
 	gap: 1em;
diff --git a/middleware/auth.global.ts b/middleware/auth.global.ts
index c0da664..e6d5128 100644
--- a/middleware/auth.global.ts
+++ b/middleware/auth.global.ts
@@ -16,7 +16,7 @@ export default defineNuxtRouteMiddleware(async (to, from) => {
 		}
 	}
 
-	if (["/login", "/register"].includes(to.path) && !Object.keys(to.query).includes("special")) {
+	if (["/login", "/register", "/recover", "/reset-password"].includes(to.path) && !Object.keys(to.query).includes("special")) {
 		console.log("path is login or register");
 		const apiBase = useCookie("api_base");
 		console.log("apiBase gotten:", apiBase.value);
diff --git a/pages/login.vue b/pages/login.vue
index 6dd3c74..8aba29b 100644
--- a/pages/login.vue
+++ b/pages/login.vue
@@ -36,6 +36,7 @@ const form = reactive({
 
 const query = useRoute().query as Record<string, string>;
 const searchParams = new URLSearchParams(query);
+searchParams.delete("token");
 
 const registrationEnabled = ref<boolean>(true);
 const apiBase = useCookie("api_base");
@@ -48,7 +49,7 @@ if (apiBase.value) {
 	}
 }
 
-const registerUrl = `/register?${searchParams}`
+const registerUrl = `/register?${searchParams}`;
 
 const { login } = useAuth();
 
diff --git a/pages/recover.vue b/pages/recover.vue
new file mode 100644
index 0000000..71ce217
--- /dev/null
+++ b/pages/recover.vue
@@ -0,0 +1,89 @@
+<template>
+  <NuxtLayout name="auth">
+    <div v-if="errorValue">{{ errorValue }}</div>
+      <form v-if="!emailFormSent" @submit.prevent="sendEmail">
+        <div>
+          <label for="identifier">Email or username</label>
+            <br>
+          <input type="text" name="identifier" id="identifier" v-model="emailForm.identifier">
+        </div>
+        <div>
+          <Button type="submit" text="Send email" variant="normal" />
+        </div>
+      </form>
+      <div v-else>
+        If an account with that username or email exists, an email will be sent to it shortly.
+      </div>
+    <div v-if="registrationEnabled">
+      Don't have an account? <NuxtLink :href="registerUrl">Register</NuxtLink> one!
+    </div>
+    <div>
+      Already have an account? <NuxtLink :href="loginUrl">Log in</NuxtLink>!
+    </div>
+  </NuxtLayout>
+</template>
+
+<script lang="ts" setup>
+import Button from '~/components/UserInterface/Button.vue';
+
+const emailForm = reactive({
+  identifier: ""
+});
+
+const emailFormSent = ref(false);
+
+const passwordForm = reactive({
+  password: ""
+});
+
+const errorValue = ref<string>();
+
+const registrationEnabled = ref<boolean>(true);
+const apiBase = useCookie("api_base");
+
+const query = useRoute().query as Record<string, string>;
+const searchParams = new URLSearchParams(query);
+
+const token = ref(searchParams.get("token"))
+searchParams.delete("token");
+const { resetPassword } = useApi();
+
+const registerUrl = `/register?${searchParams}`;
+const loginUrl = `/login?${searchParams}`;
+
+if (apiBase.value) {
+	console.log("apiBase:", apiBase.value);
+	const stats = await useApi().fetchInstanceStats(apiBase.value);
+	if (stats) {
+		registrationEnabled.value = stats.registration_enabled;
+	}
+}
+
+const { sendPasswordResetEmail } = useApi();
+
+async function sendEmail() {
+  try {
+    await sendPasswordResetEmail(emailForm.identifier);
+    emailFormSent.value = true;
+  } catch (error) {
+    errorValue.value = (error as any).toString();
+  }
+}
+
+async function sendPassword() {
+  try {
+    console.log("pass:", passwordForm.password);
+    const hashedPass = await hashPassword(passwordForm.password)
+    console.log("hashed pass:", hashedPass);
+    await resetPassword(hashedPass, token.value!);
+    return await navigateTo(`/login?${searchParams}`);
+  } catch (error) {
+    errorValue.value = (error as any).toString();
+  }
+}
+
+</script>
+
+<style>
+
+</style>
\ No newline at end of file
diff --git a/pages/register.vue b/pages/register.vue
index 708fed0..36bdb53 100644
--- a/pages/register.vue
+++ b/pages/register.vue
@@ -86,6 +86,7 @@ const auth = useAuth();
 const loggedIn = ref(await auth.getUser());
 
 const query = new URLSearchParams(useRoute().query as Record<string, string>);
+query.delete("token");
 
 const user = await useAuth().getUser();
 
diff --git a/pages/reset-password.vue b/pages/reset-password.vue
new file mode 100644
index 0000000..8f869c4
--- /dev/null
+++ b/pages/reset-password.vue
@@ -0,0 +1,56 @@
+<template>
+  <NuxtLayout name="auth">
+    <div v-if="errorValue">{{ errorValue }}</div>
+    <form @submit.prevent="sendPassword">
+      <div>
+        <label for="password">Password</label>
+        <br>
+        <input type="password" name="password" id="password" v-model="passwordForm.password">
+      </div>
+      <div>
+        <Button type="submit" text="Submit" variant="normal" />
+      </div>
+    </form>
+	<div>
+	  Already have an account? <NuxtLink :href="loginUrl">Log in</NuxtLink>!
+    </div>
+  </NuxtLayout>
+</template>
+
+<script lang="ts" setup>
+import Button from '~/components/UserInterface/Button.vue';
+
+const query = useRoute().query as Record<string, string>;
+const searchParams = new URLSearchParams(query);
+
+const loginUrl = `/login?${searchParams}`;
+
+const token = ref(searchParams.get("token"))
+
+if (!token.value) await navigateTo("/login");
+
+const passwordForm = reactive({
+  password: ""
+});
+
+const errorValue = ref<string>();
+
+const { resetPassword } = useApi();
+
+async function sendPassword() {
+  try {
+    console.log("pass:", passwordForm.password);
+    const hashedPass = await hashPassword(passwordForm.password)
+    console.log("hashed pass:", hashedPass);
+    await resetPassword(hashedPass, token.value!);
+    return await navigateTo("/login?");
+  } catch (error) {
+    errorValue.value = (error as any).toString();
+  }
+}
+
+</script>
+
+<style>
+
+</style>
\ No newline at end of file

From 9d69dac77ab0ed86754c6aafecf2d484217f3c77 Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Fri, 18 Jul 2025 11:00:25 +0200
Subject: [PATCH 15/15] feat: manage to get the popup to render with correct
 positions

---
 components/Guild/MemberEntry.vue  | 18 +++++-------
 components/Modal/ProfilePopup.vue | 47 +++++++++++++++++++++++--------
 2 files changed, 42 insertions(+), 23 deletions(-)

diff --git a/components/Guild/MemberEntry.vue b/components/Guild/MemberEntry.vue
index 1562ee5..4827cb4 100644
--- a/components/Guild/MemberEntry.vue
+++ b/components/Guild/MemberEntry.vue
@@ -1,29 +1,25 @@
 <template>
-    <div class="member-item" @click.prevent="createProfileModal(props.member)" tabindex="0">
+    <div class="member-item" @click.prevent="toggleModalPopup" tabindex="0">
         <Avatar :profile="props.member" class="member-avatar"/>
         <span class="member-display-name">{{ getDisplayName(props.member) }}</span>
     </div>
+    <ModalProfilePopup v-if="modalPopupVisible"
+        :profile="props.member"/>
 </template>
 
 <script lang="ts" setup>
 import { ModalProfilePopup } from '#components';
-import { render } from 'vue';
 import type { GuildMemberResponse } from '~/types/interfaces';
 
 const props = defineProps<{
     member: GuildMemberResponse
 }>();
 
-function createProfileModal(profile: GuildMemberResponse) {
-	const div = document.createElement("div");
-	const modal = h(ModalProfilePopup, {
-		profile: profile
-	});
-	
-	document.body.appendChild(div);
-	render(modal, div);
-}
+const modalPopupVisible = ref<boolean>(false);
 
+function toggleModalPopup() {
+    modalPopupVisible.value = !modalPopupVisible.value
+}
 </script>
 
 <style>
diff --git a/components/Modal/ProfilePopup.vue b/components/Modal/ProfilePopup.vue
index 062412a..1708c2b 100644
--- a/components/Modal/ProfilePopup.vue
+++ b/components/Modal/ProfilePopup.vue
@@ -1,8 +1,10 @@
 <template>
 	<ModalBase :obscure="true">
-		<div id="vertical-container">
-			<span id="cover-background"></span>
-			<Avatar :profile="props.profile" id="pfp"/>
+		<div id="profile-container">
+			<div id="profile-header">
+				<div id="header-mask"></div>
+				<Avatar :profile="props.profile" id="avatar"/>
+			</div>
 		</div>
 	</ModalBase>
 </template>
@@ -18,22 +20,43 @@ const props = defineProps<ModalProps & {
 
 <style scoped>
 
-#vertical-container {
-	display: flex;
-	flex-direction: column;
-
+#profile-container { 
+	position: relative;
 	height: 75dvh;
 	width: 75dvw;
+
+	display: flex;
+	flex-direction: column;
 }
 
-#cover-background {
+#profile-header {
+	flex-shrink: 0;
+	min-height: 9em;
 	width: 100%;
-	min-height: 6em;
-	max-height: 6em;
+}
+
+#header-mask {
+	display: relative;
+	width: 100%;
+	min-height: 7em;
+
+	z-index: 0;
 
 	background-color: var(--primary-color);
-	/* top left and top right */
-	border-radius: var(--standard-radius) var(--standard-radius) 0 0;
+	border-radius: var(--standard-radius) var(--standard-radius) 0 0; /* top left and top right */
 }
 
+#avatar {
+	display: block;
+	position: absolute;
+	left: 5.5em;
+	top: 3.5em;
+
+	z-index: 1;
+
+	width: 7em;
+	height: 7em;
+
+	border: .375em solid var(--accent-color);
+}
 </style>
\ No newline at end of file