From b8cbbf1f86a5d4a68aa62d85861d9ac3a412eeb1 Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Thu, 17 Jul 2025 15:11:55 +0200
Subject: [PATCH 1/4] refactor: change getDisplayName to take in a single
 variable instead of two

---
 components/Avatar.vue            |  2 +-
 components/Guild/MemberEntry.vue |  2 +-
 utils/getDisplayName.ts          | 15 +++++++++++----
 3 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/components/Avatar.vue b/components/Avatar.vue
index ddfe1dc..13a884e 100644
--- a/components/Avatar.vue
+++ b/components/Avatar.vue
@@ -24,7 +24,7 @@ let displayAvatar: string | null
 const user = props.user || props.member?.user
 
 if (user) {
-	displayName = getDisplayName(user, props.member)
+	displayName = getDisplayName(props.member ?? user)
 	
 	if (user.avatar) {
 		displayAvatar = user.avatar
diff --git a/components/Guild/MemberEntry.vue b/components/Guild/MemberEntry.vue
index 12e36a0..3d102e0 100644
--- a/components/Guild/MemberEntry.vue
+++ b/components/Guild/MemberEntry.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="member-item" @click="togglePopup" @blur="hidePopup" tabindex="0">
         <Avatar :member="props.member" class="member-avatar"/>
-        <span class="member-display-name">{{ getDisplayName(props.member.user, props.member) }}</span>
+        <span class="member-display-name">{{ getDisplayName(props.member) }}</span>
         <UserPopup v-if="isPopupVisible" :user="props.member.user" id="profile-popup" />
     </div>
 </template>
diff --git a/utils/getDisplayName.ts b/utils/getDisplayName.ts
index e712555..d1be9a8 100644
--- a/utils/getDisplayName.ts
+++ b/utils/getDisplayName.ts
@@ -1,7 +1,14 @@
 import type { GuildMemberResponse, UserResponse } from "~/types/interfaces";
 
-export function getDisplayName(user: UserResponse, member?: GuildMemberResponse): string {
-	if (member?.nickname) return member.nickname
-	if (user.display_name) return user.display_name
-	return user.username
+export default (profile: UserResponse | GuildMemberResponse): string => {
+	if ("username" in profile) {
+		// assume it's a UserRespone
+		if (profile.display_name) return profile.display_name
+		return profile.username
+	} else {
+		// assume it's a GuildMemberResponse
+		if (profile.nickname) return profile.nickname
+		if (profile.user.display_name) return profile.user.display_name
+		return profile.user.username
+	}
 }
\ No newline at end of file

From d2ff4ac87c33d016c0eefdbe0cb91d93272cfbc8 Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Thu, 17 Jul 2025 16:09:10 +0200
Subject: [PATCH 2/4] style: improve base modal close button

---
 components/Modal/Base.vue           |  9 ++++++---
 components/UserInterface/Button.vue | 14 +++++++++++---
 2 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/components/Modal/Base.vue b/components/Modal/Base.vue
index 1f57901..b3d5ee3 100644
--- a/components/Modal/Base.vue
+++ b/components/Modal/Base.vue
@@ -1,7 +1,7 @@
 <template>
   <dialog ref="dialog" class="modal" :class="props.obscure ? 'modal-obscure' : 'modal-regular'">
 	<span class="modal-exit-button-container" style="position: absolute; right: 2em; top: .2em; width: .5em; height: .5em;">
-		<Button text="X" variant="neutral" :callback="() => dialog?.remove()" />
+		<Button text="✕" variant="stealth" :callback="() => dialog?.remove()" />
 	</span>
 	<div class="modal-content">
 		<h1 class="modal-title">{{ title }}</h1>
@@ -42,9 +42,12 @@ onMounted(() => {
   flex-direction: column;
   gap: 1em;
   opacity: 100%;
-  padding: 1%;
-  background-color: var(--sidebar-highlighted-background-color);
+
+  padding: var(--standard-radius); 
+	border-radius: var(--standard-radius);
+	background-color: var(--chat-highlighted-background-color);
   color: var(--text-color);
+
   overflow: hidden;
 }
 
diff --git a/components/UserInterface/Button.vue b/components/UserInterface/Button.vue
index 467b65e..90d5d2b 100644
--- a/components/UserInterface/Button.vue
+++ b/components/UserInterface/Button.vue
@@ -1,6 +1,7 @@
 <template>
-	<button @click="props.callback ? props.callback() : null" class="button" :class="props.variant + '-button'">
-		{{ props.text }}
+	<button class="button" :class="props.variant + '-button'"
+	@click="props.callback ? props.callback() : null">
+			{{ props.text }}
 	</button>
 </template>
 
@@ -9,7 +10,7 @@
 const props = defineProps<{
 	text: string,
 	callback?: CallableFunction,
-	variant?: "normal" | "scary" | "neutral",
+	variant?: "normal" | "scary" | "neutral" | "stealth",
 }>();
 
 </script>
@@ -50,4 +51,11 @@ const props = defineProps<{
 	background-color: var(--accent-highlighted-color);
 }
 
+.stealth-button {
+	background-color: unset;
+}
+.stealth-button:hover {
+	background-color: unset;
+}
+
 </style>
\ No newline at end of file

From e339b1df10dbebddcf6c050deefcaaab402dc28d Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Thu, 17 Jul 2025 16:18:18 +0200
Subject: [PATCH 3/4] refactor: change Avatar component to take a single
 variable instead of user or profile

---
 components/Avatar.vue         | 32 ++++++++++++++++++--------------
 components/Message.vue        |  2 +-
 components/User/UserEntry.vue |  2 +-
 components/User/UserPopup.vue |  2 +-
 4 files changed, 21 insertions(+), 17 deletions(-)

diff --git a/components/Avatar.vue b/components/Avatar.vue
index 13a884e..5f16251 100644
--- a/components/Avatar.vue
+++ b/components/Avatar.vue
@@ -13,25 +13,29 @@ import { NuxtImg } from '#components';
 import type { GuildMemberResponse, UserResponse } from '~/types/interfaces';
 
 const props = defineProps<{
-	user?: UserResponse,
-	member?: GuildMemberResponse,
+	profile: UserResponse | GuildMemberResponse,
 }>();
 
-
-let displayName: string
+const displayName = getDisplayName(props.profile)
 let displayAvatar: string | null
 
-const user = props.user || props.member?.user
 
-if (user) {
-	displayName = getDisplayName(props.member ?? user)
-	
-	if (user.avatar) {
-		displayAvatar = user.avatar
-	} else if (!isCanvasBlocked()){
-		displayAvatar = generateDefaultIcon(displayName, user.uuid)
-	} else {
-		displayAvatar = null
+if ("username" in props.profile) {
+	// assume it's a UserRespone
+	displayAvatar = props.profile.avatar
+	if (!displayAvatar) {
+		if (!isCanvasBlocked()) {
+			displayAvatar = generateDefaultIcon(displayName, props.profile.uuid)
+		}
+	}
+
+} else {
+	// assume it's a GuildMemberResponse
+	displayAvatar = props.profile.user.avatar
+	if (!displayAvatar) {
+		if (!isCanvasBlocked()) {
+			displayAvatar = generateDefaultIcon(displayName, props.profile.user_uuid)
+		}
 	}
 }
 
diff --git a/components/Message.vue b/components/Message.vue
index ed32c50..71687e1 100644
--- a/components/Message.vue
+++ b/components/Message.vue
@@ -29,7 +29,7 @@
 			:text="props.replyMessage?.message"
 			:reply-id="props.replyMessage.uuid" max-width="reply" />
 		<div class="left-column">
-			<Avatar :user="props.author" class="message-author-avatar"/>
+			<Avatar :profile="props.author" class="message-author-avatar"/>
 		</div>
 		<div class="message-data">
 			<div class="message-metadata">
diff --git a/components/User/UserEntry.vue b/components/User/UserEntry.vue
index b3ad40f..064d2fb 100644
--- a/components/User/UserEntry.vue
+++ b/components/User/UserEntry.vue
@@ -1,6 +1,6 @@
 <template>
     <NuxtLink class="user-item" :href="`/me/${user.uuid}`" tabindex="0">
-        <Avatar :user="props.user" class="user-avatar"/>
+        <Avatar :profile="props.user" class="user-avatar"/>
 
         <span class="user-display-name">{{ getDisplayName(props.user) }}</span>
 	</NuxtLink>
diff --git a/components/User/UserPopup.vue b/components/User/UserPopup.vue
index 86b5a48..8ceab2f 100644
--- a/components/User/UserPopup.vue
+++ b/components/User/UserPopup.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="profile-popup">
-    <Avatar :user="props.user" id="avatar"/>
+    <Avatar :profile="props.user" id="avatar"/>
 
     <div id="cover-color"></div>
     <div id="main-body">

From fe77b2c28d154ffaa5c13f4a1028729cdecc3e5e Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Thu, 17 Jul 2025 17:08:29 +0200
Subject: [PATCH 4/4] feat: start adding popup

---
 components/Guild/MemberEntry.vue  | 28 +++++++++++-----------
 components/Modal/ProfilePopup.vue | 39 +++++++++++++++++++++++++++++++
 2 files changed, 53 insertions(+), 14 deletions(-)
 create mode 100644 components/Modal/ProfilePopup.vue

diff --git a/components/Guild/MemberEntry.vue b/components/Guild/MemberEntry.vue
index 3d102e0..1562ee5 100644
--- a/components/Guild/MemberEntry.vue
+++ b/components/Guild/MemberEntry.vue
@@ -1,33 +1,33 @@
 <template>
-    <div class="member-item" @click="togglePopup" @blur="hidePopup" tabindex="0">
-        <Avatar :member="props.member" class="member-avatar"/>
+    <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>
-        <UserPopup v-if="isPopupVisible" :user="props.member.user" id="profile-popup" />
     </div>
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
+import { ModalProfilePopup } from '#components';
+import { render } from 'vue';
 import type { GuildMemberResponse } from '~/types/interfaces';
 
 const props = defineProps<{
     member: GuildMemberResponse
 }>();
 
-const isPopupVisible = ref(false);
+function createProfileModal(profile: GuildMemberResponse) {
+	const div = document.createElement("div");
+	const modal = h(ModalProfilePopup, {
+		profile: profile
+	});
+	
+	document.body.appendChild(div);
+	render(modal, div);
+}
 
-const togglePopup = () => {
-    isPopupVisible.value = false;
-    // isPopupVisible.value = !isPopupVisible.value;
-};
-
-const hidePopup = () => {
-    isPopupVisible.value = false;
-};
 </script>
 
 <style>
 .member-item {
-    position: relative; /* Set the position to relative for absolute positioning of the popup */
+    position: relative;
 }
 </style>
diff --git a/components/Modal/ProfilePopup.vue b/components/Modal/ProfilePopup.vue
new file mode 100644
index 0000000..062412a
--- /dev/null
+++ b/components/Modal/ProfilePopup.vue
@@ -0,0 +1,39 @@
+<template>
+	<ModalBase :obscure="true">
+		<div id="vertical-container">
+			<span id="cover-background"></span>
+			<Avatar :profile="props.profile" id="pfp"/>
+		</div>
+	</ModalBase>
+</template>
+
+<script lang="ts" setup>
+import type { GuildMemberResponse, ModalProps, UserResponse } from '~/types/interfaces';
+
+const props = defineProps<ModalProps & {
+	profile: GuildMemberResponse
+}>();
+
+</script>
+
+<style scoped>
+
+#vertical-container {
+	display: flex;
+	flex-direction: column;
+
+	height: 75dvh;
+	width: 75dvw;
+}
+
+#cover-background {
+	width: 100%;
+	min-height: 6em;
+	max-height: 6em;
+
+	background-color: var(--primary-color);
+	/* top left and top right */
+	border-radius: var(--standard-radius) var(--standard-radius) 0 0;
+}
+
+</style>
\ No newline at end of file