Restore mobile account switcher, make it available to everyone

app/soapbox/components/sidebar_menu.tsx

@@ -37,6 +37,7 @@ const messages = defineMessages({
   lists: { id: 'column.lists', defaultMessage: 'Lists' },
   invites: { id: 'navigation_bar.invites', defaultMessage: 'Invites' },
   developers: { id: 'navigation.developers', defaultMessage: 'Developers' },
+  addAccount: { id: 'profile_dropdown.add_account', defaultMessage: 'Add an existing account' },
 });
 
 interface ISidebarLink {
@@ -181,6 +182,11 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
                   {switcher && (
                     <div className='border-t border-solid border-gray-200'>
                       {otherAccounts.map(account => renderAccount(account))}
+
+                      <NavLink className='flex py-2 space-x-1' to='/login' onClick={handleClose}>
+                        <Icon className='dark:text-white' src={require('@tabler/icons/icons/plus.svg')} />
+                        <Text>{intl.formatMessage(messages.addAccount)}</Text>
+                      </NavLink>
                     </div>
                   )}
                 </Stack>

app/soapbox/features/ui/components/profile-dropdown.tsx

@@ -7,7 +7,7 @@ import { Link } from 'react-router-dom';
 import { logOut, switchAccount } from 'soapbox/actions/auth';
 import { fetchOwnAccounts } from 'soapbox/actions/auth';
 import { Menu, MenuButton, MenuDivider, MenuItem, MenuLink, MenuList } from 'soapbox/components/ui';
-import { useAppSelector, useOwnAccount } from 'soapbox/hooks';
+import { useAppSelector } from 'soapbox/hooks';
 import { makeGetAccount } from 'soapbox/selectors';
 
 import Account from '../../../components/account';
@@ -36,9 +36,7 @@ const ProfileDropdown: React.FC<IProfileDropdown> = ({ account, children }) => {
   const dispatch = useDispatch();
   const intl = useIntl();
 
-  const currentAccount = useOwnAccount();
   const authUsers = useAppSelector((state) => state.auth.get('users'));
-  const isCurrentAccountStaff = Boolean(currentAccount?.staff);
   const otherAccounts = useAppSelector((state) => authUsers.map((authUser: any) => getAccount(state, authUser.get('id'))));
 
   const handleLogOut = () => {
@@ -77,13 +75,11 @@ const ProfileDropdown: React.FC<IProfileDropdown> = ({ account, children }) => {
 
     menu.push({ text: null });
 
-    if (isCurrentAccountStaff) {
-      menu.push({
-        text: intl.formatMessage(messages.add),
-        to: '/login',
-        icon: require('@tabler/icons/icons/plus.svg'),
-      });
-    }
+    menu.push({
+      text: intl.formatMessage(messages.add),
+      to: '/login',
+      icon: require('@tabler/icons/icons/plus.svg'),
+    });
 
     menu.push({
       text: intl.formatMessage(messages.logout, { acct: account.acct }),
@@ -93,7 +89,7 @@ const ProfileDropdown: React.FC<IProfileDropdown> = ({ account, children }) => {
     });
 
     return menu;
-  }, [account, isCurrentAccountStaff, authUsers]);
+  }, [account, authUsers]);
 
   React.useEffect(() => {
     fetchOwnAccountThrottled();

app/styles/components/sidebar-menu.scss

@@ -134,7 +134,7 @@
 
 .sidebar-menu-item {
   display: flex;
-  padding: 16px 18px;
+  padding: 16px 0;
   cursor: pointer;
   text-decoration: none;
   color: var(--primary-text-color--faint);