From 5558fa01bddf40558d3dd4f0c46b63a182848c08 Mon Sep 17 00:00:00 2001
From: Forrest Hartley <116300933+4444est@users.noreply.github.com>
Date: Sun, 21 Dec 2025 17:54:39 -0700
Subject: [PATCH 1/3] last commit didn't go through as a pr. image recoloring
 issues should be fixed.

---
 src/lib/components/GrayscaleImageRenderer.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/components/GrayscaleImageRenderer.svelte b/src/lib/components/GrayscaleImageRenderer.svelte
index 82fb298..0cf3d58 100644
--- a/src/lib/components/GrayscaleImageRenderer.svelte
+++ b/src/lib/components/GrayscaleImageRenderer.svelte
@@ -1,6 +1,6 @@
 <!--
   Grayscale Image WebGL Renderer
-  Renders 8-bit grayscale image data with dynamic theme colors
+  Renders 8-bit grayscale image data with dynamic theme colors 
   Optimized for performance and instant theme changes
 -->
 

From 5629e0d64799afc6535bd756f2cd271d0ff2dc17 Mon Sep 17 00:00:00 2001
From: Forrest Hartley <116300933+4444est@users.noreply.github.com>
Date: Tue, 10 Feb 2026 23:13:31 -0700
Subject: [PATCH 2/3] got song replay functionality working in trash and fixed
 recoloring issues for played songs

---
 functions/index.js                     |   2 +-
 src/lib/components/LyricDisplay.svelte |  74 +++++++----
 src/lib/components/TrashDisplay.svelte | 167 ++++++++++++++++++++++++-
 src/lib/components/TypingTest.svelte   | 135 ++++++++++++++------
 src/lib/services/artistService.js      |  77 ++++++++++++
 src/lib/services/trashService.js       |  65 +++++++---
 6 files changed, 439 insertions(+), 81 deletions(-)

diff --git a/functions/index.js b/functions/index.js
index bbd3358..00ac56f 100644
--- a/functions/index.js
+++ b/functions/index.js
@@ -7,7 +7,7 @@ import pako from 'pako';
 import fs from 'node:fs';
 import path from 'node:path';
 import { fileURLToPath } from 'url';
-import { HttpsProxyAgent } from 'https-proxy-agent';
+import HttpsProxyAgent from 'https-proxy-agent';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
diff --git a/src/lib/components/LyricDisplay.svelte b/src/lib/components/LyricDisplay.svelte
index a3f393f..07a5567 100644
--- a/src/lib/components/LyricDisplay.svelte
+++ b/src/lib/components/LyricDisplay.svelte
@@ -15,6 +15,7 @@
 	export let replaySong;
 	export let geniusUrl;
 	export let songId = null; // Song ID for trash functionality
+	export let artistUrlKey = null; // Artist URL key for loading from discography
 	export let isPaused = false;
 	export let capitalization = true;
 	export let punctuation = true;
@@ -25,7 +26,7 @@
 	export let onScrollDown = null;
 	let currentScrollLine = 0; // Track which line we're starting from
 	let lyricsLines = []; // Array of lyrics split by lines
-	let visibleLines = []; // Currently visible 4 lines
+	// visibleLines is now computed reactively from lyricsLines and currentScrollLine
 	const VISIBLE_LINES_COUNT = 4;
 	
 	let userInput = '';
@@ -60,7 +61,14 @@
 	// Process lyrics into lines and manage scrolling
 	function processLyricsIntoLines(lyricsText) {
 		if (!lyricsText) return [];
-		return lyricsText.split('\n').filter(line => line.trim() !== '');
+		const lines = lyricsText.split('\n').filter(line => line.trim() !== '');
+		// Debug: show line count and first few lines with their character counts
+		console.log(`🎵 LYRICS DEBUG: ${lines.length} total lines`);
+		console.log(`🎵 First 6 lines preview:`);
+		lines.slice(0, 6).forEach((line, i) => {
+			console.log(`  Line ${i}: "${line.substring(0, 50)}${line.length > 50 ? '...' : ''}" (${line.length} chars)`);
+		});
+		return lines;
 	}
 
 	// Check if we have full lyrics available for scrolling
