init

2026-05-14 13:38:41 +02:00
parent 5d1ced594d
commit be7bd79fc7
16 changed files with 1434 additions and 1 deletions
@@ -0,0 +1,63 @@
+<!doctype html>
+<html lang="de">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>{{.Title}} · SEND.NRW Chat</title>
+  <script src="https://unpkg.com/htmx.org@1.9.12"></script>
+  <link rel="stylesheet" href="/static/app.css">
+</head>
+<body>
+  <div class="shell">
+    <header class="topbar">
+      <a class="brand" href="/rooms">SEND.NRW Chat</a>
+      <form method="post" action="/logout">
+        <span class="user-pill">{{.Username}}</span>
+        <button class="ghost" type="submit">Logout</button>
+      </form>
+    </header>
+
+    <main class="chat-page">
+      <aside class="card sidebar">
+        <a class="back" href="/rooms">← Zur Raumliste</a>
+        <p class="eyebrow">Chatraum</p>
+        <h1>{{.Room.Name}}</h1>
+        <p class="muted">{{.Room.Description}}</p>
+        <div class="hint"></div>
+      </aside>
+
+      <section class="chat-card card">
+        <div id="messages" class="messages">
+          {{range .Messages}}
+            {{template "partials/message.html" .}}
+          {{else}}
+            <div class="empty">Noch keine Nachrichten. Schreib die erste.</div>
+          {{end}}
+        </div>
+
+        <form id="message-form" class="message-form" hx-post="/rooms/{{.Room.ID}}/messages" hx-swap="none" hx-on::after-request="if(event.detail.successful) this.reset()">
+          <input name="body" placeholder="Nachricht schreiben …" autocomplete="off" required maxlength="2000">
+          <button type="submit">Senden</button>
+        </form>
+      </section>
+    </main>
+  </div>
+
+<script>
+(function () {
+  const messages = document.getElementById('messages');
+  const source = new EventSource('/rooms/{{.Room.ID}}/events');
+  function scrollDown() { messages.scrollTop = messages.scrollHeight; }
+  source.addEventListener('message', function (event) {
+    const data = JSON.parse(event.data);
+    const empty = messages.querySelector('.empty');
+    if (empty) empty.remove();
+    messages.insertAdjacentHTML('beforeend', data.html);
+    scrollDown();
+  });
+  window.addEventListener('beforeunload', function () { source.close(); });
+  scrollDown();
+})();
+</script>
+</body>
+</html>