perf(react-doctor): fix compiler-blocking patterns, raise score 72→81

Replace sync setState-in-effect with keyed remount and render-derived patterns in app, error-display, topbar-edit-modal, catalog-filters; use useCurrentTime() instead of Date.now() in hot paths; fix conditional hooks, passive scroll listeners, lodash path imports.

src/components/settings-modal/account-settings/account-settings.tsx

@@ -8,20 +8,21 @@ import { useLocation, useNavigate } from 'react-router-dom';
 
 const isAndroid = Capacitor.getPlatform() === 'android';
 
-const AccountSettings = () => {
+// Inner component keyed by account id so state resets when user switches account
+const AccountSettingsEditor = ({
+  account,
+}: {
+  account?: { id?: string; name?: string; author?: { address?: string; shortAddress?: string }; [key: string]: unknown };
+}) => {
   const { t } = useTranslation();
   const location = useLocation();
-  const account = useAccount();
-  const [text, setText] = useState('');
 
   const accountJson = useMemo(
     () => stringify({ account: { ...account, plebbit: undefined, karma: undefined, plebbitReactOptions: undefined, unreadNotificationCount: undefined } }),
     [account],
   );
 
-  useEffect(() => {
-    setText(accountJson);
-  }, [accountJson]);
+  const [text, setText] = useState(() => accountJson);
 
   const { accounts } = useAccounts();
   const switchToNewAccountRef = useRef(false);
@@ -92,7 +93,7 @@ const AccountSettings = () => {
       // Create a temporary download link
       const link = document.createElement('a');
       link.href = fileUrl;
-      link.download = `${account.name}.json`;
+      link.download = `${account?.name ?? 'account'}.json`;
 
       // Append the link, trigger the download, then remove the link
       document.body.appendChild(link);
@@ -221,7 +222,7 @@ const AccountSettings = () => {
       <textarea value={text} onChange={(e) => setText(e.target.value)} autoCorrect='off' autoComplete='off' spellCheck='false' />
       <div>
         <button onClick={saveAccount}>{t('save_changes')}</button> <button onClick={() => setText(accountJson)}>{t('reset_changes')}</button>
-        <button className={styles.deleteAccount} onClick={() => _deleteAccount(account?.name)}>
+        <button className={styles.deleteAccount} onClick={() => _deleteAccount(account?.name ?? '')}>
           {t('delete_account')}
         </button>
       </div>
@@ -229,4 +230,9 @@ const AccountSettings = () => {
   );
 };
 
+const AccountSettings = () => {
+  const account = useAccount();
+  return <AccountSettingsEditor key={account?.id} account={account} />;
+};
+
 export default AccountSettings;

src/components/settings-modal/avatar-settings/avatar-settings.tsx

@@ -5,7 +5,7 @@ import styles from './avatar-settings.module.css';
 import { Trans, useTranslation } from 'react-i18next';
 import LoadingEllipsis from '../../loading-ellipsis';
 import ErrorDisplay from '../../error-display/error-display';
-import { capitalize } from 'lodash';
+import capitalize from 'lodash/capitalize';
 
 const AvatarPreview = ({ avatar }: any) => {
   const { t } = useTranslation();

src/components/settings-modal/crypto-wallets-setting/crypto-wallets-setting.tsx

@@ -2,7 +2,7 @@ import { useState } from 'react';
 import { Account, setAccount, useAccount } from '@plebbit/plebbit-react-hooks';
 import styles from './crypto-wallets-setting.module.css';
 import { Trans, useTranslation } from 'react-i18next';
-import { capitalize } from 'lodash';
+import capitalize from 'lodash/capitalize';
 
 interface Wallet {
   chainTicker: string;

src/components/settings-modal/interface-settings/interface-settings.tsx

@@ -4,7 +4,7 @@ import useAvatarVisibilityStore from '../../../stores/use-avatar-visibility-stor
 import useTheme from '../../../hooks/use-theme';
 import packageJson from '../../../../package.json';
 import styles from './interface-settings.module.css';
-import { capitalize } from 'lodash';
+import capitalize from 'lodash/capitalize';
 import useInterfaceSettingsStore from '../../../stores/use-interface-settings-store';
 import useCatalogFiltersStore from '../../../stores/use-catalog-filters-store';
 import useExpandedMediaStore from '../../../stores/use-expanded-media-store';