Merge https://github.com/binimum/monochrome

index.html

@@ -2087,6 +2087,26 @@
                                         <button class="btn-secondary" id="reset-custom-theme">Reset</button>
                                     </div>
                                 </div>
+                                <div class="setting-item">
+                                    <div class="info">
+                                        <span class="label">Font</span>
+                                        <span class="description">Choose the application font</span>
+                                    </div>
+                                    <select id="font-select">
+                                        <option value="'Inter', sans-serif">Inter (Default)</option>
+                                        <option value="'Roboto', sans-serif">Roboto</option>
+                                        <option value="'Open Sans', sans-serif">Open Sans</option>
+                                        <option value="'Lato', sans-serif">Lato</option>
+                                        <option value="'Montserrat', sans-serif">Montserrat</option>
+                                        <option value="'Poppins', sans-serif">Poppins</option>
+                                        <option
+                                            value="system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif"
+                                        >
+                                            System UI
+                                        </option>
+                                        <option value="monospace">Monospace</option>
+                                    </select>
+                                </div>
                                 <div class="setting-item">
                                     <div class="info">
                                         <span class="label">Waveform Seekbar</span>
@@ -2913,7 +2933,7 @@
                                         <span class="description">Choose what shows when you click the album art</span>
                                     </div>
                                     <select id="now-playing-mode">
-                                        <option value="album">Show Album</option>
+                                        <option value="album">Go to Album</option>
                                         <option value="cover">Fullscreen Mode</option>
                                         <option value="lyrics">Lyrics Panel</option>
                                     </select>

js/app.js

@@ -1432,6 +1432,20 @@ document.addEventListener('DOMContentLoaded', async () => {
         showKeyboardShortcuts();
     });
 
+    // Font Settings
+    const fontSelect = document.getElementById('font-select');
+    if (fontSelect) {
+        const savedFont = localStorage.getItem('monochrome-font');
+        if (savedFont) {
+            fontSelect.value = savedFont;
+        }
+        fontSelect.addEventListener('change', (e) => {
+            const font = e.target.value;
+            document.documentElement.style.setProperty('--font-family', font);
+            localStorage.setItem('monochrome-font', font);
+        });
+    }
+
     // Listener for Pocketbase Sync updates
     window.addEventListener('library-changed', () => {
         const path = window.location.pathname;

js/events.js

@@ -1521,6 +1521,13 @@ export function initializeTrackInteractions(player, api, mainContent, contextMen
         }
     });
 
+    document.querySelector('.now-playing-bar .album').addEventListener('click', () => {
+        const track = player.currentTrack;
+        if (track?.album?.id) {
+            navigate(`/album/${track.album.id}`);
+        }
+    });
+
     document.querySelector('.now-playing-bar .artist').addEventListener('click', (e) => {
         const link = e.target.closest('.artist-link');
         if (link) {

js/ui.js

@@ -42,6 +42,8 @@ import {
     createProjectCardHTML,
     createTrackFromSong,
 } from './tracker.js';
+const savedFont = localStorage.getItem('monochrome-font');
+if (savedFont) document.documentElement.style.setProperty('--font-family', savedFont);
 
 function sortTracks(tracks, sortType) {
     if (sortType === 'custom') return [...tracks];

styles.css

@@ -280,7 +280,7 @@ html {
 body {
     background-color: var(--background);
     color: var(--foreground);
-    font-family: Inter, sans-serif;
+    font-family: var(--font-family, 'Inter', sans-serif);
     overflow: hidden;
     transition:
         background-color 0.3s ease,
@@ -1881,6 +1881,12 @@ input:checked + .slider::before {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+    cursor: pointer;
+    transition: color var(--transition);
+}
+
+.track-info .details .album:hover {
+    color: var(--highlight);
 }
 
 .track-info .details .artist {

todo.md

@@ -0,0 +1,24 @@
+# Feature Requests
+
+Sorted by ease of implementation (easiest to hardest):
+
+- [x] Album click navigation: Clicking on the album in the player bar navigates to the album page (default behavior - can be changed in settings)
+- [ ] Fix button overlap: Next track and casting buttons overlap on some screen resolutions
+- [ ] Reduce API calls: Minimize unnecessary API calls throughout the app
+- [ ] Editor's Picks: Create a JSON file of curated album IDs with metadata for the home screen. Include an option to disable in settings to avoid extra API calls.
+
+- [ ] Update notifications: Add ability to show the update popup in settings, with an option to automatically update (enabled by default)
+- [ ] Volume curve option: Add setting to switch between exponential and linear volume scaling
+- [ ] Custom fonts: Allow users to change fonts in settings or add custom fonts from Google Fonts or direct links
+
+- [ ] Audio effects: Add ability to change pitch and playback speed, plus effects like reverb, delay, and bitcrushing
+- [ ] Customizable EQ: Allow users to change the number of EQ bands and their range (-30 to 30), with a drag-to-adjust interface similar to FL Studio's velocity editor
+
+[ ] SoundCloud support: Integrate SoundCloud through SoundCloak
+[ ] Qobuz support: Integrate Qobuz through Qobuz-DL
+
+---
+
+## Bug Fixes
+
+- [ ] Next track and casting buttons overlap on some resolutions