926ce7a45b
Follow-up PR to #95 (Liquid Glass foundation + primitives + Layout shell) that closes out the remaining sub-convoy briefs in a single sweep. Operator-instructed scope: "finish off the design changes." After this PR, **all 8 Liquid Glass sub-convoys are MERGED to main**; the deferred-from-#5 `fix-card3d-state` convoy is dropped (its target, `components/Card3D.js`, turned out to be dead code). ## #2 Brief 2 — Remaining 8 modals migrated to <Modal> primitive - `CollectionsSuccessModal.js` — wrap in <Modal hideCloseButton>; 2 Buttons. - `CollectionsEditModal.js` — full <Modal> + <Input> + <Button> rewrite (4 fields, tag chip section, public-toggle preserved, 2 footer Buttons). - `CollectionEditModal.js` — same pattern as above (4 fields + public-toggle + 2 Buttons). - `CardDetailDeckModal.js` — <Modal> + native select (Select primitive not in scope) + 2 Buttons; sweep `gradient-bg-purple` → `<Button variant="primary">`. - `UploadImageModal.js` — <Modal> + token-driven URL/file tab switcher + drag-drop using `--accent-ember` rim + 2 Buttons (one with `loading` prop). - `CollectionSelectionModal.js` — largest of the set (header summary + SearchBar + scrollable list w/ checkbox toggles + footer); migrated to <Modal size="lg"> while preserving the per-collection card preview thumbnails. - `OCRSettings.js` — trivial <Modal> wrap + single primary <Button>. - `pages/decks.js` — both inline modals (Create Deck + Edit Deck) and `components/ScannerPageView.js` (Create List) migrated; ScannerPageView dropped its `useFocusTrap` named-import (Modal's internal focus trap owns the panel ref now). - **`.github/workflows/ci.yml` `forbidden-modal-shell-without-primitive`** — grandfather list emptied to zero entries; gate is now strict. ## #3 Brief 2 — Forms migrated to <Button> / <SearchBar> - `pages/dashboard.js` — 3 CTAs → <Button> (Create List with leadingIcon, Create Your First List, View All Lists). - `pages/my-cards.js` — empty-state CTA → <Button variant="primary" size="lg">. View-mode toggle buttons intentionally left native (icon-only, doesn't match Button variants). - `pages/community/collections.js` — Go to My Lists CTA → <Button>. - `components/CollectionsPageView.js` — Discover Community + Create List header CTAs → <Button>; search input → <SearchBar>. - Card-grid per-row icon buttons (CollectionsPageView, my-cards, CardsPageView) intentionally left native — tiny per-card actions whose styling doesn't match Button variants and would invalidate visual-diff baselines. ## #5 — scope revised + landed `components/Card3D.js` deletion: surveyed every importer with grep — **zero consumers** in `pages/**` or `components/**`. Only references were in convoy docs. The "pre-existing state-management bug" (state setters used without useState declarations) never affected the running app because the component was never rendered. -505 LOC. The `fix-card3d-state` convoy is dropped from the roadmap as a result. The actual card-grid component (`components/CardItem.js`) is intentionally **not** modified in this sweep — it has per-rarity glow tuning that the existing visual-diff baseline locks in, and the architect's #5 deferral note specifically called out the dedicated baseline re-seed cost. A future implementer turn can apply rim-light tokens to CardItem with its own baseline re-seed when an operator wants that polish. ## #6 Brief 1 — Landing + invite pages glass-migrated - `pages/index.js` — top nav: `var(--glass-surface-mid)` + `--glass-blur-mid` + rim-light. 3 feature cards: `<GlassSurface tint="mid" rim="subtle" elevation="ambient">`. Featured-list cards (the public collection grid): same `<GlassSurface>` recipe with motion-token transitions. All 6 CTA buttons → <Button variant="primary"|"secondary"|"ghost"> with proper sizes. Pulse-loading placeholders tagged `.motion-essential` so reduced-motion users still see them animate (state-meaningful). - `pages/invite/accept.js` + `pages/invite/decline.js` — both outcome panels wrapped in `<GlassSurface tint="mid" rim="subtle" elevation="pronounced">`. Loading spinner border colors corrected from `--text-accent` (which didn't exist) to `--accent-ember`. All 8 buttons → <Button>. `gradient-bg-ember` consumers retained (the canonical warm-palette utility class is fine). ## #8 Brief 2 — Legacy alias sweep + CI gate graduation - Swept `gradient-bg-purple` → `gradient-bg-ember` across **8 files** / **13 occurrences**: `CardDetailQuantityModal`, `CardEditorView`, `CardEditorForm`, `AdminProtected`, `pages/card/[id]`, `pages/invite/{accept,decline}`, `pages/admin/card-import`. `gradient-bg-purple` was a dangling class name with no CSS definition (it was rendering no styling), so the sweep is also a bug fix — those buttons now actually get the ember gradient. - Deleted the 5 dead CSS classes from `styles/globals.css`: `.gradient-text-blue`, `.gradient-text-purple`, `[data-theme="dark"] .glow-blue`, `[data-theme="dark"] .glow-purple`, `[data-theme="dark"] .glow-pink`. Each was zero-consumer post-sweep. - **Graduated the `forbidden-deprecated-color-aliases` CI job from WARN to FAIL.** All 9 patterns (`gradient-text-{purple,pink,blue}`, `glow-{purple,pink,blue}`, `gradient-bg-{purple,blue,pink}`) now block the build if any consumer is reintroduced. ## Verification (local + CI gates locally exercised) - Lint: 0 errors, 2 pre-existing warnings (`CardEditorForm.js` + `CollectionsPageView.js` carry-overs from before #95; out of scope). - Vitest: 104/104 passing — unchanged from #95. - Build: clean (Turbopack default; passes both light + dark theme prerender). - `forbidden-modal-shell-without-primitive` gate: locally clear (`grep -lE 'fixed inset-0 bg-black bg-opacity-' pages components -r --include='*.js'` returns no matches). - `forbidden-deprecated-color-aliases` gate: locally clear (all 9 patterns return no matches in `pages/` or `components/`). ## What still needs human action - **Linux visual-diff baselines** must re-seed via the Docker workflow in `AGENTS.md` § 6. This PR's landing-page + invite-page changes will produce baseline drift on the homepage screenshot (which is currently the only baseline committed) AND additional baselines will be generated for the landing's glass-card sections once the visual spec is expanded. Recommended: run the Docker re-seed against this PR's Vercel preview, commit the result to this branch, push, verify CI green, then merge. - Vercel auto-promotes the merge to production. ## Closes / supersedes - Closes `.convoys/liquid-glass-modal-and-surface-primitive.md` Brief 2 (status → merged). - Closes `.convoys/liquid-glass-form-primitives.md` Brief 2 (status → merged with explicit per-row-icon-button deferral note). - Closes `.convoys/liquid-glass-public-and-auth.md` Brief 1 (status → merged). - Closes `.convoys/cleanup-legacy-design-css.md` Brief 2 (status → merged + CI gate FAIL). - Drops `.convoys/liquid-glass-card-surfaces.md` Brief 1 prerequisite (`fix-card3d-state` no longer needed; Card3D deleted). - Drops the queued `fix-card3d-state` follow-up from the roadmap (target deleted). - Updates `.convoys/ship-readiness.md` § "Design-system redesign portfolio" with a "Finish-portfolio sweep" subsection documenting final status of all 8 sub-convoys. Co-authored-by: Cursor <cursoragent@cursor.com>
390 lines
18 KiB
JavaScript
390 lines
18 KiB
JavaScript
/* eslint-disable @next/next/no-img-element -- External card image URLs; next/image migration is out of scope. */
|
|
|
|
const RARITY_OPTIONS = [
|
|
'common', 'uncommon', 'rare', 'mythic', 'legendary',
|
|
'holographic', 'enchanted', 'super rare', 'ultra rare',
|
|
];
|
|
|
|
const GAME_OPTIONS = ['MTG', 'Pokemon', 'Lorcana'];
|
|
|
|
const COLOR_OPTIONS = ['White', 'Blue', 'Black', 'Red', 'Green', 'Colorless'];
|
|
|
|
export default function CardEditorForm({
|
|
formData,
|
|
onInputChange,
|
|
onColorChange,
|
|
onSave,
|
|
saving,
|
|
message,
|
|
}) {
|
|
return (
|
|
<>
|
|
<div className="flex items-center justify-between mb-6">
|
|
<h2 className="text-xl font-semibold" style={{ color: 'var(--text-primary)' }}>
|
|
Edit Card Details
|
|
</h2>
|
|
<button
|
|
onClick={onSave}
|
|
disabled={saving}
|
|
className={`px-6 py-3 rounded-xl font-medium transition-all duration-200 ${
|
|
saving
|
|
? 'opacity-50 cursor-not-allowed'
|
|
: 'gradient-bg-ember text-white hover:shadow-lg'
|
|
}`}
|
|
>
|
|
{saving ? 'Saving...' : 'Save Changes'}
|
|
</button>
|
|
</div>
|
|
|
|
{message && (
|
|
<div className={`p-4 rounded-lg mb-6 ${
|
|
message.includes('Error')
|
|
? 'bg-red-100 text-red-700 border border-red-200'
|
|
: 'bg-green-100 text-green-700 border border-green-200'
|
|
}`}>
|
|
{message}
|
|
</div>
|
|
)}
|
|
|
|
<div className="space-y-6">
|
|
{/* Basic Information */}
|
|
<div className="p-6 rounded-xl" style={{ backgroundColor: 'var(--bg-secondary)' }}>
|
|
<h3 className="text-lg font-semibold mb-4" style={{ color: 'var(--text-primary)' }}>
|
|
Basic Information
|
|
</h3>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
|
|
Card Name *
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={formData.name}
|
|
onChange={(e) => onInputChange('name', e.target.value)}
|
|
className="w-full p-3 rounded-lg border transition-all duration-200"
|
|
style={{
|
|
backgroundColor: 'var(--bg-primary)',
|
|
borderColor: 'var(--border)',
|
|
color: 'var(--text-primary)'
|
|
}}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
|
|
Game *
|
|
</label>
|
|
<select
|
|
value={formData.game}
|
|
onChange={(e) => onInputChange('game', e.target.value)}
|
|
className="w-full p-3 rounded-lg border transition-all duration-200"
|
|
style={{
|
|
backgroundColor: 'var(--bg-primary)',
|
|
borderColor: 'var(--border)',
|
|
color: 'var(--text-primary)'
|
|
}}
|
|
>
|
|
<option value="">Select Game</option>
|
|
{GAME_OPTIONS.map(game => (
|
|
<option key={game} value={game}>{game}</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
|
|
Set Name
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={formData.set_name}
|
|
onChange={(e) => onInputChange('set_name', e.target.value)}
|
|
className="w-full p-3 rounded-lg border transition-all duration-200"
|
|
style={{
|
|
backgroundColor: 'var(--bg-primary)',
|
|
borderColor: 'var(--border)',
|
|
color: 'var(--text-primary)'
|
|
}}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
|
|
Set Code
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={formData.set_code}
|
|
onChange={(e) => onInputChange('set_code', e.target.value)}
|
|
className="w-full p-3 rounded-lg border transition-all duration-200"
|
|
style={{
|
|
backgroundColor: 'var(--bg-primary)',
|
|
borderColor: 'var(--border)',
|
|
color: 'var(--text-primary)'
|
|
}}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
|
|
Card Number
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={formData.card_number}
|
|
onChange={(e) => onInputChange('card_number', e.target.value)}
|
|
className="w-full p-3 rounded-lg border transition-all duration-200"
|
|
style={{
|
|
backgroundColor: 'var(--bg-primary)',
|
|
borderColor: 'var(--border)',
|
|
color: 'var(--text-primary)'
|
|
}}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
|
|
Rarity
|
|
</label>
|
|
<select
|
|
value={formData.rarity}
|
|
onChange={(e) => onInputChange('rarity', e.target.value)}
|
|
className="w-full p-3 rounded-lg border transition-all duration-200"
|
|
style={{
|
|
backgroundColor: 'var(--bg-primary)',
|
|
borderColor: 'var(--border)',
|
|
color: 'var(--text-primary)'
|
|
}}
|
|
>
|
|
<option value="">Select Rarity</option>
|
|
{RARITY_OPTIONS.map(rarity => (
|
|
<option key={rarity} value={rarity}>{rarity}</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Game Mechanics */}
|
|
<div className="p-6 rounded-xl" style={{ backgroundColor: 'var(--bg-secondary)' }}>
|
|
<h3 className="text-lg font-semibold mb-4" style={{ color: 'var(--text-primary)' }}>
|
|
Game Mechanics
|
|
</h3>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
|
|
Card Type
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={formData.card_type}
|
|
onChange={(e) => onInputChange('card_type', e.target.value)}
|
|
placeholder="e.g., Creature, Instant, Pokemon, Character"
|
|
className="w-full p-3 rounded-lg border transition-all duration-200"
|
|
style={{
|
|
backgroundColor: 'var(--bg-primary)',
|
|
borderColor: 'var(--border)',
|
|
color: 'var(--text-primary)'
|
|
}}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
|
|
Mana Cost
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={formData.mana_cost}
|
|
onChange={(e) => onInputChange('mana_cost', e.target.value)}
|
|
placeholder="e.g., {2}{U}{U}, 3, etc."
|
|
className="w-full p-3 rounded-lg border transition-all duration-200"
|
|
style={{
|
|
backgroundColor: 'var(--bg-primary)',
|
|
borderColor: 'var(--border)',
|
|
color: 'var(--text-primary)'
|
|
}}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
|
|
CMC (Converted Mana Cost)
|
|
</label>
|
|
<input
|
|
type="number"
|
|
value={formData.cmc}
|
|
onChange={(e) => onInputChange('cmc', e.target.value)}
|
|
className="w-full p-3 rounded-lg border transition-all duration-200"
|
|
style={{
|
|
backgroundColor: 'var(--bg-primary)',
|
|
borderColor: 'var(--border)',
|
|
color: 'var(--text-primary)'
|
|
}}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
|
|
Power
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={formData.power}
|
|
onChange={(e) => onInputChange('power', e.target.value)}
|
|
placeholder="e.g., 2, *, X"
|
|
className="w-full p-3 rounded-lg border transition-all duration-200"
|
|
style={{
|
|
backgroundColor: 'var(--bg-primary)',
|
|
borderColor: 'var(--border)',
|
|
color: 'var(--text-primary)'
|
|
}}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
|
|
Toughness
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={formData.toughness}
|
|
onChange={(e) => onInputChange('toughness', e.target.value)}
|
|
placeholder="e.g., 2, *, X"
|
|
className="w-full p-3 rounded-lg border transition-all duration-200"
|
|
style={{
|
|
backgroundColor: 'var(--bg-primary)',
|
|
borderColor: 'var(--border)',
|
|
color: 'var(--text-primary)'
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Colors */}
|
|
<div className="mt-4">
|
|
<label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
|
|
Colors
|
|
</label>
|
|
<div className="flex flex-wrap gap-3">
|
|
{COLOR_OPTIONS.map(color => (
|
|
<label key={color} className="flex items-center gap-2 cursor-pointer">
|
|
<input
|
|
type="checkbox"
|
|
checked={formData.colors.includes(color)}
|
|
onChange={(e) => onColorChange(color, e.target.checked)}
|
|
className="rounded"
|
|
/>
|
|
<span style={{ color: 'var(--text-primary)' }}>{color}</span>
|
|
</label>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Card Text */}
|
|
<div className="p-6 rounded-xl" style={{ backgroundColor: 'var(--bg-secondary)' }}>
|
|
<h3 className="text-lg font-semibold mb-4" style={{ color: 'var(--text-primary)' }}>
|
|
Card Text
|
|
</h3>
|
|
<div>
|
|
<label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
|
|
Oracle Text / Abilities
|
|
</label>
|
|
<textarea
|
|
value={formData.oracle_text}
|
|
onChange={(e) => onInputChange('oracle_text', e.target.value)}
|
|
rows={4}
|
|
placeholder="Enter the card's rules text, abilities, or flavor text..."
|
|
className="w-full p-3 rounded-lg border transition-all duration-200"
|
|
style={{
|
|
backgroundColor: 'var(--bg-primary)',
|
|
borderColor: 'var(--border)',
|
|
color: 'var(--text-primary)'
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Images */}
|
|
<div className="p-6 rounded-xl" style={{ backgroundColor: 'var(--bg-secondary)' }}>
|
|
<h3 className="text-lg font-semibold mb-4" style={{ color: 'var(--text-primary)' }}>
|
|
Card Images
|
|
</h3>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
|
|
Primary Image URL
|
|
</label>
|
|
<input
|
|
type="url"
|
|
value={formData.image_url}
|
|
onChange={(e) => onInputChange('image_url', e.target.value)}
|
|
placeholder="https://example.com/card-image.jpg"
|
|
className="w-full p-3 rounded-lg border transition-all duration-200"
|
|
style={{
|
|
backgroundColor: 'var(--bg-primary)',
|
|
borderColor: 'var(--border)',
|
|
color: 'var(--text-primary)'
|
|
}}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
|
|
Stock Image URL
|
|
</label>
|
|
<input
|
|
type="url"
|
|
value={formData.stock_image_url}
|
|
onChange={(e) => onInputChange('stock_image_url', e.target.value)}
|
|
placeholder="https://example.com/stock-image.jpg"
|
|
className="w-full p-3 rounded-lg border transition-all duration-200"
|
|
style={{
|
|
backgroundColor: 'var(--bg-primary)',
|
|
borderColor: 'var(--border)',
|
|
color: 'var(--text-primary)'
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Pricing */}
|
|
<div className="p-6 rounded-xl" style={{ backgroundColor: 'var(--bg-secondary)' }}>
|
|
<h3 className="text-lg font-semibold mb-4" style={{ color: 'var(--text-primary)' }}>
|
|
Pricing Information
|
|
</h3>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
|
|
Current Price ($)
|
|
</label>
|
|
<input
|
|
type="number"
|
|
step="0.01"
|
|
value={formData.current_price}
|
|
onChange={(e) => onInputChange('current_price', e.target.value)}
|
|
placeholder="0.00"
|
|
className="w-full p-3 rounded-lg border transition-all duration-200"
|
|
style={{
|
|
backgroundColor: 'var(--bg-primary)',
|
|
borderColor: 'var(--border)',
|
|
color: 'var(--text-primary)'
|
|
}}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
|
|
Market Price ($)
|
|
</label>
|
|
<input
|
|
type="number"
|
|
step="0.01"
|
|
value={formData.market_price}
|
|
onChange={(e) => onInputChange('market_price', e.target.value)}
|
|
placeholder="0.00"
|
|
className="w-full p-3 rounded-lg border transition-all duration-200"
|
|
style={{
|
|
backgroundColor: 'var(--bg-primary)',
|
|
borderColor: 'var(--border)',
|
|
color: 'var(--text-primary)'
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|