# View/Edit Mode Redesign — Design Spec

## Overview

Redesign the CharacterDetail modal with a view/edit mode split. View mode is a clean, read-only character sheet for gameplay. Edit mode enables full editing for character building and level-ups. The layout follows the "Modern Card Panels" design: header banner with vitals, three content panels below.

## 1. View Mode (Default)

### Header Banner

Full-width banner at top of modal:

- **Left side:** Character name + title, class/ancestry/level
- **Right side:** Three vital displays:
  - **HP:** large number with +/- buttons (live-editable)
  - **AC:** large number, display only (derived from gear)
  - **XP:** number with +/- buttons (live-editable), shows threshold (e.g. "6 / 10")

### Three Panels

**Left Panel — Ability Scores + Attacks**

- Ability scores as a compact 2-column list: label + modifier (e.g. "STR +0"). Score value shown smaller. Space reserved on the right of each stat for a future dice roll button.
- Visual separator (line or spacing) between stats and attacks.
- Attacks section: auto-generated weapon lines (e.g. "SHORTSWORD: +0, 1d6"). Talent-based attack modifiers shown below as italic text. Space reserved on the right of each attack for a future dice roll button.

**Center Panel — Talents + Info**

- Talents list with name and description for each. Read-only (no add/remove buttons).
- Info section below talents:
  - Background
  - Deity
  - Languages
  - Alignment
  - Notes (displayed as plain text, not a textarea)

**Right Panel — Gear + Currency**

- Gear list as a compact table. Each row shows:
  - Item name
  - Small type icon: sword (weapon), shield (armor), backpack (gear), sparkle (spell) — using unicode or simple CSS icons, not an icon library
  - Slot count
  - No delete buttons in view mode
- Slot counter in header: "Slots: 4 / 10" with color coding (green/yellow/red)
- Currency row with +/- buttons for GP, SP, CP (live-editable)

### View Mode Principles

- No input fields, dropdowns, or form elements (except HP/XP/currency quick controls)
- Everything is plain display text
- Clean, readable, looks like a proper character sheet
- Real-time sync still works — changes from other clients update the display

## 2. Edit Mode

### Toggle

- "Edit" button in the header bar, next to the close (X) button
- When in edit mode, button text changes to "Done"
- Clicking "Done" returns to view mode

### What Changes in Edit Mode

**Header:**

- Name and title become editable input fields

**Left Panel — Ability Scores + Attacks:**

- Ability scores get +/- buttons for incrementing/decrementing
- Attacks remain auto-generated (read-only) since they derive from gear + stats

**Center Panel — Talents + Info:**

- Talents get add (name + description form) and remove (X button) controls
- Class/ancestry/level/alignment fields appear as editable controls (these are displayed as read-only text in the header in view mode, and editable here in the Info panel in edit mode)
- Background, deity, languages become editable text inputs
- Alignment becomes a dropdown (Lawful/Neutral/Chaotic)
- Class becomes a dropdown (Fighter/Priest/Thief/Wizard)
- Ancestry becomes a dropdown (Human/Elf/Dwarf/Halfling/Goblin/Half-Orc)
- Level becomes a number input
- Notes becomes an editable textarea

**Right Panel — Gear:**

- "+ Add Gear" button appears with ItemPicker (searchable predefined item dropdown)
- Delete (X) buttons appear on each gear row
- Gear slots max becomes editable
- Currency fields become direct number inputs (replacing +/- buttons)

**Additional:**

- AC click-to-override becomes available
- "Delete Character" button appears at the bottom of the modal

### What Stays the Same in Both Modes

- HP +/- buttons (always available — core gameplay)
- XP +/- buttons (always available — awarded during play)
- Currency +/- buttons (always available — spending gold during play)
- Overall layout structure (header + 3 panels)
- Real-time sync (changes broadcast immediately in both modes)
- Modal behavior (click outside or X to close)

## 3. Component Architecture

Split the current monolithic CharacterDetail.tsx (~345 lines) into focused components:

- **CharacterDetail.tsx** — modal shell (overlay, close behavior), mode state (`'view' | 'edit'`), passes mode + handlers to CharacterSheet
- **CharacterSheet.tsx** — header banner + 3-panel grid layout, receives `mode` and all handler props, distributes to panels
- **StatsPanel.tsx** — left panel: ability scores + attacks. Shows +/- on stats only in edit mode. AttackBlock always shown. Reserves roll button space.
- **InfoPanel.tsx** — center panel: talents + character info fields. TalentList add/remove only in edit mode. Info fields editable only in edit mode.
- **GearPanel.tsx** — right panel: gear list + currency. Add/remove gear only in edit mode. Currency +/- always shown. Slot counter always shown.

Existing components reused:

- StatBlock — already has +/- buttons, just conditionally render them
- AttackBlock — read-only in both modes
- TalentList — conditionally show add/remove
- GearList — conditionally show add/remove
- AcDisplay — override only in edit mode
- CurrencyRow — always shown with +/- in view, direct input in edit
- ItemPicker — only rendered in edit mode

Each panel file stays under ~150 lines.

## 4. Gear Type Icons

Replace the colored text badges (WEAPON, ARMOR, GEAR, SPELL) with small unicode/CSS icons:

- Weapon: crossed swords or dagger unicode (e.g. `⚔` or `🗡`)
- Armor: shield unicode (e.g. `🛡`)
- Gear: backpack/bag (e.g. `🎒` or `⚙`)
- Spell: sparkle/star (e.g. `✨` or `⚡`)

Kept as plain unicode characters — no icon library dependency. Shown as small inline icons next to the item name in the gear list.

## 5. Future Dice Rolling Accommodation

Layout reserves space but does not implement rolling:

- Each ability score row has empty space on the right (~2.5rem) for a future "roll" button
- Each attack line has empty space on the right (~2.5rem) for a future "roll" button
- The attacks section header has room for a general roll area

## 6. Data Flow

No database or API changes. This is purely a frontend restructuring:

- Mode state (`'view' | 'edit'`) is local component state in CharacterDetail
- All existing mutation handlers (onUpdate, onStatChange, onAddGear, etc.) still work the same
- The only change is whether the UI renders input controls or display text
- Debounced text field updates still work in edit mode (same as current)
- HP/XP/currency handlers work in both modes

## Out of Scope

- Dice rolling (layout accommodates it)
- Predefined talent database
- New character fields or schema changes
- Authentication or permissions (edit mode is available to everyone)