Add spotify queue

templates/index.html

@@ -121,6 +121,17 @@
   <div class="joined" data-role="joined" hidden></div>
   {% else %}
     {{ control_row(room.key, accounts) }}
+  {# Folded until asked for, and only filled in then: see paintQueue. #}
+  <details class="queue" data-role="queue" hidden>
+    <summary>
+      <span class="queue-label">
+        <svg viewBox="0 0 512 512" aria-hidden="true"><path d="M48 144a48 48 0 1 0 0-96 48 48 0 1 0 0 96zM192 64c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L192 64zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-288 0zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-288 0zM48 464a48 48 0 1 0 0-96 48 48 0 1 0 0 96zM96 256a48 48 0 1 0 -96 0 48 48 0 1 0 96 0z"/></svg>
+        <span>Up next</span>
+      </span>
+      <svg class="chevron" viewBox="0 0 320 512" aria-hidden="true"><path d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"/></svg>
+    </summary>
+    <ol class="queue-list" data-role="queue-list"></ol>
+  </details>
   {% endif %}
 </section>
 {%- endmacro %}