Display the nip05 nag on mobile

src/components/sidebar-menu.tsx

@@ -12,6 +12,7 @@ import Account from 'soapbox/components/account';
 import { Stack, Divider, HStack, Icon, IconButton, Text } from 'soapbox/components/ui';
 import ProfileStats from 'soapbox/features/ui/components/profile-stats';
 import { useAppDispatch, useAppSelector, useFeatures, useInstance } from 'soapbox/hooks';
+import { useSettingsNotifications } from 'soapbox/hooks/useSettingsNotifications';
 import { makeGetOtherAccounts } from 'soapbox/selectors';
 
 import type { List as ImmutableList } from 'immutable';
@@ -48,13 +49,14 @@ interface ISidebarLink {
   icon: string;
   text: string | JSX.Element;
   onClick: React.EventHandler<React.MouseEvent>;
+  count?: number;
 }
 
-const SidebarLink: React.FC<ISidebarLink> = ({ href, to, icon, text, onClick }) => {
+const SidebarLink: React.FC<ISidebarLink> = ({ href, to, icon, text, onClick, count }) => {
   const body = (
     <HStack space={2} alignItems='center'>
       <div className='relative inline-flex rounded-full bg-primary-50 p-2 dark:bg-gray-800'>
-        <Icon src={icon} className='h-5 w-5 text-primary-500' />
+        <Icon src={icon} className='h-5 w-5 text-primary-500' count={count} />
       </div>
 
       <Text tag='span' weight='medium' theme='inherit'>{text}</Text>
@@ -89,6 +91,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
   const settings = useAppSelector((state) => getSettings(state));
   const followRequestsCount = useAppSelector((state) => state.user_lists.follow_requests.items.count());
   const instance = useInstance();
+  const settingsNotifications = useSettingsNotifications();
 
   const closeButtonRef = React.useRef(null);
 
@@ -286,6 +289,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
                     icon={require('@tabler/icons/outline/settings.svg')}
                     text={intl.formatMessage(messages.preferences)}
                     onClick={onClose}
+                    count={settingsNotifications.size}
                   />
 
                   {features.federating && (

src/features/ui/components/navbar.tsx

@@ -8,10 +8,11 @@ import { fetchInstance } from 'soapbox/actions/instance';
 import { openModal } from 'soapbox/actions/modals';
 import { openSidebar } from 'soapbox/actions/sidebar';
 import SiteLogo from 'soapbox/components/site-logo';
-import { Avatar, Button, Form, HStack, IconButton, Input, Tooltip } from 'soapbox/components/ui';
+import { Avatar, Button, Counter, Form, HStack, IconButton, Input, Tooltip } from 'soapbox/components/ui';
 import Search from 'soapbox/features/compose/components/search';
 import { useAppDispatch, useAppSelector, useFeatures, useOwnAccount, useRegistrationStatus } from 'soapbox/hooks';
 import { useIsMobile } from 'soapbox/hooks/useIsMobile';
+import { useSettingsNotifications } from 'soapbox/hooks/useSettingsNotifications';
 import { isStandalone } from 'soapbox/utils/state';
 
 import ProfileDropdown from './profile-dropdown';
@@ -35,6 +36,7 @@ const Navbar = () => {
   const { account } = useOwnAccount();
   const node = useRef(null);
   const isMobile = useIsMobile();
+  const settingsNotifications = useSettingsNotifications();
 
   const [isLoading, setLoading] = useState<boolean>(false);
   const [username, setUsername] = useState<string>('');
@@ -86,7 +88,12 @@ const Navbar = () => {
         <div className='relative flex h-12 justify-between lg:h-16'>
           {account && (
             <div className='absolute inset-y-0 left-0 flex items-center lg:hidden rtl:left-auto rtl:right-0'>
-              <button onClick={onOpenSidebar}>
+              <button onClick={onOpenSidebar} className='relative'>
+                {settingsNotifications.size ? (
+                  <span className='absolute -right-3 -top-1 z-10 flex h-5 min-w-[20px] shrink-0 items-center justify-center whitespace-nowrap break-words'>
+                    <Counter count={settingsNotifications.size} />
+                  </span>
+                ) : null}
                 <Avatar src={account.avatar} size={34} />
               </button>
             </div>