mirror of
https://github.com/MarekWo/mc-webui.git
synced 2026-08-07 01:03:15 +02:00
MarekWo
cdc8be9eb4
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>
85 lines
3.1 KiB
HTML
85 lines
3.1 KiB
HTML
{% extends "contacts_base.html" %}
|
|
|
|
{% block title %}Existing Contacts - mc-webui{% endblock %}
|
|
|
|
{% block navbar_content %}
|
|
<span class="navbar-brand mb-0 h1">
|
|
<i class="bi bi-person-lines-fill"></i> Existing Contacts
|
|
<span class="badge counter-badge counter-ok rounded-pill" id="contactsCounter" style="display: none;">0 / 350</span>
|
|
</span>
|
|
<div class="d-flex align-items-center gap-2">
|
|
<button class="btn btn-outline-light btn-sm" id="refreshExistingBtn" title="Refresh">
|
|
<i class="bi bi-arrow-clockwise"></i>
|
|
</button>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block page_content %}
|
|
<div id="existingPageContent">
|
|
<!-- 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>
|
|
|
|
<!-- Search Toolbar -->
|
|
<div class="search-toolbar">
|
|
<input type="text" class="form-control" id="searchInput" placeholder="Search by name or public key...">
|
|
</div>
|
|
|
|
<!-- Filter and Sort Toolbar -->
|
|
<div class="filter-sort-toolbar">
|
|
<!-- Type Filter -->
|
|
<select class="form-select" id="typeFilter" style="max-width: 150px;">
|
|
<option value="ALL">All Types</option>
|
|
<option value="CLI">CLI</option>
|
|
<option value="REP">REP</option>
|
|
<option value="ROOM">ROOM</option>
|
|
<option value="SENS">SENS</option>
|
|
</select>
|
|
|
|
<!-- Sort Buttons -->
|
|
<div class="sort-buttons">
|
|
<button class="sort-btn" data-sort="name" id="sortByName" title="Sort by contact name">
|
|
<span>Name</span>
|
|
<i class="bi bi-sort-down"></i>
|
|
</button>
|
|
<button class="sort-btn active" data-sort="last_advert" id="sortByLastAdvert" title="Sort by last advertisement time">
|
|
<span>Last advert</span>
|
|
<i class="bi bi-sort-down"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Loading State -->
|
|
<div id="existingLoading" 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 contacts...</p>
|
|
</div>
|
|
|
|
<!-- Empty State -->
|
|
<div id="existingEmpty" class="empty-state" style="display: none;">
|
|
<i class="bi bi-inbox"></i>
|
|
<p class="mb-0">No contacts found</p>
|
|
<small class="text-muted">Contacts will appear here once added</small>
|
|
</div>
|
|
|
|
<!-- Existing Contacts List (Full-screen) -->
|
|
<div id="existingList" class="contacts-list-fullscreen">
|
|
<!-- Dynamically populated by contacts.js -->
|
|
</div>
|
|
|
|
<!-- Error State -->
|
|
<div id="existingError" class="alert alert-danger" style="display: none;" role="alert">
|
|
<i class="bi bi-exclamation-triangle"></i>
|
|
<span id="existingErrorMessage">Failed to load contacts</span>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|