feat: Klick auf Farbswatch übernimmt Farbe als Ausgangsfarbe

- Sammlung (Verlauf/Favoriten/Schemata): Klick → Farbe setzen → Harmonien-Tab
- Harmonien: Klick auf Swatch → als neue Ausgangsfarbe, bleibt auf Harmonien
- switchTab() Hilfsfunktion in app.js

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

js/app.js

@@ -1,7 +1,7 @@
 import { initEingabe } from './eingabe.js';
 import { initPicker } from './picker.js';
 import { initHarmonien } from './harmonien.js';
-import { addFavorit, addColorToSchema, addToHistory, renderSammlung, exportCollection, importCollection, saveSchema, setEditSchemaHandler } from './collection.js';
+import { addFavorit, addColorToSchema, addToHistory, renderSammlung, exportCollection, importCollection, saveSchema, setEditSchemaHandler, setSwatchClickHandler } from './collection.js';
 import { initSchemaModal, openForEdit } from './schema-modal.js';
 
 // state.color is read-only from outside — always use setColor() to update,
@@ -15,6 +15,16 @@ export const state = {
   }
 };
 
+function switchTab(name) {
+  document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
+  document.querySelectorAll('.tab-content').forEach(s => s.classList.remove('active'));
+  const btn = document.querySelector(`.tab-btn[data-tab="${name}"]`);
+  if (btn) { btn.classList.add('active'); document.getElementById('menu-active-label').textContent = btn.textContent; }
+  const section = document.getElementById('tab-' + name);
+  if (section) section.classList.add('active');
+  document.getElementById('menu-dropdown').classList.remove('open');
+}
+
 // Hamburger-Menü
 const menuToggle = document.getElementById('menu-toggle');
 const menuDropdown = document.getElementById('menu-dropdown');
@@ -53,7 +63,7 @@ document.addEventListener('colorChanged', (e) => {
 
 initEingabe(addFavorit, addColorToSchema);
 initPicker(addFavorit, addColorToSchema);
-initHarmonien(addFavorit, addColorToSchema);
+initHarmonien(addFavorit, addColorToSchema, (hsl) => state.setColor(hsl));
 
 document.getElementById('sammlung-export-btn').addEventListener('click', exportCollection);
 document.getElementById('sammlung-import-btn').addEventListener('click', importCollection);
@@ -61,3 +71,4 @@ document.getElementById('sammlung-import-btn').addEventListener('click', importC
 renderSammlung();
 initSchemaModal(saveSchema);
 setEditSchemaHandler(openForEdit);
+setSwatchClickHandler((hsl) => { state.setColor(hsl); switchTab('harmonien'); });

js/collection.js

@@ -4,6 +4,9 @@ const STORAGE_KEY = 'pigmento';
 
 let editSchemaHandler = null;
 export function setEditSchemaHandler(fn) { editSchemaHandler = fn; }
+
+let swatchClickHandler = null;
+export function setSwatchClickHandler(fn) { swatchClickHandler = fn; }
 const HISTORY_MAX = 20;
 
 function load() {
@@ -325,6 +328,11 @@ function makeSwatch(hsl) {
   swatch.style.background = hex;
   swatch.title = hex;
 
+  if (swatchClickHandler) {
+    swatch.style.cursor = 'pointer';
+    swatch.addEventListener('click', () => swatchClickHandler(hsl));
+  }
+
   const label = document.createElement('span');
   label.style.cssText = 'font-size:0.75rem;font-family:Poppins,sans-serif';
   label.textContent = hex;

js/harmonien.js

@@ -8,7 +8,7 @@ const DESCRIPTIONS = {
   'Split-Komplementär': 'Die zwei Farben neben der Komplementärfarbe (150°/210°). Weniger Spannung als Komplementär, mehr Vielfalt.',
 };
 
-function renderHarmony(label, colors, onSaveFavorit, onSaveSchema) {
+function renderHarmony(label, colors, onSaveFavorit, onSaveSchema, onSetColor) {
   const row = document.createElement('div');
   row.className = 'harmony-row';
 
@@ -48,6 +48,10 @@ function renderHarmony(label, colors, onSaveFavorit, onSaveSchema) {
     swatch.className = 'swatch';
     swatch.style.background = hex;
     swatch.title = hex;
+    if (onSetColor) {
+      swatch.style.cursor = 'pointer';
+      swatch.addEventListener('click', () => onSetColor(hsl));
+    }
 
     const hexLabel = document.createElement('span');
     hexLabel.textContent = hex;
@@ -80,7 +84,7 @@ function renderHarmony(label, colors, onSaveFavorit, onSaveSchema) {
   return row;
 }
 
-function render(onSaveFavorit, onSaveSchema) {
+function render(onSaveFavorit, onSaveSchema, onSetColor) {
   const hsl = state.color;
   const hex = hslToHex(hsl);
 
@@ -91,13 +95,13 @@ function render(onSaveFavorit, onSaveSchema) {
   grid.textContent = '';
 
   const h = getHarmonies(hsl);
-  grid.appendChild(renderHarmony('Komplementär', h.komplementaer, onSaveFavorit, onSaveSchema));
-  grid.appendChild(renderHarmony('Analog', h.analog, onSaveFavorit, onSaveSchema));
-  grid.appendChild(renderHarmony('Triade', h.triade, onSaveFavorit, onSaveSchema));
-  grid.appendChild(renderHarmony('Split-Komplementär', h.splitKomplementaer, onSaveFavorit, onSaveSchema));
+  grid.appendChild(renderHarmony('Komplementär', h.komplementaer, onSaveFavorit, onSaveSchema, onSetColor));
+  grid.appendChild(renderHarmony('Analog', h.analog, onSaveFavorit, onSaveSchema, onSetColor));
+  grid.appendChild(renderHarmony('Triade', h.triade, onSaveFavorit, onSaveSchema, onSetColor));
+  grid.appendChild(renderHarmony('Split-Komplementär', h.splitKomplementaer, onSaveFavorit, onSaveSchema, onSetColor));
 }
 
-export function initHarmonien(onSaveFavorit, onSaveSchema) {
-  document.addEventListener('colorChanged', () => render(onSaveFavorit, onSaveSchema));
-  render(onSaveFavorit, onSaveSchema);
+export function initHarmonien(onSaveFavorit, onSaveSchema, onSetColor) {
+  document.addEventListener('colorChanged', () => render(onSaveFavorit, onSaveSchema, onSetColor));
+  render(onSaveFavorit, onSaveSchema, onSetColor);
 }