@rmdes/indiekit-endpoint-microsub 1.0.50 → 1.0.51

package/assets/styles.css

@@ -1477,3 +1477,37 @@
   display: flex;
   gap: var(--space-xs);
 }
+
+/* Infinite scroll */
+.ms-timeline__loader {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 1.5rem;
+}
+
+.ms-timeline__spinner {
+  display: flex;
+  justify-content: center;
+  padding: 1rem;
+}
+
+.ms-timeline__spinner .spinner {
+  width: 24px;
+  height: 24px;
+  border: 3px solid rgba(255, 255, 255, 0.2);
+  border-top-color: #3b82f6;
+  border-radius: 50%;
+  animation: ms-spin 0.8s linear infinite;
+}
+
+@keyframes ms-spin {
+  to { transform: rotate(360deg); }
+}
+
+.ms-timeline__end {
+  text-align: center;
+  color: #888;
+  font-style: italic;
+  padding: 1rem;
+}

package/index.js

@@ -92,6 +92,7 @@ export default class MicrosubEndpoint {
     readerRouter.get("/channels", readerController.channels);
     readerRouter.get("/channels/new", readerController.newChannel);
     readerRouter.post("/channels/new", readerController.createChannel);
+    readerRouter.get("/channels/:uid/html", readerController.channelHtml);
     readerRouter.get("/channels/:uid", readerController.channel);
     readerRouter.get("/channels/:uid/settings", readerController.settings);
     readerRouter.post(
@@ -135,7 +136,9 @@ export default class MicrosubEndpoint {
     readerRouter.post("/actor/follow", readerController.followActorAction);
     readerRouter.post("/actor/unfollow", readerController.unfollowActorAction);
     readerRouter.post("/api/mark-read", readerController.markAllRead);
+    readerRouter.post("/api/mark-view-read", readerController.markViewRead);
     readerRouter.get("/opml", opmlController.exportOpml);
+    readerRouter.get("/timeline/html", readerController.timelineHtml);
     readerRouter.get("/timeline", readerController.timeline);
     readerRouter.get("/deck", readerController.deck);
     readerRouter.get("/deck/settings", readerController.deckSettings);

package/lib/controllers/reader.js

@@ -868,6 +868,183 @@ export async function markAllRead(request, response) {
   response.redirect(`${request.baseUrl}/channels/${channelUid}`);
 }
 
+/**
+ * Return rendered HTML fragments for infinite scroll
+ * @param {object} request - Express request
+ * @param {object} response - Express response
+ * @returns {Promise<void>}
+ */
+export async function channelHtml(request, response) {
+  const { application } = request.app.locals;
+  const userId = getUserId(request);
+  const { uid } = request.params;
+  const { before, after, showRead } = request.query;
+
+  const channelDocument = await getChannel(application, uid, userId);
+  if (!channelDocument) {
+    return response.status(404).json({ error: "Channel not found" });
+  }
+
+  const showReadItems = showRead === "true";
+
+  const timeline = await getTimelineItems(application, channelDocument._id, {
+    before,
+    after,
+    userId,
+    showRead: showReadItems,
+  });
+
+  // Proxy images
+  const proxyBaseUrl = application.url;
+  if (proxyBaseUrl && timeline.items) {
+    timeline.items = timeline.items.map((item) =>
+      proxyItemImages(item, proxyBaseUrl),
+    );
+  }
+
+  // Render each item card to HTML using the existing partial
+  const renderLocals = {
+    channel: channelDocument,
+    baseUrl: request.baseUrl,
+    __: request.__,
+    icon: response.locals.icon,
+    application,
+  };
+
+  const htmlParts = await Promise.all(
+    timeline.items.map(
+      (item) =>
+        new Promise((resolve, reject) => {
+          request.app.render(
+            "partials/item-card.njk",
+            { ...renderLocals, item },
+            (error, html) => {
+              if (error) reject(error);
+              else resolve(html);
+            },
+          );
+        }),
+    ),
+  );
+
+  response.json({
+    html: htmlParts.join(""),
+    paging: timeline.paging,
+    count: timeline.items.length,
+  });
+}
+
+/**
+ * Return rendered HTML fragments for timeline infinite scroll
+ * @param {object} request - Express request
+ * @param {object} response - Express response
+ * @returns {Promise<void>}
+ */
+export async function timelineHtml(request, response) {
+  const { application } = request.app.locals;
+  const userId = getUserId(request);
+  const { before, after } = request.query;
+
+  const channelList = await getChannelsWithColors(application, userId);
+  const channelMap = new Map();
+  for (const ch of channelList) {
+    channelMap.set(ch._id.toString(), { name: ch.name, color: ch.color, uid: ch.uid });
+  }
+
+  const excludeParam = request.query.exclude;
+  const excludeIds = excludeParam
+    ? (Array.isArray(excludeParam) ? excludeParam : [excludeParam])
+    : [];
+
+  const notificationsChannel = channelList.find((ch) => ch.uid === "notifications");
+  const excludeChannelIds = [...excludeIds];
+  if (notificationsChannel && !excludeChannelIds.includes(notificationsChannel._id.toString())) {
+    excludeChannelIds.push(notificationsChannel._id.toString());
+  }
+
+  const result = await getAllTimelineItems(application, {
+    before,
+    after,
+    userId,
+    excludeChannelIds,
+  });
+
+  const proxyBaseUrl = application.url;
+  if (proxyBaseUrl && result.items) {
+    result.items = result.items.map((item) => proxyItemImages(item, proxyBaseUrl));
+  }
+
+  for (const item of result.items) {
+    if (item._channelId) {
+      const info = channelMap.get(item._channelId);
+      if (info) {
+        item._channelName = info.name;
+        item._channelColor = info.color;
+        item._channelUid = info.uid;
+      }
+    }
+  }
+
+  const renderLocals = {
+    baseUrl: request.baseUrl,
+    __: request.__,
+    icon: response.locals.icon,
+    application,
+  };
+
+  const htmlParts = await Promise.all(
+    result.items.map(
+      (item) =>
+        new Promise((resolve, reject) => {
+          request.app.render(
+            "partials/item-card.njk",
+            { ...renderLocals, item },
+            (error, cardHtml) => {
+              if (error) {
+                reject(error);
+              } else {
+                const badge = item._channelName
+                  ? `<span class="ms-timeline-view__channel-badge" style="background: ${item._channelColor || "#888"}">${item._channelName}</span>`
+                  : "";
+                resolve(`<div class="ms-timeline-view__item">${badge}${cardHtml}</div>`);
+              }
+            },
+          );
+        }),
+    ),
+  );
+
+  response.json({
+    html: htmlParts.join(""),
+    paging: result.paging,
+    count: result.items.length,
+  });
+}
+
+/**
+ * Mark specific items as read (no-JS form fallback for mark-view-as-read)
+ * @param {object} request - Express request
+ * @param {object} response - Express response
+ */
+export async function markViewRead(request, response) {
+  const { application } = request.app.locals;
+  const userId = getUserId(request);
+  const { channel: channelUid } = request.body;
+  let { entry } = request.body;
+
+  const channelDocument = await getChannel(application, channelUid, userId);
+  if (!channelDocument) {
+    return response.status(404).render("404");
+  }
+
+  const entryIds = Array.isArray(entry) ? entry : entry ? [entry] : [];
+  if (entryIds.length > 0) {
+    await markItemsRead(application, channelDocument._id, entryIds, userId);
+  }
+
+  response.redirect(`${request.baseUrl}/channels/${channelUid}`);
+}
+
 /**
  * View single feed details with status - redirects to edit form
  * @param {object} request - Express request
@@ -1409,9 +1586,11 @@ export const readerController = {
   newChannel,
   createChannel: createChannelAction,
   channel,
+  channelHtml,
   settings,
   updateSettings,
   markAllRead,
+  markViewRead,
   deleteChannel: deleteChannelAction,
   feeds,
   addFeed,
@@ -1431,6 +1610,7 @@ export const readerController = {
   followActorAction,
   unfollowActorAction,
   timeline,
+  timelineHtml,
   deck,
   deckSettings,
   saveDeckSettings,

package/locales/en.json

@@ -4,6 +4,7 @@
       "title": "Reader",
       "empty": "No items to display",
       "markAllRead": "Mark all as read",
+      "markViewRead": "Mark view as read",
       "showRead": "Show read ({{count}})",
       "hideRead": "Hide read items",
       "allRead": "All caught up!",

package/package.json

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

package/views/channel.njk

@@ -13,6 +13,12 @@
             {{ icon("tick") }} {{ __("microsub.reader.markAllRead") }}
           </button>
         </form>
+        <button type="button"
+                class="button button--secondary button--small js-mark-view-read"
+                data-channel="{{ channel.uid }}"
+                style="display:none">
+          {{ icon("tick") }} {{ __("microsub.reader.markViewRead") }}
+        </button>
         {% endif %}
         {% if showRead %}
         <a href="{{ baseUrl }}/channels/{{ channel.uid }}" class="button button--secondary button--small">
@@ -33,27 +39,41 @@
     </header>
 
     {% if items.length > 0 %}
+    <form method="POST" action="{{ baseUrl }}/api/mark-view-read" id="mark-view-form">
+      <input type="hidden" name="channel" value="{{ channel.uid }}">
+      {% for item in items %}
+        {% if not item._is_read %}
+        <input type="hidden" name="entry" value="{{ item._id }}">
+        {% endif %}
+      {% endfor %}
+      <noscript>
+        <button type="submit" class="button button--secondary button--small">
+          {{ icon("tick") }} {{ __("microsub.reader.markViewRead") }}
+        </button>
+      </noscript>
+    </form>
     <div class="ms-timeline" id="timeline" data-channel="{{ channel.uid }}">
       {% for item in items %}
       {% include "partials/item-card.njk" %}
       {% endfor %}
     </div>
 
-    {% if paging %}
-    <nav class="ms-timeline__paging" aria-label="Pagination">
-      {% if paging.before %}
-      <a href="?before={{ paging.before }}{% if showRead %}&showRead=true{% endif %}" class="button button--secondary">
-        {{ icon("previous") }} {{ __("microsub.reader.newer") }}
-      </a>
-      {% else %}
-      <span></span>
-      {% endif %}
-      {% if paging.after %}
-      <a href="?after={{ paging.after }}{% if showRead %}&showRead=true{% endif %}" class="button button--secondary">
-        {{ __("microsub.reader.older") }} {{ icon("next") }}
+    {# Infinite scroll sentinel — JS upgrades the fallback link #}
+    {% if paging and paging.after %}
+    <div class="ms-timeline__loader" id="timeline-loader"
+         data-api-url="{{ baseUrl }}/channels/{{ channel.uid }}/html"
+         data-cursor="{{ paging.after }}"
+         data-show-read="{% if showRead %}true{% else %}false{% endif %}">
+      <div class="ms-timeline__spinner" style="display:none" aria-label="Loading more items">
+        <span class="spinner"></span>
+      </div>
+      <a href="?after={{ paging.after }}{% if showRead %}&showRead=true{% endif %}" class="button button--secondary ms-timeline__load-more">
+        {{ __("microsub.reader.older") }}
       </a>
-      {% endif %}
-    </nav>
+      <p class="ms-timeline__end" style="display:none">
+        {{ __("microsub.reader.allRead") }}
+      </p>
+    </div>
     {% endif %}
     {% else %}
     <div class="ms-reader__empty">
@@ -285,5 +305,136 @@
         }
       });
     }
+
+    // === Infinite scroll ===
+    const loader = document.getElementById('timeline-loader');
+    if (loader && timeline) {
+      const spinner = loader.querySelector('.ms-timeline__spinner');
+      const loadMoreLink = loader.querySelector('.ms-timeline__load-more');
+      const endMessage = loader.querySelector('.ms-timeline__end');
+      let cursor = loader.dataset.cursor;
+      let loading = false;
+      let hasMore = true;
+      const apiUrl = loader.dataset.apiUrl;
+      const showReadParam = loader.dataset.showRead;
+
+      async function loadMore() {
+        if (loading || !hasMore) return;
+        loading = true;
+        if (spinner) spinner.style.display = '';
+        if (loadMoreLink) loadMoreLink.style.display = 'none';
+
+        try {
+          const params = new URLSearchParams({ after: cursor });
+          if (showReadParam === 'true') params.append('showRead', 'true');
+
+          const response = await fetch(`${apiUrl}?${params}`, {
+            credentials: 'same-origin'
+          });
+
+          if (!response.ok) throw new Error('Failed to load');
+
+          const data = await response.json();
+
+          if (data.html && data.count > 0) {
+            timeline.insertAdjacentHTML('beforeend', data.html);
+          }
+
+          if (data.paging?.after) {
+            cursor = data.paging.after;
+            if (loadMoreLink) {
+              loadMoreLink.href = `?after=${cursor}${showReadParam === 'true' ? '&showRead=true' : ''}`;
+              loadMoreLink.style.display = '';
+            }
+          } else {
+            hasMore = false;
+            if (loadMoreLink) loadMoreLink.style.display = 'none';
+            if (endMessage) endMessage.style.display = '';
+          }
+        } catch (error) {
+          console.error('Infinite scroll error:', error);
+          hasMore = false;
+          if (loadMoreLink) loadMoreLink.style.display = '';
+        } finally {
+          loading = false;
+          if (spinner) spinner.style.display = 'none';
+        }
+      }
+
+      // IntersectionObserver auto-loads when sentinel is visible
+      const observer = new IntersectionObserver((entries) => {
+        if (entries[0].isIntersecting && hasMore && !loading) {
+          loadMore();
+        }
+      }, { rootMargin: '200px' });
+      observer.observe(loader);
+
+      // Click handler for fallback link
+      if (loadMoreLink) {
+        loadMoreLink.addEventListener('click', (e) => {
+          e.preventDefault();
+          loadMore();
+        });
+      }
+
+      // Expose loadMore for mark-view-as-read to trigger
+      window.__microsubLoadMore = loadMore;
+    }
+
+    // === Mark view as read button ===
+    const markViewBtn = document.querySelector('.js-mark-view-read');
+    if (markViewBtn && timeline) {
+      markViewBtn.style.display = '';
+
+      markViewBtn.addEventListener('click', async () => {
+        const unreadCards = timeline.querySelectorAll('.ms-item-card:not(.ms-item-card--read)');
+        const itemIds = [...unreadCards].map((card) => card.dataset.itemId).filter(Boolean);
+
+        if (itemIds.length === 0) return;
+
+        markViewBtn.disabled = true;
+
+        const formData = new URLSearchParams();
+        formData.append('action', 'timeline');
+        formData.append('method', 'mark_read');
+        formData.append('channel', markViewBtn.dataset.channel);
+        for (const id of itemIds) {
+          formData.append('entry', id);
+        }
+
+        try {
+          const response = await fetch(microsubApiUrl, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+            body: formData.toString(),
+            credentials: 'same-origin'
+          });
+
+          if (response.ok) {
+            for (const card of unreadCards) {
+              card.style.transition = 'opacity 0.3s ease, transform 0.3s ease';
+              card.style.opacity = '0';
+              card.style.transform = 'translateX(-20px)';
+            }
+            setTimeout(() => {
+              for (const card of [...unreadCards]) card.remove();
+              markViewBtn.disabled = false;
+
+              // Trigger infinite scroll to load next batch
+              if (typeof window.__microsubLoadMore === 'function') {
+                window.__microsubLoadMore();
+              } else if (timeline.querySelectorAll('.ms-item-card').length === 0) {
+                location.reload();
+              }
+            }, 300);
+          } else {
+            markViewBtn.disabled = false;
+          }
+        } catch (error) {
+          console.error('Error marking view as read:', error);
+          markViewBtn.disabled = false;
+        }
+      });
+    }
   </script>
 {% endblock %}

package/views/timeline.njk

@@ -42,21 +42,20 @@
       {% endfor %}
     </div>
 
-    {% if paging %}
-    <nav class="ms-timeline__paging" aria-label="Pagination">
-      {% if paging.before %}
-      <a href="?before={{ paging.before }}" class="button button--secondary">
-        {{ __("microsub.reader.newer") }}
-      </a>
-      {% else %}
-      <span></span>
-      {% endif %}
-      {% if paging.after %}
-      <a href="?after={{ paging.after }}" class="button button--secondary">
+    {% if paging and paging.after %}
+    <div class="ms-timeline__loader" id="timeline-loader"
+         data-api-url="{{ baseUrl }}/timeline/html{% if excludeIds and excludeIds.length > 0 %}?{% for id in excludeIds %}exclude={{ id }}{% if not loop.last %}&{% endif %}{% endfor %}{% endif %}"
+         data-cursor="{{ paging.after }}">
+      <div class="ms-timeline__spinner" style="display:none" aria-label="Loading more items">
+        <span class="spinner"></span>
+      </div>
+      <a href="?after={{ paging.after }}" class="button button--secondary ms-timeline__load-more">
         {{ __("microsub.reader.older") }}
       </a>
-      {% endif %}
-    </nav>
+      <p class="ms-timeline__end" style="display:none">
+        {{ __("microsub.reader.allRead") }}
+      </p>
+    </div>
     {% endif %}
 
     {% else %}
@@ -266,6 +265,73 @@
           button.disabled = false;
         }
       });
+
+      // === Infinite scroll ===
+      const loader = document.getElementById('timeline-loader');
+      if (loader && timeline) {
+        const spinner = loader.querySelector('.ms-timeline__spinner');
+        const loadMoreLink = loader.querySelector('.ms-timeline__load-more');
+        const endMessage = loader.querySelector('.ms-timeline__end');
+        let cursor = loader.dataset.cursor;
+        let loading = false;
+        let hasMore = true;
+        const apiUrl = loader.dataset.apiUrl;
+
+        async function loadMore() {
+          if (loading || !hasMore) return;
+          loading = true;
+          if (spinner) spinner.style.display = '';
+          if (loadMoreLink) loadMoreLink.style.display = 'none';
+
+          try {
+            const sep = apiUrl.includes('?') ? '&' : '?';
+            const response = await fetch(`${apiUrl}${sep}after=${encodeURIComponent(cursor)}`, {
+              credentials: 'same-origin'
+            });
+
+            if (!response.ok) throw new Error('Failed to load');
+
+            const data = await response.json();
+
+            if (data.html && data.count > 0) {
+              timeline.insertAdjacentHTML('beforeend', data.html);
+            }
+
+            if (data.paging?.after) {
+              cursor = data.paging.after;
+              if (loadMoreLink) {
+                loadMoreLink.href = `?after=${cursor}`;
+                loadMoreLink.style.display = '';
+              }
+            } else {
+              hasMore = false;
+              if (loadMoreLink) loadMoreLink.style.display = 'none';
+              if (endMessage) endMessage.style.display = '';
+            }
+          } catch (error) {
+            console.error('Infinite scroll error:', error);
+            hasMore = false;
+            if (loadMoreLink) loadMoreLink.style.display = '';
+          } finally {
+            loading = false;
+            if (spinner) spinner.style.display = 'none';
+          }
+        }
+
+        const observer = new IntersectionObserver((entries) => {
+          if (entries[0].isIntersecting && hasMore && !loading) {
+            loadMore();
+          }
+        }, { rootMargin: '200px' });
+        observer.observe(loader);
+
+        if (loadMoreLink) {
+          loadMoreLink.addEventListener('click', (e) => {
+            e.preventDefault();
+            loadMore();
+          });
+        }
+      }
     }
   </script>
 {% endblock %}