💄 Better user page

layouts/default.vue

@@ -47,15 +47,16 @@
   <v-navigation-drawer v-model="openDrawer" location="left" width="300" floating>
     <v-list density="compact" nav color="primary">
       <v-list-item :title="t('navProducts')" prepend-icon="mdi-shape" to="/products" exact />
-      <v-list-item :title="t('navActivity')" prepend-icon="mdi-newspaper" to="/activity" exact />
-      <v-list-item :title="t('navGallery')" prepend-icon="mdi-album" to="/gallery" exact />
+      <v-list-item :title="t('navPosts')" prepend-icon="mdi-note-text" to="/posts" exact />
+      <v-list-item :title="t('navActivity')" prepend-icon="mdi-newspaper-variant-multiple-outline" to="/activity" exact />
+      <v-list-item :title="t('navGallery')" prepend-icon="mdi-image-multiple" to="/gallery" exact />
     </v-list>
 
     <v-divider class="border-opacity-50 my-1" />
 
     <v-list density="compact" nav color="primary">
       <v-list-item title="Developer Portal" prepend-icon="mdi-code-tags" to="/dev" exact />
-      <v-list-item title="Creator Hub" prepend-icon="mdi-pencil" to="#" exact />
+      <v-list-item title="Creator Hub" prepend-icon="mdi-pencil" disabled exact />
     </v-list>
 
     <v-divider class="border-opacity-50 mb-4 mt-0.5" />

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>

pages/posts/index.vue

@@ -1,11 +1,11 @@
 <template>
   <v-container class="content-container mx-auto">
-    <div class="my-3 mx-[3.5ch]">
+    <div class="my-3 mx-[1.5ch]">
       <h1 class="text-2xl">{{ t("navPosts") }}</h1>
       <span>{{ t("navPostsCaption") }}</span>
     </div>
 
-    <post-list />
+    <post-list class="mx-[-2.5ch]" />
   </v-container>
 </template>
 

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,20 +11,37 @@
         </div>
       </div>
 
-      <div class="mb-5 text-xs text-grey flex flex-col">
-        <span>Solar Network User Web Preview</span>
-        <span>
-          To get full view of this user's profile, open it on <a class="underline" :href="externalOpenLink">Solian</a>
-        </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>
-        <h1 class="text-xl">{{ t("userActivity") }}</h1>
-        <span>{{ t("userActivityCaption") }}</span>
-      </div>
+      <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>
-
-    <post-list v-if="account" :author="account.name" />
   </v-container>
 </template>
 
@@ -37,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) {
@@ -51,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>