cc

js/app.js

@@ -1,4 +1,3 @@
-//js/app.js
 import { LosslessAPI } from './api.js';
 import { apiSettings } from './storage.js';
 import { UIRenderer } from './ui.js';
@@ -6,7 +5,7 @@ import { Player } from './player.js';
 import { 
     QUALITY, REPEAT_MODE, SVG_PLAY, SVG_PAUSE, 
     SVG_VOLUME, SVG_MUTE, formatTime, trackDataStore,
-    buildTrackFilename, RATE_LIMIT_ERROR_MESSAGE
+    buildTrackFilename, RATE_LIMIT_ERROR_MESSAGE, debounce
 } from './utils.js';
 
 document.addEventListener('DOMContentLoaded', () => {
@@ -95,7 +94,7 @@ document.addEventListener('DOMContentLoaded', () => {
                 <div class="track-item ${isPlaying ? 'playing' : ''}" data-queue-index="${index}">
                     <div class="track-number">${index + 1}</div>
                     <div class="track-item-info">
-                        <img src="${api.getCoverUrl(track.album?.cover, '40')}" 
+                        <img src="${api.getCoverUrl(track.album?.cover, '80')}" 
                              class="track-item-cover" loading="lazy">
                         <div class="track-item-details">
                             <div class="title">${track.title}</div>
@@ -160,12 +159,12 @@ document.addEventListener('DOMContentLoaded', () => {
             try {
                 const tempEl = document.createElement('div');
                 tempEl.textContent = `Downloading: ${contextTrack.title}...`;
-                tempEl.style.cssText = 'position:fixed;bottom:20px;right:20px;background:var(--card);padding:1rem;border-radius:var(--radius);border:1px solid var(--border);z-index:9999;';
+                tempEl.style.cssText = 'position:fixed;bottom:100px;right:20px;background:var(--card);padding:1rem 1.5rem;border-radius:var(--radius);border:1px solid var(--border);z-index:9999;box-shadow:0 4px 12px rgba(0,0,0,0.5);';
                 document.body.appendChild(tempEl);
                 
                 await api.downloadTrack(contextTrack.id, QUALITY, filename);
                 
-                tempEl.textContent = `Downloaded: ${contextTrack.title}`;
+                tempEl.textContent = `✓ Downloaded: ${contextTrack.title}`;
                 setTimeout(() => tempEl.remove(), 3000);
             } catch (error) {
                 const errorMsg = error.message === RATE_LIMIT_ERROR_MESSAGE 
@@ -178,6 +177,19 @@ document.addEventListener('DOMContentLoaded', () => {
         contextMenu.style.display = 'none';
     });
 
+    const performSearch = debounce((query) => {
+        if (query) {
+            window.location.hash = `#search/${encodeURIComponent(query)}`;
+        }
+    }, 300);
+
+    searchInput.addEventListener('input', (e) => {
+        const query = e.target.value.trim();
+        if (query.length > 2) {
+            performSearch(query);
+        }
+    });
+
     searchForm.addEventListener('submit', e => {
         e.preventDefault();
         const query = searchInput.value.trim();
@@ -219,18 +231,41 @@ document.addEventListener('DOMContentLoaded', () => {
         playPauseBtn.innerHTML = SVG_PLAY;
     });
 
+    let isSeeking = false;
+    let wasPlaying = false;
+
     const seek = (bar, fill, event, setter) => {
         const rect = bar.getBoundingClientRect();
         const position = Math.max(0, Math.min(1, (event.clientX - rect.left) / rect.width));
         setter(position);
     };
 
+    progressBar.addEventListener('mousedown', () => {
+        isSeeking = true;
+        wasPlaying = !audioPlayer.paused;
+        if (wasPlaying) audioPlayer.pause();
+    });
+
+    document.addEventListener('mouseup', (e) => {
+        if (isSeeking) {
+            seek(progressBar, progressFill, e, position => {
+                if (!isNaN(audioPlayer.duration)) {
+                    audioPlayer.currentTime = position * audioPlayer.duration;
+                    if (wasPlaying) audioPlayer.play();
+                }
+            });
+            isSeeking = false;
+        }
+    });
+
     progressBar.addEventListener('click', e => {
+        if (!isSeeking) {
             seek(progressBar, progressFill, e, position => {
                 if (!isNaN(audioPlayer.duration)) {
                     audioPlayer.currentTime = position * audioPlayer.duration;
                 }
             });
+        }
     });
 
     volumeBar.addEventListener('click', e => {

js/player.js

@@ -1,4 +1,3 @@
-//js/player.js
 import { REPEAT_MODE, SVG_PLAY, SVG_PAUSE, formatTime } from './utils.js';
 
 export class Player {
@@ -12,12 +11,61 @@ export class Player {
         this.currentQueueIndex = -1;
         this.shuffleActive = false;
         this.repeatMode = REPEAT_MODE.OFF;
+        this.preloadCache = new Map();
+        this.preloadAbortController = null;
     }
 
     setQuality(quality) {
         this.quality = quality;
     }
 
+    async preloadNextTracks() {
+        if (this.preloadAbortController) {
+            this.preloadAbortController.abort();
+        }
+        
+        this.preloadAbortController = new AbortController();
+        const currentQueue = this.shuffleActive ? this.shuffledQueue : this.queue;
+        const tracksToPreload = [];
+        
+        for (let i = 1; i <= 2; i++) {
+            const nextIndex = this.currentQueueIndex + i;
+            if (nextIndex < currentQueue.length) {
+                tracksToPreload.push({ track: currentQueue[nextIndex], index: nextIndex });
+            }
+        }
+        
+        for (const { track, index } of tracksToPreload) {
+            if (this.preloadCache.has(track.id)) continue;
+            
+            try {
+                const streamUrl = await this.api.getStreamUrl(track.id, this.quality);
+                
+                if (this.preloadAbortController.signal.aborted) break;
+                
+                fetch(streamUrl, {
+                    signal: this.preloadAbortController.signal,
+                    method: 'GET',
+                    mode: 'cors',
+                    cache: 'default'
+                }).then(response => {
+                    if (response.ok) {
+                        this.preloadCache.set(track.id, streamUrl);
+                    }
+                }).catch(err => {
+                    if (err.name !== 'AbortError') {
+                        console.debug('Preload failed for:', track.title);
+                    }
+                });
+                
+            } catch (error) {
+                if (error.name !== 'AbortError') {
+                    console.debug('Failed to get stream URL for preload:', track.title);
+                }
+            }
+        }
+    }
+
     async playTrackFromQueue() {
         const currentQueue = this.shuffleActive ? this.shuffledQueue : this.queue;
         if (this.currentQueueIndex < 0 || this.currentQueueIndex >= currentQueue.length) {
@@ -27,7 +75,7 @@ export class Player {
         const track = currentQueue[this.currentQueueIndex];
         
         document.querySelector('.now-playing-bar .cover').src = 
-            this.api.getCoverUrl(track.album?.cover, '1280');
+            this.api.getCoverUrl(track.album?.cover, '160');
         document.querySelector('.now-playing-bar .title').textContent = track.title;
         document.querySelector('.now-playing-bar .artist').textContent = track.artist?.name || 'Unknown Artist';
         document.title = `${track.title} • ${track.artist?.name || 'Unknown'}`;
@@ -36,9 +84,19 @@ export class Player {
         this.updateMediaSession(track);
 
         try {
-            const streamUrl = await this.api.getStreamUrl(track.id, this.quality);
+            let streamUrl;
+            
+            if (this.preloadCache.has(track.id)) {
+                streamUrl = this.preloadCache.get(track.id);
+            } else {
+                streamUrl = await this.api.getStreamUrl(track.id, this.quality);
+            }
+            
             this.audio.src = streamUrl;
             await this.audio.play();
+            
+            this.preloadNextTracks();
+            
         } catch (error) {
             console.error(`Could not get track URL for: ${track.title}`, error);
             document.querySelector('.now-playing-bar .title').textContent = `Error: ${track.title}`;
@@ -111,6 +169,9 @@ export class Player {
             this.queue = [...this.originalQueueBeforeShuffle];
             this.currentQueueIndex = this.queue.findIndex(t => t.id === currentTrack?.id);
         }
+        
+        this.preloadCache.clear();
+        this.preloadNextTracks();
     }
 
     toggleRepeat() {
@@ -122,6 +183,7 @@ export class Player {
         this.queue = tracks;
         this.currentQueueIndex = startIndex;
         this.shuffleActive = false;
+        this.preloadCache.clear();
     }
 
     addToQueue(track) {
@@ -145,7 +207,7 @@ updateMediaSession(track) {
         if (!('mediaSession' in navigator)) return;
         
         const artwork = [];
-    const sizes = ['1280'];
+        const sizes = ['96', '128', '192', '256', '384', '512'];
         
         const coverId = track.album?.cover;
         

js/storage.js

@@ -3,12 +3,12 @@ export const apiSettings = {
     STORAGE_KEY: 'monochrome-api-instances',
     defaultInstances: [
         'https://hifi.prigoana.com',
-        'https://tidal.401658.xyz',
         'https://hund.qqdl.site',
         'https://katze.qqdl.site',
         'https://maus.qqdl.site',
         'https://vogel.qqdl.site',
-        'https://wolf.qqdl.site'
+        'https://wolf.qqdl.site',
+        'https://tidal.401658.xyz'
     ],
     
     getInstances() {

js/ui.js

@@ -1,4 +1,4 @@
-import { formatTime, createPlaceholder, trackDataStore } from './utils.js';
+import { formatTime, createPlaceholder, trackDataStore, hasExplicitContent } from './utils.js';
 import { recentActivityManager } from './storage.js';
 
 export class UIRenderer {
@@ -6,17 +6,25 @@ export class UIRenderer {
         this.api = api;
     }
 
+    createExplicitBadge() {
+        return '<span class="explicit-badge" title="Explicit">E</span>';
+    }
+
     createTrackItemHTML(track, index, showCover = false) {
         const playIconSmall = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>';
-        const trackNumberHTML = `<div class="track-number" style="font-size: 1.1em; display: flex; align-items: center; justify-content: center;">${showCover ? playIconSmall : index + 1}</div>`;
+        const trackNumberHTML = `<div class="track-number">${showCover ? playIconSmall : index + 1}</div>`;
+        const explicitBadge = hasExplicitContent(track) ? this.createExplicitBadge() : '';
         
         return `
             <div class="track-item" data-track-id="${track.id}">
                 ${trackNumberHTML}
                 <div class="track-item-info">
-                    ${showCover ? `<img src="${this.api.getCoverUrl(track.album?.cover, '1280')}" alt="Track Cover" class="track-item-cover" loading="lazy">` : ''}
+                    ${showCover ? `<img src="${this.api.getCoverUrl(track.album?.cover, '80')}" alt="Track Cover" class="track-item-cover" loading="lazy">` : ''}
                     <div class="track-item-details">
-                        <div class="title">${track.title}</div>
+                        <div class="title">
+                            ${track.title}
+                            ${explicitBadge}
+                        </div>
                         <div class="artist">${track.artist?.name ?? 'Unknown Artist'}</div>
                     </div>
                 </div>
@@ -26,10 +34,13 @@ export class UIRenderer {
     }
 
     createAlbumCardHTML(album) {
+        const explicitBadge = hasExplicitContent(album) ? this.createExplicitBadge() : '';
         return `
             <a href="#album/${album.id}" class="card">
-                <img src="${this.api.getCoverUrl(album.cover)}" alt="${album.title}" class="card-image" loading="lazy">
+                <div class="card-image-wrapper">
-                <h3 class="card-title">${album.title}</h3>
+                    <img src="${this.api.getCoverUrl(album.cover, '320')}" alt="${album.title}" class="card-image" loading="lazy">
+                </div>
+                <h3 class="card-title">${album.title} ${explicitBadge}</h3>
                 <p class="card-subtitle">Album • ${album.artist?.name ?? ''}</p>
             </a>
         `;
@@ -38,7 +49,9 @@ export class UIRenderer {
     createArtistCardHTML(artist) {
         return `
             <a href="#artist/${artist.id}" class="card artist">
-                <img src="${this.api.getArtistPictureUrl(artist.picture, '750')}" alt="${artist.name}" class="card-image" loading="lazy">
+                <div class="card-image-wrapper">
+                    <img src="${this.api.getArtistPictureUrl(artist.picture, '320')}" alt="${artist.name}" class="card-image" loading="lazy">
+                </div>
                 <h3 class="card-title">${artist.name}</h3>
                 <p class="card-subtitle">Artist</p>
             </a>
@@ -71,19 +84,6 @@ export class UIRenderer {
         `;
     }
 
-    createSkeletonDetailHeader(isArtist = false) {
-        return `
-            <div class="skeleton-detail-header">
-                <div class="skeleton skeleton-detail-image ${isArtist ? 'artist' : ''}"></div>
-                <div class="skeleton-detail-info">
-                    <div class="skeleton skeleton-detail-type"></div>
-                    <div class="skeleton skeleton-detail-title"></div>
-                    <div class="skeleton skeleton-detail-meta"></div>
-                </div>
-            </div>
-        `;
-    }
-
     createSkeletonTracks(count = 5, showCover = false) {
         return `<div class="skeleton-container">${Array(count).fill(0).map(() => this.createSkeletonTrack(showCover)).join('')}</div>`;
     }
@@ -93,10 +93,20 @@ export class UIRenderer {
     }
 
     renderListWithTracks(container, tracks, showCover) {
-        container.innerHTML = tracks.map((track, i) => 
+        const fragment = document.createDocumentFragment();
+        const tempDiv = document.createElement('div');
+        
+        tempDiv.innerHTML = tracks.map((track, i) => 
             this.createTrackItemHTML(track, i, showCover)
         ).join('');
         
+        while (tempDiv.firstChild) {
+            fragment.appendChild(tempDiv.firstChild);
+        }
+        
+        container.innerHTML = '';
+        container.appendChild(fragment);
+        
         tracks.forEach(track => {
             const element = container.querySelector(`[data-track-id="${track.id}"]`);
             if (element) trackDataStore.set(element, track);
@@ -156,7 +166,6 @@ export class UIRenderer {
             let finalAlbums = albumsResult.items;
             
             if (finalArtists.length === 0 && finalTracks.length > 0) {
-                console.log('Using fallback: extracting artists from tracks');
                 const artistMap = new Map();
                 finalTracks.forEach(track => {
                     if (track.artist && !artistMap.has(track.artist.id)) {
@@ -174,7 +183,6 @@ export class UIRenderer {
             }
             
             if (finalAlbums.length === 0 && finalTracks.length > 0) {
-                console.log('Using fallback: extracting albums from tracks');
                 const albumMap = new Map();
                 finalTracks.forEach(track => {
                     if (track.album && !albumMap.has(track.album.id)) {
@@ -231,9 +239,12 @@ export class UIRenderer {
         try {
             const { album, tracks } = await this.api.getAlbum(albumId);
             
-            imageEl.src = this.api.getCoverUrl(album.cover);
+            imageEl.src = this.api.getCoverUrl(album.cover, '640');
             imageEl.style.backgroundColor = '';
-            titleEl.textContent = album.title;
+            
+            const explicitBadge = hasExplicitContent(album) ? this.createExplicitBadge() : '';
+            titleEl.innerHTML = `${album.title} ${explicitBadge}`;
+            
             metaEl.innerHTML = 
                 `By <a href="#artist/${album.artist.id}">${album.artist.name}</a> • ${new Date(album.releaseDate).getFullYear()}`;
             
@@ -274,7 +285,7 @@ export class UIRenderer {
         try {
             const artist = await this.api.getArtist(artistId);
             
-            imageEl.src = this.api.getArtistPictureUrl(artist.picture, '750');
+            imageEl.src = this.api.getArtistPictureUrl(artist.picture, '640');
             imageEl.style.backgroundColor = '';
             nameEl.textContent = artist.name;
             metaEl.textContent = `${artist.popularity} popularity`;

js/utils.js

@@ -1,4 +1,3 @@
-//js/utils.js
 export const QUALITY = 'LOSSLESS';
 
 export const REPEAT_MODE = {
@@ -140,3 +139,19 @@ export const deriveTrackQuality = (track) => {
 };
 
 export const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms));
+
+export const hasExplicitContent = (item) => {
+    return item?.explicit === true || item?.explicitLyrics === true;
+};
+
+export const debounce = (func, wait) => {
+    let timeout;
+    return function executedFunction(...args) {
+        const later = () => {
+            clearTimeout(timeout);
+            func(...args);
+        };
+        clearTimeout(timeout);
+        timeout = setTimeout(later, wait);
+    };
+};

styles.css

@@ -1,4 +1,3 @@
-    /*styles.css*/
 :root {
     --background: #000;
     --foreground: #fafafa;
@@ -14,8 +13,9 @@
     --input: #27272a;
     --ring: #fafafa;
     --radius: .5rem;
-        --highlight: #4ade80;
+    --highlight: #ffffff;
     --active-highlight: var(--highlight);
+    --explicit-badge: #fafafa;
     --spacing-xs: 0.5rem;
     --spacing-sm: 0.75rem;
     --spacing-md: 1rem;
@@ -41,6 +41,7 @@
     font-family: 'Inter', sans-serif;
     overflow: hidden;
 }
+
 img {
     max-width: 100%;
     display: block;
@@ -73,7 +74,7 @@
     display: flex;
     flex-direction: column;
     gap: 2rem;
-        transition: transform .3s ease-in-out;
+    transition: transform .3s cubic-bezier(0.4, 0, 0.2, 1);
     z-index: 2000;
 }
 
@@ -81,6 +82,7 @@
     grid-area: main;
     overflow-y: auto;
     padding: var(--spacing-xl);
+    scroll-behavior: smooth;
 }
 
 .now-playing-bar {
@@ -121,7 +123,7 @@
     color: var(--muted-foreground);
     text-decoration: none;
     font-weight: 500;
-        transition: all .2s ease-in-out;
+    transition: all .2s cubic-bezier(0.4, 0, 0.2, 1);
     cursor: pointer;
 }
 
@@ -146,13 +148,13 @@
 
 .page.active {
     display: block;
-        animation: fadeIn .3s ease-in-out;
+    animation: fadeIn .25s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 @keyframes fadeIn {
     from { 
         opacity: 0;
-            transform: translateY(8px);
+        transform: translateY(4px);
     }
     to { 
         opacity: 1;
@@ -175,6 +177,12 @@
     color: var(--foreground);
     cursor: pointer;
     padding: 0.5rem;
+    border-radius: var(--radius);
+    transition: background-color .2s;
+}
+
+.hamburger-menu:hover {
+    background-color: var(--secondary);
 }
 
 .search-bar {
@@ -191,6 +199,7 @@
     color: var(--muted-foreground);
     width: 20px;
     height: 20px;
+    pointer-events: none;
 }
 
 .search-bar input {
@@ -201,6 +210,7 @@
     border-radius: var(--radius);
     color: var(--foreground);
     font-size: 1rem;
+    transition: border-color .2s;
 }
 
 .search-bar input:focus {
@@ -234,7 +244,7 @@
     font-size: 1rem;
     font-weight: 500;
     border-bottom: 2px solid transparent;
-        transition: all 0.2s;
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .search-tab:hover {
@@ -252,7 +262,7 @@
 
 .search-tab-content.active {
     display: block;
-        animation: fadeIn 0.3s ease-in-out;
+    animation: fadeIn 0.25s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .card-grid {
@@ -266,11 +276,18 @@
     background-color: var(--card);
     border-radius: var(--radius);
     padding: 1rem;
-        transition: background-color .2s ease-in-out;
+    transition: all .2s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .card:hover {
     background-color: var(--secondary);
+    transform: translateY(-2px);
+}
+
+.card-image-wrapper {
+    position: relative;
+    width: 100%;
+    margin-bottom: 1rem;
 }
 
 .card-image {
@@ -278,7 +295,6 @@
     aspect-ratio: 1/1;
     background-color: var(--muted);
     border-radius: calc(var(--radius) - 4px);
-        margin-bottom: 1rem;
     object-fit: cover;
 }
 
@@ -286,6 +302,12 @@
     border-radius: 50%;
 }
 
+.card-image-wrapper .explicit-badge {
+    position: absolute;
+    top: 0.5rem;
+    right: 0.5rem;
+}
+
 .card-title {
     font-weight: 600;
     margin-bottom: .25rem;
@@ -302,6 +324,21 @@
     text-overflow: ellipsis;
 }
 
+.explicit-badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--explicit-badge);
+    color: rgb(0, 0, 0);
+    font-size: 0.65rem;
+    font-weight: 700;
+    padding: 0.15rem 0.35rem;
+    border-radius: 2px;
+    margin-left: 0.5rem;
+    vertical-align: middle;
+    line-height: 1;
+}
+
 .track-list {
     display: flex;
     flex-direction: column;
@@ -332,7 +369,7 @@
     padding: var(--spacing-sm);
     border-radius: var(--radius);
     cursor: pointer;
-        transition: background-color .2s ease-in-out;
+    transition: all .2s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .track-item:hover {
@@ -343,6 +380,9 @@
     color: var(--muted-foreground);
     text-align: center;
     font-size: .9rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
 .track-item-info {
@@ -370,6 +410,8 @@
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+    display: flex;
+    align-items: center;
 }
 
 .track-item-details .artist {
@@ -427,6 +469,9 @@
     font-size: 4rem;
     font-weight: 800;
     line-height: 1.1;
+    display: flex;
+    align-items: center;
+    gap: 1rem;
 }
 
 .detail-header-info .meta {
@@ -490,7 +535,7 @@
     right: 0;
     bottom: 0;
     background-color: var(--secondary);
-        transition: .4s;
+    transition: .3s cubic-bezier(0.4, 0, 0.2, 1);
     border-radius: 24px;
 }
 
@@ -502,7 +547,7 @@
     left: 4px;
     bottom: 4px;
     background-color: var(--foreground);
-        transition: .4s;
+    transition: .3s cubic-bezier(0.4, 0, 0.2, 1);
     border-radius: 50%;
 }
 
@@ -523,7 +568,7 @@
     border-radius: var(--radius);
     cursor: pointer;
     font-weight: 500;
-        transition: background-color 0.2s;
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .btn-secondary:hover {
@@ -588,7 +633,7 @@
     border: none;
     color: var(--muted-foreground);
     cursor: pointer;
-        transition: all .2s;
+    transition: all .2s cubic-bezier(0.4, 0, 0.2, 1);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -649,6 +694,7 @@
     background-color: var(--secondary);
     border-radius: 2px;
     cursor: pointer;
+    position: relative;
 }
 
 .progress-bar .progress-fill {
@@ -657,12 +703,25 @@
     background-color: var(--foreground);
     border-radius: 2px;
     transition: width .1s linear;
+    position: relative;
 }
 
 .progress-bar:hover .progress-fill {
     background-color: var(--highlight);
 }
 
+.progress-bar:hover .progress-fill::after {
+    content: '';
+    position: absolute;
+    right: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 12px;
+    height: 12px;
+    background-color: var(--highlight);
+    border-radius: 50%;
+}
+
 .volume-controls {
     display: flex;
     justify-content: flex-end;
@@ -676,10 +735,13 @@
     color: var(--muted-foreground);
     cursor: pointer;
     transition: color .2s;
+    padding: 0.5rem;
+    border-radius: var(--radius);
 }
 
 .volume-controls button:hover {
     color: var(--foreground);
+    background-color: var(--secondary);
 }
 
 .volume-controls .volume-bar {
@@ -688,6 +750,7 @@
     background-color: var(--secondary);
     border-radius: 2px;
     cursor: pointer;
+    position: relative;
 }
 
 .volume-controls .volume-bar .volume-fill {
@@ -701,6 +764,18 @@
     background-color: var(--highlight);
 }
 
+.volume-controls .volume-bar:hover .volume-fill::after {
+    content: '';
+    position: absolute;
+    right: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 12px;
+    height: 12px;
+    background-color: var(--highlight);
+    border-radius: 50%;
+}
+
 #context-menu {
     display: none;
     position: absolute;
@@ -710,6 +785,7 @@
     padding: .5rem;
     box-shadow: 0 4px 12px rgba(0, 0, 0, .5);
     z-index: 1000;
+    min-width: 160px;
 }
 
 #context-menu ul {
@@ -720,7 +796,8 @@
     padding: .5rem .75rem;
     cursor: pointer;
     border-radius: 4px;
-        transition: background-color .2s ease-in-out;
+    transition: background-color .2s cubic-bezier(0.4, 0, 0.2, 1);
+    font-size: 0.9rem;
 }
 
 #context-menu li:hover {
@@ -735,9 +812,11 @@
     right: 0;
     bottom: 0;
     background-color: rgba(0, 0, 0, .7);
+    backdrop-filter: blur(4px);
     z-index: 1000;
     justify-content: center;
     align-items: center;
+    animation: fadeIn 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 #queue-modal {
@@ -748,6 +827,19 @@
     border-radius: var(--radius);
     display: flex;
     flex-direction: column;
+    box-shadow: 0 20px 60px rgba(0, 0, 0, .8);
+    animation: scaleIn 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+@keyframes scaleIn {
+    from {
+        transform: scale(0.95);
+        opacity: 0;
+    }
+    to {
+        transform: scale(1);
+        opacity: 1;
+    }
 }
 
 #queue-modal-header {
@@ -768,6 +860,18 @@
     color: var(--muted-foreground);
     font-size: 1.5rem;
     cursor: pointer;
+    width: 32px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--radius);
+    transition: all .2s;
+}
+
+#queue-modal-header button:hover {
+    background-color: var(--secondary);
+    color: var(--foreground);
 }
 
 #queue-list {
@@ -776,7 +880,7 @@
 }
 
 .placeholder-text {
-        padding: 1rem;
+    padding: 2rem 1rem;
     color: var(--muted-foreground);
     text-align: center;
 }
@@ -834,7 +938,7 @@
     align-items: center;
     justify-content: center;
     border-radius: 4px;
-        transition: all .2s ease-in-out;
+    transition: all .2s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 #api-instance-list li button:hover {
@@ -885,6 +989,7 @@
     height: 100%;
     background: rgba(0, 0, 0, .5);
     z-index: 1999;
+    backdrop-filter: blur(2px);
 }
 
 #about-section {
@@ -961,7 +1066,7 @@
     color: var(--foreground);
     text-decoration: none;
     font-weight: 500;
-        transition: all 0.2s;
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .github-link:hover {
@@ -1108,66 +1213,10 @@
     width: 60%;
 }
 
-    .skeleton-detail-header {
-        display: flex;
-        align-items: flex-end;
-        gap: var(--spacing-xl);
-        margin-bottom: var(--spacing-2xl);
-        padding-bottom: var(--spacing-xl);
-    }
-
-    .skeleton-detail-image {
-        width: 200px;
-        height: 200px;
-        flex-shrink: 0;
-        border-radius: var(--radius);
-    }
-
-    .skeleton-detail-image.artist {
-        border-radius: 50%;
-    }
-
-    .skeleton-detail-info {
-        flex: 1;
-        display: flex;
-        flex-direction: column;
-        gap: var(--spacing-md);
-    }
-
-    .skeleton-detail-type {
-        height: 16px;
-        width: 60px;
-    }
-
-    .skeleton-detail-title {
-        height: 48px;
-        width: 70%;
-        max-width: 400px;
-    }
-
-    .skeleton-detail-meta {
-        height: 16px;
-        width: 50%;
-        max-width: 300px;
-    }
-
 .skeleton-container {
     width: 100%;
 }
 
-    .content-loaded {
-        animation: contentFadeIn 0.3s ease-in-out;
-    }
-
-    @keyframes contentFadeIn {
-        from {
-            opacity: 0;
-        }
-        to {
-            opacity: 1;
-        }
-    }
-
 @media (max-width: 1024px) {
     .app-container {
         grid-template-columns: 240px 1fr;
@@ -1265,29 +1314,12 @@
         line-height: 1.2;
     }
     
-        .skeleton-detail-header {
-            flex-direction: column;
-            align-items: flex-start;
-            gap: var(--spacing-lg);
-        }
-        
-        .skeleton-detail-image {
-            width: 150px;
-            height: 150px;
-        }
-        
-        .skeleton-detail-title {
-            height: 40px;
-            width: 90%;
-        }
-        
     .now-playing-bar {
         grid-template-columns: 1fr;
         grid-template-rows: auto auto;
         gap: var(--spacing-md);
         padding: var(--spacing-md);
         height: auto;
-            place-items: center;
     }
     
     .now-playing-bar .track-info {
@@ -1306,10 +1338,6 @@
         max-width: calc(100% - 64px);
     }
     
-        .track-info .details .artist {
-            display: block;
-        }
-        
     .now-playing-bar .player-controls {
         grid-column: 1;
         grid-row: 2;
@@ -1319,7 +1347,6 @@
     }
     
     .player-controls .progress-container {
-            display: flex;
         max-width: none;
     }