diff --git a/index.html b/index.html index 54a77d0..cf70332 100644 --- a/index.html +++ b/index.html @@ -755,7 +755,7 @@ - + Home - + Library - + Recent - + Unreleased - + Donate - + Settings - + - + About - + Download - + + + + + Show Home in Sidebar + Display the Home link in the sidebar navigation + + + + + + + + + Show Library in Sidebar + Display the Library link in the sidebar navigation + + + + + + + + + Show Recent in Sidebar + Display the Recent link in the sidebar navigation + + + + + + + + + Show Unreleased in Sidebar + Display the Unreleased link in the sidebar navigation + + + + + + + + + Show Donate in Sidebar + Display the Donate link in the sidebar navigation + + + + + + + + + Show Settings in Sidebar + Display the Settings link in the sidebar navigation + + + + + + + + + Show Account in Sidebar + Display the Account link in the sidebar navigation + + + + + + + + + Show About in Sidebar + Display the About link in the sidebar navigation + + + + + + + + + Show Download in Sidebar + Display the Download link in the sidebar navigation + + + + + + + + + Show Discord in Sidebar + Display the Discord link in the sidebar navigation + + + + + + + + diff --git a/js/settings.js b/js/settings.js index a67df10..a7bb11d 100644 --- a/js/settings.js +++ b/js/settings.js @@ -18,6 +18,7 @@ import { equalizerSettings, listenBrainzSettings, homePageSettings, + sidebarSectionSettings, } from './storage.js'; import { audioContextManager, EQ_PRESETS } from './audio-context.js'; import { db } from './db.js'; @@ -708,6 +709,100 @@ export function initializeSettings(scrobbler, player, api, ui) { }); } + // Sidebar Section Toggles + const sidebarShowHomeToggle = document.getElementById('sidebar-show-home-toggle'); + if (sidebarShowHomeToggle) { + sidebarShowHomeToggle.checked = sidebarSectionSettings.shouldShowHome(); + sidebarShowHomeToggle.addEventListener('change', (e) => { + sidebarSectionSettings.setShowHome(e.target.checked); + sidebarSectionSettings.applySidebarVisibility(); + }); + } + + const sidebarShowLibraryToggle = document.getElementById('sidebar-show-library-toggle'); + if (sidebarShowLibraryToggle) { + sidebarShowLibraryToggle.checked = sidebarSectionSettings.shouldShowLibrary(); + sidebarShowLibraryToggle.addEventListener('change', (e) => { + sidebarSectionSettings.setShowLibrary(e.target.checked); + sidebarSectionSettings.applySidebarVisibility(); + }); + } + + const sidebarShowRecentToggle = document.getElementById('sidebar-show-recent-toggle'); + if (sidebarShowRecentToggle) { + sidebarShowRecentToggle.checked = sidebarSectionSettings.shouldShowRecent(); + sidebarShowRecentToggle.addEventListener('change', (e) => { + sidebarSectionSettings.setShowRecent(e.target.checked); + sidebarSectionSettings.applySidebarVisibility(); + }); + } + + const sidebarShowUnreleasedToggle = document.getElementById('sidebar-show-unreleased-toggle'); + if (sidebarShowUnreleasedToggle) { + sidebarShowUnreleasedToggle.checked = sidebarSectionSettings.shouldShowUnreleased(); + sidebarShowUnreleasedToggle.addEventListener('change', (e) => { + sidebarSectionSettings.setShowUnreleased(e.target.checked); + sidebarSectionSettings.applySidebarVisibility(); + }); + } + + const sidebarShowDonateToggle = document.getElementById('sidebar-show-donate-toggle'); + if (sidebarShowDonateToggle) { + sidebarShowDonateToggle.checked = sidebarSectionSettings.shouldShowDonate(); + sidebarShowDonateToggle.addEventListener('change', (e) => { + sidebarSectionSettings.setShowDonate(e.target.checked); + sidebarSectionSettings.applySidebarVisibility(); + }); + } + + const sidebarShowSettingsToggle = document.getElementById('sidebar-show-settings-toggle'); + if (sidebarShowSettingsToggle) { + sidebarShowSettingsToggle.checked = sidebarSectionSettings.shouldShowSettings(); + sidebarShowSettingsToggle.addEventListener('change', (e) => { + sidebarSectionSettings.setShowSettings(e.target.checked); + sidebarSectionSettings.applySidebarVisibility(); + }); + } + + const sidebarShowAccountToggle = document.getElementById('sidebar-show-account-toggle'); + if (sidebarShowAccountToggle) { + sidebarShowAccountToggle.checked = sidebarSectionSettings.shouldShowAccount(); + sidebarShowAccountToggle.addEventListener('change', (e) => { + sidebarSectionSettings.setShowAccount(e.target.checked); + sidebarSectionSettings.applySidebarVisibility(); + }); + } + + const sidebarShowAboutToggle = document.getElementById('sidebar-show-about-toggle'); + if (sidebarShowAboutToggle) { + sidebarShowAboutToggle.checked = sidebarSectionSettings.shouldShowAbout(); + sidebarShowAboutToggle.addEventListener('change', (e) => { + sidebarSectionSettings.setShowAbout(e.target.checked); + sidebarSectionSettings.applySidebarVisibility(); + }); + } + + const sidebarShowDownloadToggle = document.getElementById('sidebar-show-download-toggle'); + if (sidebarShowDownloadToggle) { + sidebarShowDownloadToggle.checked = sidebarSectionSettings.shouldShowDownload(); + sidebarShowDownloadToggle.addEventListener('change', (e) => { + sidebarSectionSettings.setShowDownload(e.target.checked); + sidebarSectionSettings.applySidebarVisibility(); + }); + } + + const sidebarShowDiscordToggle = document.getElementById('sidebar-show-discord-toggle'); + if (sidebarShowDiscordToggle) { + sidebarShowDiscordToggle.checked = sidebarSectionSettings.shouldShowDiscord(); + sidebarShowDiscordToggle.addEventListener('change', (e) => { + sidebarSectionSettings.setShowDiscord(e.target.checked); + sidebarSectionSettings.applySidebarVisibility(); + }); + } + + // Apply sidebar visibility on initialization + sidebarSectionSettings.applySidebarVisibility(); + // Filename template setting const filenameTemplate = document.getElementById('filename-template'); if (filenameTemplate) { diff --git a/js/storage.js b/js/storage.js index 3f6f473..eab9b1f 100644 --- a/js/storage.js +++ b/js/storage.js @@ -958,6 +958,171 @@ export const homePageSettings = { }, }; +export const sidebarSectionSettings = { + SHOW_HOME_KEY: 'sidebar-show-home', + SHOW_LIBRARY_KEY: 'sidebar-show-library', + SHOW_RECENT_KEY: 'sidebar-show-recent', + SHOW_UNRELEASED_KEY: 'sidebar-show-unreleased', + SHOW_DONATE_KEY: 'sidebar-show-donate', + SHOW_SETTINGS_KEY: 'sidebar-show-settings', + SHOW_ACCOUNT_KEY: 'sidebar-show-account', + SHOW_ABOUT_KEY: 'sidebar-show-about', + SHOW_DOWNLOAD_KEY: 'sidebar-show-download', + SHOW_DISCORD_KEY: 'sidebar-show-discord', + + shouldShowHome() { + try { + const val = localStorage.getItem(this.SHOW_HOME_KEY); + return val === null ? true : val === 'true'; + } catch { + return true; + } + }, + + setShowHome(enabled) { + localStorage.setItem(this.SHOW_HOME_KEY, enabled ? 'true' : 'false'); + }, + + shouldShowLibrary() { + try { + const val = localStorage.getItem(this.SHOW_LIBRARY_KEY); + return val === null ? true : val === 'true'; + } catch { + return true; + } + }, + + setShowLibrary(enabled) { + localStorage.setItem(this.SHOW_LIBRARY_KEY, enabled ? 'true' : 'false'); + }, + + shouldShowRecent() { + try { + const val = localStorage.getItem(this.SHOW_RECENT_KEY); + return val === null ? true : val === 'true'; + } catch { + return true; + } + }, + + setShowRecent(enabled) { + localStorage.setItem(this.SHOW_RECENT_KEY, enabled ? 'true' : 'false'); + }, + + shouldShowUnreleased() { + try { + const val = localStorage.getItem(this.SHOW_UNRELEASED_KEY); + return val === null ? true : val === 'true'; + } catch { + return true; + } + }, + + setShowUnreleased(enabled) { + localStorage.setItem(this.SHOW_UNRELEASED_KEY, enabled ? 'true' : 'false'); + }, + + shouldShowDonate() { + try { + const val = localStorage.getItem(this.SHOW_DONATE_KEY); + return val === null ? true : val === 'true'; + } catch { + return true; + } + }, + + setShowDonate(enabled) { + localStorage.setItem(this.SHOW_DONATE_KEY, enabled ? 'true' : 'false'); + }, + + shouldShowSettings() { + try { + const val = localStorage.getItem(this.SHOW_SETTINGS_KEY); + return val === null ? true : val === 'true'; + } catch { + return true; + } + }, + + setShowSettings(enabled) { + localStorage.setItem(this.SHOW_SETTINGS_KEY, enabled ? 'true' : 'false'); + }, + + shouldShowAccount() { + try { + const val = localStorage.getItem(this.SHOW_ACCOUNT_KEY); + return val === null ? true : val === 'true'; + } catch { + return true; + } + }, + + setShowAccount(enabled) { + localStorage.setItem(this.SHOW_ACCOUNT_KEY, enabled ? 'true' : 'false'); + }, + + shouldShowAbout() { + try { + const val = localStorage.getItem(this.SHOW_ABOUT_KEY); + return val === null ? true : val === 'true'; + } catch { + return true; + } + }, + + setShowAbout(enabled) { + localStorage.setItem(this.SHOW_ABOUT_KEY, enabled ? 'true' : 'false'); + }, + + shouldShowDownload() { + try { + const val = localStorage.getItem(this.SHOW_DOWNLOAD_KEY); + return val === null ? true : val === 'true'; + } catch { + return true; + } + }, + + setShowDownload(enabled) { + localStorage.setItem(this.SHOW_DOWNLOAD_KEY, enabled ? 'true' : 'false'); + }, + + shouldShowDiscord() { + try { + const val = localStorage.getItem(this.SHOW_DISCORD_KEY); + return val === null ? true : val === 'true'; + } catch { + return true; + } + }, + + setShowDiscord(enabled) { + localStorage.setItem(this.SHOW_DISCORD_KEY, enabled ? 'true' : 'false'); + }, + + applySidebarVisibility() { + const items = [ + { id: 'sidebar-nav-home', check: this.shouldShowHome() }, + { id: 'sidebar-nav-library', check: this.shouldShowLibrary() }, + { id: 'sidebar-nav-recent', check: this.shouldShowRecent() }, + { id: 'sidebar-nav-unreleased', check: this.shouldShowUnreleased() }, + { id: 'sidebar-nav-donate', check: this.shouldShowDonate() }, + { id: 'sidebar-nav-settings', check: this.shouldShowSettings() }, + { id: 'sidebar-nav-account', check: this.shouldShowAccount() }, + { id: 'sidebar-nav-about', check: this.shouldShowAbout() }, + { id: 'sidebar-nav-download', check: this.shouldShowDownload() }, + { id: 'sidebar-nav-discord', check: this.shouldShowDiscord() }, + ]; + + items.forEach(({ id, check }) => { + const el = document.getElementById(id); + if (el) { + el.style.display = check ? '' : 'none'; + } + }); + }, +}; + // System theme listener if (typeof window !== 'undefined' && window.matchMedia) { window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {