From 39ce9e4684e79976c06f8f86fd50d144d54b47ca Mon Sep 17 00:00:00 2001
From: Ricardo Campos <ricardompcampos@gmail.com>
Date: Wed, 10 Dec 2025 12:27:08 -0300
Subject: [PATCH] feat: makes the AI nutrition search optional

---
 index.html   |  6 ++++++
 src/index.ts | 26 ++++++++++++++++++++++++--
 style.css    | 30 ++++++++++++++++++++++++++++++
 3 files changed, 60 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index 352ee4d..f34a22d 100644
--- a/index.html
+++ b/index.html
@@ -290,6 +290,12 @@
                         </div>
                     </div>
                 </div>
+                <div class="form-group checkbox-group">
+                    <label class="checkbox-label">
+                        <input type="checkbox" id="enableAINutrition" class="ai-checkbox">
+                        <span>Show AI nutrition information</span>
+                    </label>
+                </div>
 
                 <!-- AI Nutrition Info Card -->
                 <div class="display-none" id="ai-nutrition-card">
diff --git a/src/index.ts b/src/index.ts
index 0fd2f44..0dbc881 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -217,6 +217,20 @@ async function handleClearCache() {
   }
 }
 
+function handleAICheckboxChange(e: Event) {
+  const checkbox = e.target as HTMLInputElement;
+
+  if (checkbox.checked) {
+    // If a food is already selected, load its AI nutrition info
+    if (selectedFood) {
+      loadAINutritionInfo(selectedFood.name);
+    }
+  } else {
+    // Hide the AI nutrition card
+    hideAINutritionCard();
+  }
+}
+
 async function handleLogout() {
   showLoading();
   
@@ -468,6 +482,9 @@ const setupEventListeners = () => {
   // Clear cache button
   getButtonById('clearCacheBtn')?.addEventListener('click', handleClearCache);
 
+  // AI nutrition checkbox
+  document.getElementById('enableAINutrition')?.addEventListener('change', handleAICheckboxChange);
+
   // Share button event listeners
   getButtonById('shareBtn').addEventListener('click', handleShareClick);
   getButtonById('shareBtnMobile').addEventListener('click', handleShareClick);
@@ -688,8 +705,13 @@ function selectFood(food: FoodItem) {
   // Show cancel button so user can clear selection
   getButtonById('cancel-food-btn').style.display = 'inline-block';
 
-  // Load AI nutrition info for the selected food
-  loadAINutritionInfo(food.name);
+  // Load AI nutrition info only if checkbox is checked
+  const aiCheckbox = document.getElementById('enableAINutrition') as HTMLInputElement;
+  if (aiCheckbox && aiCheckbox.checked) {
+    loadAINutritionInfo(food.name);
+  } else {
+    hideAINutritionCard();
+  }
 }
 
 async function setFoodToEdit(foodId: string) {
diff --git a/style.css b/style.css
index 67ebb2e..456d988 100644
--- a/style.css
+++ b/style.css
@@ -461,6 +461,36 @@ label {
     color: #666;
 }
 
+.checkbox-group {
+    margin: 10px 0;
+}
+
+.checkbox-label {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    color: #e0e0e0;
+    font-weight: 400;
+    user-select: none;
+}
+
+.ai-checkbox {
+    width: 18px;
+    height: 18px;
+    margin-right: 10px;
+    cursor: pointer;
+    accent-color: #6B8DD6;
+}
+
+.checkbox-label span {
+    font-size: 0.95rem;
+    color: #b0b0b0;
+}
+
+.checkbox-label:hover span {
+    color: #e0e0e0;
+}
+
 .add-btn {
     padding: 17px 25px;
     background: linear-gradient(135deg, #4CAF50, #45a049);