@rmdes/indiekit-endpoint-activitypub 2.0.35 → 2.1.0

package/assets/reader.css

@@ -752,6 +752,12 @@
   color: var(--color-green50);
 }
 
+.ap-card__action--save.ap-card__action--active {
+  background: #4a9eff22;
+  border-color: #4a9eff;
+  color: #4a9eff;
+}
+
 .ap-card__action:disabled {
   cursor: wait;
   opacity: 0.6;
@@ -2054,189 +2060,294 @@
   font-weight: 600;
 }
 
-/* ---------- Explore: deck toggle button ---------- */
+/* ==========================================================================
+   Explore: Tabbed Design
+   ========================================================================== */
 
-.ap-explore-deck-toggle {
-  display: flex;
-  justify-content: flex-end;
-  margin-bottom: var(--space-s);
+/* Tab bar wrapper: enables position:relative for fade gradient overlay */
+.ap-explore-tabs-container {
+  position: relative;
+}
+
+/* Tab bar with right-edge fade to indicate horizontal overflow */
+.ap-explore-tabs-nav {
+  padding-right: var(--space-l);
+  position: relative;
+}
+
+.ap-explore-tabs-nav::after {
+  background: linear-gradient(to right, transparent, var(--color-background, #fff) 80%);
+  content: "";
+  height: 100%;
+  pointer-events: none;
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 40px;
+}
+
+/* Tab wrapper: holds tab button + reorder/close controls together */
+.ap-tab-wrapper {
+  align-items: stretch;
+  display: inline-flex;
+  position: relative;
 }
 
-.ap-explore-deck-toggle__btn {
+/* Show controls on hover or when the tab is active */
+.ap-tab-controls {
   align-items: center;
+  display: none;
+  gap: 1px;
+}
+
+.ap-tab-wrapper:hover .ap-tab-controls,
+.ap-tab-wrapper:focus-within .ap-tab-controls {
+  display: flex;
+}
+
+/* Individual control buttons (↑ ↓ ×) */
+.ap-tab-control {
   background: none;
-  border: var(--border-width-thin) solid var(--color-outline);
-  border-radius: var(--border-radius-small);
-  color: var(--color-on-background);
+  border: none;
+  color: var(--color-on-offset);
   cursor: pointer;
-  display: inline-flex;
+  font-size: var(--font-size-xs);
+  line-height: 1;
+  padding: 2px 4px;
+}
+
+.ap-tab-control:hover {
+  color: var(--color-on-background);
+}
+
+.ap-tab-control:disabled {
+  cursor: default;
+  opacity: 0.3;
+}
+
+.ap-tab-control--remove {
+  color: var(--color-on-offset);
   font-size: var(--font-size-s);
-  gap: var(--space-2xs);
-  padding: var(--space-xs) var(--space-s);
-  transition: background 0.15s, color 0.15s, border-color 0.15s;
 }
 
-.ap-explore-deck-toggle__btn:hover:not(:disabled) {
-  background: var(--color-offset);
+.ap-tab-control--remove:hover {
+  color: var(--color-red45);
 }
 
-.ap-explore-deck-toggle__btn--active {
-  background: var(--color-accent5);
-  border-color: var(--color-accent5);
-  color: var(--color-on-accent, #fff);
+/* Truncate long domain names in tab labels */
+.ap-tab__label {
+  display: inline-block;
+  max-width: 150px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-.ap-explore-deck-toggle__btn--active:hover:not(:disabled) {
-  background: var(--color-accent45);
-  border-color: var(--color-accent45);
+/* Scope badges on instance tabs */
+.ap-tab__badge {
+  border-radius: 3px;
+  font-size: 0.65em;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+  margin-left: var(--space-xs);
+  padding: 1px 4px;
+  text-transform: uppercase;
+  vertical-align: middle;
 }
 
-.ap-explore-deck-toggle__btn:disabled {
-  cursor: not-allowed;
-  opacity: 0.5;
+.ap-tab__badge--local {
+  background: color-mix(in srgb, var(--color-blue40, #2563eb) 15%, transparent);
+  color: var(--color-blue40, #2563eb);
 }
 
-/* ---------- Deck grid layout ---------- */
+.ap-tab__badge--federated {
+  background: color-mix(in srgb, var(--color-purple45, #7c3aed) 15%, transparent);
+  color: var(--color-purple45, #7c3aed);
+}
 
-.ap-deck-grid {
-  display: grid;
-  gap: var(--space-m);
-  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
-  margin-top: var(--space-m);
-  min-width: 0;
+/* +# button for adding hashtag tabs */
+.ap-tab--add {
+  font-family: monospace;
+  font-weight: 700;
+  letter-spacing: -0.05em;
 }
 
-/* ---------- Deck column ---------- */
+/* Inline hashtag form that appears when +# is clicked */
+.ap-tab-add-hashtag {
+  align-items: center;
+  display: inline-flex;
+  gap: var(--space-xs);
+}
 
-.ap-deck-column {
-  background: var(--color-offset);
+.ap-tab-hashtag-form {
+  align-items: center;
+  display: flex;
+  gap: var(--space-xs);
+}
+
+.ap-tab-hashtag-form__prefix {
+  color: var(--color-on-offset);
+  font-weight: 600;
+}
+
+.ap-tab-hashtag-form__input {
   border: var(--border-width-thin) solid var(--color-outline);
   border-radius: var(--border-radius-small);
-  display: flex;
-  flex-direction: column;
-  max-height: calc(100dvh - 220px);
-  min-height: 200px;
-  min-width: 0;
-  overflow: hidden;
+  font-family: inherit;
+  font-size: var(--font-size-s);
+  padding: 2px var(--space-s);
+  width: 8em;
 }
 
-.ap-deck-column__header {
+.ap-tab-hashtag-form__input:focus {
+  border-color: var(--color-primary);
+  outline: 2px solid var(--color-primary);
+  outline-offset: -1px;
+}
+
+.ap-tab-hashtag-form__btn {
+  background: var(--color-primary);
+  border: none;
+  border-radius: var(--border-radius-small);
+  color: var(--color-on-primary);
+  cursor: pointer;
+  font-family: inherit;
+  font-size: var(--font-size-s);
+  padding: 2px var(--space-s);
+  white-space: nowrap;
+}
+
+.ap-tab-hashtag-form__btn:hover {
+  opacity: 0.85;
+}
+
+/* "Pin as tab" button in search results area */
+.ap-explore-pin-bar {
+  margin-bottom: var(--space-s);
+}
+
+.ap-explore-pin-btn {
+  background: none;
+  border: var(--border-width-thin) solid var(--color-primary);
+  border-radius: var(--border-radius-small);
+  color: var(--color-primary);
+  cursor: pointer;
+  font-family: inherit;
+  font-size: var(--font-size-s);
+  padding: var(--space-xs) var(--space-m);
+}
+
+.ap-explore-pin-btn:hover {
+  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
+}
+
+.ap-explore-pin-btn:disabled {
+  cursor: default;
+  opacity: 0.6;
+}
+
+/* Hashtag form row inside the search form */
+.ap-explore-form__hashtag-row {
   align-items: center;
-  background: var(--color-background);
-  border-bottom: var(--border-width-thin) solid var(--color-outline);
   display: flex;
-  flex-shrink: 0;
+  flex-wrap: wrap;
   gap: var(--space-xs);
-  padding: var(--space-xs) var(--space-s);
+  margin-top: var(--space-s);
 }
 
-.ap-deck-column__domain {
+.ap-explore-form__hashtag-label {
+  color: var(--color-on-offset);
   font-size: var(--font-size-s);
-  font-weight: 600;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.ap-deck-column__scope-badge {
-  border-radius: var(--border-radius-small);
-  flex-shrink: 0;
-  font-size: var(--font-size-xs);
+.ap-explore-form__hashtag-prefix {
+  color: var(--color-on-offset);
   font-weight: 600;
-  padding: 2px var(--space-xs);
-  text-transform: uppercase;
 }
 
-.ap-deck-column__scope-badge--local {
-  background: var(--color-blue10, #dbeafe);
-  color: var(--color-blue50, #1e40af);
+.ap-explore-form__hashtag-hint {
+  color: var(--color-on-offset);
+  font-size: var(--font-size-xs);
+  flex-basis: 100%;
+}
+
+.ap-explore-form__input--hashtag {
+  max-width: 200px;
+  width: auto;
 }
 
-.ap-deck-column__scope-badge--federated {
-  background: var(--color-purple10, #ede9fe);
-  color: var(--color-purple50, #5b21b6);
+/* Tab panel containers */
+.ap-explore-instance-panel,
+.ap-explore-hashtag-panel {
+  min-height: 120px;
 }
 
-.ap-deck-column__remove {
-  background: none;
-  border: none;
+/* Loading state */
+.ap-explore-tab-loading {
+  align-items: center;
   color: var(--color-on-offset);
-  cursor: pointer;
-  flex-shrink: 0;
-  font-size: 1.2rem;
-  line-height: 1;
-  margin-left: auto;
-  padding: 0 2px;
+  display: flex;
+  justify-content: center;
+  padding: var(--space-xl);
 }
 
-.ap-deck-column__remove:hover {
-  color: var(--color-red45);
+.ap-explore-tab-loading--more {
+  padding-block: var(--space-m);
 }
 
-.ap-deck-column__body {
-  flex: 1;
-  min-height: 0;
-  overflow-y: auto;
-  padding: var(--space-xs);
+.ap-explore-tab-loading__text {
+  font-size: var(--font-size-s);
 }
 
-.ap-deck-column__loading,
-.ap-deck-column__loading-more,
-.ap-deck-column__error,
-.ap-deck-column__empty,
-.ap-deck-column__done {
-  color: var(--color-on-offset);
+/* Error state */
+.ap-explore-tab-error {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-s);
+  padding: var(--space-xl);
+}
+
+.ap-explore-tab-error__message {
+  color: var(--color-red45);
   font-size: var(--font-size-s);
-  padding: var(--space-s);
-  text-align: center;
+  margin: 0;
 }
 
-.ap-deck-column__retry {
+.ap-explore-tab-error__retry {
   background: none;
-  border: var(--border-width-thin) solid var(--color-outline);
+  border: 1px solid var(--color-accent);
   border-radius: var(--border-radius-small);
-  color: var(--color-on-background);
+  color: var(--color-accent);
   cursor: pointer;
   font-size: var(--font-size-s);
-  margin-top: var(--space-xs);
   padding: var(--space-xs) var(--space-s);
 }
 
-.ap-deck-column__retry:hover {
-  background: var(--color-offset);
+.ap-explore-tab-error__retry:hover {
+  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
 }
 
-/* Cards inside deck columns are more compact */
-.ap-deck-column__items .ap-item-card {
+/* Empty state */
+.ap-explore-tab-empty {
+  color: var(--color-on-offset);
   font-size: var(--font-size-s);
-}
-
-/* ---------- Deck empty state ---------- */
-
-.ap-deck-empty {
-  margin-top: var(--space-xl);
+  padding: var(--space-xl);
   text-align: center;
 }
 
-.ap-deck-empty p {
-  color: var(--color-on-offset);
-  font-size: var(--font-size-s);
-  margin-bottom: var(--space-s);
+/* Infinite scroll sentinel — zero height, invisible */
+.ap-tab-sentinel {
+  height: 1px;
+  visibility: hidden;
 }
 
-.ap-deck-empty__link {
+/* Hashtag tab sources info line */
+.ap-hashtag-sources {
+  color: var(--color-on-offset);
   font-size: var(--font-size-s);
+  margin: 0;
+  padding: var(--space-s) 0 var(--space-xs);
 }
 
-/* ---------- Deck responsive ---------- */
-
-@media (max-width: 767px) {
-  .ap-deck-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .ap-deck-column {
-    max-height: 60vh;
-  }
-}

package/index.js

@@ -70,10 +70,12 @@ import {
 } from "./lib/controllers/explore.js";
 import { followTagController, unfollowTagController } from "./lib/controllers/follow-tag.js";
 import {
-  listDecksController,
-  addDeckController,
-  removeDeckController,
-} from "./lib/controllers/decks.js";
+  listTabsController,
+  addTabController,
+  removeTabController,
+  reorderTabsController,
+} from "./lib/controllers/tabs.js";
+import { hashtagExploreApiController } from "./lib/controllers/hashtag-explore.js";
 import { publicProfileController } from "./lib/controllers/public-profile.js";
 import { authorizeInteractionController } from "./lib/controllers/authorize-interaction.js";
 import { myProfileController } from "./lib/controllers/my-profile.js";
@@ -238,12 +240,14 @@ export default class ActivityPubEndpoint {
     router.get("/admin/reader/api/timeline", apiTimelineController(mp));
     router.get("/admin/reader/explore", exploreController(mp));
     router.get("/admin/reader/api/explore", exploreApiController(mp));
+    router.get("/admin/reader/api/explore/hashtag", hashtagExploreApiController(mp));
     router.get("/admin/reader/api/instances", instanceSearchApiController(mp));
     router.get("/admin/reader/api/instance-check", instanceCheckApiController(mp));
     router.get("/admin/reader/api/popular-accounts", popularAccountsApiController(mp));
-    router.get("/admin/reader/api/decks", listDecksController(mp));
-    router.post("/admin/reader/api/decks", addDeckController(mp));
-    router.post("/admin/reader/api/decks/remove", removeDeckController(mp));
+    router.get("/admin/reader/api/tabs", listTabsController(mp));
+    router.post("/admin/reader/api/tabs", addTabController(mp));
+    router.post("/admin/reader/api/tabs/remove", removeTabController(mp));
+    router.patch("/admin/reader/api/tabs/reorder", reorderTabsController(mp));
     router.post("/admin/reader/follow-tag", followTagController(mp));
     router.post("/admin/reader/unfollow-tag", unfollowTagController(mp));
     router.get("/admin/reader/notifications", notificationsController(mp));
@@ -884,8 +888,8 @@ export default class ActivityPubEndpoint {
     Indiekit.addCollection("ap_interactions");
     Indiekit.addCollection("ap_notes");
     Indiekit.addCollection("ap_followed_tags");
-    // Deck collections
-    Indiekit.addCollection("ap_decks");
+    // Explore tab collections
+    Indiekit.addCollection("ap_explore_tabs");
 
     // Store collection references (posts resolved lazily)
     const indiekitCollections = Indiekit.collections;
@@ -906,8 +910,8 @@ export default class ActivityPubEndpoint {
       ap_interactions: indiekitCollections.get("ap_interactions"),
       ap_notes: indiekitCollections.get("ap_notes"),
       ap_followed_tags: indiekitCollections.get("ap_followed_tags"),
-      // Deck collections
-      ap_decks: indiekitCollections.get("ap_decks"),
+      // Explore tab collections
+      ap_explore_tabs: indiekitCollections.get("ap_explore_tabs"),
       get posts() {
         return indiekitCollections.get("posts");
       },
@@ -1032,11 +1036,19 @@ export default class ActivityPubEndpoint {
         { background: true },
       );
 
-      // Deck index — compound unique ensures same instance can appear at most once per scope
-      this._collections.ap_decks.createIndex(
-        { domain: 1, scope: 1 },
+      // Explore tab indexes
+      // Compound unique on (type, domain, scope, hashtag) prevents duplicate tabs.
+      // ALL insertions must explicitly set all four fields (unused fields = null)
+      // because MongoDB treats missing fields differently from null in unique indexes.
+      this._collections.ap_explore_tabs.createIndex(
+        { type: 1, domain: 1, scope: 1, hashtag: 1 },
         { unique: true, background: true },
       );
+      // Order index for efficient sorting of tab bar
+      this._collections.ap_explore_tabs.createIndex(
+        { order: 1 },
+        { background: true },
+      );
     } catch {
       // Index creation failed — collections not yet available.
       // Indexes already exist from previous startups; non-fatal.

package/lib/controllers/explore-utils.js

@@ -0,0 +1,122 @@
+/**
+ * Shared utilities for explore controllers.
+ *
+ * Extracted to break the circular dependency between explore.js and tabs.js:
+ *   - explore.js needs validateHashtag (was in tabs.js)
+ *   - tabs.js needs validateInstance (was in explore.js)
+ *   - hashtag-explore.js needs mapMastodonStatusToItem (was duplicated)
+ */
+
+import sanitizeHtml from "sanitize-html";
+import { sanitizeContent } from "../timeline-store.js";
+
+/**
+ * Validate the instance parameter to prevent SSRF.
+ * Only allows hostnames — no IPs, no localhost, no port numbers.
+ * @param {string} instance - Raw instance parameter from query string
+ * @returns {string|null} Validated hostname or null
+ */
+export function validateInstance(instance) {
+  if (!instance || typeof instance !== "string") return null;
+
+  try {
+    const url = new URL(`https://${instance.trim()}`);
+    const hostname = url.hostname;
+    if (
+      hostname === "localhost" ||
+      hostname === "127.0.0.1" ||
+      hostname === "0.0.0.0" ||
+      hostname === "::1" ||
+      hostname.startsWith("192.168.") ||
+      hostname.startsWith("10.") ||
+      hostname.startsWith("169.254.") ||
+      /^172\.(1[6-9]|2\d|3[01])\./.test(hostname) ||
+      /^[0-9]{1,3}(\.[0-9]{1,3}){3}$/.test(hostname) ||
+      hostname.includes("[")
+    ) {
+      return null;
+    }
+
+    return hostname;
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Validates a hashtag value.
+ * Returns the cleaned hashtag (leading # stripped) or null if invalid.
+ *
+ * Rules match Mastodon's hashtag character rules:
+ *   - Alphanumeric + underscore only (\w+)
+ *   - 1–100 characters after stripping leading #
+ */
+export function validateHashtag(raw) {
+  if (typeof raw !== "string") return null;
+  const cleaned = raw.replace(/^#+/, "");
+  if (!cleaned || cleaned.length > 100) return null;
+  if (!/^[\w]+$/.test(cleaned)) return null;
+  return cleaned;
+}
+
+/**
+ * Map a Mastodon API status object to our timeline item format.
+ * @param {object} status - Mastodon API status
+ * @param {string} instance - Instance hostname (for handle construction)
+ * @returns {object} Timeline item compatible with ap-item-card.njk
+ */
+export function mapMastodonStatusToItem(status, instance) {
+  const account = status.account || {};
+  const acct = account.acct || "";
+  const handle = acct.includes("@") ? `@${acct}` : `@${acct}@${instance}`;
+
+  const mentions = (status.mentions || []).map((m) => ({
+    name: m.acct.includes("@") ? m.acct : `${m.acct}@${instance}`,
+    url: m.url || "",
+  }));
+
+  const category = (status.tags || []).map((t) => t.name || "");
+
+  const photo = [];
+  const video = [];
+  const audio = [];
+  for (const att of status.media_attachments || []) {
+    const url = att.url || att.remote_url || "";
+    if (!url) continue;
+    if (att.type === "image" || att.type === "gifv") {
+      photo.push(url);
+    } else if (att.type === "video") {
+      video.push(url);
+    } else if (att.type === "audio") {
+      audio.push(url);
+    }
+  }
+
+  return {
+    uid: status.url || status.uri || "",
+    url: status.url || status.uri || "",
+    type: "note",
+    name: "",
+    content: {
+      text: (status.content || "").replace(/<[^>]*>/g, ""),
+      html: sanitizeContent(status.content || ""),
+    },
+    summary: status.spoiler_text || "",
+    sensitive: status.sensitive || false,
+    published: status.created_at || new Date().toISOString(),
+    author: {
+      name: sanitizeHtml(account.display_name || account.username || "Unknown", { allowedTags: [], allowedAttributes: {} }),
+      url: account.url || "",
+      photo: account.avatar || account.avatar_static || "",
+      handle,
+    },
+    category,
+    mentions,
+    photo,
+    video,
+    audio,
+    inReplyTo: status.in_reply_to_id ? `https://${instance}/web/statuses/${status.in_reply_to_id}` : "",
+    createdAt: new Date().toISOString(),
+    _explore: true,
+  };
+}