From 601cc3a66366d68ad5f406aee0747ddc7ba2de44 Mon Sep 17 00:00:00 2001
From: ArneBo <arne@ecobasa.org>
Date: Sun, 5 Jan 2025 15:47:43 +0100
Subject: [PATCH] feat(ui) [WIP] User profile page

---
 front/src/components/auth/Settings.vue        |   4 -
 front/src/components/common/ContentForm.vue   |  28 +-
 .../components/common/RenderedDescription.vue |  38 +--
 front/src/components/ui/Link.vue              |   5 +
 front/src/views/auth/ProfileBase.vue          | 269 ++++++++++--------
 5 files changed, 193 insertions(+), 151 deletions(-)

diff --git a/front/src/components/auth/Settings.vue b/front/src/components/auth/Settings.vue
index 592681700..a1b83cc92 100644
--- a/front/src/components/auth/Settings.vue
+++ b/front/src/components/auth/Settings.vue
@@ -261,10 +261,6 @@ const changeEmail = async () => {
   isChangingEmail.value = false
 }
 
-onMounted(() => {
-  $('select.dropdown').dropdown()
-})
-
 fetchApps()
 fetchOwnedApps()
 </script>
diff --git a/front/src/components/common/ContentForm.vue b/front/src/components/common/ContentForm.vue
index f67bdda1d..a863fdb43 100644
--- a/front/src/components/common/ContentForm.vue
+++ b/front/src/components/common/ContentForm.vue
@@ -6,6 +6,9 @@ import { useI18n } from 'vue-i18n'
 
 import useLogger from '~/composables/useLogger'
 
+import Textarea from '~/components/ui/Textarea.vue'
+import Button from '~/components/ui/Button.vue'
+
 interface Events {
   (e: 'update:modelValue', value: string): void
 }
@@ -83,22 +86,20 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div class="content-form ui segments">
-    <div class="ui segment">
-      <div class="ui tiny secondary pointing menu">
-        <button
-          :class="[{active: !isPreviewing}, 'item']"
+        <Button
           @click.prevent="isPreviewing = false"
+          :class="[{active: !isPreviewing}, 'item']"
+          title="write"
         >
           {{ t('components.common.ContentForm.button.write') }}
-        </button>
-        <button
-          :class="[{active: isPreviewing}, 'item']"
+        </Button>
+        <Button
           @click.prevent="isPreviewing = true"
+          :class="[{active: isPreviewing}, 'item']"
+          title="preview"
         >
           {{ t('components.common.ContentForm.button.preview') }}
-        </button>
-      </div>
+        </Button>
       <template v-if="isPreviewing">
         <div
           v-if="isLoadingPreview"
