From 59cbe7c238366dee660c5c3ec4f37da549566921 Mon Sep 17 00:00:00 2001
From: Ricardo <rick@rmendes.net>
Date: Fri, 6 Feb 2026 22:56:03 +0100
Subject: [PATCH] feat: add bookmark to timeline, mark-read to item view

- Add bookmark button to item-card.njk (timeline view)
- Add mark-read button to item.njk (full item view)
- Add JavaScript handler for mark-read on item page
- Pass channel info to item template for mark-read API call

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 lib/controllers/reader.js    |  8 ++++++
 package.json                 |  2 +-
 views/item.njk               | 55 ++++++++++++++++++++++++++++++++++++
 views/partials/item-card.njk |  4 +++
 4 files changed, 68 insertions(+), 1 deletion(-)

diff --git a/lib/controllers/reader.js b/lib/controllers/reader.js
index 9fcf4d0..3751768 100644
--- a/lib/controllers/reader.js
+++ b/lib/controllers/reader.js
@@ -314,9 +314,17 @@ export async function item(request, response) {
     return response.status(404).render("404");
   }
 
+  // Get the channel for this item (needed for mark-read)
+  let channel = null;
+  if (itemDocument.channelId) {
+    const channelsCollection = application.collections.get("microsub_channels");
+    channel = await channelsCollection.findOne({ _id: itemDocument.channelId });
+  }
+
   response.render("item", {
     title: itemDocument.name || "Item",
     item: itemDocument,
+    channel,
     baseUrl: request.baseUrl,
   });
 }
diff --git a/package.json b/package.json
index 24131b3..e92e396 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@rmdes/indiekit-endpoint-microsub",
-  "version": "1.0.18",
+  "version": "1.0.19",
   "description": "Microsub endpoint for Indiekit. Enables subscribing to feeds and reading content using the Microsub protocol.",
   "keywords": [
     "indiekit",
diff --git a/views/item.njk b/views/item.njk
index 0d738b6..6f4de2b 100644
--- a/views/item.njk
+++ b/views/item.njk
@@ -146,6 +146,61 @@
       <a href="{{ baseUrl }}/compose?bookmark={{ item.url | urlencode }}" class="button button--secondary button--small">
         {{ icon("bookmark") }} {{ __("microsub.item.bookmark") }}
       </a>
+      {% if not item._is_read %}
+      <button type="button"
+              class="button button--secondary button--small item__mark-read"
+              data-item-id="{{ item._id }}"
+              data-channel="{{ channel.uid }}">
+        {{ icon("checkboxChecked") }} {{ __("microsub.timeline.markRead") }}
+      </button>
+      {% endif %}
     </footer>
   </article>
+
+  <script type="module">
+    // Handle mark-read button
+    const markReadBtn = document.querySelector('.item__mark-read');
+    if (markReadBtn) {
+      markReadBtn.addEventListener('click', async () => {
+        const itemId = markReadBtn.dataset.itemId;
+        const channelUid = markReadBtn.dataset.channel;
+        const microsubApiUrl = '{{ baseUrl }}'.replace(/\/reader.*$/, '');
+
+        markReadBtn.disabled = true;
+        markReadBtn.textContent = 'Marking...';
+
+        try {
+          const formData = new URLSearchParams();
+          formData.append('action', 'timeline');
+          formData.append('method', 'mark_read');
+          formData.append('channel', channelUid);
+          formData.append('entry', itemId);
+
+          const response = await fetch(microsubApiUrl, {
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/x-www-form-urlencoded',
+            },
+            body: formData.toString(),
+            credentials: 'same-origin'
+          });
+
+          if (response.ok) {
+            markReadBtn.textContent = 'Marked as read';
+            markReadBtn.classList.add('button--success');
+            setTimeout(() => {
+              markReadBtn.remove();
+            }, 1500);
+          } else {
+            markReadBtn.textContent = 'Failed';
+            markReadBtn.disabled = false;
+          }
+        } catch (error) {
+          console.error('Error:', error);
+          markReadBtn.textContent = 'Error';
+          markReadBtn.disabled = false;
+        }
+      });
+    }
+  </script>
 {% endblock %}
diff --git a/views/partials/item-card.njk b/views/partials/item-card.njk
index 54e97b7..23f7173 100644
--- a/views/partials/item-card.njk
+++ b/views/partials/item-card.njk
@@ -165,6 +165,10 @@
       {{ icon("repost") }}
       <span class="visually-hidden">Repost</span>
     </a>
+    <a href="{{ baseUrl }}/compose?bookmark={{ item.url | urlencode }}" class="item-actions__button" title="Bookmark">
+      {{ icon("bookmark") }}
+      <span class="visually-hidden">Bookmark</span>
+    </a>
     {% if not item._is_read %}
     <button type="button"
             class="item-actions__button item-actions__mark-read"