✨ Name card

pkg/views/package.json

@@ -16,6 +16,8 @@
     "@fontsource/roboto": "^5.0.12",
     "@mdi/font": "^7.4.47",
     "@unocss/reset": "^0.58.5",
+    "dompurify": "^3.0.10",
+    "marked": "^12.0.1",
     "pinia": "^2.1.7",
     "universal-cookie": "^7.1.0",
     "unocss": "^0.58.5",
@@ -26,6 +28,7 @@
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.3.3",
     "@tsconfig/node20": "^20.1.2",
+    "@types/dompurify": "^3.0.5",
     "@types/node": "^20.11.25",
     "@vitejs/plugin-vue": "^5.0.4",
     "@vitejs/plugin-vue-jsx": "^3.1.0",

pkg/views/src/views/dashboard.vue

@@ -1,7 +1,9 @@
 <template>
   <div>
-    <v-card class="px-1 mb-3">
-      <v-card-text class="flex gap-3.5">
+    <v-card>
+      <v-img cover class="bg-grey-lighten-2" :height="240" :src="'/api/avatar/' + id.userinfo.data.banner" />
+
+      <v-card-text class="flex gap-3.5 px-5 pb-5">
         <v-avatar
           color="grey-lighten-2"
           icon="mdi-account-circle"
@@ -10,8 +12,19 @@
           :image="'/api/avatar/' + id.userinfo.data.avatar"
         />
         <div>
-          <h1 class="text-2xl">{{ id.userinfo.displayName }}</h1>
-          <p>What can I help you today?</p>
+          <h1 class="text-2xl cursor-pointer" @click="show.realname = !show.realname">{{ displayName }}</h1>
+          <p v-html="description"></p>
+
+          <div class="mt-5">
+            <p class="opacity-80 desc-line">
+              <v-icon icon="mdi-calendar-blank" size="16" />
+              <span>Joined at {{ new Date(id.userinfo.data?.created_at)?.toLocaleString() }}</span>
+            </p>
+            <p class="opacity-80 desc-line">
+              <v-icon icon="mdi-cake-variant" size="16" />
+              <span>Birthday is {{ new Date(id.userinfo.data?.profile.birthday)?.toLocaleString() }}</span>
+            </p>
+          </div>
         </div>
       </v-card-text>
     </v-card>
@@ -20,10 +33,43 @@
 
 <script setup lang="ts">
 import { useUserinfo } from "@/stores/userinfo"
+import { computed } from "vue"
+import { reactive } from "vue"
+import { parse } from "marked"
+import dompurify from "dompurify"
 
 const id = useUserinfo()
+
+const displayName = computed(() => {
+  if (show.realname) {
+    return (
+      (id.userinfo.data?.profile?.first_name ?? "Unknown") + " " + (id.userinfo.data?.profile?.last_name ?? "Unknown")
+    )
+  } else {
+    return id.userinfo.displayName
+  }
+})
+const description = computed(() => {
+  if (id.userinfo.data?.description) {
+    return dompurify().sanitize(parse(id.userinfo.data?.description) as string)
+  } else {
+    return "No description yet."
+  }
+})
+
+const show = reactive({
+  realname: false,
+})
 </script>
 
+<style scoped>
+.desc-line {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+</style>
+
 <style>
 .rounded-card {
   border-radius: 8px;

pkg/views/src/views/personalize.vue

@@ -138,6 +138,7 @@ watch(
     if (val.isReady) {
       data.value.name = id.userinfo.data.name
       data.value.nick = id.userinfo.data.nick
+      data.value.description = id.userinfo.data.description
       data.value.first_name = id.userinfo.data.profile.first_name
       data.value.last_name = id.userinfo.data.profile.last_name
       data.value.birthday = id.userinfo.data.profile.birthday