feat: adjust hide username emojis pref to only hide in timeline (#1631)

components/account/AccountDisplayName.vue

@@ -1,18 +1,17 @@
 <script setup lang="ts">
 import type { mastodon } from 'masto'
 
-defineProps<{
+const { account, hideEmojis = false } = defineProps<{
   account: mastodon.v1.Account
+  hideEmojis?: boolean
 }>()
-
-const userSettings = useUserSettings()
 </script>
 
 <template>
   <ContentRich
     :content="getDisplayName(account, { rich: true })"
     :emojis="account.emojis"
-    :show-emojis="!getPreferences(userSettings, 'hideUsernameEmojis')"
+    :hide-emojis="hideEmojis"
     :markdown="false"
   />
 </template>

components/account/AccountInlineInfo.vue

@@ -6,6 +6,8 @@ const { link = true, avatar = true } = defineProps<{
   link?: boolean
   avatar?: boolean
 }>()
+
+const userSettings = useUserSettings()
 </script>
 
 <template>
@@ -16,7 +18,7 @@ const { link = true, avatar = true } = defineProps<{
       min-w-0 flex gap-2 items-center
     >
       <AccountAvatar v-if="avatar" :account="account" w-5 h-5 />
-      <AccountDisplayName :account="account" line-clamp-1 ws-pre-wrap break-all />
+      <AccountDisplayName :account="account" :hide-emojis="getPreferences(userSettings, 'hideUsernameEmojis')" line-clamp-1 ws-pre-wrap break-all />
     </NuxtLink>
   </AccountHoverWrapper>
 </template>

components/content/ContentRich.setup.ts

@@ -7,12 +7,12 @@ defineOptions({
 const {
   content,
   emojis,
-  showEmojis = true,
+  hideEmojis = false,
   markdown = true,
 } = defineProps<{
   content: string
   emojis?: mastodon.v1.CustomEmoji[]
-  showEmojis?: boolean
+  hideEmojis?: boolean
   markdown?: boolean
 }>()
 
@@ -23,7 +23,7 @@ export default () => h(
   { class: 'content-rich', dir: 'auto' },
   contentToVNode(content, {
     emojis: emojisObject.value,
-    showEmojis,
+    hideEmojis,
     markdown,
   }),
 )

components/settings/SettingsToggleItem.vue

@@ -9,7 +9,7 @@ defineProps<{
 <template>
   <button
     exact-active-class="text-primary"
-    block w-full group focus:outline-none
+    block w-full group focus:outline-none text-start
   >
     <div
       w-full flex w-fit px5 py3 md:gap2 gap4 items-center
@@ -18,7 +18,8 @@ defineProps<{
     >
       <div flex-1 flex items-center md:gap2 gap4>
         <div
-          flex items-center justify-center flex-shrink-0
+          v-if="icon" flex items-center justify-center
+          flex-shrink-0
           :class="$slots.description ? 'w-12 h-12' : ''"
         >
           <slot name="icon">

components/status/StatusAccountDetails.vue

@@ -5,6 +5,8 @@ const { account, link = true } = defineProps<{
   account: mastodon.v1.Account
   link?: boolean
 }>()
+
+const userSettings = useUserSettings()
 </script>
 
 <template>
@@ -13,7 +15,7 @@ const { account, link = true } = defineProps<{
     flex="~ col" min-w-0 md:flex="~ row gap-2" md:items-center
     text-link-rounded
   >
-    <AccountDisplayName :account="account" font-bold line-clamp-1 ws-pre-wrap break-all />
+    <AccountDisplayName :account="account" :hide-emojis="getPreferences(userSettings, 'hideUsernameEmojis')" font-bold line-clamp-1 ws-pre-wrap break-all />
     <AccountHandle :account="account" class="zen-none" />
   </NuxtLink>
 </template>

composables/content-parse.ts

@@ -8,7 +8,7 @@ import { emojiRegEx, getEmojiAttributes } from '../config/emojis'
 
 export interface ContentParseOptions {
   emojis?: Record<string, mastodon.v1.CustomEmoji>
-  showEmojis?: boolean
+  hideEmojis?: boolean
   mentions?: mastodon.v1.StatusMention[]
   markdown?: boolean
   replaceUnicodeEmoji?: boolean
@@ -82,7 +82,7 @@ export function parseMastodonHTML(
     replaceUnicodeEmoji = true,
     convertMentionLink = false,
     collapseMentionLink = false,
-    showEmojis = true,
+    hideEmojis = false,
     mentions,
     status,
     inReplyToStatus,
@@ -110,16 +110,16 @@ export function parseMastodonHTML(
     ...options.astTransforms || [],
   ]
 
-  if (showEmojis) {
+  if (hideEmojis) {
+    transforms.push(removeUnicodeEmoji)
+    transforms.push(removeCustomEmoji(options.emojis ?? {}))
+  }
+  else {
     if (replaceUnicodeEmoji)
       transforms.push(transformUnicodeEmoji)
 
     transforms.push(replaceCustomEmoji(options.emojis ?? {}))
   }
-  else {
-    transforms.push(removeUnicodeEmoji)
-    transforms.push(removeCustomEmoji(options.emojis ?? {}))
-  }
 
   if (markdown)
     transforms.push(transformMarkdown)

composables/content-render.ts

@@ -30,8 +30,8 @@ export function contentToVNode(
   const textContents = getTexualAstComponents(tree.children)
 
   // if the username only contains emojis, we should probably show the emojis anyway to avoid a blank name
-  if (!options?.showEmojis && textContents.length === 0)
+  if (options?.hideEmojis && textContents.length === 0)
-    tree = parseMastodonHTML(content, { ...options, showEmojis: true })
+    tree = parseMastodonHTML(content, { ...options, hideEmojis: false })
 
   return h(Fragment, (tree.children as Node[] || []).map(n => treeToVNode(n)))
 }

locales/en.json

@@ -412,6 +412,7 @@
       "hide_reply_count": "Hide reply count",
       "hide_translation": "Hide translation",
       "hide_username_emojis": "Hide username emojis",
+      "hide_username_emojis_description": "Hides emojis from usernames in timelines. Emojis will still be visible in their profiles.",
       "label": "Preferences",
       "title": "Experimental Features",
       "user_picker": "User Picker",

pages/settings/preferences/index.vue

@@ -78,6 +78,9 @@ const userSettings = useUserSettings()
       @click="togglePreferences('hideUsernameEmojis')"
     >
       {{ $t("settings.preferences.hide_username_emojis") }}
+      <template #description>
+        {{ $t('settings.preferences.hide_username_emojis_description') }}
+      </template>
     </SettingsToggleItem>
     <h2 px6 py4 mt2 font-bold text-xl flex="~ gap-1" items-center>
       <div i-ri-flask-line />