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