Refactor templates for improved UI and UX

- Updated ads.html to enhance the display of recent ads with better styling and layout.
- Modified base.html to introduce a new color scheme and typography using Inter font and Phosphor icons.
- Revamped dashboard.html to provide a clearer overview of statistics with improved card layouts.
- Enhanced keyword_detail.html for better presentation of keyword configurations and recent matches.
- Improved keywords.html to display keyword filters and subscriber counts more effectively.
- Updated users.html to present user information in a more structured format with clear status indicators.

worker/src/templates/users.html

@@ -1,66 +1,75 @@
 {% extends "base.html" %}
 {% block title %}Users — Willhaben Tracker{% endblock %}
-{% block content %}
-<div class="page-header">
-    <h2>Users</h2>
-</div>
+{% block title_in_topbar %}Registered Users{% endblock %}
 
+{% block content %}
 {% if not error and users %}
-<div class="card" style="overflow-x: auto;">
+<div class="table-container">
     <table>
         <thead>
             <tr>
-                <th>Telegram ID</th>
-                <th>Username</th>
-                <th>First Name</th>
-                <th>Admin</th>
+                <th>User</th>
                 <th>Status</th>
-                <th>Mute Hours</th>
-                <th>Digest Mode</th>
-                <th>Digest Interval</th>
+                <th>Role</th>
+                <th>Mute Schedule</th>
+                <th>Delivery Mode</th>
             </tr>
         </thead>
         <tbody>
             {% for user in users %}
             <tr>
-                <td>{{ user.telegram_id }}</td>
-                <td>@{{ user.username }}{% if not user.username %}—{% endif %}</td>
-                <td>{{ user.first_name or '—' }}</td>
                 <td>
-                    {% if user.is_admin %}
-                    <span class="badge badge-yellow">Admin</span>
-                    {% else %}
-                    <span class="badge" style="background: #555; color: #fff;">User</span>
-                    {% endif %}
+                    <div style="font-weight: 600;">{{ user.first_name or 'Unknown User' }}</div>
+                    <div style="font-size: 13px; color: var(--text-muted); margin-top: 4px;">
+                        {% if user.username %}@{{ user.username }} • {% endif %}{{ user.telegram_id }}
+                    </div>
                 </td>
                 <td>
                     {% if user.is_active %}
-                    <span class="badge badge-green">Active</span>
+                    <span class="badge badge-green"><i class="ph-fill ph-check-circle" style="margin-right: 4px;"></i> Active</span>
                     {% else %}
-                    <span class="badge badge-red">Inactive</span>
+                    <span class="badge badge-red"><i class="ph-fill ph-x-circle" style="margin-right: 4px;"></i> Banned</span>
+                    {% endif %}
+                </td>
+                <td>
+                    {% if user.is_admin %}
+                    <span class="badge badge-yellow"><i class="ph-fill ph-shield-star" style="margin-right: 4px;"></i> Admin</span>
+                    {% else %}
+                    <span class="badge badge-neutral"><i class="ph-fill ph-user" style="margin-right: 4px;"></i> User</span>
                     {% endif %}
                 </td>
                 <td>
                     {% if user.mute_start and user.mute_end %}
-                    {{ user.mute_start.strftime('%H:%M') }} — {{ user.mute_end.strftime('%H:%M') }}
+                    <div style="display: flex; align-items: center; gap: 6px;">
+                        <i class="ph ph-moon" style="color: var(--text-muted);"></i>
+                        <span>{{ user.mute_start.strftime('%H:%M') }} — {{ user.mute_end.strftime('%H:%M') }}</span>
+                    </div>
                     {% else %}
-                    —
+                    <span style="color: var(--text-muted);">None</span>
                     {% endif %}
                 </td>
                 <td>
                     {% if user.digest_mode %}
-                    <span class="badge badge-green">On</span>
+                    <div style="display: flex; align-items: center; gap: 6px;">
+                        <i class="ph-fill ph-envelope-simple" style="color: var(--success-text);"></i>
+                        <span>Digest every {{ user.digest_interval }}m</span>
+                    </div>
                     {% else %}
-                    <span class="badge" style="background: #555; color: #fff;">Off</span>
+                    <div style="display: flex; align-items: center; gap: 6px;">
+                        <i class="ph-fill ph-lightning" style="color: var(--brand-primary);"></i>
+                        <span>Immediate</span>
+                    </div>
                     {% endif %}
                 </td>
-                <td>{{ user.digest_interval }}m</td>
             </tr>
             {% endfor %}
         </tbody>
     </table>
 </div>
 {% elif not error %}
-<div class="card"><em>No users found.</em></div>
+<div class="empty-state">
+    <i class="ph ph-users"></i>
+    <p>No users found in the database.</p>
+</div>
 {% endif %}
-{% endblock %}
+{% endblock %}