From d04e173ab7e18e2b11f933aa3b863d5684f797c9 Mon Sep 17 00:00:00 2001 From: BlackSigkill Date: Wed, 4 Feb 2026 17:12:51 +0100 Subject: [PATCH 1/3] re: add tabbed sections in settings panel --- index.html | 45 ++++++++++++++++++++++++++++++--------- js/ui-interactions.js | 13 ++++++++++++ styles.css | 49 +++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 97 insertions(+), 10 deletions(-) diff --git a/index.html b/index.html index 7173669..e01e647 100644 --- a/index.html +++ b/index.html @@ -1964,11 +1964,20 @@

Settings

-
-
-
-
- Theme +
+ + + + + + +
+
+
+
+
+
+ Theme Choose your preferred color scheme
@@ -2105,7 +2114,10 @@
- +
+
+
+
@@ -2255,7 +2267,10 @@
- +
+
+
+
@@ -2321,7 +2336,10 @@
- +
+
+
+
@@ -2718,7 +2736,10 @@
- +
+
+
+
@@ -2847,7 +2868,10 @@
- +
+
+
+
@@ -2907,6 +2931,7 @@
+

About Monochrome

diff --git a/js/ui-interactions.js b/js/ui-interactions.js index 5d43030..f2fd1be 100644 --- a/js/ui-interactions.js +++ b/js/ui-interactions.js @@ -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) { diff --git a/styles.css b/styles.css index 1ef7b15..6620248 100644 --- a/styles.css +++ b/styles.css @@ -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)); From 5ffced823b4c4152e6a65815e4580d287a684172 Mon Sep 17 00:00:00 2001 From: BlackSigkill Date: Wed, 4 Feb 2026 17:13:46 +0100 Subject: [PATCH 2/3] auto fix linting and formatting --- index.html | 1933 +++++++++++++++++++++++++++------------------------- 1 file changed, 992 insertions(+), 941 deletions(-) diff --git a/index.html b/index.html index e01e647..6d3d827 100644 --- a/index.html +++ b/index.html @@ -1978,959 +1978,1010 @@
Theme - Choose your preferred color scheme -
-
-
-
System
-
Light
-
Dark
-
Black
-
Ocean
-
Purple
-
Forest
-
Mocha
-
Machiatto
-
Frappé
-
Latte
-
Custom
-
-
-

Custom Theme

