@rmdes/indiekit-endpoint-activitypub 1.1.13 → 1.1.15

package/assets/reader-links.css

@@ -0,0 +1,151 @@
+/**
+ * OpenGraph link preview cards and AP link interception
+ * Styles for link preview cards in the ActivityPub reader
+ */
+
+/* Link preview container */
+.ap-link-previews {
+  margin-top: var(--space-m);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-s);
+}
+
+/* Individual link preview card */
+.ap-link-preview {
+  display: flex;
+  overflow: hidden;
+  border-radius: var(--border-radius-small);
+  border: 1px solid var(--color-neutral-lighter);
+  background-color: var(--color-offset);
+  text-decoration: none;
+  color: inherit;
+  transition: border-color 0.2s ease;
+}
+
+.ap-link-preview:hover {
+  border-color: var(--color-primary);
+}
+
+/* Text content area (left side) */
+.ap-link-preview__text {
+  flex: 1;
+  padding: var(--space-s);
+  min-width: 0; /* Enable text truncation */
+}
+
+.ap-link-preview__title {
+  font-weight: 600;
+  font-size: 0.875rem;
+  color: var(--color-on-background);
+  margin: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ap-link-preview__desc {
+  font-size: 0.75rem;
+  color: var(--color-on-offset);
+  margin: var(--space-xs) 0 0;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.ap-link-preview__domain {
+  font-size: 0.75rem;
+  color: var(--color-neutral);
+  margin: var(--space-s) 0 0;
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.ap-link-preview__favicon {
+  width: 1rem;
+  height: 1rem;
+  display: inline-block;
+}
+
+/* Image area (right side) */
+.ap-link-preview__image {
+  flex-shrink: 0;
+  width: 6rem;
+  height: 6rem;
+}
+
+.ap-link-preview__image img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+/* Responsive - larger images on desktop */
+@media (min-width: 640px) {
+  .ap-link-preview__image {
+    width: 8rem;
+    height: 8rem;
+  }
+
+  .ap-link-preview__title {
+    font-size: 1rem;
+  }
+
+  .ap-link-preview__desc {
+    font-size: 0.875rem;
+  }
+}
+
+/* Post detail thread view */
+.ap-post-detail__back {
+  margin-bottom: var(--space-m);
+}
+
+.ap-post-detail__back-link {
+  font-size: 0.875rem;
+  color: var(--color-primary);
+  text-decoration: none;
+}
+
+.ap-post-detail__back-link:hover {
+  text-decoration: underline;
+}
+
+.ap-post-detail__section-title {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--color-neutral);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin: var(--space-l) 0 var(--space-s);
+  padding-bottom: var(--space-xs);
+  border-bottom: 1px solid var(--color-neutral-lighter);
+}
+
+.ap-post-detail__main {
+  margin: var(--space-m) 0;
+}
+
+.ap-post-detail__parents,
+.ap-post-detail__replies {
+  margin: var(--space-m) 0;
+}
+
+.ap-post-detail__parent-item,
+.ap-post-detail__reply-item {
+  margin-bottom: var(--space-s);
+}
+
+/* Thread connector line between parent posts */
+.ap-post-detail__parents .ap-post-detail__parent-item {
+  position: relative;
+  padding-left: var(--space-m);
+  border-left: 2px solid var(--color-neutral-lighter);
+}
+
+/* Main post highlight */
+.ap-post-detail__main .ap-card {
+  border-left-width: 3px;
+}

package/assets/reader-links.js

@@ -0,0 +1,88 @@
+/**
+ * Client-side AP link interception for internal navigation
+ * Redirects ActivityPub links to internal reader views
+ */
+
+(function () {
+  "use strict";
+
+  // Fediverse URL patterns that should open internally
+  const AP_URL_PATTERN =
+    /\/@[\w.-]+\/\d+|\/@[\w.-]+\/statuses\/[\w]+|\/users\/[\w.-]+\/statuses\/\d+|\/objects\/[\w-]+|\/notice\/[\w]+|\/notes\/[\w]+|\/post\/\d+|\/comment\/\d+|\/p\/[\w.-]+\/\d+/;
+
+  // Get mount path from DOM
+  function getMountPath() {
+    // Look for data-mount-path on reader container or header
+    const container = document.querySelector(
+      "[data-mount-path]",
+    );
+    return container ? container.dataset.mountPath : "/activitypub";
+  }
+
+  // Check if a link should be intercepted
+  function shouldInterceptLink(link) {
+    const href = link.getAttribute("href");
+    if (!href) return null;
+
+    const classes = link.className || "";
+
+    // Mention links → profile view
+    if (classes.includes("mention")) {
+      return { type: "profile", url: href };
+    }
+
+    // AP object URL patterns → post detail view
+    if (AP_URL_PATTERN.test(href)) {
+      return { type: "post", url: href };
+    }
+
+    return null;
+  }
+
+  // Handle link click
+  function handleLinkClick(event) {
+    const link = event.target.closest("a");
+    if (!link) return;
+
+    // Only intercept links inside post content
+    const contentDiv = link.closest(".ap-card__content");
+    if (!contentDiv) return;
+
+    const interception = shouldInterceptLink(link);
+    if (!interception) return;
+
+    // Prevent default navigation
+    event.preventDefault();
+
+    const mountPath = getMountPath();
+    const encodedUrl = encodeURIComponent(interception.url);
+
+    if (interception.type === "profile") {
+      window.location.href = `${mountPath}/admin/reader/profile?url=${encodedUrl}`;
+    } else if (interception.type === "post") {
+      window.location.href = `${mountPath}/admin/reader/post?url=${encodedUrl}`;
+    }
+  }
+
+  // Initialize on DOM ready
+  function init() {
+    // Use event delegation on timeline container
+    const timeline = document.querySelector(".ap-timeline");
+    if (timeline) {
+      timeline.addEventListener("click", handleLinkClick);
+    }
+
+    // Also set up on post detail view
+    const postDetail = document.querySelector(".ap-post-detail");
+    if (postDetail) {
+      postDetail.addEventListener("click", handleLinkClick);
+    }
+  }
+
+  // Run on DOMContentLoaded or immediately if already loaded
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", init);
+  } else {
+    init();
+  }
+})();

package/assets/reader.css

@@ -746,6 +746,37 @@
    Notifications
    ========================================================================== */
 
+/* Notifications Toolbar */
+.ap-notifications__toolbar {
+  display: flex;
+  gap: var(--space-s);
+  margin-bottom: var(--space-m);
+}
+
+.ap-notifications__btn {
+  background: var(--color-offset);
+  border: var(--border-width-thin) solid var(--color-outline);
+  border-radius: var(--border-radius-small);
+  color: var(--color-on-background);
+  cursor: pointer;
+  font-size: var(--font-size-s);
+  padding: var(--space-xs) var(--space-m);
+  transition: all 0.2s ease;
+}
+
+.ap-notifications__btn:hover {
+  background: var(--color-offset-variant);
+  border-color: var(--color-outline-variant);
+}
+
+.ap-notifications__btn--danger {
+  color: var(--color-red45);
+}
+
+.ap-notifications__btn--danger:hover {
+  border-color: var(--color-red45);
+}
+
 .ap-notification {
   align-items: flex-start;
   background: var(--color-offset);
@@ -754,6 +785,7 @@
   display: flex;
   gap: var(--space-s);
   padding: var(--space-m);
+  position: relative;
 }
 
 .ap-notification--unread {
@@ -803,6 +835,29 @@
   font-size: var(--font-size-xs);
 }
 
+.ap-notification__dismiss {
+  position: absolute;
+  right: var(--space-xs);
+  top: var(--space-xs);
+}
+
+.ap-notification__dismiss-btn {
+  background: transparent;
+  border: 0;
+  border-radius: var(--border-radius-small);
+  color: var(--color-on-offset);
+  cursor: pointer;
+  font-size: var(--font-size-m);
+  line-height: 1;
+  padding: 2px 6px;
+  transition: all 0.2s ease;
+}
+
+.ap-notification__dismiss-btn:hover {
+  background: var(--color-offset-variant);
+  color: var(--color-red45);
+}
+
 /* ==========================================================================
    Remote Profile
    ========================================================================== */

package/index.js

@@ -12,11 +12,15 @@ import { dashboardController } from "./lib/controllers/dashboard.js";
 import {
   readerController,
   notificationsController,
+  markAllNotificationsReadController,
+  clearAllNotificationsController,
+  deleteNotificationController,
   composeController,
   submitComposeController,
   remoteProfileController,
   followController,
   unfollowController,
+  postDetailController,
 } from "./lib/controllers/reader.js";
 import {
   likeController,
@@ -78,6 +82,7 @@ const defaults = {
   parallelWorkers: 5,
   actorType: "Person",
   timelineRetention: 1000,
+  notificationRetentionDays: 30,
 };
 
 export default class ActivityPubEndpoint {
@@ -188,6 +193,9 @@ export default class ActivityPubEndpoint {
     router.get("/", dashboardController(mp));
     router.get("/admin/reader", readerController(mp));
     router.get("/admin/reader/notifications", notificationsController(mp));
+    router.post("/admin/reader/notifications/mark-read", markAllNotificationsReadController(mp));
+    router.post("/admin/reader/notifications/clear", clearAllNotificationsController(mp));
+    router.post("/admin/reader/notifications/delete", deleteNotificationController(mp));
     router.get("/admin/reader/compose", composeController(mp, this));
     router.post("/admin/reader/compose", submitComposeController(mp, this));
     router.post("/admin/reader/like", likeController(mp, this));
@@ -195,6 +203,7 @@ export default class ActivityPubEndpoint {
     router.post("/admin/reader/boost", boostController(mp, this));
     router.post("/admin/reader/unboost", unboostController(mp, this));
     router.get("/admin/reader/profile", remoteProfileController(mp, this));
+    router.get("/admin/reader/post", postDetailController(mp, this));
     router.post("/admin/reader/follow", followController(mp, this));
     router.post("/admin/reader/unfollow", unfollowController(mp, this));
     router.get("/admin/reader/moderation", moderationController(mp));
@@ -833,6 +842,15 @@ export default class ActivityPubEndpoint {
       { background: true },
     );
 
+    // TTL index for notification cleanup
+    const notifRetention = this.options.notificationRetentionDays;
+    if (notifRetention > 0) {
+      this._collections.ap_notifications.createIndex(
+        { createdAt: 1 },
+        { expireAfterSeconds: notifRetention * 86_400 },
+      );
+    }
+
     this._collections.ap_muted.createIndex(
       { url: 1 },
       { unique: true, sparse: true, background: true },

package/lib/controllers/post-detail.js

@@ -0,0 +1,300 @@
+// Post detail controller — view individual AP posts/notes/articles
+import { Article, Note, Person, Service, Application } from "@fedify/fedify";
+import { getToken } from "../csrf.js";
+import { extractObjectData } from "../timeline-store.js";
+import { getCached, setCache } from "../lookup-cache.js";
+
+// Load parent posts (inReplyTo chain) up to maxDepth levels
+async function loadParentChain(ctx, documentLoader, timelineCol, parentUrl, maxDepth = 5) {
+  const parents = [];
+  let currentUrl = parentUrl;
+  let depth = 0;
+
+  while (currentUrl && depth < maxDepth) {
+    depth++;
+
+    // Check timeline first
+    let parent = timelineCol
+      ? await timelineCol.findOne({
+          $or: [{ uid: currentUrl }, { url: currentUrl }],
+        })
+      : null;
+
+    if (!parent) {
+      // Fetch via lookupObject
+      const cached = getCached(currentUrl);
+      let object = cached;
+
+      if (!object) {
+        try {
+          object = await ctx.lookupObject(new URL(currentUrl), {
+            documentLoader,
+          });
+          if (object) {
+            setCache(currentUrl, object);
+          }
+        } catch {
+          break; // Stop on error
+        }
+      }
+
+      if (!object || !(object instanceof Note || object instanceof Article)) {
+        break;
+      }
+
+      try {
+        parent = await extractObjectData(object);
+      } catch {
+        break;
+      }
+    }
+
+    if (parent) {
+      parents.unshift(parent); // Add to beginning (chronological order)
+      currentUrl = parent.inReplyTo; // Continue up the chain
+    } else {
+      break;
+    }
+  }
+
+  return parents;
+}
+
+// Load replies collection (best-effort)
+async function loadReplies(object, ctx, documentLoader, timelineCol, maxReplies = 10) {
+  const replies = [];
+
+  try {
+    const repliesCollection = await object.getReplies({ documentLoader });
+    if (!repliesCollection) return replies;
+
+    let items = [];
+    try {
+      items = await repliesCollection.getItems({ documentLoader });
+    } catch {
+      return replies;
+    }
+
+    for (const replyItem of items.slice(0, maxReplies)) {
+      try {
+        const replyUrl = replyItem.id?.href || replyItem.url?.href;
+        if (!replyUrl) continue;
+
+        // Check timeline first
+        let reply = timelineCol
+          ? await timelineCol.findOne({
+              $or: [{ uid: replyUrl }, { url: replyUrl }],
+            })
+          : null;
+
+        if (!reply) {
+          // Extract from the item we already have
+          if (replyItem instanceof Note || replyItem instanceof Article) {
+            reply = await extractObjectData(replyItem);
+          }
+        }
+
+        if (reply) {
+          replies.push(reply);
+        }
+      } catch {
+        continue; // Skip failed replies
+      }
+    }
+  } catch {
+    // getReplies() failed or not available
+  }
+
+  return replies;
+}
+
+// GET /admin/reader/post — Show post detail view
+export function postDetailController(mountPath, plugin) {
+  return async (request, response, next) => {
+    try {
+      const { application } = request.app.locals;
+      const objectUrl = request.query.url;
+
+      if (!objectUrl || typeof objectUrl !== "string") {
+        return response.status(400).render("error", {
+          title: "Error",
+          content: "Missing post URL",
+        });
+      }
+
+      // Validate URL format
+      try {
+        new URL(objectUrl);
+      } catch {
+        return response.status(400).render("error", {
+          title: "Error",
+          content: "Invalid post URL",
+        });
+      }
+
+      if (!plugin._federation) {
+        return response.status(503).render("error", {
+          title: "Error",
+          content: "Federation not initialized",
+        });
+      }
+
+      const timelineCol = application?.collections?.get("ap_timeline");
+      const interactionsCol =
+        application?.collections?.get("ap_interactions");
+
+      // Check local timeline first (optimization)
+      let timelineItem = null;
+      if (timelineCol) {
+        timelineItem = await timelineCol.findOne({
+          $or: [{ uid: objectUrl }, { url: objectUrl }],
+        });
+      }
+
+      let object = null;
+
+      if (!timelineItem) {
+        // Not in local timeline — fetch via lookupObject
+        const handle = plugin.options.actor.handle;
+        const ctx = plugin._federation.createContext(
+          new URL(plugin._publicationUrl),
+          { handle, publicationUrl: plugin._publicationUrl },
+        );
+
+        const documentLoader = await ctx.getDocumentLoader({
+          identifier: handle,
+        });
+
+        // Check cache first
+        const cached = getCached(objectUrl);
+        if (cached) {
+          object = cached;
+        } else {
+          try {
+            object = await ctx.lookupObject(new URL(objectUrl), {
+              documentLoader,
+            });
+            if (object) {
+              setCache(objectUrl, object);
+            }
+          } catch (error) {
+            console.warn(
+              `[post-detail] lookupObject failed for ${objectUrl}:`,
+              error.message,
+            );
+          }
+        }
+
+        if (!object) {
+          return response.status(404).render("activitypub-post-detail", {
+            title: response.locals.__("activitypub.reader.post.title"),
+            notFound: true, objectUrl, mountPath,
+            item: null, interactionMap: {}, csrfToken: null,
+            parentPosts: [], replyPosts: [],
+          });
+        }
+
+        // If it's an actor (Person, Service, Application), redirect to profile
+        if (
+          object instanceof Person ||
+          object instanceof Service ||
+          object instanceof Application
+        ) {
+          return response.redirect(
+            `${mountPath}/admin/reader/profile?url=${encodeURIComponent(objectUrl)}`,
+          );
+        }
+
+        // Extract timeline item data from the Fedify object
+        if (object instanceof Note || object instanceof Article) {
+          try {
+            timelineItem = await extractObjectData(object);
+          } catch (error) {
+            console.error(`[post-detail] extractObjectData failed for ${objectUrl}:`, error.message);
+            return response.status(500).render("error", {
+              title: "Error",
+              content: "Failed to extract post data",
+            });
+          }
+        } else {
+          return response.status(400).render("error", {
+            title: "Error",
+            content: "Object is not a viewable post (must be Note or Article)",
+          });
+        }
+      }
+
+      // Build interaction state for this post
+      const interactionMap = {};
+      if (interactionsCol && timelineItem) {
+        const uid = timelineItem.uid;
+        const displayUrl = timelineItem.url || timelineItem.originalUrl;
+
+        const interactions = await interactionsCol
+          .find({
+            $or: [{ objectUrl: uid }, { objectUrl: displayUrl }],
+          })
+          .toArray();
+
+        for (const interaction of interactions) {
+          const key = uid;
+          if (!interactionMap[key]) {
+            interactionMap[key] = {};
+          }
+          interactionMap[key][interaction.type] = true;
+        }
+      }
+
+      // Load thread (parent chain + replies) with timeout
+      let parentPosts = [];
+      let replyPosts = [];
+
+      try {
+        const handle = plugin.options.actor.handle;
+        const ctx = plugin._federation.createContext(
+          new URL(plugin._publicationUrl),
+          { handle, publicationUrl: plugin._publicationUrl },
+        );
+
+        const documentLoader = await ctx.getDocumentLoader({
+          identifier: handle,
+        });
+
+        const threadPromise = Promise.all([
+          // Load parent chain
+          timelineItem.inReplyTo
+            ? loadParentChain(ctx, documentLoader, timelineCol, timelineItem.inReplyTo)
+            : Promise.resolve([]),
+          // Load replies (if object is available)
+          object
+            ? loadReplies(object, ctx, documentLoader, timelineCol)
+            : Promise.resolve([]),
+        ]);
+
+        // 15-second timeout for thread loading
+        const timeout = new Promise((resolve) =>
+          setTimeout(() => resolve([[], []]), 15000),
+        );
+
+        [parentPosts, replyPosts] = await Promise.race([threadPromise, timeout]);
+      } catch (error) {
+        console.error("[post-detail] Thread loading failed:", error.message);
+        // Continue with empty thread
+      }
+
+      const csrfToken = getToken(request.session);
+
+      response.render("activitypub-post-detail", {
+        title: response.locals.__("activitypub.reader.post.title"),
+        item: timelineItem,
+        interactionMap,
+        csrfToken,
+        mountPath,
+        parentPosts,
+        replyPosts,
+      });
+    } catch (error) {
+      next(error);
+    }
+  };
+}