From ffc071af4c2060f8fa0d7de7434332a67314f97d Mon Sep 17 00:00:00 2001
From: khannurien <yo@vincentlannurien.com>
Date: Sat, 10 Oct 2026 08:12:44 +0000
Subject: [PATCH] =?UTF-8?q?v4:=20a=20description=20shows=20as=20text=20whe?=
 =?UTF-8?q?re=20a=20list=20quotes=20it=20=E2=80=94=20a=20playlist's=20card?=
 =?UTF-8?q?=20printed=20its=20description=20as=20written,=20so=20one=20hol?=
 =?UTF-8?q?ding=20an=20image=20showed=20"![](/api/attachments/=E2=80=A6)",?=
 =?UTF-8?q?=20and=20so=20did=20a=20user's=20line=20in=20the=20search=20res?=
 =?UTF-8?q?ults.=20Both=20now=20go=20through=20markdownToPlainText=20(shar?=
 =?UTF-8?q?ed/markdown.ts),=20as=20the=20chat's=20reply=20previews=20do:?=
 =?UTF-8?q?=20the=20markup=20goes,=20a=20link=20keeps=20its=20text,=20an?=
 =?UTF-8?q?=20image=20is=20left=20out,=20and=20a=20description=20of=20noth?=
 =?UTF-8?q?ing=20but=20an=20image=20leaves=20no=20line.=20The=20playlist's?=
 =?UTF-8?q?=20page=20and=20the=20profile=20render=20the=20Markdown=20as=20?=
 =?UTF-8?q?before.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 shared/markdown.ts                            |  5 ++-
 src/components/playlist/PlaylistCard.tsx      |  9 ++++-
 src/pages/Search.tsx                          | 37 +++++++++++--------
 .../components/playlist/PlaylistCard.test.tsx | 28 ++++++++++++++
 4 files changed, 60 insertions(+), 19 deletions(-)

diff --git a/shared/markdown.ts b/shared/markdown.ts
index 8ac21f4e..573135cb 100644
--- a/shared/markdown.ts
+++ b/shared/markdown.ts
@@ -1,7 +1,8 @@
 /**
  * Flattens the Markdown users write into one line of plain text, where a
- * quote of it can't render markup: the chat's reply previews and the digest
- * email's quotes of a comment or a note.
+ * quote of it can't render markup: the chat's reply previews, the digest
+ * email's quotes of a comment or a note, and the line of a description on a
+ * playlist's card and on a user in the search results.
  *
  * @module
  */
diff --git a/src/components/playlist/PlaylistCard.tsx b/src/components/playlist/PlaylistCard.tsx
index 465b6a3c..e3dfe6a8 100644
--- a/src/components/playlist/PlaylistCard.tsx
+++ b/src/components/playlist/PlaylistCard.tsx
@@ -20,6 +20,7 @@ import {
 import { Tooltip } from "../shared/Tooltip.tsx";
 import { CategoryChips } from "../category/CategoryChips.tsx";
 import { userPath } from "../../../shared/paths.ts";
+import { markdownToPlainText } from "../../../shared/markdown.ts";
 
 /** Passed to {@link PlaylistCard} by each list of playlists. */
 export interface PlaylistCardProps {
@@ -53,6 +54,10 @@ export function PlaylistCard(
   const unread = !isOwner && isRecent(playlist.createdAt) &&
     !isPlaylistVisited(playlist.id);
   const showBadge = !privateBadgeOnly || (!!isOwner && !playlist.isPublic);
+  // The playlist's page renders the description's Markdown; the card has
+  // room for its text only, and none at all when it is a lone image.
+  const description = playlist.description &&
+    markdownToPlainText(playlist.description, "");
 
   function handleNavigate() {
     markPlaylistVisited(playlist.id);
@@ -91,8 +96,8 @@ export function PlaylistCard(
             {unread && <span className="unread-dot" aria-hidden="true" />}
             {playlist.title}
           </Link>
-          {playlist.description && (
-            <p className="playlist-card-description">{playlist.description}</p>
+          {description && (
+            <p className="playlist-card-description">{description}</p>
           )}
           <div className="playlist-card-meta">
             {showBadge && (
diff --git a/src/pages/Search.tsx b/src/pages/Search.tsx
index 3f94407d..3ad1a4a4 100644
--- a/src/pages/Search.tsx
+++ b/src/pages/Search.tsx
@@ -53,6 +53,7 @@ import {
   userPath,
 } from "../../shared/paths.ts";
 import { NotFound } from "./NotFound.tsx";
+import { markdownToPlainText } from "../../shared/markdown.ts";
 
 /**
  * Held by `Search` for a query, from the first page of `SearchResults`. The
@@ -297,21 +298,27 @@ export function Search(): React.JSX.Element {
             ? <p className="search-page-empty">{t`No users match "${q}".`}</p>
             : (
               <ul className="user-results">
-                {results.users.map((u) => (
-                  <li key={u.id}>
-                    <Link
-                      to={userPath(u.username)}
-                      className="user-result-item"
-                    >
-                      <span className="user-result-name">@{u.username}</span>
-                      {u.description && (
-                        <span className="user-result-description">
-                          {u.description}
-                        </span>
-                      )}
-                    </Link>
-                  </li>
-                ))}
+                {results.users.map((u) => {
+                  // The profile renders the description's Markdown; this
+                  // line has room for its text only.
+                  const description = u.description &&
+                    markdownToPlainText(u.description, "");
+                  return (
+                    <li key={u.id}>
+                      <Link
+                        to={userPath(u.username)}
+                        className="user-result-item"
+                      >
+                        <span className="user-result-name">@{u.username}</span>
+                        {description && (
+                          <span className="user-result-description">
+                            {description}
+                          </span>
+                        )}
+                      </Link>
+                    </li>
+                  );
+                })}
               </ul>
             )
         )}
diff --git a/src/test/components/playlist/PlaylistCard.test.tsx b/src/test/components/playlist/PlaylistCard.test.tsx
index 093707b7..f2b7304b 100644
--- a/src/test/components/playlist/PlaylistCard.test.tsx
+++ b/src/test/components/playlist/PlaylistCard.test.tsx
@@ -38,6 +38,34 @@ describe("PlaylistCard", () => {
     expect(currentPath()).toBe("/@ann/playlists/mix");
   });
 
+  test("the description shows as text, without its Markdown or its images", () => {
+    const withText = renderWithContexts(
+      <ul>
+        <PlaylistCard
+          playlist={makePlaylist({
+            description:
+              "**Late** [tunes](https://x.y) ![](/api/attachments/a1)",
+          })}
+        />
+      </ul>,
+    );
+    expect(
+      withText.container.querySelector(".playlist-card-description"),
+    ).toHaveTextContent(/^Late tunes$/);
+    withText.unmount();
+
+    const imageOnly = renderWithContexts(
+      <ul>
+        <PlaylistCard
+          playlist={makePlaylist({ description: "![](/api/attachments/a1)" })}
+        />
+      </ul>,
+    );
+    expect(
+      imageOnly.container.querySelector(".playlist-card-description"),
+    ).toBeNull();
+  });
+
   test("the owner doesn't see their own name, or an unread dot", () => {
     const p = makePlaylist({ ownerUsername: "me", createdAt: new Date() });
     const { container } = renderWithContexts(