From 8da6532cd38b072b7bbe9b4f7bfe2c05e36a2770 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Wed, 15 Feb 2023 10:50:20 +0800
Subject: [PATCH] Propagate learnings to Notifications page

---
 src/pages/notifications.jsx | 39 ++++++++++++++++++++-----------------
 1 file changed, 21 insertions(+), 18 deletions(-)

diff --git a/src/pages/notifications.jsx b/src/pages/notifications.jsx
index ac490b30..444b0bd7 100644
--- a/src/pages/notifications.jsx
+++ b/src/pages/notifications.jsx
@@ -56,9 +56,11 @@ function Notifications() {
   const [showMore, setShowMore] = useState(false);
   const [onlyMentions, setOnlyMentions] = useState(false);
   const scrollableRef = useRef();
-  const { nearReachEnd, reachStart } = useScroll({
-    scrollableElement: scrollableRef.current,
-  });
+  const { nearReachEnd, scrollDirection, reachStart, nearReachStart } =
+    useScroll({
+      scrollableElement: scrollableRef.current,
+    });
+  const hiddenUI = scrollDirection === 'end' && !nearReachStart;
 
   console.debug('RENDER Notifications');
 
@@ -142,6 +144,7 @@ function Notifications() {
     >
       <div class={`timeline-deck deck ${onlyMentions ? 'only-mentions' : ''}`}>
         <header
+          hidden={hiddenUI}
           onClick={() => {
             scrollableRef.current?.scrollTo({ top: 0, behavior: 'smooth' });
           }}
@@ -162,22 +165,22 @@ function Notifications() {
               <Loader hidden={uiState !== 'loading'} />
             </div>
           </div>
+          {snapStates.notificationsShowNew && uiState !== 'loading' && (
+            <button
+              class="updates-button"
+              type="button"
+              onClick={() => {
+                loadNotifications(true);
+                scrollableRef.current?.scrollTo({
+                  top: 0,
+                  behavior: 'smooth',
+                });
+              }}
+            >
+              <Icon icon="arrow-up" /> New notifications
+            </button>
+          )}
         </header>
-        {snapStates.notificationsShowNew && uiState !== 'loading' && (
-          <button
-            class="updates-button"
-            type="button"
-            onClick={() => {
-              loadNotifications(true);
-              scrollableRef.current?.scrollTo({
-                top: 0,
-                behavior: 'smooth',
-              });
-            }}
-          >
-            <Icon icon="arrow-up" /> New notifications
-          </button>
-        )}
         <div id="mentions-option">
           <label>
             <input