vndangkhoa/kv-music
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

hiding

Browse source
This commit is contained in:
Eduard Prigoana 2026-02-03 17:48:54 +00:00
parent 3d5da2f3e1
commit 91e2e7b3cb
3 changed files with 375 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

125
index.html
View file

@ -755,7 +755,7 @@
</div>
<nav class="sidebar-nav main">
<ul>
<li class="nav-item">
<li class="nav-item" id="sidebar-nav-home">
<a href="/">
<svg
xmlns="http://www.w3.org/2000/svg"
@ -777,7 +777,7 @@
<span>Home</span>
</a>
</li>
<li class="nav-item">
<li class="nav-item" id="sidebar-nav-library">
<a href="/library">
<svg
xmlns="http://www.w3.org/2000/svg"
@ -798,7 +798,7 @@
<span>Library</span>
</a>
</li>
<li class="nav-item">
<li class="nav-item" id="sidebar-nav-recent">
<a href="/recent">
<svg
xmlns="http://www.w3.org/2000/svg"
@ -818,7 +818,7 @@
<span>Recent</span>
</a>
</li>
<li class="nav-item">
<li class="nav-item" id="sidebar-nav-unreleased">
<a href="/unreleased">
<svg
xmlns="http://www.w3.org/2000/svg"
@ -839,7 +839,7 @@
<span>Unreleased</span>
</a>
</li>
<li class="nav-item">
<li class="nav-item" id="sidebar-nav-donate">
<a href="https://pally.gg/p/monochrome" target="_blank" rel="noopener noreferrer">
<svg
xmlns="http://www.w3.org/2000/svg"
@ -864,7 +864,7 @@
<span>Donate</span>
</a>
</li>
<li class="nav-item">
<li class="nav-item" id="sidebar-nav-settings">
<a href="/settings">
<svg
xmlns="http://www.w3.org/2000/svg"
@ -885,7 +885,7 @@
<span>Settings</span>
</a>
</li>
<li class="nav-item">
<li class="nav-item" id="sidebar-nav-account">
<a href="/account">
<svg
width="24"
@ -923,7 +923,7 @@
</nav>
<nav class="sidebar-nav">
<ul>
<li class="nav-item">
<li class="nav-item" id="sidebar-nav-about">
<a href="/about">
<svg
xmlns="http://www.w3.org/2000/svg"
@ -944,7 +944,7 @@
<span>About</span>
</a>
</li>
<li class="nav-item">
<li class="nav-item" id="sidebar-nav-download">
<a href="/download">
<svg
xmlns="http://www.w3.org/2000/svg"
@ -964,7 +964,7 @@
<span>Download</span>
</a>
</li>
<li class="nav-item">
<li class="nav-item" id="sidebar-nav-discord">
<a href="https://monochrome.samidy.com/discord" target="_blank">
<svg
width="64px"
@ -2151,6 +2151,111 @@
</div>
</div>
<div class="settings-group">
<div class="setting-item">
<div class="info">
<span class="label">Show Home in Sidebar</span>
<span class="description">Display the Home link in the sidebar navigation</span>
</div>
<label class="toggle-switch">
<input type="checkbox" id="sidebar-show-home-toggle" checked />
<span class="slider"></span>
</label>
</div>
<div class="setting-item">
<div class="info">
<span class="label">Show Library in Sidebar</span>
<span class="description">Display the Library link in the sidebar navigation</span>
</div>
<label class="toggle-switch">
<input type="checkbox" id="sidebar-show-library-toggle" checked />
<span class="slider"></span>
</label>
</div>
<div class="setting-item">
<div class="info">
<span class="label">Show Recent in Sidebar</span>
<span class="description">Display the Recent link in the sidebar navigation</span>
</div>
<label class="toggle-switch">
<input type="checkbox" id="sidebar-show-recent-toggle" checked />
<span class="slider"></span>
</label>
</div>
<div class="setting-item">
<div class="info">
<span class="label">Show Unreleased in Sidebar</span>
<span class="description"
>Display the Unreleased link in the sidebar navigation</span
>
</div>
<label class="toggle-switch">
<input type="checkbox" id="sidebar-show-unreleased-toggle" checked />
<span class="slider"></span>
</label>
</div>
<div class="setting-item">
<div class="info">
<span class="label">Show Donate in Sidebar</span>
<span class="description">Display the Donate link in the sidebar navigation</span>
</div>
<label class="toggle-switch">
<input type="checkbox" id="sidebar-show-donate-toggle" checked />
<span class="slider"></span>
</label>
</div>
<div class="setting-item">
<div class="info">
<span class="label">Show Settings in Sidebar</span>
<span class="description">Display the Settings link in the sidebar navigation</span>
</div>
<label class="toggle-switch">
<input type="checkbox" id="sidebar-show-settings-toggle" checked />
<span class="slider"></span>
</label>
</div>
<div class="setting-item">
<div class="info">
<span class="label">Show Account in Sidebar</span>
<span class="description">Display the Account link in the sidebar navigation</span>
</div>
<label class="toggle-switch">
<input type="checkbox" id="sidebar-show-account-toggle" checked />
<span class="slider"></span>
</label>
</div>
<div class="setting-item">
<div class="info">
<span class="label">Show About in Sidebar</span>
<span class="description">Display the About link in the sidebar navigation</span>
</div>
<label class="toggle-switch">
<input type="checkbox" id="sidebar-show-about-toggle" checked />
<span class="slider"></span>
</label>
</div>
<div class="setting-item">
<div class="info">
<span class="label">Show Download in Sidebar</span>
<span class="description">Display the Download link in the sidebar navigation</span>
</div>
<label class="toggle-switch">
<input type="checkbox" id="sidebar-show-download-toggle" checked />
<span class="slider"></span>
</label>
</div>
<div class="setting-item">
<div class="info">
<span class="label">Show Discord in Sidebar</span>
<span class="description">Display the Discord link in the sidebar navigation</span>
</div>
<label class="toggle-switch">
<input type="checkbox" id="sidebar-show-discord-toggle" checked />
<span class="slider"></span>
</label>
</div>
</div>
<div class="settings-group">
<div class="setting-item">
<div class="info">

95
js/settings.js
View file

@ -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) {

165
js/storage.js
View file

@ -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) => {