From a1f91816af6c349fde49c20c482c6d1e22981eb3 Mon Sep 17 00:00:00 2001
From: MarekWo <mwojtaszek@gmail.com>
Date: Thu, 1 Jan 2026 21:50:18 +0100
Subject: [PATCH] refactor: Improve Contact Management modal pages layout
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

After removing navbars from modal embedded pages, add proper page headers
and optimize button layout for better mobile UX.

Changes to Pending Contacts page:
- Add H4 page header "Pending Contacts" with badge counter
- Replace two large buttons (Contact Management + Home) with smaller ones
- Change Home button to Refresh button (more useful in modal context)
- Use btn-sm for compact button sizes
- Replace back-buttons class with d-flex gap-2 for simpler layout

Changes to Existing Contacts page:
- Add H4 page header "Existing Contacts" with counter badge
- Same button improvements as Pending Contacts
- Replace Home button with Refresh button

Changes to Contact Management settings:
- Set default "Days of Inactivity" value to 0 (ignore) instead of 2
- This is safer default as 0 means "do not filter by inactivity"

Result:
- Clear page headers indicate current location in modal
- Smaller, more compact buttons save screen space
- Refresh buttons are more useful than Home (which is Close in modal)
- Safer default value for cleanup prevents accidental bulk deletions

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

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 app/templates/contacts-existing.html | 20 ++++++++++++++------
 app/templates/contacts-manage.html   |  2 +-
 app/templates/contacts-pending.html  | 20 ++++++++++++++------
 3 files changed, 29 insertions(+), 13 deletions(-)

diff --git a/app/templates/contacts-existing.html b/app/templates/contacts-existing.html
index 4590e9a..c8b4e5a 100644
--- a/app/templates/contacts-existing.html
+++ b/app/templates/contacts-existing.html
@@ -4,13 +4,21 @@
 
 {% block page_content %}
 <div id="existingPageContent" class="p-3">
-    <!-- Back Buttons -->
-    <div class="back-buttons">
-        <button class="btn btn-outline-secondary" onclick="navigateTo('/contacts/manage');">
-            <i class="bi bi-arrow-left"></i> Contact Management
+    <!-- Page Header -->
+    <div class="mb-3">
+        <h4 class="mb-2">
+            <i class="bi bi-person-lines-fill"></i> Existing Contacts
+            <span class="badge counter-badge counter-ok rounded-pill" id="contactsCounter" style="display: none; font-size: 0.8rem;">0 / 350</span>
+        </h4>
+    </div>
+
+    <!-- Action Buttons -->
+    <div class="d-flex gap-2 mb-3">
+        <button class="btn btn-outline-secondary btn-sm" onclick="navigateTo('/contacts/manage');">
+            <i class="bi bi-arrow-left"></i> Back
         </button>
-        <button class="btn btn-outline-secondary" onclick="navigateTo('/');">
-            <i class="bi bi-house"></i> Home
+        <button class="btn btn-outline-primary btn-sm" id="refreshExistingBtn">
+            <i class="bi bi-arrow-clockwise"></i> Refresh
         </button>
     </div>
 
diff --git a/app/templates/contacts-manage.html b/app/templates/contacts-manage.html
index 44a0abc..eae9b99 100644
--- a/app/templates/contacts-manage.html
+++ b/app/templates/contacts-manage.html
@@ -121,7 +121,7 @@
             <!-- Days of Inactivity -->
             <div class="mb-3">
                 <label for="cleanupDays" class="form-label">Days of Inactivity (0 = ignore):</label>
-                <input type="number" class="form-control" id="cleanupDays" value="2" min="0">
+                <input type="number" class="form-control" id="cleanupDays" value="0" min="0">
                 <small class="form-text text-muted">Contacts inactive for more than this many days will be selected</small>
             </div>
         </div>
diff --git a/app/templates/contacts-pending.html b/app/templates/contacts-pending.html
index 2af0cd6..5869800 100644
--- a/app/templates/contacts-pending.html
+++ b/app/templates/contacts-pending.html
@@ -4,13 +4,21 @@
 
 {% block page_content %}
 <div id="pendingPageContent" class="p-3">
-    <!-- Back Buttons -->
-    <div class="back-buttons">
-        <button class="btn btn-outline-secondary" onclick="navigateTo('/contacts/manage');">
-            <i class="bi bi-arrow-left"></i> Contact Management
+    <!-- Page Header -->
+    <div class="mb-3">
+        <h4 class="mb-2">
+            <i class="bi bi-hourglass-split"></i> Pending Contacts
+            <span class="badge bg-primary rounded-pill" id="pendingCountBadge" style="display: none; font-size: 0.8rem;">0</span>
+        </h4>
+    </div>
+
+    <!-- Action Buttons -->
+    <div class="d-flex gap-2 mb-3">
+        <button class="btn btn-outline-secondary btn-sm" onclick="navigateTo('/contacts/manage');">
+            <i class="bi bi-arrow-left"></i> Back
         </button>
-        <button class="btn btn-outline-secondary" onclick="navigateTo('/');">
-            <i class="bi bi-house"></i> Home
+        <button class="btn btn-outline-primary btn-sm" id="refreshPendingBtn">
+            <i class="bi bi-arrow-clockwise"></i> Refresh
         </button>
     </div>