feat: finish up the profile popup

components/MessageArea.vue

@@ -44,9 +44,11 @@ import type { MessageResponse, ScrollPosition, UserResponse } from '~/types/inte
 import scrollToBottom from '~/utils/scrollToBottom';
 import { generateIrcColor } from '#imports';
 
+const { fetchMe } = useApi()
+
 const props = defineProps<{ channelUrl: string, amount?: number, offset?: number }>();
 
-const me = await fetchWithApi("/me") as UserResponse;
+const me = await fetchMe() as UserResponse;
 
 const messageTimestamps = ref<Record<string, number>>({});
 const messagesType = ref<Record<string, "normal" | "grouped">>({});

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/HorizontalSpacer.vue

@@ -0,0 +1,12 @@
+<template>
+  <span class="horizontal-spacer"></span>
+</template>
+
+<style scoped>
+.spacer {
+  display: block;
+  width: 0.2dvh;
+  margin: 0.2dvh 0.8dvw;
+  background-color: var(--padding-color);
+}
+</style>

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;

composables/api.ts

@@ -21,6 +21,10 @@ export const useApi = () => {
 		return ensureIsArray(await fetchWithApi(`/me/guilds`));
 	}
 
+	async function fetchMe(): Promise<UserResponse | undefined> {
+		return await fetchWithApi("/me")
+	}
+
 	async function fetchChannels(guildId: string): Promise<ChannelResponse[]> {
 		return ensureIsArray(await fetchWithApi(`/guilds/${guildId}/channels`));
 	}
@@ -98,6 +102,7 @@ export const useApi = () => {
 		fetchGuilds,
 		fetchGuild,
 		fetchMyGuilds,
+		fetchMe,
 		fetchChannels,
 		fetchChannel,
 		fetchMembers,

utils/editMessage.ts

@@ -1,9 +1,12 @@
 import type { MessageProps } from "~/types/props";
 
+const { fetchMe } = useApi()
+
 export default async (element: HTMLDivElement, props: MessageProps) => {
 	console.log("message:", element);
-	const me = await fetchWithApi("/me") as any;
-	if (props.author?.uuid == me.uuid) {
+	const me = await fetchMe();
+
+	if (me && props.author?.uuid == me.uuid) {
 		const text = element.getElementsByClassName("message-text")[0] as HTMLDivElement;
 		text.contentEditable = "true";
 		text.focus();

utils/getAboutMe.ts

@@ -0,0 +1,9 @@
+import type { GuildMemberResponse, UserResponse } from "~/types/interfaces";
+
+export default (profile: UserResponse | GuildMemberResponse): string | null => {
+	if ("username" in profile) {
+		return profile.about
+	} else {
+		return profile.user.about
+	}
+}

utils/getFriendsSince.ts

@@ -0,0 +1,21 @@
+import type { GuildMemberResponse, UserResponse } from "~/types/interfaces";
+
+const { fetchFriends } = useApi();
+
+export default async (profile: UserResponse | GuildMemberResponse): Promise<Date | null> => {
+	let user_uuid: string;
+
+	if ("username" in profile) {
+		user_uuid = profile.uuid
+	} else {
+		user_uuid = profile.user_uuid
+	}
+
+	const friends = await fetchFriends()
+	const friend = friends.find(friend => friend.uuid === user_uuid);
+	if (friend?.friends_since) {
+		return new Date(friend.friends_since);
+	}
+
+	return null
+}

utils/getGuildJoinDate.ts

@@ -0,0 +1,9 @@
+import type { GuildMemberResponse, UserResponse } from "~/types/interfaces";
+
+export default (profile: UserResponse | GuildMemberResponse): Date | null => {
+	if ("username" in profile) {
+		return null
+	} else {
+		return uuidToDate(profile.uuid)
+	}
+}

utils/getPronouns.ts

@@ -0,0 +1,9 @@
+import type { GuildMemberResponse, UserResponse } from "~/types/interfaces";
+
+export default (profile: UserResponse | GuildMemberResponse): string | null => {
+	if ("username" in profile) {
+		return profile.pronouns
+	} else {
+		return profile.user.pronouns
+	}
+}

utils/getRegistrationDate.ts

@@ -0,0 +1,9 @@
+import type { GuildMemberResponse, UserResponse } from "~/types/interfaces";
+
+export default (profile: UserResponse | GuildMemberResponse): Date | null => {
+	if ("username" in profile) {
+		return uuidToDate(profile.uuid)
+	} else {
+		return uuidToDate(profile.user_uuid)
+	}
+}

utils/getUsername.ts

@@ -0,0 +1,9 @@
+import type { GuildMemberResponse, UserResponse } from "~/types/interfaces";
+
+export default (profile: UserResponse | GuildMemberResponse): string => {
+	if ("username" in profile) {
+		return profile.username
+	} else {
+		return profile.user.username
+	}
+}

utils/getUuid.ts

@@ -0,0 +1,9 @@
+import type { GuildMemberResponse, UserResponse } from "~/types/interfaces";
+
+export default (profile: UserResponse | GuildMemberResponse): string | null => {
+	if ("username" in profile) {
+		return profile.uuid
+	} else {
+		return profile.user.uuid
+	}
+}

utils/uuidToDate.ts

@@ -0,0 +1,6 @@
+export default (uuid: string): Date => {
+  const timeHex = uuid.substring(0, 8) + uuid.substring(9, 13);
+  const timestamp = parseInt(timeHex, 16);
+
+  return new Date(timestamp);
+}