feat: start adding popup

components/Avatar.vue

@@ -13,25 +13,29 @@ import { NuxtImg } from '#components';
 import type { GuildMemberResponse, UserResponse } from '~/types/interfaces';
 
 const props = defineProps<{
-	user?: UserResponse,
+	profile: UserResponse | GuildMemberResponse,
-	member?: GuildMemberResponse,
 }>();
 
-
+const displayName = getDisplayName(props.profile)
-let displayName: string
 let displayAvatar: string | null
 
-const user = props.user || props.member?.user
 
-if (user) {
+if ("username" in props.profile) {
-	displayName = getDisplayName(user, props.member)
+	// assume it's a UserRespone
+	displayAvatar = props.profile.avatar
+	if (!displayAvatar) {
+		if (!isCanvasBlocked()) {
+			displayAvatar = generateDefaultIcon(displayName, props.profile.uuid)
+		}
+	}
 
-	if (user.avatar) {
+} else {
-		displayAvatar = user.avatar
+	// assume it's a GuildMemberResponse
-	} else if (!isCanvasBlocked()){
+	displayAvatar = props.profile.user.avatar
-		displayAvatar = generateDefaultIcon(displayName, user.uuid)
+	if (!displayAvatar) {
-	} else {
+		if (!isCanvasBlocked()) {
-		displayAvatar = null
+			displayAvatar = generateDefaultIcon(displayName, props.profile.user_uuid)
+		}
 	}
 }
 

components/Guild/MemberEntry.vue

@@ -1,33 +1,33 @@
 <template>
-    <div class="member-item" @click="togglePopup" @blur="hidePopup" tabindex="0">
+    <div class="member-item" @click.prevent="createProfileModal(props.member)" tabindex="0">
-        <Avatar :member="props.member" class="member-avatar"/>
+        <Avatar :profile="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>
 
 <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
+	});
 	
-const togglePopup = () => {
+	document.body.appendChild(div);
-    isPopupVisible.value = false;
+	render(modal, div);
-    // 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>

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

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;
 }
 

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>

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>

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

components/UserInterface/Button.vue

@@ -1,5 +1,6 @@
 <template>
-	<button @click="props.callback ? props.callback() : null" class="button" :class="props.variant + '-button'">
+	<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>

utils/getDisplayName.ts

@@ -1,7 +1,14 @@
 import type { GuildMemberResponse, UserResponse } from "~/types/interfaces";
 
-export function getDisplayName(user: UserResponse, member?: GuildMemberResponse): string {
+export default (profile: UserResponse | GuildMemberResponse): string => {
-	if (member?.nickname) return member.nickname
+	if ("username" in profile) {
-	if (user.display_name) return user.display_name
+		// assume it's a UserRespone
-	return user.username
+		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
+	}
 }