Add browser search/filter for media items

- Search bar appears when browsing inside a folder
- Client-side filtering with 200ms debounce
- Clear button and search icon
- Hides at root level, resets on navigation
- Localized placeholder (en/ru)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-02-09 02:44:31 +03:00
parent 98a33bca54
commit 5f474d6c9f
5 changed files with 136 additions and 1 deletions

View File

@@ -1261,6 +1261,68 @@
gap: 0.75rem;
}
/* Browser Search */
.browser-search-wrapper {
flex: 1;
position: relative;
min-width: 0;
max-width: 300px;
}
.browser-search-icon {
position: absolute;
left: 0.6rem;
top: 50%;
transform: translateY(-50%);
color: var(--text-muted);
pointer-events: none;
}
.browser-search-input {
width: 100%;
padding: 0.4rem 2rem 0.4rem 2rem;
background: var(--bg-tertiary);
border: 1px solid var(--border);
border-radius: 6px;
color: var(--text-primary);
font-size: 0.813rem;
outline: none;
transition: border-color 0.2s;
}
.browser-search-input:focus {
border-color: var(--accent);
}
.browser-search-input::placeholder {
color: var(--text-muted);
}
.browser-search-clear {
position: absolute;
right: 0.4rem;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
color: var(--text-muted);
cursor: pointer;
padding: 0.15rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
width: auto;
height: auto;
transition: color 0.15s;
}
.browser-search-clear:hover {
color: var(--text-primary);
background: transparent !important;
transform: translateY(-50%) !important;
}
.view-toggle {
display: flex;
background: var(--bg-tertiary);
@@ -1853,6 +1915,10 @@
align-items: stretch;
}
.browser-search-wrapper {
max-width: none;
}
.browser-toolbar-right {
justify-content: flex-end;
}