From 76135e404a29c0d3e93210d31198540baaf7c12d Mon Sep 17 00:00:00 2001
From: Davide Grilli <davide.grilli@outlook.com>
Date: Wed, 25 Mar 2026 08:20:57 +0100
Subject: [PATCH] Migliora UI: design moderno, accordion pasti, fix UX

- style.css: shadows, transizioni, variabili --radius-sm/full,
  --color-primary-muted, --color-danger-muted
- BottomNav: icone SVG cross-platform, indicatore pill attivo,
  shadow verso l'alto
- MealCard: accordion (solo oggi aperto di default), badge voci
  quando chiusa, icone pasto, fix touch target btn-remove
- MealPlanner: rileva giorno corrente, mostra come sottotitolo
- Converter: chip alimento selezionato, result box con formula
  (es. 140g x 0.75 = 105g), layout migliorato
- ShoppingList: contatore X/Y completati, sezione separata voci
  spuntate, btn-clear ghost invece di solid rosso, empty state
- CheckboxItem: touch target 44px garantito, transizione checked,
  icona SVG per rimuovere, fix plurale "1 voce / N voci"

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/components/BottomNav.vue    |  59 ++++++++++--
 src/components/CheckboxItem.vue |  37 +++++--
 src/components/MealCard.vue     | 165 +++++++++++++++++++++++---------
 src/pages/Converter.vue         | 158 +++++++++++++++++++++++-------
 src/pages/MealPlanner.vue       |  10 +-
 src/pages/ShoppingList.vue      | 126 +++++++++++++++++++-----
 src/style.css                   |  60 ++++++++----
 7 files changed, 476 insertions(+), 139 deletions(-)

diff --git a/src/components/BottomNav.vue b/src/components/BottomNav.vue
index 5489ddb..c8f5add 100644
--- a/src/components/BottomNav.vue
+++ b/src/components/BottomNav.vue
@@ -5,8 +5,9 @@
       :key="tab.id"
       :class="['nav-btn', { active: modelValue === tab.id }]"
       @click="$emit('update:modelValue', tab.id)"
+      :aria-label="tab.label"
     >
-      <span class="nav-icon">{{ tab.icon }}</span>
+      <span class="nav-icon" v-html="tab.icon" />
       <span class="nav-label">{{ tab.label }}</span>
     </button>
   </nav>
@@ -17,9 +18,35 @@ defineProps({ modelValue: String })
 defineEmits(['update:modelValue'])
 
 const tabs = [
-  { id: 'meal',    icon: '📅', label: 'Pasti'    },
-  { id: 'convert', icon: '⚖️', label: 'Converti' },
-  { id: 'shop',    icon: '🛒', label: 'Spesa'    },
+  {
+    id: 'meal',
+    label: 'Pasti',
+    icon: `<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <rect x="3" y="4" width="18" height="18" rx="2"/>
+      <line x1="16" y1="2" x2="16" y2="6"/>
+      <line x1="8" y1="2" x2="8" y2="6"/>
+      <line x1="3" y1="10" x2="21" y2="10"/>
+    </svg>`,
+  },
+  {
+    id: 'convert',
+    label: 'Converti',
+    icon: `<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <polyline points="17 1 21 5 17 9"/>
+      <path d="M3 11V9a4 4 0 014-4h14"/>
+      <polyline points="7 23 3 19 7 15"/>
+      <path d="M21 13v2a4 4 0 01-4 4H3"/>
+    </svg>`,
+  },
+  {
+    id: 'shop',
+    label: 'Spesa',
+    icon: `<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <path d="M6 2L3 6v14a2 2 0 002 2h14a2 2 0 002-2V6l-3-4z"/>
+      <line x1="3" y1="6" x2="21" y2="6"/>
+      <path d="M16 10a4 4 0 01-8 0"/>
+    </svg>`,
+  },
 ]
 </script>
 
