From cc35161e7479e74a69fb102373851158b2b2a17e Mon Sep 17 00:00:00 2001
From: marc <marc@shortcake.local>
Date: Sat, 5 Sep 2026 07:50:19 +0200
Subject: [PATCH] feat(calendar): Kalenderwahl wieder als Ausklappliste,
 weiterhin mit Farbe

Die Plaketten aus dem vorigen Stand nahmen bei mehreren Kalendern viel
Platz im Formular und liefen ueber mehrere Zeilen um. Also zurueck zur
Ausklappliste -- aber nicht zurueck zum reinen Text.

Ein natives <select> kam dafuer nicht in Frage: Dessen Eintraege lassen
sich in keinem Browser verlaesslich einfaerben, und im zugeklappten
Zustand schon gar nicht. Deshalb eine eigene Liste, die im Ruhezustand
aussieht wie die anderen Felder daneben, aber den Farbpunkt des
Kalenders traegt -- gefuellt fuer den gewaehlten, leerer Ring fuer die
anderen, dieselbe Sprache wie in der Kalenderliste.

Eine Falle dabei: Escape muss beim Schliessen der Liste angehalten
werden. Sonst laeuft es weiter bis zum Fenster, wo der Termindialog
lauscht, und macht gleich das ganze Formular zu -- mitsamt allem, was
schon eingetippt war.

Selbsttest weiter 36 gruen.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 .../src/components/calendar/EventDialog.tsx   |   4 +-
 frontend/src/components/calendar/controls.tsx | 120 ++++++++++++------
 2 files changed, 84 insertions(+), 40 deletions(-)

diff --git a/frontend/src/components/calendar/EventDialog.tsx b/frontend/src/components/calendar/EventDialog.tsx
index 7f10c0a..1357d33 100644
--- a/frontend/src/components/calendar/EventDialog.tsx
+++ b/frontend/src/components/calendar/EventDialog.tsx
@@ -5,7 +5,7 @@ import {
   addDays, allDayISO, dateFromInput, eventDay, nthOfMonth, timedISO,
   toDateInput, toTimeInput, weekdayCodeOf, weekdayCodes,
 } from './dates'
