From 5f67a29e1ae9f982b7f514617ea6f9d8e436b031 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Thu, 6 Jul 2023 20:32:21 +0800
Subject: [PATCH] Collapse follow requests if > 5
---
src/pages/notifications.css | 14 +++++++++++
src/pages/notifications.jsx | 48 ++++++++++++++++++++++++++-----------
2 files changed, 48 insertions(+), 14 deletions(-)
diff --git a/src/pages/notifications.css b/src/pages/notifications.css
index f4ee59a0..20b69b38 100644
--- a/src/pages/notifications.css
+++ b/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;
diff --git a/src/pages/notifications.jsx b/src/pages/notifications.jsx
index 305ef5f0..cb2af4ec 100644
--- a/src/pages/notifications.jsx
+++ b/src/pages/notifications.jsx
@@ -286,20 +286,40 @@ function Notifications() {
{followRequests.length > 0 && (
<div class="follow-requests">
<h2 class="timeline-header">Follow requests</h2>
- <ul>
- {followRequests.map((account) => (
- <li>
- <AccountBlock account={account} />
- <FollowRequestButtons
- accountID={account.id}
- onChange={() => {
- loadFollowRequests();
- loadNotifications(true);
- }}
- />
- </li>
- ))}
- </ul>
+ {followRequests.length > 5 ? (
+ <details>
+ <summary>{followRequests.length} follow requests</summary>
+ <ul>
+ {followRequests.map((account) => (
+ <li>
+ <AccountBlock account={account} />
+ <FollowRequestButtons
+ accountID={account.id}
+ onChange={() => {
+ loadFollowRequests();
+ loadNotifications(true);
+ }}
+ />
+ </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">