Prevent infinite overlapping of Account & Accounts sheets

src/components/account-info.css

@@ -152,7 +152,7 @@
   [tabindex='0']:is(:hover, :focus) {
     color: var(--text-color);
     cursor: pointer;
-    text-decoration: underline;
+    text-decoration-color: var(--text-insignificant-color);
   }
 }
 .timeline-start .account-container .stats {
@@ -164,6 +164,9 @@
   display: flex;
   gap: 0.5em;
 }
+.account-container .stats a:not(.insignificant) {
+  color: inherit;
+}
 .account-container .stats a:hover {
   color: inherit;
 }

src/components/account-info.jsx

@@ -170,6 +170,9 @@ function AccountInfo({
     return results;
   }
 
+  const LinkOrDiv = standalone ? 'div' : Link;
+  const accountLink = instance ? `/${instance}/a/${id}` : `/a/${id}`;
+
   return (
     <div
       class={`account-container  ${uiState === 'loading' ? 'skeleton' : ''}`}
@@ -368,9 +371,11 @@ function AccountInfo({
                 </div>
               )}
               <p class="stats">
-                <div
+                <LinkOrDiv
                   tabIndex={0}
+                  to={accountLink}
                   onClick={() => {
+                    states.showAccount = false;
                     states.showGenericAccounts = {
                       heading: 'Followers',
                       fetchAccounts: fetchFollowers,
@@ -381,11 +386,13 @@ function AccountInfo({
                     {shortenNumber(followersCount)}
                   </span>{' '}
                   Followers
-                </div>
-                <div
+                </LinkOrDiv>
+                <LinkOrDiv
                   class="insignificant"
                   tabIndex={0}
+                  to={accountLink}
                   onClick={() => {
+                    states.showAccount = false;
                     states.showGenericAccounts = {
                       heading: 'Following',
                       fetchAccounts: fetchFollowing,
@@ -397,28 +404,23 @@ function AccountInfo({
                   </span>{' '}
                   Following
                   <br />
-                </div>
-                {standalone ? (
-                  <div class="insignificant">
-                    <span title={statusesCount}>
-                      {shortenNumber(statusesCount)}
-                    </span>{' '}
-                    Posts
-                  </div>
-                ) : (
-                  <Link
-                    class="insignificant"
-                    to={instance ? `/${instance}/a/${id}` : `/a/${id}`}
-                    onClick={() => {
-                      hideAllModals();
-                    }}
-                  >
-                    <span title={statusesCount}>
-                      {shortenNumber(statusesCount)}
-                    </span>{' '}
-                    Posts
-                  </Link>
-                )}
+                </LinkOrDiv>
+                <LinkOrDiv
+                  class="insignificant"
+                  to={accountLink}
+                  onClick={
+                    standalone
+                      ? undefined
+                      : () => {
+                          hideAllModals();
+                        }
+                  }
+                >
+                  <span title={statusesCount}>
+                    {shortenNumber(statusesCount)}
+                  </span>{' '}
+                  Posts
+                </LinkOrDiv>
                 {!!createdAt && (
                   <div class="insignificant">
                     Joined{' '}

src/components/generic-accounts.jsx

@@ -29,6 +29,7 @@ export default function GenericAccounts({ onClose = () => {} }) {
 
   const loadAccounts = (firstLoad) => {
     if (!fetchAccounts) return;
+    setAccounts([]);
     setUIState('loading');
     (async () => {
       try {
@@ -57,7 +58,7 @@ export default function GenericAccounts({ onClose = () => {} }) {
     } else {
       loadAccounts(true);
     }
-  }, [staticAccounts]);
+  }, [staticAccounts, fetchAccounts]);
 
   return (
     <div id="generic-accounts-container" class="sheet" tabindex="-1">