FEAT: add desktop navigation buttons (back/forward)

index.html

@@ -143,6 +143,14 @@
         <main class="main-content">
             <div id="page-background"></div>
             <header class="main-header">
+                <div class="navigation-controls desktop-only">
+                    <button id="nav-back" class="nav-btn" title="Go Back">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
+                    </button>
+                    <button id="nav-forward" class="nav-btn" title="Go Forward">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
+                    </button>
+                </div>
                 <button class="hamburger-menu" id="hamburger-btn" title="Open navigation">
                     <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                         <line x1="3" y1="12" x2="21" y2="12"></line>

js/app.js

@@ -248,6 +248,14 @@ document.addEventListener('DOMContentLoaded', async () => {
         ui.closeFullscreenCover();
     });
 
+    document.getElementById('nav-back')?.addEventListener('click', () => {
+        window.history.back();
+    });
+
+    document.getElementById('nav-forward')?.addEventListener('click', () => {
+        window.history.forward();
+    });
+
     document.getElementById('toggle-lyrics-btn')?.addEventListener('click', async (e) => {
         e.stopPropagation();
         if (!player.currentTrack) {
@@ -636,6 +644,34 @@ document.addEventListener('DOMContentLoaded', async () => {
     router();
     window.addEventListener('hashchange', router);
 
+    // Simple Navigation History
+    const navStack = [window.location.hash];
+    let navIndex = 0;
+
+    const updateNavButtons = () => {
+        const backBtn = document.getElementById('nav-back');
+        const fwdBtn = document.getElementById('nav-forward');
+        if (backBtn) backBtn.disabled = navIndex <= 0;
+        if (fwdBtn) fwdBtn.disabled = navIndex >= navStack.length - 1;
+    };
+
+    window.addEventListener('hashchange', () => {
+        const hash = window.location.hash;
+        if (hash === navStack[navIndex]) return;
+
+        if (navIndex > 0 && hash === navStack[navIndex - 1]) {
+            navIndex--; // User went back
+        } else if (navIndex < navStack.length - 1 && hash === navStack[navIndex + 1]) {
+            navIndex++; // User went forward
+        } else {
+            navIndex++;
+            navStack.splice(navIndex); // Truncate forward history
+            navStack.push(hash);
+        }
+        updateNavButtons();
+    });
+    updateNavButtons();
+
     audioPlayer.addEventListener('play', () => {
         updateTabTitle(player);
     });

styles.css

@@ -430,6 +430,37 @@ kbd {
     position: relative;
 }
 
+.navigation-controls {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+}
+
+.nav-btn {
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    background-color: var(--card);
+    border: none;
+    color: var(--foreground);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.nav-btn:hover {
+    background-color: var(--secondary);
+    transform: scale(1.05);
+}
+
+.nav-btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    transform: none;
+}
+
 .hamburger-menu {
     display: none;
     background: transparent;