extract queue into a component

src/components/App.svelte

@@ -8,32 +8,9 @@
     </section>
 
     <section class="queue">
-        <div>
+        <Queue></Queue>
-            {#each $entries as entry}
-                <div class="entry" class:active={entry === $currentEntry}>
-                    <div>
-                        <button on:click={() => toggleEntry(entry)}>
-                            {#if entry === $currentEntry && !$paused}
-                                ⏸️
-                            {:else}
-                                ▶️
-                            {/if}
-                        </button>
-                    </div>
 
-                    <div>
-                        <div>{entry.metadata.title}</div>
 
-                        <div>
-                            <b>{entry.status.account.username} <small style="color: dimgray">{entry.status.account.acct}</small></b>
-                            {entry.data.url}
-                        </div>
-                    </div>
-                </div>
-            {/each}
-        </div>
-
-        <button on:click={() => entries.load(5)}>LOAD 5 MOAR</button>
     </section>
 
     <section class="controls">
@@ -43,30 +20,9 @@
 
 
 <script>
-    import { onMount } from 'svelte'
     import Controls from '/components/Controls.svelte'
+    import Queue from '/components/Queue.svelte'
     import Viewer from '/components/Viewer.svelte'
-    import { paused, entry as currentEntry, entries } from '/store.js'
-
-    const toggleEntry = (entry) => {
-        if (entry !== $currentEntry) {
-            $currentEntry = entry
-        } else {
-            $paused = !$paused
-        }
-    }
-
-    onMount(() => {
-         const unsubscribe = entries.subscribe(async (xs) => {
-            if (xs.length) {
-                const [firstEntry] = xs
-                currentEntry.set(firstEntry)
-                unsubscribe()
-            }
-        })
-
-        entries.load(1)
-    })
 </script>
 
 <style>
@@ -128,17 +84,4 @@
                 "controls controls"
         }
     }
-
-    .entry {
-        display: flex;
-        border: 1px solid black;
-    }
-
-    .entry:hover {
-        background-color: rgb(219, 184, 219);
-    }
-
-    .entry.active {
-        background-color: plum;
-    }
 </style>

src/components/Queue.svelte

@@ -0,0 +1,66 @@
+<div>
+    {#each $entries as entry}
+        <div class="entry" class:active={entry === $currentEntry}>
+            <div>
+                <button on:click={() => toggleEntry(entry)}>
+                    {#if entry === $currentEntry && !$paused}
+                        ⏸️
+                    {:else}
+                        ▶️
+                    {/if}
+                </button>
+            </div>
+
+            <div>
+                <div>{entry.metadata.title}</div>
+
+                <div>
+                    <b>{entry.status.account.username} <small style="color: dimgray">{entry.status.account.acct}</small></b>
+                    {entry.data.url}
+                </div>
+            </div>
+        </div>
+    {/each}
+
+    <button on:click={() => entries.load(5)}>LOAD 5 MOAR</button>
+</div>
+
+<script>
+    import { onMount } from 'svelte'
+    import { paused, entry as currentEntry, entries } from '/store.js'
+
+    const toggleEntry = (entry) => {
+        if (entry !== $currentEntry) {
+            $currentEntry = entry
+        } else {
+            $paused = !$paused
+        }
+    }
+
+    onMount(() => {
+         const unsubscribe = entries.subscribe(async (xs) => {
+            if (xs.length) {
+                const [firstEntry] = xs
+                currentEntry.set(firstEntry)
+                unsubscribe()
+            }
+        })
+
+        entries.load(1)
+    })
+</script>
+
+<style>
+    .entry {
+        display: flex;
+        border: 1px solid black;
+    }
+
+    .entry:hover {
+        background-color: rgb(219, 184, 219);
+    }
+
+    .entry.active {
+        background-color: plum;
+    }
+</style>