refactor(front): profile page with section as header

front/src/views/auth/ProfileBase.vue

@@ -10,6 +10,7 @@ import axios from 'axios'
 
 import useErrorHandler from '~/composables/useErrorHandler'
 import useReport from '~/composables/moderation/useReport'
+import RenderedDescription from '~/components/common/RenderedDescription.vue'
 
 import Layout from '~/components/ui/Layout.vue'
 import Section from '~/components/ui/layout/Section.vue'
@@ -81,6 +82,7 @@ watch(props, fetchData, { immediate: true })
     class="page-profile"
   >
     <Layout flex>
+      <!-- Profile Picture -->
       <i
         v-if="!object?.icon"
         class="avatar icon"
@@ -211,13 +213,26 @@ watch(props, fetchData, { immediate: true })
         </Layout>
         <span>{{ object?.full_username }}<i class="bi bi-copy" style="margin-left: 8px;"/></span>
         <rendered-description
+      >
+      <!-- Profile description -->
+      <Section no-items
+        :h1="store.state.auth.username"
+        :action="{ text:'Edit profile', to:'/settings' }"
+        style="flex-grow:1"
+      >
+        <span style="grid-column: 1 / -1">
+          {{ object?.full_username }}
+          <i class="bi bi-copy" style="margin-left: 8px;"/>
+        </span>
+        <RenderedDescription
+          style="grid-column: 1 / -1"
           :content="object?.summary"
           :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>
+      </Section>
     </Layout>
     <!-- TODO: Make routerlinks work for tabs -->
     <Tabs>