From cdc8be9eb4fe5a2b8210a72d7fca239b5b8e7fba Mon Sep 17 00:00:00 2001
From: MarekWo <mwojtaszek@gmail.com>
Date: Tue, 30 Dec 2025 08:40:22 +0100
Subject: [PATCH] refactor(contacts): Implement multi-page Contact Management
 with advanced sorting
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 README.md                            |  14 +-
 app/routes/views.py                  |  28 +-
 app/static/js/contacts.js            | 372 ++++++++++++++++++++----
 app/templates/base.html              |  13 -
 app/templates/contacts-existing.html |  84 ++++++
 app/templates/contacts-manage.html   |  85 ++++++
 app/templates/contacts-pending.html  |  63 ++++
 app/templates/contacts_base.html     | 420 +++++++++++++++++++++++++++
 8 files changed, 1011 insertions(+), 68 deletions(-)
 create mode 100644 app/templates/contacts-existing.html
 create mode 100644 app/templates/contacts-manage.html
 create mode 100644 app/templates/contacts-pending.html
 create mode 100644 app/templates/contacts_base.html

diff --git a/README.md b/README.md
index a87ac91..e02fc10 100644
--- a/README.md
+++ b/README.md
@@ -22,7 +22,11 @@ A lightweight web interface for meshcore-cli, providing browser-based access to
 - 🔓 **Public channels** - Join public channels (starting with #) without encryption keys
 - 🎯 **Reply to users** - Quick reply with `@[UserName]` format
 - 👥 **Contact management** - Manual contact approval mode with pending contacts list (persistent settings)
-- 🧹 **Clean contacts** - Remove inactive contacts with configurable threshold
+  - **Dedicated pages:** Separate full-screen views for pending and existing contacts
+  - **Advanced sorting:** Sort contacts by name (A-Z/Z-A) or last advertisement time (newest/oldest)
+  - **Smart filtering:** Search by name/key, filter by contact type (CLI, REP, ROOM, SENS)
+  - **Activity indicators:** Visual status icons (🟢 active, 🟡 recent, 🔴 inactive) based on last advertisement
+  - **Cleanup tool:** Remove inactive contacts with configurable threshold (moved from Settings)
 - 📦 **Message archiving** - Automatic daily archiving with browse-by-date selector
 - ⚡ **Efficient polling** - Lightweight update checks every 10s, UI refreshes only when needed
 - 📡 **Network commands** - Send advertisement (advert) or flood advertisement (floodadv) for network management
@@ -164,11 +168,16 @@ mc-webui/
 │   │   │   └── style.css           # Custom styles
 │   │   └── js/
 │   │       ├── app.js              # Main page frontend logic
-│   │       └── dm.js               # Direct Messages page logic
+│   │       ├── dm.js               # Direct Messages page logic
+│   │       └── contacts.js         # Contact Management multi-page logic
 │   └── templates/
 │       ├── base.html               # Base template
 │       ├── index.html              # Main chat view
 │       ├── dm.html                 # Direct Messages full-page view
+│       ├── contacts_base.html      # Contact pages base template
+│       ├── contacts-manage.html    # Contact Management settings & navigation
+│       ├── contacts-pending.html   # Pending contacts full-screen view
+│       ├── contacts-existing.html  # Existing contacts with sort/filter
 │       └── components/             # Reusable components
 ├── requirements.txt                # Python dependencies
 ├── .env.example                   # Example environment config
@@ -193,6 +202,7 @@ mc-webui/
 - [x] Message Archiving (Daily archiving with browse-by-date selector)
 - [x] Smart Notifications (Unread counters per channel and total)
 - [x] Direct Messages (DM) - Private messaging with delivery status tracking
+- [x] Advanced Contact Management - Multi-page interface with sorting, filtering, and activity tracking
 
 ### Next Steps
 
diff --git a/app/routes/views.py b/app/routes/views.py
index e72373e..1abebec 100644
--- a/app/routes/views.py
+++ b/app/routes/views.py
@@ -44,10 +44,34 @@ def direct_messages():
 @views_bp.route('/contacts/manage')
 def contact_management():
     """
-    Contact Management view - manual approval settings and pending contacts list.
+    Contact Management Settings - manual approval + cleanup + navigation.
     """
     return render_template(
-        'contacts.html',
+        'contacts-manage.html',
+        device_name=config.MC_DEVICE_NAME,
+        refresh_interval=config.MC_REFRESH_INTERVAL
+    )
+
+
+@views_bp.route('/contacts/pending')
+def contact_pending_list():
+    """
+    Full-screen pending contacts list.
+    """
+    return render_template(
+        'contacts-pending.html',
+        device_name=config.MC_DEVICE_NAME,
+        refresh_interval=config.MC_REFRESH_INTERVAL
+    )
+
+
+@views_bp.route('/contacts/existing')
+def contact_existing_list():
+    """
+    Full-screen existing contacts list with search, filter, sort.
+    """
+    return render_template(
+        'contacts-existing.html',
         device_name=config.MC_DEVICE_NAME,
         refresh_interval=config.MC_REFRESH_INTERVAL
     )
diff --git a/app/static/js/contacts.js b/app/static/js/contacts.js
index d0fbf51..1577a77 100644
--- a/app/static/js/contacts.js
+++ b/app/static/js/contacts.js
@@ -1,10 +1,11 @@
 /**
- * Contact Management UI
+ * Contact Management UI - Multi-Page Version
  *
  * Features:
  * - Manual contact approval toggle (persistent across restarts)
  * - Pending contacts list with approve/copy actions
- * - Existing contacts list with search, filter, and delete
+ * - Existing contacts list with search, filter, and sort
+ * - Three dedicated pages: manage, pending, existing
  * - Auto-refresh on page load
  * - Mobile-first design
  */
@@ -13,12 +14,17 @@
 // State Management
 // =============================================================================
 
+let currentPage = null; // 'manage', 'pending', 'existing'
 let manualApprovalEnabled = false;
 let pendingContacts = [];
 let existingContacts = [];
 let filteredContacts = [];
 let contactToDelete = null;
 
+// Sort state (for existing page)
+let sortBy = 'last_advert'; // 'name' or 'last_advert'
+let sortOrder = 'desc'; // 'asc' or 'desc'
+
 // =============================================================================
 // Initialization
 // =============================================================================
@@ -32,34 +38,209 @@ document.addEventListener('DOMContentLoaded', () => {
         return new bootstrap.Tooltip(tooltipTriggerEl);
     });
 
-    // Attach event listeners
-    attachEventListeners();
+    // Detect current page
+    detectCurrentPage();
 
-    // Load initial state
-    loadSettings();
-    loadPendingContacts();
-    loadExistingContacts();
+    // Initialize page-specific functionality
+    initializePage();
 });
 