-import { CalendarPicker, ColorSwatches, Toggle } from './controls'
+import { CalendarSelect, ColorSwatches, Toggle } from './controls'
 
 interface Props {
   /** Fehlt er, entsteht ein neuer Termin. */
@@ -215,7 +215,7 @@ export default function EventDialog({ event, defaultStart, calendars, calendarId
                 Speichern die Sammlung, behält aber seine Kennung – für
                 CalDAV-Clients derselbe Termin an neuer Adresse, nicht ein
                 neuer. */}
-            <CalendarPicker calendars={calendars} value={calId} onChange={setCalId} disabled={readOnly} />
+            <CalendarSelect calendars={calendars} value={calId} onChange={setCalId} disabled={readOnly} />
             {!!event && calId !== calendarId && (
               <p style={{ margin: '6px 2px 0', fontSize: 12, color: 'var(--color-text-muted)', lineHeight: 1.4 }}>
                 Wird beim Speichern nach „{calendars.find(c => c.id === calId)?.name}" verschoben
diff --git a/frontend/src/components/calendar/controls.tsx b/frontend/src/components/calendar/controls.tsx
index a254190..d3d8045 100644
--- a/frontend/src/components/calendar/controls.tsx
+++ b/frontend/src/components/calendar/controls.tsx
@@ -1,4 +1,4 @@
-import type { CSSProperties } from 'react'
+import { useEffect, useRef, useState, type CSSProperties } from 'react'
 
 /** Eine Palette für Kalender **und** Termine – zwei getrennte Listen liefen
  *  sonst mit der Zeit auseinander, und ein Termin in einer Farbe, die es als
@@ -95,55 +95,99 @@ export function ColorSwatches({ value, onChange, inherit, disabled }: {
 }
 
 /**
- * Kalenderwahl als farbige Plaketten statt als Auswahlfeld.
+ * Kalenderwahl als Ausklappliste – mit dem Farbpunkt des Kalenders.
  *
- * Ein Auswahlfeld zeigt nur den Namen – die Farbe aber ist das, woran man
- * einen Kalender im Raster wiedererkennt. Wer „Arbeit" wählt, soll dabei
+ * Bewusst kein natives `<select>`: Dessen Einträge lassen sich in keinem
+ * Browser verlässlich einfärben, und ausgerechnet die Farbe ist das, woran
+ * man einen Kalender im Raster wiedererkennt. Wer „Arbeit" wählt, soll dabei
  * schon das Blau sehen, in dem der Termin gleich erscheint.
  *
  * Der Punkt spricht dieselbe Sprache wie überall sonst im Kalender: gefüllt
  * heißt gewählt, ein leerer Ring heißt nicht gewählt.
  */
-export function CalendarPicker({ calendars, value, onChange, disabled }: {
+export function CalendarSelect({ calendars, value, onChange, disabled }: {
   calendars: { id: string; name: string; color: string }[]
   value: string
   onChange: (id: string) => void
   disabled?: boolean
 }) {
+  const [open, setOpen] = useState(false)
+  const ref = useRef<HTMLDivElement>(null)
+  const current = calendars.find(c => c.id === value)
+
+  useEffect(() => {
+    if (!open) return
+    function onDoc(e: globalThis.MouseEvent) {
+      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false)
+    }
+    document.addEventListener('mousedown', onDoc)
+    return () => document.removeEventListener('mousedown', onDoc)
+  }, [open])
+
+  const field: CSSProperties = {
+    width: '100%', boxSizing: 'border-box', display: 'flex', alignItems: 'center', gap: 9,
+    background: 'var(--color-surface-2)', border: '1px solid var(--color-border)',
+    borderRadius: 8, padding: '8px 10px', fontSize: 13.5, color: 'var(--color-text)',
+    cursor: disabled ? 'default' : 'pointer', opacity: disabled ? 0.6 : 1, textAlign: 'left',
+  }
+
+  const dot = (color: string, filled: boolean) => (
+    <span style={{
+      width: 12, height: 12, borderRadius: '50%', flexShrink: 0,
+      border: `2px solid ${color}`, background: filled ? color : 'transparent',
+    }} />
+  )
+
   return (
-    <div style={{ display: 'flex', gap: 7, flexWrap: 'wrap' }}>
-      {calendars.map(cal => {
-        const on = cal.id === value
-        return (
-          <button
-            key={cal.id} type="button" disabled={disabled}
-            onClick={() => onChange(cal.id)}
-            aria-pressed={on}
-            style={{
-              display: 'flex', alignItems: 'center', gap: 7, maxWidth: '100%',
-              padding: '7px 12px 7px 10px', borderRadius: 999, fontSize: 13,
-              border: `1.5px solid ${on ? cal.color : 'var(--color-border)'}`,
-              // Nur ein Hauch der Kalenderfarbe: Ausgefüllte Plaketten in acht
-              // kräftigen Tönen nebeneinander erschlagen das ganze Formular.
-              background: on ? cal.color + '22' : 'transparent',
-              color: on ? 'var(--color-text)' : 'var(--color-text-muted)',
-              cursor: disabled ? 'default' : 'pointer',
-              opacity: disabled ? 0.6 : 1,
-              transition: 'background 0.12s, border-color 0.12s, color 0.12s',
-            } as CSSProperties}
-          >
-            <span style={{
-              width: 12, height: 12, borderRadius: '50%', flexShrink: 0,
-              border: `2px solid ${cal.color}`,
-              background: on ? cal.color : 'transparent',
-              transition: 'background 0.12s',
-            }} />
-            <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
-              {cal.name}
-            </span>
-          </button>
-        )
-      })}
+    <div
+      ref={ref}
+      style={{ position: 'relative' }}
+      // Escape schließt nur die Liste. Ohne das Anhalten liefe es weiter bis
+      // zum Fenster und machte gleich den ganzen Termindialog zu – mitsamt
+      // allem, was schon eingetippt war.
+      onKeyDown={e => { if (open && e.key === 'Escape') { e.stopPropagation(); setOpen(false) } }}
+    >
+      <button type="button" disabled={disabled} onClick={() => setOpen(o => !o)}
+              aria-haspopup="listbox" aria-expanded={open} style={field}>
+        {current && dot(current.color, true)}
+        <span style={{ flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+          {current?.name ?? 'Kalender wählen'}
+        </span>
+        <span style={{ color: 'var(--color-text-muted)', fontSize: 10, flexShrink: 0 }}>▼</span>
+      </button>
+
+      {open && !disabled && (
+        <div role="listbox" style={{
+          position: 'absolute', left: 0, right: 0, top: 'calc(100% + 4px)', zIndex: 40,
+          background: 'var(--color-surface)', border: '1px solid var(--color-border)',
+          borderRadius: 8, boxShadow: '0 6px 18px rgba(0,0,0,0.28)',
+          maxHeight: 220, overflowY: 'auto',
+        }}>
+          {calendars.map(cal => {
+            const on = cal.id === value
+            return (
+              <button
+                key={cal.id} type="button" role="option" aria-selected={on}
+                onClick={() => { onChange(cal.id); setOpen(false) }}
+                className="aether-cal-row"
+                style={{
+                  display: 'flex', alignItems: 'center', gap: 9, width: '100%',
+                  padding: '9px 10px', border: 'none', textAlign: 'left', cursor: 'pointer',
+                  fontSize: 13.5, color: 'var(--color-text)',
+                  // Nur ein Hauch der Kalenderfarbe für den gewählten Eintrag:
+                  // voll ausgefüllt schriee die Liste den Nebendarsteller aus.
+                  background: on ? cal.color + '22' : 'transparent',
+                }}
+              >
+                {dot(cal.color, on)}
+                <span style={{ flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                  {cal.name}
+                </span>
+              </button>
+            )
+          })}
+        </div>
+      )}
     </div>
   )
 }