fix(webui): restore import glyphs

- bring the React import page back in line with the legacy emoji/glyph treatment\n- restore album, singles, auto-import, and queue fallback icons\n- keep the visual refresh aligned with the old page while preserving the React port
This commit is contained in:
Antti Kettunen 2026-05-16 18:32:04 +03:00
parent 3fdc815794
commit fe8ae8f290
No known key found for this signature in database
GPG key ID: C6B2A3D250359BD7
6 changed files with 17 additions and 16 deletions

View file

@ -235,15 +235,15 @@ export function getAutoImportStatusMeta(status: string): {
}; };
const icons: Record<string, string> = { const icons: Record<string, string> = {
completed: 'OK', completed: '',
pending_review: '!', pending_review: '',
needs_identification: 'x', needs_identification: '',
failed: 'x', failed: '',
scanning: '~', scanning: '',
matched: 'OK', matched: '',
rejected: 'x', rejected: '',
approved: 'OK', approved: '',
processing: '~', processing: '',
}; };
return { return {

View file

@ -256,7 +256,7 @@ function AlbumImportPanelContent({ viewModel }: { viewModel: AlbumImportViewMode
{group.album} {group.album}
</div> </div>
<div className={styles.importPageAlbumCardArtist} title={group.artist}> <div className={styles.importPageAlbumCardArtist} title={group.artist}>
{group.artist} - {group.file_count} tracks {group.artist} · {group.file_count} tracks
</div> </div>
</div> </div>
</button> </button>
@ -369,7 +369,7 @@ function AlbumCard({
{album.artist} {album.artist}
</div> </div>
<div className={styles.importPageAlbumCardMeta}> <div className={styles.importPageAlbumCardMeta}>
{album.total_tracks || 0} tracks - {album.release_date?.substring(0, 4) || ''} {album.total_tracks || 0} tracks · {album.release_date?.substring(0, 4) || ''}
</div> </div>
</button> </button>
); );
@ -422,7 +422,7 @@ function AlbumMatchPanel({ viewModel }: { viewModel: AlbumImportViewModel }) {
<div className={styles.importPageAlbumHeroTitle}>{albumMatch.album.name}</div> <div className={styles.importPageAlbumHeroTitle}>{albumMatch.album.name}</div>
<div className={styles.importPageAlbumHeroArtist}>{albumMatch.album.artist}</div> <div className={styles.importPageAlbumHeroArtist}>{albumMatch.album.artist}</div>
<div className={styles.importPageAlbumHeroMeta}> <div className={styles.importPageAlbumHeroMeta}>
{albumMatch.album.total_tracks || albumMatch.matches?.length || 0} tracks -{' '} {albumMatch.album.total_tracks || albumMatch.matches?.length || 0} tracks ·{' '}
{albumMatch.album.release_date?.substring(0, 4) || ''} {albumMatch.album.release_date?.substring(0, 4) || ''}
</div> </div>
</div> </div>

View file

@ -417,7 +417,7 @@ function AutoImportResultCard({
onError={fallbackImage} onError={fallbackImage}
/> />
) : ( ) : (
<div className={styles.autoImportCardArtFallback}>Album</div> <div className={styles.autoImportCardArtFallback}>💿</div>
)} )}
</div> </div>
<div className={styles.autoImportCardCenter}> <div className={styles.autoImportCardCenter}>

View file

@ -115,6 +115,7 @@
color: rgba(255, 255, 255, 0.5); color: rgba(255, 255, 255, 0.5);
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
text-decoration: none;
cursor: pointer; cursor: pointer;
transition: all 0.2s; transition: all 0.2s;
margin-bottom: -1px; margin-bottom: -1px;

View file

@ -156,7 +156,7 @@ function ImportQueueItem({ entry }: { entry: ImportQueueEntry }) {
onError={fallbackImage} onError={fallbackImage}
/> />
) : ( ) : (
<div className={`${styles.importPageQueueArt} ${styles.importPageQueueArtEmpty}`}>A</div> <div className={`${styles.importPageQueueArt} ${styles.importPageQueueArtEmpty}`}></div>
)} )}
<div className={styles.importPageQueueInfo}> <div className={styles.importPageQueueInfo}>
<div className={styles.importPageQueueName}>{entry.label}</div> <div className={styles.importPageQueueName}>{entry.label}</div>

View file

@ -214,7 +214,7 @@ export function SinglesImportPanel({
</div> </div>
{manualMatch ? ( {manualMatch ? (
<div className={styles.importPageSingleMatchedInfo}> <div className={styles.importPageSingleMatchedInfo}>
OK {manualMatch.name} - {manualMatch.artist} {manualMatch.name} - {manualMatch.artist}
<button <button
type="button" type="button"
className={styles.importPageSingleMatchedChange} className={styles.importPageSingleMatchedChange}
@ -231,7 +231,7 @@ export function SinglesImportPanel({
className={styles.importPageIdentifyBtn} className={styles.importPageIdentifyBtn}
onClick={() => onOpenSearch(index)} onClick={() => onOpenSearch(index)}
> >
Search Identify 🔍 Identify
</button> </button>
</div> </div>
{openSearchIndex === index ? ( {openSearchIndex === index ? (