ability to hide homepage sections

index.html

@@ -2106,6 +2106,51 @@
                             </div>
                         </div>
 
+                        <div class="settings-group">
+                            <div class="setting-item">
+                                <div class="info">
+                                    <span class="label">Show Recommended Songs</span>
+                                    <span class="description">Display recommended songs on the home page</span>
+                                </div>
+                                <label class="toggle-switch">
+                                    <input type="checkbox" id="show-recommended-songs-toggle" checked />
+                                    <span class="slider"></span>
+                                </label>
+                            </div>
+                            <div class="setting-item">
+                                <div class="info">
+                                    <span class="label">Show Recommended Albums</span>
+                                    <span class="description">Display recommended albums on the home page</span>
+                                </div>
+                                <label class="toggle-switch">
+                                    <input type="checkbox" id="show-recommended-albums-toggle" checked />
+                                    <span class="slider"></span>
+                                </label>
+                            </div>
+                            <div class="setting-item">
+                                <div class="info">
+                                    <span class="label">Show Recommended Artists</span>
+                                    <span class="description">Display recommended artists on the home page</span>
+                                </div>
+                                <label class="toggle-switch">
+                                    <input type="checkbox" id="show-recommended-artists-toggle" checked />
+                                    <span class="slider"></span>
+                                </label>
+                            </div>
+                            <div class="setting-item">
+                                <div class="info">
+                                    <span class="label">Show Jump Back In</span>
+                                    <span class="description"
+                                        >Display recent albums, playlists, and mixes on the home page</span
+                                    >
+                                </div>
+                                <label class="toggle-switch">
+                                    <input type="checkbox" id="show-jump-back-in-toggle" checked />
+                                    <span class="slider"></span>
+                                </label>
+                            </div>
+                        </div>
+
                         <div class="settings-group">
                             <div class="setting-item">
                                 <div class="info">

js/settings.js

@@ -17,6 +17,7 @@ import {
     playlistSettings,
     equalizerSettings,
     listenBrainzSettings,
+    homePageSettings,
 } from './storage.js';
 import { audioContextManager, EQ_PRESETS } from './audio-context.js';
 import { db } from './db.js';
@@ -674,6 +675,39 @@ export function initializeSettings(scrobbler, player, api, ui) {
         });
     }
 
+    // Home Page Section Toggles
+    const showRecommendedSongsToggle = document.getElementById('show-recommended-songs-toggle');
+    if (showRecommendedSongsToggle) {
+        showRecommendedSongsToggle.checked = homePageSettings.shouldShowRecommendedSongs();
+        showRecommendedSongsToggle.addEventListener('change', (e) => {
+            homePageSettings.setShowRecommendedSongs(e.target.checked);
+        });
+    }
+
+    const showRecommendedAlbumsToggle = document.getElementById('show-recommended-albums-toggle');
+    if (showRecommendedAlbumsToggle) {
+        showRecommendedAlbumsToggle.checked = homePageSettings.shouldShowRecommendedAlbums();
+        showRecommendedAlbumsToggle.addEventListener('change', (e) => {
+            homePageSettings.setShowRecommendedAlbums(e.target.checked);
+        });
+    }
+
+    const showRecommendedArtistsToggle = document.getElementById('show-recommended-artists-toggle');
+    if (showRecommendedArtistsToggle) {
+        showRecommendedArtistsToggle.checked = homePageSettings.shouldShowRecommendedArtists();
+        showRecommendedArtistsToggle.addEventListener('change', (e) => {
+            homePageSettings.setShowRecommendedArtists(e.target.checked);
+        });
+    }
+
+    const showJumpBackInToggle = document.getElementById('show-jump-back-in-toggle');
+    if (showJumpBackInToggle) {
+        showJumpBackInToggle.checked = homePageSettings.shouldShowJumpBackIn();
+        showJumpBackInToggle.addEventListener('change', (e) => {
+            homePageSettings.setShowJumpBackIn(e.target.checked);
+        });
+    }
+
     // Filename template setting
     const filenameTemplate = document.getElementById('filename-template');
     if (filenameTemplate) {

js/storage.js

@@ -899,6 +899,65 @@ export const listenBrainzSettings = {
     },
 };
 
