.woodpecker/build-and-publish.yml

@@ -23,17 +23,3 @@ 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

app.vue

@@ -1,18 +1,14 @@
 <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;
@@ -52,6 +48,15 @@ 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>

components/Guild/MemberEntry.vue

@@ -1,25 +1,29 @@
 <template>
-    <div class="member-item" @click.prevent="toggleModalPopup" tabindex="0">
+    <div class="member-item" @click.prevent="createProfileModal(props.member)" 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
 }>();
 
-const modalPopupVisible = ref<boolean>(false);
-
-function toggleModalPopup() {
-    modalPopupVisible.value = !modalPopupVisible.value
+function createProfileModal(profile: GuildMemberResponse) {
+	const div = document.createElement("div");
+	const modal = h(ModalProfilePopup, {
+		profile: profile
+	});
+	
+	document.body.appendChild(div);
+	render(modal, div);
 }
+
 </script>
 
 <style>

components/Me/FriendsList.vue

@@ -26,7 +26,9 @@
 <script lang="ts" setup>
 const { fetchFriends } = useApi();
 
-const friends = sortUsers(await fetchFriends())
+const friends = await fetchFriends().then((response) => {
+	return response.sort((a, b) => getDisplayName(a).localeCompare(getDisplayName(b)))
+})
 
 const props = defineProps<{
     variant: string

components/Modal/ProfilePopup.vue

@@ -1,10 +1,8 @@
 <template>
 	<ModalBase :obscure="true">
-		<div id="profile-container">
-			<div id="profile-header">
-				<div id="header-mask"></div>
-				<Avatar :profile="props.profile" id="avatar"/>
-			</div>
+		<div id="vertical-container">
+			<span id="cover-background"></span>
+			<Avatar :profile="props.profile" id="pfp"/>
 		</div>
 	</ModalBase>
 </template>
@@ -20,43 +18,22 @@ const props = defineProps<ModalProps & {
 
 <style scoped>
 
-#profile-container { 
-	position: relative;
-	height: 75dvh;
-	width: 75dvw;
-
+#vertical-container {
 	display: flex;
 	flex-direction: column;
+
+	height: 75dvh;
+	width: 75dvw;
 }
 
-#profile-header {
-	flex-shrink: 0;
-	min-height: 9em;
+#cover-background {
 	width: 100%;
-}
-
-#header-mask {
-	display: relative;
-	width: 100%;
-	min-height: 7em;
-
-	z-index: 0;
+	min-height: 6em;
+	max-height: 6em;
 
 	background-color: var(--primary-color);
-	border-radius: var(--standard-radius) var(--standard-radius) 0 0; /* top left and top right */
+	/* top left and top right */
+	border-radius: var(--standard-radius) var(--standard-radius) 0 0;
 }
 
-#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>

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,8 +51,20 @@ interface Theme {
 }
 
 function changeTheme(id: string, url: string) {
+  if (themeLinkElement && themeLinkElement.getAttribute('href') === `${baseURL}themes/${url}`) {
+    return;
+  }
+
   settingSave("selectedThemeId", id)
-  loadPreferredTheme()
+
+  // 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}`;
 }
 
 async function fetchThemes() {

components/User/UserPopup.vue

@@ -21,6 +21,8 @@
 <script lang="ts" setup>
 import type { UserResponse } from '~/types/interfaces';
 
+const { fetchMembers } = useApi();
+
 const props = defineProps<{
 	user: UserResponse
 }>();

composables/api.ts

@@ -1,36 +1,24 @@
 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[]> {
-		return ensureIsArray(await fetchWithApi(`/guilds`));
+	async function fetchGuilds(): Promise<GuildResponse[] | undefined> {
+		return await fetchWithApi(`/guilds`);
 	}
 	
 	async function fetchGuild(guildId: string): Promise<GuildResponse | undefined> {
 		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`));
+	async function fetchChannels(guildId: string): Promise<ChannelResponse[] | undefined> {
+		return 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[]> {
-		return ensureIsArray(await fetchWithApi(`/guilds/${guildId}/members`));
+	async function fetchMembers(guildId: string): Promise<GuildMemberResponse[] | undefined> {
+		return await fetchWithApi(`/guilds/${guildId}/members`);
 	}
 
 	async function fetchMember(guildId: string, memberId: string): Promise<GuildMemberResponse | undefined> {
@@ -46,7 +34,12 @@ export const useApi = () => {
 	}
 	
 	async function fetchFriends(): Promise<UserResponse[]> {
-		return ensureIsArray(await fetchWithApi('/me/friends'));
+		const response = await fetchWithApi('/me/friends')
+		if (Array.isArray(response)) {
+			return response
+		} else {
+			return []
+		}
 	}
 
 	async function addFriend(username: string): Promise<void> {
@@ -97,7 +90,6 @@ export const useApi = () => {
 	return {
 		fetchGuilds,
 		fetchGuild,
-		fetchMyGuilds,
 		fetchChannels,
 		fetchChannel,
 		fetchMembers,

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 = await api.fetchMyGuilds();
+const guilds: GuildResponse[] | undefined = await fetchWithApi("/me/guilds");
 
 function createDropdown() {
 	const dropdown = h(GuildDropdown, { options });

middleware/server.ts

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

pages/servers/[serverId]/channels/[channelId].vue

@@ -64,7 +64,7 @@ onActivated(async () => {
 });
 
 async function setArrayVariables() {
-	members.value = sortMembers(await fetchMembers(route.params.serverId as string))
+	members.value = await fetchMembers(route.params.serverId as string);
 	const guildUrl = `guilds/${route.params.serverId}`;
 	channels.value = await fetchWithApi(`${guildUrl}/channels`);
 	console.log("channels:", channels.value);

utils/hashing.ts

@@ -1,4 +1,4 @@
-export default async (password: string) => {
+export async function hashPassword(password: string) {
   const encodedPass = new TextEncoder().encode(password);
   const hashBuffer = await crypto.subtle.digest("SHA-384", encodedPass);
   const hashArray = Array.from(new Uint8Array(hashBuffer));

utils/loadPreferredTheme.ts

@@ -1,28 +0,0 @@
-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}`
-}

utils/sortMembers.ts

@@ -1,7 +0,0 @@
-import type { GuildMemberResponse } from "~/types/interfaces";
-
-export default (members: GuildMemberResponse[]): GuildMemberResponse[] => {
-	return members.sort((a, b) => {
-		return getDisplayName(a.user, a).localeCompare(getDisplayName(b.user, b))
-	})
-}

utils/sortUsers.ts

@@ -1,7 +0,0 @@
-import type { UserResponse } from "~/types/interfaces";
-
-export default (users: UserResponse[]): UserResponse[] => {
-	return users.sort((a, b) => {
-		return getDisplayName(a).localeCompare(getDisplayName(b))
-	})
-}

utils/validateUsername.ts

@@ -1,3 +0,0 @@
-export default (username: string) => {
-  return /^[\w.-]+$/.test(username);
-}

utils/validation.ts

@@ -0,0 +1,3 @@
+export function validateUsername(username: string) {
+  return /^[\w.-]+$/.test(username);
+}