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] 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