v3: the dump page's "In collections" list only shows the owner's private badge — every card there said "public", which says nothing on a list of playlists holding the dump. PlaylistCard takes privateBadgeOnly, passed through PlaylistCardList, which hides the visibility badge except on a private playlist of the signed-in user's; the other lists of playlists keep both badges. 5 PlaylistCard tests pass (new: privateBadgeOnly), and tsc, eslint, doc:lint and deno fmt are clean.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

src/components/playlist/PlaylistCard.tsx

@@ -29,6 +29,12 @@ export interface PlaylistCardProps {
   onDelete?: () => void;
   /** Hides the owner link and the unread dot. */
   isOwner?: boolean;
+  /**
+   * Used by dump pages to display "In collections" lists. Prevents the
+   * visibility badge from showing, except to the owner of a private playlist:
+   * public badges on every card there would say nothing.
+   */
+  privateBadgeOnly?: boolean;
 }
 
 /**
@@ -37,12 +43,13 @@ export interface PlaylistCardProps {
  * device. The card is an `<li>`, for a `<ul>`.
  */
 export function PlaylistCard(
-  { playlist, onDelete, isOwner }: PlaylistCardProps,
+  { playlist, onDelete, isOwner, privateBadgeOnly }: PlaylistCardProps,
 ): React.JSX.Element {
   const navigate = useNavigate();
   const { mediaToken } = useAuth();
   const unread = !isOwner && isRecent(playlist.createdAt) &&
     !isPlaylistVisited(playlist.id);
+  const showBadge = !privateBadgeOnly || (!!isOwner && !playlist.isPublic);
 
   function handleNavigate() {
     markPlaylistVisited(playlist.id);
@@ -85,15 +92,17 @@ export function PlaylistCard(
             <p className="playlist-card-description">{playlist.description}</p>
           )}
           <div className="playlist-card-meta">
-            <span
-              className={`playlist-badge${
-                playlist.isPublic ? "" : " playlist-badge--private"
-              }`}
-            >
-              {playlist.isPublic
-                ? <Trans>public</Trans>
-                : <Trans>private</Trans>}
-            </span>
+            {showBadge && (
+              <span
+                className={`playlist-badge${
+                  playlist.isPublic ? "" : " playlist-badge--private"
+                }`}
+              >
+                {playlist.isPublic
+                  ? <Trans>public</Trans>
+                  : <Trans>private</Trans>}
+              </span>
+            )}
             {playlist.ownerUsername && !isOwner && (
               <Link
                 to={`/users/${playlist.ownerUsername}`}

src/components/playlist/PlaylistCardList.tsx

@@ -13,6 +13,8 @@ export interface PlaylistCardListProps {
   playlists: Playlist[];
   /** Given, each card shows a delete button, which calls it. */
   onDelete?: (playlist: Playlist) => void;
+  /** Passed to each {@link PlaylistCard}. */
+  privateBadgeOnly?: boolean;
 }
 
 /**
@@ -20,7 +22,7 @@ export interface PlaylistCardListProps {
  * its owner's when the playlist is the signed-in user's.
  */
 export function PlaylistCardList(
-  { playlists, onDelete }: PlaylistCardListProps,
+  { playlists, onDelete, privateBadgeOnly }: PlaylistCardListProps,
 ): React.JSX.Element {
   const { user } = useAuth();
   return (
@@ -31,6 +33,7 @@ export function PlaylistCardList(
           playlist={p}
           isOwner={!!user && user.id === p.userId}
           onDelete={onDelete && (() => onDelete(p))}
+          privateBadgeOnly={privateBadgeOnly}
         />
       ))}
     </ul>