feat(ui): user profile pic

front/src/ui/components/UserMenu.vue

@@ -58,6 +58,7 @@ const labels = computed(() => ({
         v-if="store.state.auth.authenticated && store.state.auth.profile?.avatar?.urls.medium_square_crop"
         alt=""
         :src="store.getters['instance/absoluteUrl'](store.state.auth.profile?.avatar.urls.medium_square_crop)"
+        class="avatar"
       >
       <i v-else class="bi bi-gear-fill" />
     </Button>
@@ -157,6 +158,11 @@ const labels = computed(() => ({
 <style scoped lang="scss">
 header > nav button.button {
   padding: 10px;
+
+  &:has(img) {
+    padding: 4px;
+    height: 40px;
+  }
 }
 nav.button-list {
   width: 100%;
@@ -165,4 +171,9 @@ nav.button-list {
     border: none;
   }
 }
+.avatar {
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+}
 </style>

front/src/views/auth/ProfileBase.vue

@@ -81,9 +81,17 @@ watch(props, fetchData, { immediate: true })
     class="page-profile"
   >
     <Layout flex>
+      <i
+        v-if="!object?.icon"
+        class="avatar icon"
+      >
+        <!-- TODO: Get User Initials -->
+        TU
+      </i>
       <img
-        src="https://images.unsplash.com/photo-1524650359799-842906ca1c06?ixlib=rb-1.2.1&dl=te-nguyen-Wt7XT1R6sjU-unsplash.jpg&w=640&q=80&fm=jpg&crop=entropy&cs=tinysrgb"
+        v-else
-        alt="{{ displayName }}"
+        v-lazy="store.getters['instance/absoluteUrl'](object.icon.urls.medium_square_crop)"
+        alt=""
         class="avatar"
       />
       <!-- <div class="ui five wide column">
@@ -204,18 +212,38 @@ watch(props, fetchData, { immediate: true })
         <span>{{ object?.full_username }}<i class="bi bi-copy" style="margin-left: 8px;"/></span>
         <rendered-description
           :content="object?.summary"
-          :field-name="'info'"
+          :field-name="'summary'"
           :update-url="`users/${store.state.auth.username}/`"
           :can-update="store.state.auth.authenticated && object?.full_username === store.state.auth.fullUsername"
           @updated="emit('updated', $event)"
         />
       </Layout>
     </Layout>
+    <!-- TODO: Make routerlinks work for tabs -->
     <Tabs>
-      <Tab title="Overview">{{ t('views.auth.ProfileBase.link.overview') }}</Tab>
+      <Tab title="Overview" :to="{name: 'profile.overview', params: routerParams}">
-      <Tab title="Collections">{{ t('views.auth.ProfileBase.link.collections') }}</Tab>
+        {{ t('views.auth.ProfileBase.link.overview') }}
-      <Tab title="Channels">{{ t('views.auth.ProfileBase.link.channels') }}</Tab>
+        <router-view
-      <Tab title="Activity">{{ t('views.auth.ProfileBase.link.activity') }}</Tab>
+          :object="object"
+          @updated="fetchData"
+        />
+      </Tab>
+
+      <Tab title="Collections">
+        {{ t('views.auth.ProfileBase.link.collections') }}
+      </Tab>
+
+      <Tab title="Channels">
+        {{ t('views.auth.ProfileBase.link.channels') }}
+      </Tab>
+
+      <Tab title="Activity" :to="{name: 'profile.activity', params: routerParams}">
+        {{ t('views.auth.ProfileBase.link.activity') }}
+        <router-view
+          :object="object"
+          @updated="fetchData"
+        />
+      </Tab>
     </Tabs>
   </Layout>
 </template>
@@ -227,6 +255,17 @@ watch(props, fetchData, { immediate: true })
     border-radius: 50%;
   }
 
+  i.avatar {
+    font-size: 100px;
+    font-style: normal;
+    font-weight: 800;
+    padding: 26px 0px 0px 26px;
+    background-color: var(--fw-gray-500);
+    border-radius: 50%;
+    width: 176px;
+    height: 176px;
+  }
+
   h1 {
     font-size: 48px;
     margin-bottom: 8px;