diff --git a/packages/nicolium/src/features/ui/components/profile-stats.tsx b/packages/nicolium/src/features/ui/components/profile-stats.tsx index e5fcba1fe..6fbd8695c 100644 --- a/packages/nicolium/src/features/ui/components/profile-stats.tsx +++ b/packages/nicolium/src/features/ui/components/profile-stats.tsx @@ -1,6 +1,6 @@ import { Link } from '@tanstack/react-router'; import React from 'react'; -import { FormattedMessage, useIntl } from 'react-intl'; +import { defineMessages, FormattedMessage, useIntl } from 'react-intl'; import Text from '@/components/ui/text'; import { useSettings } from '@/stores/settings'; @@ -8,6 +8,22 @@ import { shortNumberFormat } from '@/utils/numbers'; import type { Account } from 'pl-api'; +const messages = defineMessages({ + statusesCount: { + id: 'account.statuses_count', + defaultMessage: '{count, plural, one {# status} other {# statuses}}', + }, + followersCount: { + id: 'account.followers_count', + defaultMessage: '{count, plural, one {# follower} other {# followers}}', + }, + followingCount: { id: 'account.following_count', defaultMessage: '{count} following' }, + subscribersCount: { + id: 'account.subscribers_count', + defaultMessage: '{count, plural, one {# subscriber} other {# subscribers}}', + }, +}); + interface IProfileStats { account: | Pick< @@ -30,7 +46,10 @@ const ProfileStats: React.FC = ({ account, onClickHandler }) => { return (
{!demetricator && ( -
+
{shortNumberFormat(account.statuses_count)} @@ -47,7 +66,10 @@ const ProfileStats: React.FC = ({ account, onClickHandler }) => { title={intl.formatNumber(account.followers_count)} className='hover:underline' > -
+
{!demetricator && ( {shortNumberFormat(account.followers_count)} @@ -66,7 +88,10 @@ const ProfileStats: React.FC = ({ account, onClickHandler }) => { title={intl.formatNumber(account.following_count)} className='hover:underline' > -
+
{!demetricator && ( {shortNumberFormat(account.following_count)} @@ -86,7 +111,12 @@ const ProfileStats: React.FC = ({ account, onClickHandler }) => { title={intl.formatNumber(account.subscribers_count)} className='hover:underline' > -
+
{!demetricator && ( {shortNumberFormat(account.subscribers_count)} diff --git a/packages/nicolium/src/locales/en.json b/packages/nicolium/src/locales/en.json index 89fe4b297..0a9ebb226 100644 --- a/packages/nicolium/src/locales/en.json +++ b/packages/nicolium/src/locales/en.json @@ -30,6 +30,8 @@ "account.follow": "Follow", "account.followers": "Followers", "account.followers.empty": "No one follows this user yet.", + "account.followers_count": "{count, plural, one {# follower} other {# followers}}", + "account.following_count": "{count} following", "account.follows": "Following", "account.follows.empty": "This user doesn't follow anyone yet.", "account.follows_you": "Follows you", @@ -70,12 +72,14 @@ "account.share": "Share @{name}'s profile", "account.show_reblogs": "Show reposts from @{name}", "account.statuses": "Statuses", + "account.statuses_count": "{count, plural, one {# status} other {# statuses}}", "account.subscribe": "Subscribe to notifications from @{name}", "account.subscribe.failure": "An error occurred trying to subscribe to this account.", "account.subscribe.success": "You have subscribed to this account.", "account.subscribers": "Subscribers", "account.subscribers.empty": "No one subscribes to this user yet.", "account.subscribers.include_expired": "Include expired subscriptions", + "account.subscribers_count": "{count, plural, one {# subscriber} other {# subscribers}}", "account.timezone": "Timezone: {timezone}", "account.timezone.equal": "(same as you)", "account.unblock": "Unblock @{name}", diff --git a/packages/nicolium/src/styles/new/timelines.scss b/packages/nicolium/src/styles/new/timelines.scss index cf72c9389..74d2cf65e 100644 --- a/packages/nicolium/src/styles/new/timelines.scss +++ b/packages/nicolium/src/styles/new/timelines.scss @@ -2,19 +2,21 @@ @use 'variables'; .⁂-layout__main--home { - .dark.black & > :not([hidden]) ~ :not([hidden]) { - border-color: rgb(var(--color-gray-800)); + display: flex; + flex-direction: column; + gap: 1rem; + + .dark.black & { + gap: 0; + + & > :not([hidden]) ~ :not([hidden]) { + border-color: rgb(var(--color-gray-800)); + } } .dark & > :not([hidden]) ~ :not([hidden]) { border-color: rgb(var(--color-primary-800)); } - - @media (min-width: variables.$breakpoint-sm) { - & > :not([hidden]) ~ :not([hidden]) { - margin-top: 1rem; - } - } } .⁂-compose-block {