Add switch menus for Accounts

Increase awareness that users can open multiple tabs for different accounts

src/app.jsx

@@ -56,7 +56,11 @@ import { getAccessToken } from './utils/auth';
 import focusDeck from './utils/focus-deck';
 import states, { initStates, statusKey } from './utils/states';
 import store from './utils/store';
-import { getCurrentAccount, setCurrentAccountID } from './utils/store-utils';
+import {
+  getAccount,
+  getCurrentAccount,
+  setCurrentAccountID,
+} from './utils/store-utils';
 
 import './utils/toast-alert';
 
@@ -343,7 +347,25 @@ function App() {
       })();
     } else {
       window.__IGNORE_GET_ACCOUNT_ERROR__ = true;
-      const account = getCurrentAccount();
+      const searchAccount = decodeURIComponent(
+        (window.location.search.match(/account=([^&]+)/) || [, ''])[1],
+      );
+      let account;
+      if (searchAccount) {
+        account = getAccount(searchAccount);
+        console.log('searchAccount', searchAccount, account);
+        if (account) {
+          setCurrentAccountID(account.info.id);
+          window.history.replaceState(
+            {},
+            document.title,
+            window.location.pathname || '/',
+          );
+        }
+      }
+      if (!account) {
+        account = getCurrentAccount();
+      }
       if (account) {
         setCurrentAccountID(account.info.id);
         const { client } = api({ account });

src/pages/accounts.jsx

@@ -9,6 +9,7 @@ import Avatar from '../components/avatar';
 import Icon from '../components/icon';
 import Link from '../components/link';
 import MenuConfirm from '../components/menu-confirm';
+import MenuLink from '../components/menu-link';
 import Menu2 from '../components/menu2';
 import NameText from '../components/name-text';
 import { api } from '../utils/api';
@@ -16,6 +17,8 @@ import states from '../utils/states';
 import store from '../utils/store';
 import { getCurrentAccountID, setCurrentAccountID } from '../utils/store-utils';
 
+const isStandalone = window.matchMedia('(display-mode: standalone)').matches;
+
 function Accounts({ onClose }) {
   const { masto } = api();
   // Accounts
@@ -107,6 +110,28 @@ function Accounts({ onClose }) {
                         </button>
                       }
                     >
+                      <MenuItem
+                        disabled={isCurrent}
+                        onClick={() => {
+                          setCurrentAccountID(account.info.id);
+                          location.reload();
+                        }}
+                      >
+                        <Icon icon="transfer" />{' '}
+                        <Trans>Switch to this account</Trans>
+                      </MenuItem>
+                      {!isStandalone && !isCurrent && (
+                        <MenuLink
+                          href={`./?account=${account.info.id}`}
+                          target="_blank"
+                        >
+                          <Icon icon="external" />
+                          <span>
+                            <Trans>Switch in new tab/window</Trans>
+                          </span>
+                        </MenuLink>
+                      )}
+                      <MenuDivider />
                       <MenuItem
                         onClick={() => {
                           states.showAccount = `${account.info.username}@${account.instanceURL}`;