feat(ui): improve mobile search and consolidate language selector

- On mobile (≤768px), replace the full search bar in the topbar with a
  search icon button; tapping it expands a full-width search overlay
  with a back arrow to collapse (Google Drive-style pattern)
- Escape key also collapses the mobile search overlay
- Hide the redundant inline search icon when the mobile search bar is
  active (submit button already has one)
- Move the language selector from the topbar into the user menu for all
  screen sizes, reducing topbar clutter; it renders as an accordion row
  matching other menu items
- Fix user menu positioning in RTL layouts (Arabic/Persian): anchor to
  left:0 instead of right:0 so the panel opens inward rather than
  off-screen
This commit is contained in:
Kamil Alekberov
2026-05-17 18:33:39 +05:00
committed by Unrepresented
parent 9aef9ea787
commit fe0a8c7f72
5 changed files with 199 additions and 13 deletions
+24
View File
@@ -516,8 +516,32 @@ function setupEventListeners() {
}
});
// Mobile search toggle
const topBar = document.querySelector('.top-bar');
document.getElementById('search-toggle-btn')?.addEventListener('click', () => {
topBar?.classList.add('top-bar--search-active');
elements.searchInput?.focus();
});
const collapseSearch = () => {
topBar?.classList.remove('top-bar--search-active');
if (elements.searchInput) elements.searchInput.value = '';
if (app.isSearchMode) {
app.isSearchMode = false;
app.currentPath = '';
document.querySelector('.search-results-header')?.remove();
ui.updateBreadcrumb();
loadFiles();
}
};
document.getElementById('search-back-btn')?.addEventListener('click', collapseSearch);
// Search input — Enter key
elements.searchInput?.addEventListener('keydown', (e) => {
if (e.key === 'Escape') {
collapseSearch();
return;
}
if (e.key === 'Enter') {
// Cancel any pending debounce
if (searchDebounceTimer) clearTimeout(searchDebounceTimer);