Files
mc-webui/app/templates/contacts-pending.html
T
MarekWo cdc8be9eb4 refactor(contacts): Implement multi-page Contact Management with advanced sorting
Split Contact Management into 3 dedicated pages for improved mobile usability:
- /contacts/manage - Settings & navigation hub (manual approval + cleanup)
- /contacts/pending - Full-screen pending contacts view
- /contacts/existing - Full-screen existing contacts with search/filter/sort

New Features:
- Advanced sorting: Name (A-Z/Z-A) & Last advert (newest/oldest)
- URL-based sort state (?sort=name&order=asc)
- Activity indicators: 🟢 active, 🟡 recent, 🔴 inactive
- Changed terminology: "Last seen" → "Last advert" (more accurate)
- Cleanup tool moved from Settings modal to Contact Management page

Technical Changes:
- Created contacts_base.html standalone template
- Split contacts.html into 3 specialized templates
- Refactored contacts.js for multi-page support with page detection
- Added 2 new Flask routes: /contacts/pending, /contacts/existing
- Removed cleanup section from base.html Settings modal

Mobile-first design: Each page has full-screen space with touch-friendly
navigation and back buttons.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2025-12-30 08:40:22 +01:00

64 lines
2.3 KiB
HTML

{% extends "contacts_base.html" %}
{% block title %}Pending Contacts - mc-webui{% endblock %}
{% block navbar_content %}
<span class="navbar-brand mb-0 h1">
<i class="bi bi-hourglass-split"></i> Pending Contacts
<span class="badge bg-light text-dark rounded-pill" id="pendingCountBadge" style="display: none;">0</span>
</span>
<div class="d-flex align-items-center gap-2">
<button class="btn btn-outline-light btn-sm" id="refreshPendingBtn" title="Refresh">
<i class="bi bi-arrow-clockwise"></i>
</button>
</div>
{% endblock %}
{% block page_content %}
<div id="pendingPageContent">
<!-- Back Buttons -->
<div class="back-buttons">
<button class="btn btn-outline-secondary" onclick="window.location.href='/contacts/manage';">
<i class="bi bi-arrow-left"></i> Contact Management
</button>
<button class="btn btn-outline-secondary" onclick="window.location.href='/';">
<i class="bi bi-house"></i> Home
</button>
</div>
<!-- Page Description -->
<div class="mb-3">
<p class="text-muted small mb-0">
<i class="bi bi-info-circle"></i>
Approve or reject contacts waiting for manual approval.
</p>
</div>
<!-- Loading State -->
<div id="pendingLoading" class="text-center py-5" style="display: none;">
<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<p class="mt-3 text-muted">Loading pending contacts...</p>
</div>
<!-- Empty State -->
<div id="pendingEmpty" class="empty-state" style="display: none;">
<i class="bi bi-check-circle"></i>
<p class="mb-0">No pending requests</p>
<small class="text-muted">New contact requests will appear here when manual approval is enabled</small>
</div>
<!-- Pending Contacts List (Full-screen) -->
<div id="pendingList" class="contacts-list-fullscreen">
<!-- Dynamically populated by contacts.js -->
</div>
<!-- Error State -->
<div id="pendingError" class="alert alert-danger" style="display: none;" role="alert">
<i class="bi bi-exclamation-triangle"></i>
<span id="pendingErrorMessage">Failed to load pending contacts</span>
</div>
</div>
{% endblock %}