feat: [US-056] - Character management UI in project settings

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

src/app/editor/[projectId]/FlowchartEditor.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useCallback, useMemo } from 'react'
+import { useCallback, useMemo, useState } from 'react'
 import ReactFlow, {
   Background,
   BackgroundVariant,
@@ -22,7 +22,8 @@ import Toolbar from '@/components/editor/Toolbar'
 import DialogueNode from '@/components/editor/nodes/DialogueNode'
 import ChoiceNode from '@/components/editor/nodes/ChoiceNode'
 import VariableNode from '@/components/editor/nodes/VariableNode'
-import type { FlowchartData, FlowchartNode, FlowchartEdge } from '@/types/flowchart'
+import ProjectSettingsModal from '@/components/editor/ProjectSettingsModal'
+import type { FlowchartData, FlowchartNode, FlowchartEdge, Character, Variable } from '@/types/flowchart'
 
 type FlowchartEditorProps = {
   projectId: string
@@ -76,6 +77,30 @@ function FlowchartEditorInner({ initialData }: FlowchartEditorProps) {
     toReactFlowEdges(initialData.edges)
   )
 
+  const [characters, setCharacters] = useState<Character[]>(initialData.characters)
+  const [variables, setVariables] = useState<Variable[]>(initialData.variables)
+  const [showSettings, setShowSettings] = useState(false)
+
+  const getCharacterUsageCount = useCallback(
+    (characterId: string) => {
+      return nodes.filter((n) => n.type === 'dialogue' && n.data?.characterId === characterId).length
+    },
+    [nodes]
+  )
+
+  const getVariableUsageCount = useCallback(
+    (variableId: string) => {
+      const nodeCount = nodes.filter(
+        (n) => n.type === 'variable' && n.data?.variableId === variableId
+      ).length
+      const edgeCount = edges.filter(
+        (e) => e.data?.condition?.variableId === variableId
+      ).length
+      return nodeCount + edgeCount
+    },
+    [nodes, edges]
+  )
+
   const onConnect = useCallback(
     (params: Connection) => {
       if (!params.source || !params.target) return
@@ -177,6 +202,7 @@ function FlowchartEditorInner({ initialData }: FlowchartEditorProps) {
         onSave={handleSave}
         onExport={handleExport}
         onImport={handleImport}
+        onProjectSettings={() => setShowSettings(true)}
       />
       <div className="flex-1">
         <ReactFlow
@@ -194,6 +220,17 @@ function FlowchartEditorInner({ initialData }: FlowchartEditorProps) {
           <Controls position="bottom-right" />
         </ReactFlow>
       </div>
+      {showSettings && (
+        <ProjectSettingsModal
+          characters={characters}
+          variables={variables}
+          onCharactersChange={setCharacters}
+          onVariablesChange={setVariables}
+          onClose={() => setShowSettings(false)}
+          getCharacterUsageCount={getCharacterUsageCount}
+          getVariableUsageCount={getVariableUsageCount}
+        />
+      )}
     </div>
   )
 }

src/components/editor/ProjectSettingsModal.tsx

@@ -0,0 +1,421 @@
+'use client'
+
+import { useState } from 'react'
+import { nanoid } from 'nanoid'
+import type { Character, Variable } from '@/types/flowchart'
+
+type Tab = 'characters' | 'variables'
+
+type ProjectSettingsModalProps = {
+  characters: Character[]
+  variables: Variable[]
+  onCharactersChange: (characters: Character[]) => void
+  onVariablesChange: (variables: Variable[]) => void
+  onClose: () => void
+  getCharacterUsageCount: (characterId: string) => number
+  getVariableUsageCount: (variableId: string) => number
+}
+
+function randomHexColor(): string {
+  const colors = [
+    '#ef4444', '#f97316', '#f59e0b', '#84cc16', '#22c55e',
+    '#14b8a6', '#06b6d4', '#3b82f6', '#6366f1', '#a855f7',
+    '#ec4899', '#f43f5e',
+  ]
+  return colors[Math.floor(Math.random() * colors.length)]
+}
+
+export default function ProjectSettingsModal({
+  characters,
+  variables,
+  onCharactersChange,
+  onVariablesChange,
+  onClose,
+  getCharacterUsageCount,
+  getVariableUsageCount,
+}: ProjectSettingsModalProps) {
+  const [activeTab, setActiveTab] = useState<Tab>('characters')
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center">
+      <div
+        className="absolute inset-0 bg-black/50"
+        onClick={onClose}
+        aria-hidden="true"
+      />
+      <div className="relative flex h-[80vh] w-full max-w-2xl flex-col rounded-lg bg-white shadow-xl dark:bg-zinc-800">
+        {/* Header */}
+        <div className="flex items-center justify-between border-b border-zinc-200 px-6 py-4 dark:border-zinc-700">
+          <h2 className="text-lg font-semibold text-zinc-900 dark:text-zinc-50">
+            Project Settings
+          </h2>
+          <button
+            onClick={onClose}
+            className="rounded p-1 text-zinc-500 hover:bg-zinc-100 hover:text-zinc-700 dark:text-zinc-400 dark:hover:bg-zinc-700 dark:hover:text-zinc-200"
+          >
+            <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+
+        {/* Tabs */}
+        <div className="flex border-b border-zinc-200 px-6 dark:border-zinc-700">
+          <button
+            onClick={() => setActiveTab('characters')}
+            className={`border-b-2 px-4 py-2.5 text-sm font-medium transition-colors ${
+              activeTab === 'characters'
+                ? 'border-blue-500 text-blue-600 dark:text-blue-400'
+                : 'border-transparent text-zinc-500 hover:text-zinc-700 dark:text-zinc-400 dark:hover:text-zinc-200'
+            }`}
+          >
+            Characters
+          </button>
+          <button
+            onClick={() => setActiveTab('variables')}
+            className={`border-b-2 px-4 py-2.5 text-sm font-medium transition-colors ${
+              activeTab === 'variables'
+                ? 'border-blue-500 text-blue-600 dark:text-blue-400'
+                : 'border-transparent text-zinc-500 hover:text-zinc-700 dark:text-zinc-400 dark:hover:text-zinc-200'
+            }`}
+          >
+            Variables
+          </button>
+        </div>
+
+        {/* Tab Content */}
+        <div className="flex-1 overflow-y-auto px-6 py-4">
+          {activeTab === 'characters' && (
+            <CharactersTab
+              characters={characters}
+              onChange={onCharactersChange}
+              getUsageCount={getCharacterUsageCount}
+            />
+          )}
+          {activeTab === 'variables' && (
+            <VariablesTab
+              variables={variables}
+              onChange={onVariablesChange}
+              getUsageCount={getVariableUsageCount}
+            />
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+// Characters Tab
+type CharactersTabProps = {
+  characters: Character[]
+  onChange: (characters: Character[]) => void
+  getUsageCount: (characterId: string) => number
+}
+
+type CharacterFormData = {
+  name: string
+  color: string
+  description: string
+}
+
+function CharactersTab({ characters, onChange, getUsageCount }: CharactersTabProps) {
+  const [isAdding, setIsAdding] = useState(false)
+  const [editingId, setEditingId] = useState<string | null>(null)
+  const [formData, setFormData] = useState<CharacterFormData>({ name: '', color: randomHexColor(), description: '' })
+  const [formError, setFormError] = useState<string | null>(null)
+  const [deleteConfirm, setDeleteConfirm] = useState<string | null>(null)
+
+  const resetForm = () => {
+    setFormData({ name: '', color: randomHexColor(), description: '' })
+    setFormError(null)
+  }
+
+  const validateName = (name: string, excludeId?: string): boolean => {
+    if (!name.trim()) {
+      setFormError('Name is required')
+      return false
+    }
+    const duplicate = characters.find(
+      (c) => c.name.toLowerCase() === name.trim().toLowerCase() && c.id !== excludeId
+    )
+    if (duplicate) {
+      setFormError('A character with this name already exists')
+      return false
+    }
+    setFormError(null)
+    return true
+  }
+
+  const handleAdd = () => {
+    if (!validateName(formData.name)) return
+    const newCharacter: Character = {
+      id: nanoid(),
+      name: formData.name.trim(),
+      color: formData.color,
+      description: formData.description.trim() || undefined,
+    }
+    onChange([...characters, newCharacter])
+    setIsAdding(false)
+    resetForm()
+  }
+
+  const handleEdit = (character: Character) => {
+    setEditingId(character.id)
+    setFormData({
+      name: character.name,
+      color: character.color,
+      description: character.description || '',
+    })
+    setFormError(null)
+    setIsAdding(false)
+  }
+
+  const handleSaveEdit = () => {
+    if (!editingId) return
+    if (!validateName(formData.name, editingId)) return
+    onChange(
+      characters.map((c) =>
+        c.id === editingId
+          ? { ...c, name: formData.name.trim(), color: formData.color, description: formData.description.trim() || undefined }
+          : c
+      )
+    )
+    setEditingId(null)
+    resetForm()
+  }
+
+  const handleDelete = (id: string) => {
+    const usageCount = getUsageCount(id)
+    if (usageCount > 0 && deleteConfirm !== id) {
+      setDeleteConfirm(id)
+      return
+    }
+    onChange(characters.filter((c) => c.id !== id))
+    setDeleteConfirm(null)
+  }
+
+  const handleCancelForm = () => {
+    setIsAdding(false)
+    setEditingId(null)
+    resetForm()
+  }
+
+  return (
+    <div>
+      <div className="mb-4 flex items-center justify-between">
+        <p className="text-sm text-zinc-600 dark:text-zinc-400">
+          Define characters that can be referenced in dialogue nodes.
+        </p>
+        {!isAdding && !editingId && (
+          <button
+            onClick={() => { setIsAdding(true); resetForm(); setDeleteConfirm(null) }}
+            className="rounded bg-blue-500 px-3 py-1.5 text-sm font-medium text-white hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-zinc-800"
+          >
+            Add Character
+          </button>
+        )}
+      </div>
+
+      {/* Character List */}
+      <div className="space-y-2">
+        {characters.map((character) => (
+          <div key={character.id}>
+            {editingId === character.id ? (
+              <CharacterForm
+                formData={formData}
+                formError={formError}
+                onChange={setFormData}
+                onSave={handleSaveEdit}
+                onCancel={handleCancelForm}
+                saveLabel="Save"
+              />
+            ) : (
+              <div className="flex items-center justify-between rounded-lg border border-zinc-200 px-4 py-3 dark:border-zinc-700">
+                <div className="flex items-center gap-3">
+                  <div
+                    className="h-4 w-4 rounded-full"
+                    style={{ backgroundColor: character.color }}
+                  />
+                  <div>
+                    <span className="text-sm font-medium text-zinc-900 dark:text-zinc-50">
+                      {character.name}
+                    </span>
+                    {character.description && (
+                      <p className="text-xs text-zinc-500 dark:text-zinc-400">
+                        {character.description}
+                      </p>
+                    )}
+                  </div>
+                </div>
+                <div className="flex items-center gap-2">
+                  {deleteConfirm === character.id && (
+                    <span className="mr-2 text-xs text-orange-600 dark:text-orange-400">
+                      Used in {getUsageCount(character.id)} node(s). Delete anyway?
+                    </span>
+                  )}
+                  <button
+                    onClick={() => handleEdit(character)}
+                    className="rounded px-2 py-1 text-sm text-zinc-600 hover:bg-zinc-100 dark:text-zinc-400 dark:hover:bg-zinc-700"
+                  >
+                    Edit
+                  </button>
+                  <button
+                    onClick={() => handleDelete(character.id)}
+                    className={`rounded px-2 py-1 text-sm ${
+                      deleteConfirm === character.id
+                        ? 'text-red-600 hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-900/20'
+                        : 'text-zinc-600 hover:bg-zinc-100 dark:text-zinc-400 dark:hover:bg-zinc-700'
+                    }`}
+                  >
+                    Delete
+                  </button>
+                </div>
+              </div>
+            )}
+          </div>
+        ))}
+
+        {characters.length === 0 && !isAdding && (
+          <p className="py-8 text-center text-sm text-zinc-400 dark:text-zinc-500">
+            No characters defined yet. Click &quot;Add Character&quot; to create one.
+          </p>
+        )}
+      </div>
+
+      {/* Add Form */}
+      {isAdding && (
+        <div className="mt-4">
+          <CharacterForm
+            formData={formData}
+            formError={formError}
+            onChange={setFormData}
+            onSave={handleAdd}
+            onCancel={handleCancelForm}
+            saveLabel="Add"
+          />
+        </div>
+      )}
+    </div>
+  )
+}
+
+// Character Form
+type CharacterFormProps = {
+  formData: CharacterFormData
+  formError: string | null
+  onChange: (data: CharacterFormData) => void
+  onSave: () => void
+  onCancel: () => void
+  saveLabel: string
+}
+
+function CharacterForm({ formData, formError, onChange, onSave, onCancel, saveLabel }: CharacterFormProps) {
+  return (
+    <div className="rounded-lg border border-zinc-200 bg-zinc-50 p-4 dark:border-zinc-700 dark:bg-zinc-900">
+      <div className="space-y-3">
+        <div className="flex items-center gap-3">
+          <div>
+            <label className="mb-1 block text-xs font-medium text-zinc-700 dark:text-zinc-300">
+              Color
+            </label>
+            <input
+              type="color"
+              value={formData.color}
+              onChange={(e) => onChange({ ...formData, color: e.target.value })}
+              className="h-8 w-8 cursor-pointer rounded border border-zinc-300 dark:border-zinc-600"
+            />
+          </div>
+          <div className="flex-1">
+            <label className="mb-1 block text-xs font-medium text-zinc-700 dark:text-zinc-300">
+              Name *
+            </label>
+            <input
+              type="text"
+              value={formData.name}
+              onChange={(e) => onChange({ ...formData, name: e.target.value })}
+              placeholder="Character name"
+              autoFocus
+              className="block w-full rounded-md border border-zinc-300 bg-white px-3 py-1.5 text-sm text-zinc-900 placeholder-zinc-400 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 dark:border-zinc-600 dark:bg-zinc-800 dark:text-zinc-50 dark:placeholder-zinc-500"
+            />
+          </div>
+        </div>
+        <div>
+          <label className="mb-1 block text-xs font-medium text-zinc-700 dark:text-zinc-300">
+            Description
+          </label>
+          <input
+            type="text"
+            value={formData.description}
+            onChange={(e) => onChange({ ...formData, description: e.target.value })}
+            placeholder="Optional description"
+            className="block w-full rounded-md border border-zinc-300 bg-white px-3 py-1.5 text-sm text-zinc-900 placeholder-zinc-400 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 dark:border-zinc-600 dark:bg-zinc-800 dark:text-zinc-50 dark:placeholder-zinc-500"
+          />
+        </div>
+        {formError && (
+          <p className="text-sm text-red-600 dark:text-red-400">{formError}</p>
+        )}
+        <div className="flex justify-end gap-2">
+          <button
+            onClick={onCancel}
+            className="rounded-md border border-zinc-300 bg-white px-3 py-1.5 text-sm font-medium text-zinc-700 hover:bg-zinc-50 dark:border-zinc-600 dark:bg-zinc-700 dark:text-zinc-300 dark:hover:bg-zinc-600"
+          >
+            Cancel
+          </button>
+          <button
+            onClick={onSave}
+            className="rounded-md bg-blue-500 px-3 py-1.5 text-sm font-medium text-white hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-zinc-800"
+          >
+            {saveLabel}
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+// Variables Tab (placeholder for US-057)
+type VariablesTabProps = {
+  variables: Variable[]
+  onChange: (variables: Variable[]) => void
+  getUsageCount: (variableId: string) => number
+}
+
+function VariablesTab({ variables }: VariablesTabProps) {
+  return (
+    <div>
+      <p className="text-sm text-zinc-600 dark:text-zinc-400">
+        Define variables that can be referenced in variable nodes and edge conditions.
+      </p>
+      {variables.length === 0 ? (
+        <p className="py-8 text-center text-sm text-zinc-400 dark:text-zinc-500">
+          No variables defined yet. Variable management will be available in a future update.
+        </p>
+      ) : (
+        <div className="mt-4 space-y-2">
+          {variables.map((variable) => (
+            <div key={variable.id} className="flex items-center justify-between rounded-lg border border-zinc-200 px-4 py-3 dark:border-zinc-700">
+              <div className="flex items-center gap-3">
+                <span className="rounded bg-zinc-200 px-1.5 py-0.5 text-xs font-medium text-zinc-700 dark:bg-zinc-700 dark:text-zinc-300">
+                  {variable.type}
+                </span>
+                <div>
+                  <span className="text-sm font-medium text-zinc-900 dark:text-zinc-50">
+                    {variable.name}
+                  </span>
+                  {variable.description && (
+                    <p className="text-xs text-zinc-500 dark:text-zinc-400">
+                      {variable.description}
+                    </p>
+                  )}
+                </div>
+              </div>
+              <span className="text-xs text-zinc-500 dark:text-zinc-400">
+                Initial: {String(variable.initialValue)}
+              </span>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}

src/components/editor/Toolbar.tsx

@@ -7,6 +7,7 @@ type ToolbarProps = {
   onSave: () => void
   onExport: () => void
   onImport: () => void
+  onProjectSettings: () => void
 }
 
 export default function Toolbar({
@@ -16,6 +17,7 @@ export default function Toolbar({
   onSave,
   onExport,
   onImport,
+  onProjectSettings,
 }: ToolbarProps) {
   return (
     <div className="flex items-center justify-between border-b border-zinc-200 bg-zinc-50 px-4 py-2 dark:border-zinc-700 dark:bg-zinc-800">
@@ -44,6 +46,12 @@ export default function Toolbar({
       </div>
 
       <div className="flex items-center gap-2">
+        <button
+          onClick={onProjectSettings}
+          className="rounded border border-zinc-300 bg-white px-3 py-1.5 text-sm font-medium text-zinc-700 hover:bg-zinc-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:border-zinc-600 dark:bg-zinc-700 dark:text-zinc-200 dark:hover:bg-zinc-600 dark:focus:ring-offset-zinc-800"
+        >
+          Project Settings
+        </button>
         <button
           onClick={onSave}
           className="rounded border border-zinc-300 bg-white px-3 py-1.5 text-sm font-medium text-zinc-700 hover:bg-zinc-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:border-zinc-600 dark:bg-zinc-700 dark:text-zinc-200 dark:hover:bg-zinc-600 dark:focus:ring-offset-zinc-800"