feat(web): storage admin, search and catalog pages (M2)
- Storage admin: local folders with a folder picker and NFS sources, connection test, scan and full scan with live progress, enable, disable, delete - path pattern editor with reorder, examples and a preview table that shows which pattern matched and what came from tags; compile errors land under the broken pattern - Library page with counters, scans and unreadable files; search reindex for admins - search box in the top bar: combobox with keyboard navigation, 150 ms debounce, cancelled stale requests, "/" and Ctrl+K, layout fix hint - search page with tabs and paging, artist and album pages, album cards and track lists; unavailable tracks are dimmed Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
mrleo1nidandClaude Opus 5.5 committed
1 parent
c1160cccd3
commit
a685b1b7ca
27 files changed
+2505
-9
No files matched your search
@@ -0,0 +1,217 @@
|
||||
import { unwrap } from '@pipu/core';
|
||||
import { keepPreviousData, useQuery } from '@tanstack/react-query';
|
||||
import { useNavigate } from '@tanstack/react-router';
|
||||
import { useEffect, useId, useRef, useState, type KeyboardEvent } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
import { useSession } from '../app/session';
|
||||
import { Cover } from '../entities/catalog';
|
||||
import { formatDuration } from '../shared/lib/format';
|
||||
import { searchIcon } from '../shared/ui/icons';
|
||||
import { cx, Icon } from '../shared/ui/ui';
|
||||
import s from './SearchBox.module.css';
|
||||
|
||||
const DEBOUNCE_MS = 150;
|
||||
|
||||
type Item = {
|
||||
key: string;
|
||||
group: 'artists' | 'albums' | 'tracks';
|
||||
title: string;
|
||||
subtitle: string;
|
||||
cover: { id: string; cover_url?: string | null; cover_colors?: string[] };
|
||||
round?: boolean;
|
||||
go: () => void;
|
||||
};
|
||||
|
||||
/** Поиск в топбаре: подсказки по мере ввода, Enter — страница поиска или выбранный элемент. */
|
||||
export function SearchBox() {
|
||||
const { t } = useTranslation();
|
||||
const session = useSession();
|
||||
const navigate = useNavigate();
|
||||
const listId = useId();
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
const [q, setQ] = useState('');
|
||||
const [debounced, setDebounced] = useState('');
|
||||
const [open, setOpen] = useState(false);
|
||||
const [active, setActive] = useState(-1);
|
||||
|
||||
useEffect(() => {
|
||||
const id = setTimeout(() => setDebounced(q.trim()), DEBOUNCE_MS);
|
||||
return () => clearTimeout(id);
|
||||
}, [q]);
|
||||
|
||||
// «/» или Ctrl+K — фокус в поиск (если пользователь не печатает в другом поле).
|
||||
useEffect(() => {
|
||||
const onKey = (e: globalThis.KeyboardEvent) => {
|
||||
const target = e.target as HTMLElement;
|
||||
const typing = target.closest('input, textarea, select, [contenteditable="true"]');
|
||||
if ((e.key === '/' && !typing) || (e.key.toLowerCase() === 'k' && (e.ctrlKey || e.metaKey))) {
|
||||
e.preventDefault();
|
||||
inputRef.current?.focus();
|
||||
}
|
||||
};
|
||||
document.addEventListener('keydown', onKey);
|
||||
return () => document.removeEventListener('keydown', onKey);
|
||||
}, []);
|
||||
|
||||
const suggest = useQuery({
|
||||
queryKey: ['suggest', debounced],
|
||||
enabled: debounced !== '',
|
||||
placeholderData: keepPreviousData,
|
||||
// signal отменяет устаревший запрос, когда пользователь печатает дальше.
|
||||
queryFn: async ({ signal }) =>
|
||||
unwrap(await session.client.GET('/api/v1/search/suggest', { params: { query: { q: debounced } }, signal })),
|
||||
staleTime: 30_000,
|
||||
});
|
||||
const data = debounced ? suggest.data : undefined;
|
||||
|
||||
const close = () => {
|
||||
setOpen(false);
|
||||
setActive(-1);
|
||||
};
|
||||
const goSearch = () => {
|
||||
const query = q.trim();
|
||||
if (!query) return;
|
||||
close();
|
||||
inputRef.current?.blur();
|
||||
void navigate({ to: '/search', search: { q: query } });
|
||||
};
|
||||
|
||||
const items: Item[] = [];
|
||||
if (data) {
|
||||
for (const a of data.artists)
|
||||
items.push({
|
||||
key: `ar-${a.id}`,
|
||||
group: 'artists',
|
||||
title: a.name,
|
||||
subtitle: t('search.artist_kind'),
|
||||
cover: { id: a.id },
|
||||
round: true,
|
||||
go: () => void navigate({ to: '/artist/$id', params: { id: a.id } }),
|
||||
});
|
||||
for (const al of data.albums)
|
||||
items.push({
|
||||
key: `al-${al.id}`,
|
||||
group: 'albums',
|
||||
title: al.title,
|
||||
subtitle: [al.artist.name, al.year].filter(Boolean).join(' · '),
|
||||
cover: al,
|
||||
go: () => void navigate({ to: '/album/$id', params: { id: al.id } }),
|
||||
});
|
||||
for (const tr of data.tracks)
|
||||
items.push({
|
||||
key: `tr-${tr.id}`,
|
||||
group: 'tracks',
|
||||
title: tr.title,
|
||||
subtitle: `${tr.artists.map((a) => a.name).join(', ')} · ${formatDuration(tr.duration_ms)}`,
|
||||
cover: tr.album,
|
||||
// Воспроизведение — M3; пока трек открывает свой альбом.
|
||||
go: () => void navigate({ to: '/album/$id', params: { id: tr.album.id } }),
|
||||
});
|
||||
}
|
||||
|
||||
const choose = (i: number) => {
|
||||
const it = items[i];
|
||||
if (!it) return goSearch();
|
||||
close();
|
||||
setQ('');
|
||||
inputRef.current?.blur();
|
||||
it.go();
|
||||
};
|
||||
|
||||
const onKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
|
||||
if (e.key === 'ArrowDown') {
|
||||
e.preventDefault();
|
||||
setOpen(true);
|
||||
setActive((i) => Math.min(items.length - 1, i + 1));
|
||||
} else if (e.key === 'ArrowUp') {
|
||||
e.preventDefault();
|
||||
setActive((i) => Math.max(-1, i - 1));
|
||||
} else if (e.key === 'Enter') {
|
||||
e.preventDefault();
|
||||
choose(active);
|
||||
} else if (e.key === 'Escape') {
|
||||
close();
|
||||
inputRef.current?.blur();
|
||||
}
|
||||
};
|
||||
|
||||
const showList = open && debounced !== '' && data !== undefined;
|
||||
const groups: Item['group'][] = ['artists', 'albums', 'tracks'];
|
||||
const optionId = (i: number) => `${listId}-${i}`;
|
||||
|
||||
return (
|
||||
<div className={s.box}>
|
||||
<Icon src={searchIcon} size={18} className={s.icon} />
|
||||
<input
|
||||
ref={inputRef}
|
||||
type="search"
|
||||
className={s.input}
|
||||
value={q}
|
||||
placeholder={t('search.placeholder')}
|
||||
aria-label={t('search.label')}
|
||||
role="combobox"
|
||||
aria-expanded={showList}
|
||||
aria-controls={listId}
|
||||
aria-autocomplete="list"
|
||||
aria-activedescendant={showList && active >= 0 ? optionId(active) : undefined}
|
||||
onChange={(e) => {
|
||||
setQ(e.target.value);
|
||||
setOpen(true);
|
||||
setActive(-1);
|
||||
}}
|
||||
onFocus={() => setOpen(true)}
|
||||
onBlur={() => setTimeout(close, 120)}
|
||||
onKeyDown={onKeyDown}
|
||||
/>
|
||||
<kbd className={s.kbd} aria-hidden>
|
||||
/
|
||||
</kbd>
|
||||
{showList && (
|
||||
<div className={s.popover}>
|
||||
{data.corrected_query && (
|
||||
<div className={s.corrected}>{t('search.corrected', { query: data.corrected_query })}</div>
|
||||
)}
|
||||
<div id={listId} role="listbox" aria-label={t('search.label')}>
|
||||
{items.length === 0 && <div className={s.nothing}>{t('search.nothing')}</div>}
|
||||
{groups.map((g) => {
|
||||
const groupItems = items.map((it, i) => ({ it, i })).filter(({ it }) => it.group === g);
|
||||
if (groupItems.length === 0) return null;
|
||||
return (
|
||||
<div key={g} role="group" aria-label={t(`search.${g}`)}>
|
||||
<div className={s.groupTitle}>{t(`search.${g}`)}</div>
|
||||
{groupItems.map(({ it, i }) => (
|
||||
<div
|
||||
key={it.key}
|
||||
id={optionId(i)}
|
||||
role="option"
|
||||
aria-selected={i === active}
|
||||
className={cx(s.option, i === active && s.active)}
|
||||
onMouseDown={(e) => e.preventDefault()}
|
||||
onMouseEnter={() => setActive(i)}
|
||||
onClick={() => choose(i)}
|
||||
>
|
||||
<Cover album={it.cover} size={36} round={it.round} />
|
||||
<span className={s.optionText}>
|
||||
<span className={s.optionTitle}>{it.title}</span>
|
||||
<span className={s.optionSub}>{it.subtitle}</span>
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className={s.all}
|
||||
onMouseDown={(e) => e.preventDefault()}
|
||||
onClick={goSearch}
|
||||
>
|
||||
{t('search.show_all')}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user