danvics/soulsync
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Improve enhanced search results toggle UX

Browse source 
Updated the enhanced search button to toggle showing/hiding previous results, with dynamic icon and text changes. Prevented duplicate event listeners by ensuring single initialization. Improved dropdown visibility logic and user feedback when no results are available.
This commit is contained in:
Broque Thomas 2025-12-29 15:54:47 -08:00
parent 0743070c84
commit 0bd1cab9e2
2 changed files with 67 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
webui/index.html
View file

@ -1282,8 +1282,8 @@
<button id="enhanced-cancel-btn" class="enhanced-cancel-btn hidden">✕</button>
</div>
<button id="enhanced-search-btn" class="enhanced-search-btn">
<span class="btn-icon">🔍</span>
<span class="btn-text">Search</span>
<span class="btn-icon">👁️</span>
<span class="btn-text">Show Results</span>
</button>
</div>

75
webui/static/script.js
View file

@ -2342,7 +2342,15 @@ function initializeSearch() {
// SEARCH MODE TOGGLE
// ===============================
let searchModeToggleInitialized = false;
function initializeSearchModeToggle() {
// Only initialize once to prevent duplicate event listeners
if (searchModeToggleInitialized) {
console.log('Search mode toggle already initialized, skipping...');
return;
}
const toggleContainer = document.querySelector('.search-mode-toggle');
const modeBtns = document.querySelectorAll('.search-mode-btn');
const basicSection = document.getElementById('basic-search-section');
@ -2353,6 +2361,9 @@ function initializeSearchModeToggle() {
return;
}
searchModeToggleInitialized = true;
console.log('✅ Initializing search mode toggle (first time only)');
modeBtns.forEach(btn => {
btn.addEventListener('click', () => {
const mode = btn.dataset.mode;
@ -2426,12 +2437,30 @@ function initializeSearchModeToggle() {
}
if (enhancedSearchBtn) {
enhancedSearchBtn.addEventListener('click', () => {
const query = enhancedInput.value.trim();
if (query.length >= 2) {
performEnhancedSearch(query);
enhancedSearchBtn.addEventListener('click', (e) => {
// Prevent click from bubbling to document (which would close the dropdown)
e.stopPropagation();
// Get fresh references (in case we navigated away and back)
const dropdown = document.getElementById('enhanced-dropdown');
const results = document.getElementById('enhanced-results-container');
if (!dropdown) return;
// Toggle the dropdown visibility to show/hide previous search results
if (dropdown.classList.contains('hidden')) {
// Check if there are results to show by looking for actual content
const hasResults = results &&
!results.classList.contains('hidden') &&
results.children.length > 0;
if (hasResults) {
showDropdown();
} else {
showToast('No previous results to show. Type to search!', 'info');
}
} else {
showToast('Please enter at least 2 characters', 'error');
hideDropdown();
}
});
}
@ -2446,7 +2475,8 @@ function initializeSearchModeToggle() {
// Close dropdown when clicking outside
document.addEventListener('click', (e) => {
if (enhancedDropdown && !enhancedDropdown.classList.contains('hidden')) {
const dropdown = document.getElementById('enhanced-dropdown');
if (dropdown && !dropdown.classList.contains('hidden')) {
const isClickInside = e.target.closest('.enhanced-search-input-wrapper');
if (!isClickInside) {
hideDropdown();
@ -3009,14 +3039,39 @@ function initializeSearchModeToggle() {
}
function showDropdown() {
if (enhancedDropdown) {
enhancedDropdown.classList.remove('hidden');
const dropdown = document.getElementById('enhanced-dropdown');
if (dropdown) {
dropdown.classList.remove('hidden');
updateToggleButtonState();
}
}
function hideDropdown() {
if (enhancedDropdown) {
enhancedDropdown.classList.add('hidden');
const dropdown = document.getElementById('enhanced-dropdown');
if (dropdown) {
dropdown.classList.add('hidden');
updateToggleButtonState();
}
}
function updateToggleButtonState() {
// Get fresh references
const btn = document.getElementById('enhanced-search-btn');
const dropdown = document.getElementById('enhanced-dropdown');
if (!btn || !dropdown) return;
const btnIcon = btn.querySelector('.btn-icon');
const btnText = btn.querySelector('.btn-text');
if (dropdown.classList.contains('hidden')) {
// Dropdown is hidden - button should say "Show Results"
if (btnIcon) btnIcon.textContent = '👁️';
if (btnText) btnText.textContent = 'Show Results';
} else {
// Dropdown is visible - button should say "Hide Results"
if (btnIcon) btnIcon.textContent = '🙈';
if (btnText) btnText.textContent = 'Hide Results';
}
}
}