@rmdes/indiekit-endpoint-activitypub 2.0.27 → 2.0.29

package/assets/reader-autocomplete.js

@@ -0,0 +1,214 @@
+/**
+ * Autocomplete — Alpine.js components for FediDB-powered search suggestions.
+ * Registers `apInstanceSearch` for the explore page instance input.
+ */
+
+document.addEventListener("alpine:init", () => {
+  // eslint-disable-next-line no-undef
+  Alpine.data("apInstanceSearch", (mountPath) => ({
+    query: "",
+    suggestions: [],
+    showResults: false,
+    highlighted: -1,
+    abortController: null,
+
+    init() {
+      // Pick up server-rendered value (when returning to page with instance already loaded)
+      const input = this.$refs.input;
+      if (input && input.getAttribute("value")) {
+        this.query = input.getAttribute("value");
+      }
+    },
+
+    // Debounced search triggered by x-on:input
+    async search() {
+      const q = (this.query || "").trim();
+      if (q.length < 2) {
+        this.suggestions = [];
+        this.showResults = false;
+        return;
+      }
+
+      // Cancel any in-flight request
+      if (this.abortController) {
+        this.abortController.abort();
+      }
+      this.abortController = new AbortController();
+
+      try {
+        const res = await fetch(
+          `${mountPath}/admin/reader/api/instances?q=${encodeURIComponent(q)}`,
+          { signal: this.abortController.signal }
+        );
+        if (!res.ok) return;
+
+        const data = await res.json();
+        // Mark _timelineStatus as undefined (not yet checked)
+        this.suggestions = data.map((item) => ({
+          ...item,
+          _timelineStatus: undefined,
+        }));
+        this.highlighted = -1;
+        this.showResults = this.suggestions.length > 0;
+
+        // Fire timeline support checks in parallel (non-blocking)
+        this.checkTimelineSupport();
+      } catch (err) {
+        if (err.name !== "AbortError") {
+          this.suggestions = [];
+          this.showResults = false;
+        }
+      }
+    },
+
+    // Check timeline support for each suggestion (background, non-blocking)
+    async checkTimelineSupport() {
+      const items = [...this.suggestions];
+      for (const item of items) {
+        // Only check if still in the current suggestions list
+        const match = this.suggestions.find((s) => s.domain === item.domain);
+        if (!match) continue;
+
+        match._timelineStatus = "checking";
+
+        try {
+          const res = await fetch(
+            `${mountPath}/admin/reader/api/instance-check?domain=${encodeURIComponent(item.domain)}`
+          );
+          if (!res.ok) continue;
+
+          const data = await res.json();
+          // Update the item in the current suggestions (if still present)
+          const current = this.suggestions.find((s) => s.domain === item.domain);
+          if (current) {
+            current._timelineStatus = data.supported;
+          }
+        } catch {
+          const current = this.suggestions.find((s) => s.domain === item.domain);
+          if (current) {
+            current._timelineStatus = false;
+          }
+        }
+      }
+    },
+
+    selectItem(item) {
+      this.query = item.domain;
+      this.showResults = false;
+      this.suggestions = [];
+      this.$refs.input.focus();
+    },
+
+    close() {
+      this.showResults = false;
+      this.highlighted = -1;
+    },
+
+    highlightNext() {
+      if (!this.showResults || this.suggestions.length === 0) return;
+      this.highlighted = (this.highlighted + 1) % this.suggestions.length;
+    },
+
+    highlightPrev() {
+      if (!this.showResults || this.suggestions.length === 0) return;
+      this.highlighted =
+        this.highlighted <= 0
+          ? this.suggestions.length - 1
+          : this.highlighted - 1;
+    },
+
+    selectHighlighted(event) {
+      if (this.showResults && this.highlighted >= 0 && this.suggestions[this.highlighted]) {
+        event.preventDefault();
+        this.selectItem(this.suggestions[this.highlighted]);
+      }
+      // Otherwise let the form submit naturally
+    },
+
+    onSubmit() {
+      this.close();
+    },
+  }));
+
+  // eslint-disable-next-line no-undef
+  Alpine.data("apPopularAccounts", (mountPath) => ({
+    query: "",
+    suggestions: [],
+    allAccounts: [],
+    showResults: false,
+    highlighted: -1,
+    loaded: false,
+
+    // Load popular accounts on first focus (lazy)
+    async loadAccounts() {
+      if (this.loaded) return;
+      this.loaded = true;
+
+      try {
+        const res = await fetch(`${mountPath}/admin/reader/api/popular-accounts`);
+        if (!res.ok) return;
+        this.allAccounts = await res.json();
+      } catch {
+        // Non-critical
+      }
+    },
+
+    // Filter locally from preloaded list
+    filterAccounts() {
+      const q = (this.query || "").trim().toLowerCase();
+      if (q.length < 1 || this.allAccounts.length === 0) {
+        this.suggestions = [];
+        this.showResults = false;
+        return;
+      }
+
+      this.suggestions = this.allAccounts
+        .filter(
+          (a) =>
+            a.username.toLowerCase().includes(q) ||
+            a.name.toLowerCase().includes(q) ||
+            a.domain.toLowerCase().includes(q) ||
+            a.handle.toLowerCase().includes(q)
+        )
+        .slice(0, 8);
+      this.highlighted = -1;
+      this.showResults = this.suggestions.length > 0;
+    },
+
+    selectItem(item) {
+      this.query = item.handle;
+      this.showResults = false;
+      this.suggestions = [];
+      this.$refs.input.focus();
+    },
+
+    close() {
+      this.showResults = false;
+      this.highlighted = -1;
+    },
+
+    highlightNext() {
+      if (!this.showResults || this.suggestions.length === 0) return;
+      this.highlighted = (this.highlighted + 1) % this.suggestions.length;
+    },
+
+    highlightPrev() {
+      if (!this.showResults || this.suggestions.length === 0) return;
+      this.highlighted =
+        this.highlighted <= 0
+          ? this.suggestions.length - 1
+          : this.highlighted - 1;
+    },
+
+    selectHighlighted(event) {
+      if (this.showResults && this.highlighted >= 0 && this.suggestions[this.highlighted]) {
+        event.preventDefault();
+        this.selectItem(this.suggestions[this.highlighted]);
+      }
+    },
+
+    onSubmit() {
+      this.close();
+    },
+  }));
+});

