From 5fa765468878a0efcee58f832075df8a499bd18b Mon Sep 17 00:00:00 2001 From: Echo Date: Mon, 15 Dec 2025 13:54:46 +0100 Subject: [PATCH] Fixes display names not rendering with emojis (#37251) --- app/helpers/wrapstodon_helper.rb | 10 ++++--- app/javascript/entrypoints/wrapstodon.tsx | 7 +++-- .../features/annual_report/archetype.tsx | 10 +++---- .../mastodon/features/annual_report/index.tsx | 6 +---- .../annual_report/most_used_hashtag.tsx | 26 +++++++++++-------- .../features/annual_report/shared_page.tsx | 5 ++-- app/views/wrapstodon/show.html.haml | 1 - 7 files changed, 36 insertions(+), 29 deletions(-) diff --git a/app/helpers/wrapstodon_helper.rb b/app/helpers/wrapstodon_helper.rb index da3b0d6fad8..8031c51179e 100644 --- a/app/helpers/wrapstodon_helper.rb +++ b/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 diff --git a/app/javascript/entrypoints/wrapstodon.tsx b/app/javascript/entrypoints/wrapstodon.tsx index 7a74e18d521..e2c8d5a38e5 100644 --- a/app/javascript/entrypoints/wrapstodon.tsx +++ b/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, }), ); diff --git a/app/javascript/mastodon/features/annual_report/archetype.tsx b/app/javascript/mastodon/features/annual_report/archetype.tsx index 465944df542..7d1cf0bdd48 100644 --- a/app/javascript/mastodon/features/annual_report/archetype.tsx +++ b/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 (
, + }} /> )} @@ -199,7 +199,7 @@ export const Archetype: React.FC<{

{isRevealed ? ( intl.formatMessage(descriptions[archetype], { - name, + name: , }) ) : ( 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 && ( )} diff --git a/app/javascript/mastodon/features/annual_report/most_used_hashtag.tsx b/app/javascript/mastodon/features/annual_report/most_used_hashtag.tsx index 5fe386bf2bc..293146cc2a7 100644 --- a/app/javascript/mastodon/features/annual_report/most_used_hashtag.tsx +++ b/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 (

#{hashtag.name}

- {context === 'modal' ? ( + {context === 'modal' && ( - ) : ( - name && ( - - ) + )} + {context !== 'modal' && account && ( + , + }} + /> )}

diff --git a/app/javascript/mastodon/features/annual_report/shared_page.tsx b/app/javascript/mastodon/features/annual_report/shared_page.tsx index c69a05e5af1..f2b26bf2aac 100644 --- a/app/javascript/mastodon/features/annual_report/shared_page.tsx +++ b/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 (
@@ -23,7 +24,7 @@ export const WrapstodonSharedPage: FC = () => { - {!me && ( + {!isLoggedIn && (