@@ -123,16 +131,11 @@
 	}
 
 	// Update the visible lines based on current scroll position
+	// Note: visibleLines is now computed reactively from lyricsLines and currentScrollLine
+	// This function just logs the change - the actual update happens via reactive statement
 	function updateVisibleLines() {
 		console.log("updating visible lines");
 		const endLine = Math.min(lyricsLines.length, currentScrollLine + VISIBLE_LINES_COUNT);
-		visibleLines = lyricsLines.slice(currentScrollLine, endLine);
-		
-		// If we don't have enough lines, pad with empty lines to maintain consistent display
-		while (visibleLines.length < VISIBLE_LINES_COUNT && lyricsLines.length > 0) {
-			visibleLines.push('');
-		}
-		
 		console.log(`Displaying lines ${currentScrollLine}-${endLine-1} of ${lyricsLines.length} total lines`);
 	}
 
@@ -172,19 +175,17 @@
 		}, 0);
 	}
 
-	// Reactive statement to process lyrics when they change
-	$: {
-		// Use full lyrics for scrolling if available, otherwise use the provided lyrics
-		const lyricsToProcess = fullLyrics || lyrics;
-		if (lyricsToProcess) {
-			lyricsLines = processLyricsIntoLines(lyricsToProcess);
-			resetScrollPosition();
-			console.log(`Processed lyrics: ${lyricsLines.length} lines total`, {
-				hasFullLyrics: !!fullLyrics,
-				usingFullLyrics: !!fullLyrics,
-				firstFewLines: lyricsLines.slice(0, 3)
-			});
-		}
+	// Reactive assignment: process lyrics when they change
+	// Using reactive assignment (not block) ensures proper dependency tracking
+	$: lyricsSource = fullLyrics || lyrics;
+	$: lyricsLines = lyricsSource ? processLyricsIntoLines(lyricsSource) : [];
+	
+	// Track when lyrics source changes to reset scroll position
+	let lastLyricsSource = null;
+	$: if (lyricsSource !== lastLyricsSource) {
+		lastLyricsSource = lyricsSource;
+		currentScrollLine = 0;
+		console.log(`Processed lyrics: ${lyricsLines.length} lines total`);
 	}
 
 	// Expose scroll functions to parent components
@@ -423,10 +424,34 @@
 		return normalized;
 	}
 
+	// Compute visible lines reactively based on lyricsLines and currentScrollLine
+	// This ensures visibleLines is always in sync and doesn't rely on side effects
+	$: computedVisibleLines = (() => {
+		if (lyricsLines.length === 0) return [];
+		const endLine = Math.min(lyricsLines.length, currentScrollLine + VISIBLE_LINES_COUNT);
+		const lines = lyricsLines.slice(currentScrollLine, endLine);
+		// Pad with empty lines if needed
+		while (lines.length < VISIBLE_LINES_COUNT && lyricsLines.length > 0) {
+			lines.push('');
+		}
+		console.log(`🔍 VISIBLE LINES DEBUG: showing lines ${currentScrollLine}-${endLine-1} (${lines.length} lines)`);
+		lines.forEach((line, i) => {
+			console.log(`  Visible[${i}]: "${line.substring(0, 60)}${line.length > 60 ? '...' : ''}" (${line.length} chars)`);
+		});
+		return lines;
+	})();
+
+	// Sync visibleLines with the computed value
+	$: visibleLines = computedVisibleLines;
+
 	// Derived lyrics based on toggles and scrolling
