From 65846042e2c9000e57e5c5631af0994451989700 Mon Sep 17 00:00:00 2001
From: Lars <Lars@stommer.de>
Date: Mon, 23 Mar 2026 13:35:52 +0100
Subject: [PATCH] feat: improve ProfileBuilder UI clarity with field labels

- Added label row: PARAMETER | OPERATOR | SCHWELLENWERT | GEWICHT
- Prevents confusion between threshold value and weight fields
- Better placeholder for value field (z.B. 90)
- Between operator: stacked vertical inputs with Min/Max labels
- User feedback: confusion between value and weight fields

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/components/ProfileBuilder.jsx | 26 ++++++++++++++++------
 1 file changed, 19 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/ProfileBuilder.jsx b/frontend/src/components/ProfileBuilder.jsx
index 8624e32..dc517d3 100644
--- a/frontend/src/components/ProfileBuilder.jsx
+++ b/frontend/src/components/ProfileBuilder.jsx
@@ -250,6 +250,16 @@ export default function ProfileBuilder({ trainingType, onSave, onCancel, paramet
                       marginBottom: '8px'
                     }}
                   >
+                    {/* Labels Row */}
+                    <div style={{ display: 'grid', gridTemplateColumns: '2fr 1.5fr 1fr 0.8fr 40px', gap: '8px', marginBottom: '4px' }}>
+                      <div style={{ fontSize: '10px', color: 'var(--text3)', fontWeight: '600' }}>PARAMETER</div>
+                      <div style={{ fontSize: '10px', color: 'var(--text3)', fontWeight: '600' }}>OPERATOR</div>
+                      <div style={{ fontSize: '10px', color: 'var(--text3)', fontWeight: '600' }}>SCHWELLENWERT</div>
+                      <div style={{ fontSize: '10px', color: 'var(--text3)', fontWeight: '600' }}>GEWICHT</div>
+                      <div></div>
+                    </div>
+
+                    {/* Input Row */}
                     <div style={{ display: 'grid', gridTemplateColumns: '2fr 1.5fr 1fr 0.8fr 40px', gap: '8px', marginBottom: '8px' }}>
                       {/* Parameter */}
                       <select
@@ -279,16 +289,16 @@ export default function ProfileBuilder({ trainingType, onSave, onCancel, paramet
 
                       {/* Value */}
                       {rule.operator === 'between' ? (
-                        <div style={{ display: 'flex', gap: '4px' }}>
+                        <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
                           <input
                             type="number"
                             className="form-input"
                             placeholder="Min"
                             value={Array.isArray(rule.value) ? rule.value[0] : 0}
                             onChange={(e) => updateRule(idx, {
-                              value: [parseFloat(e.target.value), Array.isArray(rule.value) ? rule.value[1] : 0]
+                              value: [parseFloat(e.target.value) || 0, Array.isArray(rule.value) ? rule.value[1] : 0]
                             })}
-                            style={{ fontSize: '13px' }}
+                            style={{ fontSize: '13px', padding: '4px 8px' }}
                           />
                           <input
                             type="number"
@@ -296,15 +306,16 @@ export default function ProfileBuilder({ trainingType, onSave, onCancel, paramet
                             placeholder="Max"
                             value={Array.isArray(rule.value) ? rule.value[1] : 0}
                             onChange={(e) => updateRule(idx, {
-                              value: [Array.isArray(rule.value) ? rule.value[0] : 0, parseFloat(e.target.value)]
+                              value: [Array.isArray(rule.value) ? rule.value[0] : 0, parseFloat(e.target.value) || 0]
                             })}
-                            style={{ fontSize: '13px' }}
+                            style={{ fontSize: '13px', padding: '4px 8px' }}
                           />
                         </div>
                       ) : (
                         <input
                           type="number"
                           className="form-input"
+                          placeholder="z.B. 90"
                           value={rule.value}
                           onChange={(e) => updateRule(idx, { value: parseFloat(e.target.value) || 0 })}
                           style={{ fontSize: '13px' }}
@@ -315,13 +326,13 @@ export default function ProfileBuilder({ trainingType, onSave, onCancel, paramet
                       <input
                         type="number"
                         className="form-input"
-                        placeholder="Gewicht"
+                        placeholder="1-10"
                         min="1"
                         max="10"
                         value={rule.weight}
                         onChange={(e) => updateRule(idx, { weight: parseInt(e.target.value) || 1 })}
                         style={{ fontSize: '13px' }}
-                        title="Gewichtung 1-10"
+                        title="Gewichtung der Regel (1=niedrig, 10=hoch)"
                       />
 
                       {/* Delete */}
@@ -329,6 +340,7 @@ export default function ProfileBuilder({ trainingType, onSave, onCancel, paramet
                         className="btn"
                         onClick={() => removeRule(idx)}
                         style={{ padding: '6px', minWidth: 'auto' }}
+                        title="Regel löschen"
                       >
                         <Trash2 size={14} />
                       </button>