yay, we can add and remove intros, no persistence yet

src/IntroSelector.svelte

@@ -0,0 +1,45 @@
+<script>
+    import { intros } from './store.ts';
+    import { createEventDispatcher } from 'svelte';
+
+    export let introList = null;
+    export let exclude = null;
+    export let btnLabel = 'Add';
+    export let emptyMsg = null;
+
+    const dispatch = createEventDispatcher();
+
+    const onConfirm = () => {
+        dispatch('confirm', selectedIntros)
+        selectedIntros = [];
+    }
+
+    let selectedIntros = [];
+</script>
+
+<div id="list">
+    {#if !!introList}
+        {#if introList.length > 0}
+            {#each introList as i}
+                <label id="list-item">
+                    <input type="checkbox" bind:group={selectedIntros} name="selectedIntros" value={i}>
+                    {$intros[i].name} ({!!$intros[i].filename ? $intros[i].filename : $intros[i].url})
+                </label>
+            {/each}
+        {:else if !!emptyMsg}
+            <p style='color: yellow'>{emptyMsg}</p>
+        {:else}
+        {/if}
+    {:else if !!exclude}
+        {#each $intros as intro, i}
+            {#if (!exclude.includes(i))}
+                <label id="list-item">
+                    <input type="checkbox" bind:group={selectedIntros} name="selectedIntros" value={i}>
+                    {intro.name} ({!!intro.filename ? intro.filename : intro.url})
+                </label>
+            {/if}
+        {/each}
+    {:else}
+    {/if}
+    <button on:click={onConfirm}>{btnLabel}</button>
+</div>

src/Login.svelte

@@ -0,0 +1,14 @@
+<script>
+    import { member, intros } from './store.ts';
+
+    const login = async (username) => {
+        await intros.fetchIntros();
+        await member._fakeLogin(username);
+    }
+
+    let enteredUsername = '';
+</script>
+
+<p style="color:red;">You need to login first</p>
+<input bind:value={enteredUsername}>
+<button on:click={() => loginPromise = login(enteredUsername)}>Login</button>

src/app.html

@@ -8,6 +8,9 @@
 	</head>
     <style>
         body {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
             background-color: #313052;
         }
 
@@ -16,9 +19,10 @@
         }
 
         div#list {
-            display: flex;
+            display: inline-flex;
+            width: 85%;
             flex-direction: column;
-            align-items: flex-start;
+            align-items: center;
         }
 
         #list-item {
@@ -28,6 +32,7 @@
             background-color: #1f1f36;
             padding: 0.5em 0.5em 0.5em;
             margin: 0 0 16px 0px;
+            width: 100%;
             user-select: none;
         }
 

src/routes/+page.svelte

@@ -1,25 +1,16 @@
 <script>
     import { member, intros } from '../store.ts';
+    import Login from '../Login.svelte';
+    import IntroSelector from '../IntroSelector.svelte';
 
-    let selectedIntros = [];
-    let selectedToRemoveIntros = [];
-
-    const login = () => {
-        intros.fetchIntros()
-        member._fakeLogin("DayOldRice")
+    const addIntros = (event) => {
+        console.log($member.intros)
+        $member.intros = $member.intros.concat(event.detail);
+        console.log($member.intros)
     }
-
-    const addIntros = () => {
-        $member.intros = $member.intros.concat(selectedIntros)
-        selectedIntros = [];
+    const removeIntros = (event) => {
+        $member.intros = $member.intros.filter((intro) => !event.detail.includes(intro));
     }
-    const removeIntros = () => {
-        $member.intros = $member.intros.filter((intro) => !selectedToRemoveIntros.includes(intro))
-
-        selectedToRemoveIntros = [];
-    }
-
-    $: console.log(selectedToRemoveIntros)
 </script>
 
 <h1>MemeJoin - A bot for user intros</h1>
@@ -27,35 +18,17 @@
 {#if !!$member}
     <p>{$member.username}</p>
 
-    {#if $member.intros.length > 0}
-        <h3>Current Set Intros</h3>
-        <div id="list">
-            {#each $member.intros as intro}
-                <label id="list-item">
-                    <input type="checkbox" bind:group={selectedToRemoveIntros} name="selectedToRemoveIntros" value={intro}>
-                    {$intros[intro].name} ({$intros[intro].filename})
-                </label>
-            {/each}
-        <button on:click={removeIntros}>Remove</button>
-        </div>
-    {:else}
-        <h3 style='color:yellow'>You don't have any intros, try adding one</h3>
-    {/if}
+        <h3>Your Intros</h3>
+        <IntroSelector
+                introList={$member.intros}
+                on:confirm={removeIntros}
+                btnLabel="Remove" 
+                emptyMsg="You don't have any intros, try adding one"/>
 
     <h3>Add Intros</h3>
-    <div id="list">
-    {#each $intros as intro, i}
-        {#if (!$member.intros.includes(i))}
-        <label id="list-item">
-            <input type="checkbox" bind:group={selectedIntros} name="selectedIntros" value={i}>
-            {intro.name}
-        </label>
-        {/if}
-    {/each}
-    <button on:click={addIntros}>Add</button>
-    </div>
+    <IntroSelector exclude={$member.intros} on:confirm={addIntros} />
 {:else}
-    <p style="color:red;">You need to login first</p>
-    <button on:click={login}>Login</button>
+    <Login />
 {/if}
 
+