From bc6e759b796a31fed5e2cb43ac41d5b368cc115c Mon Sep 17 00:00:00 2001
From: Ulas <ulas@kalayci.cloud>
Date: Mon, 30 Mar 2026 17:19:33 +0200
Subject: [PATCH] feat: staggered fade-in for list items across all modules

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 public/pages/budget.js   | 2 ++
 public/pages/calendar.js | 3 +++
 public/pages/contacts.js | 2 ++
 public/pages/meals.js    | 2 ++
 public/pages/notes.js    | 2 ++
 public/pages/shopping.js | 3 +++
 public/pages/tasks.js    | 2 ++
 7 files changed, 16 insertions(+)

diff --git a/public/pages/budget.js b/public/pages/budget.js
index d03b5bd..98f7115 100644
--- a/public/pages/budget.js
+++ b/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"]');
diff --git a/public/pages/calendar.js b/public/pages/calendar.js
index b04e82f..dc64735 100644
--- a/public/pages/calendar.js
+++ b/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) {
diff --git a/public/pages/contacts.js b/public/pages/contacts.js
index aa7996b..5ca0890 100644
--- a/public/pages/contacts.js
+++ b/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) => {
diff --git a/public/pages/meals.js b/public/pages/meals.js
index e69c895..410d7e4 100644
--- a/public/pages/meals.js
+++ b/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);
 }
 
diff --git a/public/pages/notes.js b/public/pages/notes.js
index 9006335..d101af4 100644
--- a/public/pages/notes.js
+++ b/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
diff --git a/public/pages/shopping.js b/public/pages/shopping.js
index eb95e93..ac100f8 100644
--- a/public/pages/shopping.js
+++ b/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;
diff --git a/public/pages/tasks.js b/public/pages/tasks.js
index 8d9a158..b9e0fef 100644
--- a/public/pages/tasks.js
+++ b/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);
 }