feat: Farbschemata nachträglich bearbeiten

Neuer Button 'Schema bearbeiten' neben 'Schema löschen'. Öffnet das
bestehende Modal mit vorausgefüllten Daten (Name, Farben, Vorschaubild).
Umbenennen wird korrekt behandelt (altes Schema wird ersetzt).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

index.html

@@ -99,7 +99,7 @@
   <!-- Schema-Modal -->
   <div id="schema-modal-overlay" class="modal-overlay" style="display:none">
     <div class="modal">
-      <h2 style="margin-bottom:1rem">Neues Farbschema</h2>
+      <h2 id="schema-modal-title" style="margin-bottom:1rem">Neues Farbschema</h2>
 
       <div class="modal-field">
         <label for="schema-name-input">Name</label>

js/app.js

@@ -1,8 +1,8 @@
 import { initEingabe } from './eingabe.js';
 import { initPicker } from './picker.js';
 import { initHarmonien } from './harmonien.js';
-import { addFavorit, addColorToSchema, addToHistory, renderSammlung, exportCollection, importCollection, saveSchema } from './collection.js';
+import { addFavorit, addColorToSchema, addToHistory, renderSammlung, exportCollection, importCollection, saveSchema, setEditSchemaHandler } from './collection.js';
-import { initSchemaModal } from './schema-modal.js';
+import { initSchemaModal, openForEdit } from './schema-modal.js';
 
 // state.color is read-only from outside — always use setColor() to update,
 // so that the colorChanged event is dispatched to all listening modules.
@@ -39,3 +39,4 @@ document.getElementById('sammlung-import-btn').addEventListener('click', importC
 
 renderSammlung();
 initSchemaModal(saveSchema);
+setEditSchemaHandler(openForEdit);

js/collection.js

@@ -1,6 +1,9 @@
 import { hslToHex } from './converter.js';
 
 const STORAGE_KEY = 'pigmento';
+
+let editSchemaHandler = null;
+export function setEditSchemaHandler(fn) { editSchemaHandler = fn; }
 const HISTORY_MAX = 20;
 
 function load() {
@@ -74,8 +77,11 @@ export function addColorToSchema(hsl) {
   }
 }
 
-export function saveSchema(name, farben, bild) {
+export function saveSchema(name, farben, bild, originalName) {
   const data = load();
+  if (originalName && originalName !== name) {
+    data.schemata = data.schemata.filter(s => s.name !== originalName);
+  }
   const existing = data.schemata.find(s => s.name === name);
   if (existing) {
     existing.farben = farben;
@@ -243,14 +249,25 @@ export function renderSammlung() {
         nameEl.textContent = schema.name;
         nameRow.appendChild(nameEl);
 
+        const editBtn = document.createElement('button');
+        editBtn.className = 'action-btn';
+        editBtn.textContent = 'Schema bearbeiten';
+        editBtn.style.fontSize = '0.75rem';
+        editBtn.addEventListener('click', () => editSchemaHandler?.(schema));
+
         const delBtn = document.createElement('button');
         delBtn.className = 'action-btn';
         delBtn.textContent = 'Schema löschen';
         delBtn.style.fontSize = '0.75rem';
         delBtn.addEventListener('click', () => deleteSchema(schema.name));
 
+        const btnGroup = document.createElement('div');
+        btnGroup.style.cssText = 'display:flex;gap:0.4rem';
+        btnGroup.appendChild(editBtn);
+        btnGroup.appendChild(delBtn);
+
         header.appendChild(nameRow);
-        header.appendChild(delBtn);
+        header.appendChild(btnGroup);
 
         const swatchesDiv = document.createElement('div');
         swatchesDiv.style.cssText = 'display:flex;gap:0.5rem;flex-wrap:wrap';

js/schema-modal.js

@@ -85,6 +85,8 @@ function extractDominantColors(dataUrl, callback) {
 let farben = [];           // Array von HSL-Objekten
 let aktuelleHex = '';      // Hex-Wert des aktuellen Eingabefelds
 let vorschaubild = null;   // Base64-String des Thumbnails oder null
+let editOriginalName = null; // Name des zu bearbeitenden Schemas (null = neu)
+let savedOnSave = null;    // onSave-Callback aus initSchemaModal
 
 function compressToThumbnail(file) {
   return new Promise((resolve) => {
@@ -120,6 +122,8 @@ function resetModal() {
   document.getElementById('schema-vorschlag').style.display = 'none';
   document.getElementById('schema-farbe-eingabe').style.display = 'none';
   document.getElementById('schema-abschliessen-btn').disabled = true;
+  editOriginalName = null;
+  document.getElementById('schema-modal-title').textContent = 'Neues Farbschema';
   const preview = document.getElementById('schema-bild-preview');
   preview.style.backgroundImage = '';
   preview.classList.remove('hat-bild');
@@ -223,7 +227,36 @@ function setAktuelleHex(hex) {
   document.getElementById('schema-hex-preview').style.background = hex;
 }
 
+export function openForEdit(schema) {
+  resetModal();
+  editOriginalName = schema.name;
+  document.getElementById('schema-modal-title').textContent = 'Schema bearbeiten';
+  document.getElementById('schema-name-input').value = schema.name;
+
+  if (schema.bild) {
+    vorschaubild = schema.bild;
+    const preview = document.getElementById('schema-bild-preview');
+    preview.style.backgroundImage = 'url(' + schema.bild + ')';
+    preview.classList.add('hat-bild');
+    document.getElementById('schema-bild-entfernen-btn').style.display = 'inline-block';
+  }
+
+  farben = schema.farben.map(hsl => ({ ...hsl }));
+  renderFarbenPreview();
+  document.getElementById('schema-abschliessen-btn').disabled = false;
+
+  if (farben.length < MAX_FARBEN) {
+    updateFarbeLabel();
+    document.getElementById('schema-farbe-eingabe').style.display = 'block';
+  }
+
+  document.getElementById('schema-modal-overlay').style.display = 'flex';
+  document.getElementById('schema-name-input').focus();
+}
+
 export function initSchemaModal(onSave) {
+  savedOnSave = onSave;
+
   // Button öffnet Modal
   document.getElementById('schema-erstellen-btn').addEventListener('click', () => {
     resetModal();
@@ -314,7 +347,7 @@ export function initSchemaModal(onSave) {
     }
     if (farben.length === 0) return;
 
-    onSave(name, farben, vorschaubild);
+    savedOnSave(name, farben, vorschaubild, editOriginalName);
     document.getElementById('schema-modal-overlay').style.display = 'none';
   });