Minor styling fixes and ux improvements

static/css/style.css

@@ -375,7 +375,7 @@ section.sticky {
     transform: translateY(0);
     transition: var(--transition-medium) transform, var(--transition-medium) height;
     visibility: visible;
-    max-height: 70vh;
+    max-height: 75vh;
     width: 100%;
     z-index: 10;
 }
@@ -463,11 +463,24 @@ section .header .add-button {
     margin-bottom: 20px;
 }
 
-#add-to-playlist-container select,
-#add-to-playlist-container button {
+#add-to-playlist-container {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+#add-to-playlist-container h3{
+    margin: 0 10px 0 0;
+    align-self: center;
+}
+
+#add-to-playlist-container select{
+    width: auto;
+    flex-grow: 1;
+    margin: 0;
+}
+
+#add-to-playlist-container .action-buttons {
     margin-top: 10px;
-    display: block;
-    width: 100%;
 }
 
 .playlist-parameters {
@@ -743,7 +756,7 @@ button#debug_button.active {
     border: 1px solid var(--border-primary);
     background: var(--theme-secondary);
     border-radius: 100%;
-    padding: 30px;
+    padding: 15px;
 }
 
 #pattern-preview {
@@ -810,12 +823,8 @@ body.playing #currently-playing-container .header .open-button {
     margin: 0;
 }
 
-body.playing #currently-playing-preview {
-    padding: 10px;
-}
-
 body.playing #currently-playing-preview #currentlyPlayingCanvas {
-    max-width:80px;
+    max-width:100px;
     padding: 5px;
 }
 
@@ -843,10 +852,6 @@ body.playing #currently-playing-container:not(.open) #progress-container {
     width: 100%;
 }
 
-body.playing #currently-playing-container:not(.open) #play_progress_text {
-    display: none;
-}
-
 
 #currentlyPlayingCanvas {
     width: 100%;
@@ -875,12 +880,12 @@ body.playing #currently-playing-container:not(.open) #play_progress_text {
     align-items: center;
     justify-content: center;
     width: 100%;
-    margin: 5px 0;
     flex-wrap: wrap;
 }
 
 #play_progress {
-    width: 100%;
+    width: auto;
+    flex-grow: 1;
     height: 8px;
     appearance: none;
     background-color: var(--border-primary);
@@ -1093,6 +1098,7 @@ input[type="number"]:focus {
     backdrop-filter: blur(2px);
     opacity: 0;
     transition: opacity var(--transition-medium);
+    cursor: pointer;
 }
 .notification.show {
     opacity: 1; /* Fully visible */
@@ -1228,6 +1234,15 @@ input[type="number"]:focus {
         bottom: 0;
     }
 
+    body.playing #currently-playing-container:not(.open) #currently-playing-details {
+        flex-direction: row;
+        align-items: center;
+    }
+
+    #currently-playing-container h3 {
+        flex-grow: 1;
+    }
+
     body.playing #currently-playing-container.open .header {
         display: none;
     }

static/js/main.js

@@ -63,9 +63,28 @@ function logMessage(message, type = LOG_TYPE.DEBUG, clickTargetId = null) {
         notification.onclick = () => {
             const target = document.getElementById(clickTargetId);
             if (target) {
-                target.click();
-            } else {
-                console.error(`Error: Target with ID "${clickTargetId}" not found`);
+                // Find the closest <main> parent
+                const parentMain = target.closest('main');
+                if (parentMain) {
+                    // Remove 'active' class from all <main> elements
+                    document.querySelectorAll('main').forEach((main) => {
+                        main.classList.remove('active');
+                    });
+                    // Add 'active' class to the parent <main>
+                    parentMain.classList.add('active');
+                    target.click();
+
+                    // Update tab buttons based on the parent <main> ID
+                    const parentId = parentMain.id; // e.g., "patterns-tab"
+                    const tabId = `nav-${parentId.replace('-tab', '')}`; // e.g., "nav-patterns"
+                    document.querySelectorAll('.tab-button').forEach((button) => {
+                        button.classList.remove('active');
+                    });
+                    const tabButton = document.getElementById(tabId);
+                    if (tabButton) {
+                        tabButton.classList.add('active');
+                    }
+                }
             }
         };
     }
