Work on note component

frontend-vue/src/components/user/PreviewHeader.vue

@@ -1,18 +1,33 @@
 <script setup lang="ts">
-import { defineProps } from "vue"
+import { defineProps } from 'vue'
 import type { User } from '../../stores/userdata'
 import ProfilePicture from '@/components/user/ProfilePicture.vue'
 import FormattedText from '@/components/util/FormattedText.vue'
-  const props = defineProps<{
-    user: User
-  }>()
+
+const props = defineProps<{
+  user: User
+}>()
 </script>
 <template>
   <div class="account-header">
-    <ProfilePicture :username="props.user.username" :media="props.user.profilePicture" />
+    <div class="pfp-wrapper">
+      <ProfilePicture
+        class="pfp"
+        :size="48"
+        :username="props.user.username"
+        :media="props.user.profilePicture"
+      />
+    </div>
     <div class="account-info">
-      <FormattedText :raw-text="props.user.displayName"/>
-      <p>{{props.user.username}}</p>
+      <FormattedText class="displayname" :raw-text="props.user.displayName" />
+      <p class="username">{{ props.user.username }}</p>
+    </div>
+    <div class="filler"/>
+    <!-- TODO: Distinguish this from buttons.
+    It is not a button. It is not clickable. It must not look like the clickable things
+    -->
+    <div class="server-wrapper">
+      <p class="server-name">{{props.user.server.name}}</p>
     </div>
   </div>
 </template>
@@ -21,10 +36,35 @@ import FormattedText from '@/components/util/FormattedText.vue'
 .account-header {
   display: flex;
   flex-direction: row;
+  height: 4em;
+  background-color: var(--accent);
+  padding: 0 0.6em 0.6em 0.6em;
 }
-.account-header {
+
+.pfp {
+  margin-right: 1em;
+}
+
+.pfp-wrapper {
+  margin-top: 1em;
   display: flex;
-  flex-direction: column;
-  align-items: flex-start;
+  flex-direction: row;
+  align-items: center;
+}
+
+.displayname {
+  font-weight: bold;
+}
+.username {
+  margin-top: -0.75em;
+  font-size: 0.9em;
+}
+.filler {
+  flex-grow: 1;
+}
+.server-name {
+  border: var(--text) 1px solid;
+  border-radius: 0.6em;
+  padding: 0.2em;
 }
 </style>