@@ -121,17 +122,14 @@ onMounted(async () => {
       </template>
       <template v-else>
         <div class="ui transparent input">
-          <textarea
+          <Textarea
             ref="textarea"
             v-model="value"
             :required="required"
             :placeholder="labels.placeholder"
           />
         </div>
-        <div class="ui very small hidden divider" />
       </template>
-    </div>
-    <div class="ui bottom attached segment">
       <span
         v-if="charLimit"
         :class="['right', 'floated', {'ui danger text': remainingChars < 0}]"
@@ -141,6 +139,4 @@ onMounted(async () => {
       <p>
         {{ t('components.common.ContentForm.help.markdown') }}
       </p>
-    </div>
-  </div>
 </template>
diff --git a/front/src/components/common/RenderedDescription.vue b/front/src/components/common/RenderedDescription.vue
index acdc03ce3..ba839f52f 100644
--- a/front/src/components/common/RenderedDescription.vue
+++ b/front/src/components/common/RenderedDescription.vue
@@ -8,6 +8,9 @@ import { useI18n } from 'vue-i18n'
 import axios from 'axios'
 import clip from 'text-clipper'
 
+import Button from '~/components/ui/Button.vue'
+import Alert from '~/components/ui/Alert.vue'
+
 interface Events {
   (e: 'updated', data: unknown): void
 }
@@ -88,9 +91,10 @@ const submit = async () => {
     <template v-if="content && !isUpdating">
       <sanitized-html :html="html" />
       <template v-if="isTruncated">
-        <div class="ui small hidden divider" />
         <a
           v-if="showMore === false"
+          class="more"
+          style="float: right; margin-top: -32px; color: var(--fw-primary);"
           href=""
           @click.stop.prevent="showMore = true"
         >
@@ -98,6 +102,8 @@ const submit = async () => {
         </a>
         <a
           v-else
+          class="more"
+          style="float: right; margin-top: -32px; color: var(--fw-primary);"
           href=""
           @click.stop.prevent="showMore = false"
         >
@@ -109,28 +115,23 @@ const submit = async () => {
       {{ t('components.common.RenderedDescription.empty.noDescription') }}
     </p>
     <template v-if="!isUpdating && canUpdate && updateUrl">
-      <div class="ui hidden divider" />
-      <span
+      <Button
         role="button"
+        icon="bi-pencil"
         @click="isUpdating = true"
       >
-        <i class="pencil icon" />
         {{ t('components.common.RenderedDescription.button.edit') }}
-      </span>
+      </Button>
     </template>
     <form
       v-if="isUpdating"
-      class="ui form"
       @submit.prevent="submit()"
     >
-      <div
+      <Alert red
         v-if="errors.length > 0"
+        title="{{ t('components.common.RenderedDescription.header.failure') }}"
         role="alert"
-        class="ui negative message"
       >
-        <h4 class="header">
-          {{ t('components.common.RenderedDescription.header.failure') }}
-        </h4>
         <ul class="list">
           <li
             v-for="(error, key) in errors"
@@ -139,25 +140,28 @@ const submit = async () => {
             {{ error }}
           </li>
         </ul>
-      </div>
+      </Alert>
       <content-form
         v-model="text"
         :autofocus="true"
       />
-      <a
+      <Button
         class="left floated"
         @click.prevent="isUpdating = false"
+        solid
+        secondary
       >
         {{ t('components.common.RenderedDescription.button.cancel') }}
-      </a>
-      <button
+      </Button>
+      <Button
         :class="['ui', {'loading': isLoading}, 'right', 'floated', 'button']"
         type="submit"
         :disabled="isLoading"
+        solid
+        primary
       >
         {{ t('components.common.RenderedDescription.button.update') }}
-      </button>
-      <div class="ui clearing hidden divider" />
+      </Button>
     </form>
   </div>
 </template>
diff --git a/front/src/components/ui/Link.vue b/front/src/components/ui/Link.vue
index f2629b249..f1ee1d4b9 100644
--- a/front/src/components/ui/Link.vue
+++ b/front/src/components/ui/Link.vue
@@ -64,6 +64,11 @@ onMounted(() => {
 </template>
 
 <style module lang="scss">
+
+  .force-underline {
+    text-decoration: underline;
+  }
+
   .link {
 
     // Layout
diff --git a/front/src/views/auth/ProfileBase.vue b/front/src/views/auth/ProfileBase.vue
index b56bcaea7..39d2f33cb 100644
--- a/front/src/views/auth/ProfileBase.vue
+++ b/front/src/views/auth/ProfileBase.vue
@@ -12,7 +12,11 @@ import useErrorHandler from '~/composables/useErrorHandler'
 import useReport from '~/composables/moderation/useReport'
 
 import Layout from '~/components/ui/Layout.vue'
+import Section from '~/components/ui/layout/Section.vue'
+import Spacer from '~/components/ui/layout/Spacer.vue'
 import Link from '~/components/ui/Link.vue'
+import Tabs from '~/components/ui/Tabs.vue'
+import Tab from '~/components/ui/Tab.vue'
 
 interface Events {
   (e: 'updated', value: Actor): void
@@ -76,126 +80,163 @@ watch(props, fetchData, { immediate: true })
     v-title="labels.usernameProfile"
     class="page-profile"
   >
-    <div
-      v-if="isLoading"
-      class="ui vertical segment"
-    >
-      <div class="ui centered active inline loader" />
-    </div>
-    <div class="ui head vertical stripe segment container">
-      <div
-        v-if="object"
-        class="ui stackable grid"
-      >
-        <div class="ui five wide column">
-          <button
-            ref="dropdown"
-            v-dropdown="{direction: 'downward'}"
-            class="ui pointing dropdown icon small basic right floated button"
-            style="position: absolute; right: 1em; top: 1em;"
-          >
-            <i class="ellipsis vertical icon" />
-            <div class="menu">
-              <a
-                v-if="object.domain != store.getters['instance/domain']"
-                :href="object.fid"
-                target="_blank"
-                class="basic item"
-              >
-                <i class="external icon" />
-                {{ t('views.auth.ProfileBase.link.domainView', {domain: object.domain}) }}
-              </a>
-              <div
-                v-for="obj in getReportableObjects({account: object})"
-                :key="obj.target.type + obj.target.id"
-                role="button"
-                class="basic item"
-                @click.stop.prevent="report(obj)"
-              >
-                <i class="share icon" /> {{ obj.label }}
-              </div>
-
-              <div class="divider" />
-              <router-link
-                v-if="store.state.auth.availablePermissions['moderation']"
-                class="basic item"
-                :to="{name: 'manage.moderation.accounts.detail', params: {id: object.full_username}}"
-              >
-                <i class="wrench icon" />
-                {{ t('views.auth.ProfileBase.link.moderation') }}
-              </router-link>
-            </div>
-          </button>
-          <user-follow-button
-            v-if="$store.state.auth.authenticated && object && object.full_username !== $store.state.auth.fullUsername"
-            :actor="object"
-          />
-          <h1 class="ui center aligned icon header">
-            <i
-              v-if="!object.icon"
-              class="circular inverted user success icon"
-            />
-            <img
-              v-else
-              v-lazy="store.getters['instance/absoluteUrl'](object.icon.urls.medium_square_crop)"
-              alt=""
-              class="ui big circular image"
+    <Layout flex>
+      <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"
+        alt="{{ displayName }}"
+        class="avatar"
+      />
+      <!-- <div class="ui five wide column">
+        <button
+          ref="dropdown"
+          v-dropdown="{direction: 'downward'}"
+          class="ui pointing dropdown icon small basic right floated button"
+          style="position: absolute; right: 1em; top: 1em;"
+        >
+          <i class="ellipsis vertical icon" />
+          <div class="menu">
+            <a
+              v-if="object.domain != store.getters['instance/domain']"
+              :href="object.fid"
+              target="_blank"
+              class="basic item"
             >
-            <div class="ellispsis content">
-              <div class="ui very small hidden divider" />
-              <span>{{ displayName }}</span>
-              <div class="ui very small hidden divider" />
-              <div
-                class="sub header ellipsis"
-                :title="object.full_username"
-              >
-                {{ object.full_username }}
-              </div>
+              <i class="external icon" />
+              {{ t('views.auth.ProfileBase.link.domainView', {domain: object.domain}) }}
+            </a>
+            <div
+              v-for="obj in getReportableObjects({account: object})"
+              :key="obj.target.type + obj.target.id"
+              role="button"
+              class="basic item"
+              @click.stop.prevent="report(obj)"
+            >
+              <i class="share icon" /> {{ obj.label }}
             </div>
-            <template v-if="object.full_username === store.state.auth.fullUsername">
-              <div class="ui very small hidden divider" />
-              <div class="ui basic success label">
-                {{ t('views.auth.ProfileBase.label.self') }}
-              </div>
-            </template>
-          </h1>
-          <div class="ui small hidden divider" />
-          <div v-if="store.getters['ui/layoutVersion'] === 'large'">
-            <rendered-description
-              :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)"
-            />
+
+            <div class="divider" />
+            <router-link
+              v-if="store.state.auth.availablePermissions['moderation']"
+              class="basic item"
+              :to="{name: 'manage.moderation.accounts.detail', params: {id: object.full_username}}"
+            >
+              <i class="wrench icon" />
+              {{ t('views.auth.ProfileBase.link.moderation') }}
+            </router-link>
           </div>
-        </div>
-        <div class="ui eleven wide column">
-          <div class="ui head vertical stripe segment">
-            <div class="ui container">
-              <div class="ui secondary pointing center aligned menu">
-                <router-link
-                  class="item"
-                  :to="{name: 'profile.overview', params: routerParams}"
-                >
-                  {{ t('views.auth.ProfileBase.link.overview') }}
-                </router-link>
-                <router-link
-                  class="item"
-                  :to="{name: 'profile.activity', params: routerParams}"
-                >
-                  {{ t('views.auth.ProfileBase.link.activity') }}
-                </router-link>
-              </div>
-              <div class="ui hidden divider" />
-              <router-view
-                :object="object"
-                @updated="fetchData"
-              />
+        </button>
+        <user-follow-button
+          v-if="$store.state.auth.authenticated && object && object.full_username !== $store.state.auth.fullUsername"
+          :actor="object"
+        />
+        <h1 class="ui center aligned icon header">
+          <i
+            v-if="!object.icon"
+            class="circular inverted user success icon"
+          />
+          <img
+            v-else
+            v-lazy="store.getters['instance/absoluteUrl'](object.icon.urls.medium_square_crop)"
+            alt=""
+            class="ui big circular image"
+          >
+          <div class="ellispsis content">
+            <div class="ui very small hidden divider" />
+            <span>{{ displayName }}</span>
+            <div class="ui very small hidden divider" />
+            <div
+              class="sub header ellipsis"
+              :title="object.full_username"
+            >
+              {{ object.full_username }}
             </div>
           </div>
+          <template v-if="object.full_username === store.state.auth.fullUsername">
+            <div class="ui very small hidden divider" />
+            <div class="ui basic success label">
+              {{ t('views.auth.ProfileBase.label.self') }}
+            </div>
+          </template>
+        </h1>
+        <div class="ui small hidden divider" />
+        <div v-if="store.getters['ui/layoutVersion'] === 'large'">
+          <rendered-description
+            :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)"
+          />
         </div>
       </div>
-    </div>
+      <div class="ui eleven wide column">
+        <div class="ui head vertical stripe segment">
+          <div class="ui container">
+            <div class="ui secondary pointing center aligned menu">
+              <router-link
+                class="item"
+                :to="{name: 'profile.overview', params: routerParams}"
+              >
+                {{ t('views.auth.ProfileBase.link.overview') }}
+              </router-link>
+              <router-link
+                class="item"
+                :to="{name: 'profile.activity', params: routerParams}"
+              >
+                {{ t('views.auth.ProfileBase.link.activity') }}
+              </router-link>
+            </div>
+            <div class="ui hidden divider" />
+            <router-view
+              :object="object"
+              @updated="fetchData"
+            />
+          </div>
+        </div>
+      </div> -->
+    </Layout>
+      <Layout stack noGap style="flex-grow: 2;">
+        <Layout flex style="justify-content: space-between;">
+        <!-- <Section h1="{{ displayName }}" :action="{ text: 'Edit profile', to:'/settings' }" /> -->
+        <h1>{{ displayName }}</h1>
+          <Link ghost alignSelf="center" minContent forceUnderline primary style="color: var(--fw-primary);" to="/settings">Edit profile</Link>
+        </Layout>
+        <span>{{ object?.full_username }}<i class="bi bi-copy" style="margin-left: 8px;"/></span>
+        <rendered-description
+          :content="object?.summary"
+          :field-name="'info'"
+          :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>
+    <Tabs>
+      <Tab title="Overview">{{ t('views.auth.ProfileBase.link.overview') }}</Tab>
+      <Tab title="Collections">{{ t('views.auth.ProfileBase.link.collections') }}</Tab>
+      <Tab title="Channels">{{ t('views.auth.ProfileBase.link.channels') }}</Tab>
+      <Tab title="Activity">{{ t('views.auth.ProfileBase.link.activity') }}</Tab>
+    </Tabs>
   </Layout>
 </template>
+
+<style scoped lang="scss">
+  img.avatar {
+    width: 176px;
+    height: 176px;
+    border-radius: 50%;
+  }
+
+  h1 {
+    font-size: 48px;
+    margin-bottom: 8px;
+  }
+
+  a.edit span {
+    color: var(--fw-primary);
+
+    &:hover {
+      color: var(--color);
+    }
+  }
+</style>