feat: show recent playlists on home screen

index.html

@@ -110,6 +110,10 @@
                     <h2 class="section-title">Recent Albums</h2>
                     <div class="card-grid" id="home-recent-albums"></div>
                 </section>
+                <section class="content-section">
+                    <h2 class="section-title">Recent Playlists</h2>
+                    <div class="card-grid" id="home-recent-playlists"></div>
+                </section>
                 <section class="content-section">
                     <h2 class="section-title">Recent Artists</h2>
                     <div class="card-grid" id="home-recent-artists"></div>

js/storage.js

@@ -193,9 +193,11 @@ export const recentActivityManager = {
     _get() {
         try {
             const data = localStorage.getItem(this.STORAGE_KEY);
-            return data ? JSON.parse(data) : { artists: [], albums: [] };
+            const parsed = data ? JSON.parse(data) : { artists: [], albums: [], playlists: [] };
+            if (!parsed.playlists) parsed.playlists = [];
+            return parsed;
         } catch (e) {
-            return { artists: [], albums: [] };
+            return { artists: [], albums: [], playlists: [] };
         }
     },
 
@@ -221,6 +223,10 @@ export const recentActivityManager = {
 
     addAlbum(album) {
         this._add('albums', album);
+    },
+
+    addPlaylist(playlist) {
+        this._add('playlists', playlist);
     }
 };
 

js/ui.js

@@ -206,6 +206,7 @@ export class UIRenderer {
 
         const albumsContainer = document.getElementById('home-recent-albums');
         const artistsContainer = document.getElementById('home-recent-artists');
+        const playlistsContainer = document.getElementById('home-recent-playlists');
 
         albumsContainer.innerHTML = recents.albums.length
             ? recents.albums.map(album => this.createAlbumCardHTML(album)).join('')
@@ -214,6 +215,12 @@ export class UIRenderer {
         artistsContainer.innerHTML = recents.artists.length
             ? recents.artists.map(artist => this.createArtistCardHTML(artist)).join('')
             : createPlaceholder("You haven't viewed any artists yet. Search for music to get started!");
+
+        if (playlistsContainer) {
+            playlistsContainer.innerHTML = recents.playlists && recents.playlists.length
+                ? recents.playlists.map(playlist => this.createPlaylistCardHTML(playlist)).join('')
+                : createPlaceholder("You haven't viewed any playlists yet. Search for music to get started!");
+        }
     }
 
     async renderSearchPage(query) {
@@ -427,10 +434,11 @@ async renderPlaylistPage(playlistId) {
             </div>
         `;
 
-        this.renderListWithTracks(tracklistContainer, tracks, true);
+                    this.renderListWithTracks(tracklistContainer, tracks, true);
         
-        document.title = `${playlist.title} - Monochrome`;
+                    recentActivityManager.addPlaylist(playlist);
-    } catch (error) {
+        
+                    document.title = `${playlist.title || 'Artist Mix'} - Monochrome`;    } catch (error) {
         console.error("Failed to load playlist:", error);
         tracklistContainer.innerHTML = createPlaceholder(`Could not load playlist details. ${error.message}`);
     }