-
-
- - -
-
-
-
- Waveform Seekbar - Show a visual waveform of the track in the progress bar (Experimental) -
- -
-
-
- Smooth Scrolling - Provides a smoother scrolling experience with Lenis (Experimental) -
- -
-
-
- Album Cover Background - Use the album cover as a blurred background on album pages and as primary - color -
- -
-
-
- Full-screen Visualizer - Enable particle visualizer in full-screen mode -
- -
-
-
- Visualizer Style - Select the visualization style -
- -
-
-
- Visualizer Mode - Choose how the visualizer is displayed in full-screen -
- -
-
-
- Smart Intensity Switching - Automatically adjust visualizer intensity based on song energy -
- -
-
-
- Visualizer Sensitivity - Adjust the intensity of the visualizer effects. - Warning: High sensitivity may cause flashing lights and rapid motion, which - can trigger seizures in people with photosensitive epilepsy. -
-
- - 60% -
-
-
-
-
-
-
-
-
-
- Show Recommended Songs - Display recommended songs on the home page -
- -
-
-
- Show Recommended Albums - Display recommended albums on the home page -
- -
-
-
- Show Recommended Artists - Display recommended artists on the home page -
- -
-
-
- Show Jump Back In - Display recent albums, playlists, and mixes on the home page -
- -
-
- -
-
-
- 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 -
- -
-
-
-
-
-
-
-
-
- ListenBrainz Scrobbling - Submit listens to ListenBrainz (requires User Token) -
- -
- -
- -
-
-
- Last.fm Scrobbling - Connect your Last.fm account to scrobble tracks -
-
- -
-
- - - - -
-
-
-
-
-
-
-
- Streaming Quality - Quality for streaming playback -
- -
-
-
- Download Quality - Quality for track downloads -
- -
-
-
- Cover Art Size - Size for downloaded/embedded cover art -
- -
-
-
- Show Quality Badges - Display "HD" badge for Hi-Res tracks -
- -
-
-
- Album release year - Show original album year instead of track/remaster date -
- -
-
-
- Gapless Playback - Play audio without interruption between tracks -
- -
-
-
- ReplayGain Mode - Normalize volume across tracks -
- -
-
-
- ReplayGain Pre-Amp - Adjust gain manually (dB) -
- -
- - -
-
- Equalizer - 16-band parametric equalizer for fine audio control -
- -
- - -
-
-
-
-
-
- Zipped Bulk Downloads - Download multiple tracks as a single ZIP file (requires browser support) -
- -
-
-
- Download Lyrics - Include .lrc files when downloading tracks/albums -
- -
-
-
- Romaji Lyrics - Convert Japanese lyrics to Romaji (Latin characters) -
- -
-
-
- Filename Template - Customize download filenames. Available: {trackNumber}, {artist}, {title}, - {album} -
- -
-
-
- ZIP Folder Template - Customize album folder names. Available: {albumTitle}, {albumArtist}, - {year} -
- -
-
-
- Generate M3U - Include M3U playlist files in downloads -
- -
-
-
- Generate M3U8 - Include extended M3U8 playlist files in downloads -
- -
-
-
- Generate CUE - Include CUE sheets for gapless playback in downloads -
- -
-
-
- Generate NFO - Include NFO files for media center compatibility -
- -
-
-
- Generate JSON - Include JSON files with rich metadata -
- -
-
-
- Relative Paths - Use relative paths in playlist files -
- -
-
-
-
-
-
-
-
-
- Keyboard Shortcuts - View available keyboard shortcuts -
- -
- -
-
- Cache - Stores API responses to reduce requests -
- -
-
-
- Backup & Restore - Export or import your library and history as JSON -
-
- - - -
-
-
-
- ADVANCED: Custom Database/Auth - Configure custom PocketBase and Firebase instances -
- -
-
-
+
- API Instances + Waveform Seekbar Manage and prioritize API instances. Automatically sorted by speed.Show a visual waveform of the track in the progress bar + (Experimental) +
+ +
+
+
+ Smooth Scrolling + Provides a smoother scrolling experience with Lenis (Experimental) +
+ +
+
+
+ Album Cover Background + Use the album cover as a blurred background on album pages and as primary + color +
+ +
+
+
+ Full-screen Visualizer + Enable particle visualizer in full-screen mode +
+ +
+
+
+ Visualizer Style + Select the visualization style +
+ +
+
+
+ Visualizer Mode + Choose how the visualizer is displayed in full-screen +
+ +
+
+
+ Smart Intensity Switching + Automatically adjust visualizer intensity based on song energy +
+ +
+
+
+ Visualizer Sensitivity + Adjust the intensity of the visualizer effects. + Warning: High sensitivity may cause flashing lights and rapid motion, + which can trigger seizures in people with photosensitive + epilepsy. +
+
+ + 60%
-
-
    -
    +
    +
    +
    +
    +
    + Show Recommended Songs + Display recommended songs on the home page +
    + +
    +
    +
    + Show Recommended Albums + Display recommended albums on the home page +
    + +
    +
    +
    + Show Recommended Artists + Display recommended artists on the home page +
    + +
    +
    +
    + Show Jump Back In + Display recent albums, playlists, and mixes on the home page +
    + +
    +
    + +
    +
    +
    + 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 +
    + +
    +
    +
    +
    +
    +
    +
    +
    +
    + ListenBrainz Scrobbling + Submit listens to ListenBrainz (requires User Token) +
    + +
    + +
    + +
    +
    +
    + Last.fm Scrobbling + Connect your Last.fm account to scrobble tracks +
    +
    + +
    +
    + + + + +
    +
    +
    +
    +
    +
    +
    +
    + Streaming Quality + Quality for streaming playback +
    + +
    +
    +
    + Download Quality + Quality for track downloads +
    + +
    +
    +
    + Cover Art Size + Size for downloaded/embedded cover art +
    + +
    +
    +
    + Show Quality Badges + Display "HD" badge for Hi-Res tracks +
    + +
    +
    +
    + Album release year + Show original album year instead of track/remaster date +
    + +
    +
    +
    + Gapless Playback + Play audio without interruption between tracks +
    + +
    +
    +
    + ReplayGain Mode + Normalize volume across tracks +
    + +
    +
    +
    + ReplayGain Pre-Amp + Adjust gain manually (dB) +
    + +
    + + +
    +
    + Equalizer + 16-band parametric equalizer for fine audio control +
    + +
    + + +
    + +
    +
    +
    + Now Playing View Mode + Choose what shows when you click the album art +
    + +
    + +
    +
    + Compact Artists + Show artist cards in a compact, horizontal layout +
    + +
    +
    +
    + Compact Albums + Show album cards in a compact, horizontal layout +
    + +
    +
    +
    +
    +
    +
    +
    +
    +
    + Zipped Bulk Downloads + Download multiple tracks as a single ZIP file (requires browser + support) +
    + +
    +
    +
    + Download Lyrics + Include .lrc files when downloading tracks/albums +
    + +
    +
    +
    + Romaji Lyrics + Convert Japanese lyrics to Romaji (Latin characters) +
    + +
    +
    +
    + Filename Template + Customize download filenames. Available: {trackNumber}, {artist}, {title}, + {album} +
    + +
    +
    +
    + ZIP Folder Template + Customize album folder names. Available: {albumTitle}, {albumArtist}, + {year} +
    + +
    +
    +
    + Generate M3U + Include M3U playlist files in downloads +
    + +
    +
    +
    + Generate M3U8 + Include extended M3U8 playlist files in downloads +
    + +
    +
    +
    + Generate CUE + Include CUE sheets for gapless playback in downloads +
    + +
    +
    +
    + Generate NFO + Include NFO files for media center compatibility +
    + +
    +
    +
    + Generate JSON + Include JSON files with rich metadata +
    + +
    +
    +
    + Relative Paths + Use relative paths in playlist files +
    + +
    +
    +
    +
    +
    +
    +
    +
    +
    + Keyboard Shortcuts + View available keyboard shortcuts +
    + +
    + +
    +
    + Cache + Stores API responses to reduce requests +
    + +
    +
    +
    + Backup & Restore + Export or import your library and history as JSON +
    +
    + + + +
    +
    +
    +
    + ADVANCED: Custom Database/Auth + Configure custom PocketBase and Firebase instances +
    + +
    +
    +
    +
    + API Instances + Manage and prioritize API instances. Automatically sorted by + speed. +
    + +
    +
      +
      +
      +
      +
      From 7685d8b4d3b3e6fea09dc9ef355f7331b0537a80 Mon Sep 17 00:00:00 2001 From: BlackSigkill Date: Wed, 4 Feb 2026 17:16:03 +0100 Subject: [PATCH 3/3] fix linting warning --- js/accounts/pocketbase.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/accounts/pocketbase.js b/js/accounts/pocketbase.js index 2e1ebcd..78134a2 100644 --- a/js/accounts/pocketbase.js +++ b/js/accounts/pocketbase.js @@ -115,7 +115,7 @@ const syncManager = { return new Function('return ' + jsFriendly)(); } } - } catch (e) { + } catch { // Ignore fallback error } return fallback;