Add toggle status button to entry page

template/html/entry.html

@@ -1,13 +1,22 @@
 {{ define "title"}}{{ .entry.Title }}{{ end }}
 
 {{ define "content"}}
-<section class="entry">
+<section class="entry" data-id="{{ .entry.ID }}">
     <header class="entry-header">
         <h1>
             <a href="{{ .entry.URL }}" target="_blank" rel="noopener noreferrer" referrerpolicy="no-referrer">{{ .entry.Title }}</a>
         </h1>
         <div class="entry-actions">
             <ul>
+                <li>
+                    <a href="#"
+                        title="{{ t "Change entry status" }}"
+                        data-toggle-status="true"
+                        data-label-read="✔ {{ t "Read" }}"
+                        data-label-unread="✘ {{ t "Unread" }}"
+                        data-value="{{ if eq .entry.Status "read" }}read{{ else }}unread{{ end }}"
+                        >{{ if eq .entry.Status "read" }}✘ {{ t "Unread" }}{{ else }}✔ {{ t "Read" }}{{ end }}</a>
+                </li>
                 <li>
                     <a href="#"
                         data-toggle-bookmark="true"

template/views.go

@@ -539,13 +539,22 @@ var templateViewsMap = map[string]string{
 	"entry": `{{ define "title"}}{{ .entry.Title }}{{ end }}
 
 {{ define "content"}}
-<section class="entry">
+<section class="entry" data-id="{{ .entry.ID }}">
     <header class="entry-header">
         <h1>
             <a href="{{ .entry.URL }}" target="_blank" rel="noopener noreferrer" referrerpolicy="no-referrer">{{ .entry.Title }}</a>
         </h1>
         <div class="entry-actions">
             <ul>
+                <li>
+                    <a href="#"
+                        title="{{ t "Change entry status" }}"
+                        data-toggle-status="true"
+                        data-label-read="✔ {{ t "Read" }}"
+                        data-label-unread="✘ {{ t "Unread" }}"
+                        data-value="{{ if eq .entry.Status "read" }}read{{ else }}unread{{ end }}"
+                        >{{ if eq .entry.Status "read" }}✘ {{ t "Unread" }}{{ else }}✔ {{ t "Read" }}{{ end }}</a>
+                </li>
                 <li>
                     <a href="#"
                         data-toggle-bookmark="true"
@@ -1333,7 +1342,7 @@ var templateViewsMapChecksums = map[string]string{
 	"edit_category":       "cee720faadcec58289b707ad30af623d2ee66c1ce23a732965463250d7ff41c5",
 	"edit_feed":           "1a8e342e4fac80e8b9c73537c7fe8aaf7f9e3e7af22f411927010897dd37e9c3",
 	"edit_user":           "7373e09f805e6c017167001519b9feb04226be6c81c2875cbacd5ce94f2c24bf",
-	"entry":               "c838ae7f19d775d473ee92c4999eb28a5063869411c834d26a3f4b686ce88dbf",
+	"entry":               "26d377a72b9c4f001b769d8a5971a6a9dfff66c87dcfa32c7ab64a5ae138ffd7",
 	"feed_entries":        "76e7e32cdd6552304e38931459fe12cefdb5354f65a7ac3bbed52a2979896d3e",
 	"feeds":               "1006698abfe0962b656f27794bc44568515392da72b6fac0c03316de06024237",
 	"history_entries":     "f94e15d37d7604500cede7b583e03bf79c06be81c6597a4a43693f5712af2e13",

ui/entry_bookmark.go

@@ -56,6 +56,8 @@ func (c *Controller) ShowStarredEntry(w http.ResponseWriter, r *http.Request) {
 			html.ServerError(w, nil)
 			return
 		}
+
+		entry.Status = model.EntryStatusRead
 	}
 
 	entryPaginationBuilder := storage.NewEntryPaginationBuilder(c.store, user.ID, entry.ID, user.EntryDirection)

ui/entry_category.go

@@ -63,6 +63,8 @@ func (c *Controller) ShowCategoryEntry(w http.ResponseWriter, r *http.Request) {
 			html.ServerError(w, nil)
 			return
 		}
+
+		entry.Status = model.EntryStatusRead
 	}
 
 	entryPaginationBuilder := storage.NewEntryPaginationBuilder(c.store, user.ID, entry.ID, user.EntryDirection)

ui/entry_feed.go

@@ -63,6 +63,8 @@ func (c *Controller) ShowFeedEntry(w http.ResponseWriter, r *http.Request) {
 			html.ServerError(w, nil)
 			return
 		}
+
+		entry.Status = model.EntryStatusRead
 	}
 
 	entryPaginationBuilder := storage.NewEntryPaginationBuilder(c.store, user.ID, entry.ID, user.EntryDirection)

ui/entry_search.go

@@ -58,6 +58,8 @@ func (c *Controller) ShowSearchEntry(w http.ResponseWriter, r *http.Request) {
 			html.ServerError(w, nil)
 			return
 		}
+
+		entry.Status = model.EntryStatusRead
 	}
 
 	entryPaginationBuilder := storage.NewEntryPaginationBuilder(c.store, user.ID, entry.ID, user.EntryDirection)

ui/entry_unread.go

@@ -84,6 +84,7 @@ func (c *Controller) ShowUnreadEntry(w http.ResponseWriter, r *http.Request) {
 		html.ServerError(w, nil)
 		return
 	}
+	entry.Status = model.EntryStatusRead
 
 	sess := session.New(c.store, ctx)
 	view := view.New(c.tpl, ctx, sess)

ui/static/js/bootstrap.js

@@ -46,7 +46,11 @@ document.addEventListener("DOMContentLoaded", function() {
     mouseHandler.onClick("a[data-toggle-status]", (event) => {
         event.preventDefault();
 
-        let currentItem = DomHelper.findParent(event.target, "item");
+        let currentItem = DomHelper.findParent(event.target, "entry");
+        if (! currentItem) {
+            currentItem = DomHelper.findParent(event.target, "item");
+        }
+
         if (currentItem) {
             EntryHandler.toggleEntryStatus(currentItem);
         }

ui/static/js/entry_handler.js

@@ -15,35 +15,25 @@ class EntryHandler {
 
     static toggleEntryStatus(element) {
         let entryID = parseInt(element.dataset.id, 10);
-        let statuses = {read: "unread", unread: "read"};
+        let link = element.querySelector("a[data-toggle-status]");
 
-        for (let currentStatus in statuses) {
-            let newStatus = statuses[currentStatus];
+        let currentStatus = link.dataset.value;
+        let newStatus = currentStatus === "read" ? "unread" : "read";
 
-            if (element.classList.contains("item-status-" + currentStatus)) {
-                element.classList.remove("item-status-" + currentStatus);
-                element.classList.add("item-status-" + newStatus);
+        this.updateEntriesStatus([entryID], newStatus);
 
-                this.updateEntriesStatus([entryID], newStatus);
-
-                let link = element.querySelector("a[data-toggle-status]");
-                if (link) {
-                    this.toggleLinkStatus(link);
-                }
-
-                break;
-            }
-        }
-    }
-
-    static toggleLinkStatus(link) {
-        if (link.dataset.value === "read") {
+        if (currentStatus === "read") {
             link.innerHTML = link.dataset.labelRead;
             link.dataset.value = "unread";
         } else {
             link.innerHTML = link.dataset.labelUnread;
             link.dataset.value = "read";
         }
+
+        if (element.classList.contains("item-status-" + currentStatus)) {
+            element.classList.remove("item-status-" + currentStatus);
+            element.classList.add("item-status-" + newStatus);
+        }
     }
 
     static toggleBookmark(element) {

ui/static/js/nav_handler.js

@@ -71,6 +71,11 @@ class NavHandler {
     }
 
     toggleEntryStatus() {
+        if (! this.isListView()) {
+            EntryHandler.toggleEntryStatus(document.querySelector(".entry"));
+            return;
+        }
+
         let currentItem = document.querySelector(".current-item");
         if (currentItem !== null) {
             // The order is important here,