From 3c435d98b5617d668fccb4da542133a1c5d8b3ab Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Tue, 14 Jul 2026 14:27:03 +0000
Subject: [PATCH] Render Keyrune set-symbol glyphs in the "What's That Card?"
 printing frames

PrintingTagPicker and PrintingTagQueue showed bare expansion codes as
plain text - the Keyrune integration added for CanonicalCardFilter's
printing dropdown was never extended here. Adds a small SetIcon
component using real <i class="ss ss-<code>"> markup (Keyrune's own
classes, already loaded via _document.tsx) rather than the
embedded-PUA-character trick CanonicalCardFilter needs for its
plain-string-label-constrained dropdown library - no such constraint
applies to this plain JSX, so the idiomatic Keyrune markup works
directly. An expansion code Keyrune doesn't recognise falls back to its
default glyph automatically, matching CanonicalCardFilter's existing
fallback behavior.

Verified: tsc, eslint, and a full production build are clean; a
throwaway Playwright screenshot (not committed) confirmed the glyph
renders as a real vector icon, not tofu; the existing
PrintingTagQueue/PrintingTagPicker/VoteQueue Playwright specs pass
(2 pre-existing PrintingTagPicker failures confirmed unrelated by
reproducing them with these changes stashed out).

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Hfe2ccmc67RXotYNbMxKzr
---
 frontend/src/components/SetIcon.tsx           | 24 +++++++++++++++++++
 .../printingTags/PrintingTagPicker.tsx        |  3 +++
 .../printingTags/PrintingTagQueue.tsx         |  7 ++++++
 3 files changed, 34 insertions(+)
 create mode 100644 frontend/src/components/SetIcon.tsx

diff --git a/frontend/src/components/SetIcon.tsx b/frontend/src/components/SetIcon.tsx
new file mode 100644
index 000000000..87dc1a2c8
--- /dev/null
+++ b/frontend/src/components/SetIcon.tsx
@@ -0,0 +1,24 @@
+import classnames from "classnames";
+import React from "react";
+
+/**
+ * Renders a Keyrune MTG set-symbol glyph via the `ss ss-<code>` classes Keyrune's CSS
+ * defines (stylesheet loaded globally in _document.tsx). Unlike CanonicalCardFilter.tsx,
+ * nothing here constrains rendering to a plain-string label, so this uses real markup
+ * instead of the embedded-PUA-character trick that component needs (see common/keyrune.ts).
+ * An expansion code Keyrune doesn't recognise falls back to its default `.ss:before` glyph
+ * automatically, since only the more specific `.ss-<code>` rule is missing - no explicit
+ * fallback logic needed here.
+ */
+export const SetIcon = ({
+  expansionCode,
+  className,
+}: {
+  expansionCode: string;
+  className?: string;
+}) => (
+  <i
+    className={classnames("ss", `ss-${expansionCode.toLowerCase()}`, className)}
+    aria-hidden="true"
+  />
+);
diff --git a/frontend/src/features/printingTags/PrintingTagPicker.tsx b/frontend/src/features/printingTags/PrintingTagPicker.tsx
index bce4d9658..cdbd8034f 100644
--- a/frontend/src/features/printingTags/PrintingTagPicker.tsx
+++ b/frontend/src/features/printingTags/PrintingTagPicker.tsx
@@ -26,6 +26,7 @@ import {
   PrintingConsensusResponse,
 } from "@/common/schema_types";
 import { useAppDispatch, useAppSelector } from "@/common/types";
+import { SetIcon } from "@/components/SetIcon";
 import {
   APIGetPrintingCandidates,
   APIGetPrintingConsensus,
@@ -139,6 +140,7 @@ export function PrintingTagPicker({
         {consensus != null && consensus.resolvedPrinting != null && (
           <span>
             Current consensus:{" "}
+            <SetIcon expansionCode={consensus.resolvedPrinting.expansionCode} />{" "}
             {consensus.resolvedPrinting.expansionCode.toUpperCase()}{" "}
             {consensus.resolvedPrinting.collectorNumber}
           </span>
@@ -220,6 +222,7 @@ export function PrintingTagPicker({
                     style={{ width: "100%" }}
                   />
                   <div>
+                    <SetIcon expansionCode={candidate.expansionCode} />{" "}
                     {candidate.expansionCode.toUpperCase()}{" "}
                     {candidate.collectorNumber}
                   </div>
diff --git a/frontend/src/features/printingTags/PrintingTagQueue.tsx b/frontend/src/features/printingTags/PrintingTagQueue.tsx
index e6ec98442..2f0a4ce98 100644
--- a/frontend/src/features/printingTags/PrintingTagQueue.tsx
+++ b/frontend/src/features/printingTags/PrintingTagQueue.tsx
@@ -25,6 +25,7 @@ import {
   PrintingConsensusResponse,
 } from "@/common/schema_types";
 import { CardDocument, useAppDispatch, useAppSelector } from "@/common/types";
+import { SetIcon } from "@/components/SetIcon";
 import { Spinner } from "@/components/Spinner";
 import { AttributeVotingPanel } from "@/features/attributeVoting/AttributeVotingPanel";
 import { NoMatchReasonStrip } from "@/features/attributeVoting/NoMatchReasonStrip";
@@ -572,6 +573,11 @@ export function PrintingTagQueue() {
                     {consensus?.resolvedPrinting != null && (
                       <span>
                         Current consensus:{" "}
+                        <SetIcon
+                          expansionCode={
+                            consensus.resolvedPrinting.expansionCode
+                          }
+                        />{" "}
                         {consensus.resolvedPrinting.expansionCode.toUpperCase()}{" "}
                         {consensus.resolvedPrinting.collectorNumber}
                       </span>
@@ -656,6 +662,7 @@ export function PrintingTagQueue() {
                             </ZoomableThumbnail>
                           </ArtPlaceholder>
                           <div>
+                            <SetIcon expansionCode={candidate.expansionCode} />{" "}
                             {candidate.expansionCode.toUpperCase()}{" "}
                             {candidate.collectorNumber}
                           </div>