From 402789e763d49b9dd74bbe67ef689876b57afcc6 Mon Sep 17 00:00:00 2001 From: Caleb Allen Date: Fri, 20 Feb 2026 17:38:29 -0500 Subject: [PATCH] search bar --- frontend/index.css | 5 + frontend/index.html | 1 + frontend/index.ts | 22 +++ .../src/components/cover-grid/cover-grid.ts | 82 +++++++-- .../components/playlist-view/playlist-view.ts | 145 +++++++++++++++- .../src/components/search-bar/search-bar.ts | 162 ++++++++++++++++++ .../src/components/track-list/track-list.ts | 61 ++++++- .../store/controllers/search-controller.ts | 54 ++++++ frontend/src/store/index.ts | 2 + frontend/src/store/search-store.ts | 61 +++++++ 10 files changed, 566 insertions(+), 29 deletions(-) create mode 100644 frontend/src/components/search-bar/search-bar.ts create mode 100644 frontend/src/store/controllers/search-controller.ts create mode 100644 frontend/src/store/search-store.ts diff --git a/frontend/index.css b/frontend/index.css index 9edc5f8..17fd694 100644 --- a/frontend/index.css +++ b/frontend/index.css @@ -33,6 +33,11 @@ p { justify-content: space-between; align-items: center; background-color: var(--yj-bg-elevated, #343a40); + gap: 1em; +} + +.top-bar search-bar { + flex: 0 1 320px; } ul { diff --git a/frontend/index.html b/frontend/index.html index 06c1258..b727352 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -15,6 +15,7 @@

YellowJacket

Music how it was meant to bee.

+
diff --git a/frontend/index.ts b/frontend/index.ts index 7617e1d..ef4c47d 100644 --- a/frontend/index.ts +++ b/frontend/index.ts @@ -7,12 +7,15 @@ import '@components/queue-panel/queue-panel.ts'; import '@components/playlist-view/playlist-view.ts'; import '@components/library-manager/library-manager.ts'; import '@components/config-page/config-page.ts'; +import '@components/search-bar/search-bar.ts'; +import type { SearchBar } from '@components/search-bar/search-bar.ts'; import '@awesome.me/webawesome/dist/styles/themes/default.css'; import '@awesome.me/webawesome/dist/components/icon/icon.js'; import { setBasePath } from '@awesome.me/webawesome/dist/webawesome.js'; import { libraryStore } from '@store/library-store'; import { playlistStore } from '@store/playlist-store'; import { queueStore } from '@store/queue-store'; +import { searchStore } from '@store/search-store'; // Importing the theme store triggers initialization: it fetches the saved // theme from the backend and applies CSS custom properties to :root. import '@store/theme-store'; @@ -37,6 +40,8 @@ document.addEventListener('navigate', (e: Event) => { if (!mainContent) return; + searchStore.setCurrentView(view); + switch (view) { case 'albums': mainContent.innerHTML = ''; @@ -118,3 +123,20 @@ if (queueButton && queuePanel) { }) as EventListener, ); } + +// --------------------------------------------------------------- +// Ctrl+F to focus the search bar +// --------------------------------------------------------------- + +document.addEventListener('keydown', (e: KeyboardEvent) => { + if ((e.ctrlKey || e.metaKey) && e.key === 'f') { + const bar = document.querySelector( + 'search-bar', + ) as SearchBar | null; + + if (bar && !bar.hasAttribute('hidden')) { + e.preventDefault(); + bar.focusInput(); + } + } +}); diff --git a/frontend/src/components/cover-grid/cover-grid.ts b/frontend/src/components/cover-grid/cover-grid.ts index 2018b77..02beb1a 100644 --- a/frontend/src/components/cover-grid/cover-grid.ts +++ b/frontend/src/components/cover-grid/cover-grid.ts @@ -10,6 +10,7 @@ import { grid } from '@lit-labs/virtualizer/layouts/grid.js'; import { GetAlbumTracks } from '@go/library/Library'; import { library } from '@go/models'; import { LibraryController } from '@store/controllers/library-controller'; +import { SearchController } from '@store/controllers/search-controller'; import { queueStore } from '@store/queue-store'; import { Events } from '../../events'; import '@awesome.me/webawesome/dist/components/popup/popup.js'; @@ -63,7 +64,9 @@ const ZOOM_STEP = 16; @customElement('cover-grid') export class CoverGrid extends LitElement { private libraryCtrl = new LibraryController(this); + private searchCtrl = new SearchController(this); private cancelScanComplete?: () => void; + private lastSearchTerm = ''; // Fixed grid spacing constants. private static readonly GRID_GAP = 8; @@ -163,6 +166,25 @@ export class CoverGrid extends LitElement { string[] >(); + // ================================================================= + // Filtered albums (search) + // ================================================================= + + private get filteredAlbums(): library.Album[] { + const term = + this.searchCtrl.term.toLowerCase(); + + if (!term) return this.albums; + + return this.albums.filter( + (a) => + a.Name.toLowerCase().includes(term) || + a.ArtistName.toLowerCase().includes( + term, + ), + ); + } + /** Wheel event handler ref for manual add/remove. */ private wheelHandler = (e: WheelEvent) => { this.onWheel(e); @@ -634,7 +656,9 @@ export class CoverGrid extends LitElement { // restore can place it at the same // visual position. if (this.expandedAlbumId !== null) { - const idx = this.albums.findIndex( + const filtered = + this.filteredAlbums; + const idx = filtered.findIndex( (a) => a.ID === this.expandedAlbumId, @@ -921,7 +945,7 @@ export class CoverGrid extends LitElement { this.expandedAlbumId !== null ) { const idx = - this.albums.findIndex( + this.filteredAlbums.findIndex( (a) => a.ID === this @@ -1003,6 +1027,17 @@ export class CoverGrid extends LitElement { })(); } + // Close dropdown and clear selection when + // the search term changes. + const currentTerm = this.searchCtrl.term; + + if (currentTerm !== this.lastSearchTerm) { + this.lastSearchTerm = currentTerm; + this.closeDropdown(); + this.selectedAlbums = new Set(); + this.lastSelectedAlbumIndex = null; + } + // On zoom while dropdown is open, recompute // the split (column count may change) and // re-scroll after layout settles. @@ -1133,7 +1168,7 @@ export class CoverGrid extends LitElement { const safeIndex = Math.min( saved, - this.albums.length - 1, + this.filteredAlbums.length - 1, ); if (safeIndex <= 0) return; @@ -1352,10 +1387,11 @@ export class CoverGrid extends LitElement { ) { const pad = CoverGrid.GRID_PADDING; const cols = this.currentColumnCount; + const filtered = this.filteredAlbums; // Prefer the expanded album as focus. if (this.expandedAlbumId !== null) { - const idx = this.albums.findIndex( + const idx = filtered.findIndex( (a) => a.ID === this.expandedAlbumId, ); @@ -1387,7 +1423,7 @@ export class CoverGrid extends LitElement { ); const albumIndex = Math.min( centerRow * cols, - Math.max(0, this.albums.length - 1), + Math.max(0, filtered.length - 1), ); // Pixel offset from that album's top edge @@ -1461,7 +1497,7 @@ export class CoverGrid extends LitElement { private getCaratOffset(): number { if (this.expandedAlbumId === null) return 0; - const idx = this.albums.findIndex( + const idx = this.filteredAlbums.findIndex( (a) => a.ID === this.expandedAlbumId, ); @@ -1492,19 +1528,21 @@ export class CoverGrid extends LitElement { * "before" virtualizer; the rest go into "after". */ private computeSplitIndex() { + const filtered = this.filteredAlbums; + if (this.expandedAlbumId === null) { - this.splitIndex = this.albums.length; + this.splitIndex = filtered.length; return; } const columns = this.getColumnCount(); - const expandedIndex = this.albums.findIndex( + const expandedIndex = filtered.findIndex( (a) => a.ID === this.expandedAlbumId, ); if (expandedIndex < 0) { - this.splitIndex = this.albums.length; + this.splitIndex = filtered.length; return; } @@ -1513,7 +1551,7 @@ export class CoverGrid extends LitElement { (Math.floor(expandedIndex / columns) + 1) * columns, - this.albums.length, + filtered.length, ); } @@ -1528,11 +1566,12 @@ export class CoverGrid extends LitElement { * component state (e.g. selectedAlbums) changes. */ private buildGridEntries(): GridEntry[] { + const filtered = this.filteredAlbums; const entries: GridEntry[] = []; - for (let i = 0; i < this.albums.length; i++) { + for (let i = 0; i < filtered.length; i++) { entries.push({ - album: this.albums[i]!, + album: filtered[i]!, albumIndex: i, }); } @@ -1814,7 +1853,8 @@ export class CoverGrid extends LitElement { return; } - const expandedIndex = this.albums.findIndex( + const filtered = this.filteredAlbums; + const expandedIndex = filtered.findIndex( (a) => a.ID === this.expandedAlbumId, ); @@ -1920,12 +1960,13 @@ export class CoverGrid extends LitElement { from: number, to: number, ): Set { + const filtered = this.filteredAlbums; const start = Math.min(from, to); const end = Math.max(from, to); const ids = new Set(); for (let i = start; i <= end; i++) { - const album = this.albums[i]; + const album = filtered[i]; if (album) { ids.add(album.ID); @@ -2119,6 +2160,7 @@ export class CoverGrid extends LitElement { e: Event, ): { album: library.Album; index: number } | null { const path = e.composedPath(); + const filtered = this.filteredAlbums; for (const el of path) { if ( @@ -2130,7 +2172,7 @@ export class CoverGrid extends LitElement { if (raw === undefined) return null; const index = parseInt(raw, 10); - const album = this.albums[index]; + const album = filtered[index]; if (!album) return null; @@ -2309,7 +2351,7 @@ export class CoverGrid extends LitElement { if (raw === undefined) return; const index = parseInt(raw, 10); - const album = this.albums[index]; + const album = this.filteredAlbums[index]; if (album && img.src !== album.CoverArtPath) { img.src = album.CoverArtPath; @@ -2886,6 +2928,14 @@ export class CoverGrid extends LitElement { `; } + if (this.filteredAlbums.length === 0) { + return html` +
+

No albums match your search.

+
+ `; + } + const gridContent = this.splitMode ? this.renderSplitGrid() : this.renderSingleGrid(); diff --git a/frontend/src/components/playlist-view/playlist-view.ts b/frontend/src/components/playlist-view/playlist-view.ts index 479f950..2daed76 100644 --- a/frontend/src/components/playlist-view/playlist-view.ts +++ b/frontend/src/components/playlist-view/playlist-view.ts @@ -20,6 +20,7 @@ import type { playlist } from '@go/models'; import { queueStore } from '@store/queue-store'; import { PlayerController } from '@store/controllers/player-controller'; import { PlaylistController } from '@store/controllers/playlist-controller'; +import { SearchController } from '@store/controllers/search-controller'; import '@components/track-info/track-info'; import '@components/playlist-picker/playlist-picker.js'; import type { PlaylistPicker } from '@components/playlist-picker/playlist-picker.js'; @@ -53,11 +54,13 @@ export class PlaylistView { private player = new PlayerController(this); private playlistCtrl = new PlaylistController(this); + private searchCtrl = new SearchController(this); private selection = new SelectionController(this); private cancelScanComplete?: () => void; private scrollDebounceTimer: ReturnType< typeof setTimeout > | null = null; + private lastSearchTerm = ''; /** * Index of the playlist whose tracks are currently @@ -65,6 +68,89 @@ export class PlaylistView */ private activePlaylistIndex = -1; + // ================================================================= + // Filtered entries (search) + // ================================================================= + + private get filteredEntries(): PlaylistEntry[] { + const term = + this.searchCtrl.term.toLowerCase(); + + if (!term) return this.entries; + + return this.entries.filter( + (e) => + e.summary.Name.toLowerCase().includes( + term, + ) || + e.tracks.some( + (t) => + t.Title.toLowerCase().includes( + term, + ) || + t.Artist.toLowerCase().includes( + term, + ), + ), + ); + } + + /** + * Return the tracks to display for a playlist entry, + * preserving original indices for event handlers. + * When a search term is active, only tracks matching + * the term are shown. When there is no search term + * (or the playlist matched by name), all tracks are + * returned. + */ + private getVisibleTracks( + entry: PlaylistEntry, + ): { track: playlist.Track; trackIndex: number }[] { + const term = + this.searchCtrl.term.toLowerCase(); + + if (!term) { + return entry.tracks.map( + (track, trackIndex) => ({ + track, + trackIndex, + }), + ); + } + + // If the playlist name itself matches, show + // all tracks — the whole playlist is relevant. + if ( + entry.summary.Name.toLowerCase().includes( + term, + ) + ) { + return entry.tracks.map( + (track, trackIndex) => ({ + track, + trackIndex, + }), + ); + } + + // Otherwise only show tracks whose metadata + // matches. + return entry.tracks + .map((track, trackIndex) => ({ + track, + trackIndex, + })) + .filter( + ({ track }) => + track.Title.toLowerCase().includes( + term, + ) || + track.Artist.toLowerCase().includes( + term, + ), + ); + } + @state() private entries: PlaylistEntry[] = []; @state() private loading = true; @state() private refreshing = false; @@ -607,6 +693,39 @@ export class PlaylistView ); } + override updated() { + const currentTerm = this.searchCtrl.term; + + if (currentTerm !== this.lastSearchTerm) { + this.lastSearchTerm = currentTerm; + this.selection.clear(); + this.activePlaylistIndex = -1; + + const term = currentTerm.toLowerCase(); + + this.entries = this.entries.map((e) => { + if (!term) { + return { ...e, expanded: false }; + } + + const hasTrackMatch = e.tracks.some( + (t) => + t.Title.toLowerCase().includes( + term, + ) || + t.Artist.toLowerCase().includes( + term, + ), + ); + + return { + ...e, + expanded: hasTrackMatch, + }; + }); + } + } + private get scrollContainer(): HTMLElement | null { return ( this.shadowRoot?.querySelector( @@ -1559,14 +1678,30 @@ export class PlaylistView `; } + const visible = this.filteredEntries; + + if (visible.length === 0) { + return html` +
+

No playlists match your search.

+
+ `; + } + return html`
    - ${this.entries.map((entry, i) => - this.renderPlaylistItem(entry, i), - )} + ${visible.map((entry) => { + const originalIndex = + this.entries.indexOf(entry); + + return this.renderPlaylistItem( + entry, + originalIndex, + ); + })}
`; } @@ -1686,8 +1821,8 @@ export class PlaylistView Play All
- ${entry.tracks.map( - (track, trackIndex) => { + ${this.getVisibleTracks(entry).map( + ({ track, trackIndex }) => { const isPhantom = track.Phantom; const active = diff --git a/frontend/src/components/search-bar/search-bar.ts b/frontend/src/components/search-bar/search-bar.ts new file mode 100644 index 0000000..769491c --- /dev/null +++ b/frontend/src/components/search-bar/search-bar.ts @@ -0,0 +1,162 @@ +import { LitElement, html, css, nothing } from 'lit'; +import { customElement, query } from 'lit/decorators.js'; +import { SearchController } from '@store/controllers/search-controller'; +import '@awesome.me/webawesome/dist/components/icon/icon.js'; + +/** + * Global search bar displayed in the top bar. + * Hides itself when the active view is not searchable. + */ +@customElement('search-bar') +export class SearchBar extends LitElement { + private searchCtrl = new SearchController(this); + + @query('input') + private inputEl!: HTMLInputElement; + + static override styles = css` + :host { + display: flex; + align-items: center; + } + + :host([hidden]) { + display: none; + } + + .search-container { + display: flex; + align-items: center; + background: var(--yj-bg-surface, #212529); + border: 1px solid var(--yj-border-subtle, #555); + border-radius: 6px; + padding: 0 10px; + gap: 8px; + height: 32px; + min-width: 200px; + max-width: 360px; + width: 100%; + transition: border-color 0.15s ease; + } + + .search-container:focus-within { + border-color: var(--yj-accent, #ffd43b); + } + + .search-icon { + color: var(--yj-text-tertiary, #888); + font-size: 14px; + flex-shrink: 0; + } + + input { + flex: 1; + background: none; + border: none; + outline: none; + color: var(--yj-text-primary, #fff); + font-size: 13px; + font-family: inherit; + min-width: 0; + } + + input::placeholder { + color: var(--yj-text-tertiary, #888); + } + + .clear-button { + display: flex; + align-items: center; + justify-content: center; + background: none; + border: none; + color: var(--yj-text-tertiary, #888); + cursor: pointer; + padding: 0; + font-size: 12px; + flex-shrink: 0; + } + + .clear-button:hover { + color: var(--yj-text-primary, #fff); + } + `; + + override updated() { + // Toggle the hidden attribute based on whether the + // current view supports searching. + if (this.searchCtrl.isSearchableView) { + this.removeAttribute('hidden'); + } else { + this.setAttribute('hidden', ''); + } + } + + /** + * Focus the search input and select all text. + * Called by the global Ctrl+F handler. + */ + focusInput(): void { + if (!this.inputEl) return; + + this.inputEl.focus(); + this.inputEl.select(); + } + + private handleInput = (e: Event) => { + const input = e.target as HTMLInputElement; + this.searchCtrl.term = input.value; + }; + + private handleClear = () => { + this.searchCtrl.term = ''; + + if (this.inputEl) { + this.inputEl.value = ''; + this.inputEl.focus(); + } + }; + + private handleKeydown = (e: KeyboardEvent) => { + if (e.key === 'Escape') { + this.searchCtrl.term = ''; + + if (this.inputEl) { + this.inputEl.value = ''; + this.inputEl.blur(); + } + } + }; + + override render() { + const term = this.searchCtrl.term; + + return html` +
+ + + ${term + ? html` + + ` + : nothing} +
+ `; + } +} diff --git a/frontend/src/components/track-list/track-list.ts b/frontend/src/components/track-list/track-list.ts index 8ffdb33..b9e1c24 100644 --- a/frontend/src/components/track-list/track-list.ts +++ b/frontend/src/components/track-list/track-list.ts @@ -6,6 +6,7 @@ import { formatMilliseconds } from '@utils/time'; import { SelectionController } from '@utils/selection-controller'; import type { SelectionHost } from '@utils/selection-controller'; import { PlayerController } from '@store/controllers/player-controller'; +import { SearchController } from '@store/controllers/search-controller'; import { queueStore } from '@store/queue-store'; import { LibraryController } from '@store/controllers/library-controller'; import { Events } from '../../events'; @@ -38,8 +39,10 @@ const COLUMN_COUNT = 3; export class TrackList extends LitElement implements SelectionHost { private player = new PlayerController(this); private libraryCtrl = new LibraryController(this); + private searchCtrl = new SearchController(this); private selection = new SelectionController(this); private cancelScanComplete?: () => void; + private lastSearchTerm = ''; @state() private tracks: library.Track[] = []; @@ -89,16 +92,36 @@ export class TrackList extends LitElement implements SelectionHost { private flowLayout = flow(); private hasRestoredScroll = false; + // ================================================================= + // Filtered tracks (search) + // ================================================================= + + private get filteredTracks(): library.Track[] { + const term = this.searchCtrl.term.toLowerCase(); + + if (!term) return this.tracks; + + return this.tracks.filter( + (t) => + t.TrackName.toLowerCase().includes( + term, + ) || + t.ArtistName.toLowerCase().includes( + term, + ), + ); + } + // ================================================================= // SelectionHost interface // ================================================================= getItemKey(index: number): string | undefined { - return this.tracks[index]?.FilePath; + return this.filteredTracks[index]?.FilePath; } getItemCount(): number { - return this.tracks.length; + return this.filteredTracks.length; } onSelectionChanged(): void { @@ -295,6 +318,12 @@ export class TrackList extends LitElement implements SelectionHost { background-color: var(--yj-text-tertiary, #6c757d); } + .no-results { + padding: 24px 16px; + color: var(--yj-text-secondary, #b3b3b3); + font-size: 13px; + } + lit-virtualizer { flex: 1; overflow-x: hidden; @@ -456,6 +485,14 @@ export class TrackList extends LitElement implements SelectionHost { this.lastActiveTrackPath = currentPath; this.virtualizer?.requestUpdate(); } + + // Clear selection when search term changes. + const currentTerm = this.searchCtrl.term; + + if (currentTerm !== this.lastSearchTerm) { + this.lastSearchTerm = currentTerm; + this.selection.clear(); + } } private previousHostWidth = 0; @@ -752,6 +789,8 @@ export class TrackList extends LitElement implements SelectionHost { }; override render() { + const visibleTracks = this.filteredTracks; + return html` ${this.tracks.length === 0 ? html`

Loading tracks...

` @@ -761,12 +800,18 @@ export class TrackList extends LitElement implements SelectionHost {
Artist
Track Length
- + ${visibleTracks.length === 0 + ? html`

+ No tracks match your search. +

` + : html` + + `} `}
diff --git a/frontend/src/store/controllers/search-controller.ts b/frontend/src/store/controllers/search-controller.ts new file mode 100644 index 0000000..18cfcc4 --- /dev/null +++ b/frontend/src/store/controllers/search-controller.ts @@ -0,0 +1,54 @@ +import type { ReactiveController, ReactiveControllerHost } from 'lit'; +import { searchStore } from '../search-store'; + +/** + * SearchController connects a Lit component to the SearchStore. + * + * Usage in a component: + * + * private search = new SearchController(this); + * + * render() { + * const term = this.search.term; + * ... + * } + */ +export class SearchController implements ReactiveController { + private host: ReactiveControllerHost; + private unsubscribe?: () => void; + + constructor(host: ReactiveControllerHost) { + this.host = host; + host.addController(this); + } + + // =================================================================== + // LIFECYCLE HOOKS + // =================================================================== + + hostConnected(): void { + this.unsubscribe = searchStore.subscribe(() => { + this.host.requestUpdate(); + }); + } + + hostDisconnected(): void { + this.unsubscribe?.(); + } + + // =================================================================== + // DATA ACCESS + // =================================================================== + + get term(): string { + return searchStore.getTerm(); + } + + set term(value: string) { + searchStore.setTerm(value); + } + + get isSearchableView(): boolean { + return searchStore.isSearchableView(); + } +} diff --git a/frontend/src/store/index.ts b/frontend/src/store/index.ts index 4e1695e..92deb27 100644 --- a/frontend/src/store/index.ts +++ b/frontend/src/store/index.ts @@ -7,3 +7,5 @@ export { QueueController } from './controllers/queue-controller'; export { themeStore } from './theme-store'; export type { ThemeState, BackgroundShade } from './theme-store'; export { ThemeController } from './controllers/theme-controller'; +export { searchStore } from './search-store'; +export { SearchController } from './controllers/search-controller'; diff --git a/frontend/src/store/search-store.ts b/frontend/src/store/search-store.ts new file mode 100644 index 0000000..13cd43d --- /dev/null +++ b/frontend/src/store/search-store.ts @@ -0,0 +1,61 @@ +/** Searchable views that respond to the global search term. */ +const SEARCHABLE_VIEWS = new Set(['tracks', 'albums', 'playlists']); + +type Subscriber = () => void; + +class SearchStore { + private term = ''; + private currentView = 'tracks'; + private subscribers = new Set(); + + // =================================================================== + // SEARCH TERM + // =================================================================== + + getTerm(): string { + return this.term; + } + + setTerm(term: string): void { + if (term === this.term) return; + + this.term = term; + this.notify(); + } + + // =================================================================== + // CURRENT VIEW + // =================================================================== + + getCurrentView(): string { + return this.currentView; + } + + setCurrentView(view: string): void { + if (view === this.currentView) return; + + this.currentView = view; + this.notify(); + } + + isSearchableView(): boolean { + return SEARCHABLE_VIEWS.has(this.currentView); + } + + // =================================================================== + // SUBSCRIPTION SYSTEM + // =================================================================== + + subscribe(callback: Subscriber): () => void { + this.subscribers.add(callback); + + return () => this.subscribers.delete(callback); + } + + private notify(): void { + this.subscribers.forEach((callback) => callback()); + } +} + +// Singleton instance. +export const searchStore = new SearchStore();