From d4c2746ca2de36c96c63c368ecf25e986de0fe7f Mon Sep 17 00:00:00 2001
From: LittleSheep <littlesheep.code@hotmail.com>
Date: Sun, 22 Sep 2024 22:21:16 +0800
Subject: [PATCH] :lipstick: Better user page

---
 pages/gallery/[id].vue |  4 +++-
 pages/users/[name].vue | 46 ++++++++++++++++++++++++++++++------------
 2 files changed, 36 insertions(+), 14 deletions(-)

diff --git a/pages/gallery/[id].vue b/pages/gallery/[id].vue
index d6ac65d..ac0a41a 100644
--- a/pages/gallery/[id].vue
+++ b/pages/gallery/[id].vue
@@ -1,7 +1,9 @@
 <template>
   <v-container class="content-container mx-auto">
     <div class="mt-3 mb-4.5 mx-[2.5ch] flex flex-row gap-4 items-center">
-      <v-avatar :image="attachment.account?.avatar" />
+      <nuxt-link :to="`/users/${attachment.account?.name}`">
+        <v-avatar :image="attachment.account?.avatar" />
+      </nuxt-link>
       <div class="flex flex-col">
         <span class="text-xs">Uploaded by</span>
         <span>{{ attachment.account?.nick }} <span class="text-xs">@{{ attachment.account?.name }}</span></span>
diff --git a/pages/users/[name].vue b/pages/users/[name].vue
index db45130..99de7d0 100644
--- a/pages/users/[name].vue
+++ b/pages/users/[name].vue
@@ -1,9 +1,9 @@
 <template>
-  <v-container class="content-container mx-auto">
+  <v-container class="mx-auto">
     <v-img v-if="urlOfBanner" :src="urlOfBanner" :aspect-ratio="16 / 5" class="rounded-md mb-3" cover />
 
     <div class="mx-[2.5ch]">
-      <div class="my-5 flex flex-row gap-4">
+      <div class="my-5 mx-4 flex flex-row gap-4">
         <v-avatar :image="urlOfAvatar" />
         <div class="flex flex-col">
           <span>{{ account?.nick }} <span class="text-xs">@{{ account?.name }}</span></span>
@@ -11,13 +11,37 @@
         </div>
       </div>
 
-      <div>
-        <h1 class="text-xl">{{ t("userActivity") }}</h1>
-        <span>{{ t("userActivityCaption") }}</span>
+      <div class="mb-7">
+        <v-card rounded="xl" class="mx-[-5px]">
+          <v-tabs
+            v-model="tab"
+            align-tabs="start"
+            color="primary"
+            hide-slider
+          >
+            <v-tab :value="1">{{ t("userActivity") }}</v-tab>
+          </v-tabs>
+        </v-card>
       </div>
-    </div>
 
-    <post-list v-if="account" :author="account.name" />
+      <v-row>
+        <v-col row="12" lg="8">
+          <post-list class="mx-[-2.5ch] mt-[-16px]" v-if="account" :author="account.name" />
+        </v-col>
+        <v-col row="12" lg="4" order="first" order-lg="last">
+          <div class="sticky top-0 h-fit">
+            <v-card prepend-icon="mdi-identifier" title="About">
+              <v-card-text>
+                <p><b>Description</b></p>
+                <p>{{ account.description }}</p>
+                <p class="mt-3"><b>Joined At</b></p>
+                <p>{{ new Date(account.created_at).toLocaleString() }}</p>
+              </v-card-text>
+            </v-card>
+          </div>
+        </v-col>
+      </v-row>
+    </div>
   </v-container>
 </template>
 
@@ -30,6 +54,8 @@ const { t } = useI18n()
 const route = useRoute()
 const config = useRuntimeConfig()
 
+const tab = ref(1)
+
 const { data: account } = await useFetch<any>(`${config.public.solarNetworkApi}/cgi/id/users/${route.params.name}`)
 
 if (account.value == null) {
@@ -44,9 +70,3 @@ const urlOfBanner = computed(() => account.value?.banner ? `${config.public.sola
 
 const externalOpenLink = computed(() => `${config.public.solianUrl}/accounts/view/${route.params.name}`)
 </script>
-
-<style scoped>
-.content-container {
-  max-width: 70ch !important;
-}
-</style>