From 66e58c74ef52be04239613fab2d8066192334c5f Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Wed, 27 Mar 2024 10:18:34 +0800
Subject: [PATCH] Shazam the filtered notifications

---
 src/pages/notifications.jsx | 122 +++++++++++++++++++-----------------
 1 file changed, 64 insertions(+), 58 deletions(-)

diff --git a/src/pages/notifications.jsx b/src/pages/notifications.jsx
index a629024a..09cb4688 100644
--- a/src/pages/notifications.jsx
+++ b/src/pages/notifications.jsx
@@ -532,66 +532,72 @@ function Notifications({ columnMode }) {
         )}
         {supportsFilteredNotifications &&
           notificationsPolicy?.summary?.pendingRequestsCount > 0 && (
-            <div class="filtered-notifications">
-              <details
-                onToggle={async (e) => {
-                  const { open } = e.target;
-                  if (open) {
-                    const requests = await fetchNotificationsRequest();
-                    setNotificationsRequests(requests);
-                    console.log({ open, requests });
-                  }
-                }}
-              >
-                <summary>
-                  Filtered notifications from{' '}
-                  {notificationsPolicy.summary.pendingRequestsCount} people
-                </summary>
-                {!notificationsRequests ? (
-                  <p class="ui-state">
-                    <Loader abrupt />
-                  </p>
-                ) : (
-                  notificationsRequests?.length > 0 && (
-                    <ul>
-                      {notificationsRequests.map((request) => (
-                        <li key={request.id}>
-                          <div class="request-notifcations">
-                            {!request.lastStatus?.id && (
-                              <AccountBlock
-                                useAvatarStatic
-                                showStats
-                                account={request.account}
-                              />
-                            )}
-                            {request.lastStatus?.id && (
-                              <div class="last-post">
-                                <Link
-                                  class="status-link"
-                                  to={`/${instance}/s/${request.lastStatus.id}`}
-                                >
-                                  <Status
-                                    status={request.lastStatus}
-                                    size="s"
-                                    readOnly
+            <div class="shazam-container">
+              <div class="shazam-container-inner">
+                <div class="filtered-notifications">
+                  <details
+                    onToggle={async (e) => {
+                      const { open } = e.target;
+                      if (open) {
+                        const requests = await fetchNotificationsRequest();
+                        setNotificationsRequests(requests);
+                        console.log({ open, requests });
+                      }
+                    }}
+                  >
+                    <summary>
+                      Filtered notifications from{' '}
+                      {notificationsPolicy.summary.pendingRequestsCount} people
+                    </summary>
+                    {!notificationsRequests ? (
+                      <p class="ui-state">
+                        <Loader abrupt />
+                      </p>
+                    ) : (
+                      notificationsRequests?.length > 0 && (
+                        <ul>
+                          {notificationsRequests.map((request) => (
+                            <li key={request.id}>
+                              <div class="request-notifcations">
+                                {!request.lastStatus?.id && (
+                                  <AccountBlock
+                                    useAvatarStatic
+                                    showStats
+                                    account={request.account}
                                   />
-                                </Link>
+                                )}
+                                {request.lastStatus?.id && (
+                                  <div class="last-post">
+                                    <Link
+                                      class="status-link"
+                                      to={`/${instance}/s/${request.lastStatus.id}`}
+                                    >
+                                      <Status
+                                        status={request.lastStatus}
+                                        size="s"
+                                        readOnly
+                                      />
+                                    </Link>
+                                  </div>
+                                )}
+                                <NotificationRequestModalButton
+                                  request={request}
+                                />
                               </div>
-                            )}
-                            <NotificationRequestModalButton request={request} />
-                          </div>
-                          <NotificationRequestButtons
-                            request={request}
-                            onChange={() => {
-                              loadNotifications(true);
-                            }}
-                          />
-                        </li>
-                      ))}
-                    </ul>
-                  )
-                )}
-              </details>
+                              <NotificationRequestButtons
+                                request={request}
+                                onChange={() => {
+                                  loadNotifications(true);
+                                }}
+                              />
+                            </li>
+                          ))}
+                        </ul>
+                      )
+                    )}
+                  </details>
+                </div>
+              </div>
             </div>
           )}
         <div id="mentions-option">