update store and views for new ui

src/components/Queue.svelte

@@ -1,5 +1,19 @@
 <div>
-    {#each $queue as track, i}
+    <h6>PLAY NEXT</h6>
+    {#if $next}
+        <div class="entry">
+            <div class="title">{$next.metadata.title}</div>
+            <div class="user">by {$next.status.account.acct}</div>
+        </div>
+    {/if}
+
+    {#if $enqueueing}
+        LOADING NEXT
+    {/if}
+
+
+    <h6>HISTORY</h6>
+    {#each $queue as track, i (track.status.id)}
         <div class="entry" class:active={i === $index}>
             <div>
                 <button on:click={() => toggle(i)}>
@@ -15,25 +29,15 @@
                 </button>
             </div>
 
-            <div>
-                <div>{track.metadata.title}</div>
-
-                <div>
-                    <b>{track.status.account.username} <small style="color: dimgray">{track.status.account.acct}</small></b>
-                    {track.data.url}
-                </div>
-            </div>
+            <div class="title">{track.metadata.title}</div>
+            <div class="user">by {track.status.account.acct}</div>
         </div>
     {/each}
-
-    {#if $enqueueing}
-        LOADING ...
-    {/if}
 </div>
 
 <script>
     import { onMount } from 'svelte'
-    import { index, queue, paused, enqueueing, enqueue, loading } from '/store.js'
+    import { next, enqueueing, queue, index, paused, loading, canNext, selectNext } from '/store.js'
 
     const toggle = i => {
         if (i === $index) {
@@ -44,25 +48,16 @@
         }
     }
 
-    onMount(() => {
-        enqueue().then(() => {
-            $index = 0
-        })
-    })
-
-    $: if ($index !== null && $index === $queue.length - 1) {
-        enqueue()
+    $: if ($queue.length === 0 && $index === null && $next !== null) {
+        $queue = [$next]
+        $next = null
+        $index = 0
     }
 </script>
 
 <style>
     .entry {
-        display: flex;
-        border: 1px solid black;
-    }
-
-    .entry:hover {
-        background-color: rgb(219, 184, 219);
+        padding: 1em 2em;
     }
 
     .entry.active {