Merge branch 'profile-overhaul' into 'develop'

Profile overhaul

Closes #1375

See merge request pleroma/pleroma-fe!2202

changelog.d/user_profile_redesign.change

@@ -0,0 +1 @@
+User card/profile got an overhaul

src/App.scss

@@ -525,6 +525,10 @@ textarea {
     height: unset;
   }
 
+  &::placeholder {
+    color: var(--textFaint)
+  }
+
   --_padding: 0.5em;
 
   border: none;

src/components/account_actions/account_actions.vue

@@ -3,7 +3,6 @@
     <Popover
       trigger="click"
       placement="bottom"
-      :bound-to="{ x: 'container' }"
       remove-padding
     >
       <template #content>
@@ -140,9 +139,9 @@
       </confirm-modal>
       <UserTimedFilterModal
         v-if="blockExpirationSupported"
+        ref="timedBlockDialog"
         :is-mute="false"
         :user="user"
-        ref="timedBlockDialog"
       />
     </teleport>
   </div>

src/components/color_input/color_input.vue

@@ -19,7 +19,7 @@
     />
     <div
       class="input color-input-field"
-      :class="{ disabled: !present || disabled }"
+      :class="{ disabled: !present || disabled, unstyled }"
     >
       <input
         :id="name + '-t'"
@@ -92,6 +92,11 @@ export default {
       required: true,
       type: String
     },
