From a1a3e55f605b38f3dae103a50d769aa5d13dc156 Mon Sep 17 00:00:00 2001
From: janis steiner <janis@jakach.ch>
Date: Thu, 7 May 2026 18:28:57 +0200
Subject: [PATCH] fix comments

---
 backend/api/index.php         |  8 +++++++-
 frontend/assets/css/style.css | 11 +++++++++++
 frontend/assets/js/app.js     | 23 +++++++++++++++++------
 3 files changed, 35 insertions(+), 7 deletions(-)

diff --git a/backend/api/index.php b/backend/api/index.php
index 44fa1cf..8161c0d 100644
--- a/backend/api/index.php
+++ b/backend/api/index.php
@@ -99,7 +99,13 @@ function handleEvents($method, $id, $db) {
                 $sql .= " ORDER BY e.occurred_at DESC";
                 $stmt = $db->prepare($sql);
                 $stmt->execute($params);
-                echo json_encode($stmt->fetchAll(PDO::FETCH_ASSOC));
+                $events = $stmt->fetchAll(PDO::FETCH_ASSOC);
+                foreach ($events as &$event) {
+                    $cstmt = $db->prepare("SELECT * FROM comments WHERE event_id = ? ORDER BY created_at ASC");
+                    $cstmt->execute([$event['id']]);
+                    $event['comments'] = $cstmt->fetchAll(PDO::FETCH_ASSOC);
+                }
+                echo json_encode($events);
             }
             break;
         case 'POST':
diff --git a/frontend/assets/css/style.css b/frontend/assets/css/style.css
index 854a152..431a559 100644
--- a/frontend/assets/css/style.css
+++ b/frontend/assets/css/style.css
@@ -115,6 +115,17 @@ body {
     margin-top: .15rem;
 }
 
+.comment-box + .comment-box {
+    border-top: 1px solid var(--neptune-border);
+    padding-top: .5rem;
+}
+
+.comment-log {
+    max-height: 200px;
+    overflow-y: auto;
+    margin-bottom: .25rem;
+}
+
 /* Network Map */
 .node-tooltip {
     position: absolute;
diff --git a/frontend/assets/js/app.js b/frontend/assets/js/app.js
index 8dcc3df..d637ed7 100644
--- a/frontend/assets/js/app.js
+++ b/frontend/assets/js/app.js
@@ -121,9 +121,14 @@ function renderTimeline() {
                     <h6 class="event-title mt-1 mb-1">${esc(e.title)}</h6>
                     ${e.description ? `<p class="mb-1 small text-secondary">${esc(e.description)}</p>` : ''}
                     <div class="mt-2" id="comments-${e.id}">
-                        ${renderComments(e)}
+                        <div class="d-flex align-items-center mb-1">
+                            <small class="text-secondary fw-bold"><i class="bi bi-chat-dots me-1"></i>Comments ${e.comments && e.comments.length ? `(${e.comments.length})` : ''}</small>
+                        </div>
+                        <div class="comment-log">
+                            ${renderComments(e)}
+                        </div>
                         <div class="input-group input-group-sm comment-input-group mt-1">
-                            <input type="text" class="form-control form-control-sm comment-input" placeholder="Add comment..." data-event-id="${e.id}">
+                            <input type="text" class="form-control form-control-sm comment-input" placeholder="Write a comment..." data-event-id="${e.id}">
                             <button class="btn btn-outline-secondary btn-sm" onclick="addComment(${e.id}, this)"><i class="bi bi-send"></i></button>
                         </div>
                     </div>
@@ -134,11 +139,17 @@ function renderTimeline() {
 }
 
 function renderComments(event) {
-    if (!event.comments || !event.comments.length) return '';
+    if (!event.comments || !event.comments.length) return '<div class="text-secondary small py-1"><i class="bi bi-chat-left-text me-1"></i>No comments yet</div>';
     return event.comments.map(c => `
-        <div class="comment-box">
-            <div class="comment-author"><i class="bi bi-person-circle me-1"></i>${esc(c.author)} <span class="text-secondary fw-normal">· ${new Date(c.created_at).toLocaleString()}</span></div>
-            <div class="comment-body">${esc(c.body)}</div>
+        <div class="comment-box d-flex">
+            <div class="me-2 text-secondary" style="font-size:.7rem;"><i class="bi bi-person-circle"></i></div>
+            <div class="flex-grow-1">
+                <div class="d-flex justify-content-between">
+                    <span class="comment-author">${esc(c.author)}</span>
+                    <span class="text-secondary" style="font-size:.7rem;">${new Date(c.created_at).toLocaleString()}</span>
+                </div>
+                <div class="comment-body">${esc(c.body)}</div>
+            </div>
         </div>
     `).join('');
 }