From 536d42f0978259539ea96c5113f8ab0fd867f9ea Mon Sep 17 00:00:00 2001
From: karim <karim@gabrielevarano.ch>
Date: Wed, 20 May 2026 22:12:15 +0200
Subject: [PATCH] BarSelect/BarButton: bare native chrome auch im Ruhezustand
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

User-Wunsch: nicht nur das Popup, auch das Feld selber soll system-nativ
aussehen. Vorher hatten die <select>-Elemente noch pill-Background +
Border + Radius — das uebermalte WebKits Native-Look.

BarSelect: alle Styling-Overrides entfernt (background/border/border-radius
weg). Nur Hoehe/Breite/Font/colorScheme bleibt — macOS rendert jetzt das
gewoelbte System-Combobox-Feld inkl. nativem Drop-Caret.

BarButton: analog umgestellt — kein eigener Container, native <button>-
Chrome. active-State via accent-color (CSS) + Icon-Tint.

Custom-Mode-Massstab-Input (1:N): pill-Styling weg, nativer <input>.

joinedRight/joinedLeft Props bleiben akzeptiert aber sind no-ops — native
Felder lassen sich nicht visuell verketten.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 src/OberleisteApp.jsx | 59 ++++++++++++++++++-------------------------
 1 file changed, 24 insertions(+), 35 deletions(-)

diff --git a/src/OberleisteApp.jsx b/src/OberleisteApp.jsx
index b398843..867da81 100644
--- a/src/OberleisteApp.jsx
+++ b/src/OberleisteApp.jsx
@@ -84,13 +84,14 @@ const pillSelect = {
   fontSize: 10,
 }
 
-// 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).
+// BarSelect: Icon roh links + komplett system-natives <select>.
+// Kein Background, kein Border, kein Border-Radius — WebKit/macOS rendert
+// seinen eigenen Combobox-Look auch im Ruhezustand (gewölbtes Feld mit
+// Caret-Indikator rechts). `colorScheme: dark` triggert die Dark-Variante.
 //
-// `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 }) {
+// joinedRight bleibt als Prop drin aber als no-op — native Felder koennen
+// nicht visuell mit unseren Custom-Buttons verkettet werden.
+function BarSelect({ icon, value, onChange, title, disabled, width, children }) {
   return (
     <div title={title} style={{
       display: 'inline-flex', alignItems: 'center', gap: 5,
@@ -106,43 +107,34 @@ function BarSelect({ icon, value, onChange, title, disabled, width, children, jo
         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',
+          fontSize: 11,
           colorScheme: 'dark',
-          cursor: disabled ? 'not-allowed' : 'pointer',
-          outline: 'none', flexShrink: 0,
+          flexShrink: 0,
         }}
       >{children}</select>
     </div>
   )
 }
 
-// BarButton: pill-foermiger Icon-Button. joinedLeft = linke Kante flach,
-// so dass er nahtlos an einen BarSelect-joinedRight andockt.
-function BarButton({ icon, onClick, title, disabled, joinedLeft, active }) {
+// BarButton: ebenfalls system-nativer Look — bare <button> mit Default-
+// Chrome, kein eigener Background/Border. macOS rendert sein Push-Button
+// Styling. `active` setzt die accent-Farbe via accent-color (CSS).
+function BarButton({ icon, onClick, title, disabled, active }) {
   return (
     <button onClick={onClick} disabled={disabled} title={title}
       style={{
-        height: BAR_H, width: BAR_H,
-        background: active ? 'var(--accent)' : 'var(--bg-input)',
-        border: '1px solid var(--border-light)',
-        borderTopLeftRadius: joinedLeft ? 0 : 999,
-        borderBottomLeftRadius: joinedLeft ? 0 : 999,
-        borderTopRightRadius: 999, borderBottomRightRadius: 999,
-        borderLeft: joinedLeft ? 'none' : '1px solid var(--border-light)',
-        display: 'flex', alignItems: 'center', justifyContent: 'center',
+        height: BAR_H, minWidth: BAR_H,
+        padding: '0 6px',
+        fontSize: 11,
+        colorScheme: 'dark',
+        accentColor: active ? 'var(--accent)' : undefined,
+        flexShrink: 0,
         cursor: disabled ? 'not-allowed' : 'pointer',
-        opacity: disabled ? 0.5 : 1, flexShrink: 0,
-        padding: 0,
+        opacity: disabled ? 0.5 : 1,
       }}>
       <Icon name={icon} size={13}
-            style={{ color: active ? 'var(--bg-panel)' : 'var(--text-muted)' }} />
+            style={{ color: active ? 'var(--accent)' : undefined,
+                      verticalAlign: 'middle' }} />
     </button>
   )
 }
@@ -419,12 +411,9 @@ export default function OberleisteApp() {
           onBlur={applyDraft}
           style={{
             height: BAR_H, width: 100,
-            background: 'var(--bg-input)',
-            border: '1px solid var(--border-light)',
-            borderRadius: 999,
-            padding: '0 12px', fontSize: 11,
+            fontSize: 11,
             fontFamily: 'DM Mono, monospace',
-            color: 'var(--text-primary)', outline: 'none',
+            colorScheme: 'dark',
           }}
           title="Massstab eingeben (Enter = uebernehmen, Esc = abbrechen)"
         />