@rmdes/indiekit-endpoint-activitypub 2.0.27 → 2.0.29

package/lib/fedidb.js

@@ -0,0 +1,195 @@
+/**
+ * FediDB API client with MongoDB caching.
+ *
+ * Wraps https://api.fedidb.org/v1/ endpoints:
+ * - /servers?q=... — search known fediverse instances
+ * - /popular-accounts — top accounts by follower count
+ *
+ * Responses are cached in ap_kv to avoid hitting the API on every keystroke.
+ * Cache TTL: 24 hours for both datasets.
+ */
+
+const API_BASE = "https://api.fedidb.org/v1";
+const FETCH_TIMEOUT_MS = 8_000;
+const CACHE_TTL_MS = 24 * 60 * 60 * 1000; // 24 hours
+
+/**
+ * Fetch with timeout helper.
+ * @param {string} url
+ * @returns {Promise<Response>}
+ */
+async function fetchWithTimeout(url) {
+  const controller = new AbortController();
+  const timeoutId = setTimeout(() => controller.abort(), FETCH_TIMEOUT_MS);
+  try {
+    const res = await fetch(url, {
+      headers: { Accept: "application/json" },
+      signal: controller.signal,
+    });
+    return res;
+  } finally {
+    clearTimeout(timeoutId);
+  }
+}
+
+/**
+ * Get cached data from ap_kv, or null if expired/missing.
+ * @param {object} kvCollection - MongoDB ap_kv collection
+ * @param {string} cacheKey - Key to look up
+ * @returns {Promise<object|null>} Cached data or null
+ */
+async function getFromCache(kvCollection, cacheKey) {
+  if (!kvCollection) return null;
+  try {
+    const doc = await kvCollection.findOne({ _id: cacheKey });
+    if (!doc?.value?.data) return null;
+    const age = Date.now() - (doc.value.cachedAt || 0);
+    if (age > CACHE_TTL_MS) return null;
+    return doc.value.data;
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Write data to ap_kv cache.
+ * @param {object} kvCollection - MongoDB ap_kv collection
+ * @param {string} cacheKey - Key to store under
+ * @param {object} data - Data to cache
+ */
+async function writeToCache(kvCollection, cacheKey, data) {
+  if (!kvCollection) return;
+  try {
+    await kvCollection.updateOne(
+      { _id: cacheKey },
+      { $set: { value: { data, cachedAt: Date.now() } } },
+      { upsert: true }
+    );
+  } catch {
+    // Cache write failure is non-critical
+  }
+}
+
+/**
+ * Search FediDB for instances matching a query.
+ * Returns a flat array of { domain, software, description, mau, openRegistration }.
+ *
+ * Results are cached per normalized query for 24 hours.
+ *
+ * @param {object} kvCollection - MongoDB ap_kv collection
+ * @param {string} query - Search term (e.g. "mast")
+ * @param {number} [limit=10] - Max results
+ * @returns {Promise<Array>}
+ */
+export async function searchInstances(kvCollection, query, limit = 10) {
+  const q = (query || "").trim().toLowerCase();
+  if (!q) return [];
+
+  const cacheKey = `fedidb:instances:${q}:${limit}`;
+  const cached = await getFromCache(kvCollection, cacheKey);
+  if (cached) return cached;
+
+  try {
+    const url = `${API_BASE}/servers?q=${encodeURIComponent(q)}&limit=${limit}`;
+    const res = await fetchWithTimeout(url);
+    if (!res.ok) return [];
+
+    const json = await res.json();
+    const servers = json.data || [];
+
+    const results = servers.map((s) => ({
+      domain: s.domain,
+      software: s.software?.name || "Unknown",
+      description: s.description || "",
+      mau: s.stats?.monthly_active_users || 0,
+      userCount: s.stats?.user_count || 0,
+      openRegistration: s.open_registration || false,
+    }));
+
+    await writeToCache(kvCollection, cacheKey, results);
+    return results;
+  } catch {
+    return [];
+  }
+}
+
+/**
+ * Check if a remote instance supports unauthenticated public timeline access.
+ * Makes a lightweight HEAD-like request (limit=1) to the Mastodon public timeline API.
+ *
+ * Cached per domain for 24 hours.
+ *
+ * @param {object} kvCollection - MongoDB ap_kv collection
+ * @param {string} domain - Instance hostname
+ * @returns {Promise<{ supported: boolean, error: string|null }>}
+ */
+export async function checkInstanceTimeline(kvCollection, domain) {
+  const cacheKey = `fedidb:timeline-check:${domain}`;
+  const cached = await getFromCache(kvCollection, cacheKey);
+  if (cached) return cached;
+
+  try {
+    const url = `https://${domain}/api/v1/timelines/public?local=true&limit=1`;
+    const res = await fetchWithTimeout(url);
+
+    let result;
+    if (res.ok) {
+      result = { supported: true, error: null };
+    } else {
+      let errorMsg = `HTTP ${res.status}`;
+      try {
+        const body = await res.json();
+        if (body.error) errorMsg = body.error;
+      } catch {
+        // Can't parse body
+      }
+      result = { supported: false, error: errorMsg };
+    }
+
+    await writeToCache(kvCollection, cacheKey, result);
+    return result;
+  } catch {
+    return { supported: false, error: "Connection failed" };
+  }
+}
+
+/**
+ * Fetch popular fediverse accounts from FediDB.
+ * Returns a flat array of { username, name, domain, handle, url, avatar, followers, bio }.
+ *
+ * Cached for 24 hours (single cache entry).
+ *
+ * @param {object} kvCollection - MongoDB ap_kv collection
+ * @param {number} [limit=50] - Max accounts to fetch
+ * @returns {Promise<Array>}
+ */
+export async function getPopularAccounts(kvCollection, limit = 50) {
+  const cacheKey = `fedidb:popular-accounts:${limit}`;
+  const cached = await getFromCache(kvCollection, cacheKey);
+  if (cached) return cached;
+
+  try {
+    const url = `${API_BASE}/popular-accounts?limit=${limit}`;
+    const res = await fetchWithTimeout(url);
+    if (!res.ok) return [];
+
+    const json = await res.json();
+    const accounts = json.data || [];
+
+    const results = accounts.map((a) => ({
+      username: a.username || "",
+      name: a.name || a.username || "",
+      domain: a.domain || "",
+      handle: `@${a.username}@${a.domain}`,
+      url: a.account_url || "",
+      avatar: a.avatar_url || "",
+      followers: a.followers_count || 0,
+      bio: (a.bio || "").replace(/<[^>]*>/g, "").slice(0, 120),
+    }));
+
+    await writeToCache(kvCollection, cacheKey, results);
+    return results;
+  } catch {
+    return [];
+  }
+}

package/lib/inbox-listeners.js

@@ -28,6 +28,7 @@ import { sanitizeContent, extractActorInfo, extractObjectData } from "./timeline
 import { addTimelineItem, deleteTimelineItem, updateTimelineItem } from "./storage/timeline.js";
 import { addNotification } from "./storage/notifications.js";
 import { fetchAndStorePreviews } from "./og-unfurl.js";
+import { getFollowedTags } from "./storage/followed-tags.js";
 
 /**
  * Register all inbox listeners on a federation's inbox chain.
@@ -492,6 +493,32 @@ export function registerInboxListeners(inboxChain, options) {
           // Log extraction errors but don't fail the entire handler
           console.error("Failed to store timeline item:", error);
         }
+      } else if (collections.ap_followed_tags) {
+        // Not a followed account — check if the post's hashtags match any followed tags
+        // so tagged posts from across the fediverse appear in the timeline
+        try {
+          const objectTags = Array.isArray(object.tag) ? object.tag : (object.tag ? [object.tag] : []);
+          const postHashtags = objectTags
+            .filter((t) => t.type === "Hashtag" && t.name)
+            .map((t) => t.name.toString().replace(/^#/, "").toLowerCase());
+
+          if (postHashtags.length > 0) {
+            const followedTags = await getFollowedTags(collections);
+            const followedSet = new Set(followedTags.map((t) => t.toLowerCase()));
+            const hasMatchingTag = postHashtags.some((tag) => followedSet.has(tag));
+
+            if (hasMatchingTag) {
+              const timelineItem = await extractObjectData(object, {
+                actorFallback: actorObj,
+                documentLoader: authLoader,
+              });
+              await addTimelineItem(collections, timelineItem);
+            }
+          }
+        } catch (error) {
+          // Non-critical — don't fail the handler
+          console.error("[inbox] Followed tag check failed:", error.message);
+        }
       }
 
     })

package/lib/migrations/separate-mentions.js

@@ -0,0 +1,88 @@
+/**
+ * Migration: separate-mentions
+ *
+ * Moves @-prefixed entries from category[] to a new mentions[] array in all
+ * ap_timeline documents. Tracked in ap_kv for idempotency.
+ *
+ * Before: category: ["@user@instance", "hashtag", "@another@host"]
+ * After:  category: ["hashtag"]
+ *         mentions: [{ name: "user@instance", url: "" }, { name: "another@host", url: "" }]
+ *
+ * Note: URLs are empty for legacy items since we can't reconstruct them.
+ * New items will have URLs populated by the fixed extractObjectData() (Task 1).
+ */
+
+const MIGRATION_KEY = "migration:separate-mentions";
+
+/**
+ * Run the separate-mentions migration (idempotent)
+ * @param {object} collections - MongoDB collections
+ * @returns {Promise<{ skipped: boolean, updated: number }>}
+ */
+export async function runSeparateMentionsMigration(collections) {
+  const { ap_kv, ap_timeline } = collections;
+
+  // Check if already completed
+  const state = await ap_kv.findOne({ _id: MIGRATION_KEY });
+  if (state?.value?.completed) {
+    return { skipped: true, updated: 0 };
+  }
+
+  // Find all documents where category[] contains @-prefixed entries
+  const docs = await ap_timeline
+    .find({ category: { $regex: /^@/ } })
+    .toArray();
+
+  if (docs.length === 0) {
+    // No docs to migrate — mark complete immediately
+    await ap_kv.updateOne(
+      { _id: MIGRATION_KEY },
+      { $set: { value: { completed: true, date: new Date().toISOString(), updated: 0 } } },
+      { upsert: true }
+    );
+    return { skipped: false, updated: 0 };
+  }
+
+  // Build bulk operations
+  const ops = docs.map((doc) => {
+    const mentions = (doc.mentions || []).slice(); // preserve any existing mentions
+    const newCategory = [];
+
+    for (const entry of doc.category || []) {
+      if (typeof entry === "string" && entry.startsWith("@")) {
+        // Move to mentions[] — strip leading @ to match timeline-store convention
+        const strippedName = entry.slice(1);
+        const alreadyPresent = mentions.some((m) => m.name === strippedName);
+        if (!alreadyPresent) {
+          mentions.push({ name: strippedName, url: "" });
+        }
+      } else {
+        newCategory.push(entry);
+      }
+    }
+
+    return {
+      updateOne: {
+        filter: { _id: doc._id },
+        update: {
+          $set: {
+            category: newCategory,
+            mentions
+          }
+        }
+      }
+    };
+  });
+
+  const result = await ap_timeline.bulkWrite(ops, { ordered: false });
+  const updated = result.modifiedCount || 0;
+
+  // Mark migration complete
+  await ap_kv.updateOne(
+    { _id: MIGRATION_KEY },
+    { $set: { value: { completed: true, date: new Date().toISOString(), updated } } },
+    { upsert: true }
+  );
+
+  return { skipped: false, updated };
+}

package/lib/storage/followed-tags.js

@@ -0,0 +1,65 @@
+/**
+ * Followed hashtag storage operations
+ * @module storage/followed-tags
+ */
+
+/**
+ * Get all followed hashtags
+ * @param {object} collections - MongoDB collections
+ * @returns {Promise<string[]>} Array of tag strings (lowercase)
+ */
+export async function getFollowedTags(collections) {
+  const { ap_followed_tags } = collections;
+  if (!ap_followed_tags) return [];
+  const docs = await ap_followed_tags.find({}).sort({ followedAt: -1 }).toArray();
+  return docs.map((d) => d.tag);
+}
+
+/**
+ * Follow a hashtag
+ * @param {object} collections - MongoDB collections
+ * @param {string} tag - Hashtag string (without # prefix)
+ * @returns {Promise<boolean>} true if newly added, false if already following
+ */
+export async function followTag(collections, tag) {
+  const { ap_followed_tags } = collections;
+  const normalizedTag = tag.toLowerCase().trim().replace(/^#/, "");
+  if (!normalizedTag) return false;
+
+  const result = await ap_followed_tags.updateOne(
+    { tag: normalizedTag },
+    { $setOnInsert: { tag: normalizedTag, followedAt: new Date().toISOString() } },
+    { upsert: true }
+  );
+
+  return result.upsertedCount > 0;
+}
+
+/**
+ * Unfollow a hashtag
+ * @param {object} collections - MongoDB collections
+ * @param {string} tag - Hashtag string (without # prefix)
+ * @returns {Promise<boolean>} true if removed, false if not found
+ */
+export async function unfollowTag(collections, tag) {
+  const { ap_followed_tags } = collections;
+  const normalizedTag = tag.toLowerCase().trim().replace(/^#/, "");
+  if (!normalizedTag) return false;
+
+  const result = await ap_followed_tags.deleteOne({ tag: normalizedTag });
+  return result.deletedCount > 0;
+}
+
+/**
+ * Check if a specific hashtag is followed
+ * @param {object} collections - MongoDB collections
+ * @param {string} tag - Hashtag string (without # prefix)
+ * @returns {Promise<boolean>}
+ */
+export async function isTagFollowed(collections, tag) {
+  const { ap_followed_tags } = collections;
+  if (!ap_followed_tags) return false;
+  const normalizedTag = tag.toLowerCase().trim().replace(/^#/, "");
+  const doc = await ap_followed_tags.findOne({ tag: normalizedTag });
+  return !!doc;
+}

package/lib/storage/timeline.js

@@ -16,13 +16,14 @@
  * @param {boolean} item.sensitive - Sensitive content flag
  * @param {Date} item.published - Published date (kept as Date for sort queries)
  * @param {object} item.author - { name, url, photo, handle }
- * @param {string[]} item.category - Tags/categories
+ * @param {string[]} item.category - Hashtag strings (# prefix stripped)
+ * @param {Array<{name: string, url: string}>} [item.mentions] - @mention entries with actor URLs
  * @param {string[]} item.photo - Photo URLs
  * @param {string[]} item.video - Video URLs
  * @param {string[]} item.audio - Audio URLs
  * @param {string} [item.inReplyTo] - Parent post URL
  * @param {object} [item.boostedBy] - { name, url, photo, handle } for boosts
- * @param {Date} [item.boostedAt] - Boost timestamp
+ * @param {string} [item.boostedAt] - Boost timestamp (ISO string)
  * @param {string} [item.originalUrl] - Original post URL for boosts
  * @param {Array<{url: string, title: string, description: string, image: string, favicon: string, domain: string, fetchedAt: string}>} [item.linkPreviews] - OpenGraph link previews for external links in content
  * @param {string} item.createdAt - ISO string creation timestamp
@@ -59,6 +60,7 @@ export async function addTimelineItem(collections, item) {
  * @param {number} [options.limit=20] - Items per page
  * @param {string} [options.type] - Filter by type
  * @param {string} [options.authorUrl] - Filter by author URL
+ * @param {string} [options.tag] - Filter by hashtag (case-insensitive exact match)
  * @returns {Promise<object>} { items, before, after }
  */
 export async function getTimelineItems(collections, options = {}) {
@@ -94,6 +96,17 @@ export async function getTimelineItems(collections, options = {}) {
     query["author.url"] = options.authorUrl;
   }
 
+  // Tag filter — case-insensitive exact match against the category[] array
+  // Escape regex special chars to prevent injection
+  if (options.tag) {
+    if (typeof options.tag !== "string") {
+      throw new Error("Invalid tag");
+    }
+
+    const escapedTag = options.tag.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+    query.category = { $regex: new RegExp(`^${escapedTag}$`, "i") };
+  }
+
   // Cursor pagination — published is stored as ISO string, so compare
   // as strings (lexicographic ISO 8601 comparison is correct for dates)
   if (options.before) {

package/lib/timeline-store.js

@@ -3,7 +3,7 @@
  * @module timeline-store
  */
 
-import { Article } from "@fedify/fedify/vocab";
+import { Article, Hashtag, Mention } from "@fedify/fedify/vocab";
 import sanitizeHtml from "sanitize-html";
 
 /**
@@ -93,7 +93,9 @@ export async function extractActorInfo(actor, options = {}) {
  * @param {Date} [options.boostedAt] - Boost timestamp
  * @param {object} [options.actorFallback] - Fedify actor to use when object.getAttributedTo() fails
  * @param {object} [options.documentLoader] - Authenticated DocumentLoader for Secure Mode servers
- * @returns {Promise<object>} Timeline item data
+ * @returns {Promise<object>} Timeline item data with:
+ *   - category: string[] — hashtag names (stripped of # prefix)
+ *   - mentions: Array<{name: string, url: string}> — @mention entries with actor URLs
  */
 export async function extractObjectData(object, options = {}) {
   if (!object) {
@@ -185,15 +187,25 @@ export async function extractObjectData(object, options = {}) {
     }
   }
 
-  // Extract tags/categories — Fedify uses async getTags()
+  // Extract tags — Fedify uses async getTags() which returns typed vocab objects.
+  // Hashtag → category[] (plain strings, # prefix stripped)
+  // Mention → mentions[] ({ name, url } objects for profile linking)
   const category = [];
+  const mentions = [];
   try {
     if (typeof object.getTags === "function") {
       const tags = await object.getTags(loaderOpts);
       for await (const tag of tags) {
-        if (tag.name) {
-          const tagName = tag.name.toString().replace(/^#/, "");
+        if (tag instanceof Hashtag) {
+          const tagName = tag.name?.toString().replace(/^#/, "") || "";
           if (tagName) category.push(tagName);
+        } else if (tag instanceof Mention) {
+          // Strip leading @ from name (Fedify Mention names start with @)
+          const rawName = tag.name?.toString() || "";
+          const mentionName = rawName.startsWith("@") ? rawName.slice(1) : rawName;
+          // tag.href is a URL object — use .href to get the string
+          const mentionUrl = tag.href?.href || "";
+          if (mentionName) mentions.push({ name: mentionName, url: mentionUrl });
         }
       }
     }
@@ -243,6 +255,7 @@ export async function extractObjectData(object, options = {}) {
     published,
     author,
     category,
+    mentions,
     photo,
     video,
     audio,

package/locales/en.json

@@ -185,10 +185,6 @@
         "boosts": "Boosts",
         "media": "Media"
       },
-      "pagination": {
-        "newer": "← Newer",
-        "older": "Older →"
-      },
       "empty": "Your timeline is empty. Follow some accounts to see their posts here.",
       "boosted": "boosted",
       "replyingTo": "Replying to",
@@ -224,10 +220,41 @@
         "label": "Look up a fediverse post or account",
         "button": "Look up",
         "notFoundTitle": "Not found",
-        "notFound": "Could not find this post or account. The URL may be invalid, the server may be unavailable, or the content may have been deleted."
+        "notFound": "Could not find this post or account. The URL may be invalid, the server may be unavailable, or the content may have been deleted.",
+        "followersLabel": "followers"
       },
       "linkPreview": {
         "label": "Link preview"
+      },
+      "explore": {
+        "title": "Explore",
+        "description": "Browse public timelines from remote Mastodon-compatible instances.",
+        "instancePlaceholder": "Enter an instance hostname, e.g. mastodon.social",
+        "browse": "Browse",
+        "local": "Local",
+        "federated": "Federated",
+        "loadError": "Could not load timeline from this instance. It may be unavailable or not support the Mastodon API.",
+        "timeout": "Request timed out. The instance may be slow or unavailable.",
+        "noResults": "No posts found on this instance's public timeline.",
+        "invalidInstance": "Invalid instance hostname. Please enter a valid domain name.",
+        "mauLabel": "MAU",
+        "timelineSupported": "Public timeline available",
+        "timelineUnsupported": "Public timeline not available"
+      },
+      "tagTimeline": {
+        "postsTagged": "%d posts",
+        "postsTagged_plural": "%d posts",
+        "noPosts": "No posts found with #%s in your timeline.",
+        "followTag": "Follow hashtag",
+        "unfollowTag": "Unfollow hashtag",
+        "following": "Following"
+      },
+      "pagination": {
+        "newer": "← Newer",
+        "older": "Older →",
+        "loadMore": "Load more",
+        "loading": "Loading…",
+        "noMore": "You're all caught up."
       }
     },
     "myProfile": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rmdes/indiekit-endpoint-activitypub",
-  "version": "2.0.27",
+  "version": "2.0.29",
   "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-explore.njk

@@ -0,0 +1,126 @@
+{% extends "layouts/ap-reader.njk" %}
+
+{% from "prose/macro.njk" import prose with context %}
+
+{% block readercontent %}
+  {# Page header #}
+  <header class="ap-explore-header">
+    <h2 class="ap-explore-header__title">{{ __("activitypub.reader.explore.title") }}</h2>
+    <p class="ap-explore-header__desc">{{ __("activitypub.reader.explore.description") }}</p>
+  </header>
+
+  {# Instance form with autocomplete #}
+  <form action="{{ mountPath }}/admin/reader/explore" method="get" class="ap-explore-form"
+    x-data="apInstanceSearch('{{ mountPath }}')"
+    @submit="onSubmit">
+    <div class="ap-explore-form__row">
+      <div class="ap-explore-autocomplete">
+        <input
+          type="text"
+          name="instance"
+          value="{{ instance }}"
+          class="ap-explore-form__input"
+          placeholder="{{ __('activitypub.reader.explore.instancePlaceholder') }}"
+          aria-label="{{ __('activitypub.reader.explore.instancePlaceholder') }}"
+          autocomplete="off"
+          required
+          x-model="query"
+          @input.debounce.300ms="search()"
+          @keydown.arrow-down.prevent="highlightNext()"
+          @keydown.arrow-up.prevent="highlightPrev()"
+          @keydown.enter="selectHighlighted($event)"
+          @keydown.escape="close()"
+          @focus="showResults && suggestions.length > 0 ? showResults = true : null"
+          @click.away="close()"
+          x-ref="input">
+
+        {# Autocomplete dropdown #}
+        <div class="ap-explore-autocomplete__dropdown" x-show="showResults && suggestions.length > 0" x-cloak>
+          <template x-for="(item, index) in suggestions" :key="item.domain">
+            <button type="button"
+              class="ap-explore-autocomplete__item"
+              :class="{ 'ap-explore-autocomplete__item--highlighted': index === highlighted }"
+              @click="selectItem(item)"
+              @mouseenter="highlighted = index">
+              <span class="ap-explore-autocomplete__domain" x-text="item.domain"></span>
+              <span class="ap-explore-autocomplete__meta">
+                <span class="ap-explore-autocomplete__software" x-text="item.software"></span>
+                <template x-if="item.mau > 0">
+                  <span class="ap-explore-autocomplete__mau" x-text="item.mau.toLocaleString() + ' {{ __("activitypub.reader.explore.mauLabel") }}'"></span>
+                </template>
+              </span>
+              <span class="ap-explore-autocomplete__status" x-show="item._timelineStatus !== undefined">
+                <template x-if="item._timelineStatus === 'checking'">
+                  <span class="ap-explore-autocomplete__checking">⏳</span>
+                </template>
+                <template x-if="item._timelineStatus === true">
+                  <span class="ap-explore-autocomplete__supported" title="{{ __('activitypub.reader.explore.timelineSupported') }}">✅</span>
+                </template>
+                <template x-if="item._timelineStatus === false">
+                  <span class="ap-explore-autocomplete__unsupported" title="{{ __('activitypub.reader.explore.timelineUnsupported') }}">❌</span>
+                </template>
+              </span>
+            </button>
+          </template>
+        </div>
+      </div>
+
+      <div class="ap-explore-form__scope">
+        <label class="ap-explore-form__scope-label">
+          <input type="radio" name="scope" value="local"
+            {% if scope == "local" %}checked{% endif %}>
+          {{ __("activitypub.reader.explore.local") }}
+        </label>
+        <label class="ap-explore-form__scope-label">
+          <input type="radio" name="scope" value="federated"
+            {% if scope == "federated" %}checked{% endif %}>
+          {{ __("activitypub.reader.explore.federated") }}
+        </label>
+      </div>
+      <button type="submit" class="ap-explore-form__btn">
+        {{ __("activitypub.reader.explore.browse") }}
+      </button>
+    </div>
+  </form>
+
+  {# Error state #}
+  {% if error %}
+    <div class="ap-explore-error">{{ error }}</div>
+  {% endif %}
+
+  {# Results #}
+  {% if instance and not error %}
+    {% if items.length > 0 %}
+      <div class="ap-timeline ap-explore-timeline"
+        id="ap-explore-timeline"
+        data-instance="{{ instance }}"
+        data-scope="{{ scope }}"
+        data-mount-path="{{ mountPath }}"
+        data-max-id="{{ maxId if maxId else '' }}">
+        {% for item in items %}
+          {% include "partials/ap-item-card.njk" %}
+        {% endfor %}
+      </div>
+
+      {# Infinite scroll for explore page #}
+      {% if maxId %}
+        <div class="ap-load-more"
+          id="ap-explore-load-more"
+          data-max-id="{{ maxId }}"
+          data-instance="{{ instance }}"
+          data-scope="{{ scope }}"
+          x-data="apExploreScroll()"
+          x-init="init()">
+          <div class="ap-load-more__sentinel" x-ref="sentinel"></div>
+          <button class="ap-load-more__btn" @click="loadMore()" :disabled="loading" x-show="!done">
+            <span x-show="!loading">{{ __("activitypub.reader.pagination.loadMore") }}</span>
+            <span x-show="loading">{{ __("activitypub.reader.pagination.loading") }}</span>
+          </button>
+          <p class="ap-load-more__done" x-show="done" x-cloak>{{ __("activitypub.reader.pagination.noMore") }}</p>
+        </div>
+      {% endif %}
+    {% elif instance %}
+      {{ prose({ text: __("activitypub.reader.explore.noResults") }) }}
+    {% endif %}
+  {% endif %}
+{% endblock %}