From 2bcf6095ab2ae6634ab3f35a9a8e07f388d48472 Mon Sep 17 00:00:00 2001
From: Christian Heubaum <christianheubaum@MacBookAir.fritz.box>
Date: Wed, 7 Oct 2026 00:01:12 +0200
Subject: [PATCH] =?UTF-8?q?Stammvertreter-Auswahl=20als=20A=E2=80=93Z=20so?=
 =?UTF-8?q?rtiertes=20Dropdown?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Im Vertretungs-Dialog ersetzt ein Dropdown die Kachel-Auswahl; Sidebar- und Admin-Liste ebenfalls nach Name sortiert.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 admin.html |  2 +-
 index.html | 28 ++++++++++++----------------
 2 files changed, 13 insertions(+), 17 deletions(-)

diff --git a/admin.html b/admin.html
index 117035d..4341eb4 100644
--- a/admin.html
+++ b/admin.html
@@ -471,7 +471,7 @@ function switchAdminTab(tab) {
 let _svAdminPhotoB64 = null;
 
 function renderSvList() {
-    const list = loadStammvertreter();
+    const list = loadStammvertreter().sort((a, b) => (a.name || '').localeCompare(b.name || '', 'de', { sensitivity: 'base' }));
     const container = document.getElementById('admin-sv-list');
     if (!list.length) {
         container.innerHTML = `<div style="color:var(--muted);font-size:0.88rem;padding:8px 0;">Noch keine Stammvertreter gespeichert.</div>`;
diff --git a/index.html b/index.html
index f6f2545..afd5b64 100644
--- a/index.html
+++ b/index.html
@@ -1734,7 +1734,7 @@
 
         <div id="sub-sv-picker" style="display:none;margin-bottom:12px;">
             <div style="font-size:0.75rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:8px;">Stammvertreter wählen</div>
-            <div id="sub-sv-list" style="display:flex;flex-wrap:wrap;gap:8px;max-height:110px;overflow-y:auto;"></div>
+            <select id="sub-sv-select" onchange="if(this.value) pickStammvertreter(this.value)" style="width:100%;padding:8px;border:1px solid var(--border);border-radius:6px;font-size:0.9rem;"></select>
             <hr style="margin:12px 0 0;border:none;border-top:1px solid var(--border);">
         </div>
 
@@ -2133,10 +2133,14 @@ function deleteStammvertreter(svId) {
     renderStammvertreterSection();
 }
 
+function sortSvByName(list) {
+    return [...list].sort((a, b) => (a.name || '').localeCompare(b.name || '', 'de', { sensitivity: 'base' }));
+}
+
 function renderStammvertreterSection() {
     const container = document.getElementById('sv-list-container');
     if (!container) return;
-    const list = loadStammvertreter();
+    const list = sortSvByName(loadStammvertreter());
     if (list.length === 0) {
         container.innerHTML = `<div style="color:var(--muted);font-size:0.82rem;padding:2px 0 8px;">Noch keine gespeichert. → <a href="admin.html" target="_blank" style="color:var(--red);">Admin öffnen</a> zum Importieren aus anderen Chaptern.</div>`;
         return;
@@ -2154,23 +2158,15 @@ function renderStammvertreterSection() {
 }
 
 function renderSvPicker() {
-    const list = loadStammvertreter();
+    const list = sortSvByName(loadStammvertreter());
     const picker = document.getElementById('sub-sv-picker');
-    const container = document.getElementById('sub-sv-list');
-    if (!picker || !container) return;
+    const select = document.getElementById('sub-sv-select');
+    if (!picker || !select) return;
     if (list.length === 0) { picker.style.display = 'none'; return; }
     picker.style.display = '';
-    container.innerHTML = '';
-    list.forEach(sv => {
-        const photoHtml = sv.photoB64
-            ? `<img src="${sv.photoB64}" style="width:32px;height:32px;border-radius:50%;object-fit:cover;">`
-            : `<div style="width:32px;height:32px;border-radius:50%;background:${getColor(sv.name)};display:flex;align-items:center;justify-content:center;color:white;font-size:0.68rem;font-weight:700;">${getInitials(sv.name)}</div>`;
-        const card = document.createElement('div');
-        card.style.cssText = 'display:flex;align-items:center;gap:7px;padding:6px 9px;background:#f8f9fa;border:1px solid var(--border);border-radius:8px;cursor:pointer;';
-        card.innerHTML = `${photoHtml}<div><div style="font-size:0.79rem;font-weight:600;">${escHtml(sv.name)}</div><div style="font-size:0.69rem;color:var(--muted);">${escHtml(sv.company||'')}</div></div>`;
-        card.onclick = () => pickStammvertreter(sv.id);
-        container.appendChild(card);
-    });
+    select.innerHTML = '<option value="">– Stammvertreter auswählen –</option>' + list.map(sv =>
+        `<option value="${escHtml(sv.id)}">${escHtml(sv.name)}${sv.company ? ' · ' + escHtml(sv.company) : ''}</option>`
+    ).join('');
 }
 
 function pickStammvertreter(svId) {