From a2dee3164a7bebd44daaada44b35d11aca403299 Mon Sep 17 00:00:00 2001
From: duffyduck <info@hacker-net.de>
Date: Wed, 13 May 2026 01:13:15 +0200
Subject: [PATCH] =?UTF-8?q?feat(diag):=20Advanced=20Search=20=E2=80=94=20d?=
 =?UTF-8?q?ynamisch=20Felder=20hinzufuegen=20mit=20+=20Button?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Statt fest 3 Felder gibt's jetzt eine erweiterbare Reihen-Liste:
- "+ Feld"-Button fuegt eine Reihe hinzu (UND/ODER + Eingabe)
- ✕-Button pro Reihe (ausser der ersten) entfernt sie
- Erste Reihe ist immer "Start" ohne Operator
- syncAdvancedRowsFromDOM rettet Eingaben vor jedem Re-Render
- runAdvancedSearch iteriert ueber alle Reihen mit Inhalt, leere
  werden ignoriert

Damit ist die Boolean-Suche so lang wie noetig — Stefan kann auch
5-6 Begriffe verknuepfen ohne UI-Hack. Min. 1 Feld bleibt immer
(clearAdvancedSearch reseted auf eine leere Start-Reihe).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 diagnostic/index.html | 115 ++++++++++++++++++++++++++++++------------
 1 file changed, 84 insertions(+), 31 deletions(-)

diff --git a/diagnostic/index.html b/diagnostic/index.html
index d510269..7809299 100644
--- a/diagnostic/index.html
+++ b/diagnostic/index.html
@@ -857,25 +857,16 @@
         </div>
         <div id="brain-advanced-panel" style="display:none;margin-top:10px;padding:10px;background:#080810;border:1px solid #1E1E2E;border-radius:6px;">
           <div style="color:#8888AA;font-size:11px;margin-bottom:6px;">
-            Mehrere Begriffe mit AND/OR verknuepfen — Volltext-Substring, case-insensitive, link-nach-rechts ausgewertet.
+            Mehrere Begriffe mit AND/OR verknuepfen — Volltext-Substring, case-insensitive, links-nach-rechts ausgewertet.
           </div>
-          <div style="display:grid;grid-template-columns:1fr 60px 1fr 60px 1fr;gap:6px;align-items:center;">
-            <input type="text" id="adv-term-1" placeholder="z.B. flugzeug" style="background:#080810;color:#E0E0F0;border:1px solid #1E1E2E;padding:6px;border-radius:4px;font-family:inherit;font-size:12px;">
-            <select id="adv-op-1" style="background:#080810;color:#E0E0F0;border:1px solid #1E1E2E;padding:6px;border-radius:4px;font-family:inherit;font-size:11px;">
-              <option value="AND" selected>UND</option>
-              <option value="OR">ODER</option>
-            </select>
-            <input type="text" id="adv-term-2" placeholder="z.B. cessna" style="background:#080810;color:#E0E0F0;border:1px solid #1E1E2E;padding:6px;border-radius:4px;font-family:inherit;font-size:12px;">
-            <select id="adv-op-2" style="background:#080810;color:#E0E0F0;border:1px solid #1E1E2E;padding:6px;border-radius:4px;font-family:inherit;font-size:11px;">
-              <option value="AND" selected>UND</option>
-              <option value="OR">ODER</option>
-            </select>
-            <input type="text" id="adv-term-3" placeholder="(optional)" style="background:#080810;color:#E0E0F0;border:1px solid #1E1E2E;padding:6px;border-radius:4px;font-family:inherit;font-size:12px;">
+          <div id="adv-rows-container" style="display:flex;flex-direction:column;gap:6px;">
+            <!-- Reihen werden dynamisch via JS gerendert (renderAdvancedRows) -->
           </div>
-          <div style="display:flex;gap:6px;margin-top:8px;align-items:center;">
+          <div style="display:flex;gap:6px;margin-top:8px;align-items:center;flex-wrap:wrap;">
             <button class="btn" onclick="runAdvancedSearch()" style="padding:4px 12px;font-size:11px;">Suchen</button>
-            <button class="btn secondary" onclick="clearAdvancedSearch()" style="padding:4px 10px;font-size:11px;color:#8888AA;">Felder leeren</button>
-            <span style="color:#555570;font-size:10px;margin-left:auto;">Tipp: Felder mit Inhalt werden zusammengeführt — leere Felder werden ignoriert</span>
+            <button class="btn secondary" onclick="addAdvancedRow()" style="padding:4px 10px;font-size:11px;" title="Weiteres Suchfeld hinzufuegen">+ Feld</button>
+            <button class="btn secondary" onclick="clearAdvancedSearch()" style="padding:4px 10px;font-size:11px;color:#8888AA;">Alle leeren</button>
+            <span style="color:#555570;font-size:10px;margin-left:auto;">Leere Felder werden ignoriert · Min. 1 Feld · ✕ entfernt ein Feld</span>
           </div>
         </div>
         <div id="brain-search-info" style="margin-top:6px;font-size:10px;color:#8888AA;display:none;"></div>
@@ -3485,32 +3476,94 @@
       const open = panel.style.display !== 'none';
       panel.style.display = open ? 'none' : 'block';
       if (btn) btn.textContent = open ? '⌃ Erweitert' : '⌄ Einklappen';
