app.vue

@@ -8,7 +8,6 @@
 
 <script lang="ts" setup>
 import ContextMenu from '~/components/UserInterface/ContextMenu.vue';
-import { render } from 'vue';
 import type { ContextMenuInterface } from './types/interfaces';
 import loadPreferredTheme from '~/utils/loadPreferredTheme';
 

components/Avatar.vue

@@ -3,7 +3,7 @@
 		class="display-avatar"
 		:src="displayAvatar"
 		:alt="displayName" />
-	<DefaultIcon v-else-if="user"
+	<DefaultIcon v-else
 		class="display-avatar"
 		:name="displayName"
 		:seed="user.uuid"
@@ -14,23 +14,24 @@
 import { NuxtImg } from '#components';
 import type { GuildMemberResponse, UserResponse } from '~/types/interfaces';
 
+const { getDisplayName } = useProfile()
+
 const props = defineProps<{
-	user?: UserResponse,
-	member?: GuildMemberResponse,
+	profile: UserResponse | GuildMemberResponse,
 }>();
 
-
-let displayName: string
+const displayName = getDisplayName(props.profile)
+let user: UserResponse
 let displayAvatar: string | null
 
-const user = props.user || props.member?.user
-
-if (user) {
-	displayName = getDisplayName(user, props.member)
-	
-	if (user.avatar) {
-		displayAvatar = user.avatar
-	}
+if ("username" in props.profile) {
+	// assume it's a UserResponse
+	displayAvatar = props.profile.avatar
+	user = props.profile
+} else {
+	// assume it's a GuildMemberResponse
+	displayAvatar = props.profile.user.avatar
+	user = props.profile.user
 }
 
 </script>

components/Guild/MemberEntry.vue

@@ -1,34 +1,36 @@
 <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>
-        <UserPopup v-if="isPopupVisible" :user="props.member.user" id="profile-popup" />
+    <div class="member-item" @click.prevent="showModalPopup" tabindex="0">
+        <Avatar :profile="props.member" class="member-avatar"/>
+        <span class="member-display-name">{{ getDisplayName(props.member) }}</span>
     </div>
+    <ModalProfilePopup v-if="modalPopupVisible" :profile="props.member"
+        :onFinish="hideModalPopup" :keepalive="false"/>
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
+import { ModalProfilePopup } from '#components';
 import type { GuildMemberResponse } from '~/types/interfaces';
 
+const { getDisplayName } = useProfile()
+
 const props = defineProps<{
     member: GuildMemberResponse
 }>();
 
-const isPopupVisible = ref(false);
+const modalPopupVisible = ref<boolean>(false);
 
-const togglePopup = () => {
-    isPopupVisible.value = false;
-    // isPopupVisible.value = !isPopupVisible.value;
-};
+function showModalPopup() {
+    modalPopupVisible.value = true
+}
 
-const hidePopup = () => {
-    isPopupVisible.value = false;
-};
+function hideModalPopup() {
+    modalPopupVisible.value = false
+}
 </script>
 
 <style>
 .member-item {
-    position: relative; /* Set the position to relative for absolute positioning of the popup */
+    position: relative;
 }
 
 .member-avatar {

components/Me/AddFriend.vue

@@ -23,9 +23,11 @@ async function sendRequest() {
 		try {
 			await addFriend(inputField.value.value)
 			alert("Friend request sent!")
-		} catch {
-			alert("Request failed :(")
-		} 
+		} catch (error: any) {
+			if (error?.response?.status !== 200) {
+				alert(`error ${error?.response?.status} met whilst trying to add friend\n"${error?.response._data?.message}"`)
+			}
+		}
 	}
 }
 </script>

components/Me/FriendsList.vue

@@ -24,6 +24,8 @@
 </template>
 
 <script lang="ts" setup>
+
+const { getDisplayName } = useProfile()
 const { fetchFriends } = useApi();
 
 const friends = sortUsers(await fetchFriends())

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">
@@ -70,6 +70,8 @@ import MessageMedia from './MessageMedia.vue';
 import MessageReply from './UserInterface/MessageReply.vue';
 import type { ContextMenuInterface, ContextMenuItem } from '~/types/interfaces';
 
+const { getDisplayName } = useProfile()
+
 const props = defineProps<MessageProps>();
 
 const contextMenu = useState<ContextMenuInterface>("contextMenu", () => ({ show: false, pointerX: 0, pointerY: 0, items: [] }));

components/MessageArea.vue

