Merge remote-tracking branch 'origin/main' into profile-modal

Reviewed-on: #45
Reviewed-by: SauceyRed <saucey@saucey.red>

.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

app.vue

@@ -6,9 +6,13 @@
 </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>

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 modalPopupVisible = ref<boolean>(false);
-	const div = document.createElement("div");
-	const modal = h(ModalProfilePopup, {
-		profile: profile
-	});
 
-	document.body.appendChild(div);
+function toggleModalPopup() {
-	render(modal, div);
+    modalPopupVisible.value = !modalPopupVisible.value
 }
-
 </script>
 
 <style>

components/Me/FriendsList.vue

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

components/Modal/ProfilePopup.vue

@@ -1,8 +1,10 @@
 <template>
 	<ModalBase :obscure="true">
-		<div id="vertical-container">
+		<div id="profile-container">
-			<span id="cover-background"></span>
+			<div id="profile-header">
-			<Avatar :profile="props.profile" id="pfp"/>
+				<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 {
+#profile-container { 
-	display: flex;
+	position: relative;
-	flex-direction: column;
-
 	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; /* 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,20 +51,8 @@ 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,8 +21,6 @@
 <script lang="ts" setup>
 import type { UserResponse } from '~/types/interfaces';
 
-const { fetchMembers } = useApi();
-
 const props = defineProps<{
 	user: UserResponse
 }>();

composables/api.ts

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

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

@@ -64,7 +64,7 @@ onActivated(async () => {
 });
 
 async function setArrayVariables() {
-	members.value = await fetchMembers(route.params.serverId as string);
+	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);

utils/hashPassword.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));

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}`
+}

utils/sortMembers.ts

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

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

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

utils/validation.ts

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