fix: linting errors and settings structure cleanup

index.html

@@ -5252,48 +5252,12 @@
                                     </button>
                                 </div>
                             </div>
-                            <div id="blocked-content-list" style="display: none">
-                                <div id="blocked-artists-section" style="margin-bottom: 1rem">
-                                    <h4
-                                        style="font-size: 0.9rem; margin-bottom: 0.5rem; color: var(--muted-foreground)"
-                                    >
-                                        Blocked Artists
-                                    </h4>
-                                    <ul id="blocked-artists-list" class="blocked-items-list"></ul>
-                                </div>
-                                <div id="blocked-albums-section" style="margin-bottom: 1rem">
-                                    <h4
-                                        style="font-size: 0.9rem; margin-bottom: 0.5rem; color: var(--muted-foreground)"
-                                    >
-                                        Blocked Albums
-                                    </h4>
-                                    <ul id="blocked-albums-list" class="blocked-items-list"></ul>
-                                </div>
-                                <div id="blocked-tracks-section" style="margin-bottom: 1rem">
-                                    <h4
-                                        style="font-size: 0.9rem; margin-bottom: 0.5rem; color: var(--muted-foreground)"
-                                    >
-                                        Blocked Tracks
-                                    </h4>
-                                    <ul id="blocked-tracks-list" class="blocked-items-list"></ul>
-                                </div>
-                                <div
-                                    id="blocked-empty-message"
-                                    style="
-                                        text-align: center;
-                                        padding: 1rem;
-                                        color: var(--muted-foreground);
-                                        display: none;
-                                    "
-                                >
-                                    No blocked content
-                                </div>
-                            </div>
                         </div>
                     </div>
                 </div>
+            </div>
 
-                <div id="page-about" class="page">
+            <div id="page-about" class="page">
                     <h2 class="section-title" style="text-align: center">About Monochrome</h2>
                     <div class="about-content">
                         <p class="about-description">

js/accounts/auth.js

@@ -31,7 +31,7 @@ export class AuthManager {
             this.user = await auth.get();
             this.updateUI(this.user);
             this.authListeners.forEach((listener) => listener(this.user));
-        } catch (error) {
+        } catch {
             this.user = null;
             this.updateUI(null);
         }

js/app.js

