From 59000709fe5f3ae0c3b7f3254870481094e90da2 Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Thu, 10 Jul 2025 22:51:14 +0200
Subject: [PATCH 1/7] feat: update api

---
 composables/api.ts | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/composables/api.ts b/composables/api.ts
index d2ca7a0..8a37a8e 100644
--- a/composables/api.ts
+++ b/composables/api.ts
@@ -1,4 +1,4 @@
-import type { ChannelResponse, GuildMemberResponse, GuildResponse, MessageResponse, StatsResponse } from "~/types/interfaces";
+import type { ChannelResponse, GuildMemberResponse, GuildResponse, MessageResponse, StatsResponse, UserResponse } from "~/types/interfaces";
 
 export const useApi = () => {
 	async function fetchGuilds(): Promise<GuildResponse[] | undefined> {
@@ -24,14 +24,18 @@ export const useApi = () => {
 	async function fetchMember(guildId: string, memberId: string): Promise<GuildMemberResponse | undefined> {
 		return await fetchWithApi(`/guilds/${guildId}/members/${memberId}`);
 	}
-
+	
 	async function fetchUsers() {
 		return await fetchWithApi(`/users`);
 	}
-
+	
 	async function fetchUser(userId: string) {
 		return await fetchWithApi(`/users/${userId}`);
 	}
+	
+	async function fetchFriends(): Promise<UserResponse[] | undefined> {
+		return await fetchWithApi('/me/friends')
+	}
 
 	async function fetchMessages(channelId: string, options?: { amount?: number, offset?: number }): Promise<MessageResponse[] | undefined> {
 		return await fetchWithApi(`/channels/${channelId}/messages`, { query: { amount: options?.amount ?? 100, offset: options?.offset ?? 0 } });
@@ -59,6 +63,7 @@ export const useApi = () => {
 		fetchMember,
 		fetchUsers,
 		fetchUser,
+		fetchFriends,
 		fetchMessages,
 		fetchMessage,
 		fetchInstanceStats,

From 8e69dc805e20e5feab0493b9b9aafac5a23f3c57 Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Thu, 10 Jul 2025 22:51:56 +0200
Subject: [PATCH 2/7] chore: remove unused popups

---
 components/Member/MemberEntry.vue                 | 1 -
 components/Settings/UserSettings/Account.vue      | 1 -
 components/Settings/UserSettings/Privacy.vue      | 1 -
 pages/servers/[serverId]/channels/[channelId].vue | 1 -
 4 files changed, 4 deletions(-)

diff --git a/components/Member/MemberEntry.vue b/components/Member/MemberEntry.vue
index ed4cd48..1ea4170 100644
--- a/components/Member/MemberEntry.vue
+++ b/components/Member/MemberEntry.vue
@@ -10,7 +10,6 @@
 <script lang="ts" setup>
 import { ref } from 'vue';
 import type { GuildMemberResponse } from '~/types/interfaces';
-import UserPopup from './UserPopup.vue';
 
 const props = defineProps<{
     member: GuildMemberResponse
diff --git a/components/Settings/UserSettings/Account.vue b/components/Settings/UserSettings/Account.vue
index b2ac87a..bf87f6e 100644
--- a/components/Settings/UserSettings/Account.vue
+++ b/components/Settings/UserSettings/Account.vue
@@ -17,7 +17,6 @@
 </template>
 
 <script lang="ts" setup>
-import Button from '~/components/Button.vue';
 import type { UserResponse } from '~/types/interfaces';
 
 const { fetchUser } = useAuth();
diff --git a/components/Settings/UserSettings/Privacy.vue b/components/Settings/UserSettings/Privacy.vue
index 0f1387d..854ac43 100644
--- a/components/Settings/UserSettings/Privacy.vue
+++ b/components/Settings/UserSettings/Privacy.vue
@@ -5,7 +5,6 @@
 </template>
 
 <script lang="ts" setup>
-import Button from '~/components/Button.vue';
 </script>
 
 <style scoped>
diff --git a/pages/servers/[serverId]/channels/[channelId].vue b/pages/servers/[serverId]/channels/[channelId].vue
index 4873094..713e012 100644
--- a/pages/servers/[serverId]/channels/[channelId].vue
+++ b/pages/servers/[serverId]/channels/[channelId].vue
@@ -46,7 +46,6 @@ const channel = ref<ChannelResponse | undefined>();
 
 const showInvitePopup = ref(false);
 
-import UserPopup from "~/components/UserPopup.vue";
 import type { ChannelResponse, GuildMemberResponse, GuildResponse, MessageResponse } from "~/types/interfaces";
 
 //const servers = await fetchWithApi("/servers") as { uuid: string, name: string, description: string }[];

From 7b62d352f806f365a328110acce982a33b8427b4 Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Thu, 10 Jul 2025 22:52:16 +0200
Subject: [PATCH 3/7] fix: user verticalSpacer over existing spans

---
 pages/settings.vue | 13 +++----------
 1 file changed, 3 insertions(+), 10 deletions(-)

diff --git a/pages/settings.vue b/pages/settings.vue
index 3aac506..089f44b 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -8,7 +8,7 @@
               <Icon class="back-button" size="2em" name="lucide:circle-arrow-left" alt="Back"></Icon>
             </span>
           </p>
-          <span class="spacer"></span>
+          <verticalSpacer />
 
           <!-- categories and dynamic settings pages -->
           <div v-for="category in categories" :key="category.displayName">
@@ -17,13 +17,13 @@
               :class="{ 'sidebar-focus': selectedPage === page.displayName }">
               {{ page.displayName }}
             </li>
-            <span class="spacer"></span>
+            <verticalSpacer />
           </div>
           
           <p>
             <Button text="Log Out" :callback=logout variant="scary"></Button>
           </p>
-          <span class="spacer"></span>
+          <verticalSpacer />
 
           <p id="links-and-socials">
             <NuxtLink href="https://git.gorb.app/gorb/frontend" title="Source"><Icon name="lucide:git-branch-plus" /></NuxtLink>
@@ -196,13 +196,6 @@ onMounted(() => {
   margin-right: 0.2em;
 }
 
-.spacer {
-  height: 0.2dvh;
-  display: block;
-  margin: 0.8dvh 1dvw;
-  background-color: var(--padding-color);
-}
-
 /* applies to child pages too */
 :deep(.subtitle) {
   display: block;

From a3feb07e7314cfcc9a00fbd05007ce54d0ac22b5 Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Thu, 10 Jul 2025 23:00:54 +0200
Subject: [PATCH 4/7] refactor: rename Channel to ChannelEntry

---
 components/Guild/{Channel.vue => ChannelEntry.vue} | 0
 pages/servers/[serverId]/channels/[channelId].vue  | 6 ++++--
 2 files changed, 4 insertions(+), 2 deletions(-)
 rename components/Guild/{Channel.vue => ChannelEntry.vue} (100%)

diff --git a/components/Guild/Channel.vue b/components/Guild/ChannelEntry.vue
similarity index 100%
rename from components/Guild/Channel.vue
rename to components/Guild/ChannelEntry.vue
diff --git a/pages/servers/[serverId]/channels/[channelId].vue b/pages/servers/[serverId]/channels/[channelId].vue
index 713e012..e7ab32a 100644
--- a/pages/servers/[serverId]/channels/[channelId].vue
+++ b/pages/servers/[serverId]/channels/[channelId].vue
@@ -18,7 +18,7 @@
 				</h3>
 			</div>
 			<div id="channels-list">
-				<Channel v-for="channel of channels" :name="channel.name"
+				<ChannelEntry v-for="channel of channels" :name="channel.name"
 					:uuid="channel.uuid" :current-uuid="(route.params.channelId as string)"
 					:href="`/servers/${route.params.serverId}/channels/${channel.uuid}`" />
 			</div>
@@ -33,6 +33,7 @@
 </template>
 
 <script lang="ts" setup>
+import ChannelEntry from "~/components/Guild/ChannelEntry.vue";
 
 const route = useRoute();
 
@@ -90,7 +91,8 @@ function handleMemberClick(member: GuildMemberResponse) {
 }
 
 #members-container {
-	width: 15rem;
+	min-width: 15rem;
+	max-width: 15rem;
 	border-left: 1px solid var(--padding-color);
 	background: var(--optional-member-list-background);
 }

From c9bea94ef834dfdbaf0b229e0543e2d83294829d Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Thu, 10 Jul 2025 23:03:46 +0200
Subject: [PATCH 5/7] fix: add missing imports

---
 components/Settings/UserSettings/Account.vue | 1 +
 components/Settings/UserSettings/Profile.vue | 3 +++
 pages/settings.vue                           | 5 ++++-
 3 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/components/Settings/UserSettings/Account.vue b/components/Settings/UserSettings/Account.vue
index bf87f6e..f096f74 100644
--- a/components/Settings/UserSettings/Account.vue
+++ b/components/Settings/UserSettings/Account.vue
@@ -17,6 +17,7 @@
 </template>
 
 <script lang="ts" setup>
+import Button from '~/components/UserInterface/Button.vue';
 import type { UserResponse } from '~/types/interfaces';
 
 const { fetchUser } = useAuth();
diff --git a/components/Settings/UserSettings/Profile.vue b/components/Settings/UserSettings/Profile.vue
index 04d1e30..99880fa 100644
--- a/components/Settings/UserSettings/Profile.vue
+++ b/components/Settings/UserSettings/Profile.vue
@@ -33,6 +33,9 @@
 </template>
 
 <script lang="ts" setup>
+import UserPopup from '~/components/User/UserPopup.vue';
+import Button from '~/components/UserInterface/Button.vue';
+
 import type { UserResponse } from '~/types/interfaces';
 
 let newPfpFile: File;
diff --git a/pages/settings.vue b/pages/settings.vue
index 089f44b..05eb5d7 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -8,7 +8,7 @@
               <Icon class="back-button" size="2em" name="lucide:circle-arrow-left" alt="Back"></Icon>
             </span>
           </p>
-          <verticalSpacer />
+          <VerticalSpacer />
 
           <!-- categories and dynamic settings pages -->
           <div v-for="category in categories" :key="category.displayName">
@@ -46,6 +46,9 @@
 
 
 <script lang="ts" setup>
+import VerticalSpacer from '~/components/UserInterface/VerticalSpacer.vue';
+import Button from '~/components/UserInterface/Button.vue';
+
 const { logout } = useAuth()
 const appConfig = useRuntimeConfig()
 

From 34976b4f50ed6351e3e2c3b9a4701627ae02c016 Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Thu, 10 Jul 2025 23:12:44 +0200
Subject: [PATCH 6/7] feat: finish DM sidebar

---
 components/DirectMessagesSidebar.vue        | 41 +++++++++++++--------
 components/User/UserEntry.vue               |  7 +++-
 components/UserInterface/VerticalSpacer.vue |  9 -----
 pages/me/index.vue                          | 17 +--------
 4 files changed, 34 insertions(+), 40 deletions(-)

diff --git a/components/DirectMessagesSidebar.vue b/components/DirectMessagesSidebar.vue
index d9f677d..dece975 100644
--- a/components/DirectMessagesSidebar.vue
+++ b/components/DirectMessagesSidebar.vue
@@ -1,20 +1,29 @@
 <template>
-	<div id="friend-sidebar">
-		<div id="server-title">
-			<h3>Direct Messages</h3>
-		</div>
-		<verticalSpacer />
-		<div id="direct-message-list">
-			<UserEntry v-for="user of friends" :user="user" :name="user.display_name || user.username"
-				:href="`/me/${user.uuid}`"/> 
-			<!-- <Channel v-for="channel of channels" :name="channel.name"
-				:uuid="channel.uuid" :current-uuid="(route.params.channelId as string)"
-				:href="`/servers/${route.params.serverId}/channels/${channel.uuid}`" /> -->
+	<div id="middle-left-column">
+		<div id="friend-sidebar">
+			<div id="server-title">
+				<h3>Direct Messages</h3>
+			</div>
+			<VerticalSpacer />
+			<NuxtLink class="user-item" :href="`/me/friends`" tabindex="0">
+				<Icon class="user-avatar" name="lucide:user" />
+				<span class="user-display-name">Friends</span>
+			</NuxtLink>
+			<VerticalSpacer />
+			<div id="direct-message-list">
+				<UserEntry v-for="user of friends" :user="user" :name="user.display_name || user.username"
+					:href="`/me/${user.uuid}`"/> 
+				<!-- <Channel v-for="channel of channels" :name="channel.name"
+					:uuid="channel.uuid" :current-uuid="(route.params.channelId as string)"
+					:href="`/servers/${route.params.serverId}/channels/${channel.uuid}`" /> -->
+			</div>
 		</div>
 	</div>
 </template>
 
 <script lang="ts" setup>
+import VerticalSpacer from './UserInterface/VerticalSpacer.vue';
+
 const { fetchFriends } = useApi();
 
 const friends = await fetchFriends()
@@ -28,11 +37,13 @@ definePageMeta({
 </script>
 
 <style>
-#friend-sidebar {
-	padding-left: .5em;
-	padding-right: .5em;
-	border-right: 1px solid var(--padding-color);
+#middle-left-column {
 	background: var(--optional-channel-list-background);
 	background-color: var(--sidebar-background-color);
 }
+
+#friend-sidebar {
+	padding-left: .5em;
+	padding-right: .5em;
+}
 </style>
\ No newline at end of file
diff --git a/components/User/UserEntry.vue b/components/User/UserEntry.vue
index dcea368..b463759 100644
--- a/components/User/UserEntry.vue
+++ b/components/User/UserEntry.vue
@@ -24,7 +24,12 @@ const props = defineProps<{
 	margin-bottom: .5em;
 	gap: .5em;
     
-	cursor: pointer;
+    text-decoration: none;
+    color: inherit;
+}
+
+.user-item:hover {
+    background-color: #00000020
 }
 
 .user-avatar {
diff --git a/components/UserInterface/VerticalSpacer.vue b/components/UserInterface/VerticalSpacer.vue
index 293e9f0..8ac1bd6 100644
--- a/components/UserInterface/VerticalSpacer.vue
+++ b/components/UserInterface/VerticalSpacer.vue
@@ -2,15 +2,6 @@
   <span class="spacer"></span>
 </template>
 
-<script lang="ts" setup>
-import type { UserResponse } from '~/types/interfaces';
-
-const props = defineProps<{
-	user: UserResponse,
-}>();
-
-</script>
-
 <style scoped>
 .spacer {
   height: 0.2dvh;
diff --git a/pages/me/index.vue b/pages/me/index.vue
index 41deadf..701481d 100644
--- a/pages/me/index.vue
+++ b/pages/me/index.vue
@@ -1,19 +1,6 @@
 <template>
-  <NuxtLayout>
-    <div id="left-bar">
-    </div>
-	<div id="middle-bar">
-      <h1>
-        Welcome to gorb :3
-      </h1>
-	  <p>
-		Click on a guild to the left to view a guild.
-		<br>
-		Or click the button in the bottom left to join a guild.
-	  </p>
-    </div>
-	<div id="right-bar">
-    </div>
+  <NuxtLayout name="client">
+	<DirectMessagesSidebar />
   </NuxtLayout>
 </template>
 

From 0562127e4aedb9cb23e1994a33bb6d35937485b8 Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Fri, 11 Jul 2025 01:45:24 +0200
Subject: [PATCH 7/7] feat: finish entire friends menu

---
 components/Me/AddFriend.vue                   | 63 ++++++++++++++
 components/{ => Me}/DirectMessagesSidebar.vue | 10 +--
 components/Me/FriendsList.vue                 | 61 ++++++++++++++
 composables/api.ts                            | 10 +++
 pages/me/[userId].vue                         | 20 +++++
 pages/me/friends.vue                          | 82 +++++++++++++++++++
 pages/me/index.vue                            |  2 +
 7 files changed, 243 insertions(+), 5 deletions(-)
 create mode 100644 components/Me/AddFriend.vue
 rename components/{ => Me}/DirectMessagesSidebar.vue (73%)
 create mode 100644 components/Me/FriendsList.vue
 create mode 100644 pages/me/[userId].vue
 create mode 100644 pages/me/friends.vue

diff --git a/components/Me/AddFriend.vue b/components/Me/AddFriend.vue
new file mode 100644
index 0000000..0867a0e
--- /dev/null
+++ b/components/Me/AddFriend.vue
@@ -0,0 +1,63 @@
+<template>
+	<div style="text-align: left;">
+		<h3>Add a Friend</h3>
+		Enter a friend's Gorb ID to send them a friend request.
+	</div>
+	
+	<div id="add-friend-search-bar">
+		<input id="add-friend-search-input" ref="inputField"
+				placeholder="blahaj.enjoyer?" maxlength="32" @keypress.enter="sendRequest"/> <!-- REMEMBER TO CHANGE THIS WHEN WE ADD FEDERATION--> 
+		<Button id="friend-request-button" :callback="sendRequest" text="Send Friend Request"></Button>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import Button from '../UserInterface/Button.vue';
+
+const inputField = ref<HTMLInputElement>();
+const { addFriend } = useApi();
+
+
+async function sendRequest() {
+	if (inputField.value) {
+		try {
+			await addFriend(inputField.value.value)
+			alert("Friend request sent!")
+		} catch {
+			alert("Request failed :(")
+		} 
+	}
+}
+</script>
+<style>
+
+#add-friend-search-bar {
+	display: flex;
+
+	text-align: left;
+	margin-top: .8em;
+	padding: .3em .3em;
+
+	border-radius: 1em;
+	border: 1px solid var(--accent-color);
+}
+
+#add-friend-search-input {
+	border: none;
+	box-sizing: border-box;
+
+	margin: 0 .2em;
+
+	flex-grow: 1;
+	
+	color: inherit;
+	background-color: unset;
+	font-weight: medium;
+	letter-spacing: .04em;
+}
+
+#add-friend-search-input:empty:before {
+	content: attr(placeholder);
+	color: gray;
+}
+</style>
\ No newline at end of file
diff --git a/components/DirectMessagesSidebar.vue b/components/Me/DirectMessagesSidebar.vue
similarity index 73%
rename from components/DirectMessagesSidebar.vue
rename to components/Me/DirectMessagesSidebar.vue
index dece975..5a0e99d 100644
--- a/components/DirectMessagesSidebar.vue
+++ b/components/Me/DirectMessagesSidebar.vue
@@ -5,24 +5,24 @@
 				<h3>Direct Messages</h3>
 			</div>
 			<VerticalSpacer />
+
 			<NuxtLink class="user-item" :href="`/me/friends`" tabindex="0">
 				<Icon class="user-avatar" name="lucide:user" />
 				<span class="user-display-name">Friends</span>
 			</NuxtLink>
 			<VerticalSpacer />
+			
 			<div id="direct-message-list">
 				<UserEntry v-for="user of friends" :user="user" :name="user.display_name || user.username"
-					:href="`/me/${user.uuid}`"/> 
-				<!-- <Channel v-for="channel of channels" :name="channel.name"
-					:uuid="channel.uuid" :current-uuid="(route.params.channelId as string)"
-					:href="`/servers/${route.params.serverId}/channels/${channel.uuid}`" /> -->
+						:href="`/me/${user.uuid}`"/> 
 			</div>
 		</div>
 	</div>
 </template>
 
 <script lang="ts" setup>
-import VerticalSpacer from './UserInterface/VerticalSpacer.vue';
+import VerticalSpacer from '~/components/UserInterface/VerticalSpacer.vue';
+
 
 const { fetchFriends } = useApi();
 
diff --git a/components/Me/FriendsList.vue b/components/Me/FriendsList.vue
new file mode 100644
index 0000000..8fc7daf
--- /dev/null
+++ b/components/Me/FriendsList.vue
@@ -0,0 +1,61 @@
+<template>
+	<input id="search-friend-bar" placeholder="search"/>
+
+	<!-- we aren't checking for the #all hash, since this is the default and fallback one -->
+
+	<p v-if="props.variant === '#online'" style="text-align: left;">Online – {{ "N/A" }}</p>
+	<p v-else-if="props.variant === '#pending'" style="text-align: left;">Friend Requests – {{ "N/A" }}</p>
+	<p v-else style="text-align: left;">Friends – {{ friends?.length || "N/A" }}</p>
+
+	<div id="friends-list">
+		<div v-if="props.variant === '#online'">
+			Not Implemented
+		</div>
+
+		<div v-else-if="props.variant === '#pending'">
+			Not Implemented
+		</div>
+
+		<div v-else>
+			<UserEntry v-for="user of friends" :user="user" :name="user.display_name || user.username"
+			:href="`/me/${user.uuid}`"/> 
+		</div>
+	</div>
+</template>
+
+<script lang="ts" setup>
+const { fetchFriends } = useApi();
+
+const friends = await fetchFriends()
+
+const props = defineProps<{
+    variant: string
+}>();
+
+console.log("props", props.variant)
+
+</script>
+
+<style>
+#search-friend-bar {
+	text-align: left;
+	margin-top: .8em;
+	padding: .3em .5em;
+	width: 100%;
+
+	border-radius: 1em;
+	border: 1px solid var(--accent-color);
+
+	box-sizing: border-box;
+	
+	color: inherit;
+	background-color: unset;
+	font-weight: medium;
+	letter-spacing: .04em;
+}
+
+#search-friend-bar:empty:before {
+	content: attr(placeholder);
+	color: gray;
+}
+</style>
\ No newline at end of file
diff --git a/composables/api.ts b/composables/api.ts
index 8a37a8e..0cd6db0 100644
--- a/composables/api.ts
+++ b/composables/api.ts
@@ -37,6 +37,14 @@ export const useApi = () => {
 		return await fetchWithApi('/me/friends')
 	}
 
+	async function addFriend(username: string): Promise<void> {
+		await fetchWithApi('/me/friends', { method: "POST", body: { username } });
+	}
+
+	async function removeFriend(userId: string): Promise<void> {
+		await fetchWithApi(`/me/friends/${userId}`, { method: "DELETE" });
+	}
+
 	async function fetchMessages(channelId: string, options?: { amount?: number, offset?: number }): Promise<MessageResponse[] | undefined> {
 		return await fetchWithApi(`/channels/${channelId}/messages`, { query: { amount: options?.amount ?? 100, offset: options?.offset ?? 0 } });
 	}
@@ -64,6 +72,8 @@ export const useApi = () => {
 		fetchUsers,
 		fetchUser,
 		fetchFriends,
+		addFriend,
+		removeFriend,
 		fetchMessages,
 		fetchMessage,
 		fetchInstanceStats,
diff --git a/pages/me/[userId].vue b/pages/me/[userId].vue
new file mode 100644
index 0000000..d466938
--- /dev/null
+++ b/pages/me/[userId].vue
@@ -0,0 +1,20 @@
+<template>
+  <NuxtLayout name="client">
+	<DirectMessagesSidebar />
+	<MessageArea channel-url="channels/01970e8c-a09c-76a0-9c98-80a43364bea7"/>
+
+  </NuxtLayout>
+</template>
+
+<script lang="ts" setup>
+import DirectMessagesSidebar from '~/components/Me/DirectMessagesSidebar.vue';
+
+definePageMeta({
+	layout: "client"
+});
+
+</script>
+
+<style>
+
+</style>
\ No newline at end of file
diff --git a/pages/me/friends.vue b/pages/me/friends.vue
new file mode 100644
index 0000000..b284658
--- /dev/null
+++ b/pages/me/friends.vue
@@ -0,0 +1,82 @@
+<template>
+  <NuxtLayout name="client">
+	<DirectMessagesSidebar />
+	<div id="friends-page-content">
+		<div id="navigation-bar">
+			<NuxtLink class="friends-sub-page-button" @click.prevent="updateHash('all')">All Friends</NuxtLink>
+			<NuxtLink class="friends-sub-page-button" @click.prevent="updateHash('online')">Online</NuxtLink>
+			<NuxtLink class="friends-sub-page-button" @click.prevent="updateHash('pending')">Pending</NuxtLink>
+			<NuxtLink class="friends-sub-page-button friend-primary-button" @click.prevent="updateHash('addfriend')">Add Friend</NuxtLink>
+		</div>
+		
+		<div>
+			<AddFriend v-if="windowHash == '#addfriend'"></AddFriend>
+			<FriendsList v-else :variant="windowHash"></FriendsList>
+		</div>
+
+	</div>
+  </NuxtLayout>
+</template>
+
+<script lang="ts" setup>
+import AddFriend from '~/components/Me/AddFriend.vue';
+import DirectMessagesSidebar from '~/components/Me/DirectMessagesSidebar.vue';
+import FriendsList from '~/components/Me/FriendsList.vue';
+
+let windowHash = ref(window.location.hash)
+
+
+function updateHash(newHash: string) {
+	window.location.hash = newHash
+	windowHash.value = `#${newHash}`;
+}
+</script>
+
+<style>
+#friends-page-content {
+	display: flex;
+	flex-direction: column;
+	
+	flex-grow: 1;
+
+	margin: .75em;
+}
+
+#navigation-bar {
+	display: flex;
+	align-items: left;
+	text-align: left;
+	flex-direction: row;
+
+	gap: .5em;
+}
+
+.friends-sub-page-button {
+	text-decoration: none;
+	color: inherit;
+	font-weight: medium;
+
+	padding: 0.2em .5em;
+	
+	flex-shrink: 0;
+	border-radius: 1em;
+	background-color: var(--accent-color);
+
+	display: inline-block;
+	text-align: center;
+	align-content: center;
+	cursor: pointer;
+
+	transition: background-color 300ms;
+}
+.friends-sub-page-button:hover {
+	background-color: var(--accent-highlighted-color);
+}
+
+.friend-primary-button {
+	background-color: var(--primary-color);
+}
+.friend-primary-button:hover {
+	background-color: var(--primary-highlighted-color);
+}
+</style>
\ No newline at end of file
diff --git a/pages/me/index.vue b/pages/me/index.vue
index 701481d..b075668 100644
--- a/pages/me/index.vue
+++ b/pages/me/index.vue
@@ -5,6 +5,8 @@
 </template>
 
 <script lang="ts" setup>
+import DirectMessagesSidebar from '~/components/Me/DirectMessagesSidebar.vue';
+
 
 definePageMeta({
 	layout: "client"