feat: Add 5-star rating system for tea varieties

- Add star rating component (5 stars) to tea form
- Add rating field to tea data model (default: 3)
- Update addTea() to include rating
- Update openTeaModal() to set rating when editing
- Display rating on tea cards with star icons
- Add renderStarRating() for interactive rating in form
- Add renderStarRatingStatic() for display on cards
- Add handleStarRatingClick() for user interaction
- Add migration for existing teas without rating
- Add CSS styles for rating display and interaction

Co-authored-by: trevor1969 <trevor1969@users.noreply.github.com>

app.js

@@ -283,7 +283,8 @@ class TeeTracker {
             if (teas) {
                 this.teas = teas.map(tea => ({
                     ...tea,
-                    organic: tea.organic !== undefined ? tea.organic : false
+                    organic: tea.organic !== undefined ? tea.organic : false,
+                    rating: tea.rating !== undefined ? tea.rating : 3
                 }));
             }
             
@@ -312,7 +313,8 @@ class TeeTracker {
             try {
                 this.teas = JSON.parse(teasData).map(tea => ({
                     ...tea,
-                    organic: tea.organic !== undefined ? tea.organic : false
+                    organic: tea.organic !== undefined ? tea.organic : false,
+                    rating: tea.rating !== undefined ? tea.rating : 3
                 }));
             } catch (error) {
                 this.teas = [];
@@ -419,6 +421,7 @@ class TeeTracker {
             description: tea.description || '',
             color: tea.color || '#8B4513',
             organic: tea.organic || false,
+            rating: tea.rating || 3,
             createdAt: new Date().toISOString()
         };
         this.teas.push(newTea);
@@ -627,6 +630,12 @@ class TeeTracker {
             document.getElementById('delete-tea-btn').addEventListener('click', () => this.handleDeleteTea());
         }
         
+        // Star rating for tea form
+        const teaRating = document.getElementById('tea-rating');
+        if (teaRating) {
+            teaRating.addEventListener('click', (e) => this.handleStarRatingClick(e));
+        }
+        
         // Confirm modal
         if (document.getElementById('close-confirm')) {
             document.getElementById('close-confirm').addEventListener('click', () => this.closeConfirmModal());
@@ -1244,6 +1253,7 @@ class TeeTracker {
                 <div class="tea-card-header">
                     <div>
                         <h3 class="tea-name">${tea.name} ${tea.organic ? '<span class="organic-badge" title="Bio-Tee">🌱</span>' : ''}</h3>
+                        <div class="tea-rating-display">${this.renderStarRatingStatic(tea.rating || 3)}</div>
                         <span class="tea-type">${tea.type}</span>
                     </div>
                 </div>
@@ -1288,6 +1298,7 @@ class TeeTracker {
                 <div class="tea-card-header">
                     <div>
                         <h3 class="tea-name">${tea.name} ${tea.organic ? '<span class="organic-badge" title="Bio-Tee">🌱</span>' : ''}</h3>
+                        <div class="tea-rating-display">${this.renderStarRatingStatic(tea.rating || 3)}</div>
                         <span class="tea-type">${tea.type}</span>
                     </div>
                 </div>
@@ -1319,6 +1330,8 @@ class TeeTracker {
                 document.getElementById('tea-description').value = tea.description || '';
                 document.getElementById('tea-color').value = tea.color || '#8B4513';
                 document.getElementById('tea-organic').checked = tea.organic || false;
+                document.getElementById('tea-rating-value').value = tea.rating || 3;
+                this.renderStarRating(tea.rating || 3, 'tea-rating');
                 deleteBtn.style.display = 'inline-flex';
                 this.currentTeaId = tea.id;
             }
@@ -1326,6 +1339,8 @@ class TeeTracker {
             document.getElementById('modal-title').textContent = 'Tee hinzufügen';
             form.reset();
             document.getElementById('tea-id').value = '';
+            document.getElementById('tea-rating-value').value = 3;
+            this.renderStarRating(3, 'tea-rating');
             deleteBtn.style.display = 'none';
             this.currentTeaId = null;
         }
@@ -1352,7 +1367,8 @@ class TeeTracker {
             brand: document.getElementById('tea-brand').value.trim(),
             description: document.getElementById('tea-description').value.trim(),
             color: document.getElementById('tea-color').value,
-            organic: document.getElementById('tea-organic').checked
+            organic: document.getElementById('tea-organic').checked,
+            rating: parseInt(document.getElementById('tea-rating-value').value) || 3
         };
         
         const teaId = document.getElementById('tea-id').value;
@@ -1373,6 +1389,44 @@ class TeeTracker {
         this.updateSettingsStats();
     }
     
+    handleStarRatingClick(e) {
+        const star = e.target.closest('.star');
+        if (!star) return;
+        
+        const value = parseInt(star.dataset.value);
+        const ratingContainer = document.getElementById('tea-rating');
+        const ratingInput = document.getElementById('tea-rating-value');
+        
+        if (ratingContainer && ratingInput) {
+            // Update active stars
+            ratingContainer.querySelectorAll('.star').forEach((s, index) => {
+                s.classList.toggle('active', index < value);
+            });
+            
+            // Set the hidden input value
+            ratingInput.value = value;
+        }
+    }
+    
+    renderStarRating(rating, containerId) {
+        const container = document.getElementById(containerId);
+        if (!container) return;
+        
+        const stars = [];
+        for (let i = 1; i <= 5; i++) {
+            stars.push(`<span class="star ${i <= rating ? 'active' : ''}" data-value="${i}">★</span>`);
+        }
+        container.innerHTML = stars.join('');
+    }
+    
+    renderStarRatingStatic(rating) {
+        const stars = [];
+        for (let i = 1; i <= 5; i++) {
+            stars.push(`<span class="star ${i <= rating ? 'active' : ''}">★</span>`);
+        }
+        return stars.join('');
+    }
+    
     editTea(teaId) {
         this.openTeaModal(teaId);
     }

index.html

@@ -290,6 +290,18 @@
                         </label>
                     </div>
                     
+                    <div class="form-group">
+                        <label>Bewertung</label>
+                        <div class="star-rating" id="tea-rating">
+                            <span class="star" data-value="1">★</span>
+                            <span class="star" data-value="2">★</span>
+                            <span class="star" data-value="3">★</span>
+                            <span class="star" data-value="4">★</span>
+                            <span class="star" data-value="5">★</span>
+                        </div>
+                        <input type="hidden" id="tea-rating-value" value="3">
+                    </div>
+                    
                     <div class="form-group">
                         <label for="tea-color">Farbe</label>
                         <input type="color" id="tea-color" value="#8B4513">

styles.css

@@ -971,3 +971,45 @@ header p {
     z-index: -1;
     pointer-events: none;
 }
+
+/* Star Rating */
+.star-rating {
+    display: flex;
+    gap: 5px;
+    font-size: 1.5rem;
+    cursor: pointer;
+    margin-top: 5px;
+}
+
+.star-rating .star {
+    color: #ccc;
+    transition: color 0.2s;
+}
+
+.star-rating .star:hover,
+.star-rating .star.active {
+    color: #FFD700;
+}
+
+.star-rating .star:hover ~ .star {
+    color: #ccc;
+}
+
+/* Rating display on tea cards */
+.rating-display {
+    color: #FFD700;
+    font-size: 0.9rem;
+    margin-left: 5px;
+}
+
+/* Rating display on tea cards */
+.tea-rating-display {
+    display: inline-block;
+    margin-left: 8px;
+    font-size: 0.9rem;
+}
+
+.tea-rating-display .star {
+    color: #FFD700;
+    font-size: 1rem;
+}