+    // use unstyled, uh, style
+    unstyled: {
+      required: false,
+      type: Boolean
+    },
     // Color value, should be required but vue cannot tell the difference
     // between "property missing" and "property set to undefined"
     modelValue: {

src/components/moderation_tools/moderation_tools.vue

@@ -208,6 +208,8 @@
 }
 
 .moderation-tools-button {
+  white-space: nowrap;
+
   svg,
   i {
     font-size: 0.8em;

src/components/settings_modal/tabs/general_tab.vue

@@ -69,6 +69,22 @@
             {{ $t('settings.user_popover_avatar_overlay') }}
           </BooleanSetting>
         </li>
+        <li>
+          <BooleanSetting
+            path="userCardLeftJustify"
+            expert="1"
+          >
+            {{ $t('settings.user_card_left_justify') }}
+          </BooleanSetting>
+        </li>
+        <li>
+          <BooleanSetting
+            path="userCardHidePersonalMarks"
+            expert="1"
+          >
+            {{ $t('settings.user_card_hide_personal_marks') }}
+          </BooleanSetting>
+        </li>
         <li>
           <BooleanSetting
             path="alwaysShowNewPostButton"

src/components/user_card/user_card.js

@@ -1,3 +1,4 @@
+import ColorInput from 'src/components/color_input/color_input.vue'
 import UserAvatar from '../user_avatar/user_avatar.vue'
 import RemoteFollow from '../remote_follow/remote_follow.vue'
 import ProgressButton from '../progress_button/progress_button.vue'
@@ -9,6 +10,7 @@ import Select from '../select/select.vue'
 import UserLink from '../user_link/user_link.vue'
 import RichContent from 'src/components/rich_content/rich_content.jsx'
 import UserTimedFilterModal from 'src/components/user_timed_filter_modal/user_timed_filter_modal.vue'
+import localeService from 'src/services/locale/locale.service.js'
 
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
 import { mapGetters } from 'vuex'
@@ -21,7 +23,8 @@ import {
   faExternalLinkAlt,
   faEdit,
   faTimes,
-  faExpandAlt
+  faExpandAlt,
+  faBirthdayCake
 } from '@fortawesome/free-solid-svg-icons'
 
 import { useMediaViewerStore } from '../../stores/media_viewer'
@@ -34,7 +37,8 @@ library.add(
   faExternalLinkAlt,
   faEdit,
   faTimes,
-  faExpandAlt
+  faExpandAlt,
+  faBirthdayCake
 )
 
 export default {
@@ -60,7 +64,8 @@ export default {
     RichContent,
     UserLink,
     UserNote,
-    UserTimedFilterModal
+    UserTimedFilterModal,
+    ColorInput
   },
   data () {
     return {
@@ -175,6 +180,10 @@ export default {
         ? this.$t('user_card.block_expires_forever')
         : this.$t('user_card.block_expires_at', [new Date(this.user.mute_expires_at).toLocaleString()])
     },
+    formattedBirthday () {
+      const browserLocale = localeService.internalToBrowserLocale(this.$i18n.locale)
+      return this.user.birthday && new Date(Date.parse(this.user.birthday)).toLocaleDateString(browserLocale, { timeZone: 'UTC', day: 'numeric', month: 'long', year: 'numeric' })
+    },
     ...mapGetters(['mergedConfig'])
   },
   methods: {

src/components/user_card/user_card.scss

@@ -2,65 +2,91 @@
   position: relative;
   z-index: 1;
 
+  .user-card-inner {
+    padding-bottom: 0;
+  }
+
+  .user-card-bio {
+    &.-justify-left {
+      text-align: start;
+    }
+  }
+
   &:hover {
     --_still-image-img-visibility: visible;
     --_still-image-canvas-visibility: hidden;
     --_still-image-label-visibility: hidden;
   }
 
-  .btn-mute, .btn-mention {
-    display: block;
-    width: 100%;
-  }
-
   .panel-heading {
-    padding: 0.5em 0;
     text-align: center;
     box-shadow: none;
     background: transparent;
+    backdrop-filter: none;
     flex-direction: column;
     align-items: stretch;
     // create new stacking context
     position: relative;
   }
 
+  .personal-marks {
+    margin: 0.6em;
+    padding: 0.6em;
+
+    &:not(:last-child) {
+      border-bottom: 1px solid var(--border);
+    }
+
+    .highlighter {
+      h4 {
+        margin-top: 0.6em;
+      }
+
+      .userHighlightSel {
+        vertical-align: bottom;
+        margin-left: -0.1em;
+
+        &.-none select {
+          color: var(--textFaint);
+
+          option {
+            color: var(--text);
+            background: var(--background);
+          }
+        }
+      }
+
+      .highlighter-color {
+        vertical-align: bottom;
+        margin-left: 0.6em;
+      }
+    }
+  }
+
   .background-image {
     position: absolute;
     inset: 0;
-    mask:
+    right: -1.2em;
-      linear-gradient(to top, white, transparent) bottom no-repeat,
+    left: -1.2em;
-      linear-gradient(to top, white, white);
+    top: -1.4em;
-    // Autoprefixer seem to ignore this one, and also syntax is different
+    padding: 0;
-    /* stylelint-disable mask-composite */
+    mask: linear-gradient(to top, transparent 0, white 5em) bottom no-repeat;
-    /* stylelint-disable declaration-property-value-no-unknown */
-    /* stylelint-disable scss/declaration-property-value-no-unknown */
-
-    /* TODO check if this is still needed */
-    mask-composite: xor;
-    /* stylelint-enable scss/declaration-property-value-no-unknown */
-    /* stylelint-enable declaration-property-value-no-unknown */
-    /* stylelint-enable mask-composite */
-    mask-composite: exclude;
     background-size: cover;
-    mask-size: 100% 60%;
     border-top-left-radius: calc(var(--__roundnessTop, --panelRadius) - 1px);
     border-top-right-radius: calc(var(--__roundnessTop, --panelRadius) - 1px);
     border-bottom-left-radius: calc(var(--__roundnessBottom, --panelRadius) - 1px);
     border-bottom-right-radius: calc(var(--__roundnessBottom, --panelRadius) - 1px);
     background-color: var(--profileBg);
     z-index: -2;
-
-    &.hide-bio {
-      mask-size: 100% 40px;
-    }
   }
 
   &-bio {
     text-align: center;
+    color: var(--lightText);
     display: block;
     line-height: 1.3;
-    padding: 1em;
+    padding: 0.6em;
-    margin: 0;
+    margin: 0 0.6em;
 
     img {
       object-fit: contain;
@@ -100,14 +126,19 @@
 }
 
 .user-info {
-  padding: 0 26px;
+  position: relative;
+  margin: 0.6em;
+  margin-bottom: 0;
+  text-align: right;
 
-  .container {
+  .user-identity {
-    min-width: 0;
+    position: relative;
-    padding: 16px 0 6px;
+    aspect-ratio: 3;
+    min-height: 6em;
     display: flex;
-    align-items: flex-start;
+    align-items: flex-end;
-    max-height: 56px;
+    margin-bottom: 1em;
+    container: user-card / inline-size;
 
     > * {
       min-width: 0;
@@ -123,19 +154,51 @@
       --_avatarShadowFilter: var(--avatarShadowFilter);
       --_avatarShadowInset: var(--avatarShadowInset);
 
-      width: 56px;
+      width: 7em;
-      height: 56px;
+      width: calc(min(7em, 20cqw));
+      height: 7em;
+      height: calc(min(7em, 20cqw));
       object-fit: cover;
     }
   }
 
+  .other-actions {
+    position: relative;
+    display: inline-grid;
+    grid-auto-flow: column;
+    grid-gap: 0.6em;
+    font-size: 1.25rem;
+    z-index: 2;
+    align-self: end;
+
+    a, button, div {
+      text-align: center;
+      width: 2em;
+      height: 2em;
+      line-height: 2em;
+      padding: 0.6em;
+      margin: -0.6em;
+
+      &:hover .icon {
+        color: var(--textFaint);
+      }
+
+      &:not(:hover) .icon {
+        color: var(--lightText);
+      }
+    }
+  }
+
   &-avatar {
     position: relative;
     cursor: pointer;
+    margin-right: 0.6em;
 
     &.-overlay {
       position: absolute;
-      inset: 0;
+      inset: -0.6em;
+      left: -0.6em;
+      right: -1.2em;
       background-color: rgb(0 0 0 / 30%);
       display: flex;
       justify-content: center;
@@ -154,51 +217,10 @@
     }
   }
 
-  .external-link-button,
-  .edit-profile-button {
-    cursor: pointer;
-    width: 2.5em;
-    text-align: center;
-    margin: -0.5em 0;
-    padding: 0.5em 0;
-
-    &:not(:hover) .icon {
-      color: var(--lightText);
-    }
-  }
-
-  .bottom-line {
-    font-weight: lighter;
-    font-size: 1.1em;
-    align-items: baseline;
-
-    .lock-icon {
-      margin-left: 0.5em;
-    }
-
-    .user-screen-name {
-      color: var(--text);
-      min-width: 1px;
-      flex: 0 1 auto;
-      text-overflow: ellipsis;
-      overflow: hidden;
-    }
-
-    .dailyAvg {
-      min-width: 1px;
-      flex: 0 0 auto;
-      margin-left: 1em;
-      font-size: 0.7em;
-      color: var(--text);
-    }
-
-    .user-role {
-      flex: none;
-    }
-  }
-
   .user-summary {
-    display: block;
+    align-self: stretch;
+    display: flex;
+    flex-direction: column;
     margin-left: 0.6em;
     text-align: left;
     text-overflow: ellipsis;
@@ -216,23 +238,58 @@
       --link: var(--text) !important;
     }
 
-    .top-line,
+    .top-line {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      flex: 1;
+      // these two normalize position and height when custom emoji are used
+      line-height: 2;
+      margin-bottom: -0.2em;
+      font-weight: 600;
+      font-size: 110%;
+      font-size: calc(max(110%, 4cqw));
+    }
+
     .bottom-line {
       display: flex;
+      align-items: baseline;
+      flex-wrap: wrap;
+      white-space: normal;
+      font-weight: 500;
+      font-size: 0.9em;
+      line-height: 1.5;
+    }
+
+    .lock-icon {
+      display: inline-block;
+      vertical-align: baseline;
+      overflow-x: hidden;
+      margin: 0 0.35em 0 0.5em;
+    }
+
+    .user-screen-name {
+      color: var(--text);
+      text-overflow: ellipsis;
+      overflow: hidden;
+      display: inline-block;
+    }
+
+    .user-role {
+      display: inline-block;
+      vertical-align: baseline;
     }
   }
 
   .user-name {
     text-overflow: ellipsis;
     overflow: hidden;
-    flex: 1 1 auto;
     margin-right: 1em;
     font-size: 1.1em;
   }
 
-  .user-meta {
+  .highlighter {
-    margin-bottom: 0.15em;
+    margin: 5em;
-    display: flex;
     align-items: baseline;
     line-height: 22px;
     flex-wrap: wrap;
@@ -279,23 +336,18 @@
 
   .user-interactions {
     position: relative;
-    display: flex;
+    display: grid;
-    flex-flow: row wrap;
+    grid-template-columns: repeat(auto-fit, minmax(7.5em, 20%));
-    margin-right: -0.75em;
+    grid-gap: 0.6em;
+    max-width: 98vw;
 
-    > * {
+    .popover-trigger-button, .moderation-tools-button {
-      margin: 0 0.75em 0.6em 0;
+      width: 100%;
+    }
+
+    > .btn-group, > button {
       white-space: nowrap;
-      min-width: 95px;
     }
-
-    button {
-      margin: 0;
-    }
-  }
-
-  .user-note {
-    margin: 0 0.75em 0.6em 0;
   }
 }
 
@@ -303,28 +355,94 @@
   display: none;
 }
 
-.user-counts {
+.user-extras {
-  display: flex;
+  padding: 1.2em 0.6em;
-  line-height: 16px;
+  line-height: 1.5;
-  padding: 0.5em 1.5em 0;
+
-  text-align: center;
+  .user-stats {
-  justify-content: space-between;
+    display: block;
-  flex-wrap: wrap;
+    text-align: center;
+    word-wrap: break-word;
+    width: 100%;
+
+    dl {
+      display: inline;
+      margin-right: 1em;
+      white-space: nowrap;
+    }
+
+    dd {
+      font-weight: bolder;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      margin: 0;
+    }
+
+    dd, dt {
+      display: inline
+    }
+
+    /* stylelint-disable-next-line no-descending-specificity */
+    a {
+      text-decoration: none;
+    }
+  }
+
+  .birthday {
+    width: 100%;
+    text-align: center;
+    white-space: nowrap;
+
+    --icon: var(--text);
+  }
 }
 
-.user-count {
+.user-profile-fields {
-  flex: 1 0 auto;
-  padding: 0.5em 0;
   margin: 0 0.5em;
 
-  h5 {
+  img {
-    font-size: 1em;
+    object-fit: contain;
-    font-weight: bolder;
+    vertical-align: middle;
-    margin: 0 0 0.25em;
+    max-width: 100%;
+    max-height: 400px;
+
+    &.emoji {
+      width: 18px;
+      height: 18px;
+    }
   }
 
-  /* stylelint-disable-next-line no-descending-specificity */
+  .user-profile-field {
-  a {
+    display: flex;
-    text-decoration: none;
+    margin: 0.25em;
+    border: 1px solid var(--border);
+    border-radius: var(--roundness);
+
+    .user-profile-field-name,
+    .user-profile-field-value {
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
+      box-sizing: border-box;
+      line-height: 2em;
+    }
+
+    .user-profile-field-name {
+      flex: 0 1 50%;
+      font-weight: 600;
+      text-align: right;
+      color: var(--lightText);
+      min-width: 9em;
+      border-right: 1px solid var(--border);
+      padding-left: 1.2em;
+      padding-right: 0.6em;
+    }
+
+    .user-profile-field-value {
+      flex: 1 1 55%;
+      color: var(--text);
+      padding-left: 0.6em;
+      margin: 0;
+    }
   }
 }

src/components/user_card/user_card.vue

@@ -4,13 +4,16 @@
     :class="classes"
   >
     <div
-      :class="{ 'hide-bio': hideBio }"
+      :class="onClose ? '' : 'panel-heading -flexible-height'"
-      :style="style"
+      class="user-card-inner"
-      class="background-image"
+    >
-    />
-    <div :class="onClose ? '' : 'panel-heading -flexible-height'">
       <div class="user-info">
-        <div class="container">
+        <div class="user-identity">
+          <div
+            :class="{ 'hide-bio': hideBio }"
+            :style="style"
+            class="background-image"
+          />
           <a
             v-if="avatarAction === 'zoom'"
             class="user-info-avatar -link"
@@ -32,12 +35,64 @@
           />
           <router-link
             v-else
+            class="user-info-avatar"
             :to="userProfileLink(user)"
           >
             <UserAvatar :user="user" />
           </router-link>
           <div class="user-summary">
             <div class="top-line">
+              <div class="other-actions">
+                <button
+                  v-if="!isOtherUser && user.is_local"
+                  class="button-unstyled edit-profile-button"
+                  @click.stop="openProfileTab"
+                >
+                  <FAIcon
+                    fixed-width
+                    class="icon"
+                    icon="edit"
+                    :title="$t('user_card.edit_profile')"
+                  />
+                </button>
+                <a
+                  v-if="isOtherUser && !user.is_local"
+                  :href="user.statusnet_profile_url"
+                  target="_blank"
+                  class="button-unstyled external-link-button"
+                >
+                  <FAIcon
+                    class="icon"
+                    icon="external-link-alt"
+                  />
+                </a>
+                <AccountActions
+                  v-if="isOtherUser && loggedIn"
+                  :user="user"
+                  :relationship="relationship"
+                />
+                <router-link
+                  v-if="onClose"
+                  :to="userProfileLink(user)"
+                  class="button-unstyled external-link-button"
+                  @click="onClose"
+                >
+                  <FAIcon
+                    class="icon"
+                    icon="expand-alt"
+                  />
+                </router-link>
+                <button
+                  v-if="onClose"
+                  class="button-unstyled external-link-button"
+                  @click="onClose"
+                >
+                  <FAIcon
+                    class="icon"
+                    icon="times"
+                  />
+                </button>
+              </div>
               <router-link
                 :to="userProfileLink(user)"
                 class="user-name"
@@ -48,61 +103,27 @@
                   :emoji="user.emoji"
                 />
               </router-link>
-              <button
-                v-if="!isOtherUser && user.is_local"
-                class="button-unstyled edit-profile-button"
-                @click.stop="openProfileTab"
-              >
-                <FAIcon
-                  fixed-width
-                  class="icon"
-                  icon="edit"
-                  :title="$t('user_card.edit_profile')"
-                />
-              </button>
-              <a
-                v-if="isOtherUser && !user.is_local"
-                :href="user.statusnet_profile_url"
-                target="_blank"
-                class="button-unstyled external-link-button"
-              >
-                <FAIcon
-                  class="icon"
-                  icon="external-link-alt"
-                />
-              </a>
-              <AccountActions
-                v-if="isOtherUser && loggedIn"
-                :user="user"
-                :relationship="relationship"
-              />
-              <router-link
-                v-if="onClose"
-                :to="userProfileLink(user)"
-                class="button-unstyled external-link-button"
-                @click="onClose"
-              >
-                <FAIcon
-                  class="icon"
-                  icon="expand-alt"
-                />
-              </router-link>
-              <button
-                v-if="onClose"
-                class="button-unstyled external-link-button"
-                @click="onClose"
-              >
-                <FAIcon
-                  class="icon"
-                  icon="times"
-                />
-              </button>
             </div>
             <div class="bottom-line">
               <user-link
                 class="user-screen-name"
                 :user="user"
               />
+              <span
+                v-if="user.locked"
+                class="lock-icon"
+              >
+                <FAIcon
+                  icon="lock"
+                  size="sm"
+                />
+              </span>
+              <span
+                v-if="relationship.followed_by && loggedIn && isOtherUser"
+                class="alert neutral user-role"
+              >
+                {{ $t('user_card.follows_you') }}
+              </span>
               <template v-if="!hideBio">
                 <span
                   v-if="user.deactivated"
@@ -128,80 +149,22 @@
                 >
                   {{ $t('user_card.group') }}
                 </span>
+                <span
+                  v-if="relationship.muting && muteExpiryAvailable"
+                  class="alert neutral user-role"
+                >
+                  {{ muteExpiry }}
+                </span>
+                <span
+                  v-if="relationship.blocking && blockExpiryAvailable"
+                  class="alert neutral user-role"
+                >
+                  {{ blockExpiry }}
+                </span>
               </template>
-              <span v-if="user.locked">
-                <FAIcon
-                  class="lock-icon"
-                  icon="lock"
-                  size="sm"
-                />
-              </span>
-              <span
-                v-if="relationship.muting && muteExpiryAvailable"
-                class="alert neutral user-role"
-              >
-                {{ muteExpiry }}
-              </span>
-              <span
-                v-if="relationship.blocking && blockExpiryAvailable"
-                class="alert neutral user-role"
-              >
-                {{ blockExpiry }}
-              </span>
-              <span
-                v-if="!mergedConfig.hideUserStats && !hideBio"
-                class="dailyAvg"
-              >{{ dailyAvg }} {{ $t('user_card.per_day') }}</span>
             </div>
           </div>
         </div>
-        <div class="user-meta">
-          <div
-            v-if="relationship.followed_by && loggedIn && isOtherUser"
-            class="following"
-          >
-            {{ $t('user_card.follows_you') }}
-          </div>
-          <div
-            v-if="isOtherUser && (loggedIn || !switcher)"
-            class="highlighter"
-          >
-            <!-- id's need to be unique, otherwise vue confuses which user-card checkbox belongs to -->
-            <input
-              v-if="userHighlightType !== 'disabled'"
-              :id="'userHighlightColorTx'+user.id"
-              v-model="userHighlightColor"
-              class="input userHighlightText"
-              type="text"
-            >
-            <input
-              v-if="userHighlightType !== 'disabled'"
-              :id="'userHighlightColor'+user.id"
-              v-model="userHighlightColor"
-              class="input userHighlightCl"
-              type="color"
-            >
-            {{ ' ' }}
-            <Select
-              :id="'userHighlightSel'+user.id"
-              v-model="userHighlightType"
-              class="userHighlightSel"
-            >
-              <option value="disabled">
-                {{ $t('user_card.highlight.disabled') }}
-              </option>
-              <option value="solid">
-                {{ $t('user_card.highlight.solid') }}
-              </option>
-              <option value="striped">
-                {{ $t('user_card.highlight.striped') }}
-              </option>
-              <option value="side">
-                {{ $t('user_card.highlight.side') }}
-              </option>
-            </Select>
-          </div>
-        </div>
         <div
           v-if="loggedIn && isOtherUser"
           class="user-interactions"
@@ -241,35 +204,32 @@
               </ProgressButton>
             </template>
           </div>
-          <div>
+          <button
-            <button
+            v-if="relationship.muting"
-              v-if="relationship.muting"
+            class="btn button-default btn-mute toggled"
-              class="btn button-default btn-mute toggled"
+            :disabled="user.deactivated"
-              :disabled="user.deactivated"
+            @click="unmuteUser"
-              @click="unmuteUser"
+          >
-            >
+            {{ $t('user_card.muted') }}
-              {{ $t('user_card.muted') }}
+          </button>
-            </button>
+          <button
-            <button
+            v-else
-              v-else
+            class="btn button-default btn-mute"
-              class="btn button-default btn-mute"
+            :disabled="user.deactivated"
-              :disabled="user.deactivated"
+            @click="muteUser"
-              @click="muteUser"
+          >
-            >
+            {{ $t('user_card.mute') }}
-              {{ $t('user_card.mute') }}
+          </button>
-            </button>
+          <button
-          </div>
+            class="btn button-default btn-mention"
-          <div>
+            :disabled="user.deactivated"
-            <button
+            @click="mentionUser"
-              class="btn button-default btn-mention"
+          >
-              :disabled="user.deactivated"
+            {{ $t('user_card.mention') }}
-              @click="mentionUser"
+          </button>
-            >
-              {{ $t('user_card.mention') }}
-            </button>
-          </div>
           <ModerationTools
             v-if="showModerationMenu"
+            class="moderation-menu"
             :user="user"
           />
         </div>
@@ -279,57 +239,148 @@
         >
           <RemoteFollow :user="user" />
         </div>
-        <UserNote
-          v-if="loggedIn && isOtherUser && (hasNote || (hasNoteEditor && supportsNote))"
-          :user="user"
-          :relationship="relationship"
-          :editable="hasNoteEditor"
-        />
       </div>
     </div>
     <div
-      v-if="!hideBio"
+      v-if="loggedIn && isOtherUser && (hasNote || !hideBio) && !mergedConfig.userCardHidePersonalMarks"
-      class="user-bio"
+      class="personal-marks"
     >
+      <UserNote
+        v-if="hasNote || (hasNoteEditor && supportsNote)"
+        :user="user"
+        :relationship="relationship"
+        :editable="hasNoteEditor"
+      />
       <div
-        v-if="!mergedConfig.hideUserStats && switcher"
+        v-if="!hideBio"
-        class="user-counts"
+        class="highlighter"
       >
-        <div
+        <h4>{{ $t('user_card.highlight_header') }}</h4>
+        <Select
+          :id="'userHighlightSel'+user.id"
+          v-model="userHighlightType"
+          class="userHighlightSel unstyled"
+          :class="{ '-none': userHighlightType === 'disabled' }"
+        >
+          <option value="disabled">
+            {{ $t('user_card.highlight_new.disabled') }}
+          </option>
+          <option value="solid">
+            {{ $t('user_card.highlight_new.solid') }}
+          </option>
+          <option value="striped">
+            {{ $t('user_card.highlight_new.striped') }}
+          </option>
+          <option value="side">
+            {{ $t('user_card.highlight_new.side') }}
+          </option>
+        </Select>
+        <!-- id's need to be unique, otherwise vue confuses which user-card checkbox belongs to -->
+        <ColorInput
+          v-if="userHighlightType !== 'disabled'"
+          v-model="userHighlightColor"
+          class="highlighter-color"
+          :show-optional-checkbox="false"
+          name="'userHighlightColorTx'+user.id"
+          :unstyled="true"
+        />
+      </div>
+    </div>
+    <RichContent
+      v-if="!hideBio"
+      class="user-card-bio"
+      :class="{ '-justify-left': mergedConfig.userCardLeftJustify }"
+      :html="user.description_html"
+      :emoji="user.emoji"
+      :handle-links="true"
+    />
+    <div
+      v-if="!hideBio && user.fields_html && user.fields_html.length > 0"
+      class="user-profile-fields"
+    >
+      <dl
+        v-for="(field, index) in user.fields_html"
+        :key="index"
+        class="user-profile-field"
+      >
+        <dt
+          :title="user.fields_text[index].name"
+          class="user-profile-field-name"
+        >
+          <RichContent
+            :html="field.name"
+            :emoji="user.emoji"
+          />
+        </dt>
+        <dd
+          :title="user.fields_text[index].value"
+          class="user-profile-field-value"
+        >
+          <RichContent
+            :html="field.value"
+            :emoji="user.emoji"
+          />
+        </dd>
+      </dl>
+    </div>
+    <div
+      v-if="!hideBio"
+      class="user-extras"
+    >
+      <span
+        v-if="!mergedConfig.hideUserStats"
+        class="user-stats"
+      >
+        <dl
+          v-if="!mergedConfig.hideUserStats && !hideBio"
           class="user-count"
           @click.prevent="setProfileView('statuses')"
         >
-          <h5>{{ $t('user_card.statuses') }}</h5>
+          <dd>{{ user.statuses_count }}</dd>
-          <span>{{ user.statuses_count }} <br></span>
+          {{ ' ' }}
-        </div>
+          <dt>{{ $t('user_card.statuses') }}</dt>
-        <div
+        </dl>
+        <dl
+          class="user-count"
+          @click.prevent="setProfileView('statuses')"
+        >
+          <dd>{{ dailyAvg }}</dd>
+          {{ ' ' }}
+          <dt>{{ $t('user_card.statuses_per_day') }}</dt>
+        </dl>
+        <dl
           class="user-count"
           @click.prevent="setProfileView('friends')"
         >
-          <h5>{{ $t('user_card.followees') }}</h5>
+          <dd>{{ hideFollowsCount ? $t('user_card.hidden') : user.friends_count }}</dd>
-          <span>{{ hideFollowsCount ? $t('user_card.hidden') : user.friends_count }}</span>
+          {{ ' ' }}
-        </div>
+          <dt>{{ $t('user_card.followees') }}</dt>
-        <div
+        </dl>
+        <dl
           class="user-count"
           @click.prevent="setProfileView('followers')"
         >
-          <h5>{{ $t('user_card.followers') }}</h5>
+          <dd>{{ hideFollowersCount ? $t('user_card.hidden') : user.followers_count }}</dd>
-          <span>{{ hideFollowersCount ? $t('user_card.hidden') : user.followers_count }}</span>
+          {{ ' ' }}
-        </div>
+          <dt>{{ $t('user_card.followers') }}</dt>
+        </dl>
+      </span>
+      <div
+        v-if="!hideBio && !!user.birthday"
+        class="birthday"
+      >
+        <FAIcon
+          class="fa-old-padding"
+          icon="birthday-cake"
+        />
+        {{ $t('user_card.birthday', { birthday: formattedBirthday }) }}
       </div>
-      <RichContent
-        v-if="!hideBio"
-        class="user-card-bio"
-        :html="user.description_html"
-        :emoji="user.emoji"
-        :handle-links="true"
-      />
     </div>
     <teleport to="#modal">
       <UserTimedFilterModal
+        ref="timedMuteDialog"
         :user="user"
         :is-mute="true"
-        ref="timedMuteDialog"
       />
     </teleport>
   </div>

src/components/user_note/user_note.js

@@ -1,19 +1,24 @@
+import PanelLoading from 'src/components/panel_loading/panel_loading.vue'
+
 const UserNote = {
   props: {
     user: Object,
     relationship: Object,
     editable: Boolean
   },
+  components: {
+    PanelLoading
+  },
   data () {
     return {
-      localNote: '',
+      localNote: this.relationship.note,
       editing: false,
       frozen: false
     }
   },
-  computed: {
+  watch: {
-    shouldShow () {
+    relationship () {
-      return this.relationship.note || this.editing
+      this.localNote = this.relationship.note
     }
   },
   methods: {
@@ -21,9 +26,6 @@ const UserNote = {
       this.localNote = this.relationship.note
       this.editing = true
     },
-    cancelEditing () {
-      this.editing = false
-    },
     finalizeEditing () {
       this.frozen = true
 
@@ -37,6 +39,7 @@ const UserNote = {
         })
         .catch(() => {
           this.frozen = false
+          this.editing = false
         })
     }
   }

src/components/user_note/user_note.vue

@@ -1,46 +1,23 @@
 <template>
   <div
     class="user-note"
+    :class="{ '-frozen': frozen }"
   >
-    <div class="heading">
+    <h4>{{ $t('user_card.personal_note') }}</h4>
-      <span>{{ $t('user_card.note') }}</span>
-      <div class="buttons">
-        <button
-          v-show="!editing && editable"
-          class="button-default btn"
-          @click="startEditing"
-        >
-          {{ $t('user_card.edit_note') }}
-        </button>
-        <button
-          v-show="editing"
-          class="button-default btn"
-          :disabled="frozen"
-          @click="finalizeEditing"
-        >
-          {{ $t('user_card.edit_note_apply') }}
-        </button>
-        <button
-          v-show="editing"
-          class="button-default btn"
-          :disabled="frozen"
-          @click="cancelEditing"
-        >
-          {{ $t('user_card.edit_note_cancel') }}
-        </button>
-      </div>
-    </div>
     <textarea
-      v-show="editing"
       v-model="localNote"
       class="input note-text"
+      :class="{ unstyled: !editing }"
+      rows="1"
+      :placeholder="$t('user_card.note_blank_click')"
+      @focus="startEditing"
+      @blur="finalizeEditing"
     />
     <span
-      v-show="!editing"
+      v-if="frozen"
-      class="note-text"
+      class="overlay"
-      :class="{ '-blank': !relationship.note }"
     >
-      {{ relationship.note || $t('user_card.note_blank') }}
+      <PanelLoading />
     </span>
   </div>
 </template>
@@ -49,38 +26,27 @@
 
 <style lang="scss">
 .user-note {
-  display: flex;
+  position: relative;
-  flex-direction: column;
 
-  .heading {
+  h4 {
-    display: flex;
-    flex-direction: row;
     justify-content: space-between;
-    align-items: center;
+    margin-bottom: 0.5em;
-    margin-bottom: 0.75em;
-
-    .btn {
-      min-width: 95px;
-    }
-
-    .buttons {
-      display: flex;
-      flex-direction: row;
-      justify-content: right;
-
-      .btn {
-        margin-left: 0.5em;
-      }
-    }
   }
 
   .note-text {
     align-self: stretch;
+    min-width: 100%;
+    margin: -0.6em;
   }
 
-  .note-text.-blank {
+  .overlay {
-    font-style: italic;
+    position: absolute;
-    color: var(--textFaint);
+    inset: 0;
+    background-color: rgb(0 0 0 / 30%);
+
+    .panel-loading {
+      font-size: 1em;
+    }
   }
 }
 </style>

src/components/user_panel/user_panel.vue

@@ -28,8 +28,16 @@
     backdrop-filter: var(--backdrop-filter);
   }
 
+  .user-info {
+    .Avatar {
+      width: 5em;
+      width: calc(min(5em, 20cqw));
+      height: 5em;
+      height: calc(min(5em, 20cqw));
+    }
+  }
+
   .signed-in {
-    overflow: visible;
     z-index: 10;
   }
 }

src/components/user_popover/user_popover.vue

@@ -26,7 +26,22 @@
 <style lang="scss">
 /* popover styles load on-demand, so we need to override */
 /* stylelint-disable block-no-empty */
-.user-popover.popover {
+.user-popover {
+  margin-bottom: 0.6em;
+
+  .user-identity {
+    aspect-ratio: unset;
+    min-width: calc(min(30em, 98vw));
+  }
+
+  .user-card-inner {
+    display: flex;
+  }
+
+  &.popover {
+    overflow: hidden;
+    padding: 0.6em;
+  }
 }
 /* stylelint-enable block-no-empty */
 

src/components/user_profile/user_profile.js

@@ -7,16 +7,13 @@ import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'
 import RichContent from 'src/components/rich_content/rich_content.jsx'
 import List from '../list/list.vue'
 import withLoadMore from '../../hocs/with_load_more/with_load_more'
-import localeService from 'src/services/locale/locale.service.js'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
-  faCircleNotch,
+  faCircleNotch
-  faBirthdayCake
 } from '@fortawesome/free-solid-svg-icons'
 
 library.add(
-  faCircleNotch,
+  faCircleNotch
-  faBirthdayCake
 )
 
 const FollowerList = withLoadMore({
@@ -82,10 +79,6 @@ const UserProfile = {
     },
     favoritesTabVisible () {
       return this.isUs || (this.$store.state.instance.pleromaPublicFavouritesAvailable && !this.user.hide_favorites)
-    },
-    formattedBirthday () {
-      const browserLocale = localeService.internalToBrowserLocale(this.$i18n.locale)
-      return this.user.birthday && new Date(Date.parse(this.user.birthday)).toLocaleDateString(browserLocale, { timeZone: 'UTC', day: 'numeric', month: 'long', year: 'numeric' })
     }
   },
   methods: {

src/components/user_profile/user_profile.vue

@@ -13,45 +13,6 @@
           rounded="top"
           :has-note-editor="true"
         />
-        <span
-          v-if="!!user.birthday"
-          class="user-birthday"
-        >
-          <FAIcon
-            class="fa-old-padding"
-            icon="birthday-cake"
-          />
-          {{ $t('user_card.birthday', { birthday: formattedBirthday }) }}
-        </span>
-        <div
-          v-if="user.fields_html && user.fields_html.length > 0"
-          class="user-profile-fields"
-        >
-          <dl
-            v-for="(field, index) in user.fields_html"
-            :key="index"
-            class="user-profile-field"
-          >
-            <dt
-              :title="user.fields_text[index].name"
-              class="user-profile-field-name"
-            >
-              <RichContent
-                :html="field.name"
-                :emoji="user.emoji"
-              />
-            </dt>
-            <dd
-              :title="user.fields_text[index].value"
-              class="user-profile-field-value"
-            >
-              <RichContent
-                :html="field.value"
-                :emoji="user.emoji"
-              />
-            </dd>
-          </dl>
-        </div>
       </div>
       <tab-switcher
         :active-tab="tab"
@@ -173,58 +134,6 @@
   // No sticky header on user profile
   --currentPanelStack: 0;
 
-  .user-birthday {
-    margin: 0 0.75em 0.5em;
-  }
-
-  .user-profile-fields {
-    margin: 0 0.5em;
-
-    img {
-      object-fit: contain;
-      vertical-align: middle;
-      max-width: 100%;
-      max-height: 400px;
-
-      &.emoji {
-        width: 18px;
-        height: 18px;
-      }
-    }
-
-    .user-profile-field {
-      display: flex;
-      margin: 0.25em;
-      border: 1px solid var(--border);
-      border-radius: var(--roundness);
-
-      .user-profile-field-name {
-        flex: 0 1 30%;
-        font-weight: 500;
-        text-align: right;
-        color: var(--lightText);
-        min-width: 120px;
-        border-right: 1px solid var(--border);
-      }
-
-      .user-profile-field-value {
-        flex: 1 1 70%;
-        color: var(--text);
-        margin: 0 0 0 0.25em;
-      }
-
-      .user-profile-field-name,
-      .user-profile-field-value {
-        line-height: 1.3;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        overflow: hidden;
-        padding: 0.5em 1.5em;
-        box-sizing: border-box;
-      }
-    }
-  }
-
   .userlist-placeholder {
     display: flex;
     justify-content: center;

src/i18n/en.json

@@ -797,6 +797,8 @@
     "user_popover_avatar_action_close": "Close the popover",
     "user_popover_avatar_action_open": "Open profile",
     "user_popover_avatar_overlay": "Show user popover over user avatar",
+    "user_card_left_justify": "Justify user bio to the left",
+    "user_card_hide_personal_marks": "Hide personal marks (highlight/note) in user profiles",
     "fun": "Fun",
     "greentext": "Meme arrows",
     "show_yous": "Show (You)s",
@@ -1423,7 +1425,7 @@
     "block_expires_forever": "Blocked forever",
     "block_expires_at": "Blocked until {0}",
     "mute_duration_prompt": "Mute this user for (0 for indefinite time):",
-    "per_day": "per day",
+    "statuses_per_day": "Statuses per day",
     "remote_follow": "Remote follow",
     "remove_follower": "Remove follower",
     "remove_follower_confirm_title": "Remove follower confirmation",
@@ -1464,17 +1466,15 @@
       "delete_user": "Delete user",
       "delete_user_data_and_deactivate_confirmation": "This will permanently delete the data from this account and deactivate it. Are you absolutely sure?"
     },
-    "highlight": {
+    "highlight_new": {
-      "disabled": "No highlight",
+      "disabled": "Don't highlight",
-      "solid": "Solid bg",
+      "solid": "Solid background",
-      "striped": "Striped bg",
+      "striped": "Striped background",
       "side": "Side stripe"
     },
-    "note": "Note",
+    "personal_note": "Personal note",
-    "note_blank": "(None)",
+    "note_blank_click": "Click to add note",
-    "edit_note": "Edit note",
+    "highlight_header": "Highlight user's posts and mentions"
-    "edit_note_apply": "Apply",
-    "edit_note_cancel": "Cancel"
   },
   "user_profile": {
     "timeline_title": "User timeline",

src/modules/default_config_state.js

@@ -126,6 +126,8 @@ export const defaultState = {
   showScrollbars: false,
   userPopoverAvatarAction: 'open',
   userPopoverOverlay: false,
+  userCardLeftJustify: false,
+  userCardHidePersonalMarks: false,
   sidebarColumnWidth: '25rem',
   contentColumnWidth: '45rem',
   notifsColumnWidth: '25rem',