From fe8ae8f2900f8b212f715ae9621f1b9fd8638568 Mon Sep 17 00:00:00 2001
From: Antti Kettunen <antti-kettunen@hotmail.com>
Date: Sat, 16 May 2026 18:32:04 +0300
Subject: [PATCH] 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
---
 webui/src/routes/import/-import.helpers.ts     | 18 +++++++++---------
 .../src/routes/import/-ui/album-import-tab.tsx |  6 +++---
 .../src/routes/import/-ui/auto-import-tab.tsx  |  2 +-
 .../routes/import/-ui/import-page.module.css   |  1 +
 webui/src/routes/import/-ui/import-page.tsx    |  2 +-
 .../routes/import/-ui/singles-import-tab.tsx   |  4 ++--
 6 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/webui/src/routes/import/-import.helpers.ts b/webui/src/routes/import/-import.helpers.ts
index 0805b5d9..d6f8d288 100644
--- a/webui/src/routes/import/-import.helpers.ts
+++ b/webui/src/routes/import/-import.helpers.ts
@@ -235,15 +235,15 @@ export function getAutoImportStatusMeta(status: string): {
   };
 
   const icons: Record<string, string> = {
-    completed: 'OK',
-    pending_review: '!',
-    needs_identification: 'x',
-    failed: 'x',
-    scanning: '~',
-    matched: 'OK',
-    rejected: 'x',
-    approved: 'OK',
-    processing: '~',
+    completed: '✓',
+    pending_review: '⚠',
+    needs_identification: '✗',
+    failed: '✗',
+    scanning: '⌛',
+    matched: '✓',
+    rejected: '✕',
+    approved: '✓',
+    processing: '⧗',
   };
 
   return {
diff --git a/webui/src/routes/import/-ui/album-import-tab.tsx b/webui/src/routes/import/-ui/album-import-tab.tsx
index aa07185b..530fb59c 100644
--- a/webui/src/routes/import/-ui/album-import-tab.tsx
+++ b/webui/src/routes/import/-ui/album-import-tab.tsx
@@ -256,7 +256,7 @@ function AlbumImportPanelContent({ viewModel }: { viewModel: AlbumImportViewMode
                           {group.album}
                         </div>
                         <div className={styles.importPageAlbumCardArtist} title={group.artist}>
-                          {group.artist} - {group.file_count} tracks
+                          {group.artist} · {group.file_count} tracks
                         </div>
                       </div>
                     </button>
@@ -369,7 +369,7 @@ function AlbumCard({
         {album.artist}
       </div>
       <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>
     </button>
   );
@@ -422,7 +422,7 @@ function AlbumMatchPanel({ viewModel }: { viewModel: AlbumImportViewModel }) {
           <div className={styles.importPageAlbumHeroTitle}>{albumMatch.album.name}</div>
           <div className={styles.importPageAlbumHeroArtist}>{albumMatch.album.artist}</div>
           <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) || ''}
           </div>
         </div>
diff --git a/webui/src/routes/import/-ui/auto-import-tab.tsx b/webui/src/routes/import/-ui/auto-import-tab.tsx
index c8ac1075..62b94c84 100644
--- a/webui/src/routes/import/-ui/auto-import-tab.tsx
+++ b/webui/src/routes/import/-ui/auto-import-tab.tsx
@@ -417,7 +417,7 @@ function AutoImportResultCard({
               onError={fallbackImage}
             />
           ) : (
-            <div className={styles.autoImportCardArtFallback}>Album</div>
+            <div className={styles.autoImportCardArtFallback}>💿</div>
           )}
         </div>
         <div className={styles.autoImportCardCenter}>
diff --git a/webui/src/routes/import/-ui/import-page.module.css b/webui/src/routes/import/-ui/import-page.module.css
index 209d6d52..eb49b5ae 100644
--- a/webui/src/routes/import/-ui/import-page.module.css
+++ b/webui/src/routes/import/-ui/import-page.module.css
@@ -115,6 +115,7 @@
   color: rgba(255, 255, 255, 0.5);
   font-size: 14px;
   font-weight: 500;
+  text-decoration: none;
   cursor: pointer;
   transition: all 0.2s;
   margin-bottom: -1px;
diff --git a/webui/src/routes/import/-ui/import-page.tsx b/webui/src/routes/import/-ui/import-page.tsx
index 9180903e..05a22599 100644
--- a/webui/src/routes/import/-ui/import-page.tsx
+++ b/webui/src/routes/import/-ui/import-page.tsx
@@ -156,7 +156,7 @@ function ImportQueueItem({ entry }: { entry: ImportQueueEntry }) {
           onError={fallbackImage}
         />
       ) : (
-        <div className={`${styles.importPageQueueArt} ${styles.importPageQueueArtEmpty}`}>A</div>
+        <div className={`${styles.importPageQueueArt} ${styles.importPageQueueArtEmpty}`}>♪</div>
       )}
       <div className={styles.importPageQueueInfo}>
         <div className={styles.importPageQueueName}>{entry.label}</div>
diff --git a/webui/src/routes/import/-ui/singles-import-tab.tsx b/webui/src/routes/import/-ui/singles-import-tab.tsx
index 2c3f5a53..b6c3c40d 100644
--- a/webui/src/routes/import/-ui/singles-import-tab.tsx
+++ b/webui/src/routes/import/-ui/singles-import-tab.tsx
@@ -214,7 +214,7 @@ export function SinglesImportPanel({
                   </div>
                   {manualMatch ? (
                     <div className={styles.importPageSingleMatchedInfo}>
-                      OK {manualMatch.name} - {manualMatch.artist}
+                      ✓ {manualMatch.name} - {manualMatch.artist}
                       <button
                         type="button"
                         className={styles.importPageSingleMatchedChange}
@@ -231,7 +231,7 @@ export function SinglesImportPanel({
                     className={styles.importPageIdentifyBtn}
                     onClick={() => onOpenSearch(index)}
                   >
-                    Search Identify
+                    🔍 Identify
                   </button>
                 </div>
                 {openSearchIndex === index ? (