stuff

src/features/library/LibraryPage.tsx

@@ -9,6 +9,7 @@ import {
   Card,
   TextField,
   Callout,
+  SearchField,
 } from '@olly/modern-sk';
 import {
   useGetTracksQuery,
@@ -31,6 +32,7 @@ import type { Track, Album, Artist } from '../../api/types';
 import { getCoverUrl, getAlbumCoverUrl } from '../../api/endpoints/streaming';
 import { formatDuration } from '../../lib/format';
 import { useDebounce } from 'use-debounce';
+import { MagnifyingGlassIcon } from '@phosphor-icons/react';
 
 /** Case-insensitive substring match used for client-side search while offline
  * (the server can't run the query, so we filter the locally-cached library). */
@@ -143,7 +145,8 @@ export function LibraryPage() {
           {t('library.title')}
         </h2>
         <div style={{ flex: 1, maxWidth: '20rem' }}>
-          <TextField
+          <SearchField
+            icon={<MagnifyingGlassIcon />}
             value={search}
             onChange={(e) => setSearch(e.target.value)}
             placeholder={t('library.searchPlaceholder')}