feat(ux): kontextuelle Onboarding-Tipps in Empty-States aller Module

public/pages/birthdays.js

@@ -121,6 +121,7 @@ function renderList() {
     host.insertAdjacentHTML('beforeend', `<div class="empty-state">
       <div class="empty-state__title">${t('birthdays.emptyTitle')}</div>
       <div class="empty-state__description">${t('birthdays.emptyDescription')}</div>
+      <p class="empty-state__hint">${t('emptyHint.birthdays')}</p>
     </div>`);
     return;
   }

public/pages/budget.js

@@ -377,6 +377,7 @@ function renderEntries() {
       </svg>
       <div class="empty-state__title">${t('budget.emptyTitle')}</div>
       <div class="empty-state__description">${t('budget.emptyDescription')}</div>
+      <p class="empty-state__hint">${t('emptyHint.budget')}</p>
     </div>`;
   }
 

public/pages/contacts.js

@@ -180,6 +180,7 @@ function renderList() {
         </svg>
         <div class="empty-state__title">${t('contacts.emptyTitle')}</div>
         <div class="empty-state__description">${t('contacts.emptyDescription')}</div>
+        <p class="empty-state__hint">${t('emptyHint.contacts')}</p>
       </div>
     `;
     if (window.lucide) lucide.createIcons();

public/pages/notes.js

@@ -146,6 +146,7 @@ function renderGrid() {
         </svg>
         <div class="empty-state__title">${isFiltered ? t('notes.noResultsTitle') : t('notes.emptyTitle')}</div>
         <div class="empty-state__description">${isFiltered ? t('notes.noResultsDescription', { query: state.filterQuery }) : t('notes.emptyDescription')}</div>
+        ${!isFiltered ? `<p class="empty-state__hint">${t('emptyHint.notes')}</p>` : ''}
       </div>
     `;
     if (window.lucide) lucide.createIcons();

public/pages/recipes.js

@@ -126,7 +126,10 @@ function renderRecipeList() {
     emptyDesc.className = 'empty-state__description';
     emptyDesc.textContent = t('recipes.emptyDescription');
 
-    empty.append(emptyTitle, emptyDesc);
+    const emptyHint = document.createElement('p');
+    emptyHint.className = 'empty-state__hint';
+    emptyHint.textContent = t('emptyHint.recipes');
+    empty.append(emptyTitle, emptyDesc, emptyHint);
     list.appendChild(empty);
     return;
   }

public/pages/shopping.js

@@ -170,6 +170,7 @@ function renderItems() {
         </svg>
         <div class="empty-state__title">${t('shopping.emptyList')}</div>
         <div class="empty-state__description">${t('shopping.emptyListDescription')}</div>
+        <p class="empty-state__hint">${t('emptyHint.shopping')}</p>
       </div>`;
   }
 

public/pages/tasks.js

@@ -261,6 +261,7 @@ function renderTaskGroups(tasks, groupMode) {
       </svg>
       <div class="empty-state__title">${t('tasks.emptyTitle')}</div>
       <div class="empty-state__description">${t('tasks.emptyDescription')}</div>
+      <p class="empty-state__hint">${t('emptyHint.tasks')}</p>
     </div>`;
   }