feat: finish up the profile popup

components/Modal/ProfilePopup.vue

@@ -5,28 +5,119 @@
 				<div id="header-mask"></div>
 				<Avatar :profile="props.profile" id="avatar"/>
 			</div>
+
+			<div id="profile-sub-header">
+				<div id="display-name">{{ displayName }}</div>
+				<div id="username-and-pronouns">
+					{{ username }}
+					<span v-if="pronouns">
+						•
+						{{ pronouns }}
+					</span>
+				</div>
+				<div id="status">Status goes here lorem ipsum or something</div>
+
+				<div v-if="me.uuid != uuid" id="action-buttons-container">
+					<Button text="Message" variant="normal" :callback="buttonSendMessage"></Button>
+					<Button text="Friend" variant="neutral" :callback="buttonAddFriend"></Button>
+				</div>
+				<div v-else id="action-buttons-container">
+					<Button text="Edit Profile" variant="normal" :callback="buttonEditProfile"></Button>
+				</div>
+			</div>
+			<VerticalSpacer />
+
+			<div v-if="aboutMe" id="profile-body">
+				<div v-if="aboutMe" id="about-me-container">
+					<div><Icon name="lucide:info" size="1.1em"/></div>
+					<div id="about-me-text">
+						{{ " " + aboutMe }}
+					</div>
+				</div>
+			</div>
+			<VerticalSpacer />
+
+			<div id="profile-footer">
+				<div id="dates">
+					<div v-if="registrationDate" class="date-entry">
+						<span class="date-entry-title">Registered At</span><br>
+						<span class="date-entry-value">{{ registrationDate }}</span>
+					</div>
+					<div v-if="joinDate" class="date-entry">
+						<span class="date-entry-title">Joined At</span><br>
+						<span class="date-entry-value">{{ joinDate }}</span>
+					</div>
+					<div v-if="friendsSince" class="date-entry">
+						<span class="date-entry-title">Friends Since</span><br>
+						<span class="date-entry-value">{{ friendsSince }}</span>
+					</div>
+				</div>
+			</div>
 		</div>
 	</ModalBase>
 </template>
 
 <script lang="ts" setup>
 import type { GuildMemberResponse, ModalProps, UserResponse } from '~/types/interfaces';
+import VerticalSpacer from '../UserInterface/VerticalSpacer.vue';
+import Button from '../UserInterface/Button.vue';
+
+const { addFriend, fetchMe } = useApi();
 
 const props = defineProps<ModalProps & {
 	profile: GuildMemberResponse
 }>();
 
+const friendsSinceRequest = await getFriendsSince(props.profile)
+
+const displayName = getDisplayName(props.profile)
+const username = getUsername(props.profile)
+const pronouns = getPronouns(props.profile)
+const aboutMe = getAboutMe(props.profile)
+
+const registrationDate = getRegistrationDate(props.profile)?.toLocaleDateString(undefined, { day: '2-digit', month: 'short', year: 'numeric' })
+const joinDate = getGuildJoinDate(props.profile)?.toLocaleDateString(undefined, { day: '2-digit', month: 'short', year: 'numeric' })
+const friendsSince = friendsSinceRequest?.toLocaleDateString(undefined, { day: '2-digit', month: 'short', year: 'numeric' })
+
+const uuid = getUuid(props.profile)
+const me = await fetchMe() as UserResponse
+
+function buttonSendMessage() {
+	navigateTo(`/me/${uuid}`)
+}
+
+async function buttonAddFriend() {
+	try {
+		await addFriend(username)
+		alert("sent!")
+	} catch {
+		alert("failed :(")
+	}
+}
+
+function buttonEditProfile() {
+	navigateTo(`/settings#profile`)
+}
 </script>
 
 <style scoped>
 
 #profile-container { 
+	text-align: left;
+
 	position: relative;
-	height: 75dvh;
-	width: 75dvw;
+	max-height: 60dvh;
+	max-width: 60dvw;
+	height: 30em;
+	width: 40em;
 
 	display: flex;
 	flex-direction: column;
+
+	background-color: var(--chat-background-color);
+	border-radius: var(--standard-radius);
+
+	overflow-y: scroll;
 }
 
 #profile-header {
@@ -49,14 +140,97 @@ const props = defineProps<ModalProps & {
 #avatar {
 	display: block;
 	position: absolute;
-	left: 5.5em;
-	top: 3.5em;
+	left: 2em;
+	top: 2.5em;
 
 	z-index: 1;
 
-	width: 7em;
-	height: 7em;
+	width: 6em;
+	height: 6em;
 
-	border: .375em solid var(--accent-color);
+	border: .15em solid var(--accent-color);
+}
+
+#profile-sub-header {
+	margin-left: 1em;
+	margin-right: 1em;
+}
+
+#display-name {
+	font-weight: 800;
+	font-size: 2em;
+
+}
+
+#username-and-pronouns {
+	margin-top: -0.2em;
+	font-size: .9em;
+	color: var(--secondary-text-color);
+}
+
+#status {
+	width: fit-content;
+	margin-top: .75em;
+
+	margin-left: -0.2em;
+	padding: .3em .5em;
+	
+	background-color: var(--chatbox-background-color);
+	border-radius: 1em;
+}
+
+#action-buttons-container {
+	display: flex;
+	gap: .6em;
+
+	margin-top: .4em;
+	margin-bottom: .3em;
+}
+
+
+#profile-body {
+	margin-left: 1em;
+	margin-right: 1em;
+}
+
+#about-me-container {
+	display: flex;
+	flex-direction: row;
+	gap: .5em;
+
+	margin-top: .75em;
+	margin-bottom: .75em;
+}
+
+#about-me-text {
+	display: inline;
+	margin-top: -0.5em;
+	
+	align-self: center;
+
+	font-size: .8em;
+	font-weight: lighter;
+}
+
+
+#profile-footer {
+	margin-left: 1em;
+	margin-right: 1em;
+	padding-bottom: 5em;
+}
+
+#dates {
+	display: flex
+}
+
+.date-entry {
+	flex-grow: 1;
+}
+
+.date-entry-title {
+	font-size: .8em;
+}
+.date-entry-value {
+	font-size: 1em;
 }
 </style>

components/UserInterface/Button.vue

@@ -22,11 +22,12 @@ const props = defineProps<{
 	background-color: var(--primary-color);
 	color: var(--text-color);
 
-	padding: 0.4em 0.75em;
-	font-size: 1.1em;
+	padding: 0.35em 0.65em;
+	font-size: 1em;
+	
 	transition: background-color 0.2s;
 
-	border-radius: 0.7rem;
+	border-radius: var(--standard-radius);
 	text-decoration: none;
 	display: inline-block;
 

components/UserInterface/VerticalSpacer.vue

@@ -1,9 +1,9 @@
 <template>
-  <span class="spacer"></span>
+  <span class="vertical-spacer"></span>
 </template>
 
 <style scoped>
-.spacer {
+.vertical-spacer {
   height: 0.2dvh;
   display: block;
   margin: 0.8dvh 0.2dvw;