From 8d2f86e385b4e289bf70f7f34edf1790f33811c4 Mon Sep 17 00:00:00 2001
From: Rosy <111189040+RosyArts@users.noreply.github.com>
Date: Tue, 10 Sep 2024 13:17:30 +0100
Subject: [PATCH 1/3] manual refresh button (pls worK)

---
 lab/login/index.html | 25 +++++++++++++++++++++++--
 1 file changed, 23 insertions(+), 2 deletions(-)

diff --git a/lab/login/index.html b/lab/login/index.html
index cfe79dc9..b86d36f1 100644
--- a/lab/login/index.html
+++ b/lab/login/index.html
@@ -50,8 +50,7 @@ <h1>Login</h1>
 </style>
 
 <h2 id="feed-heading">
-  Feed <button id="refresh-sign" class="secondary span">Refreshing...</button>
-</h2>
+  Feed <button id="refresh-sign" class="secondary span">Refreshing...</button> <button id="manual-refresh-button" class="secondary-span">↻</button></h2>
 <span
   id="loading-feed"
   style="position: fixed; top: 10px; left: 10px"
@@ -61,6 +60,7 @@ <h2 id="feed-heading">
 <main></main>
 
 <script type="module">
+  const manualRefreshButton = document.querySelector("#manual-refresh-button");
   const refreshSign = document.querySelector("#refresh-sign");
   const loadingFeed = document.querySelector("#loading-feed");
   const usernameInput = document.querySelector("#username");
@@ -257,6 +257,7 @@ <h2 id="feed-heading">
   usernameInput.addEventListener("keydown", handleInputKeyDown);
   passwordInput.addEventListener("keydown", handleInputKeyDown);
   refreshSign.addEventListener("click", toggleRefresh);
+  manualRefreshButton.addEventListener("click", handleManualRefresh);
 
   let nameSet = new Set();
 
@@ -364,6 +365,26 @@ <h2 id="feed-heading">
     setRefreshStatus(false);
   }
 
+    // Is this a bad place to declare a variable? Sorry, new to this language :P - Rosy
+  let cooldownIntervalID;
+
+  function handleManualRefresh() {
+    manualRefreshButton.disabled = true;
+    manualRefreshButton.style.setProperty('--manual-refresh-button-opacity', 0);
+    pullUserStatuses()
+    cooldownIntervalID = setInterval(handleManualRefreshCooldown, 10);
+  }
+
+  function handleManualRefreshCooldown() {
+    let css = getComputedStyle(manualRefreshButton);
+    let newOpacity = parseFloat(css.getPropertyValue('--manual-refresh-button-opacity')) + 0.01;
+    manualRefreshButton.style.setProperty('--manual-refresh-button-opacity', newOpacity);
+    if (newOpacity >= 1.0) {
+      manualRefreshButton.disabled = false;
+      clearInterval(cooldownIntervalID);
+    }
+  }
+
   function renderUserStatuses(entries) {
     const currentHash = window.location.hash;
     const main = document.querySelector("main");

From 75fc77464b68703ebea501b5b0b8b1b761d747f0 Mon Sep 17 00:00:00 2001
From: Rosy <111189040+RosyArts@users.noreply.github.com>
Date: Tue, 10 Sep 2024 13:19:59 +0100
Subject: [PATCH 2/3] manual refresh button style

---
 lab/login/style.css | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/lab/login/style.css b/lab/login/style.css
index 1744c38d..f56469d3 100644
--- a/lab/login/style.css
+++ b/lab/login/style.css
@@ -75,6 +75,30 @@ input[type="checkbox"] {
   outline: 2px solid var(--best-colour);
 }
 
+#manual-refresh-button {
+  color: var(--best-colour);
+  cursor: pointer;
+  user-select: none;
+  background: none;
+  border: none;
+  padding: 0;
+  font-size: 16px;
+  float: right;
+  flex-shrink: 0;
+  opacity: var(--manual-refresh-button-opacity);
+}
+
+#manual-refresh-button:hover:enabled {
+  background-color: var(--best-colour);
+  color: var(--shade-3);
+  outline: 2px solid var(--best-colour);
+}
+
+#manual-refresh-button:disabled {
+  color: var(--red);
+  cursor: not-allowed;
+}
+
 .post-title {
   all: unset;
 }

From 0f63c93d6bcf77b545c62d4e2dc7f059dc66dd83 Mon Sep 17 00:00:00 2001
From: Rosy <111189040+RosyArts@users.noreply.github.com>
Date: Tue, 10 Sep 2024 13:36:37 +0100
Subject: [PATCH 3/3] refresh alignment fix

---
 lab/login/style.css | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/lab/login/style.css b/lab/login/style.css
index f56469d3..5b0d848b 100644
--- a/lab/login/style.css
+++ b/lab/login/style.css
@@ -67,6 +67,8 @@ input[type="checkbox"] {
   font-size: 16px;
   float: right;
   flex-shrink: 0;
+  margin-left: auto;
+  margin-right: 0;
 }
 
 #refresh-sign:hover {