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

Create tabs/sections in settings panel

Browse source
This commit is contained in:
BlackSigkill 2026-02-03 22:21:34 +01:00
parent 50834a48e0
commit 249c5d3f97
3 changed files with 894 additions and 772 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

102
index.html
View file

@ -1915,6 +1915,15 @@
<div id="page-settings" class="page">
<h2 class="section-title">Settings</h2>
<div class="settings-tabs">
<button class="settings-tab active" data-tab="appearance">Appearance</button>
<button class="settings-tab" data-tab="scrobbling">Scrobbling</button>
<button class="settings-tab" data-tab="audio">Audio</button>
<button class="settings-tab" data-tab="interface">Interface</button>
<button class="settings-tab" data-tab="downloads">Downloads</button>
<button class="settings-tab" data-tab="system">System</button>
</div>
<div class="settings-tab-content active" id="settings-tab-appearance">
<div class="settings-list">
<div class="settings-group">
<div class="setting-item">
@ -1949,7 +1958,8 @@
<div class="info">
<span class="label">Waveform Seekbar</span>
<span class="description"
>Show a visual waveform of the track in the progress bar (Experimental)</span
>Show a visual waveform of the track in the progress bar
(Experimental)</span
>
</div>
<label class="toggle-switch">
@ -2033,8 +2043,9 @@
<span class="description"
>Adjust the intensity of the visualizer effects.
<strong
>Warning: High sensitivity may cause flashing lights and rapid motion, which
can trigger seizures in people with photosensitive epilepsy.</strong
>Warning: High sensitivity may cause flashing lights and rapid motion,
which can trigger seizures in people with photosensitive
epilepsy.</strong
></span
>
</div>
@ -2056,7 +2067,10 @@
</div>
</div>
</div>
</div>
</div>
<div class="settings-tab-content" id="settings-tab-scrobbling">
<div class="settings-list">
<div class="settings-group">
<div class="setting-item">
<div class="info">
@ -2122,7 +2136,10 @@
</label>
</div>
</div>
</div>
</div>
<div class="settings-tab-content" id="settings-tab-audio">
<div class="settings-list">
<div class="settings-group">
<div class="setting-item">
<div class="info">
@ -2197,14 +2214,22 @@
<span class="label">ReplayGain Pre-Amp</span>
<span class="description">Adjust gain manually (dB)</span>
</div>
<input type="number" id="replay-gain-preamp" value="3" step="0.5" style="width: 80px" />
<input
type="number"
id="replay-gain-preamp"
value="3"
step="0.5"
style="width: 80px"
/>
</div>
<!-- 16-Band Equalizer -->
<div class="setting-item">
<div class="info">
<span class="label">Equalizer</span>
<span class="description">16-band parametric equalizer for fine audio control</span>
<span class="description"
>16-band parametric equalizer for fine audio control</span
>
</div>
<label class="toggle-switch">
<input type="checkbox" id="equalizer-enabled-toggle" />
@ -2234,7 +2259,11 @@
<option value="acoustic">Acoustic</option>
<option value="podcast">Podcast / Speech</option>
</select>
<button id="equalizer-reset-btn" class="btn-secondary" title="Reset to Flat">
<button
id="equalizer-reset-btn"
class="btn-secondary"
title="Reset to Flat"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
@ -2472,7 +2501,10 @@
</div>
</div>
</div>
</div>
</div>
<div class="settings-tab-content" id="settings-tab-interface">
<div class="settings-list">
<div class="settings-group">
<div class="setting-item">
<div class="info">
@ -2489,7 +2521,9 @@
<div class="setting-item">
<div class="info">
<span class="label">Compact Artists</span>
<span class="description">Show artist cards in a compact, horizontal layout</span>
<span class="description"
>Show artist cards in a compact, horizontal layout</span
>
</div>
<label class="toggle-switch">
<input type="checkbox" id="compact-artist-toggle" />
@ -2499,7 +2533,9 @@
<div class="setting-item">
<div class="info">
<span class="label">Compact Albums</span>
<span class="description">Show album cards in a compact, horizontal layout</span>
<span class="description"
>Show album cards in a compact, horizontal layout</span
>
</div>
<label class="toggle-switch">
<input type="checkbox" id="compact-album-toggle" />
@ -2507,13 +2543,17 @@
</label>
</div>
</div>
</div>
</div>
<div class="settings-tab-content" id="settings-tab-downloads">
<div class="settings-list">
<div class="settings-group">
<div class="setting-item">
<div class="info">
<span class="label">Zipped Bulk Downloads</span>
<span class="description"
>Download multiple tracks as a single ZIP file (requires browser support)</span
>Download multiple tracks as a single ZIP file (requires browser
support)</span
>
</div>
<label class="toggle-switch">
@ -2524,7 +2564,9 @@
<div class="setting-item">
<div class="info">
<span class="label">Download Lyrics</span>
<span class="description">Include .lrc files when downloading tracks/albums</span>
<span class="description"
>Include .lrc files when downloading tracks/albums</span
>
</div>
<label class="toggle-switch">
<input type="checkbox" id="download-lyrics-toggle" />
@ -2586,7 +2628,9 @@
<div class="setting-item">
<div class="info">
<span class="label">Generate M3U8</span>
<span class="description">Include extended M3U8 playlist files in downloads</span>
<span class="description"
>Include extended M3U8 playlist files in downloads</span
>
</div>
<label class="toggle-switch">
<input type="checkbox" id="generate-m3u8-toggle" />
@ -2608,7 +2652,9 @@
<div class="setting-item">
<div class="info">
<span class="label">Generate NFO</span>
<span class="description">Include NFO files for media center compatibility</span>
<span class="description"
>Include NFO files for media center compatibility</span
>
</div>
<label class="toggle-switch">
<input type="checkbox" id="generate-nfo-toggle" />
@ -2636,7 +2682,10 @@
</label>
</div>
</div>
</div>
</div>
<div class="settings-tab-content" id="settings-tab-system">
<div class="settings-list">
<div class="settings-group">
<div class="setting-item">
<div class="info">
@ -2664,18 +2713,27 @@
<div class="setting-item">
<div class="info">
<span class="label">Backup & Restore</span>
<span class="description">Export or import your library and history as JSON</span>
<span class="description"
>Export or import your library and history as JSON</span
>
</div>
<div style="display: flex; gap: 0.5rem">
<button id="export-library-btn" class="btn-secondary">Export</button>
<button id="import-library-btn" class="btn-secondary">Import</button>
<input type="file" id="import-library-input" style="display: none" accept=".json" />
<input
type="file"
id="import-library-input"
style="display: none"
accept=".json"
/>
</div>
</div>
<div class="setting-item">
<div class="info">
<span class="label">ADVANCED: Custom Database/Auth</span>
<span class="description">Configure custom PocketBase and Firebase instances</span>
<span class="description"
>Configure custom PocketBase and Firebase instances</span
>
</div>
<button id="custom-db-btn" class="btn-secondary">Configure</button>
</div>
@ -2684,7 +2742,8 @@
<div class="info">
<span class="label">API Instances</span>
<span class="description"
>Manage and prioritize API instances. Automatically sorted by speed.</span
>Manage and prioritize API instances. Automatically sorted by
speed.</span
>
</div>
<button id="refresh-speed-test-btn" class="btn-secondary">
@ -2696,6 +2755,7 @@
</div>
</div>
</div>
</div>
<div id="page-about" class="page">
<h2 class="section-title">About Monochrome</h2>