+      if (!open) ensureAdvancedRows();
+    }
+
+    // Dynamische Such-Reihen-Struktur:
+    //   advRows = [{term, op}, ...] — die erste Reihe hat op=null,
+    //   jede weitere bekommt einen UND/ODER-Selektor links und einen ✕ rechts.
+    let advRows = [{ term: '', op: null }];
+
+    function ensureAdvancedRows() {
+      if (!advRows.length) advRows = [{ term: '', op: null }];
+      renderAdvancedRows();
+    }
+
+    function addAdvancedRow() {
+      // Vor dem Re-render aktuelle Werte aus DOM uebernehmen damit nichts verloren geht
+      syncAdvancedRowsFromDOM();
+      advRows.push({ term: '', op: 'AND' });
+      renderAdvancedRows();
+      // Fokus auf das neue Feld
+      const last = document.querySelector(`#adv-rows-container .adv-row:last-child input.adv-term`);
+      if (last) last.focus();
+    }
+
+    function removeAdvancedRow(idx) {
+      syncAdvancedRowsFromDOM();
+      if (advRows.length <= 1) return;  // erste bleibt
+      advRows.splice(idx, 1);
+      // Erste Reihe hat immer op=null
+      if (advRows[0]) advRows[0].op = null;
+      renderAdvancedRows();
+    }
+
+    function syncAdvancedRowsFromDOM() {
+      const rows = document.querySelectorAll('#adv-rows-container .adv-row');
+      const next = [];
+      rows.forEach((row, i) => {
+        const term = (row.querySelector('input.adv-term')?.value || '');
+        const op = i === 0 ? null : (row.querySelector('select.adv-op')?.value || 'AND');
+        next.push({ term, op });
+      });
+      if (next.length) advRows = next;
+    }
+
+    function renderAdvancedRows() {
+      const container = document.getElementById('adv-rows-container');
+      if (!container) return;
+      const inputStyle = 'flex:1;min-width:0;background:#080810;color:#E0E0F0;border:1px solid #1E1E2E;padding:6px;border-radius:4px;font-family:inherit;font-size:12px;';
+      const selectStyle = 'background:#080810;color:#E0E0F0;border:1px solid #1E1E2E;padding:6px;border-radius:4px;font-family:inherit;font-size:11px;width:70px;';
+      container.innerHTML = advRows.map((r, i) => {
+        const ph = i === 0 ? 'z.B. flugzeug' : 'z.B. cessna';
+        const term = (r.term || '').replace(/"/g, '&quot;');
+        if (i === 0) {
+          return `<div class="adv-row" style="display:flex;gap:6px;align-items:center;">
+            <span style="width:70px;color:#555570;font-size:11px;text-align:center;">Start</span>
+            <input type="text" class="adv-term" placeholder="${ph}" value="${term}" style="${inputStyle}">
+            <span style="width:24px;"></span>
+          </div>`;
+        }
+        const op = r.op || 'AND';
+        return `<div class="adv-row" style="display:flex;gap:6px;align-items:center;">
+          <select class="adv-op" style="${selectStyle}">
+            <option value="AND"${op === 'AND' ? ' selected' : ''}>UND</option>
+            <option value="OR"${op === 'OR' ? ' selected' : ''}>ODER</option>
+          </select>
+          <input type="text" class="adv-term" placeholder="${ph}" value="${term}" style="${inputStyle}">
+          <button class="btn secondary" onclick="removeAdvancedRow(${i})" title="Diese Zeile entfernen" style="width:24px;height:24px;padding:0;line-height:20px;font-size:11px;color:#FF6B6B;">✕</button>
+        </div>`;
+      }).join('');
     }
 
     function clearAdvancedSearch() {
-      ['adv-term-1','adv-term-2','adv-term-3'].forEach(id => {
-        const el = document.getElementById(id); if (el) el.value = '';
-      });
+      advRows = [{ term: '', op: null }];
+      renderAdvancedRows();
     }
 
     /** Mehrere Volltext-Suchen + Boolean-Kombination (links nach rechts).
      *  Backend bleibt simpel — wir machen N parallele search-text-Calls
      *  und kombinieren die ID-Mengen client-seitig per AND/OR. */
     async function runAdvancedSearch() {
-      const terms = [
-        document.getElementById('adv-term-1')?.value?.trim() || '',
-        document.getElementById('adv-term-2')?.value?.trim() || '',
-        document.getElementById('adv-term-3')?.value?.trim() || '',
-      ];
-      const ops = [
-        document.getElementById('adv-op-1')?.value || 'AND',
-        document.getElementById('adv-op-2')?.value || 'AND',
-      ];
+      syncAdvancedRowsFromDOM();
       const info = document.getElementById('brain-search-info');
-      // Felder mit Inhalt zusammen mit dem ops-Op DAVOR sammeln
+      // Nur Reihen mit Inhalt einsammeln. Die erste belegte Reihe wird zum
+      // Start-Term (op=null), egal an welchem Index sie ursprünglich war.
       const active = [];
-      for (let i = 0; i < 3; i++) {
-        if (terms[i]) active.push({ term: terms[i], op: i === 0 ? null : ops[i - 1] });
+      for (const r of advRows) {
+        const t = (r.term || '').trim();
+        if (!t) continue;
+        active.push({ term: t, op: active.length === 0 ? null : (r.op || 'AND') });
       }
       if (active.length === 0) {
         if (info) info.style.display = 'none';