Implementazione completa dell'app BitePlan

- App.vue: root con navigazione tra le tre pagine
- BottomNav.vue: barra navigazione inferiore (Pasti, Converti, Spesa)
- MealPlanner.vue + MealCard.vue: pianificatore settimanale con lista voci per pasto
- Converter.vue: convertitore crudo/cotto con ricerca testuale
- ShoppingList.vue + CheckboxItem.vue: lista spesa con checkbox
- utils/storage.js: wrapper LocalStorage (save/load)
- utils/conversion.js: rawToCooked e cookedToRaw
- data/conversions.json: 14 alimenti con coefficienti di resa

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/components/BottomNav.vue

@@ -0,0 +1,67 @@
+<template>
+  <nav class="bottom-nav">
+    <button
+      v-for="tab in tabs"
+      :key="tab.id"
+      :class="['nav-btn', { active: modelValue === tab.id }]"
+      @click="$emit('update:modelValue', tab.id)"
+    >
+      <span class="nav-icon">{{ tab.icon }}</span>
+      <span class="nav-label">{{ tab.label }}</span>
+    </button>
+  </nav>
+</template>
+
+<script setup>
+defineProps({ modelValue: String })
+defineEmits(['update:modelValue'])
+
+const tabs = [
+  { id: 'meal',    icon: '📅', label: 'Pasti'    },
+  { id: 'convert', icon: '⚖️', label: 'Converti' },
+  { id: 'shop',    icon: '🛒', label: 'Spesa'    },
+]
+</script>
+
+<style scoped>
+.bottom-nav {
+  position: fixed;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 100%;
+  max-width: 480px;
+  height: var(--nav-height);
+  background: var(--color-surface);
+  border-top: 1px solid var(--color-border);
+  display: flex;
+  z-index: 100;
+}
+
+.nav-btn {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 2px;
+  background: none;
+  border-radius: 0;
+  color: var(--color-muted);
+  min-height: unset;
+  padding: 0;
+  font-size: 0.7rem;
+}
+
+.nav-btn.active {
+  color: var(--color-primary);
+}
+
+.nav-icon {
+  font-size: 1.2rem;
+}
+
+.nav-label {
+  font-size: 0.7rem;
+}
+</style>

src/components/CheckboxItem.vue

@@ -0,0 +1,58 @@
+<template>
+  <li class="checkbox-item" :class="{ checked: item.checked }">
+    <label class="item-label">
+      <input type="checkbox" :checked="item.checked" @change="$emit('toggle')" />
+      <span class="item-name">{{ item.name }}</span>
+    </label>
+    <button class="btn-remove" @click="$emit('remove')">✕</button>
+  </li>
+</template>
+
+<script setup>
+defineProps({ item: Object })
+defineEmits(['toggle', 'remove'])
+</script>
+
+<style scoped>
+.checkbox-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: var(--color-surface);
+  border-radius: var(--radius);
+  padding: 12px 14px;
+  border: 1px solid var(--color-border);
+}
+
+.item-label {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  cursor: pointer;
+  flex: 1;
+}
+
+input[type="checkbox"] {
+  width: 20px;
+  height: 20px;
+  cursor: pointer;
+  accent-color: var(--color-primary);
+}
+
+.item-name {
+  font-size: 1rem;
+}
+
+.checked .item-name {
+  text-decoration: line-through;
+  color: var(--color-muted);
+}
+
+.btn-remove {
+  background: none;
+  color: var(--color-muted);
+  min-height: unset;
+  padding: 0 4px;
+  font-size: 0.8rem;
+}
+</style>

src/components/MealCard.vue

@@ -0,0 +1,126 @@
+<template>
+  <div class="meal-card">
+    <h2 class="day-name">{{ dayName }}</h2>
+
+    <div v-for="slot in slots" :key="slot.id" class="meal-slot">
+      <h3 class="slot-label">{{ slot.label }}</h3>
+
+      <ul v-if="meals[slot.id].length" class="item-list">
+        <li v-for="(item, idx) in meals[slot.id]" :key="idx" class="item-row">
+          <span class="item-text">{{ item }}</span>
+          <button class="btn-remove" @click="$emit('remove', slot.id, idx)">✕</button>
+        </li>
+      </ul>
+
+      <div class="input-row">
+        <input
+          v-model="inputs[slot.id]"
+          type="text"
+          :placeholder="`Aggiungi a ${slot.label.toLowerCase()}...`"
+          @keyup.enter="submit(slot.id)"
+        />
+        <button class="btn-add" @click="submit(slot.id)">+</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { reactive } from 'vue'
+
+const props = defineProps({
+  dayName: String,
+  meals: Object,
+})
+const emit = defineEmits(['add', 'remove'])
+
+const slots = [
+  { id: 'colazione', label: 'Colazione' },
+  { id: 'pranzo',    label: 'Pranzo'    },
+  { id: 'cena',      label: 'Cena'      },
+]
+
+const inputs = reactive({ colazione: '', pranzo: '', cena: '' })
+
+function submit(slotId) {
+  const t = inputs[slotId].trim()
+  if (!t) return
+  emit('add', slotId, t)
+  inputs[slotId] = ''
+}
+</script>
+
+<style scoped>
+.meal-card {
+  background: var(--color-surface);
+  border-radius: var(--radius);
+  padding: 16px;
+  margin-bottom: 12px;
+  border: 1px solid var(--color-border);
+}
+
+.day-name {
+  font-size: 1rem;
+  font-weight: 700;
+  margin-bottom: 12px;
+  color: var(--color-primary);
+  text-transform: capitalize;
+}
+
+.meal-slot {
+  margin-bottom: 12px;
+}
+
+.meal-slot:last-child { margin-bottom: 0; }
+
+.slot-label {
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: var(--color-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin-bottom: 6px;
+}
+
+.item-list {
+  list-style: none;
+  margin-bottom: 6px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.item-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: var(--color-bg);
+  border-radius: 6px;
+  padding: 6px 10px;
+}
+
+.item-text { font-size: 0.9rem; }
+
+.btn-remove {
+  background: none;
+  color: var(--color-muted);
+  min-height: unset;
+  padding: 0 4px;
+  font-size: 0.75rem;
+}
+
+.input-row {
+  display: flex;
+  gap: 6px;
+}
+
+.btn-add {
+  background: var(--color-primary-light);
+  color: #fff;
+  font-size: 1.2rem;
+  min-width: 40px;
+  flex-shrink: 0;
+  min-height: 40px;
+  padding: 0;
+}
+</style>