[Glitch] Change translation strings of grouped notification label to have full context

Port 8c7642cd18 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
shrike
mogaminsk 2024-08-21 17:56:36 +09:00 committed by Claire
parent bae0b81779
commit b2e6f11b81
11 changed files with 150 additions and 106 deletions

View File

@ -0,0 +1,22 @@
import { Link } from 'react-router-dom';
import { useAppSelector } from 'flavours/glitch/store';
export const DisplayedName: React.FC<{
accountIds: string[];
}> = ({ accountIds }) => {
const lastAccountId = accountIds[0] ?? '0';
const account = useAppSelector((state) => state.accounts.get(lastAccountId));
if (!account) return null;
return (
<Link
to={`/@${account.acct}`}
title={`@${account.acct}`}
data-hover-card-account={account.id}
>
<bdi dangerouslySetInnerHTML={{ __html: account.display_name_html }} />
</Link>
);
};

View File

@ -1,51 +0,0 @@
import { FormattedMessage } from 'react-intl';
import { Link } from 'react-router-dom';
import { useAppSelector } from 'flavours/glitch/store';
export const NamesList: React.FC<{
accountIds: string[];
total: number;
seeMoreHref?: string;
}> = ({ accountIds, total, seeMoreHref }) => {
const lastAccountId = accountIds[0] ?? '0';
const account = useAppSelector((state) => state.accounts.get(lastAccountId));
if (!account) return null;
const displayedName = (
<Link
to={`/@${account.acct}`}
title={`@${account.acct}`}
data-hover-card-account={account.id}
>
<bdi dangerouslySetInnerHTML={{ __html: account.display_name_html }} />
</Link>
);
if (total === 1) {
return displayedName;
}
if (seeMoreHref)
return (
<FormattedMessage
id='name_and_others_with_link'
defaultMessage='{name} and <a>{count, plural, one {# other} other {# others}}</a>'
values={{
name: displayedName,
count: total - 1,
a: (chunks) => <Link to={seeMoreHref}>{chunks}</Link>,
}}
/>
);
return (
<FormattedMessage
id='name_and_others'
defaultMessage='{name} and {count, plural, one {# other} other {# others}}'
values={{ name: displayedName, count: total - 1 }}
/>
);
};

View File

