@rmdes/indiekit-endpoint-activitypub 2.2.0 → 2.4.0

package/assets/reader-infinite-scroll.js

@@ -186,4 +186,154 @@ document.addEventListener("alpine:init", () => {
       if (this.observer) this.observer.disconnect();
     },
   }));
+
+  /**
+   * New posts banner — polls for new items every 30s, shows "N new posts" banner.
+   */
+  // eslint-disable-next-line no-undef
+  Alpine.data("apNewPostsBanner", () => ({
+    count: 0,
+    newest: null,
+    tab: "",
+    mountPath: "",
+    _interval: null,
+
+    init() {
+      const el = this.$el;
+      this.newest = el.dataset.newest || null;
+      this.tab = el.dataset.tab || "notes";
+      this.mountPath = el.dataset.mountPath || "";
+
+      if (!this.newest) return;
+
+      this._interval = setInterval(() => this.poll(), 30000);
+    },
+
+    async poll() {
+      if (!this.newest) return;
+      try {
+        const params = new URLSearchParams({ after: this.newest, tab: this.tab });
+        const res = await fetch(
+          `${this.mountPath}/admin/reader/api/timeline/count-new?${params}`,
+          { headers: { Accept: "application/json" } },
+        );
+        if (!res.ok) return;
+        const data = await res.json();
+        this.count = data.count || 0;
+      } catch {
+        // Silently ignore polling errors
+      }
+    },
+
+    async loadNew() {
+      if (!this.newest || this.count === 0) return;
+      try {
+        const params = new URLSearchParams({ after: this.newest, tab: this.tab });
+        const res = await fetch(
+          `${this.mountPath}/admin/reader/api/timeline?${params}`,
+          { headers: { Accept: "application/json" } },
+        );
+        if (!res.ok) return;
+        const data = await res.json();
+
+        const timeline = document.getElementById("ap-timeline");
+        if (data.html && timeline) {
+          timeline.insertAdjacentHTML("afterbegin", data.html);
+          // Update newest cursor to the first item's published date
+          const firstCard = timeline.querySelector(".ap-card");
+          if (firstCard) {
+            const timeEl = firstCard.querySelector("time[datetime]");
+            if (timeEl) this.newest = timeEl.getAttribute("datetime");
+          }
+        }
+
+        this.count = 0;
+      } catch {
+        // Silently ignore load errors
+      }
+    },
+
+    destroy() {
+      if (this._interval) clearInterval(this._interval);
+    },
+  }));
+
+  /**
+   * Read tracking — IntersectionObserver marks cards as read on 50% visibility.
+   * Batches UIDs and flushes to server every 5 seconds.
+   */
+  // eslint-disable-next-line no-undef
+  Alpine.data("apReadTracker", () => ({
+    _observer: null,
+    _batch: [],
+    _flushTimer: null,
+    _mountPath: "",
+    _csrfToken: "",
+
+    init() {
+      const el = this.$el;
+      this._mountPath = el.dataset.mountPath || "";
+      this._csrfToken = el.dataset.csrfToken || "";
+
+      this._observer = new IntersectionObserver(
+        (entries) => {
+          for (const entry of entries) {
+            if (entry.isIntersecting) {
+              const card = entry.target;
+              const uid = card.dataset.uid;
+              if (uid && !card.classList.contains("ap-card--read")) {
+                card.classList.add("ap-card--read");
+                this._batch.push(uid);
+              }
+              this._observer.unobserve(card);
+            }
+          }
+        },
+        { threshold: 0.5 },
+      );
+
+      // Observe all existing cards
+      this._observeCards();
+
+      // Watch for new cards added by infinite scroll
+      this._mutationObserver = new MutationObserver(() => this._observeCards());
+      this._mutationObserver.observe(el, { childList: true, subtree: true });
+
+      // Flush batch every 5 seconds
+      this._flushTimer = setInterval(() => this._flush(), 5000);
+    },
+
+    _observeCards() {
+      const cards = this.$el.querySelectorAll(".ap-card[data-uid]:not(.ap-card--read)");
+      for (const card of cards) {
+        this._observer.observe(card);
+      }
+    },
+
+    async _flush() {
+      if (this._batch.length === 0) return;
+      const uids = [...this._batch];
+      this._batch = [];
+
+      try {
+        await fetch(`${this._mountPath}/admin/reader/api/timeline/mark-read`, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            "X-CSRF-Token": this._csrfToken,
+          },
+          body: JSON.stringify({ uids }),
+        });
+      } catch {
+        // Non-critical — items will be re-marked on next view
+      }
+    },
+
+    destroy() {
+      if (this._observer) this._observer.disconnect();
+      if (this._mutationObserver) this._mutationObserver.disconnect();
+      if (this._flushTimer) clearInterval(this._flushTimer);
+      this._flush(); // Final flush on teardown
+    },
+  }));
 });

