From 2e6dc44923d7aabdbd3d35c0189313b8ca5e6dac Mon Sep 17 00:00:00 2001
From: karim <karim@gabrielevarano.ch>
Date: Wed, 20 May 2026 22:08:56 +0200
Subject: [PATCH] BarSelect: system-natives <select> + colorScheme:dark
 (Versuch Vectorworks-Style)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

User-Wunsch: Dropdowns wie bei Vectorworks — also nativer OS-Look statt
Custom-Caret + custom Popup.

BarSelect umgebaut:
- appearance:none entfernt → WebKit/macOS rendert seinen eigenen Down-Caret
- custom <Icon arrow_drop_down> entfernt
- pill-Container weg, das <select>-Element selbst traegt jetzt direkt das
  pill-Styling (Hintergrund, Border, Border-Radius)
- colorScheme: 'dark' inline und auch global in index.css gesetzt
  damit macOS-Native-Controls die Dark-Mode-Variante rendern

index.css:
- :root color-scheme: light (default)
- @prefers-color-scheme: dark → color-scheme: dark
- Wirkt auf alle nativen Controls (selects, scrollbars, checkboxen)

Resultat: Klick auf ein Dropdown oeffnet das echte macOS-Popup-Menue
(wie in Vectorworks) statt das HTML-Browser-Dropdown.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 src/OberleisteApp.jsx | 56 +++++++++++++++++++------------------------
 src/index.css         |  5 ++++
 2 files changed, 30 insertions(+), 31 deletions(-)

diff --git a/src/OberleisteApp.jsx b/src/OberleisteApp.jsx
index 12b571a..b398843 100644
--- a/src/OberleisteApp.jsx
+++ b/src/OberleisteApp.jsx
@@ -84,8 +84,12 @@ const pillSelect = {
   fontSize: 10,
 }
 
-// BarSelect: Icon roh links (kein Container) + pill-shaped Native-Select.
-// joinedRight: rechte Pill-Kante flach, fuer Verkettung mit BarButton.
+// BarSelect: Icon roh links + System-natives <select>. Kein appearance:none,
+// kein eigener Caret — WebKit/macOS rendert sein eigenes Drop-Caret und
+// oeffnet das Popup-Menue im OS-Style (wie Vectorworks).
+//
+// `colorScheme: 'dark'` triggert die macOS-Dark-Mode-Variante des nativen
+// Controls. joinedRight bleibt erhalten fuer Verkettung mit BarButton.
 function BarSelect({ icon, value, onChange, title, disabled, width, children, joinedRight }) {
   return (
     <div title={title} style={{
@@ -96,35 +100,25 @@ function BarSelect({ icon, value, onChange, title, disabled, width, children, jo
         <Icon name={icon} size={13}
               style={{ color: 'var(--text-muted)', flexShrink: 0 }} />
       )}
-      <div style={{
-        position: 'relative',
-        height: BAR_H, width,
-        background: 'var(--bg-input)',
-        border: '1px solid var(--border-light)',
-        borderTopLeftRadius: 999, borderBottomLeftRadius: 999,
-        borderTopRightRadius: joinedRight ? 0 : 999,
-        borderBottomRightRadius: joinedRight ? 0 : 999,
-        borderRight: joinedRight ? 'none' : '1px solid var(--border-light)',
-        overflow: 'hidden', flexShrink: 0,
-      }}>
-        <select
-          value={value || ''}
-          disabled={disabled}
-          onChange={(e) => onChange(e.target.value)}
-          style={{
-            width: '100%', height: '100%', minWidth: 0,
-            background: 'transparent', border: 'none', outline: 'none',
-            padding: '0 22px 0 12px',
-            fontSize: 11, color: 'var(--text-primary)',
-            appearance: 'none', WebkitAppearance: 'none', MozAppearance: 'none',
-            cursor: disabled ? 'not-allowed' : 'pointer',
-          }}
-        >{children}</select>
-        <Icon name="arrow_drop_down" size={14}
-              style={{ position: 'absolute', right: 6, top: '50%',
-                       transform: 'translateY(-50%)',
-                       color: 'var(--text-muted)', pointerEvents: 'none' }} />
-      </div>
+      <select
+        value={value || ''}
+        disabled={disabled}
+        onChange={(e) => onChange(e.target.value)}
+        style={{
+          height: BAR_H, width,
+          fontSize: 11, color: 'var(--text-primary)',
+          background: 'var(--bg-input)',
+          border: '1px solid var(--border-light)',
+          borderTopLeftRadius: 999, borderBottomLeftRadius: 999,
+          borderTopRightRadius: joinedRight ? 0 : 999,
+          borderBottomRightRadius: joinedRight ? 0 : 999,
+          borderRight: joinedRight ? 'none' : '1px solid var(--border-light)',
+          padding: '0 8px 0 10px',
+          colorScheme: 'dark',
+          cursor: disabled ? 'not-allowed' : 'pointer',
+          outline: 'none', flexShrink: 0,
+        }}
+      >{children}</select>
     </div>
   )
 }
diff --git a/src/index.css b/src/index.css
index 998b49b..e022e42 100644
--- a/src/index.css
+++ b/src/index.css
@@ -20,6 +20,10 @@
 }
 
 :root {
+  /* Native OS-Controls (selects, scrollbars) sollen dem aktuellen Theme
+     folgen. Wert wird im prefers-color-scheme: dark Block ueberschrieben. */
+  color-scheme: light;
+
   /* === LIGHT MODE (RAPPORT cream + olive + deep green) === */
   --bg-base:       #e0dbd4;
   --bg-panel:      #e0dbd4;
@@ -75,6 +79,7 @@
 /* === DARK MODE (Rhino-tonig) === */
 @media (prefers-color-scheme: dark) {
   :root {
+    color-scheme: dark;
     --bg-base:       #2a2a2a;
     --bg-panel:      #2a2a2a;
     --bg-section:    #2a2a2a;