Render Keyrune set-symbol glyphs in the "What's That Card?" printing frames

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"
+  />
+);

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>

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>