Hide quote fallback when quote is rendered

Strip incoming quote-inline fallback paragraphs from API responses and
profile rendering only when Hollo can show the structured quoted post.

Keep the fallback visible when no structured quote is available so the quoted
post URL remains accessible.

Assisted-by: Codex:gpt-5.5

Author: dahlia

CHANGES.md

@@ -11,6 +11,11 @@ To be released.
     support quote posts can now still show the quoted post permalink, while
     quote-aware software can hide the fallback paragraph by class name.
 
+ -  Hid incoming `quote-inline` fallback paragraphs from Mastodon API status
+    content and profile pages when Hollo can render the structured quoted
+    post.  If the quoted post is unavailable, the fallback link remains
+    visible so the quoted URL is not lost.
+
 
 Version 0.8.1
 -------------

src/api/v1/timelines.test.ts

@@ -238,7 +238,7 @@ describe.sequential("/api/v1/timelines/home", () => {
   });
 
   it("serializes quotes using the Mastodon Quote entity format", async () => {
-    expect.assertions(7);
+    expect.assertions(9);
 
     const authorId = crypto.randomUUID() as Uuid;
     const quotedPostId = uuidv7();
@@ -289,7 +289,10 @@ describe.sequential("/api/v1/timelines/home", () => {
         quoteTargetId: quotedPostId,
         visibility: "public",
         content: "Quote post",
-        contentHtml: "<p>Quote post</p>",
+        contentHtml:
+          "<p>Quote post</p>" +
+          `<p class="quote-inline">RE: <a href="https://remote.test/notes/${quotedPostId}">` +
+          `https://remote.test/notes/${quotedPostId}</a></p>`,
         published: new Date(),
       },
     ]);
@@ -308,8 +311,76 @@ describe.sequential("/api/v1/timelines/home", () => {
 
     expect(Array.isArray(json)).toBe(true);
     expect(json[0].id).toBe(quotePostId);
+    expect(json[0].content).toBe("<p>Quote post</p>");
+    expect(json[0].content).not.toContain("quote-inline");
     expect(json[0].quote_id).toBe(quotedPostId);
     expect(json[0].quote.state).toBe("accepted");
     expect(json[0].quote.quoted_status.id).toBe(quotedPostId);
   });
+
+  it("keeps quote-inline fallback content without a structured quote", async () => {
+    expect.assertions(6);
+
+    const authorId = crypto.randomUUID() as Uuid;
+    const postId = uuidv7();
+    const quotedPostUrl = "https://remote.test/notes/missing";
+    const contentHtml =
+      "<p>Quote post</p>" +
+      `<p class="quote-inline">RE: <a href="${quotedPostUrl}">` +
+      `${quotedPostUrl}</a></p>`;
+
+    await db
+      .insert(instances)
+      .values({ host: "remote.test" })
+      .onConflictDoNothing();
+
+    await db.insert(accounts).values({
+      id: authorId,
+      iri: "https://remote.test/users/author",
+      instanceHost: "remote.test",
+      type: "Person",
+      name: "Remote author",
+      emojis: {},
+      handle: "@author@remote.test",
+      bioHtml: "",
+      url: "https://remote.test/@author",
+      protected: false,
+      inboxUrl: "https://remote.test/users/author/inbox",
+    });
+
+    await db.insert(follows).values({
+      iri: "https://hollo.test/follows/author",
+      followingId: authorId,
+      followerId: owner.id,
+      approved: new Date(),
+    });
+
+    await db.insert(posts).values({
+      id: postId,
+      iri: `https://remote.test/notes/${postId}`,
+      type: "Note",
+      accountId: authorId,
+      visibility: "public",
+      content: "Quote post",
+      contentHtml,
+      published: new Date(),
+    });
+
+    const response = await app.request("/api/v1/timelines/home", {
+      method: "GET",
+      headers: {
+        authorization: bearerAuthorization(accessToken),
+      },
+    });
+
+    expect(response.status).toBe(200);
+
+    const json = await response.json();
+
+    expect(Array.isArray(json)).toBe(true);
+    expect(json[0].id).toBe(postId);
+    expect(json[0].quote).toBeNull();
+    expect(json[0].content).toContain("quote-inline");
+    expect(json[0].content).toContain(quotedPostUrl);
+  });
 });

src/components/Post.tsx

@@ -1,4 +1,5 @@
 import { renderCustomEmojis } from "../custom-emoji";
