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/App.vue

@@ -0,0 +1,26 @@
+<template>
+  <div id="app-root">
+    <MealPlanner v-if="page === 'meal'" />
+    <Converter   v-else-if="page === 'convert'" />
+    <ShoppingList v-else-if="page === 'shop'" />
+    <BottomNav v-model="page" />
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import BottomNav    from './components/BottomNav.vue'
+import MealPlanner  from './pages/MealPlanner.vue'
+import Converter    from './pages/Converter.vue'
+import ShoppingList from './pages/ShoppingList.vue'
+
+const page = ref('meal')
+</script>
+
+<style scoped>
+#app-root {
+  height: 100dvh;
+  display: flex;
+  flex-direction: column;
+}
+</style>

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>

src/data/conversions.json

@@ -0,0 +1,16 @@
+{
+  "pollo":      { "forno":   { "yield": 0.75 }, "padella": { "yield": 0.70 } },
+  "manzo":      { "forno":   { "yield": 0.70 }, "padella": { "yield": 0.72 } },
+  "maiale":     { "forno":   { "yield": 0.68 }, "padella": { "yield": 0.70 } },
+  "salmone":    { "forno":   { "yield": 0.80 }, "padella": { "yield": 0.78 } },
+  "tonno":      { "forno":   { "yield": 0.75 } },
+  "uova":       { "bollite": { "yield": 0.88 } },
+  "riso":       { "bollito": { "yield": 2.50 } },
+  "pasta":      { "bollita": { "yield": 2.20 } },
+  "lenticchie": { "bollite": { "yield": 2.30 } },
+  "zucchine":   { "padella": { "yield": 0.80 }, "bollite":  { "yield": 0.85 } },
+  "carote":     { "bollite": { "yield": 0.90 }, "forno":    { "yield": 0.85 } },
+  "patate":     { "forno":   { "yield": 0.75 }, "bollite":  { "yield": 0.90 } },
+  "spinaci":    { "padella": { "yield": 0.35 }, "bolliti":  { "yield": 0.30 } },
+  "broccoli":   { "bolliti": { "yield": 0.85 }, "forno":    { "yield": 0.80 } }
+}

src/pages/Converter.vue

@@ -0,0 +1,169 @@
+<template>
+  <div class="page">
+    <h1 class="page-title">Conversione crudo / cotto</h1>
+
+    <div class="search-box">
+      <input
+        v-model="query"
+        type="text"
+        placeholder="Cerca alimento (es. pollo)"
+        @input="onSearch"
+      />
+    </div>
+
+    <ul v-if="results.length && !selected" class="results-list">
+      <li
+        v-for="r in results"
+        :key="r.key"
+        class="result-item"
+        @click="selectItem(r)"
+      >
+        {{ r.food }} — {{ r.method }}
+      </li>
+    </ul>
+
+    <div v-if="selected" class="converter-panel">
+      <div class="selected-label">
+        {{ selected.food }} — {{ selected.method }}
+        <button class="btn-link" @click="reset">cambia</button>
+      </div>
+
+      <div class="direction-toggle">
+        <button :class="['toggle-btn', { active: direction === 'rawToCooked' }]" @click="direction = 'rawToCooked'">crudo → cotto</button>
+        <button :class="['toggle-btn', { active: direction === 'cookedToRaw' }]" @click="direction = 'cookedToRaw'">cotto → crudo</button>
+      </div>
+
+      <div class="input-row">
+        <input v-model.number="grams" type="number" min="0" placeholder="grammi" />
+        <span class="unit">g</span>
+      </div>
+
+      <div v-if="result !== null" class="result-box">
+        <span class="result-value">{{ result }}</span>
+        <span class="result-unit">g</span>
+        <span class="result-label">{{ direction === 'rawToCooked' ? 'cotti' : 'crudi' }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+import db from '../data/conversions.json'
+import { rawToCooked, cookedToRaw } from '../utils/conversion.js'
+
+const query = ref('')
+const results = ref([])
+const selected = ref(null)
+const direction = ref('rawToCooked')
+const grams = ref(null)
+
+const result = computed(() => {
+  if (!selected.value || !grams.value || grams.value <= 0) return null
+  const { food, method } = selected.value
+  const val = direction.value === 'rawToCooked'
+    ? rawToCooked(food, method, grams.value, db)
+    : cookedToRaw(food, method, grams.value, db)
+  return Math.round(val * 10) / 10
+})
+
+function onSearch() {
+  const q = query.value.toLowerCase().trim()
+  if (!q) { results.value = []; return }
+  const matches = []
+  for (const food of Object.keys(db)) {
+    if (food.includes(q)) {
+      for (const method of Object.keys(db[food])) {
+        matches.push({ key: `${food}-${method}`, food, method })
+      }
+    }
+  }
+  results.value = matches
+}
+
+function selectItem(r) {
+  selected.value = r
+  query.value = `${r.food} — ${r.method}`
+  results.value = []
+  grams.value = null
+}
+
+function reset() {
+  selected.value = null
+  query.value = ''
+  results.value = []
+  grams.value = null
+}
+</script>
+
+<style scoped>
+.search-box { margin-bottom: 12px; }
+
+.results-list {
+  list-style: none;
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius);
+  overflow: hidden;
+  margin-bottom: 16px;
+}
+
+.result-item {
+  padding: 12px 16px;
+  cursor: pointer;
+  border-bottom: 1px solid var(--color-border);
+  text-transform: capitalize;
+}
+
+.result-item:last-child { border-bottom: none; }
+.result-item:active { background: var(--color-bg); }
+
+.converter-panel { display: flex; flex-direction: column; gap: 16px; }
+
+.selected-label {
+  font-weight: 600;
+  text-transform: capitalize;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.btn-link {
+  background: none;
+  color: var(--color-primary);
+  min-height: unset;
+  padding: 0;
+  font-size: 0.85rem;
+}
+
+.direction-toggle { display: flex; gap: 8px; }
+
+.toggle-btn {
+  flex: 1;
+  background: var(--color-bg);
+  color: var(--color-muted);
+  border: 1px solid var(--color-border);
+  font-size: 0.85rem;
+}
+
+.toggle-btn.active {
+  background: var(--color-primary);
+  color: #fff;
+  border-color: var(--color-primary);
+}
+
+.input-row { display: flex; align-items: center; gap: 8px; }
+.unit { font-size: 1rem; color: var(--color-muted); }
+
+.result-box {
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius);
+  padding: 20px;
+  text-align: center;
+}
+
+.result-value { font-size: 2.5rem; font-weight: 700; color: var(--color-primary); }
+.result-unit  { font-size: 1.2rem; color: var(--color-muted); margin: 0 4px; }
+.result-label { font-size: 1rem; color: var(--color-muted); }
+</style>

