@rmdes/indiekit-endpoint-webmention-io 1.1.2 → 1.2.0

package/index.js

@@ -74,6 +74,12 @@ export default class WebmentionEndpoint {
     // Block a domain (hides all mentions + adds to blocklist)
     protectedRouter.post("/block", dashboardController.blockDomainHandler);
 
+    // Quarantine a domain (hold future mentions, leave history visible)
+    protectedRouter.post(
+      "/quarantine",
+      dashboardController.quarantineDomainHandler,
+    );
+
     // Unblock a domain
     protectedRouter.post(
       "/blocklist/:domain/delete",

package/lib/controllers/dashboard.js

@@ -58,7 +58,11 @@ export const dashboardController = {
         perPage: limit,
       };
 
-      if (filter === "hidden") {
+      if (filter === "quarantine") {
+        // Held for review: stored, hidden, and waiting on a decision.
+        queryOptions.showHidden = true;
+        queryOptions.hiddenReason = "quarantine";
+      } else if (filter === "hidden") {
         queryOptions.showHidden = true;
       } else if (filter === "visible") {
         queryOptions.showHidden = false;
@@ -234,6 +238,51 @@ export const dashboardController = {
    * @param request
    * @param response
    */
+  /**
+   * POST /quarantine - hold a domain's future mentions for review
+   *
+   * Deliberately does not touch what is already stored: quarantine is for a
+   * domain the operator is unsure about, so the history stays visible while
+   * anything new waits for a decision. Promoting to a block later sweeps the
+   * whole history, because blockDomainHandler does.
+   * @type {import("express").RequestHandler}
+   */
+  async quarantineDomainHandler(request, response) {
+    const { application } = request.app.locals;
+
+    try {
+      const { domain, reason } = request.body;
+      if (!domain) {
+        return response.redirect(
+          application.webmentionEndpoint + "/blocklist?error=no-domain",
+        );
+      }
+
+      const database = application.getWebmentionDb();
+      const blockCollection = database.collection("webmentionBlocklist");
+      const target = normaliseDomain(domain) ?? domain;
+
+      await blockDomain(
+        blockCollection,
+        target,
+        reason || "unsure",
+        0,
+        "quarantined",
+      );
+
+      response.redirect(
+        application.webmentionEndpoint +
+          "/blocklist?quarantined=1&domain=" +
+          encodeURIComponent(target),
+      );
+    } catch (error) {
+      console.error("[Webmentions] Quarantine error:", error);
+      response.redirect(
+        application.webmentionEndpoint + "/blocklist?error=quarantine-failed",
+      );
+    }
+  },
+
   async privacyRemove(request, response) {
     const { application } = request.app.locals;
 

package/lib/storage/blocklist.js

@@ -29,6 +29,7 @@ export async function blockDomain(
   domain,
   reason = "spam",
   mentionsHidden = 0,
+  status = "blocked",
 ) {
   domain = normaliseDomain(domain) ?? domain;
 
@@ -36,6 +37,7 @@ export async function blockDomain(
     await collection.insertOne({
       domain,
       reason,
+      status,
       blockedAt: new Date().toISOString(),
       mentionsHidden,
     });
@@ -44,10 +46,12 @@ export async function blockDomain(
     // Duplicate key — domain already blocked
     if (error.code === 11_000) {
       // Update reason and count
+      // Re-applying an action to a listed domain also moves it between
+      // quarantine and block, which is how "promote to block" works.
       await collection.updateOne(
         { domain },
         {
-          $set: { reason },
+          $set: { reason, status },
           $inc: { mentionsHidden },
         },
       );
@@ -94,6 +98,36 @@ export async function isDomainBlocked(collection, domain) {
   return !!entry;
 }
 
+/**
+ * Split the list by what each entry actually enforces.
+ *
+ * The two differ in one respect, and it is the whole point of quarantine:
+ * a blocked domain has its stored mentions swept hidden on every cycle, a
+ * quarantined one never does. Incoming mentions are handled differently too —
+ * blocked are dropped, quarantined are stored hidden for review.
+ *
+ * Entries written before quarantine existed carry no status and count as
+ * blocked, so nothing needs migrating.
+ * @param {object} collection - MongoDB collection
+ * @returns {Promise<{blocked: Set<string>, quarantined: Set<string>}>} Sets
+ */
+export async function getModerationSets(collection) {
+  const entries = await collection
+    .find({}, { projection: { domain: 1, status: 1 } })
+    .toArray();
+
+  const blocked = new Set();
+  const quarantined = new Set();
+
+  for (const entry of entries) {
+    const domain = normaliseDomain(entry.domain) ?? entry.domain;
+    if (!domain) continue;
+    (entry.status === "quarantined" ? quarantined : blocked).add(domain);
+  }
+
+  return { blocked, quarantined };
+}
+
 /**
  * Get set of all blocked domains (for efficient sync filtering)
  * @param {object} collection - MongoDB collection

package/lib/storage/webmentions.js

@@ -2,7 +2,12 @@
  * Webmentions MongoDB storage
  */
 
-import { extractDomain, ensureISOString, sanitiseHtml } from "../utils.js";
+import {
+  extractDomain,
+  ensureISOString,
+  normaliseDomain,
+  sanitiseHtml,
+} from "../utils.js";
 
 /**
  * Ensure indexes exist
@@ -99,8 +104,17 @@ export function documentToJf2(doc) {
  * @param {object} item - JF2 entry
  * @returns {Promise<boolean>} true if inserted (new), false if updated
  */
-export async function upsertWebmention(collection, item) {
+export async function upsertWebmention(collection, item, options = {}) {
   const document = jf2ToDocument(item);
+
+  // A quarantined domain's mentions are kept rather than dropped, but arrive
+  // hidden so the operator can approve them one by one. $setOnInsert means an
+  // existing mention is never re-hidden by a later sync.
+  if (options.quarantined) {
+    document.hidden = true;
+    document.hiddenAt = new Date().toISOString();
+    document.hiddenReason = "quarantine";
+  }
   const result = await collection.updateOne(
     { wmId: document.wmId },
     {
@@ -121,6 +135,7 @@ export async function getWebmentions(collection, options = {}) {
   const {
     target,
     wmProperty,
+    hiddenReason,
     showHidden = false,
     page = 0,
     perPage = 20,
@@ -142,6 +157,11 @@ export async function getWebmentions(collection, options = {}) {
     query.wmProperty = wmProperty;
   }
 
+  // The review queue: mentions held because their domain is quarantined.
+  if (hiddenReason) {
+    query.hiddenReason = hiddenReason;
+  }
+
   const total = await collection.countDocuments(query);
   const items = await collection
     .find(query)
@@ -161,7 +181,12 @@ export async function getWebmentions(collection, options = {}) {
 export async function getWebmentionCounts(collection) {
   const total = await collection.countDocuments({});
   const hidden = await collection.countDocuments({ hidden: true });
-  return { total, hidden, visible: total - hidden };
+  // Quarantined mentions are a subset of hidden: held for a decision rather
+  // than hidden by a block.
+  const quarantined = await collection.countDocuments({
+    hiddenReason: "quarantine",
+  });
+  return { total, hidden, quarantined, visible: total - hidden };
 }
 
 /**
@@ -218,7 +243,7 @@ export async function unhideWebmention(collection, wmId) {
  */
 export async function hideByDomain(collection, domain, reason = "blocklist") {
   const result = await collection.updateMany(
-    { sourceDomain: domain, hidden: { $ne: true } },
+    { sourceDomain: normaliseDomain(domain) ?? domain, hidden: { $ne: true } },
     {
       $set: {
         hidden: true,
@@ -238,7 +263,7 @@ export async function hideByDomain(collection, domain, reason = "blocklist") {
  */
 export async function unhideByDomain(collection, domain) {
   const result = await collection.updateMany(
-    { sourceDomain: domain, hiddenReason: "blocklist" },
+    { sourceDomain: normaliseDomain(domain) ?? domain, hiddenReason: "blocklist" },
     { $set: { hidden: false, hiddenAt: null, hiddenReason: null } },
   );
   return result.modifiedCount;
@@ -251,7 +276,9 @@ export async function unhideByDomain(collection, domain) {
  * @returns {Promise<number>} Number deleted
  */
 export async function deleteByDomain(collection, domain) {
-  const result = await collection.deleteMany({ sourceDomain: domain });
+  const result = await collection.deleteMany({
+    sourceDomain: normaliseDomain(domain) ?? domain,
+  });
   return result.deletedCount;
 }
 

package/lib/sync.js

@@ -5,7 +5,7 @@
 import { discoverAuthorData } from "./hcard.js";
 import {
   ensureBlocklistIndexes,
-  getBlockedDomainSet,
+  getModerationSets,
 } from "./storage/blocklist.js";
 import {
   ensureIndexes,
@@ -25,6 +25,7 @@ let syncState = {
   lastError: null,
   mentionsAdded: 0,
   mentionsFiltered: 0,
+  mentionsQuarantined: 0,
 };
 
 /**
@@ -95,6 +96,7 @@ export async function runSync(dbOrIndiekit, options) {
   syncState.lastError = null;
   syncState.mentionsAdded = 0;
   syncState.mentionsFiltered = 0;
+  syncState.mentionsQuarantined = 0;
 
   try {
     const wmCollection = database.collection("webmentions");
@@ -107,7 +109,8 @@ export async function runSync(dbOrIndiekit, options) {
     const sinceId = await getMaxWmId(wmCollection);
 
     // Get blocked domains
-    const blockedDomains = await getBlockedDomainSet(blockCollection);
+    const { blocked: blockedDomains, quarantined: quarantinedDomains } =
+      await getModerationSets(blockCollection);
 
     // Enforce the blocklist over mentions already stored, not just incoming
     // ones. Blocking hid what was present at the time and nothing after, so a
@@ -146,9 +149,16 @@ export async function runSync(dbOrIndiekit, options) {
           continue;
         }
 
-        const isNew = await upsertWebmention(wmCollection, item);
+        // Quarantined domains are kept, not dropped: stored hidden so the
+        // operator can approve or promote to a block after looking.
+        const quarantined = Boolean(domain && quarantinedDomains.has(domain));
+
+        const isNew = await upsertWebmention(wmCollection, item, {
+          quarantined,
+        });
         if (isNew) {
           syncState.mentionsAdded++;
+          if (quarantined) syncState.mentionsQuarantined++;
         }
       }
 
@@ -169,12 +179,13 @@ export async function runSync(dbOrIndiekit, options) {
     syncState.syncing = false;
 
     console.log(
-      `[Webmentions] Sync complete: ${syncState.mentionsAdded} new, ${syncState.mentionsFiltered} filtered, ${enriched} enriched`,
+      `[Webmentions] Sync complete: ${syncState.mentionsAdded} new, ${syncState.mentionsFiltered} filtered, ${syncState.mentionsQuarantined} quarantined, ${enriched} enriched`,
     );
 
     return {
       mentionsAdded: syncState.mentionsAdded,
       mentionsFiltered: syncState.mentionsFiltered,
+      mentionsQuarantined: syncState.mentionsQuarantined,
       mentionsEnriched: enriched,
     };
   } catch (error) {
@@ -205,6 +216,7 @@ export async function runFullSync(dbOrIndiekit, options) {
   syncState.lastError = null;
   syncState.mentionsAdded = 0;
   syncState.mentionsFiltered = 0;
+  syncState.mentionsQuarantined = 0;
 
   try {
     const wmCollection = database.collection("webmentions");
@@ -219,8 +231,13 @@ export async function runFullSync(dbOrIndiekit, options) {
       `[Webmentions] Full sync: cleared ${deleted} existing mentions`,
     );
 
-    // Get blocked domains
-    const blockedDomains = await getBlockedDomainSet(blockCollection);
+    // Get blocked domains. A full sync has just deleted everything, so
+    // every mention it re-fetches counts as new — including those from a
+    // quarantined domain, which therefore come back held for review rather
+    // than visible. Failing closed is the safer reading: the operator asked
+    // for that domain to wait on a decision.
+    const { blocked: blockedDomains, quarantined: quarantinedDomains } =
+      await getModerationSets(blockCollection);
 
     // Fetch ALL pages from webmention.io (no sinceId)
     let page = 0;
@@ -243,9 +260,14 @@ export async function runFullSync(dbOrIndiekit, options) {
           continue;
         }
 
-        const isNew = await upsertWebmention(wmCollection, item);
+        const quarantined = Boolean(domain && quarantinedDomains.has(domain));
+
+        const isNew = await upsertWebmention(wmCollection, item, {
+          quarantined,
+        });
         if (isNew) {
           syncState.mentionsAdded++;
+          if (quarantined) syncState.mentionsQuarantined++;
         }
       }
 

package/locales/en.json

@@ -30,7 +30,8 @@
       "likes": "Likes",
       "replies": "Replies",
       "reposts": "Reposts",
-      "mentions": "Mentions"
+      "mentions": "Mentions",
+      "quarantine": "Held for review"
     },
     "actions": {
       "hide": "Hide",
@@ -64,12 +65,33 @@
       "removed": "mentions permanently deleted",
       "unhidden": "mentions restored",
       "mentionsHidden": "mentions hidden",
-      "blockedAt": "Blocked"
+      "blockedAt": "Blocked",
+      "statusLabel": "Status",
+      "statusBlocked": "Blocked",
+      "statusQuarantined": "Quarantined",
+      "howItWorks": "What each action does",
+      "howQuarantine": "Quarantine — mentions already published stay visible. Anything new from this domain is kept but held for review, so you can approve it or block the domain once you have seen it. Reversible.",
+      "howBlock": "Block — every mention from this domain is hidden, both those already stored and anything that arrives later. Nothing is deleted, so unblocking restores them. Reversible.",
+      "howPrivacy": "Privacy removal — every mention from this domain is deleted from the database and the domain is listed. This cannot be undone.",
+      "quarantine": {
+        "title": "Quarantine a domain",
+        "description": "For a domain you are unsure about. What it has already sent stays visible; what it sends next waits for your decision in the review queue.",
+        "button": "Quarantine domain",
+        "quarantined": "Domain quarantined. New mentions from it will be held for review.",
+        "promote": "Block",
+        "promoteConfirm": "Block %s? This also hides every mention it has already sent."
+      }
     },
     "counts": {
       "total": "total",
       "hidden": "hidden",
-      "visible": "visible"
+      "visible": "visible",
+      "quarantined": "held for review"
+    },
+    "review": {
+      "empty": "Nothing is waiting for review.",
+      "approve": "Approve",
+      "heldFrom": "Held because %s is quarantined"
     }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rmdes/indiekit-endpoint-webmention-io",
-  "version": "1.1.2",
+  "version": "1.2.0",
   "description": "Webmention moderation endpoint for Indiekit. Syncs webmentions from webmention.io into MongoDB with delete, block, and privacy removal capabilities.",
   "keywords": [
     "indiekit",

package/views/webmentions-blocklist.njk

@@ -1,178 +1,157 @@
 {% extends "document.njk" %}
 
 {% block content %}
+{# Only the table keeps local styles - the frontend has no table component.
+   Everything else uses the macros default.njk exposes. #}
 <style>
-  .bl-section {
-    background: var(--color-offset, #f5f5f5);
-    border-radius: var(--border-radius-small, 0.5rem);
-    padding: var(--space-m, 1.5rem);
-    margin-block-end: var(--space-m, 1.5rem);
-  }
-
-  .bl-section h2 {
-    font: var(--font-heading, bold 1.25rem/1.4 sans-serif);
-    margin-block-end: var(--space-xs, 0.5rem);
-  }
-
-  .bl-section__desc {
-    color: var(--color-on-offset, #666);
-    font: var(--font-body, 0.875rem/1.5 sans-serif);
-    margin-block-end: var(--space-s, 0.75rem);
-  }
-
-  .bl-form {
-    display: flex;
-    gap: var(--space-xs, 0.5rem);
-    align-items: flex-end;
-    flex-wrap: wrap;
-  }
-
-  .bl-form .field {
-    flex: 1;
-    min-width: 200px;
-  }
-
   .bl-table {
-    width: 100%;
     border-collapse: collapse;
-    font: var(--font-body, 0.875rem/1.5 sans-serif);
-  }
-
-  .bl-table th {
-    text-align: left;
-    font-weight: 600;
-    padding: var(--space-xs, 0.5rem);
-    border-block-end: 2px solid var(--color-outline-variant, #ddd);
+    inline-size: 100%;
+    margin-block-start: var(--space-s);
   }
 
+  .bl-table th,
   .bl-table td {
-    padding: var(--space-xs, 0.5rem);
-    border-block-end: 1px solid var(--color-outline-variant, #eee);
+    border-block-end: 1px solid var(--color-border);
+    padding: var(--space-2xs) var(--space-3xs);
+    text-align: start;
     vertical-align: middle;
   }
 
-  .bl-badge {
-    display: inline-block;
-    font: var(--font-caption, 0.6875rem/1.4 sans-serif);
-    padding: 0.125rem 0.375rem;
-    border-radius: var(--border-radius-small, 0.25rem);
-    background: var(--color-offset, #e9ecef);
-  }
-
-  .bl-badge--privacy {
-    background: var(--color-error-container, #f8d7da);
-    color: var(--color-error, #dc3545);
-  }
-
-  .bl-badge--spam {
-    background: var(--color-warning-container, #fff3cd);
-    color: var(--color-warning, #856404);
-  }
-
-  .bl-empty {
-    color: var(--color-on-offset, #666);
-    text-align: center;
-    padding: var(--space-m, 1rem);
-  }
-
-  .bl-success {
-    background: var(--color-success-container, #d4edda);
-    border: 1px solid var(--color-success, #28a745);
-    border-radius: var(--border-radius-small, 0.25rem);
-    padding: var(--space-s, 0.75rem);
-    margin-block-end: var(--space-m, 1rem);
-  }
-
-  .bl-back {
-    margin-block-end: var(--space-m, 1rem);
+  .bl-form {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-s);
+    align-items: flex-end;
+    margin-block-end: var(--space-l);
   }
 </style>
 
-<div class="bl-back">
-  <a href="{{ wmEndpoint }}">&larr; {{ __("webmention-io.title") }}</a>
-</div>
+{{ backLink({
+  href: wmEndpoint,
+  text: __("webmention-io.title")
+}) }}
 
-{# Flash messages #}
 {% if request.query.unblocked %}
-<div class="bl-success">
-  {{ __("webmention-io.blocklist.unblocked") }} — {{ request.query.unhidden or 0 }} {{ __("webmention-io.blocklist.unhidden") }}
-</div>
+  {{ notificationBanner({
+    type: "success",
+    text: __("webmention-io.blocklist.unblocked") + " — " + (request.query.unhidden or 0) + " " + __("webmention-io.blocklist.unhidden")
+  }) }}
+{% endif %}
+{% if request.query.blocked %}
+  {{ notificationBanner({ type: "success", text: __("webmention-io.blocklist.blocked") }) }}
+{% endif %}
+{% if request.query.quarantined %}
+  {{ notificationBanner({ type: "success", text: __("webmention-io.blocklist.quarantine.quarantined") }) }}
 {% endif %}
 {% if request.query.removed %}
-<div class="bl-success">
-  {{ request.query.count or 0 }} {{ __("webmention-io.blocklist.removed") }}
-</div>
+  {{ notificationBanner({
+    type: "success",
+    text: (request.query.count or 0) + " " + __("webmention-io.blocklist.removed")
+  }) }}
+{% endif %}
+{% if request.query.error %}
+  {{ notificationBanner({ type: "error", text: request.query.error }) }}
 {% endif %}
 
-{# Add to blocklist #}
-<section class="bl-section">
-  <h2>{{ __("webmention-io.blocklist.add") }}</h2>
-  <p class="bl-section__desc">{{ __("webmention-io.blocklist.description") }}</p>
-
-  <form method="post" action="{{ wmEndpoint }}/block" class="bl-form">
-    <div class="field">
-      <label class="label">{{ __("webmention-io.blocklist.domainLabel") }}</label>
-      <input type="text" name="domain" class="input" placeholder="{{ __("webmention-io.blocklist.domainPlaceholder") }}" required>
-    </div>
-    <button type="submit" class="button button--primary">{{ __("webmention-io.blocklist.blockButton") }}</button>
-  </form>
-</section>
-
-{# Privacy removal #}
-<section class="bl-section">
-  <h2>{{ __("webmention-io.blocklist.privacy.title") }}</h2>
-  <p class="bl-section__desc">{{ __("webmention-io.blocklist.privacy.description") }}</p>
-
-  <form method="post" action="{{ wmEndpoint }}/privacy-remove" class="bl-form"
-        onsubmit="return confirm('This will PERMANENTLY DELETE all webmentions from this domain and block it. This cannot be undone. Continue?')">
-    <div class="field">
-      <label class="label">{{ __("webmention-io.blocklist.privacy.domainLabel") }}</label>
-      <input type="text" name="domain" class="input" placeholder="{{ __("webmention-io.blocklist.domainPlaceholder") }}" required>
-    </div>
-    <button type="submit" class="button button--primary">{{ __("webmention-io.blocklist.privacy.removeButton") }}</button>
-  </form>
-</section>
-
-{# Blocklist table #}
-<section class="bl-section">
-  <h2>{{ __("webmention-io.blocklist.title") }} ({{ entries.length }})</h2>
-
-  {% if entries.length > 0 %}
-  <table class="bl-table">
-    <thead>
-      <tr>
-        <th>{{ __("webmention-io.blocklist.domainLabel") }}</th>
-        <th>{{ __("webmention-io.blocklist.reasonLabel") }}</th>
-        <th>{{ __("webmention-io.blocklist.mentionsHidden") }}</th>
-        <th>{{ __("webmention-io.blocklist.blockedAt") }}</th>
-        <th></th>
-      </tr>
-    </thead>
-    <tbody>
-      {% for entry in entries %}
-      <tr>
-        <td><strong>{{ entry.domain }}</strong></td>
-        <td>
-          <span class="bl-badge {% if entry.reason == 'privacy' %}bl-badge--privacy{% elif entry.reason == 'spam' %}bl-badge--spam{% endif %}">
-            {{ entry.reason }}
-          </span>
-        </td>
-        <td>{{ entry.mentionsHidden or 0 }}</td>
-        <td>{% if entry.blockedAt %}{{ entry.blockedAt | date("PPp") }}{% endif %}</td>
-        <td>
-          <form method="post" action="{{ wmEndpoint }}/blocklist/{{ entry.domain | urlencode }}/delete" style="display:inline">
-            <button type="submit" class="button button--small button--secondary"
-                    onclick="return confirm('Unblock {{ entry.domain }}? Mentions hidden by this block will be restored.')">
-              {{ __("webmention-io.blocklist.unblock") }}
-            </button>
-          </form>
-        </td>
-      </tr>
-      {% endfor %}
-    </tbody>
-  </table>
-  {% else %}
-  <p class="bl-empty">{{ __("webmention-io.blocklist.empty") }}</p>
-  {% endif %}
-</section>
+{# The three actions differ in ways their buttons do not convey, so say so. #}
+{{ details({
+  summary: __("webmention-io.blocklist.howItWorks"),
+  text: "<p>" + __("webmention-io.blocklist.howQuarantine") + "</p><p>" + __("webmention-io.blocklist.howBlock") + "</p><p>" + __("webmention-io.blocklist.howPrivacy") + "</p>"
+}) }}
+
+{{ heading({ level: 2, text: __("webmention-io.blocklist.quarantine.title") }) }}
+<p>{{ __("webmention-io.blocklist.quarantine.description") }}</p>
+
+<form method="post" action="{{ wmEndpoint }}/quarantine" class="bl-form">
+  {{ input({
+    id: "quarantine-domain",
+    name: "domain",
+    label: __("webmention-io.blocklist.domainLabel"),
+    hint: __("webmention-io.blocklist.domainPlaceholder"),
+    required: true
+  }) }}
+  {{ button({ text: __("webmention-io.blocklist.quarantine.button") }) }}
+</form>
+
+{{ heading({ level: 2, text: __("webmention-io.blocklist.add") }) }}
+<p>{{ __("webmention-io.blocklist.description") }}</p>
+
+<form method="post" action="{{ wmEndpoint }}/block" class="bl-form">
+  {{ input({
+    id: "block-domain",
+    name: "domain",
+    label: __("webmention-io.blocklist.domainLabel"),
+    hint: __("webmention-io.blocklist.domainPlaceholder"),
+    required: true
+  }) }}
+  {{ button({ text: __("webmention-io.blocklist.blockButton") }) }}
+</form>
+
+{{ heading({ level: 2, text: __("webmention-io.blocklist.privacy.title") }) }}
+{{ warningText({ text: __("webmention-io.blocklist.howPrivacy") }) }}
+
+<form method="post" action="{{ wmEndpoint }}/privacy-remove" class="bl-form"
+      onsubmit="return confirm('{{ __("webmention-io.blocklist.howPrivacy") }}')">
+  {{ input({
+    id: "privacy-domain",
+    name: "domain",
+    label: __("webmention-io.blocklist.privacy.domainLabel"),
+    hint: __("webmention-io.blocklist.domainPlaceholder"),
+    required: true
+  }) }}
+  {{ button({ text: __("webmention-io.blocklist.privacy.removeButton") }) }}
+</form>
+
+{{ heading({
+  level: 2,
+  text: __("webmention-io.blocklist.title") + " (" + entries.length + ")"
+}) }}
+
+{% if entries.length > 0 %}
+<table class="bl-table">
+  <thead>
+    <tr>
+      <th>{{ __("webmention-io.blocklist.domainLabel") }}</th>
+      <th>{{ __("webmention-io.blocklist.statusLabel") }}</th>
+      <th>{{ __("webmention-io.blocklist.reasonLabel") }}</th>
+      <th>{{ __("webmention-io.blocklist.mentionsHidden") }}</th>
+      <th>{{ __("webmention-io.blocklist.blockedAt") }}</th>
+      <th></th>
+    </tr>
+  </thead>
+  <tbody>
+    {% for entry in entries %}
+    <tr>
+      <td><strong>{{ entry.domain }}</strong></td>
+      <td>
+        {% if entry.status == "quarantined" %}
+          {{ badge({ color: "yellow", text: __("webmention-io.blocklist.statusQuarantined") }) }}
+        {% else %}
+          {{ badge({ color: "red", text: __("webmention-io.blocklist.statusBlocked") }) }}
+        {% endif %}
+      </td>
+      <td>{{ badge({ color: "purple", size: "small", text: entry.reason }) }}</td>
+      <td>{{ entry.mentionsHidden or 0 }}</td>
+      <td>{% if entry.blockedAt %}{{ entry.blockedAt | date("PPp") }}{% endif %}</td>
+      <td>
+        {# Promoting a quarantine to a block sweeps the domain's history,
+           because that is what blockDomainHandler already does. #}
+        {% if entry.status == "quarantined" %}
+        <form method="post" action="{{ wmEndpoint }}/block" style="display:inline">
+          <input type="hidden" name="domain" value="{{ entry.domain }}">
+          {{ button({ text: __("webmention-io.blocklist.quarantine.promote") }) }}
+        </form>
+        {% endif %}
+        <form method="post" action="{{ wmEndpoint }}/blocklist/{{ entry.domain | urlencode }}/delete" style="display:inline">
+          {{ button({ text: __("webmention-io.blocklist.unblock") }) }}
+        </form>
+      </td>
+    </tr>
+    {% endfor %}
+  </tbody>
+</table>
+{% else %}
+<p>{{ __("webmention-io.blocklist.empty") }}</p>
+{% endif %}
 {% endblock %}

package/views/webmentions.njk

@@ -133,6 +133,9 @@
     </span>
     <span class="wm-stats__item">
       <span class="wm-stats__count">{{ counts.total }}</span> {{ __("webmention-io.counts.total") }}
+    </div>
+    <div>
+      <span class="wm-stats__count">{{ counts.quarantined or 0 }}</span> {{ __("webmention-io.counts.quarantined") }}
     </span>
   </div>
 
@@ -162,6 +165,7 @@
     <a href="{{ wmEndpoint }}?filter=all&type={{ typeFilter }}" class="{% if filter == 'all' %}active{% endif %}">{{ __("webmention-io.filter.all") }}</a>
     <a href="{{ wmEndpoint }}?filter=visible&type={{ typeFilter }}" class="{% if filter == 'visible' %}active{% endif %}">{{ __("webmention-io.filter.visible") }}</a>
     <a href="{{ wmEndpoint }}?filter=hidden&type={{ typeFilter }}" class="{% if filter == 'hidden' %}active{% endif %}">{{ __("webmention-io.filter.hidden") }}</a>
+    <a href="{{ wmEndpoint }}?filter=quarantine&type={{ typeFilter }}" class="{% if filter == 'quarantine' %}active{% endif %}">{{ __("webmention-io.filter.quarantine") }}{% if counts.quarantined %} ({{ counts.quarantined }}){% endif %}</a>
   </div>
   <div>
     {{ __("webmention-io.filter.type") }}: