Show tier/enchant in Market Data item search

Enchanted variants share a localized name, so the market search results
and selected-item header now show a T4.3-style chip (tier + enchant),
making it clear which enchantment you're pricing.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

web/src/pages/MarketPage.tsx

@@ -41,14 +41,27 @@ function AgeBadge({ hours, source }: { hours: number | null; source: string | nu
 
 const fmt = (n: number | null) => (n == null ? '—' : n.toLocaleString('en-US'));
 
+interface ItemHit {
+  unique_name: string;
+  name_en: string | null;
+  tier: number | null;
+  enchantment: number;
+}
+
+/** e.g. "T4.3" — shows tier and enchant so enchanted variants are distinguishable. */
+function tierTag(it: { tier: number | null; enchantment: number }): string {
+  const t = it.tier != null ? `T${it.tier}` : '';
+  return it.enchantment > 0 ? `${t}.${it.enchantment}` : t;
+}
+
 export default function MarketPage() {
   const [summary, setSummary] = useState<Summary | null>(null);
   const [minTier, setMinTier] = useState(2);
   const [maxTier, setMaxTier] = useState(8);
   const [force, setForce] = useState(false);
   const [q, setQ] = useState('');
-  const [results, setResults] = useState<{ unique_name: string; name_en: string | null }[]>([]);
+  const [results, setResults] = useState<ItemHit[]>([]);
-  const [selected, setSelected] = useState<{ unique_name: string; name_en: string | null } | null>(null);
+  const [selected, setSelected] = useState<ItemHit | null>(null);
   const [prices, setPrices] = useState<Price[]>([]);
   const [editing, setEditing] = useState<string | null>(null); // "city|quality"
   const [editSell, setEditSell] = useState('');
@@ -94,7 +107,7 @@ export default function MarketPage() {
       .then((d) => setPrices(d.prices ?? []));
   }, []);
 
-  const select = (it: { unique_name: string; name_en: string | null }) => {
+  const select = (it: ItemHit) => {
     setSelected(it);
     setResults([]);
     setQ('');
@@ -197,7 +210,12 @@ export default function MarketPage() {
             <tbody>
               {results.slice(0, 10).map((r) => (
                 <tr key={r.unique_name} className="clickable" onClick={() => select(r)}>
-                  <td>{r.name_en ?? r.unique_name}</td>
+                  <td>
+                    {r.name_en ?? r.unique_name}
+                    <span className="tag" title={r.enchantment > 0 ? `Tier ${r.tier}, enchant ${r.enchantment}` : `Tier ${r.tier}`}>
+                      {tierTag(r)}
+                    </span>
+                  </td>
                   <td className="muted">{r.unique_name}</td>
                 </tr>
               ))}
@@ -208,7 +226,9 @@ export default function MarketPage() {
         {selected && (
           <>
             <h4>
-              {selected.name_en ?? selected.unique_name} <span className="tag">{selected.unique_name}</span>
+              {selected.name_en ?? selected.unique_name}
+              <span className="tag" title={selected.enchantment > 0 ? `enchant ${selected.enchantment}` : undefined}>{tierTag(selected)}</span>
+              <span className="tag">{selected.unique_name}</span>
             </h4>
             {prices.length === 0 && (
               <p className="muted">No price data yet — run a price download above, or add a manual price.</p>