@ -6,13 +6,27 @@ import type { NotificationGroupAdminSignUp } from 'flavours/glitch/models/notifi
import type { LabelRenderer } from './notification_group_with_status'; import type { LabelRenderer } from './notification_group_with_status';
import { NotificationGroupWithStatus } from './notification_group_with_status'; import { NotificationGroupWithStatus } from './notification_group_with_status';
const labelRenderer: LabelRenderer = (values) => ( const labelRenderer: LabelRenderer = (displayedName, total) => {
<FormattedMessage if (total === 1)
id='notification.admin.sign_up' return (
defaultMessage='{name} signed up' <FormattedMessage
values={values} id='notification.admin.sign_up'
/> defaultMessage='{name} signed up'
); values={{ name: displayedName }}
/>
);
return (
<FormattedMessage
id='notification.admin.sign_up.name_and_others'
defaultMessage='{name} and {count, plural, one {# other} other {# others}} signed up'
values={{
name: displayedName,
count: total - 1,
}}
/>
);
};
export const NotificationAdminSignUp: React.FC<{ export const NotificationAdminSignUp: React.FC<{
notification: NotificationGroupAdminSignUp; notification: NotificationGroupAdminSignUp;

View File

@ -1,5 +1,7 @@
import { FormattedMessage } from 'react-intl'; import { FormattedMessage } from 'react-intl';
import { Link } from 'react-router-dom';
import StarIcon from '@/material-icons/400-24px/star-fill.svg?react'; import StarIcon from '@/material-icons/400-24px/star-fill.svg?react';
import type { NotificationGroupFavourite } from 'flavours/glitch/models/notification_group'; import type { NotificationGroupFavourite } from 'flavours/glitch/models/notification_group';
import { useAppSelector } from 'flavours/glitch/store'; import { useAppSelector } from 'flavours/glitch/store';
@ -7,13 +9,29 @@ import { useAppSelector } from 'flavours/glitch/store';
import type { LabelRenderer } from './notification_group_with_status'; import type { LabelRenderer } from './notification_group_with_status';
import { NotificationGroupWithStatus } from './notification_group_with_status'; import { NotificationGroupWithStatus } from './notification_group_with_status';
const labelRenderer: LabelRenderer = (values) => ( const labelRenderer: LabelRenderer = (displayedName, total, seeMoreHref) => {
<FormattedMessage if (total === 1)
id='notification.favourite' return (
defaultMessage='{name} favorited your status' <FormattedMessage
values={values} id='notification.favourite'
/> defaultMessage='{name} favorited your status'
); values={{ name: displayedName }}
/>
);
return (
<FormattedMessage
id='notification.favourite.name_and_others_with_link'
defaultMessage='{name} and <a>{count, plural, one {# other} other {# others}}</a> favorited your post'
values={{
name: displayedName,
count: total - 1,
a: (chunks) =>
seeMoreHref ? <Link to={seeMoreHref}>{chunks}</Link> : chunks,
}}
/>
);
};
export const NotificationFavourite: React.FC<{ export const NotificationFavourite: React.FC<{
notification: NotificationGroupFavourite; notification: NotificationGroupFavourite;

View File

@ -10,13 +10,27 @@ import { useAppSelector } from 'flavours/glitch/store';
import type { LabelRenderer } from './notification_group_with_status'; import type { LabelRenderer } from './notification_group_with_status';
import { NotificationGroupWithStatus } from './notification_group_with_status'; import { NotificationGroupWithStatus } from './notification_group_with_status';
const labelRenderer: LabelRenderer = (values) => ( const labelRenderer: LabelRenderer = (displayedName, total) => {
<FormattedMessage if (total === 1)
id='notification.follow' return (
defaultMessage='{name} followed you' <FormattedMessage
values={values} id='notification.follow'
/> defaultMessage='{name} followed you'
); values={{ name: displayedName }}
/>
);
return (
<FormattedMessage
id='notification.follow.name_and_others'
defaultMessage='{name} and {count, plural, one {# other} other {# others}} followed you'
values={{
name: displayedName,
count: total - 1,
}}
/>
);
};
const FollowerCount: React.FC<{ accountId: string }> = ({ accountId }) => { const FollowerCount: React.FC<{ accountId: string }> = ({ accountId }) => {
const account = useAppSelector((s) => s.accounts.get(accountId)); const account = useAppSelector((s) => s.accounts.get(accountId));

View File

@ -21,13 +21,27 @@ const messages = defineMessages({
reject: { id: 'follow_request.reject', defaultMessage: 'Reject' }, reject: { id: 'follow_request.reject', defaultMessage: 'Reject' },
}); });
const labelRenderer: LabelRenderer = (values) => ( const labelRenderer: LabelRenderer = (displayedName, total) => {
<FormattedMessage if (total === 1)
id='notification.follow_request' return (
defaultMessage='{name} has requested to follow you' <FormattedMessage
values={values} id='notification.follow_request'
/> defaultMessage='{name} has requested to follow you'
); values={{ name: displayedName }}
/>
);
return (
<FormattedMessage
id='notification.follow_request.name_and_others'
defaultMessage='{name} and {count, plural, one {# other} other {# others}} has requested to follow you'
values={{
name: displayedName,
count: total - 1,
}}
/>
);
};
export const NotificationFollowRequest: React.FC<{ export const NotificationFollowRequest: React.FC<{
notification: NotificationGroupFollowRequest; notification: NotificationGroupFollowRequest;

View File

@ -12,11 +12,13 @@ import { RelativeTimestamp } from 'flavours/glitch/components/relative_timestamp
import { useAppDispatch } from 'flavours/glitch/store'; import { useAppDispatch } from 'flavours/glitch/store';
import { AvatarGroup } from './avatar_group'; import { AvatarGroup } from './avatar_group';
import { DisplayedName } from './displayed_name';
import { EmbeddedStatus } from './embedded_status'; import { EmbeddedStatus } from './embedded_status';
import { NamesList } from './names_list';
export type LabelRenderer = ( export type LabelRenderer = (
values: Record<string, React.ReactNode>, displayedName: JSX.Element,
total: number,
seeMoreHref?: string,
) => JSX.Element; ) => JSX.Element;
export const NotificationGroupWithStatus: React.FC<{ export const NotificationGroupWithStatus: React.FC<{
@ -50,15 +52,11 @@ export const NotificationGroupWithStatus: React.FC<{
const label = useMemo( const label = useMemo(
() => () =>
labelRenderer({ labelRenderer(
name: ( <DisplayedName accountIds={accountIds} />,
<NamesList count,
accountIds={accountIds} labelSeeMoreHref,
total={count} ),
seeMoreHref={labelSeeMoreHref}
/>
),
}),
[labelRenderer, accountIds, count, labelSeeMoreHref], [labelRenderer, accountIds, count, labelSeeMoreHref],
); );

View File

@ -1,5 +1,7 @@
import { FormattedMessage } from 'react-intl'; import { FormattedMessage } from 'react-intl';
import { Link } from 'react-router-dom';
import RepeatIcon from '@/material-icons/400-24px/repeat.svg?react'; import RepeatIcon from '@/material-icons/400-24px/repeat.svg?react';
import type { NotificationGroupReblog } from 'flavours/glitch/models/notification_group'; import type { NotificationGroupReblog } from 'flavours/glitch/models/notification_group';
import { useAppSelector } from 'flavours/glitch/store'; import { useAppSelector } from 'flavours/glitch/store';
@ -7,13 +9,29 @@ import { useAppSelector } from 'flavours/glitch/store';
import type { LabelRenderer } from './notification_group_with_status'; import type { LabelRenderer } from './notification_group_with_status';
import { NotificationGroupWithStatus } from './notification_group_with_status'; import { NotificationGroupWithStatus } from './notification_group_with_status';
const labelRenderer: LabelRenderer = (values) => ( const labelRenderer: LabelRenderer = (displayedName, total, seeMoreHref) => {
<FormattedMessage if (total === 1)
id='notification.reblog' return (
defaultMessage='{name} boosted your status' <FormattedMessage
values={values} id='notification.reblog'
/> defaultMessage='{name} boosted your status'
); values={{ name: displayedName }}
/>
);
return (
<FormattedMessage
id='notification.reblog.name_and_others_with_link'
defaultMessage='{name} and <a>{count, plural, one {# other} other {# others}}</a> boosted your post'
values={{
name: displayedName,
count: total - 1,
a: (chunks) =>
seeMoreHref ? <Link to={seeMoreHref}>{chunks}</Link> : chunks,
}}
/>
);
};
export const NotificationReblog: React.FC<{ export const NotificationReblog: React.FC<{
notification: NotificationGroupReblog; notification: NotificationGroupReblog;

View File

@ -6,11 +6,11 @@ import type { NotificationGroupStatus } from 'flavours/glitch/models/notificatio
import type { LabelRenderer } from './notification_group_with_status'; import type { LabelRenderer } from './notification_group_with_status';
import { NotificationWithStatus } from './notification_with_status'; import { NotificationWithStatus } from './notification_with_status';
const labelRenderer: LabelRenderer = (values) => ( const labelRenderer: LabelRenderer = (displayedName) => (
<FormattedMessage <FormattedMessage
id='notification.status' id='notification.status'
defaultMessage='{name} just posted' defaultMessage='{name} just posted'
values={values} values={{ name: displayedName }}
/> />
); );

View File

@ -6,11 +6,11 @@ import type { NotificationGroupUpdate } from 'flavours/glitch/models/notificatio
import type { LabelRenderer } from './notification_group_with_status'; import type { LabelRenderer } from './notification_group_with_status';
import { NotificationWithStatus } from './notification_with_status'; import { NotificationWithStatus } from './notification_with_status';
const labelRenderer: LabelRenderer = (values) => ( const labelRenderer: LabelRenderer = (displayedName) => (
<FormattedMessage <FormattedMessage
id='notification.update' id='notification.update'
defaultMessage='{name} edited a post' defaultMessage='{name} edited a post'
values={values} values={{ name: displayedName }}
/> />
); );

View File

@ -18,7 +18,7 @@ import { Icon } from 'flavours/glitch/components/icon';
import Status from 'flavours/glitch/containers/status_container'; import Status from 'flavours/glitch/containers/status_container';
import { useAppSelector, useAppDispatch } from 'flavours/glitch/store'; import { useAppSelector, useAppDispatch } from 'flavours/glitch/store';
import { NamesList } from './names_list'; import { DisplayedName } from './displayed_name';
import type { LabelRenderer } from './notification_group_with_status'; import type { LabelRenderer } from './notification_group_with_status';
export const NotificationWithStatus: React.FC<{ export const NotificationWithStatus: React.FC<{
@ -43,10 +43,7 @@ export const NotificationWithStatus: React.FC<{
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const label = useMemo( const label = useMemo(
() => () => labelRenderer(<DisplayedName accountIds={accountIds} />, count),
labelRenderer({
name: <NamesList accountIds={accountIds} total={count} />,
}),
[labelRenderer, accountIds, count], [labelRenderer, accountIds, count],
); );