fix(decks): use server commander color identity in deck header and stop clipping mana symbols

The deck detail header computed color identity client-side from the
commanders' printed identities, missing chosen colors from commanders
like Clara Oswald. Fetch the server-computed commanderColorIdentity in
the deck detail query instead, expose the field on the public share
schema, and drop the unused client-side helper. Also remove the
baseline nudge on mana symbols inside ColorIdentitySymbols so their
tops are no longer clipped by line-clamped deck names.

Amp-Thread-ID: https://ampcode.com/threads/T-019fe161-a26b-7051-bf37-f5f1e783020d

Author: cfbender

assets/react/src/components/ui/mana-symbols.tsx

@@ -46,7 +46,10 @@ export function ColorIdentitySymbols({
       className={cn("inline-flex shrink-0 items-center gap-0.5", className)}
     >
       {colors.map((color) => (
-        <ManaSymbol key={color} symbol={color} />
+        // Inside this flex container the icons are already centered; drop the
+        // baseline nudge so they don't poke above the line box and get
+        // clipped by ancestors with overflow hidden (e.g. line-clamped names).
+        <ManaSymbol key={color} symbol={color} className="translate-y-0" />
       ))}
     </span>
   )

assets/react/src/gql/gql.ts

@@ -22,7 +22,7 @@ import { deckDetailCoverUrl } from "./deck-card-model"
 import type { DeckLegalityIssue, DeckPrice, DetailZoneCounts } from "./deck-detail-types"
 import { DeckGroupMenu } from "./deck-group-menu"
 import { deckLegalityIssueCountLabel, deckLegalityLabel, deckLegalityTone } from "./deck-legality"
-import { DeckNameWithCommanderIdentity, commanderColorIdentity } from "./deck-list-model"
+import { DeckNameWithCommanderIdentity } from "./deck-list-model"
 import { DeckTagsSidebar } from "./deck-tags-sidebar"
 import type { DeckCardEntry, DeckCustomTag, DeckDetail } from "./deck-types"
 
@@ -219,7 +219,7 @@ export function DeckDetailHeader({
           }
           nameLine={
             <DeckNameWithCommanderIdentity
-              colors={commanderColorIdentity(deckCards)}
+              colors={deck.commanderColorIdentity}
               name={deck.name}
             />
           }

assets/react/src/gql/graphql.ts

@@ -1,7 +1,6 @@
 import { type ReactNode } from "react"
 import { ColorIdentitySymbols } from "../../components/ui/mana-symbols"
 import { present } from "../../lib/utils"
-import { colorOrder } from "./deck-card-model"
 import type { DeckSummary } from "./deck-types"
 import { DECK_FORMATS } from "./deck-types"
 
@@ -43,30 +42,4 @@ export function DeckNameWithCommanderIdentity({
   )
 }
 
-export function commanderColorIdentity(
-  deckCards:
-    | Array<{
-        card?: { colorIdentity?: Array<string | null> | null } | null
-        zone?: string | null
-      } | null>
-    | null
-    | undefined,
-) {
-  const commanders = (deckCards || []).filter(
-    (deckCard) => deckCard?.zone === "commander" && deckCard.card,
-  )
-
-  if (!commanders.length) return null
-
-  const colors = new Set<string>()
 
-  for (const commander of commanders) {
-    for (const color of commander?.card?.colorIdentity || []) {
-      if (color) colors.add(color.toUpperCase())
-    }
-  }
-
-  return colors.size
-    ? Array.from(colors).sort((left, right) => colorOrder(left) - colorOrder(right))
-    : ["C"]
-}

assets/react/src/pages/decks/deck-detail-header.tsx

@@ -154,6 +154,7 @@ export const DeckDocument = graphql(`
       status
       shareToken
       cardCount
+      commanderColorIdentity
       legality {
         status
         issues {

assets/react/src/pages/decks/deck-list-model.tsx

@@ -316,6 +316,10 @@ defmodule ManavaultWeb.Schema.PublicShareTypes do
       resolve(&DeckFields.deck_card_count/3)
     end
 
+    field :commander_color_identity, list_of(:string) do
+      resolve(&DeckFields.deck_commander_color_identity/3)
+    end
+
     field :unique_card_count, :integer do
       resolve(&DeckFields.deck_unique_card_count/3)
     end