From 2c3ae45d0fc18dc7cb8b9cb6eaf1b6eb9db35352 Mon Sep 17 00:00:00 2001
From: Jayphen <software@jayphen.com>
Date: Sun, 4 Feb 2024 00:14:04 +0100
Subject: [PATCH 1/3] Mark entries above the current as read

---
 .../template/templates/common/item_meta.html  | 10 ++++++
 internal/ui/static/js/app.js                  | 35 +++++++++++++++++++
 internal/ui/static/js/bootstrap.js            |  7 ++++
 3 files changed, 52 insertions(+)

diff --git a/internal/template/templates/common/item_meta.html b/internal/template/templates/common/item_meta.html
index 176fa34a36b..60ade376c02 100644
--- a/internal/template/templates/common/item_meta.html
+++ b/internal/template/templates/common/item_meta.html
@@ -26,6 +26,16 @@
                 data-value="{{ if eq .entry.Status "read" }}read{{ else }}unread{{ end }}"
                 >{{ if eq .entry.Status "read" }}{{ icon "unread" }}{{ else }}{{ icon "read" }}{{ end }}<span class="icon-label">{{ if eq .entry.Status "read" }}{{ t "entry.status.unread" }}{{ else }}{{ t "entry.status.read" }}{{ end }}</span></a>
         </li>
+        <li>
+            <a href="#"
+                title="{{ t "Mark above read" }}"
+                data-action="markAboveAsRead"
+                data-label-loading="{{ t "confirm.loading" }}"
+                data-label-unread="{{ t "entry.status.unread" }}"
+                data-label-read="{{ t "entry.status.read" }}"
+                data-value="mark-above-read"
+                >{{ icon "unread" }}<span class="icon-label">Mark above as read</span></a>
+        </li>
         <li class="item-meta-icons-star">
             <a href="#"
                 data-toggle-bookmark="true"
diff --git a/internal/ui/static/js/app.js b/internal/ui/static/js/app.js
index 2af87dcd6e5..630d8ae5509 100644
--- a/internal/ui/static/js/app.js
+++ b/internal/ui/static/js/app.js
@@ -190,6 +190,41 @@ function toggleEntryStatus(element, toasting) {
     });
 }
 
+// Mark entries above the current as read
+function markAboveAsRead(element) {
+    let allItems = DomHelper.getVisibleElements(".items .item");
+    let entryIDs = [];
+
+    let entryID = parseInt(element.dataset.id, 10);
+
+    if (!entryID) return;
+
+    for (const element of allItems) {
+        const itemId = parseInt(element.dataset.id, 10);
+        element.classList.add("item-status-read");
+        entryIDs.push(itemId);
+
+        if (entryID === itemId) {
+            break;
+        }
+    }
+
+    if (entryIDs.length > 0) {
+        updateEntriesStatus(entryIDs, "read", () => {
+            // Refresh the page if user wants to hide unread
+            let element = document.querySelector("a[data-action=markPageAsRead]");
+            let showOnlyUnread = false;
+            if (element) {
+                showOnlyUnread = element.dataset.showOnlyUnread || false;
+            }
+
+            if (showOnlyUnread) {
+                window.location.href = window.location.href;
+            }
+        });
+    }
+}
+
 // Mark a single entry as read.
 function markEntryAsRead(element) {
     if (element.classList.contains("item-status-unread")) {
diff --git a/internal/ui/static/js/bootstrap.js b/internal/ui/static/js/bootstrap.js
index 3d7725ffb20..42c9d8fbe5e 100644
--- a/internal/ui/static/js/bootstrap.js
+++ b/internal/ui/static/js/bootstrap.js
@@ -79,6 +79,13 @@ document.addEventListener("DOMContentLoaded", () => {
         }
     }
 
+    onClick("a[data-action=markAboveAsRead]", (event) => {
+        const entry = findEntry(event.target);
+
+        if (entry) {
+            markAboveAsRead(entry);
+        }
+    });
     onClick("a[data-save-entry]", (event) => handleSaveEntry(event.target));
     onClick("a[data-toggle-bookmark]", (event) => handleBookmark(event.target));
     onClick("a[data-fetch-content-entry]", () => handleFetchOriginalContent());

From 1f80b8bfb6323bd5858eec973409a87bccce8724 Mon Sep 17 00:00:00 2001
From: Jayphen <software@jayphen.com>
Date: Sun, 4 Feb 2024 00:16:00 +0100
Subject: [PATCH 2/3] Use mark-all-as-read icon

---
 internal/template/templates/common/item_meta.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/internal/template/templates/common/item_meta.html b/internal/template/templates/common/item_meta.html
index 60ade376c02..1991deee2b8 100644
--- a/internal/template/templates/common/item_meta.html
+++ b/internal/template/templates/common/item_meta.html
@@ -34,7 +34,7 @@
                 data-label-unread="{{ t "entry.status.unread" }}"
                 data-label-read="{{ t "entry.status.read" }}"
                 data-value="mark-above-read"
-                >{{ icon "unread" }}<span class="icon-label">Mark above as read</span></a>
+                >{{ icon "mark-all-as-read" }}<span class="icon-label">Mark above as read</span></a>
         </li>
         <li class="item-meta-icons-star">
             <a href="#"

From 749f1e8a5ead08e1e477c1f1322bec4ca950d82b Mon Sep 17 00:00:00 2001
From: Jayphen <software@jayphen.com>
Date: Sun, 4 Feb 2024 19:37:50 +0100
Subject: [PATCH 3/3] Mark only above as read

---
 internal/ui/static/js/app.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/internal/ui/static/js/app.js b/internal/ui/static/js/app.js
index 630d8ae5509..1efd3bb1068 100644
--- a/internal/ui/static/js/app.js
+++ b/internal/ui/static/js/app.js
@@ -200,13 +200,13 @@ function markAboveAsRead(element) {
     if (!entryID) return;
 
     for (const element of allItems) {
-        const itemId = parseInt(element.dataset.id, 10);
-        element.classList.add("item-status-read");
-        entryIDs.push(itemId);
-
         if (entryID === itemId) {
             break;
         }
+
+        const itemId = parseInt(element.dataset.id, 10);
+        element.classList.add("item-status-read");
+        entryIDs.push(itemId);
     }
 
     if (entryIDs.length > 0) {