src/pages/MealPlanner.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="page">
+    <h1 class="page-title">Pasti della settimana</h1>
+    <MealCard
+      v-for="day in days"
+      :key="day.id"
+      :day-name="day.label"
+      :meals="meals[day.id]"
+      @add="(slot, text) => addItem(day.id, slot, text)"
+      @remove="(slot, idx) => removeItem(day.id, slot, idx)"
+    />
+  </div>
+</template>
+
+<script setup>
+import { reactive, watch } from 'vue'
+import MealCard from '../components/MealCard.vue'
+import { save, load } from '../utils/storage.js'
+
+const days = [
+  { id: 'lunedi',    label: 'Lunedì'    },
+  { id: 'martedi',   label: 'Martedì'   },
+  { id: 'mercoledi', label: 'Mercoledì' },
+  { id: 'giovedi',   label: 'Giovedì'   },
+  { id: 'venerdi',   label: 'Venerdì'   },
+  { id: 'sabato',    label: 'Sabato'    },
+  { id: 'domenica',  label: 'Domenica'  },
+]
+
+const defaultMeals = () =>
+  Object.fromEntries(days.map(d => [d.id, { colazione: [], pranzo: [], cena: [] }]))
+
+const meals = reactive(load('meals', defaultMeals()))
+
+watch(meals, () => save('meals', meals), { deep: true })
+
+function addItem(day, slot, text) {
+  const t = text.trim()
+  if (t) meals[day][slot].push(t)
+}
+
+function removeItem(day, slot, idx) {
+  meals[day][slot].splice(idx, 1)
+}
+</script>

src/pages/ShoppingList.vue

@@ -0,0 +1,96 @@
+<template>
+  <div class="page">
+    <h1 class="page-title">Lista della spesa</h1>
+
+    <div class="add-row">
+      <input
+        v-model="newItem"
+        type="text"
+        placeholder="Aggiungi elemento..."
+        @keyup.enter="add"
+      />
+      <button class="btn-add" @click="add">+</button>
+    </div>
+
+    <ul v-if="items.length" class="shop-list">
+      <CheckboxItem
+        v-for="item in items"
+        :key="item.id"
+        :item="item"
+        @toggle="toggle(item.id)"
+        @remove="remove(item.id)"
+      />
+    </ul>
+
+    <p v-else class="empty-msg">Nessun elemento nella lista.</p>
+
+    <button v-if="items.length" class="btn-clear" @click="clearAll">Svuota lista</button>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue'
+import CheckboxItem from '../components/CheckboxItem.vue'
+import { save, load } from '../utils/storage.js'
+
+const items = ref(load('shopping', []))
+const newItem = ref('')
+
+watch(items, () => save('shopping', items.value), { deep: true })
+
+function add() {
+  const t = newItem.value.trim()
+  if (!t) return
+  items.value.push({ id: Date.now(), name: t, checked: false })
+  newItem.value = ''
+}
+
+function toggle(id) {
+  const item = items.value.find(i => i.id === id)
+  if (item) item.checked = !item.checked
+}
+
+function remove(id) {
+  items.value = items.value.filter(i => i.id !== id)
+}
+
+function clearAll() {
+  if (confirm('Svuotare tutta la lista?')) items.value = []
+}
+</script>
+
+<style scoped>
+.add-row {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 16px;
+}
+
+.btn-add {
+  background: var(--color-primary);
+  color: #fff;
+  font-size: 1.4rem;
+  min-width: 44px;
+  flex-shrink: 0;
+}
+
+.shop-list {
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin-bottom: 20px;
+}
+
+.empty-msg {
+  color: var(--color-muted);
+  text-align: center;
+  margin: 40px 0;
+}
+
+.btn-clear {
+  width: 100%;
+  background: var(--color-danger);
+  color: #fff;
+}
+</style>

src/utils/conversion.js

@@ -0,0 +1,2 @@
+export const rawToCooked = (food, method, raw, db) => raw * db[food][method].yield
+export const cookedToRaw = (food, method, cooked, db) => cooked / db[food][method].yield

src/utils/storage.js

@@ -0,0 +1,5 @@
+export const save = (key, val) => localStorage.setItem(key, JSON.stringify(val))
+export const load = (key, def) => {
+  const v = localStorage.getItem(key)
+  return v ? JSON.parse(v) : def
+}