refactor: try sorting components into sub-folders

components/User/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>

components/User/UserPopup.vue

@@ -0,0 +1,89 @@
+<template>
+  <div id="profile-popup">
+    <img v-if="props.user.avatar" id="avatar" :src="props.user.avatar" alt="profile avatar">
+    <Icon v-else id="avatar" name="lucide:user" />
+
+    <div id="cover-color"></div>
+    <div id="main-body">
+      <p id="display-name">
+        <strong>{{ props.user.display_name }}</strong>
+      </p>
+      <p id="username-and-pronouns">
+        {{ props.user.username }}
+        <span v-if="props.user.pronouns"> - {{ props.user.pronouns }}</span>
+      </p>
+      <div id="about-me" v-if="props.user.about">
+        {{ props.user.about }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { UserResponse } from '~/types/interfaces';
+
+const { fetchMembers } = useApi();
+
+const props = defineProps<{
+	user: UserResponse
+}>();
+
+</script>
+
+<style scoped>
+#profile-popup {
+  min-width: 300px;
+  max-width: 300px;
+  border-radius: 8px;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+}
+
+#cover-color {
+  border-radius: 12px 12px 0 0;
+  min-height: 60px;
+  background-color: var(--primary-color);
+}
+
+#main-body {
+  border-radius: 0 0 12px 12px;
+  padding: 12px;
+  min-height: 280px;
+  background-color: var(--accent-color);
+  overflow-wrap: break-word;
+  hyphens: manual;
+}
+
+#avatar {
+  width: 96px;
+  height: 96px;
+  border: 5px solid #4b3018;
+  background-color: var(--secondary-color);
+  border-radius: 100%;
+  position: absolute;
+  left: 16px;
+  top: 16px;
+}
+
+
+#display-name {
+  margin-top: 60px;
+  margin-bottom: 0;
+  font-size: 28px;
+}
+
+#username-and-pronouns {
+  margin: 2px;
+  font-size: 16px;
+}
+
+#about-me {
+  background-color: var(--secondary-color);
+  border-radius: 12px;
+
+  margin-top: 32px;
+  padding: 16px;
+  font-size: 16px;
+}
+</style>