diff --git a/index.html b/index.html
index 1c9da6b..ae79a18 100644
--- a/index.html
+++ b/index.html
@@ -110,6 +110,10 @@
Recent Albums
+
Recent Artists
diff --git a/js/storage.js b/js/storage.js
index 58660e4..88d9a69 100644
--- a/js/storage.js
+++ b/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);
}
};
diff --git a/js/ui.js b/js/ui.js
index d90039d..4d55efe 100644
--- a/js/ui.js
+++ b/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) {
`;
- this.renderListWithTracks(tracklistContainer, tracks, true);
-
- document.title = `${playlist.title} - Monochrome`;
- } catch (error) {
+ this.renderListWithTracks(tracklistContainer, tracks, true);
+
+ recentActivityManager.addPlaylist(playlist);
+
+ 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}`);
}