+	// IMPORTANT: Do NOT reference 'lyrics' prop here to avoid Svelte running this
+	// before lyricsLines is populated. Only use lyricsLines/computedVisibleLines.
 	$: transformedLyrics = (() => {
-		// Use visible lines if scrolling is active, otherwise use full lyrics
-		const lyricsToUse = visibleLines.length > 0 ? visibleLines.join('\n') : lyrics;
+		// Always use computed visible lines - never fall back to raw lyrics
+		const lyricsToUse = computedVisibleLines.join('\n');
+		console.log(`📝 TRANSFORMED DEBUG: ${computedVisibleLines.length} visible lines → ${lyricsToUse.length} total chars`);
+		console.log(`📝 Full transformed text preview: "${lyricsToUse.substring(0, 200)}${lyricsToUse.length > 200 ? '...' : ''}"`);
 		let out = lyricsToUse ? (capitalization ? lyricsToUse : lyricsToUse.toLowerCase()) : '';
 		if (!punctuation) out = out.replace(/[^\p{L}\p{N}\s]/gu, '');
 		return out;
@@ -548,6 +573,7 @@ function handleInput(event) {
 				songId,
 				songTitle,
 				artistName,
+				artistUrlKey, // For loading song from artist's discography
 				imageUrl,
 				albumArtId,
 				geniusUrl,
diff --git a/src/lib/components/TrashDisplay.svelte b/src/lib/components/TrashDisplay.svelte
index 6b6dd97..f5c1cc9 100644
--- a/src/lib/components/TrashDisplay.svelte
+++ b/src/lib/components/TrashDisplay.svelte
@@ -1,13 +1,23 @@
 <script>
-    import { windowStore } from '$lib/services/store.js';
-    import { themeColors } from '$lib/services/store.js';
+    import { windowStore, windowActions, ditherImages, themeColors } from '$lib/services/store.js';
     import { trashStore, getFileIcon, formatDuration, getPerformanceGrade } from '$lib/services/trashService.js';
+    import { getAlbumArtGrayscaleImage } from '$lib/services/albumArtService.js';
+    import GrayscaleImageRenderer from './GrayscaleImageRenderer.svelte';
 
     // Get trash window dimensions for proportional sizing
     $: trashWindowState = $windowStore.windowStates.find(w => w.id === 'trashWindow');
     $: windowWidth = trashWindowState?.dimensions?.width;
     $: windowHeight = trashWindowState?.dimensions?.height;
     
+    // Album art grayscale data for the selected song
+    let grayscaleImageData = null;
+    let imageMetadata = null;
+    let useFallback = false;
+    let isLoadingImage = false;
+    
+    // In-memory cache for instant image switching
+    const grayscaleCache = new Map();
+    
     // Calculate icon dimensions based on trash window size
     $: iconSize = windowHeight * 0.16; // 16% of window height
     $: iconLabelSize = windowHeight * 0.025; // 2.5% of window height
@@ -60,6 +70,16 @@
             bubbles: true
         });
         document.dispatchEvent(event);
+        
+        // Bring the typing test window to front
+        windowActions.activateWindow('typingTestWindow');
+    }
+    
+    // Replay button click handler
+    function handleReplayClick() {
+        if (selectedSong) {
+            handleFileDoubleClick(selectedSong);
+        }
     }
     
     // Scrolling functions
@@ -97,6 +117,100 @@
     $: if (completedSongs.length === 0) {
         selectedSong = null;
     }
