From 0eab480a0e10a0482d976e02f78f4f67316211e2 Mon Sep 17 00:00:00 2001
From: Ulas <ulas@kalayci.cloud>
Date: Mon, 30 Mar 2026 17:25:13 +0200
Subject: [PATCH] style: unify all empty states to shared .empty-state class
 across all modules

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 public/pages/budget.js     | 11 +++++++----
 public/pages/contacts.js   | 12 +++++++++---
 public/pages/meals.js      |  5 ++++-
 public/pages/notes.js      | 14 ++++++++++----
 public/pages/shopping.js   | 11 +++++++----
 public/pages/tasks.js      | 11 +++++++----
 public/styles/budget.css   | 13 -------------
 public/styles/contacts.css | 13 -------------
 public/styles/layout.css   |  8 ++++++++
 public/styles/notes.css    | 20 --------------------
 public/styles/shopping.css | 30 ------------------------------
 public/styles/tasks.css    | 25 -------------------------
 12 files changed, 52 insertions(+), 121 deletions(-)

diff --git a/public/pages/budget.js b/public/pages/budget.js
index c51c664..4fa5972 100644
--- a/public/pages/budget.js
+++ b/public/pages/budget.js
@@ -241,10 +241,13 @@ function renderCategoryBars(byCategory) {
 
 function renderEntries() {
   if (!state.entries.length) {
-    return `<div class="budget-empty">
-      <i data-lucide="receipt" style="width:48px;height:48px;color:var(--color-text-disabled);margin-bottom:var(--space-3);" aria-hidden="true"></i>
-      <div style="font-size:var(--text-base);font-weight:600;">Keine Einträge</div>
-      <div style="font-size:var(--text-sm);margin-top:var(--space-1);">Noch keine Transaktionen für diesen Monat.</div>
+    return `<div class="empty-state">
+      <svg class="empty-state__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
+        <line x1="12" y1="1" x2="12" y2="23"/>
+        <path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/>
+      </svg>
+      <div class="empty-state__title">Keine Einträge diesen Monat</div>
+      <div class="empty-state__description">Budget-Einträge über den + Button hinzufügen.</div>
     </div>`;
   }
 
diff --git a/public/pages/contacts.js b/public/pages/contacts.js
index 5ca0890..e8fc55d 100644
--- a/public/pages/contacts.js
+++ b/public/pages/contacts.js
@@ -134,9 +134,15 @@ function renderList() {
 
   if (!contacts.length) {
     container.innerHTML = `
-      <div class="contacts-empty">
-        <i data-lucide="users" style="width:48px;height:48px;color:var(--color-text-disabled);margin-bottom:var(--space-3);" aria-hidden="true"></i>
-        <div style="font-size:var(--text-base);font-weight:600;">Keine Kontakte gefunden</div>
+      <div class="empty-state">
+        <svg class="empty-state__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
+          <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
+          <circle cx="9" cy="7" r="4"/>
+          <path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
+          <path d="M16 3.13a4 4 0 0 1 0 7.75"/>
+        </svg>
+        <div class="empty-state__title">Noch keine Kontakte</div>
+        <div class="empty-state__description">Neue Kontakte über den + Button hinzufügen.</div>
       </div>
     `;
     if (window.lucide) lucide.createIcons();
diff --git a/public/pages/meals.js b/public/pages/meals.js
index 410d7e4..ae0061f 100644
--- a/public/pages/meals.js
+++ b/public/pages/meals.js
@@ -172,8 +172,11 @@ function renderSlot(date, type, mealsForDay) {
 
   if (!meal) {
     return `
-      <div class="meal-slot" data-date="${date}" data-type="${type.key}">
+      <div class="meal-slot meal-slot--empty" data-date="${date}" data-type="${type.key}">
         <div class="meal-slot__type-label">${type.label}</div>
+        <div class="empty-state empty-state--compact">
+          <div class="empty-state__description">Kein Essen geplant</div>
+        </div>
         <button
           class="meal-slot__add-btn"
           data-action="add-meal"
diff --git a/public/pages/notes.js b/public/pages/notes.js
index d101af4..49917cb 100644
--- a/public/pages/notes.js
+++ b/public/pages/notes.js
@@ -88,10 +88,16 @@ function renderGrid() {
 
   if (!state.notes.length) {
     grid.innerHTML = `
-      <div class="notes-empty">
-        <i data-lucide="sticky-note" class="notes-empty__icon" aria-hidden="true"></i>
-        <div style="font-size:var(--text-lg);font-weight:600;margin-bottom:var(--space-2);">Noch keine Notizen</div>
-        <div style="font-size:var(--text-sm);">Klicke auf „Neue Notiz" um loszulegen.</div>
+      <div class="empty-state" style="column-span:all;">
+        <svg class="empty-state__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
+          <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
+          <polyline points="14 2 14 8 20 8"/>
+          <line x1="16" y1="13" x2="8" y2="13"/>
+          <line x1="16" y1="17" x2="8" y2="17"/>
+          <polyline points="10 9 9 9 8 9"/>
+        </svg>
+        <div class="empty-state__title">Noch keine Notizen</div>
+        <div class="empty-state__description">Neue Notiz über den + Button erstellen.</div>
       </div>
     `;
     if (window.lucide) lucide.createIcons();
diff --git a/public/pages/shopping.js b/public/pages/shopping.js
index ac100f8..8fff69d 100644
--- a/public/pages/shopping.js
+++ b/public/pages/shopping.js
@@ -160,10 +160,13 @@ function renderListContent(container) {
 function renderItems() {
   if (!state.items.length) {
     return `
-      <div class="shopping-empty">
-        <i data-lucide="check-circle" class="shopping-empty__icon" aria-hidden="true"></i>
-        <div class="shopping-empty__title">Liste ist leer</div>
-        <div class="shopping-empty__desc">Füge Artikel mit dem Eingabefeld oben hinzu.</div>
+      <div class="empty-state">
+        <svg class="empty-state__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
+          <circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/>
+          <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/>
+        </svg>
+        <div class="empty-state__title">Die Liste ist leer</div>
+        <div class="empty-state__description">Artikel über das Eingabefeld oben hinzufügen.</div>
       </div>`;
   }
 
diff --git a/public/pages/tasks.js b/public/pages/tasks.js
index b9e0fef..6572928 100644
--- a/public/pages/tasks.js
+++ b/public/pages/tasks.js
@@ -195,10 +195,13 @@ function renderTaskCard(task, opts = {}) {
 
 function renderTaskGroups(tasks, groupMode) {
   if (!tasks.length) {
-    return `<div class="tasks-empty">
-      <i data-lucide="check-circle-2" class="tasks-empty__icon" aria-hidden="true"></i>
-      <div class="tasks-empty__title">Keine Aufgaben</div>
-      <div class="tasks-empty__desc">Erstelle eine neue Aufgabe mit dem + Button.</div>
+    return `<div class="empty-state">
+      <svg class="empty-state__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
+        <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
+        <polyline points="22 4 12 14.01 9 11.01"/>
+      </svg>
+      <div class="empty-state__title">Keine Aufgaben — alles erledigt?</div>
+      <div class="empty-state__description">Neue Aufgaben über den + Button erstellen.</div>
     </div>`;
   }
 
diff --git a/public/styles/budget.css b/public/styles/budget.css
index 3958ad0..bcca4ac 100644
--- a/public/styles/budget.css
+++ b/public/styles/budget.css
@@ -281,19 +281,6 @@
   color: var(--color-danger);
 }
 
-/* --------------------------------------------------------
- * Leer-Zustand
- * -------------------------------------------------------- */
-.budget-empty {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  flex: 1;
-  padding: var(--space-12) var(--space-6);
-  text-align: center;
-  color: var(--color-text-secondary);
-}
 
 /* --------------------------------------------------------
  * Budget-Modal Content-Styles (Overlay/Panel via shared modal.js)
diff --git a/public/styles/contacts.css b/public/styles/contacts.css
index 85e78c6..bf98021 100644
--- a/public/styles/contacts.css
+++ b/public/styles/contacts.css
@@ -221,17 +221,4 @@
 .contact-action-btn--mail:hover  { background-color: var(--color-accent-light);   color: var(--color-accent);  }
 .contact-action-btn--maps:hover  { background-color: var(--color-warning-light);  color: var(--color-warning); }
 
-/* --------------------------------------------------------
- * Leer-Zustand
- * -------------------------------------------------------- */
-.contacts-empty {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  flex: 1;
-  padding: var(--space-12) var(--space-6);
-  text-align: center;
-  color: var(--color-text-secondary);
-}
 
diff --git a/public/styles/layout.css b/public/styles/layout.css
index 4b3782f..249fd17 100644
--- a/public/styles/layout.css
+++ b/public/styles/layout.css
@@ -935,6 +935,14 @@
   line-height: var(--line-height-base);
 }
 
+.empty-state--compact {
+  padding: var(--space-4) var(--space-3);
+  gap: var(--space-2);
+}
+.empty-state--compact .empty-state__description {
+  font-size: var(--text-sm);
+}
+
 /* --------------------------------------------------------
  * Responsive Grid (Utility)
  * -------------------------------------------------------- */
diff --git a/public/styles/notes.css b/public/styles/notes.css
index f507830..1149476 100644
--- a/public/styles/notes.css
+++ b/public/styles/notes.css
@@ -211,26 +211,6 @@
   color: var(--color-danger);
 }
 
-/* --------------------------------------------------------
- * Leer-Zustand
- * -------------------------------------------------------- */
-.notes-empty {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: var(--space-12) var(--space-6);
-  text-align: center;
-  color: var(--color-text-secondary);
-  column-span: all;              /* Multicolumn: volle Breite */
-}
-
-.notes-empty__icon {
-  width: 56px;
-  height: 56px;
-  color: var(--color-text-disabled);
-  margin-bottom: var(--space-4);
-}
 
 /* --------------------------------------------------------
  * Notes-Modal Content-Styles (Overlay/Panel via shared modal.js)
diff --git a/public/styles/shopping.css b/public/styles/shopping.css
index 4e43851..d6a9614 100644
--- a/public/styles/shopping.css
+++ b/public/styles/shopping.css
@@ -416,36 +416,6 @@
 
 .item-delete:hover { color: var(--color-danger); }
 
-/* --------------------------------------------------------
- * Leer-Zustand
- * -------------------------------------------------------- */
-.shopping-empty {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: var(--space-12) var(--space-6);
-  text-align: center;
-  flex: 1;
-}
-
-.shopping-empty__icon {
-  width: 56px;
-  height: 56px;
-  color: var(--color-text-disabled);
-  margin-bottom: var(--space-4);
-}
-
-.shopping-empty__title {
-  font-size: var(--text-lg);
-  font-weight: var(--font-weight-semibold);
-  margin-bottom: var(--space-2);
-}
-
-.shopping-empty__desc {
-  font-size: var(--text-sm);
-  color: var(--color-text-secondary);
-}
 
 /* --------------------------------------------------------
  * No-Lists-Zustand
diff --git a/public/styles/tasks.css b/public/styles/tasks.css
index c905ae7..c08079e 100644
--- a/public/styles/tasks.css
+++ b/public/styles/tasks.css
@@ -629,29 +629,4 @@
   opacity: 0.5;
 }
 
-/* --------------------------------------------------------
- * Leer-Zustand
- * -------------------------------------------------------- */
-.tasks-empty {
-  padding: var(--space-12) var(--space-4);
-  text-align: center;
-}
 
-.tasks-empty__icon {
-  width: 56px;
-  height: 56px;
-  color: var(--color-text-disabled);
-  margin: 0 auto var(--space-4);
-}
-
-.tasks-empty__title {
-  font-size: var(--text-lg);
-  font-weight: var(--font-weight-semibold);
-  margin-bottom: var(--space-2);
-}
-
-.tasks-empty__desc {
-  font-size: var(--text-sm);
-  color: var(--color-text-secondary);
-  margin-bottom: var(--space-6);
-}