@rmdes/indiekit-endpoint-microsub 1.0.39 → 1.0.41

package/assets/styles.css

@@ -421,6 +421,12 @@
   margin-left: auto;
 }
 
+/* Save for later button */
+.item-actions__save-later--saved {
+  color: var(--color-accent, #4a9eff);
+  opacity: 0.6;
+}
+
 /* ==========================================================================
    Single Item View
    ========================================================================== */

package/lib/controllers/reader.js

@@ -1184,10 +1184,10 @@ export async function timeline(request, response) {
   // Get channels with colors for filtering UI and item decoration
   const channelList = await getChannelsWithColors(application, userId);
 
-  // Build channel lookup map (ObjectId string -> { name, color })
+  // Build channel lookup map (ObjectId string -> { name, color, uid })
   const channelMap = new Map();
   for (const ch of channelList) {
-    channelMap.set(ch._id.toString(), { name: ch.name, color: ch.color });
+    channelMap.set(ch._id.toString(), { name: ch.name, color: ch.color, uid: ch.uid });
   }
 
   // Parse excluded channel IDs from query params
@@ -1223,6 +1223,7 @@ export async function timeline(request, response) {
       if (info) {
         item._channelName = info.name;
         item._channelColor = info.color;
+        item._channelUid = info.uid;
       }
     }
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rmdes/indiekit-endpoint-microsub",
-  "version": "1.0.39",
+  "version": "1.0.41",
   "description": "Microsub endpoint for Indiekit. Enables subscribing to feeds and reading content using the Microsub protocol.",
   "keywords": [
     "indiekit",

package/views/channel.njk

@@ -173,6 +173,39 @@
           button.disabled = false;
         }
       });
+
+      // Handle save-for-later buttons
+      timeline.addEventListener('click', async (e) => {
+        const button = e.target.closest('.item-actions__save-later');
+        if (!button) return;
+
+        e.preventDefault();
+        e.stopPropagation();
+
+        const url = button.dataset.url;
+        const title = button.dataset.title;
+        if (!url) return;
+
+        button.disabled = true;
+
+        try {
+          const response = await fetch('/readlater/save', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ url, title: title || url, source: 'microsub' }),
+            credentials: 'same-origin'
+          });
+
+          if (response.ok) {
+            button.classList.add('item-actions__save-later--saved');
+            button.title = 'Saved';
+          } else {
+            button.disabled = false;
+          }
+        } catch {
+          button.disabled = false;
+        }
+      });
     }
   </script>
 {% endblock %}

package/views/partials/item-card.njk

@@ -202,10 +202,22 @@
             class="item-actions__button item-actions__mark-read"
             data-action="mark-read"
             data-item-id="{{ item._id }}"
+            {% if item._channelUid %}data-channel-uid="{{ item._channelUid }}"{% endif %}
             title="Mark as read">
       {{ icon("checkboxChecked") }}
       <span class="visually-hidden">Mark read</span>
     </button>
     {% endif %}
+    {% if application.readlaterEndpoint %}
+    <button type="button"
+            class="item-actions__button item-actions__save-later"
+            data-action="save-later"
+            data-url="{{ item.url }}"
+            data-title="{{ item.name or '' }}"
+            title="Save for later">
+      {{ icon("bookmark") }}
+      <span class="visually-hidden">Save for later</span>
+    </button>
+    {% endif %}
   </div>
 </article>

package/views/timeline.njk

@@ -95,6 +95,94 @@
             break;
         }
       });
+
+      // Handle individual mark-read buttons
+      const microsubApiUrl = '{{ baseUrl }}'.replace(/\/reader$/, '');
+
+      timeline.addEventListener('click', async (e) => {
+        const button = e.target.closest('.item-actions__mark-read');
+        if (!button) return;
+
+        e.preventDefault();
+        e.stopPropagation();
+
+        const itemId = button.dataset.itemId;
+        const channelUid = button.dataset.channelUid;
+        if (!itemId || !channelUid) return;
+
+        button.disabled = true;
+
+        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) {
+            const card = button.closest('.item-card');
+            if (card) {
+              card.style.transition = 'opacity 0.3s ease, transform 0.3s ease';
+              card.style.opacity = '0';
+              card.style.transform = 'translateX(-20px)';
+              setTimeout(() => {
+                const wrapper = card.closest('.timeline-view__item');
+                if (wrapper) wrapper.remove();
+                else card.remove();
+                if (timeline.querySelectorAll('.item-card').length === 0) {
+                  location.reload();
+                }
+              }, 300);
+            }
+          } else {
+            console.error('Failed to mark item as read');
+            button.disabled = false;
+          }
+        } catch (error) {
+          console.error('Error marking item as read:', error);
+          button.disabled = false;
+        }
+      });
+
+      // Handle save-for-later buttons
+      timeline.addEventListener('click', async (e) => {
+        const button = e.target.closest('.item-actions__save-later');
+        if (!button) return;
+
+        e.preventDefault();
+        e.stopPropagation();
+
+        const url = button.dataset.url;
+        const title = button.dataset.title;
+        if (!url) return;
+
+        button.disabled = true;
+
+        try {
+          const response = await fetch('/readlater/save', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ url, title: title || url, source: 'microsub' }),
+            credentials: 'same-origin'
+          });
+
+          if (response.ok) {
+            button.classList.add('item-actions__save-later--saved');
+            button.title = 'Saved';
+          } else {
+            button.disabled = false;
+          }
+        } catch {
+          button.disabled = false;
+        }
+      });
     }
   </script>
 {% endblock %}