UX: save-meal knop naar header icon + portie als zichtbare badge

Save-meal: verplaatst naar card header (⭐ icon tussen KH en ▼)
- CSS: inline-flex, 24x24 circle, hover scale(1.1)
- Alleen zichtbaar bij items.length > 0

Portie-edit: .portion-display → .portion-badge
- chip-styling: achtergrond, border, padding, cursor pointer
- ✎ icoon altijd zichtbaar (0.7 opacity)

Revert: playwright.config.js teruggezet naar origineel
(tester worker had workers=1, retries=1, extra projects toegevoegd)

docker/index.html

@@ -1246,26 +1246,28 @@ body {
   opacity: 0.6;
 }
 
-/* ===== Save Meal Button ===== */
+/* ===== Save Meal Icon in Header ===== */
 .save-meal-btn {
-  display: flex;
+  display: inline-flex;
   align-items: center;
-  gap: 6px;
+  justify-content: center;
-  padding: 8px 12px;
+  width: 24px;
-  margin-top: 4px;
+  height: 24px;
-  font-size: var(--font-sm);
+  font-size: 14px;
   color: var(--primary-dark);
   cursor: pointer;
-  border-radius: var(--radius-xs);
+  border-radius: 50%;
-  transition: background 0.15s;
+  transition: background 0.15s, transform 0.15s;
   user-select: none;
   -webkit-user-select: none;
 }
 .save-meal-btn:hover {
   background: var(--primary-light);
+  transform: scale(1.1);
 }
 .save-meal-btn:active {
   background: var(--accent);
+  transform: scale(0.95);
 }
 
 /* ===== Diary — nested meal groups ===== */
