more html foo

static/index.html

@@ -29,15 +29,15 @@
     </div>
     <div>
       <div class="spaced">
-        <button id="control-repeat">&#x1F518; repeat</button>
-        <button id="control-shuffle">&#x1F518; shuffle</button>
+        <button id="control-repeat">&#x1F518; repeat</button> <!-- 🔘 Radio Button -->
+        <button id="control-shuffle">&#x1F518; shuffle</button> <!-- 🔘 Radio Button -->
       </div><!--/.spaced-->
       <div class="spaced">
         <label for="control-xfade">xfade</label>
         <div>
-          <button id="control-xfade-minus">&#x2796;</button>
+          <button id="control-xfade-minus">&#x2796;</button> <!-- ➖ Minus -->
           <input type="number" id="control-xfade" name="xfade" value="00" />
-          <button id="control-xfade-plus">&#x2795;</button>
+          <button id="control-xfade-plus">&#x2795;</button> <!-- ➕ Plus -->
         </div>
       </div><!--/.spaced-->
       <div class="spaced">
@@ -58,11 +58,11 @@
       </div>
     </div>
     <div id="sanic-logo">
-      <div>
+      <div><!-- TODO: try to remove this div -->
         <img alt="sanic logo" src="/img/sanic-logo.webp" />
         Sanic &copy; 2023
       </div>
-    </div>
+    </div><!--/#sanic-logo-->
   </div>
   <div id="queue">
     <table>
@@ -78,13 +78,13 @@
       </thead>
       <tbody></tbody>
     </table>
-  </div>
+  </div><!--/#queue-->
   <div id="browser">
     <div id="tabs">
       <a id="tab-browser" class="active" href="#">File Browser</a>
       <a id="tab-search" href="#">Search</a>
       <a id="tab-playlists" href="#">Playlists</a>
-    </div>
+    </div><!--/#tabs-->
     <div id="file-browser">
       <div>
         file browser
@@ -92,7 +92,7 @@
       <div>
         actions
       </div>
-    </div>
+    </div><!--/#file-browser-->
     <div id="search" style="display: none">
       <div>
         <label for="control-search"></label>
@@ -102,16 +102,19 @@
       <div>
         actions
       </div>
-    </div>
+    </div><!--/#search-->
     <div id="playlist-browser" style="display: none">
+      <label for="control-playlist-list"></label>
+      <select id="control-playlist-list" size="15">
+        <option value="1">basedrive</option><!-- TODO: Remove this line -->
+      </select><!--/#control-playlist-list-->
       <div>
-        playlist browser
-      </div>
-      <div>
-        actions
-      </div>
-    </div>
+        <button>&#x2795; New</button><!-- ➕ Plus -->
+        <button>&#x2B06; Attach</button><!-- ⬆️ Up Arrow -->
+        <button>&#x1F5D1;&#xFE0F; Delete</button><!-- 🗑️ Wastebasket -->
       </div>
+    </div><!--/#playlist-browser-->
+  </div><!--/#browser-->
   <div id="result">
     <table>
       <thead>
@@ -125,7 +128,7 @@
       </thead>
       <tbody></tbody>
     </table>
-  </div>
+  </div><!--/#result-->
   <footer>
     <a href="https://git.berlin.ccc.de/cccb/sanic"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 92 92"><defs><clipPath id="a"><path d="M0 .113h91.887V92H0Zm0 0"/></clipPath></defs><g clip-path="url(#a)"><path style="stroke:none;fill-rule:nonzero;fill:#ffffff;fill-opacity:1" d="M90.156 41.965 50.036 1.848a5.913 5.913 0 0 0-8.368 0l-8.332 8.332 10.566 10.566a7.03 7.03 0 0 1 7.23 1.684 7.043 7.043 0 0 1 1.673 7.277l10.183 10.184a7.026 7.026 0 0 1 7.278 1.672 7.04 7.04 0 0 1 0 9.957 7.045 7.045 0 0 1-9.961 0 7.038 7.038 0 0 1-1.532-7.66l-9.5-9.497V59.36a7.04 7.04 0 0 1 1.86 11.29 7.04 7.04 0 0 1-9.957 0 7.04 7.04 0 0 1 0-9.958 7.034 7.034 0 0 1 2.308-1.539V33.926a7.001 7.001 0 0 1-2.308-1.535 7.049 7.049 0 0 1-1.516-7.7L29.242 14.273 1.734 41.777a5.918 5.918 0 0 0 0 8.371L41.855 90.27a5.92 5.92 0 0 0 8.368 0l39.933-39.934a5.925 5.925 0 0 0 0-8.371"/></g></svg></a> Sanic MPD Web UI 0.1.0 - by XenGi and coon &copy; 2023
   </footer>
@@ -167,7 +170,7 @@ for (let i = 1; i <= 100; i++) {
   // TODO: maybe use a instead of button?
   const remove = document.createElement("button");
   remove.classList.add("borderless");
-  remove.innerHTML = "&#x274C;"; // ❌ Cross mark; 🗑️ Wastebasket
+  remove.innerHTML = "&#x274C;"; // ❌ Cross mark
   remove.addEventListener("click", event => {
     console.log(`DEBUG: remove song ${i} from queue`);
   });

static/style.css

@@ -300,6 +300,17 @@ table tr:hover td {
   border-right: 4px ridge #3a506b;
 }
 
+#control-playlist-list {
+  font-size: 12pt;
+  width: 100%;
+  background-color: #28374a;
+  color: white;
+  border: 1px solid black;
+  border-right-color: #545454;
+  border-bottom-color: #545454;
+  scrollbar-color: #490b00 #09101d;  /* only in firefox: https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color */
+}
+
 footer svg {
   color: white;
   width: 12pt;