From dbf9c22ea5dc5ae973bf96d294575b699f40c39d Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Tue, 3 Jan 2023 00:52:16 +0800
Subject: [PATCH] Less obstrusive "New posts"

---
 src/pages/home.jsx | 43 +++++++++++++++++++++++--------------------
 1 file changed, 23 insertions(+), 20 deletions(-)

diff --git a/src/pages/home.jsx b/src/pages/home.jsx
index 79a55854..8866ddf5 100644
--- a/src/pages/home.jsx
+++ b/src/pages/home.jsx
@@ -246,27 +246,30 @@ function Home({ hidden }) {
             </a>
           </div>
         </header>
-        {snapStates.homeNew.length > 0 && (
-          <button
-            class="updates-button"
-            type="button"
-            onClick={() => {
-              const uniqueHomeNew = snapStates.homeNew.filter(
-                (status) => !states.home.some((s) => s.id === status.id),
-              );
-              states.home.unshift(...uniqueHomeNew);
-              loadStatuses(true);
-              states.homeNew = [];
+        {snapStates.homeNew.length > 0 &&
+          scrollDirection === 'up' &&
+          !nearReachTop &&
+          !nearReachBottom && (
+            <button
+              class="updates-button"
+              type="button"
+              onClick={() => {
+                const uniqueHomeNew = snapStates.homeNew.filter(
+                  (status) => !states.home.some((s) => s.id === status.id),
+                );
+                states.home.unshift(...uniqueHomeNew);
+                loadStatuses(true);
+                states.homeNew = [];
 
-              scrollableRef.current?.scrollTo({
-                top: 0,
-                behavior: 'smooth',
-              });
-            }}
-          >
-            <Icon icon="arrow-up" /> New posts
-          </button>
-        )}
+                scrollableRef.current?.scrollTo({
+                  top: 0,
+                  behavior: 'smooth',
+                });
+              }}
+            >
+              <Icon icon="arrow-up" /> New posts
+            </button>
+          )}
         {snapStates.home.length ? (
           <>
             <ul class="timeline">