💄 Account profile page new UI

app/components.d.ts

@@ -26,6 +26,7 @@ declare module 'vue' {
     NDialog: typeof import('naive-ui')['NDialog']
     NDialogProvider: typeof import('naive-ui')['NDialogProvider']
     NDropdown: typeof import('naive-ui')['NDropdown']
+    NEmpty: typeof import('naive-ui')['NEmpty']
     NForm: typeof import('naive-ui')['NForm']
     NFormItem: typeof import('naive-ui')['NFormItem']
     NIcon: typeof import('naive-ui')['NIcon']
@@ -71,6 +72,7 @@ declare global {
   const NDialog: typeof import('naive-ui')['NDialog']
   const NDialogProvider: typeof import('naive-ui')['NDialogProvider']
   const NDropdown: typeof import('naive-ui')['NDropdown']
+  const NEmpty: typeof import('naive-ui')['NEmpty']
   const NForm: typeof import('naive-ui')['NForm']
   const NFormItem: typeof import('naive-ui')['NFormItem']
   const NIcon: typeof import('naive-ui')['NIcon']

app/layouts/default.vue

@@ -31,7 +31,7 @@
       </div>
     </header>
 
-    <main class="grow container mx-auto py-4 mt-[64px]">
+    <main class="grow mt-[64px]">
       <slot />
     </main>
   </div>

app/pages/accounts/[name].vue

@@ -1,121 +1,133 @@
 <template>
-  <div v-if="user">
+  <div>
+    <div class="fixed inset-0" :style="pageStyle" />
     <img
       :src="userBackground"
-      class="object-cover w-full max-h-48 mb-8"
+      class="w-full max-h-48 object-cover object-top"
-      style="aspect-ratio: 16/7"
+      :style="{ aspectRatio: '16/7', opacity: headerOpacity }"
     />
 
-    <div class="container mx-auto px-8 pb-8">
+    <div v-if="user" class="relative min-h-layout backdrop-blur-md">
-      <div class="flex items-center gap-6 mb-8">
+      <div class="container mx-auto p-8 pt-12">
-        <v-avatar size="80" rounded="circle" :image="userPicture" />
+        <div class="flex items-center gap-6 mb-8">
-        <div>
+          <n-avatar :size="80" round :src="userPicture" />
-          <div class="text-2xl font-bold">
+          <div>
-            {{ user.nick || user.name }}
+            <div class="text-2xl font-bold">
+              {{ user.nick || user.name }}
+            </div>
+            <div class="text-sm opacity-80">@{{ user.name }}</div>
           </div>
-          <div class="text-body-2 text-medium-emphasis">@{{ user.name }}</div>
         </div>
-      </div>
 
-      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-        <div class="flex flex-col gap-4">
+          <div class="flex flex-col gap-4">
-          <v-card
+            <n-card
-            title="Info"
+              title="Info"
-            prepend-icon="mdi-information"
+              size="small"
-            density="comfortable"
+              :class="cardClass"
-          >
+              :style="cardStyle"
-            <v-card-text class="flex flex-col gap-2">
+              :content-style="cardContentStyle"
-              <div v-if="user?.profile?.timeZone" class="flex gap-2">
+            >
-                <span class="flex items-center gap-2 grow">
+              <template #header-extra>
-                  <v-icon>mdi-clock-outline</v-icon>
+                <n-icon :component="Info" />
-                  Time Zone
+              </template>
-                </span>
+              <div class="flex flex-col gap-2">
-                <span class="flex gap-2">
+                <div v-if="user?.profile?.timeZone" class="flex gap-2">
+                  <span class="flex items-center gap-2 grow">
+                    <n-icon :component="Clock" />
+                    Time Zone
+                  </span>
+                  <span class="flex gap-2">
+                    <span>
+                      {{
+                        new Date().toLocaleTimeString(void 0, {
+                          timeZone: user.profile.timeZone
+                        })
+                      }}
+                    </span>
+                    <span class="font-bold">·</span>
+                    <span>{{ getOffsetUTCString(user.profile.timeZone) }}</span>
+                    <span class="font-bold">·</span>
+                    <span>{{ user.profile.timeZone }}</span>
+                  </span>
+                </div>
+                <div v-if="user?.profile?.location" class="flex gap-2">
+                  <span class="flex items-center gap-2 grow">
+                    <n-icon :component="MapPin" />
+                    Location
+                  </span>
+                  <span>
+                    {{ user.profile.location }}
+                  </span>
+                </div>
+                <div
+                  v-if="user?.profile?.firstName || user?.profile?.lastName"
+                  class="flex gap-2"
+                >
+                  <span class="flex items-center gap-2 grow">
+                    <n-icon :component="UserPen" />
+                    Name
+                  </span>
                   <span>
                     {{
-                      new Date().toLocaleTimeString(void 0, {
+                      [
-                        timeZone: user.profile.timeZone
+                        user.profile.firstName,
-                      })
+                        user.profile.middleName,
+                        user.profile.lastName
+                      ]
+                        .filter(Boolean)
+                        .join(" ")
                     }}
                   </span>
-                  <span class="font-bold">·</span>
+                </div>
-                  <span>{{ getOffsetUTCString(user.profile.timeZone) }}</span>
+                <div
-                  <span class="font-bold">·</span>
+                  v-if="user?.profile?.gender || user?.profile?.pronouns"
-                  <span>{{ user.profile.timeZone }}</span>
+                  class="flex gap-2"
-                </span>
+                >
-              </div>
+                  <span class="flex items-center gap-2 grow">
-              <div v-if="user?.profile?.location" class="flex gap-2">
+                    <n-icon :component="User" />
-                <span class="flex items-center gap-2 grow">
+                    Gender
-                  <v-icon>mdi-map-marker-outline</v-icon>
+                  </span>
-                  Location
+                  <span class="flex gap-2">
-                </span>
+                    <span>{{ user.profile.gender || "Unspecified" }}</span>
-                <span>
+                    <span class="font-bold">·</span>
-                  {{ user.profile.location }}
+                    <span>{{ user.profile.pronouns || "Unspecified" }}</span>
-                </span>
+                  </span>
-              </div>
+                </div>
-              <div
+                <div class="flex gap-2">
-                v-if="user?.profile?.firstName || user?.profile?.lastName"
+                  <span class="flex items-center gap-2 grow">
-                class="flex gap-2"
+                    <n-icon :component="Calendar" />
-              >
+                    Joined at
-                <span class="flex items-center gap-2 grow">
+                  </span>
-                  <v-icon>mdi-account-edit-outline</v-icon>
-                  Name
-                </span>
-                <span>
-                  {{
-                    [
-                      user.profile.firstName,
-                      user.profile.middleName,
-                      user.profile.lastName
-                    ]
-                      .filter(Boolean)
-                      .join(" ")
-                  }}
-                </span>
-              </div>
-              <div
-                v-if="user?.profile?.gender || user?.profile?.pronouns"
-                class="flex gap-2"
-              >
-                <span class="flex items-center gap-2 grow">
-                  <v-icon>mdi-account-circle</v-icon>
-                  Gender
-                </span>
-                <span class="flex gap-2">
-                  <span>{{ user.profile.gender || "Unspecified" }}</span>
-                  <span class="font-bold">·</span>
-                  <span>{{ user.profile.pronouns || "Unspecified" }}</span>
-                </span>
-              </div>
-              <div class="flex gap-2">
-                <span class="flex items-center gap-2 grow">
-                  <v-icon>mdi-calendar-month-outline</v-icon>
-                  Joined at
-                </span>
-                <span>{{
-                  user ? new Date(user.createdAt).toLocaleDateString() : ""
-                }}</span>
-              </div>
-              <div v-if="user?.profile?.birthday" class="flex gap-2">
-                <span class="flex items-center gap-2 grow">
-                  <v-icon>mdi-cake-variant-outline</v-icon>
-                  Birthday
-                </span>
-                <span class="flex gap-2">
-                  <span
-                    >{{ calculateAge(new Date(user.profile.birthday)) }} yrs
-                    old</span
-                  >
-                  <span class="font-bold">·</span>
                   <span>{{
-                    new Date(user.profile.birthday).toLocaleDateString()
+                    user ? new Date(user.createdAt).toLocaleDateString() : ""
                   }}</span>
-                </span>
+                </div>
+                <div v-if="user?.profile?.birthday" class="flex gap-2">
+                  <span class="flex items-center gap-2 grow">
+                    <n-icon :component="Cake" />
+                    Birthday
+                  </span>
+                  <span class="flex gap-2">
+                    <span
+                      >{{ calculateAge(new Date(user.profile.birthday)) }} yrs
+                      old</span
+                    >
+                    <span class="font-bold">·</span>
+                    <span>{{
+                      new Date(user.profile.birthday).toLocaleDateString()
+                    }}</span>
+                  </span>
+                </div>
               </div>
-            </v-card-text>
+            </n-card>
-          </v-card>
+            <n-card
-          <v-card v-if="user?.perkSubscription">
+              v-if="user?.perkSubscription"
-            <v-card-text>
+              size="small"
+              :class="cardClass"
+              :style="cardStyle"
+              :content-style="cardContentStyle"
+            >
               <div class="flex justify-between items-center">
                 <div class="flex flex-col">
                   <div class="text-xl font-bold">
@@ -127,62 +139,93 @@
                   </div>
                   <div class="text-sm">Stellar Program Member</div>
                 </div>
-                <v-icon
+                <n-icon
-                  size="48"
+                  :size="48"
                   :color="
                     perkSubscriptionNames[user.perkSubscription.identifier]
                       ?.color || '#2196f3'
                   "
-                >
+                  :component="Star"
-                  mdi-star-circle
+                />
-                </v-icon>
               </div>
-            </v-card-text>
+            </n-card>
-          </v-card>
+            <n-card
-          <v-card>
+              size="small"
-            <v-card-text>
+              :class="cardClass"
+              :style="cardStyle"
+              :content-style="cardContentStyle"
+            >
               <div class="flex justify-between items-center mb-2">
                 <div>Level {{ user?.profile?.level || 0 }}</div>
                 <div>{{ user?.profile?.experience || 0 }} XP</div>
               </div>
-              <v-progress-linear
+              <n-progress
-                :model-value="user?.profile?.levelingProgress || 0"
+                type="line"
-                color="success"
+                :percentage="user?.profile?.levelingProgress || 0"
-                class="mb-0"
+                status="success"
-                rounded
+                :show-indicator="false"
               />
-            </v-card-text>
+            </n-card>
-          </v-card>
+          </div>
-        </div>
+          <div>
-        <div>
+            <n-card
-          <v-card v-if="htmlBio" title="Bio" prepend-icon="mdi-pencil">
+              v-if="htmlBio"
-            <v-card-text>
+              title="Bio"
+              size="small"
+              :class="cardClass"
+              :style="cardStyle"
+              :content-style="cardContentStyle"
+            >
+              <template #header-extra>
+                <n-icon :component="PenLine" />
+              </template>
               <article
                 class="bio-prose prose prose-sm dark:prose-invert prose-slate"
                 v-html="htmlBio"
               ></article>
-            </v-card-text>
+            </n-card>
-          </v-card>
+          </div>
         </div>
       </div>
     </div>
-  </div>
+    <div
-  <div v-else-if="notFound" class="flex justify-center items-center h-full">
+      v-else-if="notFound"
-    <v-empty-state
+      class="relative flex justify-center items-center h-full"
-      icon="mdi-account-off"
+    >
-      title="User not found"
+      <n-empty
-      text="The user profile you're trying to access is not found."
+        description="The user profile you're trying to access is not found."
-    />
+      >
-  </div>
+        <template #icon>
-  <div v-else class="flex justify-center items-center h-full">
+          <n-icon :component="UserX" />
-    <v-progress-circular indeterminate size="64" color="primary" />
+        </template>
+        <template #extra>
+          <div class="text-lg font-bold">User not found</div>
+        </template>
+      </n-empty>
+    </div>
+    <div v-else class="relative flex justify-center items-center h-full">
+      <n-spin size="large" />
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { computed, ref, watch } from "vue"
+import { useWindowScroll } from "@vueuse/core"
 import { useMarkdownProcessor } from "~/composables/useMarkdownProcessor"
 import type { SnAccount } from "~/types/api"
+import {
+  Info,
+  Clock,
+  MapPin,
+  UserPen,
+  User,
+  Calendar,
+  Cake,
+  Star,
+  PenLine,
+  UserX
+} from "lucide-vue-next"
 
 const route = useRoute()
 
@@ -247,9 +290,7 @@ const htmlBio = ref<string | undefined>(undefined)
 watch(
   user,
   (value) => {
-    htmlBio.value = value?.profile.bio
+    htmlBio.value = value?.profile.bio ? render(value.profile.bio) : undefined
-      ? render(value.profile.bio)
-      : undefined
   },
   { immediate: true, deep: true }
 )
@@ -259,12 +300,48 @@ const userBackground = computed(() => {
     ? `${apiBase}/drive/files/${user.value.profile.background.id}?original=true`
     : undefined
 })
+
+const { y: scrollY } = useWindowScroll()
+const scrollThreshold = 192 // max-h-48 is 12rem = 192px
+
+const backgroundOpacity = computed(() => {
+  return Math.max(0, Math.min(scrollY.value / scrollThreshold, 1))
+})
+
+const headerOpacity = computed(() => {
+  return 1 - backgroundOpacity.value
+})
+
+const pageStyle = computed(() => {
+  if (!userBackground.value) return {}
+  return {
+    backgroundImage: `linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('${userBackground.value}')`,
+    backgroundSize: "cover",
+    backgroundPosition: "center",
+    backgroundRepeat: "no-repeat",
+    backgroundAttachment: "fixed",
+    opacity: backgroundOpacity.value
+  }
+})
 const userPicture = computed(() => {
   return user.value?.profile.picture
     ? `${apiBase}/drive/files/${user.value.profile.picture.id}`
     : undefined
 })
 
+const cardClass = computed(() => ({
+  "backdrop-blur-2xl": !!userBackground.value,
+  "shadow-xl": !!userBackground.value
+}))
+
+const cardStyle = computed(() =>
+  userBackground.value ? "background-color: rgba(255, 255, 255, 0.1)" : ""
+)
+
+const cardContentStyle = computed(() =>
+  userBackground.value ? "background-color: transparent" : ""
+)
+
 function calculateAge(birthday: Date) {
   const birthDate = new Date(birthday)
   const today = new Date()
@@ -328,6 +405,7 @@ useHead({
 
 defineOgImage({
   component: "ImageCard",
+  // @ts-ignore
   title: computed(() =>
     user.value ? user.value.nick || user.value.name : "User Profile"
   ),