adfs

partials/landing/community/index.php

@@ -9,6 +9,7 @@ $search = trim((string)($_GET['q'] ?? ''));
 
 $communityCfg = require __DIR__ . '/../../../config/community.php';
 $community = $pdo ? new \App\Community($pdo, $communityCfg) : null;
+$stats = $community ? $community->getStats() : ['threads' => 0, 'posts' => 0, 'members' => 0];
 
 if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action']) && $_POST['action'] === 'thread_create') {
     if (!$userId) {
@@ -29,50 +30,100 @@ $threads = $community ? ($search !== '' ? $community->searchThreads($search, 50)
 ?>
 <main class="section">
   <div class="container">
-    <p class="eyebrow">Community</p>
-    <h1>Forum</h1>
+    <div class="forum-hero">
+      <div>
+        <div class="forum-breadcrumbs">
+          <a href="/">Home</a>
+          <span>/</span>
+          <span>Community</span>
+        </div>
+        <h1>Community</h1>
+        <p class="forum-hero__copy">Fragen stellen, Erfahrungen teilen, Antworten finden und gemeinsam weiterdenken.</p>
+      </div>
+      <div class="forum-hero__actions">
+        <?php if ($userId): ?>
+          <button class="btn" type="button" data-modal-open="modalThread">Neues Thema</button>
+        <?php else: ?>
+          <a class="btn" href="/login">Einloggen und schreiben</a>
+        <?php endif; ?>
+      </div>
+    </div>
+
     <?php if ($error): ?>
       <div class="toast-bar" style="border-color:#f87171; color:#991b1b;"><?= htmlspecialchars($error, ENT_QUOTES) ?></div>
     <?php endif; ?>
 
-    <div class="flex between center-y" style="margin:14px 0; gap:12px; flex-wrap:wrap;">
-      <form method="get" class="flex gap-8" style="flex-wrap:wrap; align-items:flex-end;">
-        <div class="stack gap-4">
-          <label class="label" for="searchQ">Suche nach Stichwort</label>
-          <input id="searchQ" name="q" class="input" value="<?= htmlspecialchars($search, ENT_QUOTES) ?>" placeholder="Schlagwort eingeben">
-        </div>
-        <button class="btn" type="submit">Suchen</button>
-      </form>
-      <?php if ($userId): ?>
-        <button class="btn" type="button" data-modal-open="modalThread">Neue Frage</button>
-      <?php else: ?>
-        <a class="btn ghost" href="/login">Login für neue Frage</a>
-      <?php endif; ?>
+    <div class="forum-stats">
+      <div class="forum-stat">
+        <span class="forum-stat__label">Themen</span>
+        <strong><?= number_format($stats['threads']) ?></strong>
+      </div>
+      <div class="forum-stat">
+        <span class="forum-stat__label">Beiträge</span>
+        <strong><?= number_format($stats['posts']) ?></strong>
+      </div>
+      <div class="forum-stat">
+        <span class="forum-stat__label">Mitglieder</span>
+        <strong><?= number_format($stats['members']) ?></strong>
+      </div>
     </div>
 
-    <div class="stack gap-8" style="margin-top:10px;">
-      <?php foreach ($threads as $t): ?>
-        <?php
-          $pts = ($community && $pdo) ? $community->computePoints((int)$t['uid']) : 0.0;
-          $lvl = $community ? $community->membershipLevel($pts) : ['label'=>'','icon'=>''];
-        ?>
-        <article class="card" style="padding:14px;">
-          <div class="event__body">
-            <div class="event__meta" style="flex-wrap:wrap; gap:8px;">
-              <span><?= htmlspecialchars($t['created_at'], ENT_QUOTES) ?></span>
-              <span><?= htmlspecialchars($t['display_name'] ?: 'Mitglied', ENT_QUOTES) ?></span>
-              <span><?= htmlspecialchars($lvl['icon'] ?? '', ENT_QUOTES) ?> <?= htmlspecialchars($lvl['label'] ?? '', ENT_QUOTES) ?> (<?= number_format($pts,1) ?> Punkte)</span>
-              <span>Beiträge: <?= (int)$t['user_posts'] + (int)$t['answers'] ?></span>
-              <span>Antworten: <?= (int)$t['answers'] ?></span>
-            </div>
-            <h3 style="margin:6px 0;"><a href="/community_thread?id=<?= (int)$t['id'] ?>"><?= htmlspecialchars($t['title'], ENT_QUOTES) ?></a></h3>
-            <p class="muted small"><?= nl2br(htmlspecialchars(substr($t['body'], 0, 200), ENT_QUOTES)) ?><?= strlen($t['body']) > 200 ? '…' : '' ?></p>
+    <div class="forum-board">
+      <div class="forum-board__head">
+        <div>
+          <h2>Forum</h2>
+          <p class="muted">Hier findest du die neuesten Themen, Antworten und laufenden Gespräche.</p>
+        </div>
+        <form method="get" class="forum-search">
+          <label class="label" for="searchQ">Suche</label>
+          <div class="forum-search__row">
+            <input id="searchQ" name="q" class="input" value="<?= htmlspecialchars($search, ENT_QUOTES) ?>" placeholder="Schlagwort eingeben">
+            <button class="btn" type="submit">Suchen</button>
           </div>
-        </article>
-      <?php endforeach; ?>
-      <?php if (!$threads): ?>
-        <p class="muted">Keine Treffer.</p>
-      <?php endif; ?>
+        </form>
+      </div>
+
+      <div class="forum-list">
+        <div class="forum-list__header">
+          <span>Thema</span>
+          <span>Antworten</span>
+          <span>Letzte Aktivität</span>
+        </div>
+
+        <?php foreach ($threads as $t): ?>
+          <?php
+            $pts = ($community && $pdo) ? $community->computePoints((int)$t['uid']) : 0.0;
+            $lvl = $community ? $community->membershipLevel($pts) : ['label'=>'','icon'=>''];
+            $preview = mb_substr((string)$t['body'], 0, 220);
+          ?>
+          <article class="forum-row">
+            <div class="forum-row__topic">
+              <div class="forum-row__icon" aria-hidden="true">💬</div>
+              <div>
+                <h3><a href="/community_thread?id=<?= (int)$t['id'] ?>"><?= htmlspecialchars($t['title'], ENT_QUOTES) ?></a></h3>
+                <div class="forum-row__meta">
+                  <span><?= htmlspecialchars($t['display_name'] ?: 'Mitglied', ENT_QUOTES) ?></span>
+                  <span><?= htmlspecialchars($lvl['icon'] ?? '', ENT_QUOTES) ?> <?= htmlspecialchars($lvl['label'] ?? '', ENT_QUOTES) ?></span>
+                  <span><?= number_format($pts, 1) ?> Punkte</span>
+                </div>
+                <p><?= nl2br(htmlspecialchars($preview, ENT_QUOTES)) ?><?= mb_strlen((string)$t['body']) > 220 ? '…' : '' ?></p>
+              </div>
+            </div>
+            <div class="forum-row__count">
+              <strong><?= (int)$t['answers'] ?></strong>
+              <span>Antworten</span>
+            </div>
+            <div class="forum-row__activity">
+              <strong><?= htmlspecialchars($t['last_activity_by'] ?: 'Mitglied', ENT_QUOTES) ?></strong>
+              <span><?= htmlspecialchars($t['last_activity_at'], ENT_QUOTES) ?></span>
+            </div>
+          </article>
+        <?php endforeach; ?>
+
+        <?php if (!$threads): ?>
+          <div class="forum-empty">Keine Themen gefunden.</div>
+        <?php endif; ?>
+      </div>
     </div>
   </div>
 </main>

partials/landing/community/thread.php

@@ -32,33 +32,77 @@ if (!$thread) {
     echo "<p>Thread nicht gefunden.</p>";
     return;
 }
+
+$threadAuthor = (string)($thread['display_name'] ?: 'Mitglied');
+$threadPoints = ($community && $pdo) ? $community->computePoints((int)$thread['user_id']) : 0.0;
+$threadLevel = $community ? $community->membershipLevel($threadPoints) : ['label' => '', 'icon' => ''];
 ?>
 <main class="section">
   <div class="container">
-    <p class="eyebrow">Community</p>
-    <h1><?= htmlspecialchars($thread['title'], ENT_QUOTES) ?></h1>
-    <p class="muted">Von <?= htmlspecialchars($thread['display_name'] ?: 'Mitglied', ENT_QUOTES) ?> · <?= htmlspecialchars($thread['created_at'], ENT_QUOTES) ?></p>
-    <article class="card" style="margin-top:12px;">
-      <div class="event__body">
-        <p><?= nl2br(htmlspecialchars($thread['body'], ENT_QUOTES)) ?></p>
+    <div class="forum-breadcrumbs">
+      <a href="/">Home</a>
+      <span>/</span>
+      <a href="/community">Community</a>
+      <span>/</span>
+      <span><?= htmlspecialchars($thread['title'], ENT_QUOTES) ?></span>
+    </div>
+
+    <div class="forum-thread-head">
+      <div>
+        <h1><?= htmlspecialchars($thread['title'], ENT_QUOTES) ?></h1>
+        <p class="forum-thread-head__meta">Erstellt von <?= htmlspecialchars($threadAuthor, ENT_QUOTES) ?> am <?= htmlspecialchars($thread['created_at'], ENT_QUOTES) ?></p>
+      </div>
+      <div class="forum-thread-head__meta-box">
+        <strong><?= count($posts) ?></strong>
+        <span>Antworten</span>
+      </div>
+    </div>
+
+    <article class="forum-post forum-post--lead">
+      <aside class="forum-post__author">
+        <div class="forum-post__avatar" aria-hidden="true"><?= strtoupper(mb_substr($threadAuthor, 0, 1)) ?></div>
+        <strong><?= htmlspecialchars($threadAuthor, ENT_QUOTES) ?></strong>
+        <span><?= htmlspecialchars($threadLevel['icon'] ?? '', ENT_QUOTES) ?> <?= htmlspecialchars($threadLevel['label'] ?? '', ENT_QUOTES) ?></span>
+        <span><?= number_format($threadPoints, 1) ?> Punkte</span>
+      </aside>
+      <div class="forum-post__body">
+        <div class="forum-post__head">
+          <span><?= htmlspecialchars($thread['created_at'], ENT_QUOTES) ?></span>
+          <span>#1</span>
+        </div>
+        <div class="forum-post__content">
+          <?= nl2br(htmlspecialchars($thread['body'], ENT_QUOTES)) ?>
+        </div>
       </div>
     </article>
 
-    <h3 style="margin-top:16px;">Antworten (<?= count($posts) ?>)</h3>
-    <div class="stack gap-12" style="margin-top:10px;">
+    <div class="forum-replies-head">
+      <h2>Antworten</h2>
+      <span><?= count($posts) ?> Beitrag/Beiträge</span>
+    </div>
+
+    <div class="forum-replies">
       <?php foreach ($posts as $p): ?>
-        <article class="card">
-          <div class="event__body">
-            <div class="event__meta">
+        <?php
+          $postAuthor = (string)($p['display_name'] ?: 'Mitglied');
+        ?>
+        <article class="forum-post">
+          <aside class="forum-post__author">
+            <div class="forum-post__avatar" aria-hidden="true"><?= strtoupper(mb_substr($postAuthor, 0, 1)) ?></div>
+            <strong><?= htmlspecialchars($postAuthor, ENT_QUOTES) ?></strong>
+          </aside>
+          <div class="forum-post__body">
+            <div class="forum-post__head">
               <span><?= htmlspecialchars($p['created_at'], ENT_QUOTES) ?></span>
-              <span><?= htmlspecialchars($p['display_name'] ?: 'Mitglied', ENT_QUOTES) ?></span>
             </div>
-            <p><?= nl2br(htmlspecialchars($p['body'], ENT_QUOTES)) ?></p>
+            <div class="forum-post__content">
+              <?= nl2br(htmlspecialchars($p['body'], ENT_QUOTES)) ?>
+            </div>
           </div>
         </article>
       <?php endforeach; ?>
       <?php if (!$posts): ?>
-        <p class="muted">Noch keine Antworten.</p>
+        <div class="forum-empty">Noch keine Antworten.</div>
       <?php endif; ?>
     </div>
 
@@ -67,7 +111,7 @@ if (!$thread) {
     <?php endif; ?>
 
     <?php if ($userId): ?>
-      <form method="post" class="stack gap-12 card" style="margin-top:14px; padding:16px;">
+      <form method="post" class="forum-reply-form">
         <input type="hidden" name="action" value="reply">
         <div class="stack gap-6">
           <label class="label" for="replyBody">Antwort</label>
@@ -76,7 +120,7 @@ if (!$thread) {
         <button class="btn" type="submit">Antwort senden</button>
       </form>
     <?php else: ?>
-      <p class="muted" style="margin-top:12px;">Bitte <a href="/login">einloggen</a>, um zu antworten.</p>
+      <div class="forum-login-note">Bitte <a href="/login">einloggen</a>, um zu antworten.</div>
     <?php endif; ?>
   </div>
 </main>