-function attachEventListeners() {
+function detectCurrentPage() {
+    if (document.getElementById('managePageContent')) {
+        currentPage = 'manage';
+    } else if (document.getElementById('pendingPageContent')) {
+        currentPage = 'pending';
+    } else if (document.getElementById('existingPageContent')) {
+        currentPage = 'existing';
+    }
+    console.log('Current page:', currentPage);
+}
+
+function initializePage() {
+    switch (currentPage) {
+        case 'manage':
+            initManagePage();
+            break;
+        case 'pending':
+            initPendingPage();
+            break;
+        case 'existing':
+            initExistingPage();
+            break;
+        default:
+            console.warn('Unknown page type');
+    }
+}
+
+// =============================================================================
+// Management Page Initialization
+// =============================================================================
+
+function initManagePage() {
+    console.log('Initializing Management page...');
+
+    // Load settings for manual approval toggle
+    loadSettings();
+
+    // Load contact counts for badges
+    loadContactCounts();
+
+    // Attach event listeners for manage page
+    attachManageEventListeners();
+}
+
+function attachManageEventListeners() {
     // Manual approval toggle
     const approvalSwitch = document.getElementById('manualApprovalSwitch');
     if (approvalSwitch) {
         approvalSwitch.addEventListener('change', handleApprovalToggle);
     }
 
-    // Pending contacts refresh button
-    const refreshPendingBtn = document.getElementById('refreshPendingBtn');
-    if (refreshPendingBtn) {
-        refreshPendingBtn.addEventListener('click', () => {
+    // Cleanup button
+    const cleanupBtn = document.getElementById('cleanupBtn');
+    if (cleanupBtn) {
+        cleanupBtn.addEventListener('click', handleCleanupInactive);
+    }
+}
+
+async function loadContactCounts() {
+    try {
+        // Fetch pending count
+        const pendingResp = await fetch('/api/contacts/pending');
+        const pendingData = await pendingResp.json();
+
+        const pendingBadge = document.getElementById('pendingBadge');
+        if (pendingBadge && pendingData.success) {
+            const count = pendingData.pending?.length || 0;
+            pendingBadge.textContent = count;
+            pendingBadge.classList.remove('spinner-border', 'spinner-border-sm');
+        }
+
+        // Fetch existing count
+        const existingResp = await fetch('/api/contacts/detailed');
+        const existingData = await existingResp.json();
+
+        const existingBadge = document.getElementById('existingBadge');
+        if (existingBadge && existingData.success) {
+            const count = existingData.count || 0;
+            const limit = existingData.limit || 350;
+            existingBadge.textContent = `${count} / ${limit}`;
+            existingBadge.classList.remove('spinner-border', 'spinner-border-sm');
+
+            // Apply counter color coding
+            existingBadge.classList.remove('counter-ok', 'counter-warning', 'counter-alarm');
+            if (count >= 340) {
+                existingBadge.classList.add('counter-alarm');
+            } else if (count >= 300) {
+                existingBadge.classList.add('counter-warning');
+            } else {
+                existingBadge.classList.add('counter-ok');
+            }
+        }
+    } catch (error) {
+        console.error('Error loading contact counts:', error);
+    }
+}
+
+async function handleCleanupInactive() {
+    const hoursInput = document.getElementById('inactiveHours');
+    const cleanupBtn = document.getElementById('cleanupBtn');
+
+    if (!hoursInput || !cleanupBtn) return;
+
+    const hours = parseInt(hoursInput.value);
+
+    if (isNaN(hours) || hours < 1) {
+        showToast('Please enter a valid number of hours', 'warning');
+        return;
+    }
+
+    // Confirm action
+    if (!confirm(`This will remove all contacts inactive for more than ${hours} hours. Continue?`)) {
+        return;
+    }
+
+    // Disable button during operation
+    const originalHTML = cleanupBtn.innerHTML;
+    cleanupBtn.disabled = true;
+    cleanupBtn.innerHTML = '<i class="bi bi-hourglass-split"></i> Cleaning...';
+
+    try {
+        const response = await fetch('/api/contacts/cleanup', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+                inactive_hours: hours
+            })
+        });
+
+        const data = await response.json();
+
+        if (data.success) {
+            showToast(data.message || 'Cleanup completed successfully', 'success');
+            // Reload contact counts
+            loadContactCounts();
+        } else {
+            showToast('Cleanup failed: ' + (data.error || 'Unknown error'), 'danger');
+        }
+    } catch (error) {
+        console.error('Error during cleanup:', error);
+        showToast('Network error during cleanup', 'danger');
+    } finally {
+        // Re-enable button
+        cleanupBtn.disabled = false;
+        cleanupBtn.innerHTML = originalHTML;
+    }
+}
+
+// =============================================================================
+// Pending Page Initialization
+// =============================================================================
+
+function initPendingPage() {
+    console.log('Initializing Pending page...');
+
+    // Load pending contacts
+    loadPendingContacts();
+
+    // Attach event listeners for pending page
+    attachPendingEventListeners();
+}
+
+function attachPendingEventListeners() {
+    // Refresh button
+    const refreshBtn = document.getElementById('refreshPendingBtn');
+    if (refreshBtn) {
+        refreshBtn.addEventListener('click', () => {
             loadPendingContacts();
         });
     }
+}
 
-    // Existing contacts refresh button
-    const refreshExistingBtn = document.getElementById('refreshExistingBtn');
-    if (refreshExistingBtn) {
-        refreshExistingBtn.addEventListener('click', () => {
+// =============================================================================
+// Existing Page Initialization
+// =============================================================================
+
+function initExistingPage() {
+    console.log('Initializing Existing page...');
+
+    // Parse sort parameters from URL
+    parseSortParamsFromURL();
+
+    // Load existing contacts
+    loadExistingContacts();
+
+    // Attach event listeners for existing page
+    attachExistingEventListeners();
+}
+
+function attachExistingEventListeners() {
+    // Refresh button
+    const refreshBtn = document.getElementById('refreshExistingBtn');
+    if (refreshBtn) {
+        refreshBtn.addEventListener('click', () => {
             loadExistingContacts();
         });
     }
@@ -68,7 +249,7 @@ function attachEventListeners() {
     const searchInput = document.getElementById('searchInput');
     if (searchInput) {
         searchInput.addEventListener('input', () => {
-            applyFilters();
+            applySortAndFilters();
         });
     }
 
@@ -76,7 +257,22 @@ function attachEventListeners() {
     const typeFilter = document.getElementById('typeFilter');
     if (typeFilter) {
         typeFilter.addEventListener('change', () => {
-            applyFilters();
+            applySortAndFilters();
+        });
+    }
+
+    // Sort buttons
+    const sortByName = document.getElementById('sortByName');
+    if (sortByName) {
+        sortByName.addEventListener('click', () => {
+            handleSortChange('name');
+        });
+    }
+
+    const sortByLastAdvert = document.getElementById('sortByLastAdvert');
+    if (sortByLastAdvert) {
+        sortByLastAdvert.addEventListener('click', () => {
+            handleSortChange('last_advert');
         });
     }
 
@@ -90,7 +286,7 @@ function attachEventListeners() {
 }
 
 // =============================================================================
-// Settings Management
+// Settings Management (shared)
 // =============================================================================
 
 async function loadSettings() {
@@ -134,9 +330,6 @@ async function handleApprovalToggle(event) {
                 enabled ? 'Manual approval enabled' : 'Manual approval disabled',
                 'success'
             );
-
-            // Reload pending contacts after toggle
-            setTimeout(() => loadPendingContacts(), 500);
         } else {
             console.error('Failed to update setting:', data.error);
             showToast('Failed to update setting: ' + data.error, 'danger');
@@ -156,7 +349,6 @@ async function handleApprovalToggle(event) {
 function updateApprovalUI(enabled) {
     const switchEl = document.getElementById('manualApprovalSwitch');
     const labelEl = document.getElementById('switchLabel');
-    const infoEl = document.getElementById('approvalInfo');
 
     if (switchEl) {
         switchEl.checked = enabled;
@@ -167,10 +359,6 @@ function updateApprovalUI(enabled) {
             ? 'Manual approval enabled'
             : 'Automatic approval (default)';
     }
-
-    if (infoEl) {
-        infoEl.style.display = enabled ? 'none' : 'inline-block';
-    }
 }
 
 // =============================================================================
@@ -182,7 +370,7 @@ async function loadPendingContacts() {
     const emptyEl = document.getElementById('pendingEmpty');
     const listEl = document.getElementById('pendingList');
     const errorEl = document.getElementById('pendingError');
-    const countBadge = document.getElementById('pendingCount');
+    const countBadge = document.getElementById('pendingCountBadge');
 
     // Show loading state
     if (loadingEl) loadingEl.style.display = 'block';
@@ -207,7 +395,7 @@ async function loadPendingContacts() {
                 // Render pending contacts list
                 renderPendingList(pendingContacts);
 
-                // Update count badge
+                // Update count badge (in navbar)
                 if (countBadge) {
                     countBadge.textContent = pendingContacts.length;
                     countBadge.style.display = 'inline-block';
@@ -216,7 +404,7 @@ async function loadPendingContacts() {
         } else {
             console.error('Failed to load pending contacts:', data.error);
             if (errorEl) {
-                const errorMsg = document.getElementById('errorMessage');
+                const errorMsg = document.getElementById('pendingErrorMessage');
                 if (errorMsg) errorMsg.textContent = data.error || 'Failed to load pending contacts';
                 errorEl.style.display = 'block';
             }
@@ -225,7 +413,7 @@ async function loadPendingContacts() {
         console.error('Error loading pending contacts:', error);
         if (loadingEl) loadingEl.style.display = 'none';
         if (errorEl) {
-            const errorMsg = document.getElementById('errorMessage');
+            const errorMsg = document.getElementById('pendingErrorMessage');
             if (errorMsg) errorMsg.textContent = 'Network error: ' + error.message;
             errorEl.style.display = 'block';
         }
@@ -425,15 +613,15 @@ async function loadExistingContacts() {
             existingContacts = data.contacts || [];
             filteredContacts = [...existingContacts];
 
-            // Update counter badge
+            // Update counter badge (in navbar)
             updateCounter(data.count, data.limit);
 
             if (existingContacts.length === 0) {
                 // Show empty state
                 if (emptyEl) emptyEl.style.display = 'block';
             } else {
-                // Apply filters and render
-                applyFilters();
+                // Apply filters and sort
+                applySortAndFilters();
             }
         } else {
             console.error('Failed to load existing contacts:', data.error);
@@ -474,14 +662,83 @@ function updateCounter(count, limit) {
     }
 }
 
-function applyFilters() {
+// =============================================================================
+// Sorting Functionality (Existing Page)
+// =============================================================================
+
+function parseSortParamsFromURL() {
+    const urlParams = new URLSearchParams(window.location.search);
+    sortBy = urlParams.get('sort') || 'last_advert';
+    sortOrder = urlParams.get('order') || 'desc';
+
+    console.log('Parsed sort params:', { sortBy, sortOrder });
+
+    // Update UI to reflect current sort
+    updateSortUI();
+}
+
+function handleSortChange(newSortBy) {
+    if (sortBy === newSortBy) {
+        // Toggle order
+        sortOrder = sortOrder === 'asc' ? 'desc' : 'asc';
+    } else {
+        // Change sort field
+        sortBy = newSortBy;
+        // Set default order for new field
+        sortOrder = newSortBy === 'name' ? 'asc' : 'desc';
+    }
+
+    console.log('Sort changed to:', { sortBy, sortOrder });
+
+    // Update URL parameters
+    updateURLWithSortParams();
+
+    // Update UI
+    updateSortUI();
+
+    // Re-apply filters and sort
+    applySortAndFilters();
+}
+
+function updateURLWithSortParams() {
+    const url = new URL(window.location);
+    url.searchParams.set('sort', sortBy);
+    url.searchParams.set('order', sortOrder);
+    window.history.replaceState({}, '', url);
+}
+
+function updateSortUI() {
+    // Update sort button active states and icons
+    const sortButtons = document.querySelectorAll('.sort-btn');
+
+    sortButtons.forEach(btn => {
+        const btnSort = btn.dataset.sort;
+        const icon = btn.querySelector('i');
+
+        if (btnSort === sortBy) {
+            // Active button
+            btn.classList.add('active');
+            if (icon) {
+                icon.className = sortOrder === 'asc' ? 'bi bi-sort-up' : 'bi bi-sort-down';
+            }
+        } else {
+            // Inactive button
+            btn.classList.remove('active');
+            if (icon) {
+                icon.className = 'bi bi-sort-down'; // Default icon
+            }
+        }
+    });
+}
+
+function applySortAndFilters() {
     const searchInput = document.getElementById('searchInput');
     const typeFilter = document.getElementById('typeFilter');
 
     const searchTerm = searchInput ? searchInput.value.toLowerCase() : '';
     const selectedType = typeFilter ? typeFilter.value : 'ALL';
 
-    // Filter contacts
+    // First, filter contacts
     filteredContacts = existingContacts.filter(contact => {
         // Type filter
         if (selectedType !== 'ALL' && contact.type_label !== selectedType) {
@@ -498,7 +755,20 @@ function applyFilters() {
         return true;
     });
 
-    // Render filtered contacts
+    // Then, sort filtered contacts
+    filteredContacts.sort((a, b) => {
+        if (sortBy === 'name') {
+            const comparison = a.name.localeCompare(b.name);
+            return sortOrder === 'asc' ? comparison : -comparison;
+        } else if (sortBy === 'last_advert') {
+            const aTime = a.last_seen || 0;
+            const bTime = b.last_seen || 0;
+            return sortOrder === 'desc' ? bTime - aTime : aTime - bTime;
+        }
+        return 0;
+    });
+
+    // Render sorted and filtered contacts
     renderExistingList(filteredContacts);
 }
 
@@ -569,7 +839,7 @@ function formatRelativeTime(timestamp) {
 }
 
 /**
- * Get activity status indicator based on last_seen timestamp
+ * Get activity status indicator based on last_advert timestamp
  * Returns: { icon: string, color: string, title: string }
  */
 function getActivityStatus(timestamp) {
@@ -589,7 +859,7 @@ function getActivityStatus(timestamp) {
         return {
             icon: '🟢',
             color: '#28a745',
-            title: 'Active (seen recently)'
+            title: 'Active (advert received recently)'
         };
     }
 
@@ -654,10 +924,10 @@ function createExistingContactCard(contact, index) {
     keyDiv.textContent = contact.public_key_prefix;
     keyDiv.title = 'Public Key Prefix';
 
-    // Last seen row (with activity status indicator)
-    const lastSeenDiv = document.createElement('div');
-    lastSeenDiv.className = 'text-muted small d-flex align-items-center gap-1';
-    lastSeenDiv.style.marginBottom = '0.25rem';
+    // Last advert row (with activity status indicator)
+    const lastAdvertDiv = document.createElement('div');
+    lastAdvertDiv.className = 'text-muted small d-flex align-items-center gap-1';
+    lastAdvertDiv.style.marginBottom = '0.25rem';
 
     if (contact.last_seen) {
         const status = getActivityStatus(contact.last_seen);
@@ -669,10 +939,10 @@ function createExistingContactCard(contact, index) {
         statusIcon.title = status.title;
 
         const timeText = document.createElement('span');
-        timeText.textContent = `Last seen: ${relativeTime}`;
+        timeText.textContent = `Last advert: ${relativeTime}`;
 
-        lastSeenDiv.appendChild(statusIcon);
-        lastSeenDiv.appendChild(timeText);
+        lastAdvertDiv.appendChild(statusIcon);
+        lastAdvertDiv.appendChild(timeText);
     } else {
         // No last_seen data available
         const statusIcon = document.createElement('span');
@@ -680,10 +950,10 @@ function createExistingContactCard(contact, index) {
         statusIcon.style.fontSize = '0.9rem';
 
         const timeText = document.createElement('span');
-        timeText.textContent = 'Last seen: Unknown';
+        timeText.textContent = 'Last advert: Unknown';
 
-        lastSeenDiv.appendChild(statusIcon);
-        lastSeenDiv.appendChild(timeText);
+        lastAdvertDiv.appendChild(statusIcon);
+        lastAdvertDiv.appendChild(timeText);
     }
 
     // Path/mode (optional)
@@ -716,7 +986,7 @@ function createExistingContactCard(contact, index) {
     // Assemble card
     card.appendChild(infoRow);
     card.appendChild(keyDiv);
-    card.appendChild(lastSeenDiv);
+    card.appendChild(lastAdvertDiv);
     if (pathDiv) card.appendChild(pathDiv);
     card.appendChild(actionsDiv);
 
diff --git a/app/templates/base.html b/app/templates/base.html
index a2af338..cf328c4 100644
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -244,19 +244,6 @@
                     <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                 </div>
                 <div class="modal-body">
-                    <h6>Contact Management</h6>
-                    <hr>
-                    <div class="mb-3">
-                        <label for="inactiveHours" class="form-label">Remove contacts inactive for:</label>
-                        <div class="input-group">
-                            <input type="number" class="form-control" id="inactiveHours" value="48" min="1">
-                            <span class="input-group-text">hours</span>
-                        </div>
-                    </div>
-                    <button class="btn btn-danger" id="cleanupBtn">
-                        <i class="bi bi-trash"></i> Clean Inactive Contacts
-                    </button>
-                    <hr>
                     <h6>Device Information</h6>
                     <div id="deviceInfo" class="small text-muted">
                         Loading...
diff --git a/app/templates/contacts-existing.html b/app/templates/contacts-existing.html
new file mode 100644
index 0000000..0a021ac
--- /dev/null
+++ b/app/templates/contacts-existing.html
@@ -0,0 +1,84 @@
+{% 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 %}
diff --git a/app/templates/contacts-manage.html b/app/templates/contacts-manage.html
new file mode 100644
index 0000000..f110fcc
--- /dev/null
+++ b/app/templates/contacts-manage.html
@@ -0,0 +1,85 @@
+{% extends "contacts_base.html" %}
+
+{% block title %}Contact Management Settings - mc-webui{% endblock %}
+
+{% block navbar_content %}
+<span class="navbar-brand mb-0 h1">
+    <i class="bi bi-person-check"></i> Contact Management
+</span>
+<div class="d-flex align-items-center gap-2">
+    <button class="btn btn-outline-light btn-sm" onclick="window.location.href='/';" title="Home">
+        <i class="bi bi-house"></i>
+    </button>
+</div>
+{% endblock %}
+
+{% block page_content %}
+<div id="managePageContent">
+    <!-- Page Header -->
+    <div class="mb-4">
+        <h2 class="mb-1">
+            <i class="bi bi-gear"></i> Settings
+        </h2>
+        <p class="text-muted small mb-0">Configure contact management preferences</p>
+    </div>
+
+    <!-- Manual Approval Settings Section -->
+    <div class="compact-setting">
+        <div class="form-check form-switch mb-0 d-flex align-items-center gap-2">
+            <input class="form-check-input" type="checkbox" role="switch" id="manualApprovalSwitch" style="cursor: pointer; min-width: 3rem; min-height: 1.5rem;">
+            <label class="form-check-label mb-0" for="manualApprovalSwitch" style="cursor: pointer; font-weight: 500;">
+                <span id="switchLabel">Loading...</span>
+            </label>
+        </div>
+        <i class="bi bi-info-circle info-icon"
+           data-bs-toggle="tooltip"
+           data-bs-placement="top"
+           title="When enabled, new contacts must be manually approved before they can communicate with your node"></i>
+    </div>
+
+    <!-- Cleanup Inactive Contacts Section -->
+    <div class="cleanup-section">
+        <h6><i class="bi bi-trash"></i> Cleanup Inactive Contacts</h6>
+        <p class="small text-muted mb-3">Remove contacts that haven't sent an advertisement in a specified time period.</p>
+        <div class="mb-3">
+            <label for="inactiveHours" class="form-label">Remove contacts inactive for:</label>
+            <div class="input-group">
+                <input type="number" class="form-control" id="inactiveHours" value="48" min="1">
+                <span class="input-group-text">hours</span>
+            </div>
+        </div>
+        <button class="btn btn-danger" id="cleanupBtn">
+            <i class="bi bi-trash"></i> Clean Inactive Contacts
+        </button>
+    </div>
+
+    <!-- Navigation Section -->
+    <div class="mb-4">
+        <h5 class="mb-3">
+            <i class="bi bi-list-ul"></i> Manage Contacts
+        </h5>
+
+        <!-- Pending Contacts Card -->
+        <div class="nav-card" onclick="window.location.href='/contacts/pending';">
+            <div>
+                <h6><i class="bi bi-hourglass-split"></i> Pending Contacts</h6>
+                <small class="text-muted">Contacts awaiting manual approval</small>
+            </div>
+            <span class="badge bg-primary rounded-pill" id="pendingBadge" style="font-size: 1.1rem;">
+                <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
+            </span>
+        </div>
+
+        <!-- Existing Contacts Card -->
+        <div class="nav-card" onclick="window.location.href='/contacts/existing';">
+            <div>
+                <h6><i class="bi bi-person-lines-fill"></i> Existing Contacts</h6>
+                <small class="text-muted">View and manage your approved contacts</small>
+            </div>
+            <span class="badge counter-badge counter-ok rounded-pill" id="existingBadge" style="font-size: 1.1rem;">
+                <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
+            </span>
+        </div>
+    </div>
+</div>
+{% endblock %}
diff --git a/app/templates/contacts-pending.html b/app/templates/contacts-pending.html
new file mode 100644
index 0000000..13e68d9
--- /dev/null
+++ b/app/templates/contacts-pending.html
@@ -0,0 +1,63 @@
+{% 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 %}
diff --git a/app/templates/contacts_base.html b/app/templates/contacts_base.html
new file mode 100644
index 0000000..64ace57
--- /dev/null
+++ b/app/templates/contacts_base.html
@@ -0,0 +1,420 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
+    <title>{% block title %}Contact Management - mc-webui{% endblock %}</title>
+
+    <!-- Favicon -->
+    <link rel="apple-touch-icon" sizes="180x180" href="{{ url_for('static', filename='images/apple-touch-icon.png') }}">
+    <link rel="icon" type="image/png" sizes="32x32" href="{{ url_for('static', filename='images/favicon-32x32.png') }}">
+    <link rel="icon" type="image/png" sizes="16x16" href="{{ url_for('static', filename='images/favicon-16x16.png') }}">
+    <link rel="manifest" href="{{ url_for('static', filename='manifest.json') }}">
+    <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
+
+    <!-- Bootstrap 5 CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
+    <!-- Bootstrap Icons -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.css">
+
+    <!-- Custom CSS -->
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
+
+    <style>
+        /* Mobile-first custom styles for Contact Management */
+        /* Compact manual approval section */
+        .compact-setting {
+            display: flex;
+            align-items: center;
+            gap: 0.75rem;
+            padding: 0.75rem;
+            background-color: #f8f9fa;
+            border-radius: 0.5rem;
+            margin-bottom: 1rem;
+        }
+
+        .info-icon {
+            color: #6c757d;
+            cursor: help;
+            font-size: 1.1rem;
+        }
+
+        .info-icon:hover {
+            color: #0d6efd;
+        }
+
+        .pending-contact-card {
+            background-color: white;
+            border: 1px solid #dee2e6;
+            border-radius: 0.5rem;
+            padding: 1rem;
+            margin-bottom: 0.75rem;
+            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+        }
+
+        .contact-name {
+            font-size: 1.1rem;
+            font-weight: 600;
+            color: #212529;
+            margin-bottom: 0.5rem;
+            word-wrap: break-word;
+        }
+
+        .contact-key {
+            font-family: 'Courier New', monospace;
+            font-size: 0.85rem;
+            color: #6c757d;
+            word-break: break-all;
+            margin-bottom: 0.75rem;
+        }
+
+        .btn-action {
+            min-height: 44px; /* Touch-friendly size */
+            font-size: 1rem;
+        }
+
+        .empty-state {
+            text-align: center;
+            padding: 1.5rem 1rem;
+            color: #6c757d;
+        }
+
+        .empty-state i {
+            font-size: 2rem;
+            margin-bottom: 0.5rem;
+            opacity: 0.5;
+        }
+
+        .empty-state.compact {
+            padding: 1rem;
+        }
+
+        .empty-state.compact i {
+            font-size: 1.5rem;
+            margin-bottom: 0.25rem;
+        }
+
+        .info-badge {
+            display: inline-block;
+            background-color: #e7f3ff;
+            color: #0c5460;
+            padding: 0.5rem 1rem;
+            border-radius: 0.375rem;
+            font-size: 0.9rem;
+            margin-top: 0.5rem;
+        }
+
+        /* Existing Contacts Styles */
+        .existing-contact-card {
+            background-color: white;
+            border: 1px solid #dee2e6;
+            border-radius: 0.5rem;
+            padding: 1rem;
+            margin-bottom: 0.75rem;
+            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+            transition: box-shadow 0.2s;
+        }
+
+        .existing-contact-card:hover {
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+        }
+
+        .type-badge {
+            font-size: 0.75rem;
+            padding: 0.25rem 0.5rem;
+            font-weight: 600;
+        }
+
+        .contact-info-row {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            margin-bottom: 0.5rem;
+            flex-wrap: wrap;
+        }
+
+        .counter-badge {
+            font-size: 1rem;
+            padding: 0.35rem 0.75rem;
+        }
+
+        .counter-ok {
+            background-color: #28a745;
+        }
+
+        .counter-warning {
+            background-color: #ffc107;
+            color: #212529;
+        }
+
+        .counter-alarm {
+            background-color: #dc3545;
+            animation: pulse 1.5s infinite;
+        }
+
+        @keyframes pulse {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.7; }
+        }
+
+        .search-toolbar {
+            display: flex;
+            gap: 0.5rem;
+            margin-bottom: 1rem;
+            flex-wrap: wrap;
+        }
+
+        .search-toolbar input,
+        .search-toolbar select {
+            flex: 1;
+            min-width: 150px;
+        }
+
+        /* Scrollable contacts lists */
+        #pendingList {
+            max-height: 200px;
+            overflow-y: auto;
+            overflow-x: hidden;
+            -webkit-overflow-scrolling: touch;
+        }
+
+        #existingList {
+            overflow-y: auto;
+            overflow-x: hidden;
+            -webkit-overflow-scrolling: touch;
+            max-height: calc(100vh - 400px);
+            min-height: 300px;
+        }
+
+        /* Custom scrollbar styling */
+        #existingList::-webkit-scrollbar,
+        #pendingList::-webkit-scrollbar {
+            width: 8px;
+        }
+
+        #existingList::-webkit-scrollbar-track,
+        #pendingList::-webkit-scrollbar-track {
+            background: #f1f1f1;
+            border-radius: 4px;
+        }
+
+        #existingList::-webkit-scrollbar-thumb,
+        #pendingList::-webkit-scrollbar-thumb {
+            background: #888;
+            border-radius: 4px;
+        }
+
+        #existingList::-webkit-scrollbar-thumb:hover,
+        #pendingList::-webkit-scrollbar-thumb:hover {
+            background: #555;
+        }
+
+        /* Compact section headers */
+        .section-compact {
+            margin-bottom: 0.75rem;
+        }
+
+        /* NEW: Full-screen lists for dedicated pages */
+        .contacts-list-fullscreen {
+            height: calc(100vh - 200px);
+            overflow-y: auto;
+            -webkit-overflow-scrolling: touch;
+            padding: 0;
+        }
+
+        /* NEW: Navigation cards on manage page */
+        .nav-card {
+            background: white;
+            border: 1px solid #dee2e6;
+            border-radius: 0.5rem;
+            padding: 1.25rem;
+            margin-bottom: 1rem;
+            cursor: pointer;
+            transition: box-shadow 0.2s;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+
+        .nav-card:hover {
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+        }
+
+        .nav-card h6 {
+            margin: 0;
+            font-weight: 600;
+        }
+
+        /* NEW: Sort toolbar */
+        .filter-sort-toolbar {
+            display: flex;
+            gap: 0.5rem;
+            margin-bottom: 1rem;
+            align-items: center;
+            flex-wrap: wrap;
+        }
+
+        .sort-buttons {
+            display: flex;
+            gap: 0.5rem;
+        }
+
+        .sort-btn {
+            display: flex;
+            align-items: center;
+            gap: 0.25rem;
+            padding: 0.5rem 1rem;
+            background: #f8f9fa;
+            border: 1px solid #dee2e6;
+            border-radius: 0.375rem;
+            cursor: pointer;
+            font-size: 0.9rem;
+            transition: all 0.2s;
+        }
+
+        .sort-btn:hover {
+            background: #e9ecef;
+        }
+
+        .sort-btn.active {
+            background-color: #0d6efd;
+            color: white;
+            border-color: #0d6efd;
+        }
+
+        .sort-btn i {
+            font-size: 0.85rem;
+        }
+
+        /* NEW: Back buttons */
+        .back-buttons {
+            display: flex;
+            gap: 0.5rem;
+            margin-bottom: 1rem;
+        }
+
+        .back-buttons button {
+            flex: 1;
+            padding: 0.75rem;
+            min-height: 44px;
+        }
+
+        /* NEW: Cleanup section on manage page */
+        .cleanup-section {
+            background-color: #fff3cd;
+            border: 1px solid #ffc107;
+            border-radius: 0.5rem;
+            padding: 1rem;
+            margin-bottom: 1.5rem;
+        }
+
+        .cleanup-section h6 {
+            color: #856404;
+            margin-bottom: 0.75rem;
+        }
+
+        /* Mobile responsiveness */
+        @media (max-width: 768px) {
+            #existingList {
+                max-height: calc(100vh - 450px);
+            }
+
+            .contacts-list-fullscreen {
+                height: calc(100vh - 150px);
+            }
+
+            .filter-sort-toolbar {
+                flex-direction: column;
+                align-items: stretch;
+            }
+
+            .sort-buttons {
+                width: 100%;
+            }
+
+            .sort-btn {
+                flex: 1;
+            }
+        }
+    </style>
+
+    {% block extra_head %}{% endblock %}
+</head>
+<body>
+    <!-- Navbar -->
+    <nav class="navbar navbar-dark bg-primary">
+        <div class="container-fluid">
+            {% block navbar_content %}
+            <span class="navbar-brand mb-0 h1">
+                <i class="bi bi-person-check"></i> Contact Management
+            </span>
+            <div class="d-flex align-items-center gap-2">
+                <button class="btn btn-outline-light btn-sm" onclick="window.location.href='/';" title="Home">
+                    <i class="bi bi-house"></i>
+                </button>
+            </div>
+            {% endblock %}
+        </div>
+    </nav>
+
+    <!-- Main Content -->
+    <main>
+        <div class="container-fluid px-3 py-4">
+            <div class="row">
+                <div class="col-12 col-lg-8 mx-auto">
+                    {% block page_content %}
+                    <!-- Content will be provided by child templates -->
+                    {% endblock %}
+                </div>
+            </div>
+        </div>
+    </main>
+
+    <!-- Delete Confirmation Modal (shared across all contact pages) -->
+    <div class="modal fade" id="deleteContactModal" tabindex="-1" aria-labelledby="deleteContactModalLabel" aria-hidden="true">
+        <div class="modal-dialog">
+            <div class="modal-content">
+                <div class="modal-header bg-danger text-white">
+                    <h5 class="modal-title" id="deleteContactModalLabel">
+                        <i class="bi bi-exclamation-triangle"></i> Confirm Delete
+                    </h5>
+                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
+                </div>
+                <div class="modal-body">
+                    <p class="mb-2">Are you sure you want to delete this contact?</p>
+                    <div class="alert alert-warning mb-0">
+                        <strong id="deleteContactName"></strong><br>
+                        <small class="font-monospace" id="deleteContactKey"></small>
+                    </div>
+                    <p class="text-muted small mt-2 mb-0">This action cannot be undone.</p>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
+                    <button type="button" class="btn btn-danger" id="confirmDeleteBtn">
+                        <i class="bi bi-trash"></i> Delete Contact
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Toast container for notifications (shared across all contact pages) -->
+    <div class="toast-container position-fixed bottom-0 end-0 p-3">
+        <div id="contactToast" class="toast" role="alert">
+            <div class="toast-header">
+                <strong class="me-auto">Contact Management</strong>
+                <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
+            </div>
+            <div class="toast-body"></div>
+        </div>
+    </div>
+
+    <!-- Bootstrap 5 JS Bundle -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
+
+    <!-- Contact Management JavaScript -->
+    <script src="{{ url_for('static', filename='js/contacts.js') }}"></script>
+
+    {% block extra_scripts %}{% endblock %}
+</body>
+</html>