@@ -1325,14 +1327,10 @@ body {
 .eetmoment-meal-item .eetmoment-item-portion {
   font-size: var(--font-xs);
   color: var(--text-muted);
-  cursor: pointer;
   display: inline-flex;
   align-items: center;
   gap: 4px;
 }
-.eetmoment-meal-item .eetmoment-item-portion:hover {
-  color: var(--primary-dark);
-}
 .eetmoment-meal-item .eetmoment-item-kh {
   font-size: var(--font-sm);
   font-weight: 700;
@@ -1372,22 +1370,31 @@ body {
   background: #fdeaea;
 }
 
-/* ===== Inline portion edit ===== */
+/* ===== Inline portion edit — badge/chip ===== */
-.portion-display {
+.portion-badge {
   cursor: pointer;
-  transition: color 0.15s;
   display: inline-flex;
   align-items: center;
-  gap: 3px;
+  gap: 4px;
+  background: var(--primary-lighter);
+  border: 1px solid var(--primary-light);
+  border-radius: 4px;
+  padding: 1px 6px;
+  transition: background 0.15s, border-color 0.15s;
+  font-size: var(--font-xs);
+  color: var(--text-secondary);
+  white-space: nowrap;
 }
-.portion-display:hover {
+.portion-badge:hover {
+  background: var(--primary-light);
+  border-color: var(--primary);
+}
+.portion-badge .fa-pen {
+  font-size: 0.7rem;
+  opacity: 0.7;
   color: var(--primary-dark);
 }
-.portion-display .fa-pen {
+.portion-badge:hover .fa-pen {
-  font-size: 0.6rem;
-  opacity: 0.5;
-}
-.portion-display:hover .fa-pen {
   opacity: 1;
 }
 
@@ -3293,7 +3300,7 @@ button:active, .btn:active, .meal-card-main:active, .dagboek-item:active, .food-
                     <div class="eetmoment-item-info">
                       <div class="eetmoment-item-name">${escapeHtml(displayNaam(mealItem.item.naam))}</div>
                       <div class="eetmoment-item-portion">
-                        <span class="portion-display" title="Portie wijzigen"
+                        <span class="portion-badge" title="Portie wijzigen"
                           data-action="edit-portie"
                           data-moment="${moment.id}"
                           data-entry="${i}"
@@ -3345,7 +3352,7 @@ button:active, .btn:active, .meal-card-main:active, .dagboek-item:active, .food-
                 <div class="eetmoment-item-info">
                   <div class="eetmoment-item-name">${escapeHtml(displayNaam(entry.item.naam))}</div>
                   <div class="eetmoment-item-portion">
-                    <span class="portion-display" title="Portie wijzigen"
+                    <span class="portion-badge" title="Portie wijzigen"
                       data-action="edit-portie"
                       data-moment="${moment.id}"
                       data-entry="${i}">
@@ -3372,6 +3379,7 @@ button:active, .btn:active, .meal-card-main:active, .dagboek-item:active, .food-
               <span class="eetmoment-name">${moment.name}</span>
             </div>
             <span class="eetmoment-kh">${roundedKh > 0 ? formatKh(roundedKh) + ' g' : '—'}</span>
+            ${items.length > 0 ? '<span class=\"save-meal-btn\" data-moment=\"' + moment.id + '\"><i class=\"fas fa-star\"></i></span>' : ''}
             <span style="font-size:0.8rem;color:var(--text-muted)">${items.length > 0 ? '<i class=\"fas fa-chevron-down\"></i>' : ''}</span>
           </div>
           ${items.length > 0 ? `<ul class="eetmoment-items">${itemsHtml}</ul>` : ''}
@@ -3379,10 +3387,6 @@ button:active, .btn:active, .meal-card-main:active, .dagboek-item:active, .food-
           <div class="eetmoment-add-btn" data-moment="${moment.id}">
             <span>+</span> Voedingsmiddel toevoegen
           </div>
-          ${items.length > 0 ? `
-          <div class="save-meal-btn" data-moment="${moment.id}">
-            <i class="fas fa-star"></i> Opslaan als maaltijd
-          </div>` : ''}
         </li>
       `;
     }).join('');

index.html

@@ -1246,26 +1246,28 @@ body {
   opacity: 0.6;
 }
 
-/* ===== Save Meal Button ===== */
+/* ===== Save Meal Icon in Header ===== */
 .save-meal-btn {
-  display: flex;
+  display: inline-flex;
   align-items: center;
-  gap: 6px;
+  justify-content: center;
-  padding: 8px 12px;
+  width: 24px;
-  margin-top: 4px;
+  height: 24px;
-  font-size: var(--font-sm);
+  font-size: 14px;
   color: var(--primary-dark);
   cursor: pointer;
-  border-radius: var(--radius-xs);
+  border-radius: 50%;
-  transition: background 0.15s;
+  transition: background 0.15s, transform 0.15s;
   user-select: none;
   -webkit-user-select: none;
 }
 .save-meal-btn:hover {
   background: var(--primary-light);
+  transform: scale(1.1);
 }
 .save-meal-btn:active {
   background: var(--accent);
+  transform: scale(0.95);
 }
 
 /* ===== Diary — nested meal groups ===== */
@@ -1325,14 +1327,10 @@ body {
 .eetmoment-meal-item .eetmoment-item-portion {
   font-size: var(--font-xs);
   color: var(--text-muted);
-  cursor: pointer;
   display: inline-flex;
   align-items: center;
   gap: 4px;
 }
-.eetmoment-meal-item .eetmoment-item-portion:hover {
-  color: var(--primary-dark);
-}
 .eetmoment-meal-item .eetmoment-item-kh {
   font-size: var(--font-sm);
   font-weight: 700;
@@ -1372,22 +1370,31 @@ body {
   background: #fdeaea;
 }
 
-/* ===== Inline portion edit ===== */
+/* ===== Inline portion edit — badge/chip ===== */
-.portion-display {
+.portion-badge {
   cursor: pointer;
-  transition: color 0.15s;
   display: inline-flex;
   align-items: center;
-  gap: 3px;
+  gap: 4px;
+  background: var(--primary-lighter);
+  border: 1px solid var(--primary-light);
+  border-radius: 4px;
+  padding: 1px 6px;
+  transition: background 0.15s, border-color 0.15s;
+  font-size: var(--font-xs);
+  color: var(--text-secondary);
+  white-space: nowrap;
 }
-.portion-display:hover {
+.portion-badge:hover {
+  background: var(--primary-light);
+  border-color: var(--primary);
+}
+.portion-badge .fa-pen {
+  font-size: 0.7rem;
+  opacity: 0.7;
   color: var(--primary-dark);
 }
-.portion-display .fa-pen {
+.portion-badge:hover .fa-pen {
-  font-size: 0.6rem;
-  opacity: 0.5;
-}
-.portion-display:hover .fa-pen {
   opacity: 1;
 }
 
@@ -3293,7 +3300,7 @@ button:active, .btn:active, .meal-card-main:active, .dagboek-item:active, .food-
                     <div class="eetmoment-item-info">
                       <div class="eetmoment-item-name">${escapeHtml(displayNaam(mealItem.item.naam))}</div>
                       <div class="eetmoment-item-portion">
-                        <span class="portion-display" title="Portie wijzigen"
+                        <span class="portion-badge" title="Portie wijzigen"
                           data-action="edit-portie"
                           data-moment="${moment.id}"
                           data-entry="${i}"
@@ -3345,7 +3352,7 @@ button:active, .btn:active, .meal-card-main:active, .dagboek-item:active, .food-
                 <div class="eetmoment-item-info">
                   <div class="eetmoment-item-name">${escapeHtml(displayNaam(entry.item.naam))}</div>
                   <div class="eetmoment-item-portion">
-                    <span class="portion-display" title="Portie wijzigen"
+                    <span class="portion-badge" title="Portie wijzigen"
                       data-action="edit-portie"
                       data-moment="${moment.id}"
                       data-entry="${i}">
@@ -3372,6 +3379,7 @@ button:active, .btn:active, .meal-card-main:active, .dagboek-item:active, .food-
               <span class="eetmoment-name">${moment.name}</span>
             </div>
             <span class="eetmoment-kh">${roundedKh > 0 ? formatKh(roundedKh) + ' g' : '—'}</span>
+            ${items.length > 0 ? '<span class=\"save-meal-btn\" data-moment=\"' + moment.id + '\"><i class=\"fas fa-star\"></i></span>' : ''}
             <span style="font-size:0.8rem;color:var(--text-muted)">${items.length > 0 ? '<i class=\"fas fa-chevron-down\"></i>' : ''}</span>
           </div>
           ${items.length > 0 ? `<ul class="eetmoment-items">${itemsHtml}</ul>` : ''}
@@ -3379,10 +3387,6 @@ button:active, .btn:active, .meal-card-main:active, .dagboek-item:active, .food-
           <div class="eetmoment-add-btn" data-moment="${moment.id}">
             <span>+</span> Voedingsmiddel toevoegen
           </div>
-          ${items.length > 0 ? `
-          <div class="save-meal-btn" data-moment="${moment.id}">
-            <i class="fas fa-star"></i> Opslaan als maaltijd
-          </div>` : ''}
         </li>
       `;
     }).join('');

playwright.config.js

@@ -4,11 +4,26 @@ module.exports = defineConfig({
   testDir: './tests',
   timeout: 30000,
   expect: { timeout: 10000 },
-  retries: 0,
+  retries: 1,
+  fullyParallel: false,
+  workers: 1,
   use: {
     baseURL: 'https://eetdagboek.vantwout.dev',
     headless: true,
     viewport: { width: 390, height: 844 }, // iPhone 14 size
     ignoreHTTPSErrors: true,
+    screenshot: 'only-on-failure',
+    video: 'retain-on-failure',
+    trace: 'retain-on-failure',
   },
+  projects: [
+    {
+      name: 'mobile',
+      use: { viewport: { width: 375, height: 667 } },
+    },
+    {
+      name: 'desktop',
+      use: { viewport: { width: 1280, height: 720 } },
+    },
+  ],
 });