mirror of
https://github.com/Psychotoxical/psysonic.git
synced 2026-07-22 07:15:47 +00:00
feat(search): scoped live search on browse pages (#938)
* feat(artists): scoped live search badge replaces page filter Move Artists browse text search into the header Live Search with a page scope badge (Users icon), field-local undo, and double-click/backspace to clear scope. Block the live-search dropdown while scoped so results only filter the Artists grid; mobile overlay follows the same rules. * fix(artists): plain grid for scoped search fixes broken card layout Route the browse grid through VirtualCardGrid, switch to non-virtual CSS grid when live search filters the catalog, reset scroll on filter changes, and skip content-visibility on plain tiles to avoid blank/black cards. * fix(search): scope badge double-Backspace and single clear control Require two Backspaces on an empty scoped field after prior text input; one Backspace still clears the badge when the field was never filled. Move live-search clear/advanced controls inside the field pill, drop the extra outer clear button, and use type=text to avoid native search clears. * fix(search): drop duplicate outer live-search clear button Keep the native in-field clear on type=search and the original pill layout; remove only the extra × control outside the search border. Reset dropdown state when the query is cleared via the native control. * refactor(search): generic scoped browse query helper, drop dead code Rename artistsBrowseSearchQuery to scopedBrowseSearchQuery with an expectedScope argument; wire Artists via useScopedBrowseSearchQuery. Remove unused liveSearchScoped dropdown helper (scoped mode blocks it). * feat(search): ghost scope badge and single-click badge remove After clearing the artists scope on /artists, show a faded ghost chip to restore page-only search while keeping the global search placeholder. Active badge removes on one click; tooltips and styles updated. * feat(search): scoped live search for All Albums and New Releases Wire albums and newReleases scope badges with debounced album title search (local index title-only FTS + filtered search3). Plain grid, scroll reset, and session query restore on album grid browse pages. * fix(browse): preserve scroll restore after album/artist detail back Only reset in-page scroll when filter resetKey changes, not when isScrollRestorePending clears after session restore. * feat(search): scoped live search for Tracks browse Wire /tracks to header live search with wide title/artist/album FTS, hide hero and discovery rails while search is active, and remove the inline search field from the browse list. * fix(search): clear header query when leaving scoped browse pages Prevent global live search from firing on album/detail routes after a scoped browse query; browse session stashes still restore on back. * fix(tracks): restore scroll after back from detail during scoped search Hold stashed song results across fetchSongPage churn, defer leave-stash teardown past AppShell scroll reset, restore tracks scroll after the list is ready, and save scroll snapshot when opening artist from song context menu. * fix(tracks): hide discovery headings during scoped search Hide the page subtitle and "Browse all tracks" section title when tracks search is active, matching hero/rails chrome behavior. * feat(search): scoped live search for Composers browse Wire /composers to header live search with composers scope badge, session stash, scroll restore, and plain grid/list during text filter. Remove the in-page filter input; add i18n and navigation helpers. * docs: CHANGELOG and credits for scoped browse live search (PR #938)
This commit is contained in:
cucadmuh
GitHub
@@ -0,0 +1,156 @@
|
||||
import type { KeyboardEvent, MouseEvent } from 'react';
|
||||
import { describe, expect, it, vi } from 'vitest';
|
||||
import {
|
||||
createLiveSearchScopeBackspaceState,
|
||||
handleLiveSearchScopeBackspace,
|
||||
handleLiveSearchScopeBadgeClick,
|
||||
handleLiveSearchScopeGhostClick,
|
||||
handleLiveSearchScopeUndo,
|
||||
isLiveSearchDropdownBlocked,
|
||||
liveSearchScopePlaceholderKey,
|
||||
noteLiveSearchScopeQueryInput,
|
||||
resetLiveSearchScopeBackspaceState,
|
||||
resolveLiveSearchScopeGhost,
|
||||
} from './liveSearchScopeUi';
|
||||
|
||||
function keyEvent(
|
||||
key: string,
|
||||
mods: Partial<KeyboardEvent<HTMLInputElement>> & { code?: string } = {},
|
||||
) {
|
||||
const { code, ...rest } = mods;
|
||||
return {
|
||||
key,
|
||||
code: code ?? key,
|
||||
ctrlKey: false,
|
||||
metaKey: false,
|
||||
shiftKey: false,
|
||||
preventDefault: vi.fn(),
|
||||
...rest,
|
||||
} as unknown as KeyboardEvent<HTMLInputElement>;
|
||||
}
|
||||
|
||||
describe('resolveLiveSearchScopeGhost', () => {
|
||||
it('offers artists ghost on artists browse when scope was cleared', () => {
|
||||
expect(resolveLiveSearchScopeGhost('/artists', null)).toBe('artists');
|
||||
expect(resolveLiveSearchScopeGhost('/artists', 'artists')).toBeNull();
|
||||
expect(resolveLiveSearchScopeGhost('/albums', null)).toBe('albums');
|
||||
expect(resolveLiveSearchScopeGhost('/albums', 'albums')).toBeNull();
|
||||
expect(resolveLiveSearchScopeGhost('/new-releases', null)).toBe('newReleases');
|
||||
expect(resolveLiveSearchScopeGhost('/new-releases', 'newReleases')).toBeNull();
|
||||
expect(resolveLiveSearchScopeGhost('/tracks', null)).toBe('tracks');
|
||||
expect(resolveLiveSearchScopeGhost('/tracks', 'tracks')).toBeNull();
|
||||
expect(resolveLiveSearchScopeGhost('/composers', null)).toBe('composers');
|
||||
expect(resolveLiveSearchScopeGhost('/composers', 'composers')).toBeNull();
|
||||
});
|
||||
});
|
||||
|
||||
describe('handleLiveSearchScopeBadgeClick', () => {
|
||||
it('clears scope with undo', () => {
|
||||
const clearScope = vi.fn();
|
||||
const e = { preventDefault: vi.fn(), stopPropagation: vi.fn() } as unknown as MouseEvent<HTMLElement>;
|
||||
handleLiveSearchScopeBadgeClick(e, clearScope);
|
||||
expect(clearScope).toHaveBeenCalledWith({ recordUndo: true });
|
||||
});
|
||||
});
|
||||
|
||||
describe('handleLiveSearchScopeGhostClick', () => {
|
||||
it('restores scope with undo', () => {
|
||||
const setScope = vi.fn();
|
||||
const e = { preventDefault: vi.fn(), stopPropagation: vi.fn() } as unknown as MouseEvent<HTMLElement>;
|
||||
handleLiveSearchScopeGhostClick(e, 'artists', setScope);
|
||||
expect(setScope).toHaveBeenCalledWith('artists', { recordUndo: true });
|
||||
});
|
||||
});
|
||||
|
||||
describe('handleLiveSearchScopeBackspace', () => {
|
||||
it('clears scope on first Backspace when the field was never filled', () => {
|
||||
const clearScope = vi.fn();
|
||||
const state = createLiveSearchScopeBackspaceState();
|
||||
const e = keyEvent('Backspace');
|
||||
expect(handleLiveSearchScopeBackspace(e, '', 'artists', clearScope, state)).toBe(true);
|
||||
expect(clearScope).toHaveBeenCalledWith({ recordUndo: true });
|
||||
});
|
||||
|
||||
it('requires two Backspaces on empty after prior input', () => {
|
||||
const clearScope = vi.fn();
|
||||
const state = createLiveSearchScopeBackspaceState();
|
||||
noteLiveSearchScopeQueryInput(state, 'ab');
|
||||
|
||||
const first = keyEvent('Backspace');
|
||||
expect(handleLiveSearchScopeBackspace(first, '', 'artists', clearScope, state)).toBe(true);
|
||||
expect(clearScope).not.toHaveBeenCalled();
|
||||
|
||||
const second = keyEvent('Backspace');
|
||||
expect(handleLiveSearchScopeBackspace(second, '', 'artists', clearScope, state)).toBe(true);
|
||||
expect(clearScope).toHaveBeenCalledWith({ recordUndo: true });
|
||||
});
|
||||
|
||||
it('does not clear scope while text remains', () => {
|
||||
const clearScope = vi.fn();
|
||||
const state = createLiveSearchScopeBackspaceState();
|
||||
expect(handleLiveSearchScopeBackspace(keyEvent('Backspace'), 'a', 'artists', clearScope, state)).toBe(false);
|
||||
expect(clearScope).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('resets empty streak when deleting characters', () => {
|
||||
const clearScope = vi.fn();
|
||||
const state = createLiveSearchScopeBackspaceState();
|
||||
noteLiveSearchScopeQueryInput(state, 'a');
|
||||
handleLiveSearchScopeBackspace(keyEvent('Backspace'), '', 'artists', clearScope, state);
|
||||
expect(state.emptyBackspaceStreak).toBe(1);
|
||||
handleLiveSearchScopeBackspace(keyEvent('Backspace'), 'x', 'artists', clearScope, state);
|
||||
expect(state.emptyBackspaceStreak).toBe(0);
|
||||
});
|
||||
});
|
||||
|
||||
describe('resetLiveSearchScopeBackspaceState', () => {
|
||||
it('clears hadQueryInput and streak', () => {
|
||||
const state = createLiveSearchScopeBackspaceState();
|
||||
noteLiveSearchScopeQueryInput(state, 'x');
|
||||
state.emptyBackspaceStreak = 1;
|
||||
resetLiveSearchScopeBackspaceState(state);
|
||||
expect(state.hadQueryInput).toBe(false);
|
||||
expect(state.emptyBackspaceStreak).toBe(0);
|
||||
});
|
||||
});
|
||||
|
||||
describe('isLiveSearchDropdownBlocked', () => {
|
||||
it('blocks dropdown when a browse scope badge is active', () => {
|
||||
expect(isLiveSearchDropdownBlocked('artists')).toBe(true);
|
||||
expect(isLiveSearchDropdownBlocked(null)).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
describe('liveSearchScopePlaceholderKey', () => {
|
||||
it('uses scoped placeholders when a browse scope badge is active', () => {
|
||||
expect(liveSearchScopePlaceholderKey('artists')).toBe('search.scopeArtistsPlaceholder');
|
||||
expect(liveSearchScopePlaceholderKey('albums')).toBe('search.scopeAlbumsPlaceholder');
|
||||
expect(liveSearchScopePlaceholderKey('newReleases')).toBe('search.scopeNewReleasesPlaceholder');
|
||||
expect(liveSearchScopePlaceholderKey('tracks')).toBe('search.scopeTracksPlaceholder');
|
||||
expect(liveSearchScopePlaceholderKey('composers')).toBe('search.scopeComposersPlaceholder');
|
||||
expect(liveSearchScopePlaceholderKey(null)).toBe('search.placeholder');
|
||||
});
|
||||
});
|
||||
|
||||
describe('handleLiveSearchScopeUndo', () => {
|
||||
it('calls undo on Ctrl+Z (English layout)', () => {
|
||||
const undo = vi.fn(() => true);
|
||||
const e = keyEvent('z', { ctrlKey: true, code: 'KeyZ' });
|
||||
expect(handleLiveSearchScopeUndo(e, undo)).toBe(true);
|
||||
expect(e.preventDefault).toHaveBeenCalled();
|
||||
expect(undo).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('calls undo on Ctrl+Z with non-Latin key label (e.g. Russian Я)', () => {
|
||||
const undo = vi.fn(() => true);
|
||||
const e = keyEvent('я', { ctrlKey: true, code: 'KeyZ' });
|
||||
expect(handleLiveSearchScopeUndo(e, undo)).toBe(true);
|
||||
expect(undo).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('ignores plain z', () => {
|
||||
const undo = vi.fn();
|
||||
expect(handleLiveSearchScopeUndo(keyEvent('z'), undo)).toBe(false);
|
||||
expect(undo).not.toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,237 @@
|
||||
import type { KeyboardEvent, MouseEvent } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { ALL_NAV_ITEMS } from '../../config/navItems';
|
||||
import type { LiveSearchScope } from '../../store/liveSearchScopeStore';
|
||||
import { isAlbumsBrowsePath, isNewReleasesBrowsePath } from '../../store/albumBrowseSessionStore';
|
||||
import { isTracksBrowsePath } from '../../store/advancedSearchSessionStore';
|
||||
import { isArtistsBrowsePath } from '../../store/artistBrowseSessionStore';
|
||||
import { isComposersBrowsePath } from '../../store/composerBrowseSessionStore';
|
||||
|
||||
const SCOPE_NAV_ITEM: Record<LiveSearchScope, keyof typeof ALL_NAV_ITEMS> = {
|
||||
artists: 'artists',
|
||||
albums: 'allAlbums',
|
||||
newReleases: 'newReleases',
|
||||
tracks: 'tracks',
|
||||
composers: 'composers',
|
||||
};
|
||||
|
||||
/** Scope to restore when on a browse route but the badge was cleared (global search mode). */
|
||||
export function resolveLiveSearchScopeGhost(
|
||||
pathname: string,
|
||||
activeScope: LiveSearchScope | null,
|
||||
): LiveSearchScope | null {
|
||||
if (activeScope != null) return null;
|
||||
if (isArtistsBrowsePath(pathname)) return 'artists';
|
||||
if (isAlbumsBrowsePath(pathname)) return 'albums';
|
||||
if (isNewReleasesBrowsePath(pathname)) return 'newReleases';
|
||||
if (isTracksBrowsePath(pathname)) return 'tracks';
|
||||
if (isComposersBrowsePath(pathname)) return 'composers';
|
||||
return null;
|
||||
}
|
||||
|
||||
export function liveSearchScopePlaceholderKey(scope: LiveSearchScope | null): string {
|
||||
switch (scope) {
|
||||
case 'artists':
|
||||
return 'search.scopeArtistsPlaceholder';
|
||||
case 'albums':
|
||||
return 'search.scopeAlbumsPlaceholder';
|
||||
case 'newReleases':
|
||||
return 'search.scopeNewReleasesPlaceholder';
|
||||
case 'tracks':
|
||||
return 'search.scopeTracksPlaceholder';
|
||||
case 'composers':
|
||||
return 'search.scopeComposersPlaceholder';
|
||||
default:
|
||||
return 'search.placeholder';
|
||||
}
|
||||
}
|
||||
|
||||
/** Scoped browse mode filters the page only — no live-search dropdown. */
|
||||
export function isLiveSearchDropdownBlocked(scope: LiveSearchScope | null): boolean {
|
||||
return scope != null;
|
||||
}
|
||||
|
||||
export function liveSearchScopeBadgeTooltipKey(scope: LiveSearchScope): string {
|
||||
switch (scope) {
|
||||
case 'artists':
|
||||
return 'search.scopeArtistsBadgeTooltip';
|
||||
case 'albums':
|
||||
return 'search.scopeAlbumsBadgeTooltip';
|
||||
case 'newReleases':
|
||||
return 'search.scopeNewReleasesBadgeTooltip';
|
||||
case 'tracks':
|
||||
return 'search.scopeTracksBadgeTooltip';
|
||||
case 'composers':
|
||||
return 'search.scopeComposersBadgeTooltip';
|
||||
default:
|
||||
return 'search.scopeArtistsBadgeTooltip';
|
||||
}
|
||||
}
|
||||
|
||||
export function liveSearchScopeGhostTooltipKey(scope: LiveSearchScope): string {
|
||||
switch (scope) {
|
||||
case 'artists':
|
||||
return 'search.scopeArtistsGhostTooltip';
|
||||
case 'albums':
|
||||
return 'search.scopeAlbumsGhostTooltip';
|
||||
case 'newReleases':
|
||||
return 'search.scopeNewReleasesGhostTooltip';
|
||||
case 'tracks':
|
||||
return 'search.scopeTracksGhostTooltip';
|
||||
case 'composers':
|
||||
return 'search.scopeComposersGhostTooltip';
|
||||
default:
|
||||
return 'search.scopeArtistsGhostTooltip';
|
||||
}
|
||||
}
|
||||
|
||||
type LiveSearchScopeIconProps = {
|
||||
scope: LiveSearchScope;
|
||||
size?: number;
|
||||
};
|
||||
|
||||
/** Sidebar nav icon for the scoped browse page (e.g. Users for Artists). */
|
||||
export function LiveSearchScopeIcon({ scope, size = 14 }: LiveSearchScopeIconProps) {
|
||||
const Icon = ALL_NAV_ITEMS[SCOPE_NAV_ITEM[scope]].icon;
|
||||
return <Icon size={size} aria-hidden />;
|
||||
}
|
||||
|
||||
/** Tracks Backspace-on-empty badge removal (double after prior text input). */
|
||||
export type LiveSearchScopeBackspaceState = {
|
||||
hadQueryInput: boolean;
|
||||
emptyBackspaceStreak: number;
|
||||
};
|
||||
|
||||
export function createLiveSearchScopeBackspaceState(): LiveSearchScopeBackspaceState {
|
||||
return { hadQueryInput: false, emptyBackspaceStreak: 0 };
|
||||
}
|
||||
|
||||
export function resetLiveSearchScopeBackspaceState(state: LiveSearchScopeBackspaceState): void {
|
||||
state.hadQueryInput = false;
|
||||
state.emptyBackspaceStreak = 0;
|
||||
}
|
||||
|
||||
/** Call when the scoped field query changes (typing, paste, clear button, undo). */
|
||||
export function noteLiveSearchScopeQueryInput(
|
||||
state: LiveSearchScopeBackspaceState,
|
||||
query: string,
|
||||
): void {
|
||||
if (query !== '') state.hadQueryInput = true;
|
||||
}
|
||||
|
||||
/**
|
||||
* Backspace on an empty scoped field removes the badge.
|
||||
* After the user typed text (even if cleared), two consecutive Backspaces on empty are required.
|
||||
*/
|
||||
export function handleLiveSearchScopeBackspace(
|
||||
e: KeyboardEvent<HTMLInputElement>,
|
||||
query: string,
|
||||
scope: LiveSearchScope | null,
|
||||
clearScope: (options?: { recordUndo?: boolean }) => void,
|
||||
state: LiveSearchScopeBackspaceState,
|
||||
): boolean {
|
||||
if (e.key !== 'Backspace' || !scope) return false;
|
||||
|
||||
if (query !== '') {
|
||||
state.emptyBackspaceStreak = 0;
|
||||
return false;
|
||||
}
|
||||
|
||||
e.preventDefault();
|
||||
|
||||
if (!state.hadQueryInput) {
|
||||
clearScope({ recordUndo: true });
|
||||
resetLiveSearchScopeBackspaceState(state);
|
||||
return true;
|
||||
}
|
||||
|
||||
state.emptyBackspaceStreak += 1;
|
||||
if (state.emptyBackspaceStreak >= 2) {
|
||||
clearScope({ recordUndo: true });
|
||||
resetLiveSearchScopeBackspaceState(state);
|
||||
return true;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
/** Single click removes the scope badge. */
|
||||
export function handleLiveSearchScopeBadgeClick(
|
||||
e: MouseEvent<HTMLElement>,
|
||||
clearScope: (options?: { recordUndo?: boolean }) => void,
|
||||
): void {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
clearScope({ recordUndo: true });
|
||||
}
|
||||
|
||||
/** Single click restores scope after the user cleared the badge on this browse route. */
|
||||
export function handleLiveSearchScopeGhostClick(
|
||||
e: MouseEvent<HTMLElement>,
|
||||
scope: LiveSearchScope,
|
||||
setScope: (scope: LiveSearchScope, options?: { recordUndo?: boolean }) => void,
|
||||
): void {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
setScope(scope, { recordUndo: true });
|
||||
}
|
||||
|
||||
type LiveSearchScopeBadgeProps = {
|
||||
scope: LiveSearchScope;
|
||||
className: string;
|
||||
clearScope: (options?: { recordUndo?: boolean }) => void;
|
||||
};
|
||||
|
||||
export function LiveSearchScopeBadge({ scope, className, clearScope }: LiveSearchScopeBadgeProps) {
|
||||
const { t } = useTranslation();
|
||||
const tooltip = t(liveSearchScopeBadgeTooltipKey(scope));
|
||||
return (
|
||||
<span
|
||||
className={className}
|
||||
role="button"
|
||||
tabIndex={-1}
|
||||
data-tooltip={tooltip}
|
||||
data-tooltip-pos="bottom"
|
||||
aria-label={tooltip}
|
||||
onMouseDown={(e) => e.preventDefault()}
|
||||
onClick={(e) => handleLiveSearchScopeBadgeClick(e, clearScope)}
|
||||
>
|
||||
<LiveSearchScopeIcon scope={scope} size={14} />
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
type LiveSearchScopeGhostBadgeProps = {
|
||||
scope: LiveSearchScope;
|
||||
className: string;
|
||||
setScope: (scope: LiveSearchScope, options?: { recordUndo?: boolean }) => void;
|
||||
};
|
||||
|
||||
export function LiveSearchScopeGhostBadge({ scope, className, setScope }: LiveSearchScopeGhostBadgeProps) {
|
||||
const { t } = useTranslation();
|
||||
const tooltip = t(liveSearchScopeGhostTooltipKey(scope));
|
||||
return (
|
||||
<span
|
||||
className={className}
|
||||
role="button"
|
||||
tabIndex={-1}
|
||||
data-tooltip={tooltip}
|
||||
data-tooltip-pos="bottom"
|
||||
aria-label={tooltip}
|
||||
onMouseDown={(e) => e.preventDefault()}
|
||||
onClick={(e) => handleLiveSearchScopeGhostClick(e, scope, setScope)}
|
||||
>
|
||||
<LiveSearchScopeIcon scope={scope} size={14} />
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
/** Field-local undo (Ctrl/Cmd+Z) for live search query and scope badge. */
|
||||
export function handleLiveSearchScopeUndo(
|
||||
e: KeyboardEvent<HTMLInputElement>,
|
||||
undo: () => boolean,
|
||||
): boolean {
|
||||
const isUndoKey = e.code === 'KeyZ' || e.key.toLowerCase() === 'z';
|
||||
if (!isUndoKey || !(e.ctrlKey || e.metaKey) || e.shiftKey) return false;
|
||||
e.preventDefault();
|
||||
return undo();
|
||||
}
|
||||
Reference in New Issue
Block a user