From 8a31d5336e06e46a6607104e769d87bd6fa95b26 Mon Sep 17 00:00:00 2001
From: Ferdinand <ferdinand@MacBook-Pro.local>
Date: Thu, 2 Apr 2026 15:04:54 +0200
Subject: [PATCH] =?UTF-8?q?feat:=20Farbschemata=20nachtr=C3=A4glich=20bear?=
 =?UTF-8?q?beiten?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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         |  2 +-
 js/app.js          |  5 +++--
 js/collection.js   | 21 +++++++++++++++++++--
 js/schema-modal.js | 41 +++++++++++++++++++++++++++++++++++++----
 4 files changed, 60 insertions(+), 9 deletions(-)

diff --git a/index.html b/index.html
index a7f47dc..e550d98 100644
--- a/index.html
+++ b/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>
diff --git a/js/app.js b/js/app.js
index 4cbd683..7441a05 100644
--- a/js/app.js
+++ b/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 { initSchemaModal } from './schema-modal.js';
+import { addFavorit, addColorToSchema, addToHistory, renderSammlung, exportCollection, importCollection, saveSchema, setEditSchemaHandler } from './collection.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);
diff --git a/js/collection.js b/js/collection.js
index dd7d4c0..c98df95 100644
--- a/js/collection.js
+++ b/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';
diff --git a/js/schema-modal.js b/js/schema-modal.js
index 288523a..ab600d3 100644
--- a/js/schema-modal.js
+++ b/js/schema-modal.js
@@ -82,9 +82,11 @@ function extractDominantColors(dataUrl, callback) {
 }
 
 // Aktuell gesammelter Zustand des Modals
-let farben = [];        // Array von HSL-Objekten
-let aktuelleHex = '';   // Hex-Wert des aktuellen Eingabefelds
-let vorschaubild = null; // Base64-String des Thumbnails oder null
+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';
   });