@@ -2983,8 +2983,6 @@ function showCustomizeShortcutsModal() {
     let recordingAction = null;
     let recordingTimeout = null;
 
-    const shortcuts = keyboardShortcuts.getShortcuts();
-
     const formatKey = (key) => {
         if (!key) return 'none';
         const keyMap = {

js/metadata.js

@@ -1385,9 +1385,9 @@ function createStringAtom(type, value, truncateType = true) {
 
 function createUserAtom(namespace, name, value) {
     const encoder = new TextEncoder();
-    const dashBytes = encoder.encode('----'); // User-defined atom type
+    encoder.encode('----'); // User-defined atom type
     const namespaceBytes = encoder.encode(namespace);
-    const meanBytes = encoder.encode('mean'); // Standard 'mean' atom for namespace
+    encoder.encode('mean'); // Standard 'mean' atom for namespace
     const nameBytes = encoder.encode(name);
     const valueBytes = encoder.encode('\x00\x00\x00\x01\x00\x00\x00\x00' + value);
 

js/qobuz-api.js

@@ -331,12 +331,12 @@ export class QobuzAPI {
     }
 
     // Similar/recommendation methods
-    async getSimilarArtists(artistId) {
+    async getSimilarArtists(_artistId) {
         // Qobuz doesn't have a direct similar artists endpoint in this simplified API
         return [];
     }
 
-    async getSimilarAlbums(albumId) {
+    async getSimilarAlbums(_albumId) {
         // Qobuz doesn't have a direct similar albums endpoint in this simplified API
         return [];
     }

js/settings.js

@@ -35,7 +35,6 @@ import {
     musicProviderSettings,
     analyticsSettings,
     modalSettings,
-    keyboardShortcuts,
 } from './storage.js';
 import { audioContextManager, EQ_PRESETS } from './audio-context.js';
 import { getButterchurnPresets } from './visualizers/butterchurn.js';

styles.css

@@ -381,18 +381,6 @@ body {
     width: 100%;
 }
 
-img {
-    max-width: 100%;
-    display: block;
-    background-color: var(--muted);
-    border: none;
-}
-
-a {
-    color: inherit;
-    text-decoration: none;
-}
-
 .text-link {
     color: var(--primary);
     text-decoration: underline;
@@ -499,6 +487,75 @@ kbd {
     margin: var(--space-2);
 }
 
+/* Base Elements */
+a {
+    color: inherit;
+    text-decoration: none;
+    transition: color var(--transition-fast);
+}
+
+svg {
+    display: block;
+    vertical-align: middle;
+}
+
+img {
+    max-width: 100%;
+    display: block;
+    background-color: var(--muted);
+    border: none;
+}
+
+button {
+    font-family: inherit;
+    font-size: inherit;
+    color: inherit;
+    background: none;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+    transition: all var(--transition-fast);
+}
+
+button:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+}
+
+input,
+select,
+textarea {
+    font-family: inherit;
+    font-size: inherit;
+    color: inherit;
+    background: none;
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+    padding: var(--space-2) var(--space-3);
+    outline: none;
+    transition: all var(--transition-fast);
+}
+
+input:focus,
+select:focus,
+textarea:focus {
+    border-color: var(--primary);
+    box-shadow: 0 0 0 2px rgb(var(--highlight-rgb) / 0.2);
+}
+
+span {
+    display: inline-block;
+}
+
+li {
+    list-style: none;
+}
+
+ul {
+    padding: 0;
+    margin: 0;
+}
+
 .m-3 {
     margin: var(--space-3);
 }
@@ -964,23 +1021,6 @@ kbd {
     margin-top: -0.5rem;
 }
 
-.sidebar-nav.bottom {
-    margin: 0;
-    padding: 0;
-}
-
-.sidebar-nav.bottom .nav-item a {
-    padding: 0.5rem 0.75rem;
-    gap: 0.5rem;
-    font-size: 0.8125rem;
-    font-weight: 500;
-}
-
-.sidebar-nav.bottom .nav-item a svg {
-    width: 17px;
-    height: 17px;
-}
-
 .main-content {
     grid-area: main;
     overflow-y: auto;
@@ -1134,6 +1174,23 @@ kbd {
     flex-shrink: 0;
 }
 
+.sidebar-nav.bottom {
+    margin: 0;
+    padding: 0;
+}
+
+.sidebar-nav.bottom .nav-item a {
+    padding: 0.5rem 0.75rem;
+    gap: 0.5rem;
+    font-size: 0.8125rem;
+    font-weight: 500;
+}
+
+.sidebar-nav.bottom .nav-item a svg {
+    width: 17px;
+    height: 17px;
+}
+
 .pinned-items-header {
     font-size: 0.75rem;
     text-transform: uppercase;
@@ -1772,6 +1829,17 @@ input[type='search']::-webkit-search-cancel-button {
     cursor: pointer;
 }
 
+.card-like-btn:hover,
+.card-menu-btn:hover,
+.edit-playlist-btn:hover,
+.delete-playlist-btn:hover {
+    background: rgb(0, 0, 0, 0.7) !important;
+    transform: scale(1.1) rotate(5deg) !important;
+
+    /* Playful rotation */
+    border-color: rgb(255, 255, 255, 0.3) !important;
+}
+
 .card:hover .card-like-btn,
 .card:hover .card-menu-btn,
 .card-like-btn.active,
@@ -1784,17 +1852,6 @@ input[type='search']::-webkit-search-cancel-button {
     /* Slight delay for staggered feel */
 }
 
-.card-like-btn:hover,
-.card-menu-btn:hover,
-.edit-playlist-btn:hover,
-.delete-playlist-btn:hover {
-    background: rgb(0, 0, 0, 0.7) !important;
-    transform: scale(1.1) rotate(5deg) !important;
-
-    /* Playful rotation */
-    border-color: rgb(255, 255, 255, 0.3) !important;
-}
-
 .card-like-btn.active {
     color: #ef4444 !important;
 }
@@ -6878,6 +6935,13 @@ textarea:focus {
     box-shadow: 0 0 0 3px rgb(var(--highlight-rgb), 0.2);
 }
 
+.search-bar input:focus,
+.track-list-search-input:focus {
+    outline: none;
+    border-color: var(--ring);
+    box-shadow: 0 0 0 3px rgb(var(--highlight-rgb) / 0.2);
+}
+
 .modal.active .modal-content {
     animation: pop-in var(--transition-normal) var(--ease-out-back);
     box-shadow: var(--shadow-2xl);