Complete history of the Pop Song Chord Book development
GuitarChordTrainer.html) instead of the default Keyboard/Piano Chord Trainer (ChordTrainer.html).2 and 3 as in Am2 or C3) are now stripped from the chord names to show standard guitar diagrams (e.g., Am2 -> Am), while keeping the inversion/numbers for Keyboard mode, and preserving sus2 and add chord formats for both instruments.sidebar.css had no explicit line-height on .nav-item, so items inherited line-height: 1.6 from styles.css on songlist pages but the browser-default ~1.2 on ChordTrainer pages. This made each nav item ~7px shorter on the trainer pages, compressing the full nav group by ~56px and creating the visible shift. Fixed by adding line-height: 1.6 explicitly to .nav-item in sidebar.css so item height is consistent across all pages..app-sidebar from overflow-y: auto to overflow-y: hidden as an additional safeguard against any future scrollbar-related layout flicker in the fixed sidebar.?view= URL parameter immediately as the sidebar renders, before async JS runs.songlist2.html to render visual grids of Artists and Genres on click, enabling unified playlist filtering and seamless, responsive side navigation.600px) to be highly compact, reducing spacing and padding throughout the header, artist/title card, audio, and play/test mode buttons to maximize vertical workspace for the fretboard..overview-chord-card and .overview-chord-diagram card dimensions globally, and updated #chordOverviewGrid to use a tighter grid of repeat(auto-fill, minmax(120px, 1fr)) with 12px spacing. This fits many more chords onto the overview screen without layout breaking.recreateChordsBtn test button from GuitarChordTrainer.html, keeping the interface focused solely on the interactive chord diagrams.BACK button directly into the bottom action row to reclaim valuable vertical space and prevent fretboard clipping on mobile screens.💡 hint button, and shortened "CHECK SHAPE" and "SKIP CHORD" labels to CHECK and SKIP, creating a clean, single-row mobile layout.💡) from the mobile header actions when in Recreate (Practice) mode, guaranteeing a pure fretboard challenge from memory.0.85rem, recovering precious vertical and horizontal whitespace on smaller screens.📋, which dynamically switches to a guitar 🎸 when active, and updated all Recreate Chords buttons with matching icons.--hud-top-offset), leaving a clear space for the bar numbers (e.g. Bar 90, Bar 94) to be fully visible at all times.--hud-top-offset CSS variable to adjust the Lyrics HUD position in real-time.🌐 Beginner setlist right below the virtual 🌐 Public Songs setlist for a more natural layout order.BEGINNER to clean camelcase Beginner.🌐 Public Songs setlist could disappear from the dropdown during dynamic Firebase loads.(🔒 Public) text suffix from the BEGINNER setlist in the dropdown, retaining just the premium globe icon (🌐 BEGINNER).BEGINNER setlist available to all users. Regular users have read-only access with clear visual indicators (🌐/🔒), while the admin (jared@vanhensen.nl) has full write/edit access managed securely via Firebase.manifest.json with official App ID, detailed description, and high-resolution screenshots for better Store visibility and installation experience.
TypeError in the Profile Modal. The application now correctly handles cases where the profile modal elements are missing from the page (such as on the landing page), preventing initialization crashes.
TypeError in the Song Detail Modal initialization. Added robust safety checks to ensure the application remains stable even on pages where specific modal elements are missing.
mobile-web-app-capable meta tag, ensuring continued premium performance on mobile browsers.
add9 and maj7 are now fully stripped to their root/minor triads, making practice sessions more beginner-friendly.
!important flag.
default_songs.js file. New users now start with a clean library referencing the public database, resulting in faster initial page loads (saving >3MB bandwidth).
color-scheme: light) to prevent mobile browsers like Samsung Browser from applying unwanted color inversion.
.hidden class-based visibility logic.
onlyPublic filter state.
songRequests storage and retrieval.
this.publicSongsListeners not being initialized in the FirebaseManager constructor. Calling .has() on undefined caused a silent TypeError that crashed the entire enableSync() call, meaning the real-time public songs listener was never registered.
onPublicSongsChange method from FirebaseManager that was causing ambiguity. The obsolete single-argument version conflicted with the correct two-argument implementation.
publicSongs cache after saving to Firebase.
publicSongsListeners cleanup to the signOut() method to prevent stale listeners from running after a user logs out.
this.firebaseManager assignment in the SongDetailModal constructor. The property was accessed in handlePublishSong() but never stored on the class instance, causing the "Publish This Song Online" button to fail with an error even when logged in.
is-mobile-view) to bypass flaky CSS media queries on high-resolution mobile devices. This fixes layout issues where buttons would overlap with the title.
?debug=true to the URL, helping troubleshoot screen scaling and DPR issues.