feat: Mark above entries as read

internal/template/templates/common/item_meta.html

@@ -28,6 +28,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 "mark-all-as-read" }}<span class="icon-label">Mark above as read</span></a>
+        </li>
         <li class="item-meta-icons-star">
             <a href="#"
                 role="button"

internal/ui/static/js/app.js

@@ -213,6 +213,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) {
+        if (entryID === itemId) {
+            break;
+        }
+
+        const itemId = parseInt(element.dataset.id, 10);
+        element.classList.add("item-status-read");
+        entryIDs.push(itemId);
+    }
+
+    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")) {

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());