+import { stripQuoteInlineFallbacks } from "../html";
 import type {
   Account,
   Medium as DbMedium,
@@ -223,10 +224,14 @@ interface PostContentProps {
 }
 
 function PostContent({ post }: PostContentProps) {
-  const contentHtml = renderCustomEmojis(post.contentHtml, post.emojis);
+  const displayContentHtml =
+    post.quoteTarget == null
+      ? post.contentHtml
+      : stripQuoteInlineFallbacks(post.contentHtml);
+  const contentHtml = renderCustomEmojis(displayContentHtml, post.emojis);
   return (
     <>
-      {post.contentHtml && (
+      {displayContentHtml && (
         <div
           dangerouslySetInnerHTML={{ __html: contentHtml ?? "" }}
           lang={post.language ?? undefined}

src/entities/status.ts

@@ -1,5 +1,6 @@
 import { eq, sql } from "drizzle-orm";
 
+import { stripQuoteInlineFallbacks } from "../html";
 import type { PreviewCard } from "../previewcard";
 import {
   type Account,
@@ -295,7 +296,11 @@ export function serializePost(
       currentAccountOwner == null
         ? false
         : post.pin != null && post.pin.accountId === currentAccountOwner.id,
-    content: sanitizeHtml(post.contentHtml ?? ""),
+    content: sanitizeHtml(
+      post.quoteTarget == null
+        ? (post.contentHtml ?? "")
+        : stripQuoteInlineFallbacks(post.contentHtml ?? ""),
+    ),
     reblog:
       post.sharing == null
         ? null

src/html.ts

@@ -1,5 +1,9 @@
 let cheerioPromise: Promise<typeof import("cheerio")> | undefined;
 
+const HTML_ELEMENT_REGEXP = /<([a-z][\w:-]*)\b([^>]*)>[\s\S]*?<\/\1>/giu;
+const CLASS_ATTRIBUTE_REGEXP =
+  /\bclass\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s"'=<>`]+))/iu;
+
 async function getCheerio() {
   if (cheerioPromise == null) {
     cheerioPromise = import("cheerio");
@@ -19,3 +23,58 @@ export async function extractText(html: string | null): Promise<string | null> {
   const $ = cheerio.load(html);
   return $(":root").text();
 }
+
+export function stripQuoteInlineFallbacks(html: string): string;
+export function stripQuoteInlineFallbacks(html: null): null;
+export function stripQuoteInlineFallbacks(html: string | null): string | null;
+
+export function stripQuoteInlineFallbacks(html: string | null): string | null {
+  if (html == null) return null;
+  return html.replaceAll(HTML_ELEMENT_REGEXP, (element, _tag, attributes) =>
+    hasQuoteInlineClass(attributes) ? "" : element,
+  );
+}
+
+function hasQuoteInlineClass(attributes: string): boolean {
+  const match = CLASS_ATTRIBUTE_REGEXP.exec(attributes);
+  if (match == null) return false;
+  return decodeHtmlEntities(match[1] ?? match[2] ?? match[3] ?? "")
+    .split(/\s+/)
+    .includes("quote-inline");
+}
+
+function decodeHtmlEntities(value: string): string {
+  return value.replaceAll(
+    /&(?:#(\d+)|#x([\da-f]+)|amp|lt|gt|quot|apos);/gi,
+    (entity, decimal: string | undefined, hexadecimal: string | undefined) => {
+      const codePoint =
+        decimal == null
+          ? hexadecimal == null
+            ? null
+            : Number.parseInt(hexadecimal, 16)
+          : Number.parseInt(decimal, 10);
+      if (codePoint != null) {
+        try {
+          return String.fromCodePoint(codePoint);
+        } catch {
+          return entity;
+        }
+      }
+
+      switch (entity.toLowerCase()) {
+        case "&amp;":
+          return "&";
+        case "&lt;":
+          return "<";
+        case "&gt;":
+          return ">";
+        case "&quot;":
+          return '"';
+        case "&apos;":
+          return "'";
+        default:
+          return entity;
+      }
+    },
+  );
+}

src/pages/profile/index.test.tsx

@@ -91,4 +91,82 @@ describe.sequential("profile tagged page", () => {
     expect(response.status).toBe(200);
     expect(await response.text()).toContain('href="/@hollo/tagged/TestTag"');
   });
+
+  it("hides quote-inline fallback content on profile pages", async () => {
+    expect.assertions(5);
+
+    const quotedPostId = uuidv7();
+    const quotePostId = uuidv7();
+    const quotedPostUrl = `https://hollo.test/@hollo/${quotedPostId}`;
+
+    await db.insert(posts).values([
+      {
+        id: quotedPostId,
+        iri: quotedPostUrl,
+        type: "Note",
+        accountId: account.id,
+        visibility: "public",
+        content: "Quoted post",
+        contentHtml: "<p>Quoted post</p>",
+        published: new Date(),
+      },
+      {
+        id: quotePostId,
+        iri: `https://hollo.test/@hollo/${quotePostId}`,
+        type: "Note",
+        accountId: account.id,
+        quoteTargetId: quotedPostId,
+        visibility: "public",
+        content: "Quote post",
+        contentHtml:
+          "<p>Quote post</p>" +
+          `<p class="quote-inline">RE: <a href="${quotedPostUrl}">` +
+          `${quotedPostUrl}</a></p>`,
+        published: new Date(),
+      },
+    ]);
+
+    const response = await app.request("/@hollo");
+
+    expect(response.status).toBe(200);
+
+    const html = await response.text();
+
+    expect(html).toContain("Quote post");
+    expect(html).toContain("Quoted post");
+    expect(html).not.toContain("quote-inline");
+    expect(html).not.toContain("RE:");
+  });
+
+  it("keeps quote-inline fallback content without a rendered quote", async () => {
+    expect.assertions(5);
+
+    const postId = uuidv7();
+    const quotedPostUrl = "https://remote.test/notes/missing";
+
+    await db.insert(posts).values({
+      id: postId,
+      iri: `https://hollo.test/@hollo/${postId}`,
+      type: "Note",
+      accountId: account.id,
+      visibility: "public",
+      content: "Quote post",
+      contentHtml:
+        "<p>Quote post</p>" +
+        `<p class="quote-inline">RE: <a href="${quotedPostUrl}">` +
+        `${quotedPostUrl}</a></p>`,
+      published: new Date(),
+    });
+
+    const response = await app.request("/@hollo");
+
+    expect(response.status).toBe(200);
+
+    const html = await response.text();
+
+    expect(html).toContain("Quote post");
+    expect(html).toContain("quote-inline");
+    expect(html).toContain("RE:");
+    expect(html).toContain(quotedPostUrl);
+  });
 });