@@ -36,6 +63,7 @@ const tabs = [
   border-top: 1px solid var(--color-border);
   display: flex;
   z-index: 100;
+  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06);
 }
 
 .nav-btn {
@@ -44,24 +72,39 @@ const tabs = [
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: 2px;
+  gap: 3px;
   background: none;
   border-radius: 0;
   color: var(--color-muted);
   min-height: unset;
   padding: 0;
-  font-size: 0.7rem;
+  position: relative;
+  transition: color var(--transition);
 }
 
 .nav-btn.active {
   color: var(--color-primary);
 }
 
+/* indicatore attivo: pill sopra l'icona — segnala la tab senza aggressività */
+.nav-btn.active::before {
+  content: '';
+  position: absolute;
+  top: 6px;
+  width: 28px;
+  height: 3px;
+  background: var(--color-primary);
+  border-radius: var(--radius-full);
+}
+
 .nav-icon {
-  font-size: 1.2rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .nav-label {
-  font-size: 0.7rem;
+  font-size: 0.68rem;
+  font-weight: 500;
 }
 </style>
diff --git a/src/components/CheckboxItem.vue b/src/components/CheckboxItem.vue
index 9b7a3f2..16fe178 100644
--- a/src/components/CheckboxItem.vue
+++ b/src/components/CheckboxItem.vue
@@ -4,7 +4,11 @@
       <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>
+    <button class="btn-remove" @click="$emit('remove')" :aria-label="`Rimuovi ${item.name}`">
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
+        <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
+      </svg>
+    </button>
   </li>
 </template>
 
@@ -19,9 +23,17 @@ defineEmits(['toggle', 'remove'])
   align-items: center;
   justify-content: space-between;
   background: var(--color-surface);
-  border-radius: var(--radius);
-  padding: 12px 14px;
-  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  padding: 4px 4px 4px 14px;
+  border: 1.5px solid var(--color-border);
+  box-shadow: var(--shadow-sm);
+  transition: background var(--transition), border-color var(--transition);
+}
+
+.checkbox-item.checked {
+  background: var(--color-bg);
+  border-color: transparent;
+  box-shadow: none;
 }
 
 .item-label {
@@ -30,6 +42,7 @@ defineEmits(['toggle', 'remove'])
   gap: 12px;
   cursor: pointer;
   flex: 1;
+  padding: 8px 0;
 }
 
 input[type="checkbox"] {
@@ -37,10 +50,12 @@ input[type="checkbox"] {
   height: 20px;
   cursor: pointer;
   accent-color: var(--color-primary);
+  flex-shrink: 0;
 }
 
 .item-name {
   font-size: 1rem;
+  transition: color var(--transition);
 }
 
 .checked .item-name {
@@ -48,11 +63,19 @@ input[type="checkbox"] {
   color: var(--color-muted);
 }
 
+/* touch target pieno 44×44px */
 .btn-remove {
   background: none;
   color: var(--color-muted);
-  min-height: unset;
-  padding: 0 4px;
-  font-size: 0.8rem;
+  min-height: 44px;
+  min-width: 44px;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-sm);
+  flex-shrink: 0;
 }
+
+.btn-remove:active { color: var(--color-danger); }
 </style>
diff --git a/src/components/MealCard.vue b/src/components/MealCard.vue
index 9443670..157abed 100644
--- a/src/components/MealCard.vue
+++ b/src/components/MealCard.vue
@@ -1,47 +1,71 @@
 <template>
-  <div class="meal-card">
-    <h2 class="day-name">{{ dayName }}</h2>
+  <div class="meal-card" :class="{ open: isOpen }">
+    <button class="card-header" @click="isOpen = !isOpen" :aria-expanded="isOpen">
+      <span class="day-name">{{ dayName }}</span>
+      <span class="day-summary" v-if="!isOpen && totalItems > 0">{{ totalItems }} {{ totalItems === 1 ? 'voce' : 'voci' }}</span>
+      <span class="chevron" :class="{ rotated: isOpen }">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+          <polyline points="6 9 12 15 18 9"/>
+        </svg>
+      </span>
+    </button>
 
-    <div v-for="slot in slots" :key="slot.id" class="meal-slot">
-      <h3 class="slot-label">{{ slot.label }}</h3>
+    <div class="card-body" v-show="isOpen">
+      <div v-for="slot in slots" :key="slot.id" class="meal-slot">
+        <div class="slot-header">
+          <span class="slot-icon">{{ slot.icon }}</span>
+          <h3 class="slot-label">{{ slot.label }}</h3>
+        </div>
 
-      <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>
+        <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)" :aria-label="`Rimuovi ${item}`">✕</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 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)" aria-label="Aggiungi">
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
+              <line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/>
+            </svg>
+          </button>
+        </div>
       </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import { reactive } from 'vue'
+import { ref, reactive, computed } from 'vue'
 
 const props = defineProps({
   dayName: String,
   meals: Object,
+  defaultOpen: { type: Boolean, default: false },
 })
 const emit = defineEmits(['add', 'remove'])
 
+const isOpen = ref(props.defaultOpen)
+
 const slots = [
-  { id: 'colazione', label: 'Colazione' },
-  { id: 'pranzo',    label: 'Pranzo'    },
-  { id: 'cena',      label: 'Cena'      },
+  { id: 'colazione', label: 'Colazione', icon: '☀️' },
+  { id: 'pranzo',    label: 'Pranzo',    icon: '🌤️' },
+  { id: 'cena',      label: 'Cena',      icon: '🌙' },
 ]
 
 const inputs = reactive({ colazione: '', pranzo: '', cena: '' })
 
+const totalItems = computed(() =>
+  slots.reduce((sum, s) => sum + props.meals[s.id].length, 0)
+)
+
 function submit(slotId) {
   const t = inputs[slotId].trim()
   if (!t) return
@@ -54,37 +78,77 @@ function submit(slotId) {
 .meal-card {
   background: var(--color-surface);
   border-radius: var(--radius);
-  padding: 16px;
-  margin-bottom: 12px;
+  margin-bottom: 10px;
+  box-shadow: var(--shadow-sm);
+  overflow: hidden;
   border: 1px solid var(--color-border);
 }
 
+.card-header {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 14px 16px;
+  background: none;
+  border-radius: 0;
+  min-height: unset;
+  text-align: left;
+}
+
 .day-name {
   font-size: 1rem;
   font-weight: 700;
-  margin-bottom: 12px;
+  color: var(--color-text);
+  flex: 1;
+}
+
+/* numero voci mostrato quando la card è chiusa */
+.day-summary {
+  font-size: 0.75rem;
+  color: var(--color-muted);
+  background: var(--color-primary-muted);
   color: var(--color-primary);
-  text-transform: capitalize;
+  padding: 2px 8px;
+  border-radius: var(--radius-full);
+  font-weight: 600;
 }
 
-.meal-slot {
-  margin-bottom: 12px;
+.chevron {
+  color: var(--color-muted);
+  display: flex;
+  transition: transform var(--transition);
 }
 
-.meal-slot:last-child { margin-bottom: 0; }
+.chevron.rotated { transform: rotate(180deg); }
+
+.card-body {
+  padding: 0 16px 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.meal-slot { display: flex; flex-direction: column; gap: 6px; }
+
+.slot-header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.slot-icon { font-size: 0.9rem; }
 
 .slot-label {
-  font-size: 0.8rem;
-  font-weight: 600;
+  font-size: 0.75rem;
+  font-weight: 700;
   color: var(--color-muted);
   text-transform: uppercase;
-  letter-spacing: 0.05em;
-  margin-bottom: 6px;
+  letter-spacing: 0.06em;
 }
 
 .item-list {
   list-style: none;
-  margin-bottom: 6px;
   display: flex;
   flex-direction: column;
   gap: 4px;
@@ -95,32 +159,39 @@ function submit(slotId) {
   align-items: center;
   justify-content: space-between;
   background: var(--color-bg);
-  border-radius: 6px;
-  padding: 6px 10px;
+  border-radius: var(--radius-sm);
+  padding: 8px 10px;
 }
 
-.item-text { font-size: 0.9rem; }
+.item-text { font-size: 0.9rem; flex: 1; }
 
+/* touch target 44px garantito con padding */
 .btn-remove {
   background: none;
   color: var(--color-muted);
-  min-height: unset;
-  padding: 0 4px;
+  min-height: 44px;
+  min-width: 44px;
+  padding: 0;
   font-size: 0.75rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
-.input-row {
-  display: flex;
-  gap: 6px;
-}
+.btn-remove:active { color: var(--color-danger); }
+
+.input-row { display: flex; gap: 8px; }
 
 .btn-add {
-  background: var(--color-primary-light);
+  background: var(--color-primary);
   color: #fff;
-  font-size: 1.2rem;
-  min-width: 40px;
+  min-width: 48px;
+  min-height: 48px;
   flex-shrink: 0;
-  min-height: 40px;
   padding: 0;
+  border-radius: var(--radius-sm);
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 </style>
diff --git a/src/pages/Converter.vue b/src/pages/Converter.vue
index f9b91ea..548f9cf 100644
--- a/src/pages/Converter.vue
+++ b/src/pages/Converter.vue
@@ -1,13 +1,17 @@
 <template>
   <div class="page">
-    <h1 class="page-title">Conversione crudo / cotto</h1>
+    <div class="page-header">
+      <h1 class="page-title">Conversione</h1>
+      <p class="page-subtitle">crudo ↔ cotto</p>
+    </div>
 
     <div class="search-box">
       <input
         v-model="query"
         type="text"
-        placeholder="Cerca alimento (es. pollo)"
+        placeholder="Cerca alimento (es. pollo, riso...)"
         @input="onSearch"
+        :disabled="!!selected"
       />
     </div>
 
@@ -18,14 +22,20 @@
         class="result-item"
         @click="selectItem(r)"
       >
-        {{ r.food }} — {{ r.method }}
+        <span class="result-food">{{ r.food }}</span>
+        <span class="result-method">{{ r.method }}</span>
       </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 class="selected-chip">
+        <span class="chip-text">{{ selected.food }} · {{ selected.method }}</span>
+        <button class="btn-chip-reset" @click="reset" aria-label="Cambia alimento">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
+            <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
+          </svg>
+        </button>
       </div>
 
       <div class="direction-toggle">
@@ -33,15 +43,23 @@
         <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 class="input-group">
+        <label class="input-label">{{ direction === 'rawToCooked' ? 'Grammi crudi' : 'Grammi cotti' }}</label>
+        <div class="input-row">
+          <input v-model.number="grams" type="number" min="0" placeholder="0" />
+          <span class="unit">g</span>
+        </div>
       </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 class="result-formula">
+          {{ grams }}g × {{ yieldValue }} =
+        </div>
+        <div class="result-main">
+          <span class="result-value">{{ result }}</span>
+          <span class="result-unit">g</span>
+        </div>
+        <div class="result-desc">{{ direction === 'rawToCooked' ? 'da mangiare cotti' : 'peso crudo equivalente' }}</div>
       </div>
     </div>
   </div>
@@ -58,6 +76,11 @@ const selected = ref(null)
 const direction = ref('rawToCooked')
 const grams = ref(null)
 
+const yieldValue = computed(() => {
+  if (!selected.value) return ''
+  return db[selected.value.food][selected.value.method].yield
+})
+
 const result = computed(() => {
   if (!selected.value || !grams.value || grams.value <= 0) return null
   const { food, method } = selected.value
@@ -97,53 +120,73 @@ function reset() {
 </script>
 
 <style scoped>
-.search-box { margin-bottom: 12px; }
+.search-box { margin-bottom: 8px; }
 
 .results-list {
   list-style: none;
   background: var(--color-surface);
-  border: 1px solid var(--color-border);
+  border: 1.5px solid var(--color-border);
   border-radius: var(--radius);
   overflow: hidden;
   margin-bottom: 16px;
+  box-shadow: var(--shadow-sm);
 }
 
 .result-item {
-  padding: 12px 16px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 14px 16px;
   cursor: pointer;
   border-bottom: 1px solid var(--color-border);
-  text-transform: capitalize;
+  transition: background var(--transition);
 }
 
 .result-item:last-child { border-bottom: none; }
 .result-item:active { background: var(--color-bg); }
 
+.result-food { font-weight: 600; text-transform: capitalize; }
+.result-method { font-size: 0.85rem; color: var(--color-muted); text-transform: capitalize; }
+
 .converter-panel { display: flex; flex-direction: column; gap: 16px; }
 
-.selected-label {
-  font-weight: 600;
-  text-transform: capitalize;
-  display: flex;
+.selected-chip {
+  display: inline-flex;
   align-items: center;
   gap: 8px;
+  background: var(--color-primary-muted);
+  border-radius: var(--radius-full);
+  padding: 6px 12px 6px 14px;
+  align-self: flex-start;
 }
 
-.btn-link {
+.chip-text {
+  font-size: 0.9rem;
+  font-weight: 600;
+  color: var(--color-primary);
+  text-transform: capitalize;
+}
+
+.btn-chip-reset {
   background: none;
   color: var(--color-primary);
   min-height: unset;
-  padding: 0;
-  font-size: 0.85rem;
+  padding: 2px;
+  display: flex;
+  align-items: center;
+  opacity: 0.7;
 }
 
 .direction-toggle { display: flex; gap: 8px; }
 
 .toggle-btn {
   flex: 1;
-  background: var(--color-bg);
+  background: var(--color-surface);
   color: var(--color-muted);
-  border: 1px solid var(--color-border);
-  font-size: 0.85rem;
+  border: 1.5px solid var(--color-border);
+  font-size: 0.875rem;
+  font-weight: 500;
+  border-radius: var(--radius-sm);
 }
 
 .toggle-btn.active {
@@ -152,18 +195,59 @@ function reset() {
   border-color: var(--color-primary);
 }
 
-.input-row { display: flex; align-items: center; gap: 8px; }
-.unit { font-size: 1rem; color: var(--color-muted); }
+.input-group { display: flex; flex-direction: column; gap: 6px; }
 
-.result-box {
-  background: var(--color-surface);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius);
-  padding: 20px;
-  text-align: center;
+.input-label {
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: var(--color-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
 }
 
-.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); }
+.input-row { display: flex; align-items: center; gap: 10px; }
+.unit { font-size: 1rem; color: var(--color-muted); font-weight: 500; }
+
+.result-box {
+  background: var(--color-primary);
+  border-radius: var(--radius);
+  padding: 24px 20px;
+  text-align: center;
+  box-shadow: var(--shadow-md);
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.result-formula {
+  font-size: 0.8rem;
+  color: rgba(255,255,255,0.65);
+}
+
+.result-main {
+  display: flex;
+  align-items: baseline;
+  justify-content: center;
+  gap: 4px;
+}
+
+.result-value {
+  font-size: 3rem;
+  font-weight: 800;
+  color: #fff;
+  letter-spacing: -0.02em;
+  line-height: 1;
+}
+
+.result-unit {
+  font-size: 1.4rem;
+  color: rgba(255,255,255,0.8);
+  font-weight: 600;
+}
+
+.result-desc {
+  font-size: 0.85rem;
+  color: rgba(255,255,255,0.65);
+  margin-top: 2px;
+}
 </style>
diff --git a/src/pages/MealPlanner.vue b/src/pages/MealPlanner.vue
index b4a5612..c9ddbac 100644
--- a/src/pages/MealPlanner.vue
+++ b/src/pages/MealPlanner.vue
@@ -1,11 +1,15 @@
 <template>
   <div class="page">
-    <h1 class="page-title">Pasti della settimana</h1>
+    <div class="page-header">
+      <h1 class="page-title">Pasti della settimana</h1>
+      <p class="page-subtitle">{{ todayLabel }}</p>
+    </div>
     <MealCard
       v-for="day in days"
       :key="day.id"
       :day-name="day.label"
       :meals="meals[day.id]"
+      :default-open="day.id === todayId"
       @add="(slot, text) => addItem(day.id, slot, text)"
       @remove="(slot, idx) => removeItem(day.id, slot, idx)"
     />
@@ -27,6 +31,10 @@ const days = [
   { id: 'domenica',  label: 'Domenica'  },
 ]
 
+const todayMap = ['domenica', 'lunedi', 'martedi', 'mercoledi', 'giovedi', 'venerdi', 'sabato']
+const todayId = todayMap[new Date().getDay()]
+const todayLabel = days.find(d => d.id === todayId)?.label ?? ''
+
 const defaultMeals = () =>
   Object.fromEntries(days.map(d => [d.id, { colazione: [], pranzo: [], cena: [] }]))
 
diff --git a/src/pages/ShoppingList.vue b/src/pages/ShoppingList.vue
index 39c4b61..99567c0 100644
--- a/src/pages/ShoppingList.vue
+++ b/src/pages/ShoppingList.vue
@@ -1,6 +1,11 @@
 <template>
   <div class="page">
-    <h1 class="page-title">Lista della spesa</h1>
+    <div class="page-header">
+      <h1 class="page-title">Lista della spesa</h1>
+      <p class="page-subtitle" v-if="items.length">
+        {{ checkedCount }} / {{ items.length }} completat{{ checkedCount === 1 ? 'o' : 'i' }}
+      </p>
+    </div>
 
     <div class="add-row">
       <input
@@ -9,33 +14,66 @@
         placeholder="Aggiungi elemento..."
         @keyup.enter="add"
       />
-      <button class="btn-add" @click="add">+</button>
+      <button class="btn-add" @click="add" aria-label="Aggiungi">
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
+          <line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/>
+        </svg>
+      </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>
+    <template v-if="items.length">
+      <ul class="shop-list">
+        <CheckboxItem
+          v-for="item in pendingItems"
+          :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>
+      <template v-if="checkedCount > 0">
+        <div class="section-divider">
+          <span>Completati ({{ checkedCount }})</span>
+        </div>
+        <ul class="shop-list muted">
+          <CheckboxItem
+            v-for="item in checkedItems"
+            :key="item.id"
+            :item="item"
+            @toggle="toggle(item.id)"
+            @remove="remove(item.id)"
+          />
+        </ul>
+      </template>
 
-    <button v-if="items.length" class="btn-clear" @click="clearAll">Svuota lista</button>
+      <button class="btn-clear" @click="clearAll">Svuota lista</button>
+    </template>
+
+    <div v-else class="empty-state">
+      <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="color: var(--color-border)">
+        <path d="M6 2L3 6v14a2 2 0 002 2h14a2 2 0 002-2V6l-3-4z"/>
+        <line x1="3" y1="6" x2="21" y2="6"/>
+        <path d="M16 10a4 4 0 01-8 0"/>
+      </svg>
+      <p>Lista vuota</p>
+      <p class="empty-hint">Aggiungi qualcosa con il campo qui sopra.</p>
+    </div>
   </div>
 </template>
 
 <script setup>
-import { ref, watch } from 'vue'
+import { ref, computed, watch } from 'vue'
 import CheckboxItem from '../components/CheckboxItem.vue'
 import { save, load } from '../utils/storage.js'
 
 const items = ref(load('shopping', []))
 const newItem = ref('')
 
+const pendingItems = computed(() => items.value.filter(i => !i.checked))
+const checkedItems = computed(() => items.value.filter(i => i.checked))
+const checkedCount = computed(() => checkedItems.value.length)
+
 watch(items, () => save('shopping', items.value), { deep: true })
 
 function add() {
@@ -69,28 +107,70 @@ function clearAll() {
 .btn-add {
   background: var(--color-primary);
   color: #fff;
-  font-size: 1.4rem;
-  min-width: 44px;
+  min-width: 48px;
+  min-height: 48px;
   flex-shrink: 0;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-sm);
 }
 
 .shop-list {
   list-style: none;
   display: flex;
   flex-direction: column;
-  gap: 4px;
-  margin-bottom: 20px;
+  gap: 6px;
+  margin-bottom: 8px;
 }
 
-.empty-msg {
+.section-divider {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 12px 0 8px;
+  font-size: 0.75rem;
+  font-weight: 600;
   color: var(--color-muted);
-  text-align: center;
-  margin: 40px 0;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
 }
 
+.section-divider::after {
+  content: '';
+  flex: 1;
+  height: 1px;
+  background: var(--color-border);
+}
+
+/* bottone distruttivo in ghost style — meno aggressivo del solid rosso */
 .btn-clear {
   width: 100%;
-  background: var(--color-danger);
-  color: #fff;
+  background: transparent;
+  color: var(--color-danger);
+  border: 1.5px solid var(--color-danger);
+  margin-top: 16px;
+  font-weight: 600;
+}
+
+.btn-clear:active {
+  background: var(--color-danger-muted);
+  opacity: 1;
+}
+
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  padding: 60px 20px;
+  color: var(--color-muted);
+}
+
+.empty-hint {
+  font-size: 0.85rem;
+  color: var(--color-muted);
+  opacity: 0.7;
 }
 </style>
diff --git a/src/style.css b/src/style.css
index b67d5c8..14c8e4e 100644
--- a/src/style.css
+++ b/src/style.css
@@ -5,16 +5,23 @@
 }
 
 :root {
-  --color-bg: #f5f5f5;
+  --color-bg: #f0f4f1;
   --color-surface: #ffffff;
   --color-primary: #2d6a4f;
   --color-primary-light: #52b788;
+  --color-primary-muted: #e8f5ee;
   --color-text: #1a1a1a;
   --color-muted: #6b7280;
-  --color-border: #e5e7eb;
+  --color-border: #e2e8e4;
   --color-danger: #dc2626;
-  --radius: 8px;
-  --nav-height: 60px;
+  --color-danger-muted: #fef2f2;
+  --radius: 12px;
+  --radius-sm: 8px;
+  --radius-full: 999px;
+  --nav-height: 64px;
+  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
+  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
+  --transition: 150ms ease;
 }
 
 html, body {
@@ -23,6 +30,7 @@ html, body {
   font-size: 16px;
   background: var(--color-bg);
   color: var(--color-text);
+  -webkit-font-smoothing: antialiased;
 }
 
 #app {
@@ -37,38 +45,58 @@ html, body {
 .page {
   flex: 1;
   overflow-y: auto;
-  padding: 16px;
-  padding-bottom: calc(var(--nav-height) + 16px);
+  padding: 20px 16px;
+  padding-bottom: calc(var(--nav-height) + 20px);
+}
+
+.page-header {
+  margin-bottom: 20px;
 }
 
 .page-title {
-  font-size: 1.25rem;
-  font-weight: 700;
-  margin-bottom: 16px;
+  font-size: 1.4rem;
+  font-weight: 800;
+  letter-spacing: -0.02em;
+  color: var(--color-text);
+}
+
+.page-subtitle {
+  font-size: 0.85rem;
+  color: var(--color-muted);
+  margin-top: 2px;
 }
 
 button {
   font-size: 1rem;
   cursor: pointer;
   border: none;
-  border-radius: var(--radius);
+  border-radius: var(--radius-sm);
   min-height: 44px;
   padding: 0 16px;
+  transition: opacity var(--transition), background var(--transition), color var(--transition);
 }
 
+button:active { opacity: 0.75; }
+
 input[type="text"],
 input[type="number"] {
   font-size: 1rem;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius);
-  padding: 10px 12px;
-  min-height: 44px;
+  border: 1.5px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  padding: 10px 14px;
+  min-height: 48px;
   width: 100%;
   background: var(--color-surface);
   color: var(--color-text);
+  transition: border-color var(--transition), box-shadow var(--transition);
 }
 
 input:focus {
-  outline: 2px solid var(--color-primary);
-  outline-offset: 1px;
+  outline: none;
+  border-color: var(--color-primary);
+  box-shadow: 0 0 0 3px rgba(45, 106, 79, 0.12);
+}
+
+input::placeholder {
+  color: #b0bab4;
 }