message pagination

packetserver/http/templates/message_list.html

@@ -10,6 +10,45 @@
     </button>
 </div>
 
+<div class="d-flex justify-content-between align-items-center mb-4 flex-wrap gap-3">
+  <!-- Type tabs -->
+  <ul class="nav nav-tabs">
+    <li class="nav-item">
+      <a class="nav-link {% if current_type == 'received' %}active{% endif %}"
+         href="?type=received{% if current_search %}&search={{ current_search }}{% endif %}">Received</a>
+    </li>
+    <li class="nav-item">
+      <a class="nav-link {% if current_type == 'sent' %}active{% endif %}"
+         href="?type=sent{% if current_search %}&search={{ current_search }}{% endif %}">Sent</a>
+    </li>
+    <li class="nav-item">
+      <a class="nav-link {% if current_type == 'all' %}active{% endif %}"
+         href="?type=all{% if current_search %}&search={{ current_search }}{% endif %}">All</a>
+    </li>
+  </ul>
+
+  <!-- Search form -->
+  <form method="get" class="d-flex">
+    <input type="hidden" name="type" value="{{ current_type }}">
+    <input type="text" name="search" class="form-control me-2" placeholder="Search messages..."
+           value="{{ current_search or '' }}">
+    <button type="submit" class="btn btn-outline-primary">Search</button>
+    {% if current_search %}
+      <a href="?type={{ current_type }}" class="btn btn-outline-secondary ms-2">Clear</a>
+    {% endif %}
+  </form>
+</div>
+
+{% if total == 0 %}
+  <div class="alert alert-info">
+    {% if current_search %}
+      No messages found matching "{{ current_search }}".
+    {% else %}
+      No messages yet.
+    {% endif %}
+  </div>
+{% endif %}
+
 <div class="mb-3">
     <a href="?msg_type=received" class="btn btn-sm {% if msg_type == 'received' %}btn-primary{% else %}btn-outline-primary{% endif %}">Received</a>
     <a href="?msg_type=sent" class="btn btn-sm {% if msg_type == 'sent' %}btn-primary{% else %}btn-outline-primary{% endif %}">Sent</a>
@@ -17,6 +56,9 @@
 </div>
 
 {% if messages %}
+<p class="text-muted text-center mb-3">
+  Showing {{ (page-1)*per_page + 1 }}–{{ min(page*per_page, total) }} of {{ total }} messages
+</p>
 <ul class="message-list">
     {% for msg in messages %}
     <li>
@@ -30,6 +72,41 @@
     </li>
     {% endfor %}
 </ul>
+
+{% if total_pages > 1 %}
+<nav aria-label="Message pagination" class="mt-4">
+  <ul class="pagination justify-content-center">
+    <!-- Previous -->
+    <li class="page-item {% if page == 1 %}disabled{% endif %}">
+      <a class="page-link" href="?page={{ page - 1 }}&type={{ current_type }}{% if current_search %}&search={{ current_search }}{% endif %}">Previous</a>
+    </li>
+
+    <!-- Page numbers (simple: show current ±2, plus first/last) -->
+    {% set nearby = range(max(1, page-2), min(total_pages+1, page+3)) %}
+    {% if 1 not in nearby %}
+      <li class="page-item"><a class="page-link" href="?page=1&type={{ current_type }}{% if current_search %}&search={{ current_search }}{% endif %}">1</a></li>
+      {% if page > 4 %}<li class="page-item disabled"><span class="page-link">...</span></li>{% endif %}
+    {% endif %}
+
+    {% for p in nearby %}
+      <li class="page-item {% if p == page %}active{% endif %}">
+        <a class="page-link" href="?page={{ p }}&type={{ current_type }}{% if current_search %}&search={{ current_search }}{% endif %}">{{ p }}</a>
+      </li>
+    {% endfor %}
+
+    {% if total_pages not in nearby %}
+      {% if page < total_pages - 3 %}<li class="page-item disabled"><span class="page-link">...</span></li>{% endif %}
+      <li class="page-item"><a class="page-link" href="?page={{ total_pages }}&type={{ current_type }}{% if current_search %}&search={{ current_search }}{% endif %}">{{ total_pages }}</a></li>
+    {% endif %}
+
+    <!-- Next -->
+    <li class="page-item {% if page == total_pages %}disabled{% endif %}">
+      <a class="page-link" href="?page={{ page + 1 }}&type={{ current_type }}{% if current_search %}&search={{ current_search }}{% endif %}">Next</a>
+    </li>
+  </ul>
+</nav>
+{% endif %}
+
 {% else %}
 <p>No messages found.</p>
 {% endif %}