F2.25 — Deck editor UI (visual list builder)

[jbourdin]

Feature

ID: F2.24 — Deck editor UI (visual list builder)
Group: Deck Library (F2)
Priority: Medium
Dependencies: F2.1 (Register a deck — Done), F6.13 (Incremental TCGdex sync — Done)

Description

Visual deck list editor as an alternative to the PTCG text paste import. Users build their deck list interactively by searching for cards and setting quantities, rather than copy-pasting from PTCG Online/Live.

Card search

• Search input with autocomplete querying the local TcgdexCard / CardPrinting database
• Search by card name (multilingual via nameEn/nameFr fields)
• Results show: card image thumbnail, name, set code, card number, category (Pokemon/Trainer/Energy)
• Filter by category (Pokemon, Trainer, Energy) to narrow results
• Show set icon or code alongside results for disambiguation

Quantity selection

• Click or select a card from search results → adds it to the deck list with quantity 1
• Increment/decrement quantity buttons (+/−) on each card in the list
• Decrement to 0 removes the card from the list
• Maximum 4 copies per card (except basic Energy, unlimited per Pokemon TCG rules)
• Running total: display current card count vs. 60-card target

List management

• Deck list organized by category sections: Pokemon, Trainers, Energy (matching PTCG text format)
• Drag-and-drop or manual reordering within sections
• Card image preview on hover/focus
• "Clear all" button with confirmation
• Undo last action (optional, nice-to-have)

Integration with existing flows

• Available on both deck creation (/deck/new) and deck version update (/deck/{shortTag}/version/new)
• Toggle between "Paste list" (existing F2.2/F2.8) and "Visual editor" modes
• Visual editor produces the same DeckCard entries as the paste parser
• On save, generates the rawList field in PTCG text format for reference
• Triggers the same enrichment pipeline (EnrichDeckVersionMessage)

Technical approach

• React island (Mantine components) — consistent with existing frontend architecture
• API endpoint: GET /api/cards/search?q=&category=&locale= querying CardPrinting joined with TcgdexCard
• Debounced search (300ms, matching navbar search pattern)
• State managed client-side; submitted as JSON array of {setCode, cardNumber, quantity} on form save

Acceptance criteria

• Card search with autocomplete against local card database
• Add/remove cards with quantity selection
• 4-copy limit enforced (except basic Energy)
• 60-card count indicator
• Category-grouped list display
• Toggle between paste and visual editor modes
• Produces valid DeckCard entries identical to paste import
• Generates rawList in PTCG text format
• Works on both deck creation and version update
• Translations for en + fr