From e19bbafe38ef8cf5e64b170f0d51a5d2716fe4a5 Mon Sep 17 00:00:00 2001
From: karim <karim@gabrielevarano.ch>
Date: Wed, 20 May 2026 22:18:37 +0200
Subject: [PATCH] =?UTF-8?q?.native-control=20auch=20fuer=20Buttons=20?=
 =?UTF-8?q?=E2=80=94=20View-Toggle=20+=20BarButton=20system-nativ?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

User-Screenshot: dropdowns waren native, aber View-Toggle (Top/Front/...)
und die Icon-Buttons (Camera/Gear/Zoom/etc.) sahen weiterhin custom aus.

Grund: globales `button { border: none; background: none; }` strippt das
System-Push-Button-Styling fuer alle <button>s. `.native-control` deckte
nur select + input ab.

Fix:
- `.native-control` erweitert auf `button.native-control`: revert auf
  alle Button-Reset-Properties → WebKit rendert macOS-Push-Button-Chrome
- `.is-active`-Modifier: bold + accent-Tint fuer Toggle-Active-State
  (macOS-Native hat keinen "pressed-Toggle"-Look fuer normale Buttons)
- BarButton: className="native-control" + active=true → is-active
- View-Toggle (Top/Front/Right/Iso/Persp): pill-Container weg,
  individuelle native buttons mit is-active wenn matchView() true

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 src/OberleisteApp.jsx | 60 +++++++++++++++++++------------------------
 src/index.css         | 19 +++++++++++---
 2 files changed, 41 insertions(+), 38 deletions(-)

diff --git a/src/OberleisteApp.jsx b/src/OberleisteApp.jsx
index 5202e4c..798853a 100644
--- a/src/OberleisteApp.jsx
+++ b/src/OberleisteApp.jsx
@@ -117,21 +117,19 @@ function BarSelect({ icon, value, onChange, title, disabled, width, children })
   )
 }
 
-// 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).
+// BarButton: bare <button class="native-control"> — macOS Push-Button
+// Look (gewölbt, rounded). active=true setzt is-active fuer Bold-Text
+// und Icon-Tint.
 function BarButton({ icon, onClick, title, disabled, active }) {
   return (
-    <button onClick={onClick} disabled={disabled} title={title}
+    <button
+      className={`native-control${active ? ' is-active' : ''}`}
+      onClick={onClick} disabled={disabled} title={title}
       style={{
-        height: BAR_H, minWidth: BAR_H,
-        padding: '0 6px',
+        height: BAR_H,
         fontSize: 11,
         colorScheme: 'dark',
-        accentColor: active ? 'var(--accent)' : undefined,
         flexShrink: 0,
-        cursor: disabled ? 'not-allowed' : 'pointer',
-        opacity: disabled ? 0.5 : 1,
       }}>
       <Icon name={icon} size={13}
             style={{ color: active ? 'var(--accent)' : undefined,
@@ -319,31 +317,25 @@ export default function OberleisteApp() {
       </button>
       <div style={sep} />
       {/* ====== VIEW (Top/Front/Right/Iso/Persp + Kamera) ======
-          Pill-foermige Toggle-Gruppe, kein Group-Label. */}
-      <div style={{ display: 'inline-flex', gap: 0,
-                     border: '1px solid var(--border-light)', borderRadius: 999,
-                     overflow: 'hidden', flexShrink: 0 }}>
-        {VIEWS.map((v, idx) => (
-          <button
-            key={v.value}
-            onClick={() => setView(v.value)}
-            title={`Ansicht ${v.label}`}
-            style={{
-              height: BAR_H, padding: '0 10px',
-              background: matchView(v.value) ? 'var(--accent)' : 'var(--bg-input)',
-              color: matchView(v.value) ? 'var(--bg-panel)' : 'var(--text-primary)',
-              border: 'none',
-              borderLeft: idx > 0 ? '1px solid var(--border-light)' : 'none',
-              cursor: 'pointer',
-              display: 'flex', alignItems: 'center', gap: 4,
-              fontSize: 10,
-            }}
-          >
-            <Icon name={v.icon} size={13} />
-            <span>{v.label}</span>
-          </button>
-        ))}
-      </div>
+          Individuelle native Push-Buttons. Active-State via is-active
+          (Bold + Icon-Tint). Kein Pill-Container. */}
+      {VIEWS.map(v => (
+        <button
+          key={v.value}
+          className={`native-control${matchView(v.value) ? ' is-active' : ''}`}
+          onClick={() => setView(v.value)}
+          title={`Ansicht ${v.label}`}
+          style={{
+            height: BAR_H, fontSize: 11,
+            colorScheme: 'dark', flexShrink: 0,
+          }}
+        >
+          <Icon name={v.icon} size={13}
+                style={{ verticalAlign: 'middle', marginRight: 4,
+                          color: matchView(v.value) ? 'var(--accent)' : undefined }} />
+          {v.label}
+        </button>
+      ))}
       <BarButton icon="videocam" onClick={() => openKameraPanel()}
                   title="Kamera-Einstellungen (Position, Target, Linse, Presets)" />
 
diff --git a/src/index.css b/src/index.css
index 37d365b..498ea6d 100644
--- a/src/index.css
+++ b/src/index.css
@@ -198,9 +198,11 @@ select:hover {
 
 /* Opt-out: System-native Chrome (Oberleiste). Setzt die globalen
    pill/appearance:none Overrides zurueck und ueberlaesst WebKit das
-   Rendering — Standard-macOS-Combobox + Native-Popup-Menue. */
+   Rendering — Standard-macOS-Combobox + Native-Popup-Menue. Gilt auch
+   fuer <button> die im globalen button{} alles abgestreift kriegen. */
 select.native-control,
-input.native-control {
+input.native-control,
+button.native-control {
   appearance: auto;
   -webkit-appearance: auto;
   background: revert;
@@ -211,17 +213,26 @@ input.native-control {
   font: revert;
   letter-spacing: revert;
   box-shadow: none;
+  transition: none;
+  color: revert;
 }
 select.native-control:hover,
-input.native-control:hover {
+input.native-control:hover,
+button.native-control:hover {
   background: revert;
   border-color: revert;
 }
 select.native-control:focus,
-input.native-control:focus {
+input.native-control:focus,
+button.native-control:focus {
   box-shadow: revert;
   border-color: revert;
 }
+/* Default-Push-Button-Variante fuer aktive Toggles. macOS rendert das
+   als geful­ltes blaues Pulsing-Button — wir tinten es via accent-color. */
+button.native-control.is-active {
+  font-weight: 600;
+}
 
 /* Utility */
 .label-xs {