Accurate search box behavior

Author: strayfade

css/search-box.css

@@ -8,6 +8,9 @@
     font-size: 18px;
     color: var(--foreground-0);
     margin-bottom: 20px;
+    transition: 0.05s;
+    pointer-events: all;
+    margin-top: 26px;
 }
 
 .search-box:active,
@@ -16,6 +19,14 @@
     border: none;
 }
 
+.search-box:disabled {
+    height: 0px;
+    padding-top: 0px;
+    padding-bottom: 0px;
+    margin-bottom: 0px;
+    pointer-events: none;
+}
+
 ::-webkit-input-placeholder {
     /* WebKit, Blink, Edge */
     color: var(--foreground-1);
@@ -36,4 +47,4 @@
 ::placeholder {
     /* Most modern browsers support this now. */
     color: var(--foreground-1);
-}
+}

pages/Home.js

@@ -25,7 +25,7 @@ const Home = async () => {
                             <!-- <span class="new-message-button">􀈎</span> --!>
                         </p>
                     </div>
-                    <h1 class="app-header">Messages</h1>
+                    <h1 class="app-header" style="margin-bottom: -20px;">Messages</h1>
                     <input tabindex="-1" class="search-box" type="text" onkeyup="SearchContacts()" value="" placeholder="􀊫 Search"/>
                 </div>
                 <div id="homepage-contacts" style="overflow-y: scroll; flex: 1 1 auto;">

scripts/iMessage.js

@@ -34,6 +34,19 @@ catch {
     }))
 }
 
+let LastContactsScrollTop = 0;
+let ContactsContainer = document.getElementById("homepage-contacts")
+ContactsContainer.addEventListener("scroll", (event) => {
+    let diff = ContactsContainer.scrollTop - LastContactsScrollTop;
+    if (diff < 0) {
+        document.getElementsByClassName("search-box")[0].removeAttribute("disabled")
+    }
+    else {
+        document.getElementsByClassName("search-box")[0].setAttribute("disabled", true)
+    }
+    LastContactsScrollTop = ContactsContainer.scrollTop
+})
+
 let ContactImgCache = []
 const GetCachedContactImg = (docid) => {
     for (const Elem of ContactImgCache) {
@@ -877,7 +890,7 @@ const ProcessResponse = async (json) => {
     ApplyReactions(json)
 
     // Scroll to bottom
-    MessageContainer.scrollTop = MessageContainer.scrollHeight;
+    //MessageContainer.scrollTop = MessageContainer.scrollHeight;
 }
 
 const SwapTab = (TabNum, Intent = "") => {