ui for deleting sounds, beginning of permissions

flake.nix

@@ -48,7 +48,7 @@
 
           docker = dockerTools.buildImage {
             name = "memejoin-svelte";
-            tag = "0.1.0";
+            tag = "0.1.2_1";
             copyToRoot = buildEnv {
               name = "image-root";
               paths = [ nodejs yarnPkg ];

src/components/DeleteSelector.svelte

@@ -0,0 +1,36 @@
+<script>
+    import { member, intros } from '../store.ts';
+    import { deleteIntro } from '../api.js';
+    import IntroSelector from '../IntroSelector.svelte';
+
+    let deletePromise = null;
+
+    const apiDeleteIntro = async (guild, selectedIntros) => {
+        await deleteIntro(guild, selectedIntros, $member.token);
+        await member.pullData($member.token);
+        await intros.fetchIntros($member.guilds);
+    };
+    const deleteIntros = (event) => {
+        deletePromise = apiDeleteIntro(event.detail.guild, event.detail.intros);
+    };
+</script>
+
+{#if !!deletePromise}
+    {#await deletePromise}
+    {:catch err}
+        <p style="color: red">{err}</p>
+    {/await}
+{/if}
+<div id="nestedCardContent">
+    {#each $member.guilds as guild}
+        <h4>{guild.name}</h4>
+        <IntroSelector
+                guild={guild.id}
+                exclude={[]}
+                on:confirm={deleteIntros}
+                btnLabel="Delete Intro From Guild" 
+                btnDanger={true}
+                emptyMsg="Your guild doesn't have any intros, try adding some below"
+                />
+    {/each}
+</div>

src/components/ModDashboard.svelte

@@ -2,19 +2,11 @@
     import { member, intros } from '../store.ts';
     import IntroSelector from '../IntroSelector.svelte';
     import { slide } from 'svelte/transition';
-    import { deleteIntro } from '../api.js';
+    import DeleteSelector from './DeleteSelector.svelte';
+    import Permissions from './Permissions.svelte';
 
-    let deletePromise = null;
     let dashboardVisible = false;
 
-    const apiDeleteIntro = async (guild, selectedIntros) => {
-        await deleteIntro(guild, selectedIntros, $member.token);
-        await member.pullData($member.token);
-        await intros.fetchIntros($member.guilds);
-    };
-    const deleteIntros = (event) => {
-        deletePromise = apiDeleteIntro(event.detail.guild, event.detail.intros);
-    };
 </script>
 
 <h3>Wow you're a moderator, here is a cool dashboard for you to use</h3>
@@ -25,25 +17,9 @@
             <button on:click={() => dashboardVisible = false}>
                 Hide dashboard ^
             </button>
-            {#if !!deletePromise}
+
-                {#await deletePromise}
+            <DeleteSelector />
-                {:catch err}
+            <Permissions />
-                    <p style="color: red">{err}</p>
-                {/await}
-            {/if}
-            <div id="nestedCardContent">
-                {#each $member.guilds as guild}
-                    <h4>{guild.name}</h4>
-                    <IntroSelector
-                            guild={guild.id}
-                            exclude={[]}
-                            on:confirm={deleteIntros}
-                            btnLabel="Delete Intro From Guild" 
-                            btnDanger={true}
-                            emptyMsg="Your guild doesn't have any intros, try adding some below"
-                            />
-                {/each}
-            </div>
         </div>
     {:else}
         <button on:click={() => dashboardVisible = true}>

src/components/Permissions.svelte

@@ -0,0 +1 @@
+<h3>Permissions</h3>