From 7d6d9dabf26edd038b3fa2782b5fc25741d07022 Mon Sep 17 00:00:00 2001
From: Lars <Lars@stommer.de>
Date: Fri, 20 Mar 2026 06:28:31 +0100
Subject: [PATCH] feat: add toggle buttons for boolean features in matrix
 editor
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Boolean features now show as visual toggle buttons (AN/AUS)
- Desktop: compact toggle (✓ AN / ✗ AUS)
- Mobile: full-width toggle (✓ Aktiviert / ✗ Deaktiviert)
- Prevents invalid values for boolean features
- Green when enabled, gray when disabled

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/pages/AdminTierLimitsPage.jsx | 58 ++++++++++++++++++++++
 1 file changed, 58 insertions(+)

diff --git a/frontend/src/pages/AdminTierLimitsPage.jsx b/frontend/src/pages/AdminTierLimitsPage.jsx
index ab2bc89..801d1e6 100644
--- a/frontend/src/pages/AdminTierLimitsPage.jsx
+++ b/frontend/src/pages/AdminTierLimitsPage.jsx
@@ -331,6 +331,36 @@ export default function AdminTierLimitsPage() {
                       const currentValue = getCurrentValue(tier.id, feature.id)
                       const isChanged = `${tier.id}:${feature.id}` in changes && changes[`${tier.id}:${feature.id}`].value !== ''
 
+                      // Boolean features: Toggle button
+                      if (feature.limit_type === 'boolean') {
+                        const isEnabled = currentValue !== 0 && currentValue !== '0'
+                        return (
+                          <td key={`${tier.id}-${feature.id}`} style={{
+                            textAlign: 'center', padding: 8,
+                            background: isChanged ? 'var(--accent-light)' : 'transparent'
+                          }}>
+                            <button
+                              onClick={() => handleChange(tier.id, feature.id, isEnabled ? '0' : '1')}
+                              style={{
+                                padding: '6px 16px',
+                                border: `2px solid ${isEnabled ? 'var(--accent)' : 'var(--border)'}`,
+                                borderRadius: 20,
+                                background: isEnabled ? 'var(--accent)' : 'var(--surface)',
+                                color: isEnabled ? 'white' : 'var(--text3)',
+                                fontSize: 12,
+                                fontWeight: 600,
+                                cursor: 'pointer',
+                                transition: 'all 0.2s',
+                                minWidth: 70
+                              }}
+                            >
+                              {isEnabled ? '✓ AN' : '✗ AUS'}
+                            </button>
+                          </td>
+                        )
+                      }
+
+                      // Count features: Text input
                       return (
                         <td key={`${tier.id}-${feature.id}`} style={{
                           textAlign: 'center', padding: 8,
@@ -411,6 +441,34 @@ function FeatureMobileCard({ feature, tiers, getCurrentValue, handleChange, chan
             const currentValue = getCurrentValue(tier.id, feature.id)
             const isChanged = `${tier.id}:${feature.id}` in changes && changes[`${tier.id}:${feature.id}`].value !== ''
 
+            // Boolean features: Toggle button
+            if (feature.limit_type === 'boolean') {
+              const isEnabled = currentValue !== 0 && currentValue !== '0'
+              return (
+                <div key={tier.id} className="form-row" style={{ marginBottom: 8, alignItems: 'center' }}>
+                  <label className="form-label" style={{ fontSize: 12 }}>{tier.name}</label>
+                  <button
+                    onClick={() => handleChange(tier.id, feature.id, isEnabled ? '0' : '1')}
+                    style={{
+                      flex: 1,
+                      padding: '8px 16px',
+                      border: `2px solid ${isEnabled ? 'var(--accent)' : 'var(--border)'}`,
+                      borderRadius: 20,
+                      background: isEnabled ? 'var(--accent)' : 'var(--surface)',
+                      color: isEnabled ? 'white' : 'var(--text3)',
+                      fontSize: 13,
+                      fontWeight: 600,
+                      cursor: 'pointer',
+                      transition: 'all 0.2s'
+                    }}
+                  >
+                    {isEnabled ? '✓ Aktiviert' : '✗ Deaktiviert'}
+                  </button>
+                </div>
+              )
+            }
+
+            // Count features: Text input
             return (
               <div key={tier.id} className="form-row" style={{ marginBottom: 8 }}>
                 <label className="form-label" style={{ fontSize: 12 }}>{tier.name}</label>