+export const homePageSettings = {
+    SHOW_RECOMMENDED_SONGS_KEY: 'home-show-recommended-songs',
+    SHOW_RECOMMENDED_ALBUMS_KEY: 'home-show-recommended-albums',
+    SHOW_RECOMMENDED_ARTISTS_KEY: 'home-show-recommended-artists',
+    SHOW_JUMP_BACK_IN_KEY: 'home-show-jump-back-in',
+
+    shouldShowRecommendedSongs() {
+        try {
+            const val = localStorage.getItem(this.SHOW_RECOMMENDED_SONGS_KEY);
+            return val === null ? true : val === 'true';
+        } catch {
+            return true;
+        }
+    },
+
+    setShowRecommendedSongs(enabled) {
+        localStorage.setItem(this.SHOW_RECOMMENDED_SONGS_KEY, enabled ? 'true' : 'false');
+    },
+
+    shouldShowRecommendedAlbums() {
+        try {
+            const val = localStorage.getItem(this.SHOW_RECOMMENDED_ALBUMS_KEY);
+            return val === null ? true : val === 'true';
+        } catch {
+            return true;
+        }
+    },
+
+    setShowRecommendedAlbums(enabled) {
+        localStorage.setItem(this.SHOW_RECOMMENDED_ALBUMS_KEY, enabled ? 'true' : 'false');
+    },
+
+    shouldShowRecommendedArtists() {
+        try {
+            const val = localStorage.getItem(this.SHOW_RECOMMENDED_ARTISTS_KEY);
+            return val === null ? true : val === 'true';
+        } catch {
+            return true;
+        }
+    },
+
+    setShowRecommendedArtists(enabled) {
+        localStorage.setItem(this.SHOW_RECOMMENDED_ARTISTS_KEY, enabled ? 'true' : 'false');
+    },
+
+    shouldShowJumpBackIn() {
+        try {
+            const val = localStorage.getItem(this.SHOW_JUMP_BACK_IN_KEY);
+            return val === null ? true : val === 'true';
+        } catch {
+            return true;
+        }
+    },
+
+    setShowJumpBackIn(enabled) {
+        localStorage.setItem(this.SHOW_JUMP_BACK_IN_KEY, enabled ? 'true' : 'false');
+    },
+};
+
 // System theme listener
 if (typeof window !== 'undefined' && window.matchMedia) {
     window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {

js/ui.js

@@ -19,7 +19,13 @@ import {
     escapeHtml,
 } from './utils.js';
 import { openLyricsPanel } from './lyrics.js';
-import { recentActivityManager, backgroundSettings, cardSettings, visualizerSettings } from './storage.js';
+import {
+    recentActivityManager,
+    backgroundSettings,
+    cardSettings,
+    visualizerSettings,
+    homePageSettings,
+} from './storage.js';
 import { db } from './db.js';
 import { getVibrantColorFromImage } from './vibrant-color.js';
 import { syncManager } from './accounts/pocketbase.js';
@@ -1253,6 +1259,15 @@ export class UIRenderer {
 
     async renderHomeSongs(forceRefresh = false) {
         const songsContainer = document.getElementById('home-recommended-songs');
+        const section = songsContainer?.closest('.content-section');
+
+        if (!homePageSettings.shouldShowRecommendedSongs()) {
+            if (section) section.style.display = 'none';
+            return;
+        }
+
+        if (section) section.style.display = '';
+
         if (songsContainer) {
             if (forceRefresh) songsContainer.innerHTML = this.createSkeletonTracks(5, true);
             else if (songsContainer.children.length > 0 && !songsContainer.querySelector('.skeleton')) return; // Already loaded
@@ -1278,6 +1293,15 @@ export class UIRenderer {
 
     async renderHomeAlbums(forceRefresh = false) {
         const albumsContainer = document.getElementById('home-recommended-albums');
+        const section = albumsContainer?.closest('.content-section');
+
+        if (!homePageSettings.shouldShowRecommendedAlbums()) {
+            if (section) section.style.display = 'none';
+            return;
+        }
+
+        if (section) section.style.display = '';
+
         if (albumsContainer) {
             if (forceRefresh) albumsContainer.innerHTML = this.createSkeletonCards(6);
             else if (albumsContainer.children.length > 0 && !albumsContainer.querySelector('.skeleton')) return;
@@ -1316,6 +1340,15 @@ export class UIRenderer {
 
     async renderHomeArtists(forceRefresh = false) {
         const artistsContainer = document.getElementById('home-recommended-artists');
+        const section = artistsContainer?.closest('.content-section');
+
+        if (!homePageSettings.shouldShowRecommendedArtists()) {
+            if (section) section.style.display = 'none';
+            return;
+        }
+
+        if (section) section.style.display = '';
+
         if (artistsContainer) {
             if (forceRefresh) artistsContainer.innerHTML = this.createSkeletonCards(6, true);
             else if (artistsContainer.children.length > 0 && !artistsContainer.querySelector('.skeleton')) return;
@@ -1358,6 +1391,15 @@ export class UIRenderer {
 
     renderHomeRecent() {
         const recentContainer = document.getElementById('home-recent-mixed');
+        const section = recentContainer?.closest('.content-section');
+
+        if (!homePageSettings.shouldShowJumpBackIn()) {
+            if (section) section.style.display = 'none';
+            return;
+        }
+
+        if (section) section.style.display = '';
+
         if (recentContainer) {
             const recents = recentActivityManager.getRecents();
             const items = [];