From 692dd5771e47dcc83177ca4628f2ddde8aec9a90 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?nicole=20miko=C5=82ajczyk?= <git@mkljczk.pl>
Date: Mon, 13 Oct 2025 13:33:12 +0200
Subject: [PATCH] pl-fe: show locked account icon in more places when
 appropriate
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>
---
 packages/pl-fe/src/components/account.tsx     | 28 +++++++++++++++++++
 .../ui/components/panels/user-panel.tsx       | 17 +++++++++--
 2 files changed, 43 insertions(+), 2 deletions(-)

diff --git a/packages/pl-fe/src/components/account.tsx b/packages/pl-fe/src/components/account.tsx
index 683a6baa2..9d7b70898 100644
--- a/packages/pl-fe/src/components/account.tsx
+++ b/packages/pl-fe/src/components/account.tsx
@@ -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} />
                 )}
diff --git a/packages/pl-fe/src/features/ui/components/panels/user-panel.tsx b/packages/pl-fe/src/features/ui/components/panels/user-panel.tsx
index a2756f68e..f06003bf9 100644
--- a/packages/pl-fe/src/features/ui/components/panels/user-panel.tsx
+++ b/packages/pl-fe/src/features/ui/components/panels/user-panel.tsx
@@ -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>