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>