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

Merge pull request #143 from blacksigkill/feature/tabbed-settings

Browse source 
Tabbed settings / settings split in sections
This commit is contained in:
Samidy 2026-02-04 16:35:10 +03:00 committed by GitHub
commit 68ee80c2ba
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 872 additions and 733 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

137
index.html
View file

@ -1964,6 +1964,15 @@
<div id="page-settings" class="page"> <div id="page-settings" class="page">
<h2 class="section-title">Settings</h2> <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-list">
<div class="settings-group"> <div class="settings-group">
<div class="setting-item"> <div class="setting-item">
@ -1998,7 +2007,8 @@
<div class="info"> <div class="info">
<span class="label">Waveform Seekbar</span> <span class="label">Waveform Seekbar</span>
<span class="description" <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> </div>
<label class="toggle-switch"> <label class="toggle-switch">
@ -2082,8 +2092,9 @@
<span class="description" <span class="description"
>Adjust the intensity of the visualizer effects. >Adjust the intensity of the visualizer effects.
<strong <strong
>Warning: High sensitivity may cause flashing lights and rapid motion, which >Warning: High sensitivity may cause flashing lights and rapid motion,
can trigger seizures in people with photosensitive epilepsy.</strong which can trigger seizures in people with photosensitive
epilepsy.</strong
></span ></span
> >
</div> </div>
@ -2105,6 +2116,22 @@
</div> </div>
</div> </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">
<span class="label">ListenBrainz Scrobbling</span>
<span class="description"
>Submit listens to ListenBrainz (requires User Token)</span
>
</div>
<label class="toggle-switch">
<input type="checkbox" id="listenbrainz-enabled-toggle" />
<span class="slider"></span>
</label>
<div class="settings-group"> <div class="settings-group">
<div class="setting-item"> <div class="setting-item">
@ -2264,11 +2291,6 @@
>Submit listens to ListenBrainz (requires User Token)</span >Submit listens to ListenBrainz (requires User Token)</span
> >
</div> </div>
<label class="toggle-switch">
<input type="checkbox" id="listenbrainz-enabled-toggle" />
<span class="slider"></span>
</label>
</div>
<div class="setting-item" id="listenbrainz-token-setting" style="display: none"> <div class="setting-item" id="listenbrainz-token-setting" style="display: none">
<div class="info"> <div class="info">
<span class="label">User Token</span> <span class="label">User Token</span>
@ -2321,7 +2343,10 @@
</label> </label>
</div> </div>
</div> </div>
</div>
</div>
<div class="settings-tab-content" id="settings-tab-audio">
<div class="settings-list">
<div class="settings-group"> <div class="settings-group">
<div class="setting-item"> <div class="setting-item">
<div class="info"> <div class="info">
@ -2370,6 +2395,20 @@
<span class="slider"></span> <span class="slider"></span>
</label> </label>
</div> </div>
<div class="setting-item">
<div class="info">
<span class="label">Gapless Playback</span>
<span class="description">Play audio without interruption between tracks</span>
</div>
<label class="toggle-switch">
<input type="checkbox" checked />
<span class="slider"></span>
</label>
<label class="toggle-switch">
<input type="checkbox" id="show-quality-badges-toggle" checked />
<span class="slider"></span>
</label>
</div>
<div class="setting-item"> <div class="setting-item">
<div class="info"> <div class="info">
<span class="label">Album release year</span> <span class="label">Album release year</span>
@ -2387,11 +2426,6 @@
<span class="label">Gapless Playback</span> <span class="label">Gapless Playback</span>
<span class="description">Play audio without interruption between tracks</span> <span class="description">Play audio without interruption between tracks</span>
</div> </div>
<label class="toggle-switch">
<input type="checkbox" checked />
<span class="slider"></span>
</label>
</div>
<div class="setting-item"> <div class="setting-item">
<div class="info"> <div class="info">
<span class="label">ReplayGain Mode</span> <span class="label">ReplayGain Mode</span>
@ -2408,14 +2442,22 @@
<span class="label">ReplayGain Pre-Amp</span> <span class="label">ReplayGain Pre-Amp</span>
<span class="description">Adjust gain manually (dB)</span> <span class="description">Adjust gain manually (dB)</span>
</div> </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> </div>
<!-- 16-Band Equalizer --> <!-- 16-Band Equalizer -->
<div class="setting-item"> <div class="setting-item">
<div class="info"> <div class="info">
<span class="label">Equalizer</span> <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> </div>
<label class="toggle-switch"> <label class="toggle-switch">
<input type="checkbox" id="equalizer-enabled-toggle" /> <input type="checkbox" id="equalizer-enabled-toggle" />
@ -2445,7 +2487,11 @@
<option value="acoustic">Acoustic</option> <option value="acoustic">Acoustic</option>
<option value="podcast">Podcast / Speech</option> <option value="podcast">Podcast / Speech</option>
</select> </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 <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
width="16" width="16"
@ -2683,7 +2729,10 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</div>
<div class="settings-tab-content" id="settings-tab-interface">
<div class="settings-list">
<div class="settings-group"> <div class="settings-group">
<div class="setting-item"> <div class="setting-item">
<div class="info"> <div class="info">
@ -2700,7 +2749,9 @@
<div class="setting-item"> <div class="setting-item">
<div class="info"> <div class="info">
<span class="label">Compact Artists</span> <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> </div>
<label class="toggle-switch"> <label class="toggle-switch">
<input type="checkbox" id="compact-artist-toggle" /> <input type="checkbox" id="compact-artist-toggle" />
@ -2710,7 +2761,9 @@
<div class="setting-item"> <div class="setting-item">
<div class="info"> <div class="info">
<span class="label">Compact Albums</span> <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> </div>
<label class="toggle-switch"> <label class="toggle-switch">
<input type="checkbox" id="compact-album-toggle" /> <input type="checkbox" id="compact-album-toggle" />
@ -2718,13 +2771,17 @@
</label> </label>
</div> </div>
</div> </div>
</div>
</div>
<div class="settings-tab-content" id="settings-tab-downloads">
<div class="settings-list">
<div class="settings-group"> <div class="settings-group">
<div class="setting-item"> <div class="setting-item">
<div class="info"> <div class="info">
<span class="label">Zipped Bulk Downloads</span> <span class="label">Zipped Bulk Downloads</span>
<span class="description" <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> </div>
<label class="toggle-switch"> <label class="toggle-switch">
@ -2735,7 +2792,9 @@
<div class="setting-item"> <div class="setting-item">
<div class="info"> <div class="info">
<span class="label">Download Lyrics</span> <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> </div>
<label class="toggle-switch"> <label class="toggle-switch">
<input type="checkbox" id="download-lyrics-toggle" /> <input type="checkbox" id="download-lyrics-toggle" />
@ -2797,7 +2856,9 @@
<div class="setting-item"> <div class="setting-item">
<div class="info"> <div class="info">
<span class="label">Generate M3U8</span> <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> </div>
<label class="toggle-switch"> <label class="toggle-switch">
<input type="checkbox" id="generate-m3u8-toggle" /> <input type="checkbox" id="generate-m3u8-toggle" />
@ -2819,7 +2880,9 @@
<div class="setting-item"> <div class="setting-item">
<div class="info"> <div class="info">
<span class="label">Generate NFO</span> <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> </div>
<label class="toggle-switch"> <label class="toggle-switch">
<input type="checkbox" id="generate-nfo-toggle" /> <input type="checkbox" id="generate-nfo-toggle" />
@ -2847,7 +2910,10 @@
</label> </label>
</div> </div>
</div> </div>
</div>
</div>
<div class="settings-tab-content" id="settings-tab-system">
<div class="settings-list">
<div class="settings-group"> <div class="settings-group">
<div class="setting-item"> <div class="setting-item">
<div class="info"> <div class="info">
@ -2875,18 +2941,27 @@
<div class="setting-item"> <div class="setting-item">
<div class="info"> <div class="info">
<span class="label">Backup & Restore</span> <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>
<div style="display: flex; gap: 0.5rem"> <div style="display: flex; gap: 0.5rem">
<button id="export-library-btn" class="btn-secondary">Export</button> <button id="export-library-btn" class="btn-secondary">Export</button>
<button id="import-library-btn" class="btn-secondary">Import</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> </div>
<div class="setting-item"> <div class="setting-item">
<div class="info"> <div class="info">
<span class="label">ADVANCED: Custom Database/Auth</span> <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> </div>
<button id="custom-db-btn" class="btn-secondary">Configure</button> <button id="custom-db-btn" class="btn-secondary">Configure</button>
</div> </div>
@ -2895,7 +2970,8 @@
<div class="info"> <div class="info">
<span class="label">API Instances</span> <span class="label">API Instances</span>
<span class="description" <span class="description"
>Manage and prioritize API instances. Automatically sorted by speed.</span >Manage and prioritize API instances. Automatically sorted by
speed.</span
> >
</div> </div>
<button id="refresh-speed-test-btn" class="btn-secondary"> <button id="refresh-speed-test-btn" class="btn-secondary">
@ -2907,6 +2983,7 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<div id="page-about" class="page"> <div id="page-about" class="page">
<h2 class="section-title">About Monochrome</h2> <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 // Tooltip for truncated text
let tooltipEl = document.getElementById('custom-tooltip'); let tooltipEl = document.getElementById('custom-tooltip');
if (!tooltipEl) { if (!tooltipEl) {

49
styles.css
View file

@ -890,6 +890,55 @@ input[type='search']::-webkit-search-cancel-button {
/* Use standardized animation */ /* 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 { .card-grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));