redesign import button

Author: Nezreka

webui/index.html

@@ -195,7 +195,9 @@ <h2 class="header-title">System Dashboard</h2>
                                     </div>
                                 </div>
                             </div>
-                            <button class="header-button import-button" id="import-button" onclick="openImportModal()">📥 Import</button>
+                            <button class="import-button" id="import-button" onclick="openImportModal()" title="Import Music from Staging">
+                                <img src="https://cdn-icons-png.flaticon.com/512/8765/8765164.png" alt="Import" class="import-logo">
+                            </button>
                             <button class="header-button watchlist-button" id="watchlist-button">👁️ Watchlist
                                 (0)</button>
                             <button class="header-button wishlist-button" id="wishlist-button">🎵 Wishlist (0)</button>
@@ -3302,6 +3304,7 @@ <h2 class="import-modal-title">Import Music</h2>
                         <div class="import-search-bar">
                             <input type="text" id="import-album-search-input" placeholder="Search for an album..." onkeydown="if(event.key==='Enter')searchImportAlbum()">
                             <button class="import-search-btn" onclick="searchImportAlbum()">Search</button>
+                            <button class="import-clear-btn hidden" id="import-album-clear-btn" onclick="clearImportAlbumSearch()" title="Clear search">✕</button>
                         </div>
                         <div class="import-album-grid" id="import-album-results"></div>
                     </div>

webui/static/script.js

@@ -34568,11 +34568,24 @@ async function searchImportAlbum() {
                 </div>
             </div>
         `).join('');
+        // Show clear button
+        document.getElementById('import-album-clear-btn').classList.remove('hidden');
     } catch (err) {
         grid.innerHTML = `<div style="color:#ef4444;text-align:center;padding:20px;">Error: ${err.message}</div>`;
     }
 }
 
+function clearImportAlbumSearch() {
+    document.getElementById('import-album-search-input').value = '';
+    document.getElementById('import-album-results').innerHTML = '';
+    document.getElementById('import-album-clear-btn').classList.add('hidden');
+    // Re-show suggestions
+    const sugGrid = document.getElementById('import-suggestions-grid');
+    if (sugGrid && sugGrid.children.length > 0) {
+        document.getElementById('import-suggestions-section').classList.remove('hidden');
+    }
+}
+
 async function selectImportAlbum(albumId) {
     // Show match section, hide search
     document.getElementById('import-album-search-section').classList.add('hidden');
@@ -34652,9 +34665,10 @@ function resetImportAlbumSearch() {
     }
     // Refresh suggestions since files may have changed
     loadImportSuggestions();
-    // Clear search results
+    // Clear search results and hide clear button
     document.getElementById('import-album-results').innerHTML = '';
     document.getElementById('import-album-search-input').value = '';
+    document.getElementById('import-album-clear-btn').classList.add('hidden');
 }
 
 async function processImportAlbum() {

webui/static/style.css

@@ -21791,11 +21791,54 @@ body {
 /* ============================= */
 
 .import-button {
-    background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%) !important;
-    color: #fff !important;
+    position: relative;
+    width: 44px;
+    height: 44px;
+    background: linear-gradient(135deg,
+            rgba(124, 58, 237, 0.12) 0%,
+            rgba(99, 39, 196, 0.18) 100%);
+    backdrop-filter: blur(20px) saturate(1.4);
+    -webkit-backdrop-filter: blur(20px) saturate(1.4);
+    border: 1.5px solid rgba(124, 58, 237, 0.25);
+    border-radius: 50%;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    box-shadow:
+        0 4px 16px rgba(124, 58, 237, 0.2),
+        0 2px 8px rgba(0, 0, 0, 0.15),
+        inset 0 1px 0 rgba(255, 255, 255, 0.08);
+    padding: 0;
 }
 .import-button:hover {
-    background: linear-gradient(135deg, #a855f7 0%, #c084fc 100%) !important;
+    background: linear-gradient(135deg,
+            rgba(124, 58, 237, 0.18) 0%,
+            rgba(99, 39, 196, 0.25) 100%);
+    border-color: rgba(124, 58, 237, 0.4);
+    transform: scale(1.05);
+    box-shadow:
+        0 6px 20px rgba(124, 58, 237, 0.3),
+        0 3px 12px rgba(0, 0, 0, 0.2),
+        inset 0 1px 0 rgba(255, 255, 255, 0.12);
+}
+.import-button:active {
+    transform: scale(0.95);
+    box-shadow:
+        0 2px 8px rgba(124, 58, 237, 0.15),
+        inset 0 1px 0 rgba(255, 255, 255, 0.06);
+}
+.import-logo {
+    width: 22px;
+    height: 22px;
+    object-fit: contain;
+    opacity: 0.85;
+    transition: opacity 0.3s ease;
+    filter: invert(1) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
+}
+.import-button:hover .import-logo {
+    opacity: 1;
 }
 
 /* Modal container — matches wishlist/playlist modal vibe */
@@ -21988,6 +22031,29 @@ body {
     transform: translateY(-1px);
     box-shadow: 0 4px 16px rgba(29, 185, 84, 0.3);
 }
+.import-clear-btn {
+    width: 40px;
+    height: 40px;
+    border-radius: 10px;
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    background: rgba(255, 255, 255, 0.06);
+    color: rgba(255, 255, 255, 0.5);
+    font-size: 14px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.import-clear-btn:hover {
+    background: rgba(239, 68, 68, 0.15);
+    border-color: rgba(239, 68, 68, 0.3);
+    color: #ef4444;
+}
+.import-clear-btn.hidden {
+    display: none;
+}
 
 /* Album grid */
 .import-album-grid {