package/assets/reader.css

@@ -2343,6 +2343,177 @@
   visibility: hidden;
 }
 
+/* ==========================================================================
+   New Posts Banner
+   ========================================================================== */
+
+.ap-new-posts-banner {
+  left: 0;
+  position: sticky;
+  right: 0;
+  top: 0;
+  z-index: 10;
+}
+
+.ap-new-posts-banner__btn {
+  background: var(--color-primary);
+  border: none;
+  border-radius: var(--border-radius-small);
+  color: var(--color-on-primary);
+  cursor: pointer;
+  display: block;
+  font-family: inherit;
+  font-size: var(--font-size-s);
+  margin: 0 auto var(--space-s);
+  padding: var(--space-xs) var(--space-m);
+  text-align: center;
+  width: auto;
+}
+
+.ap-new-posts-banner__btn:hover {
+  opacity: 0.9;
+}
+
+/* ==========================================================================
+   Read State
+   ========================================================================== */
+
+.ap-card--read {
+  opacity: 0.7;
+  transition: opacity 0.3s ease;
+}
+
+.ap-card--read:hover {
+  opacity: 1;
+}
+
+/* ==========================================================================
+   Unread Toggle
+   ========================================================================== */
+
+.ap-unread-toggle {
+  margin-left: auto;
+}
+
+.ap-unread-toggle--active {
+  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
+  font-weight: var(--font-weight-bold);
+}
+
+/* ==========================================================================
+   Quote Embeds
+   ========================================================================== */
+
+.ap-quote-embed {
+  border: var(--border-width-thin) solid var(--color-outline);
+  border-radius: var(--border-radius-small);
+  margin-top: var(--space-s);
+  overflow: hidden;
+}
+
+.ap-quote-embed--pending {
+  border-style: dashed;
+}
+
+.ap-quote-embed__link {
+  color: inherit;
+  display: block;
+  padding: var(--space-s) var(--space-m);
+  text-decoration: none;
+}
+
+.ap-quote-embed__link:hover {
+  background: var(--color-offset);
+}
+
+.ap-quote-embed__author {
+  align-items: center;
+  display: flex;
+  gap: var(--space-xs);
+  margin-bottom: var(--space-xs);
+}
+
+.ap-quote-embed__avatar {
+  border-radius: 50%;
+  flex-shrink: 0;
+  height: 24px;
+  object-fit: cover;
+  width: 24px;
+}
+
+.ap-quote-embed__avatar--default {
+  align-items: center;
+  background: var(--color-offset);
+  color: var(--color-on-offset);
+  display: inline-flex;
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-bold);
+  justify-content: center;
+}
+
+.ap-quote-embed__author-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.ap-quote-embed__name {
+  font-size: var(--font-size-s);
+  font-weight: var(--font-weight-bold);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ap-quote-embed__handle {
+  color: var(--color-on-offset);
+  font-size: var(--font-size-xs);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ap-quote-embed__time {
+  color: var(--color-on-offset);
+  flex-shrink: 0;
+  font-size: var(--font-size-xs);
+  white-space: nowrap;
+}
+
+.ap-quote-embed__title {
+  font-size: var(--font-size-s);
+  font-weight: var(--font-weight-bold);
+  margin: 0 0 var(--space-xs);
+}
+
+.ap-quote-embed__content {
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 6;
+  color: var(--color-on-background);
+  display: -webkit-box;
+  font-size: var(--font-size-s);
+  line-height: 1.5;
+  overflow: hidden;
+}
+
+.ap-quote-embed__content p {
+  margin: 0 0 var(--space-xs);
+}
+
+.ap-quote-embed__content p:last-child {
+  margin-bottom: 0;
+}
+
+.ap-quote-embed__media {
+  margin-top: var(--space-xs);
+}
+
+.ap-quote-embed__photo {
+  border-radius: var(--border-radius-small);
+  max-height: 160px;
+  max-width: 100%;
+  object-fit: cover;
+}
+
 /* Hashtag tab sources info line */
 .ap-hashtag-sources {
   color: var(--color-on-offset);

package/index.js

@@ -61,7 +61,7 @@ import {
 } from "./lib/controllers/featured-tags.js";
 import { resolveController } from "./lib/controllers/resolve.js";
 import { tagTimelineController } from "./lib/controllers/tag-timeline.js";
-import { apiTimelineController } from "./lib/controllers/api-timeline.js";
+import { apiTimelineController, countNewController, markReadController } from "./lib/controllers/api-timeline.js";
 import {
   exploreController,
   exploreApiController,
@@ -239,6 +239,8 @@ export default class ActivityPubEndpoint {
     router.get("/admin/reader", readerController(mp));
     router.get("/admin/reader/tag", tagTimelineController(mp));
     router.get("/admin/reader/api/timeline", apiTimelineController(mp));
+    router.get("/admin/reader/api/timeline/count-new", countNewController());
+    router.post("/admin/reader/api/timeline/mark-read", markReadController());
     router.get("/admin/reader/explore", exploreController(mp));
     router.get("/admin/reader/api/explore", exploreApiController(mp));
     router.get("/admin/reader/api/explore/hashtag", hashtagExploreApiController(mp));

package/lib/controllers/api-timeline.js

@@ -2,8 +2,8 @@
  * JSON API timeline endpoint — returns pre-rendered HTML cards for infinite scroll AJAX loads.
  */
 
-import { getTimelineItems } from "../storage/timeline.js";
-import { getToken } from "../csrf.js";
+import { getTimelineItems, countNewItems, markItemsRead } from "../storage/timeline.js";
+import { getToken, validateToken } from "../csrf.js";
 import {
   getMutedUrls,
   getMutedKeywords,
@@ -26,7 +26,8 @@ export function apiTimelineController(mountPath) {
       const limit = 20;
 
       // Build storage query options (same logic as readerController)
-      const options = { before, limit };
+      const unread = request.query.unread === "1";
+      const options = { before, limit, unread };
 
       if (tag) {
         options.tag = tag;
@@ -168,3 +169,66 @@ export function apiTimelineController(mountPath) {
     }
   };
 }
+
+/**
+ * GET /admin/reader/api/timeline/count-new — count items newer than a given date.
+ */
+export function countNewController() {
+  return async (request, response, next) => {
+    try {
+      const { application } = request.app.locals;
+      const collections = {
+        ap_timeline: application?.collections?.get("ap_timeline"),
+      };
+
+      const after = request.query.after;
+      const tab = request.query.tab || "notes";
+
+      const options = {};
+      if (tab === "notes") {
+        options.type = "note";
+        options.excludeReplies = true;
+      } else if (tab === "articles") {
+        options.type = "article";
+      } else if (tab === "boosts") {
+        options.type = "boost";
+      }
+
+      const count = await countNewItems(collections, after, options);
+      response.json({ count });
+    } catch (error) {
+      next(error);
+    }
+  };
+}
+
+/**
+ * POST /admin/reader/api/timeline/mark-read — mark items as read by UID array.
+ */
+export function markReadController() {
+  return async (request, response, next) => {
+    try {
+      if (!validateToken(request)) {
+        return response.status(403).json({ success: false, error: "Invalid CSRF token" });
+      }
+
+      const { uids } = request.body;
+      if (!Array.isArray(uids) || uids.length === 0) {
+        return response.status(400).json({ success: false, error: "Missing uids array" });
+      }
+
+      // Cap batch size to prevent abuse
+      const batch = uids.slice(0, 100).filter((uid) => typeof uid === "string");
+
+      const { application } = request.app.locals;
+      const collections = {
+        ap_timeline: application?.collections?.get("ap_timeline"),
+      };
+
+      const updated = await markItemsRead(collections, batch);
+      response.json({ success: true, updated });
+    } catch (error) {
+      next(error);
+    }
+  };
+}

package/lib/controllers/post-detail.js

@@ -3,6 +3,7 @@ import { Article, Note, Person, Service, Application } from "@fedify/fedify/voca
 import { getToken } from "../csrf.js";
 import { extractObjectData } from "../timeline-store.js";
 import { getCached, setCache } from "../lookup-cache.js";
+import { fetchAndStoreQuote } from "../og-unfurl.js";
 
 // Load parent posts (inReplyTo chain) up to maxDepth levels
 async function loadParentChain(ctx, documentLoader, timelineCol, parentUrl, maxDepth = 5) {
@@ -315,6 +316,45 @@ export function postDetailController(mountPath, plugin) {
         // Continue with empty thread
       }
 
+      // On-demand quote enrichment: if item has quoteUrl but no quote data yet
+      if (timelineItem.quoteUrl && !timelineItem.quote) {
+        try {
+          const handle = plugin.options.actor.handle;
+          const qCtx = plugin._federation.createContext(
+            new URL(plugin._publicationUrl),
+            { handle, publicationUrl: plugin._publicationUrl },
+          );
+          const qLoader = await qCtx.getDocumentLoader({ identifier: handle });
+
+          const quoteObject = await qCtx.lookupObject(new URL(timelineItem.quoteUrl), {
+            documentLoader: qLoader,
+          });
+
+          if (quoteObject) {
+            const quoteData = await extractObjectData(quoteObject, { documentLoader: qLoader });
+            timelineItem.quote = {
+              url: quoteData.url || quoteData.uid,
+              uid: quoteData.uid,
+              author: quoteData.author,
+              content: quoteData.content,
+              published: quoteData.published,
+              name: quoteData.name,
+              photo: quoteData.photo?.slice(0, 1) || [],
+            };
+
+            // Persist for future requests (fire-and-forget)
+            if (timelineCol) {
+              timelineCol.updateOne(
+                { $or: [{ uid: objectUrl }, { url: objectUrl }] },
+                { $set: { quote: timelineItem.quote } },
+              ).catch(() => {});
+            }
+          }
+        } catch (error) {
+          console.warn(`[post-detail] Quote fetch failed for ${objectUrl}:`, error.message);
+        }
+      }
+
       const csrfToken = getToken(request.session);
 
       response.render("activitypub-post-detail", {

package/lib/controllers/reader.js

@@ -2,7 +2,7 @@
  * Reader controller — shows timeline of posts from followed accounts.
  */
 
-import { getTimelineItems } from "../storage/timeline.js";
+import { getTimelineItems, countUnreadItems } from "../storage/timeline.js";
 import {
   getNotifications,
   getUnreadNotificationCount,
@@ -48,8 +48,11 @@ export function readerController(mountPath) {
       const after = request.query.after;
       const limit = Number.parseInt(request.query.limit || "20", 10);
 
+      // Unread filter
+      const unread = request.query.unread === "1";
+
       // Build query options
-      const options = { before, after, limit };
+      const options = { before, after, limit, unread };
 
       // Tab filtering
       if (tab === "notes") {
@@ -141,8 +144,11 @@ export function readerController(mountPath) {
         });
       }
 
-      // Get unread notification count for badge
-      const unreadCount = await getUnreadNotificationCount(collections);
+      // Get unread notification count for badge + unread timeline count for toggle
+      const [unreadCount, unreadTimelineCount] = await Promise.all([
+        getUnreadNotificationCount(collections),
+        countUnreadItems(collections),
+      ]);
 
       // Get interaction state for liked/boosted indicators
       // Interactions are keyed by canonical AP uid (new) or display url (legacy).
@@ -206,9 +212,11 @@ export function readerController(mountPath) {
         readerParent: { href: mountPath, text: response.locals.__("activitypub.title") },
         items,
         tab,
+        unread,
         before: result.before,
         after: result.after,
         unreadCount,
+        unreadTimelineCount,
         interactionMap,
         csrfToken,
         mountPath,

package/lib/inbox-listeners.js

@@ -27,7 +27,7 @@ import { logActivity as logActivityShared } from "./activity-log.js";
 import { sanitizeContent, extractActorInfo, extractObjectData } from "./timeline-store.js";
 import { addTimelineItem, deleteTimelineItem, updateTimelineItem } from "./storage/timeline.js";
 import { addNotification } from "./storage/notifications.js";
-import { fetchAndStorePreviews } from "./og-unfurl.js";
+import { fetchAndStorePreviews, fetchAndStoreQuote } from "./og-unfurl.js";
 import { getFollowedTags } from "./storage/followed-tags.js";
 
 /**
@@ -361,6 +361,14 @@ export function registerInboxListeners(inboxChain, options) {
           });
 
           await addTimelineItem(collections, timelineItem);
+
+          // Fire-and-forget quote enrichment for boosted posts
+          if (timelineItem.quoteUrl) {
+            fetchAndStoreQuote(collections, timelineItem.uid, timelineItem.quoteUrl, ctx, authLoader)
+              .catch((error) => {
+                console.error(`[inbox] Quote fetch failed for ${timelineItem.uid}:`, error.message);
+              });
+          }
         } catch (error) {
           // Remote object unreachable (timeout, Authorized Fetch, deleted, etc.) — skip
           const cause = error?.cause?.code || error?.message || "unknown";
@@ -489,6 +497,14 @@ export function registerInboxListeners(inboxChain, options) {
                 console.error(`[inbox] OG unfurl failed for ${timelineItem.uid}:`, error);
               });
           }
+
+          // Fire-and-forget quote enrichment
+          if (timelineItem.quoteUrl) {
+            fetchAndStoreQuote(collections, timelineItem.uid, timelineItem.quoteUrl, ctx, authLoader)
+              .catch((error) => {
+                console.error(`[inbox] Quote fetch failed for ${timelineItem.uid}:`, error.message);
+              });
+          }
         } catch (error) {
           // Log extraction errors but don't fail the entire handler
           console.error("Failed to store timeline item:", error);

package/lib/og-unfurl.js

@@ -4,6 +4,7 @@
  */
 
 import { unfurl } from "unfurl.js";
+import { extractObjectData } from "./timeline-store.js";
 
 const USER_AGENT =
   "Mozilla/5.0 (compatible; Indiekit/1.0; +https://getindiekit.com)";
@@ -248,3 +249,39 @@ export async function fetchAndStorePreviews(collections, uid, html) {
     );
   }
 }
+
+/**
+ * Fetch a quoted post's data and store it on the timeline item.
+ * Fire-and-forget — caller does NOT await. Errors are caught and logged.
+ * @param {object} collections - MongoDB collections
+ * @param {string} uid - Timeline item UID (the quoting post)
+ * @param {string} quoteUrl - URL of the quoted post
+ * @param {object} ctx - Fedify context (for lookupObject)
+ * @param {object} documentLoader - Authenticated DocumentLoader
+ * @returns {Promise<void>}
+ */
+export async function fetchAndStoreQuote(collections, uid, quoteUrl, ctx, documentLoader) {
+  try {
+    const object = await ctx.lookupObject(new URL(quoteUrl), { documentLoader });
+    if (!object) return;
+
+    const quoteData = await extractObjectData(object, { documentLoader });
+
+    const quote = {
+      url: quoteData.url || quoteData.uid,
+      uid: quoteData.uid,
+      author: quoteData.author,
+      content: quoteData.content,
+      published: quoteData.published,
+      name: quoteData.name,
+      photo: quoteData.photo?.slice(0, 1) || [],
+    };
+
+    await collections.ap_timeline.updateOne(
+      { uid },
+      { $set: { quote } },
+    );
+  } catch (error) {
+    console.error(`[og-unfurl] Failed to fetch quote for ${uid}: ${error.message}`);
+  }
+}

package/lib/storage/timeline.js

@@ -107,6 +107,11 @@ export async function getTimelineItems(collections, options = {}) {
     query.category = { $regex: new RegExp(`^${escapedTag}$`, "i") };
   }
 
+  // Unread-only filter
+  if (options.unread) {
+    query.read = { $ne: true };
+  }
+
   // Cursor pagination — published is stored as ISO string, so compare
   // as strings (lexicographic ISO 8601 comparison is correct for dates)
   if (options.before) {
@@ -233,3 +238,56 @@ export async function cleanupTimelineByCount(collections, keepCount) {
   const cutoffDate = items[0].published;
   return await deleteOldTimelineItems(collections, cutoffDate);
 }
+
+/**
+ * Count timeline items newer than a given date
+ * @param {object} collections - MongoDB collections
+ * @param {string} after - ISO date string — count items published after this
+ * @param {object} [options] - Filter options
+ * @param {string} [options.type] - Filter by type
+ * @param {boolean} [options.excludeReplies] - Exclude replies
+ * @returns {Promise<number>} Count of new items
+ */
+export async function countNewItems(collections, after, options = {}) {
+  const { ap_timeline } = collections;
+  if (!after || Number.isNaN(new Date(after).getTime())) return 0;
+
+  const query = { published: { $gt: after } };
+  if (options.type) query.type = options.type;
+  if (options.excludeReplies) {
+    query.$or = [
+      { inReplyTo: null },
+      { inReplyTo: "" },
+      { inReplyTo: { $exists: false } },
+    ];
+  }
+
+  return await ap_timeline.countDocuments(query);
+}
+
+/**
+ * Mark timeline items as read
+ * @param {object} collections - MongoDB collections
+ * @param {string[]} uids - Array of item UIDs to mark as read
+ * @returns {Promise<number>} Number of items updated
+ */
+export async function markItemsRead(collections, uids) {
+  const { ap_timeline } = collections;
+  if (!uids || uids.length === 0) return 0;
+
+  const result = await ap_timeline.updateMany(
+    { uid: { $in: uids }, read: { $ne: true } },
+    { $set: { read: true } },
+  );
+  return result.modifiedCount;
+}
+
+/**
+ * Count unread timeline items
+ * @param {object} collections - MongoDB collections
+ * @returns {Promise<number>}
+ */
+export async function countUnreadItems(collections) {
+  const { ap_timeline } = collections;
+  return await ap_timeline.countDocuments({ read: { $ne: true } });
+}

package/lib/timeline-store.js

@@ -243,6 +243,9 @@ export async function extractObjectData(object, options = {}) {
   // In-reply-to — Fedify uses replyTargetId (non-fetching)
   const inReplyTo = object.replyTargetId?.href || "";
 
+  // Quote URL — Fedify reads quoteUrl / _misskey_quote / quoteUri
+  const quoteUrl = object.quoteUrl?.href || "";
+
   // Build base timeline item
   const item = {
     uid,
@@ -260,6 +263,7 @@ export async function extractObjectData(object, options = {}) {
     video,
     audio,
     inReplyTo,
+    quoteUrl,
     createdAt: new Date().toISOString()
   };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rmdes/indiekit-endpoint-activitypub",
-  "version": "2.2.0",
+  "version": "2.4.0",
   "description": "ActivityPub federation endpoint for Indiekit via Fedify. Adds full fediverse support: actor, inbox, outbox, followers, following, syndication, and Mastodon migration.",
   "keywords": [
     "indiekit",

package/views/activitypub-reader.njk

@@ -64,32 +64,57 @@
 
   {# Tab navigation #}
   <nav class="ap-tabs" role="tablist">
-    <a href="?tab=notes" class="ap-tab{% if tab == 'notes' %} ap-tab--active{% endif %}" role="tab">
+    <a href="?tab=notes{% if unread %}&unread=1{% endif %}" class="ap-tab{% if tab == 'notes' %} ap-tab--active{% endif %}" role="tab">
       {{ __("activitypub.reader.tabs.notes") }}
     </a>
-    <a href="?tab=articles" class="ap-tab{% if tab == 'articles' %} ap-tab--active{% endif %}" role="tab">
+    <a href="?tab=articles{% if unread %}&unread=1{% endif %}" class="ap-tab{% if tab == 'articles' %} ap-tab--active{% endif %}" role="tab">
       {{ __("activitypub.reader.tabs.articles") }}
     </a>
-    <a href="?tab=replies" class="ap-tab{% if tab == 'replies' %} ap-tab--active{% endif %}" role="tab">
+    <a href="?tab=replies{% if unread %}&unread=1{% endif %}" class="ap-tab{% if tab == 'replies' %} ap-tab--active{% endif %}" role="tab">
       {{ __("activitypub.reader.tabs.replies") }}
     </a>
-    <a href="?tab=boosts" class="ap-tab{% if tab == 'boosts' %} ap-tab--active{% endif %}" role="tab">
+    <a href="?tab=boosts{% if unread %}&unread=1{% endif %}" class="ap-tab{% if tab == 'boosts' %} ap-tab--active{% endif %}" role="tab">
       {{ __("activitypub.reader.tabs.boosts") }}
     </a>
-    <a href="?tab=media" class="ap-tab{% if tab == 'media' %} ap-tab--active{% endif %}" role="tab">
+    <a href="?tab=media{% if unread %}&unread=1{% endif %}" class="ap-tab{% if tab == 'media' %} ap-tab--active{% endif %}" role="tab">
       {{ __("activitypub.reader.tabs.media") }}
     </a>
-    <a href="?tab=all" class="ap-tab{% if tab == 'all' %} ap-tab--active{% endif %}" role="tab">
+    <a href="?tab=all{% if unread %}&unread=1{% endif %}" class="ap-tab{% if tab == 'all' %} ap-tab--active{% endif %}" role="tab">
       {{ __("activitypub.reader.tabs.all") }}
     </a>
+    <a href="?tab={{ tab }}{% if not unread %}&unread=1{% endif %}" class="ap-tab ap-unread-toggle{% if unread %} ap-unread-toggle--active{% endif %}" title="{% if unread %}Show all posts{% else %}Show unread only{% endif %}">
+      {% if unread %}
+        All posts
+      {% else %}
+        Unread{% if unreadTimelineCount %} ({{ unreadTimelineCount }}){% endif %}
+      {% endif %}
+    </a>
   </nav>
 
-  {# Timeline items #}
+  {# New posts banner — polls every 30s, shows count of new items #}
+  {% if items.length > 0 %}
+    <div class="ap-new-posts-banner"
+      x-data="apNewPostsBanner()"
+      data-newest="{{ items[0].published }}"
+      data-tab="{{ tab }}"
+      data-mount-path="{{ mountPath }}"
+      x-show="count > 0"
+      x-cloak>
+      <button class="ap-new-posts-banner__btn" @click="loadNew()">
+        <span x-text="count + ' new post' + (count !== 1 ? 's' : '')"></span> — Load
+      </button>
+    </div>
+  {% endif %}
+
+  {# Timeline items with read tracking #}
   {% if items.length > 0 %}
     <div class="ap-timeline"
       id="ap-timeline"
       data-mount-path="{{ mountPath }}"
-      data-before="{{ before if before else '' }}">
+      data-before="{{ before if before else '' }}"
+      data-csrf-token="{{ csrfToken }}"
+      x-data="apReadTracker()"
+      x-init="init()">
       {% for item in items %}
         {% include "partials/ap-item-card.njk" %}
       {% endfor %}

package/views/partials/ap-item-card.njk

@@ -6,7 +6,7 @@
 {% set hasCardMedia = (item.photo and item.photo.length > 0) or (item.video and item.video.length > 0) or (item.audio and item.audio.length > 0) %}
 {% if hasCardContent or hasCardTitle or hasCardMedia %}
 
-<article class="ap-card{% if item.type %} ap-card--{{ item.type }}{% endif %}{% if item.inReplyTo %} ap-card--reply{% endif %}{% if item._moderated %} ap-card--moderated{% endif %}">
+<article class="ap-card{% if item.type %} ap-card--{{ item.type }}{% endif %}{% if item.inReplyTo %} ap-card--reply{% endif %}{% if item._moderated %} ap-card--moderated{% endif %}{% if item.read %} ap-card--read{% endif %}" data-uid="{{ item.uid }}">
   {# Moderation content warning wrapper #}
   {% if item._moderated %}
     {% if item._moderationReason == "muted_account" %}
@@ -91,6 +91,9 @@
           </div>
         {% endif %}
 
+        {# Quoted post embed #}
+        {% include "partials/ap-quote-embed.njk" %}
+
         {# Link previews #}
         {% include "partials/ap-link-preview.njk" %}
 
@@ -106,6 +109,9 @@
       </div>
     {% endif %}
 
+    {# Quoted post embed #}
+    {% include "partials/ap-quote-embed.njk" %}
+
     {# Link previews #}
     {% include "partials/ap-link-preview.njk" %}
 

package/views/partials/ap-quote-embed.njk

@@ -0,0 +1,41 @@
+{# Quoted post embed — renders when a post quotes another post #}
+{% if item.quote %}
+  <div class="ap-quote-embed">
+    <a href="{{ mountPath }}/admin/reader/post?url={{ item.quote.uid | urlencode }}" class="ap-quote-embed__link">
+      <header class="ap-quote-embed__author">
+        {% if item.quote.author.photo %}
+          <img src="{{ item.quote.author.photo }}" alt="" class="ap-quote-embed__avatar" loading="lazy" crossorigin="anonymous">
+        {% else %}
+          <span class="ap-quote-embed__avatar ap-quote-embed__avatar--default">{{ item.quote.author.name[0] | upper if item.quote.author.name else "?" }}</span>
+        {% endif %}
+        <div class="ap-quote-embed__author-info">
+          <div class="ap-quote-embed__name">{{ item.quote.author.name or "Unknown" }}</div>
+          {% if item.quote.author.handle %}
+            <div class="ap-quote-embed__handle">{{ item.quote.author.handle }}</div>
+          {% endif %}
+        </div>
+        {% if item.quote.published %}
+          <time datetime="{{ item.quote.published }}" class="ap-quote-embed__time">{{ item.quote.published | date("PPp") }}</time>
+        {% endif %}
+      </header>
+      {% if item.quote.name %}
+        <p class="ap-quote-embed__title">{{ item.quote.name }}</p>
+      {% endif %}
+      {% if item.quote.content and item.quote.content.html %}
+        <div class="ap-quote-embed__content">{{ item.quote.content.html | safe }}</div>
+      {% endif %}
+      {% if item.quote.photo and item.quote.photo.length > 0 %}
+        <div class="ap-quote-embed__media">
+          <img src="{{ item.quote.photo[0] }}" alt="" loading="lazy" class="ap-quote-embed__photo">
+        </div>
+      {% endif %}
+    </a>
+  </div>
+{% elif item.quoteUrl %}
+  {# Fallback: quote not yet fetched — show as styled link #}
+  <div class="ap-quote-embed ap-quote-embed--pending">
+    <a href="{{ mountPath }}/admin/reader/post?url={{ item.quoteUrl | urlencode }}" class="ap-quote-embed__link">
+      Quoted post: {{ item.quoteUrl }}
+    </a>
+  </div>
+{% endif %}