matty/ncd-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

pl-fe: show locked account icon in more places when appropriate

Browse Source 
Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>
This commit is contained in:
nicole mikołajczyk
2025-10-13 13:33:12 +02:00
parent 3b77acbff0
commit 692dd5771e
2 changed files with 43 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
packages/pl-fe/src/components/account.tsx
View File

@ -33,6 +33,7 @@ interface IInstanceFavicon {
const messages = defineMessages({
bot: { id: 'account.badges.bot', defaultMessage: 'Bot' },
timeline: { id: 'account.instance_favicon', defaultMessage: 'Visit {domain} timeline' },
account_locked: { id: 'account.locked_info', defaultMessage: 'This account privacy status is set to locked. The owner manually reviews who can follow them.' },
});
const InstanceFavicon: React.FC<IInstanceFavicon> = ({ account, disabled }) => {
@ -258,6 +259,20 @@ const Account = ({
<HStack alignItems='center' space={1}>
<Text theme='muted' size='sm' direction='ltr' truncate>@{username}</Text>
{account.locked && (
<>
<Icon
src={require('@phosphor-icons/core/regular/lock.svg')}
alt={intl.formatMessage(messages.account_locked)}
className='size-4 text-gray-600'
/>
{account.favicon && !disableUserProvidedMedia && (
<Text tag='span' theme='muted' size='sm'>&middot;</Text>
)}
</>
)}
{account.favicon && !disableUserProvidedMedia && (
<InstanceFavicon account={account} disabled />
)}
@ -325,6 +340,19 @@ const Account = ({
<HStack alignItems='center' space={1}>
<Text theme='muted' size='sm' direction='ltr' truncate>@{username}</Text>
{account.locked && (
<>
<Icon
src={require('@phosphor-icons/core/regular/lock.svg')}
alt={intl.formatMessage(messages.account_locked)}
className='size-4 text-gray-600'
/>
{account.favicon && !disableUserProvidedMedia && (
<Text tag='span' theme='muted' size='sm'>&middot;</Text>
)}
</>
)}
{account.favicon && !disableUserProvidedMedia && (
<InstanceFavicon account={account} disabled={!withLinkToProfile} />
)}

17
packages/pl-fe/src/features/ui/components/panels/user-panel.tsx
View File

@ -1,11 +1,12 @@
import React from 'react';
import { FormattedMessage, useIntl } from 'react-intl';
import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
import { Link } from 'react-router-dom';
import { useAccount } from 'pl-fe/api/hooks/accounts/use-account';
import StillImage from 'pl-fe/components/still-image';
import Avatar from 'pl-fe/components/ui/avatar';
import HStack from 'pl-fe/components/ui/hstack';
import Icon from 'pl-fe/components/ui/icon';
import Stack from 'pl-fe/components/ui/stack';
import Text from 'pl-fe/components/ui/text';
import VerificationBadge from 'pl-fe/components/verification-badge';
@ -16,6 +17,10 @@ import { getAcct } from 'pl-fe/utils/accounts';
import { shortNumberFormat } from 'pl-fe/utils/numbers';
import { displayFqn } from 'pl-fe/utils/state';
const messages = defineMessages({
account_locked: { id: 'account.locked_info', defaultMessage: 'This account privacy status is set to locked. The owner manually reviews who can follow them.' },
});
interface IUserPanel {
accountId: string;
action?: JSX.Element;
@ -88,10 +93,18 @@ const UserPanel: React.FC<IUserPanel> = ({ accountId, action, badges, domain })
</HStack>
</Link>
<HStack>
<HStack alignItems='center' space={1}>
<Text size='sm' theme='muted' direction='ltr' truncate>
@{getAcct(account, fqn)}
</Text>
{account.locked && (
<Icon
src={require('@phosphor-icons/core/regular/lock.svg')}
alt={intl.formatMessage(messages.account_locked)}
className='size-4 text-gray-600'
/>
)}
</HStack>
</Stack>