Collapse follow requests if > 5

src/pages/notifications.css

@@ -159,6 +159,17 @@
 .follow-requests {
   padding-block-end: 16px;
 }
+.follow-requests summary {
+  padding: 8px 16px;
+  cursor: pointer;
+}
+.follow-requests summary::marker,
+.follow-requests summary::-webkit-details-marker {
+  color: var(--text-insignificant-color);
+}
+.follow-requests details[open] summary {
+  color: var(--text-insignificant-color);
+}
 .follow-requests ul {
   list-style: none;
   padding: 0;
@@ -168,6 +179,9 @@
   overflow: auto;
   border-bottom: var(--hairline-width) solid var(--outline-color);
 }
+.follow-requests summary + ul {
+  border-top: var(--hairline-width) solid var(--outline-color);
+}
 .follow-requests ul li {
   display: flex;
   align-items: center;

src/pages/notifications.jsx

@@ -286,6 +286,9 @@ function Notifications() {
         {followRequests.length > 0 && (
           <div class="follow-requests">
             <h2 class="timeline-header">Follow requests</h2>
+            {followRequests.length > 5 ? (
+              <details>
+                <summary>{followRequests.length} follow requests</summary>
                 <ul>
                   {followRequests.map((account) => (
                     <li>
@@ -300,6 +303,23 @@ function Notifications() {
                     </li>
                   ))}
                 </ul>
+              </details>
+            ) : (
+              <ul>
+                {followRequests.map((account) => (
+                  <li>
+                    <AccountBlock account={account} />
+                    <FollowRequestButtons
+                      accountID={account.id}
+                      onChange={() => {
+                        loadFollowRequests();
+                        loadNotifications(true);
+                      }}
+                    />
+                  </li>
+                ))}
+              </ul>
+            )}
           </div>
         )}
         <div id="mentions-option">