refactor and fix all references to emojis

src/components/profile/ContactBox.svelte

@@ -10,6 +10,7 @@
   import { useAppServices } from '$lib/app-services'
   import { displayNameOf } from '$lib/util/profile'
   import Module from '../common/Module.svelte'
+  import EmojiText from '../common/EmojiText.svelte'
 
   interface Props {
     account: Account
@@ -73,7 +74,7 @@
   }
 </script>
 
-<Module title={`Contacting ${firstName}`}>
+<Module title={`Contacting ${firstName}`} titleEmojis={account.emojis}>
   {#if error}
     <p class="error-note" role="alert">{error}</p>
   {/if}
@@ -137,6 +138,8 @@
   </ul>
 
   {#if relationship?.followed_by && !isSelf}
-    <p class="contact-note muted">{firstName} has you on their friends list.</p>
+    <p class="contact-note muted">
+      <EmojiText text={firstName} emojis={account.emojis} /> has you on their friends list.
+    </p>
   {/if}
 </Module>

src/components/profile/DetailsTable.svelte

@@ -7,23 +7,28 @@
    * an unverified link that looks verified is a phishing surface.
    */
   import type { ProfileField } from '$lib/util/profile'
+  import type { CustomEmoji } from '$lib/api/types'
   import Module from '../common/Module.svelte'
+  import EmojiText from '../common/EmojiText.svelte'
 
   interface Props {
     title: string
     fields: ProfileField[]
+    emojis?: CustomEmoji[]
   }
 
-  let { title, fields }: Props = $props()
+  let { title, fields, emojis }: Props = $props()
 </script>
 
 {#if fields.length > 0}
-  <Module {title} flush>
+  <Module {title} titleEmojis={emojis} flush>
     <table class="data-table details-table">
       <tbody>
         {#each fields as field, index (`${field.name}:${index}`)}
           <tr class="details-row" data-verified={field.verified ? 'true' : 'false'}>
-            <th class="data-table-label details-label" scope="row">{field.name}</th>
+            <th class="data-table-label details-label" scope="row">
+              <EmojiText text={field.name} {emojis} />
+            </th>
             <td class="data-table-value details-value" data-verified={field.verified ? 'true' : 'false'}>
               {#if field.verified}
                 <span class="verified-mark" title="Ownership of this link is verified">✓</span>

src/components/profile/FriendSpace.svelte

@@ -6,15 +6,17 @@
    * accounts often return an empty list rather than an error, so the count and
    * the grid are allowed to disagree; the count is authoritative.
    */
-  import type { Account } from '$lib/api/types'
+  import type { Account, CustomEmoji } from '$lib/api/types'
   import { displayNameOf, formatCount, profilePath } from '$lib/util/profile'
   import Module from '../common/Module.svelte'
   import Avatar from '../common/Avatar.svelte'
+  import EmojiText from '../common/EmojiText.svelte'
 
   interface Props {
     title: string
     /** The subject, used in "Tom has 527 friends." */
     ownerName: string
+    ownerEmojis?: CustomEmoji[]
     friends: Account[]
     total: number
     viewAllHref: string
@@ -29,6 +31,7 @@
   let {
     title,
     ownerName,
+    ownerEmojis,
     friends,
     total,
     viewAllHref,
@@ -39,7 +42,7 @@
   }: Props = $props()
 </script>
 
-<Module {title} variant="band">
+<Module {title} titleEmojis={ownerEmojis} variant="band">
   {#snippet action()}
     <a href={viewAllHref}>[view all]</a>
   {/snippet}
@@ -47,10 +50,13 @@
   <!-- Never render a withheld count as "0 friends" — that reports a privacy
        setting as a fact about the person. -->
   {#if countHidden}
-    <p class="friend-count">{ownerName} keeps their friend count private.</p>
+    <p class="friend-count">
+      <EmojiText text={ownerName} emojis={ownerEmojis} /> keeps their friend count private.
+    </p>
   {:else}
     <p class="friend-count">
-      {ownerName} has <span class="friend-count-value">{formatCount(total)}</span>
+      <EmojiText text={ownerName} emojis={ownerEmojis} /> has
+      <span class="friend-count-value">{formatCount(total)}</span>
       friend{total === 1 ? '' : 's'}.
     </p>
   {/if}
@@ -66,7 +72,11 @@
       {#each friends as friend (friend.id)}
         <li class="friend-card" data-account={friend.acct}>
           <a class="friend-card-link" href={profilePath(friend)}>
-            <span class="friend-card-name">{displayNameOf(friend)}</span>
+            <EmojiText
+              class="friend-card-name"
+              text={displayNameOf(friend)}
+              emojis={friend.emojis}
+            />
             <Avatar account={friend} plain size="friend" class="friend-card-photo" />
           </a>
         </li>

src/components/profile/InterestsTable.svelte

@@ -6,18 +6,20 @@
    * Mastodon account gets a compact box rather than six empty rows.
    */
   import type { InterestEntry } from '$lib/util/profile'
+  import type { CustomEmoji } from '$lib/api/types'
   import Module from '../common/Module.svelte'
 
   interface Props {
     title: string
     interests: InterestEntry[]
+    emojis?: CustomEmoji[]
   }
 
-  let { title, interests }: Props = $props()
+  let { title, interests, emojis }: Props = $props()
 </script>
 
 {#if interests.length > 0}
-  <Module {title} flush>
+  <Module {title} titleEmojis={emojis} flush>
     <table class="data-table interests-table">
       <tbody>
         {#each interests as entry, index (`${entry.row}:${index}`)}

src/components/profile/PicStream.svelte

@@ -4,15 +4,17 @@
    * stream. Videos/audio stay in the Blog; reposted pictures are not somebody's
    * own Pics.
    */
-  import type { MediaAttachment, Status } from '$lib/api/types'
+  import type { CustomEmoji, MediaAttachment, Status } from '$lib/api/types'
   import type { Feed } from '$lib/stores/feed.svelte'
   import { toPlainText } from '$lib/util/html'
   import { stampDate } from '$lib/util/time'
   import Pager from '../common/Pager.svelte'
+  import EmojiText from '../common/EmojiText.svelte'
 
   interface Props {
     feed: Feed<Status>
     ownerName: string
+    ownerEmojis?: CustomEmoji[]
   }
 
   interface Picture {
@@ -22,7 +24,7 @@
     caption: string
   }
 
-  let { feed, ownerName }: Props = $props()
+  let { feed, ownerName, ownerEmojis }: Props = $props()
   let revealed = $state<Record<string, boolean>>({})
 
   const pictures = $derived.by<Picture[]>(() =>
@@ -46,7 +48,8 @@
 </script>
 
 <p class="pic-stream-intro">
-  Pictures from {ownerName}'s Blog Entries. Click a picture to view the full-size original.
+  Pictures from <EmojiText text={ownerName} emojis={ownerEmojis} />'s Blog Entries. Click a
+  picture to view the full-size original.
 </p>
 
 {#if !feed.initialized && feed.loading}
@@ -97,10 +100,17 @@
           <figcaption class="pic-card-caption">
             {#if hidden}
               <span class="pic-card-description">
-                {picture.status.spoiler_text || 'Sensitive picture'}
+                <EmojiText
+                  text={picture.status.spoiler_text || 'Sensitive picture'}
+                  emojis={picture.status.emojis}
+                />
               </span>
             {:else if picture.caption}
-              <span class="pic-card-description">{picture.caption}</span>
+              <EmojiText
+                class="pic-card-description"
+                text={picture.caption}
+                emojis={picture.status.emojis}
+              />
             {/if}
             <a class="pic-card-entry-link" href={`#/blog/${picture.status.id}`}>
               Posted {stampDate(picture.status.created_at)} &middot; view entry
@@ -115,6 +125,6 @@
 <Pager
   {feed}
   label="View More Pictures"
-  emptyText={`${ownerName} hasn't posted any pictures yet.`}
+  emptyText="There aren't any pictures here yet."
   endText={pictures.length > 0 ? 'That’s the whole picture stream.' : ''}
 />

src/components/profile/ProfileIdentity.svelte

@@ -10,9 +10,9 @@
    */
   import type { ProfileView } from '$lib/util/profile'
   import { displayNameOf, fullHandle } from '$lib/util/profile'
-  import { renderDisplayName } from '$lib/util/html'
   import { relativeTime, shortDate, yearsSince } from '$lib/util/time'
   import { useAppServices } from '$lib/app-services'
+  import EmojiText from '../common/EmojiText.svelte'
 
   interface Props {
     profile: ProfileView
@@ -22,7 +22,6 @@
 
   const { session } = useAppServices()
   const account = $derived(profile.account)
-  const name = $derived(renderDisplayName(displayNameOf(account), account.emojis))
   const handle = $derived(fullHandle(account, session.host))
   const accountAge = $derived(profile.age ?? yearsSince(account.created_at))
   const photo = $derived(account.avatar || account.avatar_static)
@@ -41,12 +40,16 @@
   </div>
 
   <div class="profile-vitals-wrap">
-    <p class="profile-headline">{profile.headline}</p>
+    <p class="profile-headline">
+      <EmojiText text={profile.headline} emojis={account.emojis} />
+    </p>
 
     <dl class="profile-vitals">
       {#if profile.gender}
         <dt>Gender</dt>
-        <dd class="profile-vital profile-vital--gender">{profile.gender}</dd>
+        <dd class="profile-vital profile-vital--gender">
+          <EmojiText text={profile.gender} emojis={account.emojis} />
+        </dd>
       {/if}
 
       {#if accountAge !== null}
@@ -61,7 +64,9 @@
 
       {#if profile.location}
         <dt>Location</dt>
-        <dd class="profile-vital profile-vital--location">{profile.location}</dd>
+        <dd class="profile-vital profile-vital--location">
+          <EmojiText text={profile.location} emojis={account.emojis} />
+        </dd>
       {/if}
 
       <dt>Last active</dt>
@@ -78,7 +83,8 @@
 
     {#if profile.mood}
       <p class="profile-mood">
-        Mood: <span class="profile-mood-value">{profile.mood}</span>
+        Mood:
+        <EmojiText class="profile-mood-value" text={profile.mood} emojis={account.emojis} />
       </p>
     {/if}