+    
+    // Load grayscale image for selected song when ditherImages is enabled
+    async function loadGrayscaleImage(song) {
+        // Clear old data immediately when switching songs
+        grayscaleImageData = null;
+        imageMetadata = null;
+        
+        if (!song || !song.albumArtId || !song.imageUrl) {
+            useFallback = true;
+            return;
+        }
+        
+        if (!$ditherImages) {
+            useFallback = true;
+            return;
+        }
+        
+        // Check in-memory cache first for instant display
+        const cacheKey = song.imageUrl;
+        if (grayscaleCache.has(cacheKey)) {
+            const cached = grayscaleCache.get(cacheKey);
+            grayscaleImageData = cached.grayscaleData;
+            imageMetadata = cached.metadata;
+            useFallback = false;
+            return;
+        }
+        
+        isLoadingImage = true;
+        useFallback = false;
+        
+        try {
+            const result = await getAlbumArtGrayscaleImage(song.imageUrl);
+            
+            if (result.success && result.grayscaleData) {
+                // Cache for instant access next time
+                grayscaleCache.set(cacheKey, {
+                    grayscaleData: result.grayscaleData,
+                    metadata: result.metadata
+                });
+                
+                grayscaleImageData = result.grayscaleData;
+                imageMetadata = result.metadata;
+                useFallback = false;
+            } else {
+                useFallback = true;
+            }
+        } catch (error) {
+            useFallback = true;
+        } finally {
+            isLoadingImage = false;
+        }
+    }
+    
+    // Preload grayscale data for all songs when dithering is enabled
+    async function preloadAllGrayscale() {
+        if (!$ditherImages) return;
+        
+        for (const song of completedSongs) {
+            if (!song.imageUrl || grayscaleCache.has(song.imageUrl)) continue;
+            
+            try {
+                const result = await getAlbumArtGrayscaleImage(song.imageUrl);
+                if (result.success && result.grayscaleData) {
+                    grayscaleCache.set(song.imageUrl, {
+                        grayscaleData: result.grayscaleData,
+                        metadata: result.metadata
+                    });
+                }
+            } catch (error) {
+                // Silently fail - will load on demand
+            }
+        }
+    }
+    
+    // Trigger preloading when dithering is enabled and songs exist
+    $: if ($ditherImages && completedSongs.length > 0) {
+        preloadAllGrayscale();
+    }
+    
+    // Track the selected song's imageUrl to trigger reactivity when song changes
+    $: selectedImageUrl = selectedSong?.imageUrl;
+    
+    // Reactive: Load grayscale when selected song changes or dither setting changes
+    $: loadImageForSong(selectedSong, selectedImageUrl, $ditherImages);
+    
+    function loadImageForSong(song, imageUrl, ditherEnabled) {
+        if (song && imageUrl) {
+            loadGrayscaleImage(song);
+        } else {
+            grayscaleImageData = null;
+            imageMetadata = null;
+            useFallback = true;
+        }
+    }
 </script>
 
 <div class="trash-container"
