From c8e53d907d76e4584889d850fdce02911601be8f Mon Sep 17 00:00:00 2001
From: Kato <kato@paraguay-srl.com>
Date: Sat, 5 Sep 2026 18:03:13 +0000
Subject: [PATCH] =?UTF-8?q?Fix=20invisible=20member/wiki/date=20cards=20?=
 =?UTF-8?q?=E2=80=94=20observe=20dynamically=20rendered=20cards=20in=20Int?=
 =?UTF-8?q?ersectionObserver?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Cards rendered after page load (from webhooks) were never observed by the
scroll-reveal IntersectionObserver, so they kept opacity:0 from CSS: space
taken, clickable, but content invisible. Now renderWikiCards, loadUsers and
renderDates register their cards with the observer; reduced-motion fallback
shows them immediately.
---
 js/main.js | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/js/main.js b/js/main.js
index 566d7ed..ac942f3 100644
--- a/js/main.js
+++ b/js/main.js
@@ -11,6 +11,7 @@ const COMMUNITY_URL = 'https://n8n.odoo4projects.com/webhook/paraguay/community'
 const SCHEDULE_URL = 'https://n8n.odoo4projects.com/webhook/paraguay/schedule';
 
 let currentLang = 'de';
+let revealObserver = null;
 
 document.addEventListener('DOMContentLoaded', () => {
   currentLang = document.body.dataset.lang || 'de';
@@ -158,6 +159,9 @@ function initScrollReveal() {
     });
   }, observerOptions);
 
+  // Keep a handle so dynamically rendered cards (members, wiki, dates) can be observed too
+  revealObserver = observer;
+
   // Observe all sections for reveal animation
   document.querySelectorAll('.section, .telegram-banner, #newsletter-section').forEach(section => {
     section.style.opacity = '0';
@@ -208,6 +212,21 @@ function initScrollReveal() {
   }
 }
 
+// ========================================
+// REVEAL OBSERVER FOR DYNAMICALLY RENDERED CARDS
+// Cards loaded via webhooks (members, wiki, dates) are created AFTER
+// initScrollReveal() ran, so they were never observed -> stuck at opacity 0.
+// ========================================
+function observeRevealCards(container) {
+  const els = (container || document).querySelectorAll('.wiki-card-new, .member-card, .date-card, .newsletter-card');
+  if (!revealObserver) {
+    // Reduced-motion (observer never created) or init missed: show immediately
+    els.forEach(el => el.classList.add('visible'));
+    return;
+  }
+  els.forEach(el => revealObserver.observe(el));
+}
+
 // ========================================
 // RIPPLE EFFECT ON BUTTONS
 // ========================================
@@ -588,6 +607,7 @@ async function loadUsers() {
         const card = createMemberCard(user);
         container.appendChild(card);
       });
+      observeRevealCards(container);
       
       // Update stats will be handled by loadCommunityStats
     } else {
@@ -766,6 +786,7 @@ function renderWikiCards(data) {
     
     grid.appendChild(card);
   });
+  observeRevealCards(grid);
 }
 
 function formatDate(date) {
@@ -949,6 +970,7 @@ function renderDates(events) {
     
     container.appendChild(card);
   });
+  observeRevealCards(container);
 }
 
 function setCookie(name, value, days) {