Fixes display names not rendering with emojis (#37251)

app/helpers/wrapstodon_helper.rb

@@ -2,15 +2,19 @@
 
 module WrapstodonHelper
   def render_wrapstodon_share_data(report)
-    json = ActiveModelSerializers::SerializableResource.new(
+    payload = ActiveModelSerializers::SerializableResource.new(
       AnnualReportsPresenter.new([report]),
       serializer: REST::AnnualReportsSerializer,
       scope: nil,
       scope_name: :current_user
-    ).to_json
+    ).as_json
+
+    payload[:me] = current_account.id.to_s if user_signed_in?
+
+    json_string = payload.to_json
 
     # rubocop:disable Rails/OutputSafety
-    content_tag(:script, json_escape(json).html_safe, type: 'application/json', id: 'wrapstodon-data')
+    content_tag(:script, json_escape(json_string).html_safe, type: 'application/json', id: 'wrapstodon-data')
     # rubocop:enable Rails/OutputSafety
   end
 end

app/javascript/entrypoints/wrapstodon.tsx

@@ -25,7 +25,7 @@ function loaded() {
 
   const initialState = JSON.parse(
     propsNode.textContent,
-  ) as ApiAnnualReportResponse;
+  ) as ApiAnnualReportResponse & { me?: string };
 
   const report = initialState.annual_reports[0];
   if (!report) {
@@ -35,7 +35,10 @@ function loaded() {
   // Set up store
   store.dispatch(
     hydrateStore({
-      meta: { locale: document.documentElement.lang },
+      meta: {
+        locale: document.documentElement.lang,
+        me: initialState.me,
+      },
       accounts: initialState.accounts,
     }),
   );

app/javascript/mastodon/features/annual_report/archetype.tsx

@@ -12,6 +12,7 @@ import replier from '@/images/archetypes/replier.png';
 import space_elements from '@/images/archetypes/space_elements.png';
 import { Avatar } from '@/mastodon/components/avatar';
 import { Button } from '@/mastodon/components/button';
+import { DisplayName } from '@/mastodon/components/display_name';
 import { me } from '@/mastodon/initial_state';
 import type { Account } from '@/mastodon/models/account';
 import type {
@@ -137,9 +138,6 @@ export const Archetype: React.FC<{
     ? archetypeSelfDescriptions
     : archetypePublicDescriptions;
 
-  // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing -- we specifically want to fallback if `display_name` is empty
-  const name = account?.display_name || account?.username;
-
   return (
     <div
       className={classNames(styles.box, styles.archetype)}
@@ -182,7 +180,9 @@ export const Archetype: React.FC<{
             <FormattedMessage
               id='annual_report.summary.archetype.title_public'
               defaultMessage="{name}'s archetype"
-              values={{ name }}
+              values={{
+                name: <DisplayName variant='simple' account={account} />,
+              }}
             />
           )}
         </h2>
@@ -199,7 +199,7 @@ export const Archetype: React.FC<{
         <p>
           {isRevealed ? (
             intl.formatMessage(descriptions[archetype], {
-              name,
+              name: <DisplayName variant='simple' account={account} />,
             })
           ) : (
             <FormattedMessage

app/javascript/mastodon/features/annual_report/index.tsx

@@ -10,7 +10,6 @@ import classNames from 'classnames/bind';
 import { closeModal } from '@/mastodon/actions/modal';
 import { IconButton } from '@/mastodon/components/icon_button';
 import { LoadingIndicator } from '@/mastodon/components/loading_indicator';
-import { me } from '@/mastodon/initial_state';
 import {
   createAppSelector,
   useAppDispatch,
@@ -30,9 +29,6 @@ const moduleClassNames = classNames.bind(styles);
 const accountSelector = createAppSelector(
   [(state) => state.accounts, (state) => state.annualReport.report],
   (accounts, report) => {
-    if (me) {
-      return accounts.get(me);
-    }
     if (report?.schema_version === 2) {
       return accounts.get(report.account_id);
     }
@@ -109,7 +105,7 @@ export const AnnualReport: FC<{ context?: 'modal' | 'standalone' }> = ({
           {topHashtag && (
             <MostUsedHashtag
               hashtag={topHashtag}
-              name={account?.display_name}
+              account={account}
               context={context}
             />
           )}

app/javascript/mastodon/features/annual_report/most_used_hashtag.tsx

@@ -2,15 +2,17 @@ import { FormattedMessage } from 'react-intl';
 
 import classNames from 'classnames';
 
+import { DisplayName } from '@/mastodon/components/display_name';
+import type { Account } from '@/mastodon/models/account';
 import type { NameAndCount } from 'mastodon/models/annual_report';
 
 import styles from './index.module.scss';
 
 export const MostUsedHashtag: React.FC<{
   hashtag: NameAndCount;
-  name: string | undefined;
   context: 'modal' | 'standalone';
-}> = ({ hashtag, name, context }) => {
+  account?: Account;
+}> = ({ hashtag, context, account }) => {
   return (
     <div
       className={classNames(styles.box, styles.mostUsedHashtag, styles.content)}
@@ -25,20 +27,22 @@ export const MostUsedHashtag: React.FC<{
       <div className={styles.statExtraLarge}>#{hashtag.name}</div>
 
       <p>
-        {context === 'modal' ? (
+        {context === 'modal' && (
           <FormattedMessage
             id='annual_report.summary.most_used_hashtag.used_count'
             defaultMessage='You included this hashtag in {count, plural, one {one post} other {# posts}}.'
             values={{ count: hashtag.count }}
           />
-        ) : (
+        )}
-          name && (
+        {context !== 'modal' && account && (
-            <FormattedMessage
+          <FormattedMessage
-              id='annual_report.summary.most_used_hashtag.used_count_public'
+            id='annual_report.summary.most_used_hashtag.used_count_public'
-              defaultMessage='{name} included this hashtag in {count, plural, one {one post} other {# posts}}.'
+            defaultMessage='{name} included this hashtag in {count, plural, one {one post} other {# posts}}.'
-              values={{ count: hashtag.count, name }}
+            values={{
-            />
+              count: hashtag.count,
-          )
+              name: <DisplayName variant='simple' account={account} />,
+            }}
+          />
         )}
       </p>
     </div>

app/javascript/mastodon/features/annual_report/shared_page.tsx

@@ -3,12 +3,13 @@ import type { FC } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { IconLogo } from '@/mastodon/components/logo';
-import { me } from '@/mastodon/initial_state';
+import { useAppSelector } from '@/mastodon/store';
 
 import { AnnualReport } from './index';
 import classes from './shared_page.module.scss';
 
 export const WrapstodonSharedPage: FC = () => {
+  const isLoggedIn = useAppSelector((state) => !!state.meta.get('me'));
   return (
     <main className={classes.wrapper}>
       <AnnualReport />
@@ -23,7 +24,7 @@ export const WrapstodonSharedPage: FC = () => {
           <a href='https://joinmastodon.org'>
             <FormattedMessage id='footer.about' defaultMessage='About' />
           </a>
-          {!me && (
+          {!isLoggedIn && (
             <a href='https://joinmastodon.org/servers'>
               <FormattedMessage
                 id='annual_report.shared_page.sign_up'

app/views/wrapstodon/show.html.haml

@@ -11,7 +11,6 @@
   = render 'og_description', account: @account
   = render 'og_image', report: @generated_annual_report
 
-  = render_initial_state
   = vite_typescript_tag 'wrapstodon.tsx', crossorigin: 'anonymous'
 
 - content_for :html_classes, 'theme-dark'