feat: icons, user popus, and polish

user popus are WEIRD, and i need help with layering

components/MemberEntry.vue

@@ -0,0 +1,39 @@
+<template>
+    <div class="member-item" @click="togglePopup" @blur="hidePopup" tabindex="0">
+        <img v-if="props.member.user.avatar" class="member-avatar" :src="props.member.user.avatar" :alt="props.member.user.display_name ?? props.member.user.username" />
+        <Icon v-else class="member-avatar" name="lucide:user" />
+        <span class="member-display-name">{{ props.member.user.display_name ?? props.member.user.username }}</span>
+        <UserPopup v-if="isPopupVisible" :user="props.member.user" class="profile-popup" />
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import type { GuildMemberResponse } from '~/types/interfaces';
+import UserPopup from './UserPopup.vue';
+
+const props = defineProps<{
+    member: GuildMemberResponse
+}>();
+
+const isPopupVisible = ref(false);
+
+const togglePopup = () => {
+    isPopupVisible.value = !isPopupVisible.value;
+};
+
+const hidePopup = () => {
+    isPopupVisible.value = false;
+};
+</script>
+
+<style>
+.member-item {
+    position: relative; /* Set the position to relative for absolute positioning of the popup */
+}
+
+.profile-popup {
+    position: absolute; /* Use absolute positioning */
+    left: -100px; /* Adjust this value to position the popup to the left */
+}
+</style>

components/Message.vue

@@ -81,7 +81,7 @@ onMounted(async () => {
 	text-align: left;
 	/* border: 1px solid lightcoral; */
 	display: grid;
-	grid-template-columns: 2dvw 1fr;
+	grid-template-columns: 2rem 1fr;
 	align-items: center;
 	column-gap: 1dvw;
 	width: 100%;
@@ -129,10 +129,11 @@ onMounted(async () => {
 }
 
 .left-column {
+	min-width: 2rem;
 	display: flex;
+	justify-content: center;
 	text-align: center;
 	white-space: nowrap;
-	
 }
 
 .author-username {

components/UserArea.vue

@@ -0,0 +1,20 @@
+<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>

components/UserPopup.vue

@@ -1,6 +1,8 @@
 <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-colour"></div>
     <div id="main-body">
       <p id="display-name">