From 3f5f48cb2c0e59fc656e7aa3d1978e1226a4f999 Mon Sep 17 00:00:00 2001
From: karim <karim@gabrielevarano.ch>
Date: Wed, 20 May 2026 23:32:24 +0200
Subject: [PATCH] Caret differentiated + Accent-Hover wie in Elemente
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

User:
1. Wireframe-Caret war fast draussen (zu weit rechts), bei anderen
   minimal mehr rechts erwartet
2. Hover-Effekt mit accent-border wie in Elemente fuer alle Pills

Fix 1: backgroundPosition differenziert:
- Ohne Gear: 'right 10px center' (normaler Pill-Rand-Abstand)
- Mit Gear: 'right 1px center' (klebt am Gear)
So sitzt der Caret optisch konsistent — bei Display innen, bei den
anderen direkt vor dem Gear.

Fix 2: Hover-Akzent analog ElementeApp PillButton:
- BarCombo Pill-Container: bg → bg-item-hover, border → accent
- BarButton (Camera, Settings-Gears in Pills, Print-Toggle): selbe Logik,
  active-State bleibt accent-fill
- View-Toggle-Buttons: bg → bg-item-hover, text → accent-light, active
  bleibt accent-fill
Transitions 0.15s fuer smooth feel.

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

diff --git a/src/OberleisteApp.jsx b/src/OberleisteApp.jsx
index 17c86de..eca3131 100644
--- a/src/OberleisteApp.jsx
+++ b/src/OberleisteApp.jsx
@@ -160,14 +160,25 @@ function BarCombo({
         </span>
       )}
       {/* Combined pill: select + optional gear, gemeinsamer bg + border */}
-      <div title={title} style={{
-        display: 'inline-flex', alignItems: 'stretch',
-        height: BAR_H, width,
-        background: 'var(--bg-input)',
-        border: '1px solid var(--border)',
-        borderRadius: 999,
-        overflow: 'hidden',
-      }}>
+      <div title={title}
+        onMouseEnter={(e) => {
+          if (disabled) return
+          e.currentTarget.style.borderColor = 'var(--accent)'
+          e.currentTarget.style.background = 'var(--bg-item-hover)'
+        }}
+        onMouseLeave={(e) => {
+          e.currentTarget.style.borderColor = 'var(--border)'
+          e.currentTarget.style.background = 'var(--bg-input)'
+        }}
+        style={{
+          display: 'inline-flex', alignItems: 'stretch',
+          height: BAR_H, width,
+          background: 'var(--bg-input)',
+          border: '1px solid var(--border)',
+          borderRadius: 999,
+          overflow: 'hidden',
+          transition: 'border-color 0.15s, background 0.15s',
+        }}>
         <select
           value={value || ''}
           disabled={disabled}
@@ -183,10 +194,10 @@ function BarCombo({
             appearance: 'none', WebkitAppearance: 'none',
             backgroundImage: 'var(--select-arrow)',
             backgroundRepeat: 'no-repeat',
-            // Caret klebt am rechten Rand des Select-Bereichs (= direkt
-            // links vom Gear). Mit Gear: symmetrische Abstaende
-            // caret-to-gear ≈ gear-to-pill-right-edge.
-            backgroundPosition: 'right 2px center',
+            // Caret-Position differenziert: ohne Gear normaler Abstand
+            // (10px vom Pill-Rand), mit Gear minimaler Abstand damit
+            // er an den Gear ranruckt.
+            backgroundPosition: onGear ? 'right 1px center' : 'right 10px center',
             cursor: disabled ? 'not-allowed' : 'pointer',
             letterSpacing: 0,
           }}
@@ -213,6 +224,16 @@ function BarCombo({
 function BarButton({ icon, onClick, title, disabled, active, joinedLeft }) {
   return (
     <button onClick={onClick} disabled={disabled} title={title}
+      onMouseEnter={(e) => {
+        if (disabled || active) return
+        e.currentTarget.style.borderColor = 'var(--accent)'
+        e.currentTarget.style.background = 'var(--bg-item-hover)'
+      }}
+      onMouseLeave={(e) => {
+        if (active) return
+        e.currentTarget.style.borderColor = 'var(--border)'
+        e.currentTarget.style.background = 'var(--bg-input)'
+      }}
       style={{
         height: BAR_H, width: BAR_H,
         background: active ? 'var(--accent)' : 'var(--bg-input)',
@@ -225,6 +246,7 @@ function BarButton({ icon, onClick, title, disabled, active, joinedLeft }) {
         cursor: disabled ? 'not-allowed' : 'pointer',
         opacity: disabled ? 0.5 : 1, flexShrink: 0,
         padding: 0,
+        transition: 'border-color 0.15s, background 0.15s',
       }}>
       <Icon name={icon} size={13}
             style={{ color: active ? 'var(--bg-panel)' : 'var(--text-muted)' }} />
@@ -422,6 +444,16 @@ export default function OberleisteApp() {
               key={v.value}
               onClick={() => setView(v.value)}
               title={`Ansicht ${v.label}`}
+              onMouseEnter={(e) => {
+                if (isActive) return
+                e.currentTarget.style.background = 'var(--bg-item-hover)'
+                e.currentTarget.style.color = 'var(--accent-light)'
+              }}
+              onMouseLeave={(e) => {
+                if (isActive) return
+                e.currentTarget.style.background = 'var(--bg-input)'
+                e.currentTarget.style.color = 'var(--text-primary)'
+              }}
               style={{
                 height: BAR_H, padding: '0 10px',
                 background: isActive ? 'var(--accent)' : 'var(--bg-input)',
@@ -435,6 +467,7 @@ export default function OberleisteApp() {
                 display: 'inline-flex', alignItems: 'center', gap: 4,
                 fontSize: 10, fontWeight: isActive ? 600 : 500,
                 cursor: 'pointer', flexShrink: 0,
+                transition: 'background 0.15s, color 0.15s',
               }}
             >
               <Icon name={v.icon} size={13} />