feat: staggered fade-in for list items across all modules

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

public/pages/budget.js

@@ -7,6 +7,7 @@
 
 import { api } from '/api.js';
 import { openModal as openSharedModal, closeModal } from '/components/modal.js';
+import { stagger } from '/utils/ux.js';
 
 // --------------------------------------------------------
 // Konstanten
@@ -202,6 +203,7 @@ function renderBody() {
   `;
 
   if (window.lucide) lucide.createIcons();
+  stagger(_container.querySelectorAll('.budget-entry'));
 
   _container.querySelector('#budget-list')?.addEventListener('click', async (e) => {
     const delBtn = e.target.closest('[data-action="delete"]');

public/pages/calendar.js

@@ -7,6 +7,7 @@
 import { api } from '/api.js';
 import { renderRRuleFields, bindRRuleEvents, getRRuleValues } from '/rrule-ui.js';
 import { openModal as openSharedModal, closeModal } from '/components/modal.js';
+import { stagger } from '/utils/ux.js';
 
 // --------------------------------------------------------
 // Konstanten
@@ -597,6 +598,8 @@ function renderAgendaView(container) {
     </div>
   `;
 
+  stagger(container.querySelectorAll('.agenda-event'));
+
   container.querySelector('#agenda-view').addEventListener('click', (e) => {
     const evEl = e.target.closest('.agenda-event');
     if (evEl) {

public/pages/contacts.js

@@ -6,6 +6,7 @@
 
 import { api } from '/api.js';
 import { openModal as openSharedModal, closeModal } from '/components/modal.js';
+import { stagger } from '/utils/ux.js';
 
 // --------------------------------------------------------
 // Konstanten
@@ -159,6 +160,7 @@ function renderList() {
     `).join('');
 
   if (window.lucide) lucide.createIcons();
+  stagger(container.querySelectorAll('.contact-item'));
 
   // Event-Delegation
   container.addEventListener('click', async (e) => {

public/pages/meals.js

@@ -6,6 +6,7 @@
 
 import { api } from '/api.js';
 import { openModal as openSharedModal, closeModal as closeSharedModal } from '/components/modal.js';
+import { stagger } from '/utils/ux.js';
 
 // --------------------------------------------------------
 // Konstanten
@@ -162,6 +163,7 @@ function renderWeekGrid() {
   }).join('');
 
   if (window.lucide) lucide.createIcons();
+  stagger(grid.querySelectorAll('.meal-card'));
   wireGrid(grid);
 }
 

public/pages/notes.js

@@ -6,6 +6,7 @@
 
 import { api } from '/api.js';
 import { openModal as openSharedModal, closeModal } from '/components/modal.js';
+import { stagger } from '/utils/ux.js';
 
 // --------------------------------------------------------
 // Konstanten
@@ -99,6 +100,7 @@ function renderGrid() {
 
   grid.innerHTML = state.notes.map((n) => renderNoteCard(n)).join('');
   if (window.lucide) lucide.createIcons();
+  stagger(grid.querySelectorAll('.note-card'));
 
   grid.addEventListener('click', async (e) => {
     // Pin

public/pages/shopping.js

@@ -5,6 +5,7 @@
  */
 
 import { api } from '/api.js';
+import { stagger } from '/utils/ux.js';
 
 // --------------------------------------------------------
 // Konstanten
@@ -151,6 +152,7 @@ function renderListContent(container) {
   `;
 
   if (window.lucide) window.lucide.createIcons();
+  stagger(content.querySelectorAll('.shopping-item'));
   wireAutocomplete(container);
   wireQuickAdd(container);
 }
@@ -311,6 +313,7 @@ function updateItemsList(container) {
   if (listEl) {
     listEl.innerHTML = renderItems();
     if (window.lucide) window.lucide.createIcons();
+    stagger(listEl.querySelectorAll('.shopping-item'));
   }
   // clear-checked Button aktualisieren
   const checkedCount = state.items.filter((i) => i.is_checked).length;

public/pages/tasks.js

@@ -7,6 +7,7 @@
 import { api } from '/api.js';
 import { renderRRuleFields, bindRRuleEvents, getRRuleValues } from '/rrule-ui.js';
 import { openModal as openSharedModal, closeModal } from '/components/modal.js';
+import { stagger } from '/utils/ux.js';
 
 // --------------------------------------------------------
 // Konstanten
@@ -605,6 +606,7 @@ function renderTaskList(container) {
   if (!listEl) return;
   listEl.innerHTML = renderTaskGroups(state.tasks, state.groupMode);
   if (window.lucide) window.lucide.createIcons();
+  stagger(listEl.querySelectorAll('.swipe-row, .kanban-card'));
   updateOverdueBadge();
   wireSwipeGestures(container);
 }