13
js/ui-interactions.js
View file

@ -473,6 +473,19 @@ export function initializeUIInteractions(player, api, ui) {
});
});
// Settings tabs
document.querySelectorAll('.settings-tab').forEach((tab) => {
tab.addEventListener('click', () => {
document.querySelectorAll('.settings-tab').forEach((t) => t.classList.remove('active'));
document.querySelectorAll('.settings-tab-content').forEach((c) => c.classList.remove('active'));
tab.classList.add('active');
const contentId = `settings-tab-${tab.dataset.tab}`;
document.getElementById(contentId)?.classList.add('active');
});
});
// Tooltip for truncated text
let tooltipEl = document.getElementById('custom-tooltip');
if (!tooltipEl) {

49
styles.css
View file

@ -890,6 +890,55 @@ input[type='search']::-webkit-search-cancel-button {
/* Use standardized animation */
}
/* Settings Tabs */
.settings-tabs {
display: flex;
gap: var(--spacing-xs);
margin-bottom: var(--spacing-lg);
border-bottom: 1px solid var(--border);
flex-wrap: wrap;
}
.settings-tab {
background: transparent;
border: none;
color: var(--muted-foreground);
padding: var(--spacing-sm) var(--spacing-lg);
cursor: pointer;
font-size: 1rem;
font-weight: 500;
border-bottom: 2px solid transparent;
border-radius: var(--radius-sm) var(--radius-sm) 0 0;
transition:
color var(--transition-fast),
background-color var(--transition-fast),
transform var(--transition-fast);
position: relative;
}
.settings-tab:hover {
color: var(--foreground);
background-color: rgb(var(--highlight-rgb), 0.05);
}
.settings-tab:active {
transform: translateY(1px);
}
.settings-tab.active {
color: var(--foreground);
border-bottom-color: var(--highlight);
}
.settings-tab-content {
display: none;
}
.settings-tab-content.active {
display: block;
animation: fade-in-slide-up 0.4s var(--ease-out-back);
}
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));