From 2b34cadf24fe9c3a6de3e73d18b9ab3d0eabc62d Mon Sep 17 00:00:00 2001
From: Artur Borecki <me@pufereq.pl>
Date: Thu, 23 Apr 2026 19:09:46 +0200
Subject: [PATCH] refactor(admin_chat.html): style chat

---
 home/templates/chat/admin/admin_chat.html | 95 +++++++++++++++++++----
 1 file changed, 79 insertions(+), 16 deletions(-)

diff --git a/home/templates/chat/admin/admin_chat.html b/home/templates/chat/admin/admin_chat.html
index 467e614..26c0edb 100644
--- a/home/templates/chat/admin/admin_chat.html
+++ b/home/templates/chat/admin/admin_chat.html
@@ -5,25 +5,88 @@
     {% trans "Chat with" %} {{ chat_user.email }}
 {% endblock titletag %}
 
+{% block extra_css %}
+<style>
+  .admin-chat-messages {
+    list-style: none;
+    padding: 0;
+    margin: 1.5em 0;
+    max-height: 350px;
+    overflow-y: auto;
+    border-radius: 6px;
+    border: 1px solid #e2e2e2;
+  }
+  .admin-chat-messages li {
+    padding: 0.7em 1em;
+    border-bottom: 1px solid #ececec;
+    display: flex;
+    align-items: baseline;
+    font-size: 1.05em;
+  }
+  .admin-chat-messages li:last-child {
+    border-bottom: none;
+  }
+  .admin-chat-message-meta {
+    color: #888;
+    font-size: 0.92em;
+    margin-right: 0.5em;
+    white-space: nowrap;
+  }
+  .admin-chat-form {
+    display: flex;
+    gap: 0.5em;
+    margin-top: 1em;
+  }
+  .admin-chat-form input[type="text"] {
+    flex: 1;
+    padding: 0.5em;
+    border-radius: 4px;
+    border: 1px solid #ccc;
+    font-size: 1em;
+  }
+  .admin-chat-form button {
+    padding: 0.5em 1.2em;
+    border-radius: 4px;
+    border: none;
+    background: #0073e6;
+    color: #fff;
+    font-weight: bold;
+    cursor: pointer;
+    transition: background 0.2s;
+  }
+  .admin-chat-form button:hover {
+    background: #005bb5;
+  }
+  .admin-message-admin {
+    background: #334;
+  }
+  .admin-message-user {
+  }
+</style>
+{% endblock extra_css %}
+
 {% block content %}
   {% include "wagtailadmin/shared/header.html" with title="Chat" icon="mail" %}
-  <h1>{% trans "Admin Chat View" %}</h1>
-  <p>{% trans "This is the admin view of the chat. Here you can manage conversations and monitor user interactions." %}</p> 
+  <div style="padding: 0 3em;">
+    <h1>{% trans "Admin Chat View" %}</h1>
+    <p>{% trans "Chat with" %} <strong>{{ chat_user.email }}</strong></p>
 
-  <ul>
-    {% for message in chat_messages %}
-      <li>
-        <strong>{{ message.sender.email }}:</strong> {{ message.content }}
-      </li>
-    {% empty %}
-      <li>{% trans "No messages found." %}</li>
-    {% endfor %}
-  </ul>
-  <form action="/chat/send/{{ chat_user.id }}/" method="post">
-    {% csrf_token %}
-    <input type="text" name="content" placeholder="{% trans "Type your message here..." %}" required>
-    <button type="submit">{% trans "Send" %}</button>
-  </form>
+    <ul class="admin-chat-messages">
+      {% for message in chat_messages %}
+        <li class="{% if message.sender.id == chat_user.id %}admin-message-user{% else %}admin-message-admin{% endif %}">
+          <span class="admin-chat-message-meta">{{ message.timestamp|date:"Y-m-d H:i" }}</span>
+          <strong>{{ message.sender.email }}:&nbsp;</strong> {{ message.content }}
+        </li>
+      {% empty %}
+        <li>{% trans "No messages found." %}</li>
+      {% endfor %}
+    </ul>
+    <form action="/chat/send/{{ chat_user.id }}/" method="post" class="admin-chat-form">
+      {% csrf_token %}
+      <input type="text" name="content" placeholder="{% trans "Type your message here..." %}" required>
+      <button type="submit">{% trans "Send" %}</button>
+    </form>
+  </div>
 {% endblock content %}