feat(dm): add clear search button (x) next to contact info

Shows an X button when a conversation is selected, allowing quick
clearing of the search field to find another contact.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
MarekWo
2026-03-17 19:35:31 +01:00
parent e1d3534624
commit eb19f3cf76
2 changed files with 25 additions and 2 deletions

View File

@@ -261,6 +261,17 @@ function setupEventListeners() {
});
}
// Clear search button
const clearBtn = document.getElementById('dmClearSearchBtn');
if (clearBtn && searchInput && contactDropdown) {
clearBtn.addEventListener('click', () => {
searchInput.value = '';
renderDropdownItems('');
contactDropdown.style.display = 'block';
searchInput.focus();
});
}
// Contact info button
const infoBtn = document.getElementById('dmContactInfoBtn');
if (infoBtn) {
@@ -553,7 +564,9 @@ async function selectConversation(conversationId) {
const searchInput = document.getElementById('dmContactSearchInput');
if (searchInput) searchInput.value = displayName(currentRecipient);
// Enable info button
// Show clear button and enable info button
const clearBtn = document.getElementById('dmClearSearchBtn');
if (clearBtn) clearBtn.style.display = '';
const infoBtn = document.getElementById('dmContactInfoBtn');
if (infoBtn) infoBtn.disabled = false;
@@ -582,9 +595,11 @@ function clearConversation() {
// Clear from localStorage
localStorage.removeItem('mc_active_dm_conversation');
// Reset search input and info button
// Reset search input, hide clear button, disable info button
const searchInput = document.getElementById('dmContactSearchInput');
if (searchInput) searchInput.value = '';
const clearBtn = document.getElementById('dmClearSearchBtn');
if (clearBtn) clearBtn.style.display = 'none';
const infoBtn = document.getElementById('dmContactInfoBtn');
if (infoBtn) infoBtn.disabled = true;

View File

@@ -120,6 +120,14 @@
autocomplete="off">
<div id="dmContactDropdown" class="dm-contact-dropdown" style="display: none;"></div>
</div>
<!-- Clear search button -->
<button type="button"
class="btn btn-outline-secondary flex-shrink-0"
id="dmClearSearchBtn"
title="Clear selection"
style="display: none;">
<i class="bi bi-x-lg"></i>
</button>
<!-- Contact info button -->
<button type="button"
class="btn btn-outline-secondary flex-shrink-0"