@@ -872,6 +891,15 @@ function displayAllPlaylists(playlists) {
     const ul = document.getElementById('all_playlists');
     ul.innerHTML = ''; // Clear current list
 
+    if (playlists.length === 0) {
+        // Add a placeholder if the list is empty
+        const emptyLi = document.createElement('li');
+        emptyLi.textContent = "You don't have any playlists yet.";
+        emptyLi.classList.add('empty-placeholder'); // Optional: Add a class for styling
+        ul.appendChild(emptyLi);
+        return;
+    }
+
     playlists.forEach(playlistName => {
         const li = document.createElement('li');
         li.textContent = playlistName;
@@ -1101,6 +1129,18 @@ function populatePlaylistDropdown() {
             // Retrieve the saved playlist from the cookie
             const savedPlaylist = getCookie('selected_playlist');
 
+            // Check if there are playlists available
+            if (playlists.length === 0) {
+                // Add a placeholder option if no playlists are available
+                const placeholderOption = document.createElement('option');
+                placeholderOption.value = '';
+                placeholderOption.textContent = 'No playlists available';
+                placeholderOption.disabled = true; // Prevent selection
+                placeholderOption.selected = true; // Set as default
+                select.appendChild(placeholderOption);
+                return;
+            }
+
             playlists.forEach(playlist => {
                 const option = document.createElement('option');
                 option.value = playlist;
@@ -1159,6 +1199,7 @@ async function confirmAddPlaylist() {
 
             // Refresh the playlist list
             loadAllPlaylists();
+            populatePlaylistDropdown();
 
             // Hide the add playlist container
             toggleSecondaryButtons('add-playlist-container');
@@ -1251,6 +1292,7 @@ async function deleteCurrentPlaylist() {
             logMessage(`Playlist "${playlistName}" deleted.`, LOG_TYPE.INFO);
             closeStickySection('playlist-editor');
             loadAllPlaylists();
+            populatePlaylistDropdown();
         } else {
             logMessage(`Failed to delete playlist: ${result.error}`,  LOG_TYPE.ERROR);
         }

templates/index.html

@@ -75,17 +75,17 @@
 
             <!-- Add to Playlist Section -->
             <div id="add-to-playlist-container" class="hidden">
-                <h2>Select Playlist</h2>
+                <h3>Select Playlist</h3>
                 <select id="select-playlist"></select>
                 <div class="action-buttons">
-                    <button onclick="toggleSecondaryButtons('add-to-playlist-container')" class="cancel">
-                        <i class="fa-solid fa-xmark"></i>
-                        <span>Cancel</span>
-                    </button>
                     <button onclick="saveToPlaylist()" class="cta">
                         <i class="fa-solid fa-floppy-disk"></i>
                         <span>Save</span>
                     </button>
+                    <button onclick="toggleSecondaryButtons('add-to-playlist-container')" class="cancel">
+                        <i class="fa-solid fa-xmark"></i>
+                        <span class="small">Cancel</span>
+                    </button>
                 </div>
             </div>
         </section>
@@ -334,7 +334,7 @@
                     <div id="update_link" class="hidden"></div>
                 </div>
                 <div class="button-group">
-                    <button id="update-software-btn" class="hidden" onclick="updateSoftware()">
+                    <button id="update-software-btn" class="hidden cta" onclick="updateSoftware()">
                         <i class="fa-solid fa-download"></i>
                         <span>Update Software</span>
                     </button>
@@ -377,6 +377,9 @@
                              alt="GitHub Issues">
                     </a>
                 </div>
+                <button id="debug_button" onclick="toggleDebugLog()">
+                    <i class="fa-solid fa-bug"></i>
+                </button>
             </section>
         </section>
     </main>
@@ -405,7 +408,7 @@
         </div>
         <div id="progress-container">
             <progress id="play_progress" value="0" max="100"></progress>
-            <h3 id="play_progress_text">0%</h3>
+            <div id="play_progress_text">0%</div>
         </div>
     </section>
     <button class="tab-button" onclick="switchTab('patterns')" id="nav-patterns">Patterns</button>