package/assets/reader-infinite-scroll.js

@@ -0,0 +1,183 @@
+/**
+ * Infinite scroll — AlpineJS component for AJAX load-more on the timeline
+ * Registers the `apInfiniteScroll` Alpine data component.
+ */
+
+document.addEventListener("alpine:init", () => {
+  // eslint-disable-next-line no-undef
+  Alpine.data("apExploreScroll", () => ({
+    loading: false,
+    done: false,
+    maxId: null,
+    instance: "",
+    scope: "local",
+    observer: null,
+
+    init() {
+      const el = this.$el;
+      this.maxId = el.dataset.maxId || null;
+      this.instance = el.dataset.instance || "";
+      this.scope = el.dataset.scope || "local";
+
+      if (!this.maxId) {
+        this.done = true;
+        return;
+      }
+
+      this.observer = new IntersectionObserver(
+        (entries) => {
+          for (const entry of entries) {
+            if (entry.isIntersecting && !this.loading && !this.done) {
+              this.loadMore();
+            }
+          }
+        },
+        { rootMargin: "200px" }
+      );
+
+      if (this.$refs.sentinel) {
+        this.observer.observe(this.$refs.sentinel);
+      }
+    },
+
+    async loadMore() {
+      if (this.loading || this.done || !this.maxId) return;
+
+      this.loading = true;
+
+      const timeline = document.getElementById("ap-explore-timeline");
+      const mountPath = timeline ? timeline.dataset.mountPath : "";
+
+      const params = new URLSearchParams({
+        instance: this.instance,
+        scope: this.scope,
+        max_id: this.maxId,
+      });
+
+      try {
+        const res = await fetch(
+          `${mountPath}/admin/reader/api/explore?${params.toString()}`,
+          { headers: { Accept: "application/json" } }
+        );
+
+        if (!res.ok) throw new Error(`HTTP ${res.status}`);
+
+        const data = await res.json();
+
+        if (data.html && timeline) {
+          timeline.insertAdjacentHTML("beforeend", data.html);
+        }
+
+        if (data.maxId) {
+          this.maxId = data.maxId;
+        } else {
+          this.done = true;
+          if (this.observer) this.observer.disconnect();
+        }
+      } catch (err) {
+        console.error("[ap-explore-scroll] load failed:", err.message);
+      } finally {
+        this.loading = false;
+      }
+    },
+
+    destroy() {
+      if (this.observer) this.observer.disconnect();
+    },
+  }));
+
+  // eslint-disable-next-line no-undef
+  Alpine.data("apInfiniteScroll", () => ({
+    loading: false,
+    done: false,
+    before: null,
+    tab: "",
+    tag: "",
+    observer: null,
+
+    init() {
+      const el = this.$el;
+      this.before = el.dataset.before || null;
+      this.tab = el.dataset.tab || "";
+      this.tag = el.dataset.tag || "";
+
+      // Hide the no-JS pagination fallback now that JS is active
+      const paginationEl =
+        document.getElementById("ap-reader-pagination") ||
+        document.getElementById("ap-tag-pagination");
+      if (paginationEl) {
+        paginationEl.style.display = "none";
+      }
+
+      if (!this.before) {
+        this.done = true;
+        return;
+      }
+
+      // Set up IntersectionObserver to auto-load when sentinel comes into view
+      this.observer = new IntersectionObserver(
+        (entries) => {
+          for (const entry of entries) {
+            if (entry.isIntersecting && !this.loading && !this.done) {
+              this.loadMore();
+            }
+          }
+        },
+        { rootMargin: "200px" }
+      );
+
+      if (this.$refs.sentinel) {
+        this.observer.observe(this.$refs.sentinel);
+      }
+    },
+
+    async loadMore() {
+      if (this.loading || this.done || !this.before) return;
+
+      this.loading = true;
+
+      const timeline = document.getElementById("ap-timeline");
+      const mountPath = timeline ? timeline.dataset.mountPath : "";
+
+      const params = new URLSearchParams({ before: this.before });
+      if (this.tab) params.set("tab", this.tab);
+      if (this.tag) params.set("tag", this.tag);
+
+      try {
+        const res = await fetch(
+          `${mountPath}/admin/reader/api/timeline?${params.toString()}`,
+          { headers: { Accept: "application/json" } }
+        );
+
+        if (!res.ok) throw new Error(`HTTP ${res.status}`);
+
+        const data = await res.json();
+
+        if (data.html && timeline) {
+          // Append the returned pre-rendered HTML
+          timeline.insertAdjacentHTML("beforeend", data.html);
+        }
+
+        if (data.before) {
+          this.before = data.before;
+        } else {
+          // No more items
+          this.done = true;
+          if (this.observer) this.observer.disconnect();
+        }
+      } catch (err) {
+        console.error("[ap-infinite-scroll] load failed:", err.message);
+      } finally {
+        this.loading = false;
+      }
+    },
+
+    appendItems(/* detail */) {
+      // Custom event hook — not used in this implementation but kept for extensibility
+    },
+
+    destroy() {
+      if (this.observer) this.observer.disconnect();
+    },
+  }));
+});