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,38 @@
+<script>
+    import { member, intros } from '../store.ts';
+    import { deleteIntro } from '../api.js';
+    import IntroSelector from '../IntroSelector.svelte';
+
+    export let guilds = [];
+
+    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 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,21 +2,23 @@
     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';
+    import { member_can, Permission } from '../permissions.ts';
 
-    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);
-    };
+    let allowedGuildList = [];
+
+    $: allowedGuildList = $member.guilds
+        .filter((guild) => member_can(guild.permissions, Permission.CanDelete))
+        .map((guild) => guild);
+
+    $: isModerator = allowedGuildList.length > 0;
+
 </script>
 
+{#if isModerator}
 <h3>Wow you're a moderator, here is a cool dashboard for you to use</h3>
 <div id="cardContent" class="noGrid">
     <div id="nestedCardContent" class="cardLight cardNoShadow">
@@ -25,25 +27,9 @@
             <button on:click={() => dashboardVisible = false}>
                 Hide dashboard ^
             </button>
-            {#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>
+
+            <DeleteSelector guilds={allowedGuildList}/>
+            <!--<Permissions />-->
         </div>
     {:else}
         <button on:click={() => dashboardVisible = true}>
@@ -52,6 +38,7 @@
     {/if}
     </div>
 </div>
+{/if}
 
 <style>
     h3 {

src/components/Permissions.svelte

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

src/permissions.ts

@@ -1,6 +1,7 @@
 export const Permission = {
     None: 0,
     CanDownload: 1,
+    CanDelete: 2,
 }
 
 export const member_can = (permissions, perm) => {