community

public/assets/css/app.css

@@ -125,6 +125,8 @@ body {
 .event__meta { display:flex; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--color-muted); }
 .event__tags { display:flex; gap: 6px; flex-wrap: wrap; }
 .event__access { font-size: 12px; color: var(--color-highlight); font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
+.thread-card-small { min-width: 300px; max-width: 340px; padding: 18px; }
+.clamp-4 { display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
 
 .label { font-size: 13px; color: var(--color-muted); }
 .input, .select { border-radius: var(--radius-sm); border-color: var(--color-border); background: #fff; }

public/assets/js/app.js

@@ -51,12 +51,17 @@ document.addEventListener('DOMContentLoaded', () => {
 
   // Events from backend (injected on page); fallback to empty
   const events = Array.isArray(window.__events) ? window.__events : [];
+  const threads = Array.isArray(window.__threads) ? window.__threads : [];
 
   const el = {
     sliderTrack: document.getElementById('eventSlider'),
     sliderViewport: document.querySelector('.slider__viewport'),
     sliderPrev: document.querySelector('[data-slider-prev]'),
     sliderNext: document.querySelector('[data-slider-next]'),
+    threadSliderTrack: document.getElementById('threadSlider'),
+    threadSliderViewport: document.getElementById('threadSlider')?.closest('.slider__viewport') || null,
+    threadSliderPrev: document.querySelector('[data-thread-slider-prev]'),
+    threadSliderNext: document.querySelector('[data-thread-slider-next]'),
     modal: document.getElementById('eventModal'),
     modalBody: document.getElementById('eventModalBody'),
     modalTitle: document.getElementById('eventModalTitle'),
@@ -118,14 +123,42 @@ document.addEventListener('DOMContentLoaded', () => {
     });
   };
 
-  const scrollSlider = (dir) => {
-    if (!el.sliderViewport) return;
-    const amount = dir === 'next' ? 320 : -320;
-    el.sliderViewport.scrollBy({ left: amount, behavior: 'smooth' });
+  const renderThreadCard = (item) => {
+    const preview = item.body.length > 170 ? `${item.body.slice(0, 170)}…` : item.body;
+    return `
+    <article class="card thread-card-small">
+      <div class="muted small">${fmtDate(item.createdAt)}</div>
+      <h3>${item.title}</h3>
+      <p class="muted clamp-4">${preview}</p>
+      <div class="event__meta">
+        <span>${item.displayName}</span>
+        <span>Antworten: ${item.answers}</span>
+      </div>
+      <div class="flex gap-8" style="margin-top:8px;">
+        <a class="btn ghost" href="/community_thread?id=${item.id}">Beitrag öffnen</a>
+      </div>
+    </article>`;
   };
 
-  el.sliderPrev?.addEventListener('click', () => scrollSlider('prev'));
-  el.sliderNext?.addEventListener('click', () => scrollSlider('next'));
+  const renderThreadSlider = () => {
+    if (!el.threadSliderTrack) return;
+    if (!threads.length) {
+      el.threadSliderTrack.innerHTML = '<p class="muted">Noch keine Community-Beiträge vorhanden.</p>';
+      return;
+    }
+    el.threadSliderTrack.innerHTML = threads.map(renderThreadCard).join('');
+  };
+
+  const scrollSlider = (viewport, dir) => {
+    if (!viewport) return;
+    const amount = dir === 'next' ? 320 : -320;
+    viewport.scrollBy({ left: amount, behavior: 'smooth' });
+  };
+
+  el.sliderPrev?.addEventListener('click', () => scrollSlider(el.sliderViewport, 'prev'));
+  el.sliderNext?.addEventListener('click', () => scrollSlider(el.sliderViewport, 'next'));
+  el.threadSliderPrev?.addEventListener('click', () => scrollSlider(el.threadSliderViewport, 'prev'));
+  el.threadSliderNext?.addEventListener('click', () => scrollSlider(el.threadSliderViewport, 'next'));
 
   // Quick search with geocoding
   const geocode = async (query) => {
@@ -183,4 +216,5 @@ document.addEventListener('DOMContentLoaded', () => {
   el.modal?.addEventListener('click', (e) => { if (e.target === el.modal) el.modal.classList.remove('open'); });
 
   renderSlider();
+  renderThreadSlider();
 });