Merge branch 'small-fixes-and-improvements' into shigusegubu-themes3

src/components/attachment/attachment.js

@@ -2,9 +2,9 @@ import { mapState } from 'pinia'
 
 import nsfwImage from '../../assets/nsfw.png'
 import Flash from '../flash/flash.vue'
+import Popover from '../popover/popover.vue'
 import StillImage from '../still-image/still-image.vue'
 import VideoAttachment from '../video_attachment/video_attachment.vue'
-import Popover from '../popover/popover.vue'
 
 import { useInstanceStore } from 'src/stores/instance.js'
 import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'

src/components/attachment/attachment.vue

@@ -87,7 +87,7 @@
           trigger="click"
           popover-class="popover popover-default description-popover"
           :trigger-attrs="{ 'class': 'button-default attachment-button -transparent', 'title': $t('status.attachment_description') }"
-          >
+        >
           <template #trigger>
             <FAIcon icon="align-right" />
           </template>

src/components/emoji_input/emoji_input.js

@@ -589,7 +589,7 @@ const EmojiInput = {
     setCaret({ target: { selectionStart } }) {
       this.caret = selectionStart
       this.$nextTick(() => {
-        this.$refs.suggestorPopover.updateStyles()
+        this.$refs.suggestorPopover?.updateStyles()
       })
     },
     autoCompleteItemLabel(suggestion) {

src/components/media_modal/media_modal.vue

@@ -90,8 +90,8 @@
     </button>
 
     <details
-      open
       v-if="description"
+      open
       class="description"
     >
       <summary>{{ $t('status.attachment_description') }}</summary>

src/components/status_action_buttons/action_button.vue

@@ -26,7 +26,7 @@
         />
         <template v-if="!buttonClass.disabled && (!button.interactive || button?.interactive(funcArg)) && button.toggleable?.(funcArg) && button.active">
           <FAIcon
-            v-if="button.active(funcArg)"
+            v-if="button.active(funcArg) && button.activeIndicator?.() !== null"
             class="active-marker"
             transform="shrink-6 up-9 left-12"
             :icon="button.activeIndicator?.(funcArg) || 'check'"

src/components/status_action_buttons/buttons_definitions.js

@@ -21,7 +21,7 @@ export const BUTTONS = [
     anonLink: true,
     toggleable: true,
     closeIndicator: 'times',
-    activeIndicator: 'none',
+    activeIndicator: null,
     action({ emit }) {
       emit('toggleReplying')
       return Promise.resolve()

src/components/user_card/user_card.js

@@ -332,6 +332,18 @@ export default {
         )
       )
     },
+    formattedBirthday() {
+      const browserLocale = localeService.internalToBrowserLocale(
+        this.$i18n.locale,
+      )
+      return (
+        this.user.created_at &&
+        new Date(Date.parse(this.user.created_at)).toLocaleDateString(
+          browserLocale,
+          { timeZone: 'UTC', day: 'numeric', month: 'long', year: 'numeric' },
+        )
+      )
+    },
 
     // Editable stuff
     avatarImgSrc() {

src/components/user_card/user_card.scss

@@ -413,6 +413,10 @@
       text-overflow: ellipsis;
       overflow: hidden;
       margin: 0;
+
+      .svg-inline--fa {
+        color: var(--text);
+      }
     }
 
     dd, dt {

src/components/user_card/user_card.vue

@@ -546,39 +546,61 @@
           <dt>{{ $t('user_card.followers') }}</dt>
         </dl>
       </span>
-      <template v-if="!hideBio">
+      <span
-        <div
+        v-if="!hideUserStats"
-          v-if="user.birthday && !editable"
+        class="user-stats"
-          class="birthday"
+      >
-        >
+        <template v-if="!hideBio">
-          <FAIcon
+          <dl
-            class="fa-old-padding"
+            v-if="user.birthday && !editable"
-            icon="birthday-cake"
+            class="user-count"
-          />
-          {{ $t('user_card.birthday', { birthday: formattedBirthday }) }}
-        </div>
-        <div
-          v-else-if="editable"
-          class="birthday"
-        >
-          <div>
-            <Checkbox v-model="newShowBirthday">
-              {{ $t('settings.birthday.show_birthday') }}
-            </Checkbox>
-          </div>
-          <FAIcon
-            class="fa-old-padding"
-            icon="birthday-cake"
-          />
-          {{ $t('settings.birthday.label') }}
-          <input
-            id="birthday"
-            v-model="newBirthday"
-            type="date"
-            class="input birthday-input"
           >
-        </div>
+            <dd>
-      </template>
+              <FAIcon
+                class="fa-old-padding"
+                icon="birthday-cake"
+              />
+            </dd>
+            {{ ' ' }}
+            <dt>
+              {{ $t('user_card.birthday', { birthday: formattedBirthday }) }}
+            </dt>
+          </dl>
+          <div
+            v-else-if="editable"
+            class="birthday"
+          >
+            <div>
+              <Checkbox v-model="newShowBirthday">
+                {{ $t('settings.birthday.show_birthday') }}
+              </Checkbox>
+            </div>
+            <FAIcon
+              class="fa-old-padding"
+              icon="birthday-cake"
+            />
+            {{ $t('settings.birthday.label') }}
+            <input
+              id="birthday"
+              v-model="newBirthday"
+              type="date"
+              class="input birthday-input"
+            >
+          </div>
+        </template>
+        <dl
+          v-if="!editable"
+          class="user-count"
+        >
+          <dd>
+            {{ $t('user_card.joined') }}
+          </dd>
+          {{ ' ' }}
+          <dt>
+            {{ formattedBirthday }}
+          </dt>
+        </dl>
+      </span>
     </div>
     <template v-if="editable">
       <h3>{{ $t('settings.profile_other') }}</h3>

src/i18n/en.json

@@ -1714,6 +1714,7 @@
     "bot": "Bot",
     "group": "Group",
     "birthday": "Born {birthday}",
+    "joined": "Joined",
     "admin_menu": {
       "moderation": "Moderation",
       "grant_admin": "Grant Admin",

src/services/entity_normalizer/entity_normalizer.service.js

@@ -1,6 +1,6 @@
 import { parseLinkHeader } from '@web3-storage/parse-link-header'
 import escapeHtml from 'escape-html'
-import { unescape } from 'lodash'
+import { unescape as lodashUnescape } from 'lodash'
 import punycode from 'punycode.js'
 
 import fileTypeService from '../file_type/file_type.service.js'
@@ -308,7 +308,7 @@ export const parseAttachment = (data) => {
   }
   output.url = data.url
   output.large_thumb_url = data.preview_url
-  output.description = unescape(data.description)
+  output.description = lodashUnescape(data.description)
 
   return output
 }