Make similar food suggestions clickable to populate food entry form (#12)

package-lock.json

@@ -2288,9 +2288,6 @@
         "arm"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2305,9 +2302,6 @@
         "arm"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2322,9 +2316,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2339,9 +2330,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2356,9 +2344,6 @@
         "loong64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2373,9 +2358,6 @@
         "ppc64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2390,9 +2372,6 @@
         "riscv64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2407,9 +2386,6 @@
         "riscv64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2424,9 +2400,6 @@
         "s390x"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [

src/index.ts

@@ -36,6 +36,13 @@ let currentViewDate = new Date();
 let selectedFood: FoodItem | null = null; // review here
 let currentUser: any | null = null;
 
+type AlternativeResult = {
+  food: FoodItem;
+  quantityGrams: number;
+};
+
+let currentAlternatives: AlternativeResult[] = [];
+
 // Initialize when page loads
 document.addEventListener('DOMContentLoaded', async function() {
   await initializeAuth();
@@ -477,11 +484,6 @@ const getFoodItemByName = (foodName: string): FoodItem => {
   return foodDataSearch[0];
 }
 
-type AlternativeResult = {
-  food: FoodItem;
-  quantityGrams: number;
-};
-
 function findAlternatives(
   current: FoodItem,
   currentQuantityGrams: number,
@@ -602,6 +604,7 @@ function updateAlternativesDisplay() {
   }
 
   const alternatives = findAlternatives(selectedFood, grams, foodDatabase);
+  currentAlternatives = alternatives;
 
   const escapeHtml = (text: string): string =>
     text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
@@ -610,12 +613,27 @@ function updateAlternativesDisplay() {
   if (alternatives.length === 0) {
     list.innerHTML = '<div class="no-alternatives">No equivalent alternatives found</div>';
   } else {
-    list.innerHTML = alternatives.map(alt => `
+    list.innerHTML = alternatives.map((alt, index) => `
-      <div class="alternative-item">
+      <div class="alternative-item" data-index="${index}" tabindex="0" title="Click to select this food">
         <span class="alternative-name">${escapeHtml(alt.food.name)}</span>
         <span class="alternative-quantity">${alt.quantityGrams}g</span>
       </div>
     `).join('');
+
+    list.querySelectorAll<HTMLElement>('.alternative-item').forEach(item => {
+      item.addEventListener('click', () => {
+        const index = parseInt(item.dataset.index ?? '-1', 10);
+        if (index >= 0 && currentAlternatives[index]) {
+          selectAlternative(currentAlternatives[index].food, currentAlternatives[index].quantityGrams);
+        }
+      });
+      item.addEventListener('keydown', (e: KeyboardEvent) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          item.click();
+        }
+      });
+    });
   }
 }
 
@@ -1191,6 +1209,12 @@ function selectFood(food: FoodItem) {
   }
 }
 
+function selectAlternative(food: FoodItem, grams: number) {
+  selectFood(food);
+  getInputById('gramAmount').value = grams.toString();
+  previewCalories(food);
+}
+
 async function setFoodToEdit(foodId: string) {
   showLoading();
 

style.css

@@ -1226,6 +1226,15 @@ label {
     align-items: center;
     padding: 8px 0;
     border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+    border-radius: 4px;
+    padding-left: 6px;
+    padding-right: 6px;
+}
+
+.alternative-item:hover {
+    background-color: rgba(107, 141, 214, 0.15);
 }
 
 .alternative-item:last-child {