From a5e767e5bff67c022c0e436b6435d27c1597c1db Mon Sep 17 00:00:00 2001
From: MarekWo <mwojtaszek@gmail.com>
Date: Sun, 22 Feb 2026 07:19:56 +0100
Subject: [PATCH] fix: Replace sort buttons with dropdown for mobile-friendly
 contact filters

Replaces two sort toggle buttons with a single <select> dropdown (e-commerce style)
so all 3 filter/sort controls fit on mobile screens.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 app/static/js/contacts.js            | 73 +++++-----------------------
 app/templates/contacts-existing.html | 18 +++----
 app/templates/contacts_base.html     | 32 ------------
 3 files changed, 20 insertions(+), 103 deletions(-)

diff --git a/app/static/js/contacts.js b/app/static/js/contacts.js
index 734f066..a7354ee 100644
--- a/app/static/js/contacts.js
+++ b/app/static/js/contacts.js
@@ -855,18 +855,15 @@ function attachExistingEventListeners() {
         });
     }
 
-    // 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');
+    // Sort dropdown
+    const sortSelect = document.getElementById('sortSelect');
+    if (sortSelect) {
+        sortSelect.addEventListener('change', () => {
+            const lastUnderscore = sortSelect.value.lastIndexOf('_');
+            sortBy = sortSelect.value.substring(0, lastUnderscore);
+            sortOrder = sortSelect.value.substring(lastUnderscore + 1);
+            updateURLWithSortParams();
+            applySortAndFilters();
         });
     }
 
@@ -1725,31 +1722,11 @@ function parseSortParamsFromURL() {
 
     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';
+    // Update sort dropdown to reflect current sort
+    const sortSelect = document.getElementById('sortSelect');
+    if (sortSelect) {
+        sortSelect.value = `${sortBy}_${sortOrder}`;
     }
-
-    console.log('Sort changed to:', { sortBy, sortOrder });
-
-    // Update URL parameters
-    updateURLWithSortParams();
-
-    // Update UI
-    updateSortUI();
-
-    // Re-apply filters and sort
-    applySortAndFilters();
 }
 
 function updateURLWithSortParams() {
@@ -1759,30 +1736,6 @@ function updateURLWithSortParams() {
     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');
diff --git a/app/templates/contacts-existing.html b/app/templates/contacts-existing.html
index a5e3acb..eb17c77 100644
--- a/app/templates/contacts-existing.html
+++ b/app/templates/contacts-existing.html
@@ -45,17 +45,13 @@
             <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>
+        <!-- Sort Dropdown -->
+        <select class="form-select" id="sortSelect">
+            <option value="last_advert_desc">Last advert ↓</option>
+            <option value="last_advert_asc">Last advert ↑</option>
+            <option value="name_asc">Name A→Z</option>
+            <option value="name_desc">Name Z→A</option>
+        </select>
     </div>
 
     <!-- Loading State -->
diff --git a/app/templates/contacts_base.html b/app/templates/contacts_base.html
index 7362010..239d80b 100644
--- a/app/templates/contacts_base.html
+++ b/app/templates/contacts_base.html
@@ -340,38 +340,6 @@
             font-size: 0.85rem;
         }
 
-        .sort-buttons {
-            display: flex;
-            gap: 0.375rem;
-        }
-
-        .sort-btn {
-            display: flex;
-            align-items: center;
-            gap: 0.2rem;
-            padding: 0.35rem 0.5rem;
-            background: #f8f9fa;
-            border: 1px solid #dee2e6;
-            border-radius: 0.375rem;
-            cursor: pointer;
-            font-size: 0.85rem;
-            transition: all 0.2s;
-            white-space: nowrap;
-        }
-
-        .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 {