@@ -44,9 +44,12 @@ import type { MessageResponse, ScrollPosition, UserResponse } from '~/types/inte
 import scrollToBottom from '~/utils/scrollToBottom';
 import { generateIrcColor } from '#imports';
 
+const { getDisplayName } = useProfile()
+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/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="onCloseButton" />
 	</span>
 	<div class="modal-content">
 		<h1 class="modal-title">{{ title }}</h1>
@@ -17,8 +17,6 @@ import Button from '~/components/UserInterface/Button.vue';
 const props = defineProps<ModalProps>();
 const dialog = ref<HTMLDialogElement>();
 
-console.log("props:", props);
-
 onMounted(() => {
   if (dialog.value) {
     dialog.value.showModal();
@@ -31,6 +29,15 @@ onMounted(() => {
   }
 });
 
+function onCloseButton () {
+  if (dialog.value) {
+    if (props.onCloseButton) {
+      props.onCloseButton()
+    }
+    
+    dialog.value.remove
+  }
+}
 
 </script>
 
@@ -42,9 +49,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,243 @@
+<template>
+	<ModalBase :obscure="true" :onClose="props.onFinish" :onCloseButton="props.onFinish">
+		<div id="profile-container">
+			<div id="profile-header">
+				<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 v-if="aboutMe" />
+
+			<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" :title="registrationDate.toLocaleTimeString()">{{ toDateString(registrationDate) }}</span>
+					</div>
+					<div v-if="joinDate" class="date-entry">
+						<span class="date-entry-title">Joined at</span><br>
+						<span class="date-entry-value" :title="joinDate.toLocaleTimeString()">{{ toDateString(joinDate) }}</span>
+					</div>
+					<div v-if="friendsSince" class="date-entry">
+						<span class="date-entry-title">Friends since</span><br>
+						<span class="date-entry-value" :title="friendsSince.toLocaleTimeString()">{{ toDateString(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 { getDisplayName, getUsername, getPronouns, getAboutMe, getRegistrationDate, getGuildJoinDate, getFriendsSince, getUuid } = useProfile()
+const { addFriend, fetchMe } = useApi();
+
+const props = defineProps<ModalProps & {
+	profile: GuildMemberResponse,
+	onFinish: () => void
+}>();
+
+const me = await fetchMe() as UserResponse
+
+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)
+const joinDate = getGuildJoinDate(props.profile)
+const friendsSince = await getFriendsSince(props.profile)
+
+const uuid = getUuid(props.profile)
+
+
+function toDateString(date: Date): string {
+	return date.toLocaleDateString(undefined, { day: '2-digit', month: 'short', year: 'numeric' })
+}
+
+function buttonSendMessage() {
+	navigateTo(`/me/${uuid}`)
+}
+
+async function buttonAddFriend() {
+	try {
+		await addFriend(username)
+		alert("sent!")
+	} catch (error: any) {
+		if (error?.response?.status !== 200) {
+			alert(`error ${error?.response?.status} met whilst trying to add friend\n"${error?.response._data?.message}"`)
+		}
+	}
+}
+
+function buttonEditProfile() {
+	navigateTo(`/settings#profile`)
+}
+</script>
+
+<style scoped>
+
+#profile-container { 
+	text-align: left;
+
+	position: relative;
+	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 {
+	flex-shrink: 0;
+	min-height: 9em;
+	width: 100%;
+}
+
+#header-mask {
+	display: relative;
+	width: 100%;
+	min-height: 7em;
+
+	z-index: 0;
+
+	background-color: var(--primary-color);
+	border-radius: var(--standard-radius) var(--standard-radius) 0 0; /* top left and top right */
+}
+
+#avatar {
+	display: block;
+	position: absolute;
+	left: 2em;
+	top: 2.5em;
+
+	z-index: 1;
+
+	width: 6em;
+	height: 6em;
+
+	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 {
+	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/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>
@@ -9,6 +9,8 @@
 <script lang="ts" setup>
 import type { UserResponse } from '~/types/interfaces';
 
+const { getDisplayName } = useProfile()
+
 const props = defineProps<{
     user: UserResponse
 }>();

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">
@@ -21,6 +21,8 @@
 <script lang="ts" setup>
 import type { UserResponse } from '~/types/interfaces';
 
+const { getDisplayName } = useProfile()
+
 const props = defineProps<{
 	user: UserResponse
 }>();

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>
@@ -21,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;
 
@@ -50,4 +52,11 @@ const props = defineProps<{
 	background-color: var(--accent-highlighted-color);
 }
 
+.stealth-button {
+	background-color: unset;
+}
+.stealth-button:hover {
+	background-color: unset;
+}
+
 </style>

components/UserInterface/HorizontalSpacer.vue

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

components/UserInterface/VerticalSpacer.vue

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

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`));
 	}
@@ -102,6 +106,7 @@ export const useApi = () => {
 		fetchGuilds,
 		fetchGuild,
 		fetchMyGuilds,
+		fetchMe,
 		fetchChannels,
 		fetchChannel,
 		fetchMembers,

composables/profile.ts

@@ -0,0 +1,95 @@
+import type { GuildMemberResponse, UserResponse } from "~/types/interfaces"
+
+const { fetchFriends } = useApi();
+
+export const useProfile = () => {
+	function getAboutMe (profile: UserResponse | GuildMemberResponse): string | null {
+		if ("username" in profile) {
+			return profile.about
+		} else {
+			return profile.user.about
+		}
+	}
+
+	function getDisplayName (profile: UserResponse | GuildMemberResponse): string  {
+		if ("username" in profile) {
+			// assume it's a UserResponse
+			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
+		}
+	}
+
+	async function getFriendsSince (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
+	}
+
+	function getGuildJoinDate (profile: UserResponse | GuildMemberResponse): Date | null {
+		if ("username" in profile) {
+			return null
+		} else {
+			return uuidToDate(profile.uuid)
+		}
+	}
+
+	function getPronouns (profile: UserResponse | GuildMemberResponse): string | null  {
+		if ("username" in profile) {
+			return profile.pronouns
+		} else {
+			return profile.user.pronouns
+		}
+	}
+
+	function getRegistrationDate (profile: UserResponse | GuildMemberResponse): Date | null {
+		if ("username" in profile) {
+			return uuidToDate(profile.uuid)
+		} else {
+			return uuidToDate(profile.user.uuid)
+		}
+	}
+
+	function getUsername (profile: UserResponse | GuildMemberResponse): string {
+		if ("username" in profile) {
+			return profile.username
+		} else {
+			return profile.user.username
+		}
+	}
+
+	function getUuid (profile: UserResponse | GuildMemberResponse): string | null {
+		if ("username" in profile) {
+			return profile.uuid
+		} else {
+			return profile.user.uuid
+		}
+	}
+	
+	return {
+		getAboutMe,
+		getDisplayName,
+		getFriendsSince,
+		getGuildJoinDate,
+		getRegistrationDate,
+		getPronouns,
+		getUsername,
+		getUuid		
+	}
+}

layouts/client.vue

@@ -55,10 +55,15 @@ import Button from '~/components/UserInterface/Button.vue';
 import VerticalSpacer from '~/components/UserInterface/VerticalSpacer.vue';
 import type { GuildResponse } from '~/types/interfaces';
 
+definePageMeta({
+	keepalive: true
+});
+
 const loading = useState("loading", () => false);
 
 const createButtonContainer = ref<HTMLButtonElement>();
 
+const { getDisplayName } = useProfile()
 const api = useApi();
 
 const options = [

types/interfaces.ts

@@ -96,7 +96,8 @@ export interface ModalProps {
 	title?: string,
 	obscure?: boolean,
 	onClose?: () => void,
-	onCancel?: () => void
+	onCancel?: () => void,
+	onCloseButton?: () => void,
 }
 
 export interface ContextMenuItem {

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/getDisplayName.ts

@@ -1,7 +0,0 @@
-import type { GuildMemberResponse, UserResponse } from "~/types/interfaces";
-
-export default (user: UserResponse, member?: GuildMemberResponse): string => {
-	if (member?.nickname) return member.nickname
-	if (user.display_name) return user.display_name
-	return user.username
-}

utils/sortMembers.ts

@@ -1,7 +1,8 @@
 import type { GuildMemberResponse } from "~/types/interfaces";
+const { getDisplayName } = useProfile()
 
 export default (members: GuildMemberResponse[]): GuildMemberResponse[] => {
 	return members.sort((a, b) => {
-		return getDisplayName(a.user, a).localeCompare(getDisplayName(b.user, b))
+		return getDisplayName(a).localeCompare(getDisplayName(b))
 	})
 }

utils/sortUsers.ts

@@ -1,4 +1,5 @@
 import type { UserResponse } from "~/types/interfaces";
+const { getDisplayName } = useProfile()
 
 export default (users: UserResponse[]): UserResponse[] => {
 	return users.sort((a, b) => {

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