refactor(user_chat.html): style chat

home/templates/chat/user_chat.html

@@ -6,21 +6,36 @@
 {% endblock title %}
 
 {% block content %}
-  <h1>{% trans "Chat with Support" %}</h1>
-  <p>{% trans "This is the user chat interface. Here you can communicate with our support team for assistance." %}</p>
+  <h1 class="text-2xl font-bold mb-4 text-gray-800">{% trans "Chat with Support" %}</h1>
+  <p class="mb-6 text-gray-600">{% trans "Welcome! We're here to help. Type your message below to start a conversation with our support team." %}</p>
 
-  <ul>
-    {% for message in chat_messages %}
-      <li>
-        <strong>{{ message.sender.email }}:</strong> {{ message.content }}
+  <ul class="flex flex-col gap-2 mb-6">
+    {% regroup chat_messages by timestamp.date as dated_messages %}
+    {% for day in dated_messages %}
+      <li class="flex justify-center my-2">
+        <span class="px-4 py-1 bg-gray-100 text-gray-500 text-xs rounded-full shadow">{{ day.grouper|date:'l, d M Y' }}</span>
       </li>
+      {% for message in day.list %}
+        <li class="flex flex-col items-start {% if message.sender.id == user.id %}items-end{% endif %}">
+          <div class="max-w-xs px-4 py-2 rounded-2xl shadow text-sm
+            {% if message.sender.id == user.id %}
+              bg-blue-600 text-white rounded-br-none self-end
+            {% else %}
+              bg-gray-200 text-gray-900 rounded-bl-none self-start
+            {% endif %}">
+            <span class="block font-semibold text-xs mb-1 {% if message.sender.id == user.id %}text-blue-100{% else %}text-blue-700{% endif %}">{{ message.sender.email }}</span>
+            <span>{{ message.content }}</span>
+            <span class="block text-xs {% if message.sender.id == user.id %}text-blue-100{% else %}text-blue-700{% endif %} mt-1 text-right">{{ message.timestamp|date:'H:i' }}</span>
+          </div>
+        </li>
+      {% endfor %}
     {% empty %}
-      <li>{% trans "No messages found." %}</li>
+      <li class="text-gray-400">{% trans "No messages found." %}</li>
     {% endfor %}
   </ul>
-  <form action="/chat/send/{{ user.id }}/" method="post">
+  <form action="/chat/send/{{ user.id }}/" method="post" class="flex gap-4">
     {% csrf_token %}
-    <textarea name="content" placeholder="{% trans "Type your message here..." %}"></textarea>
-    <button type="submit">{% trans "Send" %}</button>
+    <textarea rows=1 name="content" placeholder="{% trans "Type your message here..." %}" class="grow resize-y min-h-10 border border-gray-300 rounded-md p-2 focus:outline-none focus:ring-2 focus:ring-blue-400 text-gray-800"></textarea>
+    <button type="submit" class="self-center px-5 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition">{% trans "Send" %}</button>
   </form>
 {% endblock content %}