From b1a3ce9b00977c4bf74af610f944c885eb2ef719 Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Thu, 10 Jul 2025 22:18:28 +0200
Subject: [PATCH 1/4] feat: update interface to include friends_since

---
 types/interfaces.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/types/interfaces.ts b/types/interfaces.ts
index 610d007..7b9a97b 100644
--- a/types/interfaces.ts
+++ b/types/interfaces.ts
@@ -61,7 +61,8 @@ export interface UserResponse {
 	pronouns: string | null,
 	about: string | null,
 	email?: string,
-	email_verified?: boolean
+	email_verified?: boolean,
+	friends_since: string | null,
 }
 
 export interface StatsResponse {

From 8a9ecaa2e2ead30576367a2bd275c70edeb1da19 Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Thu, 10 Jul 2025 22:44:18 +0200
Subject: [PATCH 2/4] refactor: move spacer into it's own component

---
 components/VerticalSpacer.vue | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)
 create mode 100644 components/VerticalSpacer.vue

diff --git a/components/VerticalSpacer.vue b/components/VerticalSpacer.vue
new file mode 100644
index 0000000..293e9f0
--- /dev/null
+++ b/components/VerticalSpacer.vue
@@ -0,0 +1,21 @@
+<template>
+  <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;
+  display: block;
+  margin: 0.8dvh 0.2dvw;
+  background-color: var(--padding-color);
+}
+</style>

From 5dbf21b0abb975d98ae1e825fd6edaf01fab36dc Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Thu, 10 Jul 2025 22:44:46 +0200
Subject: [PATCH 3/4] feat: implement friends list

---
 components/DirectMessagesSidebar.vue | 38 ++++++++++++++++++++++++++++
 components/UserEntry.vue             | 35 +++++++++++++++++++++++++
 2 files changed, 73 insertions(+)
 create mode 100644 components/DirectMessagesSidebar.vue
 create mode 100644 components/UserEntry.vue

diff --git a/components/DirectMessagesSidebar.vue b/components/DirectMessagesSidebar.vue
new file mode 100644
index 0000000..d9f677d
--- /dev/null
+++ b/components/DirectMessagesSidebar.vue
@@ -0,0 +1,38 @@
+<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>
+	</div>
+</template>
+
+<script lang="ts" setup>
+const { fetchFriends } = useApi();
+
+const friends = await fetchFriends()
+
+console.log(friends)
+
+definePageMeta({
+	layout: "client"
+});
+
+</script>
+
+<style>
+#friend-sidebar {
+	padding-left: .5em;
+	padding-right: .5em;
+	border-right: 1px solid var(--padding-color);
+	background: var(--optional-channel-list-background);
+	background-color: var(--sidebar-background-color);
+}
+</style>
\ No newline at end of file
diff --git a/components/UserEntry.vue b/components/UserEntry.vue
new file mode 100644
index 0000000..dcea368
--- /dev/null
+++ b/components/UserEntry.vue
@@ -0,0 +1,35 @@
+<template>
+    <NuxtLink class="user-item" :href="`/me/${user.uuid}`" tabindex="0">
+        <img v-if="props.user.avatar" class="user-avatar" :src="props.user.avatar" :alt="props.user.display_name ?? props.user.username" />
+        <Icon v-else class="user-avatar" name="lucide:user" />
+        <span class="user-display-name">{{ props.user.display_name || props.user.username }}</span>
+	</NuxtLink>
+</template>
+
+<script lang="ts" setup>
+import type { UserResponse } from '~/types/interfaces';
+
+const props = defineProps<{
+    user: UserResponse
+}>();
+</script>
+
+<style>
+.user-item {
+    display: flex;
+	align-items: center;
+	text-align: left;
+
+	margin-top: .5em;
+	margin-bottom: .5em;
+	gap: .5em;
+    
+	cursor: pointer;
+}
+
+.user-avatar {
+    width: 2.3em;
+    height: 2.3em;
+    border-radius: 50%;
+}
+</style>

From 15e5a21277f487174f66dcc6113edf2aae2265bd Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Thu, 10 Jul 2025 22:47:52 +0200
Subject: [PATCH 4/4] refactor: try sorting components into sub-folders

---
 components/{ => Guild}/Channel.vue            |  0
 components/{ => Member}/MemberEntry.vue       |  0
 components/{ => Popups}/CropPopup.vue         |  0
 components/{ => Popups}/InvitePopup.vue       |  0
 components/{ => Popups}/Loading.vue           |  0
 components/{ => User}/UserEntry.vue           |  0
 components/{ => User}/UserPopup.vue           |  0
 components/UserArea.vue                       | 20 -------------------
 components/{ => UserInterface}/Button.vue     |  0
 .../{ => UserInterface}/VerticalSpacer.vue    |  0
 10 files changed, 20 deletions(-)
 rename components/{ => Guild}/Channel.vue (100%)
 rename components/{ => Member}/MemberEntry.vue (100%)
 rename components/{ => Popups}/CropPopup.vue (100%)
 rename components/{ => Popups}/InvitePopup.vue (100%)
 rename components/{ => Popups}/Loading.vue (100%)
 rename components/{ => User}/UserEntry.vue (100%)
 rename components/{ => User}/UserPopup.vue (100%)
 delete mode 100644 components/UserArea.vue
 rename components/{ => UserInterface}/Button.vue (100%)
 rename components/{ => UserInterface}/VerticalSpacer.vue (100%)

diff --git a/components/Channel.vue b/components/Guild/Channel.vue
similarity index 100%
rename from components/Channel.vue
rename to components/Guild/Channel.vue
diff --git a/components/MemberEntry.vue b/components/Member/MemberEntry.vue
similarity index 100%
rename from components/MemberEntry.vue
rename to components/Member/MemberEntry.vue
diff --git a/components/CropPopup.vue b/components/Popups/CropPopup.vue
similarity index 100%
rename from components/CropPopup.vue
rename to components/Popups/CropPopup.vue
diff --git a/components/InvitePopup.vue b/components/Popups/InvitePopup.vue
similarity index 100%
rename from components/InvitePopup.vue
rename to components/Popups/InvitePopup.vue
diff --git a/components/Loading.vue b/components/Popups/Loading.vue
similarity index 100%
rename from components/Loading.vue
rename to components/Popups/Loading.vue
diff --git a/components/UserEntry.vue b/components/User/UserEntry.vue
similarity index 100%
rename from components/UserEntry.vue
rename to components/User/UserEntry.vue
diff --git a/components/UserPopup.vue b/components/User/UserPopup.vue
similarity index 100%
rename from components/UserPopup.vue
rename to components/User/UserPopup.vue
diff --git a/components/UserArea.vue b/components/UserArea.vue
deleted file mode 100644
index d922c3f..0000000
--- a/components/UserArea.vue
+++ /dev/null
@@ -1,20 +0,0 @@
-<template>
-	<div id="user-panel">
-		HELLO!!
-	</div>
-</template>
-
-<script lang="ts" setup>
-import type { UserResponse } from '~/types/interfaces';
-
-const props = defineProps<{
-	user: UserResponse,
-}>();
-
-</script>
-
-<style scoped>
-#user-panel {
-	width: 100%;
-}
-</style>
\ No newline at end of file
diff --git a/components/Button.vue b/components/UserInterface/Button.vue
similarity index 100%
rename from components/Button.vue
rename to components/UserInterface/Button.vue
diff --git a/components/VerticalSpacer.vue b/components/UserInterface/VerticalSpacer.vue
similarity index 100%
rename from components/VerticalSpacer.vue
rename to components/UserInterface/VerticalSpacer.vue