@@ -219,7 +333,19 @@
                         <!-- Album Artwork -->
                         <div class="album-art" style:height="{iconSize * 1.5}px" style:width="{iconSize * 1.5}px">
                             {#if selectedSong.imageUrl}
-                                <img src="{selectedSong.imageUrl}" alt="{selectedSong.title}" />
+                                {#key selectedSong.imageUrl}
+                                    {#if $ditherImages && grayscaleImageData && imageMetadata && !useFallback}
+                                        <GrayscaleImageRenderer 
+                                            grayscaleData={grayscaleImageData}
+                                            width={imageMetadata.width}
+                                            height={imageMetadata.height}
+                                            alt={selectedSong.title}
+                                            borderRadius="0"
+                                        />
+                                    {:else}
+                                        <img src="{selectedSong.imageUrl}" alt="{selectedSong.title}" />
+                                    {/if}
+                                {/key}
                             {:else}
                                 <!-- Default album art -->
                                 <div class="default-album-art">
@@ -274,6 +400,18 @@
                         <div class="completion-date" style:font-size="{iconLabelSize * 0.8}px">
                             Completed: {new Date(selectedSong.completedAt).toLocaleDateString()}
                         </div>
+                        
+                        <!-- Replay Button -->
+                        <button 
+                            class="replay-button" 
+                            style:font-size="{iconLabelSize * 0.9}px"
+                            on:click={handleReplayClick}
+                        >
+                            <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style:width="{iconLabelSize * 1.2}px" style:height="{iconLabelSize * 1.2}px">
+                                <path d="M8 5v14l11-7L8 5z" fill="{$themeColors.primary}"/>
+                            </svg>
+                            Replay Song
+                        </button>
                     </div>
                 {:else}
                     <div class="no-selection" style:font-size="{iconLabelSize}px">
@@ -580,8 +718,31 @@
     .completion-date {
         text-align: center;
         opacity: 0.6;
+        color: var(--primary-color);
+    }
+
+    .replay-button {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 6px;
         margin-top: auto;
+        padding: 8px 16px;
+        background-color: var(--secondary-color);
         color: var(--primary-color);
+        border: 1px solid var(--primary-color);
+        cursor: pointer;
+        font-family: inherit;
+        transition: background-color 0.15s ease;
+    }
+    
+    .replay-button:hover {
+        background-color: var(--primary-color);
+        color: var(--secondary-color);
+    }
+    
+    .replay-button:hover svg path {
+        fill: var(--secondary-color);
     }
 
     .no-selection {
diff --git a/src/lib/components/TypingTest.svelte b/src/lib/components/TypingTest.svelte
index 927f695..ee9cb56 100644
--- a/src/lib/components/TypingTest.svelte
+++ b/src/lib/components/TypingTest.svelte
@@ -1,5 +1,5 @@
 <script>
-    import { getArtistLyrics, searchByArtistId, fetchMultipleSongs, loadArtistForQueue } from '$lib/services/artistService';
+    import { getArtistLyrics, searchByArtistId, fetchMultipleSongs, loadArtistForQueue, loadSpecificSong } from '$lib/services/artistService';
     import { queueManager, queueSongs, queueUpcomingSongs, queueIndex } from '$lib/services/queueManager.js';
     import { getAlbumArtBinaryImage } from '$lib/services/albumArtService.js';
     import TextInput from '$lib/components/TextInput.svelte';
@@ -629,49 +629,109 @@
             isPaused = false;
             showQueue = false;
             loading = true;
-
-            // Create a song object in the expected format
-            const songToLoad = {
-                title: songData.title,
-                artist: songData.artist,
-                lyrics: null, // Will need to fetch lyrics
-                image: songData.imageUrl,
-                albumArtId: songData.albumArtId,
-                url: songData.geniusUrl,
-                songId: songData.songId,
-                primaryArtist: songData.artist,
-                artistImg: songData.imageUrl
-            };
-
-            // We need to get the full song data including lyrics
-            // For now, let's use the existing system to load by artist and then find the specific song
-            console.log('🔄 Loading song from trash:', songData.title);
             
-            // Try to load the artist's songs and find the specific song
-            // This is a simplified approach - in a full implementation, we might want to store lyrics in trash
-            const artistData = {
-                name: songData.artist,
-                id: songData.songId // This might not work perfectly, but it's a start
-            };
+            console.log('🔄 Loading song from trash:', songData.title, 'by', songData.artist);
+            console.log('📋 Trash data:', { songId: songData.songId, artistUrlKey: songData.artistUrlKey });
             
-            // For now, just display the song info we have (without lyrics)
-            // In a full implementation, we'd fetch the lyrics from the API
-            currentSong = songToLoad;
-            songTitle = songData.title;
-            artistName = songData.artist;
-            imageUrl = songData.imageUrl;
-            albumArtId = songData.albumArtId;
-            geniusUrl = songData.geniusUrl;
-            songId = songData.songId;
+            // Check if we have the artistUrlKey needed to load from discography
+            if (!songData.artistUrlKey) {
+                console.warn('⚠️ No artistUrlKey in trash data - this song was saved before the feature was implemented');
+                // Fallback: show message asking user to search for artist
+                lyrics = `Unable to load "${songData.title}" - please search for "${songData.artist}" to replay this song.`;
+                songTitle = songData.title;
+                artistName = songData.artist;
+                imageUrl = songData.imageUrl;
+                albumArtId = songData.albumArtId;
+                geniusUrl = songData.geniusUrl;
+                songId = songData.songId;
+                loading = false;
+                return;
+            }
+            
+            // Load the specific song from the artist's discography
+            const result = await loadSpecificSong(songData.songId, songData.artistUrlKey);
+            
+            if (!result || !result.song) {
+                throw new Error('Failed to load song data');
+            }
             
-            // We can't replay without lyrics, so show a message
-            lyrics = "Song selected from trash. To replay this song, please search for the artist and select it from the queue.";
+            const loadedSong = result.song;
+            
+            // Check if we got lyrics
+            if (!loadedSong.lyrics || loadedSong.lyrics.trim().length === 0) {
+                console.warn('⚠️ Song loaded but has no lyrics');
+                lyrics = `Lyrics not available for "${songData.title}". The song may need to be re-cached.`;
+                songTitle = songData.title;
+                artistName = songData.artist;
+                imageUrl = songData.imageUrl;
+                albumArtId = songData.albumArtId;
+                geniusUrl = songData.geniusUrl;
+                songId = songData.songId;
+                loading = false;
+                return;
+            }
+            
+            // Initialize the queue with this artist, starting at this song
+            console.log('🎵 Initializing queue with song at index:', loadedSong.songIndex);
+            
+            // Reset the queue manager with the artist data
+            queueManager.artistUrlKey = songData.artistUrlKey;
+            queueManager.artistData = result.artistData;
+            queueManager.songIds = result.queueInfo.songIds;
+            queueManager.currentIndex = loadedSong.songIndex;
+            
+            // Clear and rebuild the queue
+            queueManager.songs = [];
+            queueManager.loadedSongs.clear();
+            
+            // Initialize songs array with placeholders
+            for (let i = 0; i < result.queueInfo.songIds.length; i++) {
+                queueManager.songs.push({
+                    id: result.queueInfo.songIds[i],
+                    title: 'Loading...',
+                    artist: result.artistData.name,
+                    lyrics: null,
+                    isPlaceholder: true
+                });
+            }
+            
+            // Add the loaded song to the cache and queue
+            queueManager.loadedSongs.set(loadedSong.id, loadedSong);
+            queueManager.songs[loadedSong.songIndex] = queueManager.ensureExcerptForSong(loadedSong);
+            
+            // Broadcast queue update
+            queueManager.broadcast();
+            
+            // Update UI state
+            currentSong = loadedSong;
+            songTitle = loadedSong.title;
+            artistName = loadedSong.artist;
+            lyrics = loadedSong.lyrics;
+            imageUrl = loadedSong.image || songData.imageUrl;
+            albumArtId = loadedSong.albumArtId || songData.albumArtId;
+            geniusUrl = loadedSong.url || songData.geniusUrl;
+            songId = loadedSong.songId || loadedSong.id;
+            displayedArtist = songData.artist;
+            
+            // Update artist input to show the artist name
+            artistInput = songData.artist;
+            
+            console.log('✅ Song loaded from trash successfully:', songTitle);
+            
+            // Trigger background preloading of nearby songs
+            setTimeout(() => {
+                queueManager.preloadAroundCurrentPosition().catch(err => {
+                    console.warn('Background preload failed:', err);
+                });
+            }, 100);
             
             loading = false;
 
         } catch (error) {
-            console.error('Error loading song from trash:', error);
-            lyrics = "Error loading song from trash.";
+            console.error('❌ Error loading song from trash:', error);
+            lyrics = `Error loading "${songData.title}": ${error.message}. Please try searching for the artist.`;
+            songTitle = songData.title;
+            artistName = songData.artist;
             loading = false;
         }
     }
@@ -868,6 +928,7 @@
                                 {replaySong} 
                                 {geniusUrl}
                                 {songId}
+                                artistUrlKey={queueManager.artistUrlKey}
                                 {isPaused}
                                 capitalization={$capitalization}
                                 punctuation={$punctuation}
diff --git a/src/lib/services/artistService.js b/src/lib/services/artistService.js
index 9a16f36..f48e7e6 100644
--- a/src/lib/services/artistService.js
+++ b/src/lib/services/artistService.js
@@ -319,6 +319,83 @@ export async function loadSongsFromPosition(songId, shouldReverse = false, artis
     }
 }
 
+/**
+ * Load a specific song by ID from an artist's discography
+ * This is used when loading a song from trash/history
+ * @param {string} songId - The Genius song ID
+ * @param {string} artistUrlKey - Artist document ID (URL slug)
+ * @returns {Promise<Object>} Song data with lyrics and queue info
+ */
+export async function loadSpecificSong(songId, artistUrlKey) {
+    try {
+        console.log(`🎯 Loading specific song ${songId} from artist ${artistUrlKey}`);
+        
+        // First, get the artist data to access the song list
+        const artistData = await getArtistWithSongs(artistUrlKey);
+        
+        if (!artistData || !artistData.songIds || artistData.songIds.length === 0) {
+            throw new Error('Artist not found or has no songs');
+        }
+        
+        // Find the song's position in the artist's song list
+        const songIndex = artistData.songIds.findIndex(id => id === songId || id === String(songId));
+        
+        if (songIndex === -1) {
+            console.warn(`Song ${songId} not found in artist's song list, loading from position 0`);
+            // Song not in list - might be a featured track. Load from start
+        }
+        
+        // Use the target song ID (or first song if not found)
+        const targetSongId = songIndex !== -1 ? songId : artistData.songIds[0];
+        
+        // Load the song with lyrics using the existing system
+        const result = await loadSongsFromPosition(String(targetSongId), false, artistUrlKey, 1);
+        
+        if (!result || !result.loadedSongs || Object.keys(result.loadedSongs).length === 0) {
+            throw new Error('Failed to load song data');
+        }
+        
+        // Get the loaded song
+        const loadedSong = result.loadedSongs[targetSongId] || Object.values(result.loadedSongs)[0];
+        
+        if (!loadedSong) {
+            throw new Error('Song data not found in response');
+        }
+        
+        // Transform to UI format
+        const transformedSong = {
+            id: loadedSong.id,
+            title: loadedSong.title,
+            artist: loadedSong.primaryArtist?.name || loadedSong.artistNames || artistData.name,
+            lyrics: loadedSong.lyrics || '',
+            fullLyrics: loadedSong.lyrics || '', // Keep full lyrics for scrolling
+            image: loadedSong.songArtImageUrl,
+            albumArtId: loadedSong.albumArtId,
+            url: loadedSong.url,
+            songId: loadedSong.id,
+            primaryArtist: loadedSong.primaryArtist?.name || artistData.name,
+            songIndex: songIndex !== -1 ? songIndex : 0
+        };
+        
+        console.log(`✅ Loaded song: "${transformedSong.title}" at index ${transformedSong.songIndex}`);
+        
+        return {
+            song: transformedSong,
+            artistData: artistData,
+            queueInfo: {
+                totalSongs: artistData.totalSongs || artistData.songIds.length,
+                cachedSongs: artistData.cachedSongs || 0,
+                songIds: artistData.songIds,
+                artistUrlKey: artistUrlKey
+            }
+        };
+        
+    } catch (error) {
+        console.error('Error loading specific song:', error);
+        throw error;
+    }
+}
+
 // LEGACY FUNCTION - Consider migrating to getArtistWithSongs
 export async function getArtistLyrics(artistName) {
     const callGetArtistLyrics = httpsCallable(functions, 'initialArtistSearch');
diff --git a/src/lib/services/trashService.js b/src/lib/services/trashService.js
index c67313d..67b0948 100644
--- a/src/lib/services/trashService.js
+++ b/src/lib/services/trashService.js
@@ -1,10 +1,15 @@
-import { writable } from 'svelte/store';
+import { writable, get } from 'svelte/store';
 import Cookies from 'js-cookie';
+import { cookiesAccepted } from '$lib/services/store.js';
 
-// Trash store to manage completed songs (max 10)
+// Track cookies accepted state for synchronous access
+let areCookiesAccepted = Cookies.get('cookiesAccepted') === 'true';
+
+// Trash store to manage completed songs (max 25)
 const createTrashStore = () => {
-    // Load from cookies on initialization
+    // Load from cookies on initialization only if cookies are accepted
     const initialTrash = (() => {
+        if (!areCookiesAccepted) return [];
         try {
             const saved = Cookies.get('completedSongs');
             return saved ? JSON.parse(saved) : [];
@@ -15,8 +20,18 @@ const createTrashStore = () => {
     })();
 
     const { subscribe, set, update } = writable(initialTrash);
+    
+    // Helper to save to cookies only if accepted
+    const saveToCookies = (songs) => {
+        if (!areCookiesAccepted) return;
+        try {
+            Cookies.set('completedSongs', JSON.stringify(songs), { expires: 365 });
+        } catch (error) {
+            console.warn('Failed to save completed songs to cookies:', error);
+        }
+    };
 
-    return {
+    const store = {
         subscribe,
         
         // Add a completed song to trash (keeps max 25, newest first)
@@ -28,6 +43,7 @@ const createTrashStore = () => {
                     songId: songData.songId,
                     title: songData.title,
                     artist: songData.artist,
+                    artistUrlKey: songData.artistUrlKey, // Artist URL key for loading from discography
                     imageUrl: songData.imageUrl,
                     albumArtId: songData.albumArtId,
                     geniusUrl: songData.geniusUrl,
@@ -51,12 +67,8 @@ const createTrashStore = () => {
                 // Add to beginning and keep only the most recent 25
                 const updatedSongs = [completedSong, ...songs.filter(s => s.id !== completedSong.id)].slice(0, 25);
                 
-                // Save to cookies
-                try {
-                    Cookies.set('completedSongs', JSON.stringify(updatedSongs), { expires: 365 });
-                } catch (error) {
-                    console.warn('Failed to save completed songs to cookies:', error);
-                }
+                // Save to cookies only if accepted
+                saveToCookies(updatedSongs);
                 
                 return updatedSongs;
             });
@@ -67,12 +79,8 @@ const createTrashStore = () => {
             update(songs => {
                 const updatedSongs = songs.filter(song => song.id !== songId);
                 
-                // Save to cookies
-                try {
-                    Cookies.set('completedSongs', JSON.stringify(updatedSongs), { expires: 365 });
-                } catch (error) {
-                    console.warn('Failed to save completed songs to cookies:', error);
-                }
+                // Save to cookies only if accepted
+                saveToCookies(updatedSongs);
                 
                 return updatedSongs;
             });
@@ -94,17 +102,42 @@ const createTrashStore = () => {
             return foundSong;
         }
     };
+    
+    return store;
 };
 
 // Export the trash store instance
 export const trashStore = createTrashStore();
 
+// Subscribe to cookiesAccepted changes
+// Only update the flag - don't clear the store immediately
+// Songs will be cleared on reload if cookies are disabled (since we won't load from cookies)
+cookiesAccepted.subscribe(accepted => {
+    areCookiesAccepted = accepted;
+    if (accepted) {
+        // When cookies are re-enabled, save the current in-memory data to cookies
+        // This preserves data even if user toggled cookies off and back on
+        const currentSongs = get(trashStore);
+        if (currentSongs && currentSongs.length > 0) {
+            try {
+                Cookies.set('completedSongs', JSON.stringify(currentSongs), { expires: 365 });
+            } catch (error) {
+                console.warn('Failed to save completed songs to cookies:', error);
+            }
+        }
+    } else {
+        // Just remove the cookie, but keep the in-memory store intact for this session
+        Cookies.remove('completedSongs');
+    }
+});
+
 // Helper function to format test results for trash
 export const formatTestResultsForTrash = (testResults) => {
     return {
         songId: testResults.songId,
         title: testResults.songTitle,
         artist: testResults.artistName,
+        artistUrlKey: testResults.artistUrlKey, // For loading song from artist's discography
         imageUrl: testResults.imageUrl,
         albumArtId: testResults.albumArtId,
         geniusUrl: testResults.geniusUrl,

From 553724921ecf7065b000e59b43199f8f1a901dc4 Mon Sep 17 00:00:00 2001
From: Forrest Hartley <116300933+4444est@users.noreply.github.com>
Date: Wed, 11 Feb 2026 00:35:54 -0700
Subject: [PATCH 3/3] fixed gitleaks issues

---
 functions/.gitignore | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/functions/.gitignore b/functions/.gitignore
index 918c24d..d225730 100644
--- a/functions/.gitignore
+++ b/functions/.gitignore
@@ -3,4 +3,5 @@ local-config.json
 build
 *.log
 /prescraped-data-*/
-/prescraped-*.json
\ No newline at end of file
+/prescraped-*.json
+test-*.js
\ No newline at end of file