feat: makes the AI nutrition search optional

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">

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
+  // 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) {

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);