From d3872aef409a63c866cf982ca057f4e71f43b53f Mon Sep 17 00:00:00 2001
From: Dayowe <dayowe@tutamail.com>
Date: Thu, 26 Jun 2025 12:34:06 +0200
Subject: [PATCH] Inplace editing

---
 iframe.html | 90 ++++++++++++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 85 insertions(+), 5 deletions(-)

diff --git a/iframe.html b/iframe.html
index c7eec7d..5460868 100644
--- a/iframe.html
+++ b/iframe.html
@@ -1466,6 +1466,58 @@
             flex: 1;
         }
 
+        /* Editable Food Source Name Styling */
+        .dog-calculator-food-source-name-input {
+            background: transparent;
+            border: 2px solid transparent;
+            color: var(--text-primary);
+            font-size: 1.1rem;
+            font-weight: 600;
+            font-family: inherit;
+            padding: 0.5rem;
+            border-radius: 4px;
+            width: 100%;
+            outline: none;
+            transition: all 0.2s ease;
+            cursor: text;
+        }
+
+        .dog-calculator-food-source-name-input:hover {
+            border-color: var(--border-color);
+            background: var(--bg-secondary);
+        }
+
+        .dog-calculator-food-source-name-input:focus {
+            border-color: var(--primary-color);
+            background: var(--bg-primary);
+            box-shadow: 0 0 0 3px rgba(241, 154, 95, 0.1);
+        }
+
+        .dog-calculator-food-source-name-input::placeholder {
+            color: var(--text-secondary);
+            opacity: 0.7;
+        }
+
+        /* Dark theme adjustments */
+        .dog-calculator-container.theme-dark .dog-calculator-food-source-name-input:hover {
+            background: #2a2530;
+        }
+
+        .dog-calculator-container.theme-dark .dog-calculator-food-source-name-input:focus {
+            background: #1e1a24;
+        }
+
+        /* System theme adjustments */
+        @media (prefers-color-scheme: dark) {
+            .dog-calculator-container.theme-system .dog-calculator-food-source-name-input:hover {
+                background: #2a2530;
+            }
+
+            .dog-calculator-container.theme-system .dog-calculator-food-source-name-input:focus {
+                background: #1e1a24;
+            }
+        }
+
         /* Responsive adjustments */
         @media (max-width: 576px) {
             .dog-calculator-food-amount-item {
@@ -1477,6 +1529,10 @@
             .dog-calculator-food-amount-label {
                 justify-content: center;
             }
+
+            .dog-calculator-food-source-name-input {
+                font-size: 1rem;
+            }
         }
     </style>
 </head>
@@ -2130,10 +2186,13 @@
 
             updateFoodSourceNames() {
                 this.foodSources.forEach((fs, index) => {
-                    fs.name = `Food Source ${index + 1}`;
-                    const titleElement = document.getElementById(`food-title-${fs.id}`);
-                    if (titleElement) {
-                        titleElement.textContent = fs.name;
+                    // Only update if the name is still the default pattern
+                    if (fs.name.match(/^Food Source \d+$/)) {
+                        fs.name = `Food Source ${index + 1}`;
+                        const titleElement = document.getElementById(`food-title-${fs.id}`);
+                        if (titleElement) {
+                            titleElement.value = fs.name;
+                        }
                     }
                 });
             }
@@ -2163,7 +2222,7 @@
                 const cardHTML = `
                     <div class="dog-calculator-food-source-card" id="foodSource-${foodSource.id}">
                         <div class="dog-calculator-food-source-header">
-                            <h4 class="dog-calculator-food-source-title" id="food-title-${foodSource.id}">${foodSource.name}</h4>
+                            <input type="text" class="dog-calculator-food-source-name-input" id="food-title-${foodSource.id}" value="${foodSource.name}" placeholder="Enter food name" maxlength="50" title="Click to edit food source name">
                             ${this.foodSources.length > 1 ? `<button class="dog-calculator-remove-food-btn" id="remove-${foodSource.id}" type="button" title="Remove this food source">×</button>` : ''}
                         </div>
                         
@@ -2206,6 +2265,9 @@
             }
 
             bindFoodSourceEvents(id) {
+                // Name input events
+                const nameInput = document.getElementById(`food-title-${id}`);
+                
                 // Energy input events
                 const energyInput = document.getElementById(`energy-${id}`);
                 const energyUnitSelect = document.getElementById(`energy-unit-${id}`);
@@ -2214,6 +2276,24 @@
                 const removeBtn = document.getElementById(`remove-${id}`);
                 const lockBtn = document.getElementById(`lock-${id}`);
 
+                if (nameInput) {
+                    nameInput.addEventListener('input', () => {
+                        const newName = nameInput.value.trim() || `Food Source ${this.foodSources.findIndex(fs => fs.id === id) + 1}`;
+                        this.updateFoodSourceData(id, 'name', newName);
+                        this.updateFoodCalculations(); // This will refresh the food amount breakdown with new names
+                    });
+                    
+                    nameInput.addEventListener('blur', () => {
+                        // If field is empty, restore default name
+                        if (!nameInput.value.trim()) {
+                            const defaultName = `Food Source ${this.foodSources.findIndex(fs => fs.id === id) + 1}`;
+                            nameInput.value = defaultName;
+                            this.updateFoodSourceData(id, 'name', defaultName);
+                            this.updateFoodCalculations();
+                        }
+                    });
+                }
+
                 if (energyInput) {
                     energyInput.addEventListener('input', () => {
                         this.updateFoodSourceData(id, 'energy', energyInput.value);