fix(queue): resolve real track covers in queue panel

Queue rows passed albumArtUrl straight to ArtTile, but for tracks that
field is usually empty — the real cover is served per-track from
/tracks/{id}/cover. Apply the same resolution PersistentPlayer uses
(getCoverUrl ?? getTrackCoverUrl) for both the now-playing tile and the
up-next rows.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

src/features/library/LibraryPage.tsx

@@ -5,9 +5,9 @@ import {
   Tabs,
   TabsList,
   TabsContent,
-  SearchField,
   ScrollArea,
   Card,
+  TextField,
 } from '@olly/modern-sk';
 import {
   useGetTracksQuery,
@@ -23,6 +23,7 @@ import { setQueue } from '../../store/slices/queue';
 import type { Track, Album, Artist } from '../../api/types';
 import { getCoverUrl } from '../../api/endpoints/streaming';
 import { formatDuration } from '../../lib/format';
+import { useDebounce } from 'use-debounce';
 
 export function LibraryPage() {
   const { t } = useTranslation();
@@ -30,10 +31,17 @@ export function LibraryPage() {
   const dispatch = useAppDispatch();
   const [tab, setTab] = useState('tracks');
   const [search, setSearch] = useState('');
+  const [debouncedSearch] = useDebounce(search, 300);
 
-  const tracksQuery = useGetTracksQuery(search ? { search } : undefined);
-  const albumsQuery = useGetAlbumsQuery(search ? { search } : undefined);
-  const artistsQuery = useGetArtistsQuery(search ? { search } : undefined);
+  const tracksQuery = useGetTracksQuery(
+    debouncedSearch ? { search } : undefined,
+  );
+  const albumsQuery = useGetAlbumsQuery(
+    debouncedSearch ? { search } : undefined,
+  );
+  const artistsQuery = useGetArtistsQuery(
+    debouncedSearch ? { search } : undefined,
+  );
 
   const handlePlayAll = (tracks: Track[]) => {
     dispatch(
@@ -68,11 +76,10 @@ export function LibraryPage() {
           {t('library.title')}
         </h2>
         <div style={{ flex: 1, maxWidth: '20rem' }}>
-          <SearchField
+          <TextField
             value={search}
             onChange={(e) => setSearch(e.target.value)}
             placeholder={t('library.searchPlaceholder')}
-            icon="⌕"
           />
         </div>
       </div>