Continued work on playlist management UI

www/css/panel/queue.css

@@ -101,6 +101,7 @@ div.queue-entry{
     display: flex;
     justify-content: center;
     align-items: center;
+    user-select: none;
 }
 
 div.queue-entry p{

www/css/theme/movie-night.css

@@ -414,6 +414,7 @@ select.panel-head-element{
     color: var(--accent1);
     box-shadow: 3px 3px 1px var(--bg1-alt0) inset;
     border-radius: 1em;
+    border: var(--accent1) solid 1px;
 }
 
 #delete-account-popup-title, #delete-channel-popup-title{

www/js/channel/panels/queuePanel.js

@@ -1095,7 +1095,6 @@ class playlistManager{
             //Get playlist from data
             const playlist = data[playlistIndex];
 
-            //--Create Base Structure---
             //Create a new playlist div
             const playlistDiv = document.createElement('div');
             //Set it's class
@@ -1115,7 +1114,19 @@ class playlistManager{
             //Set classes
             playlistSpan.classList.add('queue-playlist-span');
 
-            //--Create Labels---
+            //Append items to playlist entry line
+            playlistSpan.appendChild(renderLabels());
+            playlistSpan.appendChild(renderControls());
+
+            //Append items to playlist div
+            playlistDiv.appendChild(playlistSpan);
+            playlistDiv.appendChild(renderMedia());
+
+            //Append current playlist div to the channel playlists div
+            this.channelPlaylistDiv.appendChild(playlistDiv);
+
+            //aux rendering functions
+            function renderLabels(){
                 //Create playlist label span
                 const playlistLabels = document.createElement('span');
                 //Set it's class
@@ -1125,6 +1136,8 @@ class playlistManager{
                 const playlistTitle = document.createElement('p');
                 //Set it's class
                 playlistTitle.classList.add('queue-playlist-title');
+                //Unescape Sanatized Enteties and safely inject as plaintext
+                playlistTitle.innerText = utils.unescapeEntities(playlist.name);
 
                 //Create playlist count label
                 const playlistCount = document.createElement('p');
@@ -1133,13 +1146,19 @@ class playlistManager{
                 //List video count
                 playlistCount.innerText = `Count: ${playlist.media.length}`;
 
-            //--Create Controls--
+                //Append items to playlist labels span
+                playlistLabels.appendChild(playlistTitle);
+                playlistLabels.appendChild(playlistCount);
+
+                //return playlistLabels
+                return playlistLabels;
+            }
+
+            function renderControls(){
                 //Create playlist control span
                 const playlistControls = document.createElement('span');
                 //Set it's class
                 playlistControls.classList.add('queue-playlist-control-span');
-            //Unescape Sanatized Enteties and safely inject as plaintext
-            playlistTitle.innerText = utils.unescapeEntities(playlist.name);
 
                 //Create queue all button
                 const playlistQueueRandomButton = document.createElement('button');
@@ -1160,41 +1179,32 @@ class playlistManager{
                 //Set it's classes
                 playlistDeleteButton.classList.add('queue-playlist-delete-button', 'queue-playlist-control', 'danger-button', 'bi-trash-fill');
 
-            //--Create Media Elements--
-            //Create Media Container Div
-            const mediaDiv = renderMedia();
-
-            //Append items to playlist labels span
-            playlistLabels.appendChild(playlistTitle);
-            playlistLabels.appendChild(playlistCount);
-
                 //Append items to playlist control span
                 playlistControls.appendChild(playlistQueueRandomButton);
                 playlistControls.appendChild(playlistQueueAllButton);
                 playlistControls.appendChild(playlistDeleteButton);
 
-            //Append items to playlist span
-            playlistSpan.appendChild(playlistLabels);
-            playlistSpan.appendChild(playlistControls);
-
-            //Append items to playlist div
-            playlistDiv.appendChild(playlistSpan);
-            playlistDiv.appendChild(mediaDiv);
-
-            //Append current playlist span to the channel playlist div
-            this.channelPlaylistDiv.appendChild(playlistDiv);
-
                 //Define input event listeners
                 playlistQueueAllButton.addEventListener('click', queueAll);
                 playlistDeleteButton.addEventListener('click', deletePlaylist);
 
-            //aux rendering functions
+                return playlistControls;
+            }
+
             function renderMedia(){
                 //Create media container div
                 const mediaContainer = document.createElement('div');
                 //Set classes
                 mediaContainer.classList.add('queue-playlist-media-div');
 
+                for(let media of playlist.media){
+                    //Create media title
+                    const mediaTitle = document.createElement('p');
+                    //Set class
+                    mediaTitle.classList.add('queue-playlist-media-title');
+                    
+                }
+
                 //return media container
                 return mediaContainer;
             }