Studio: improve delete button

src/UI/Studio/DeleteButton.svelte

@@ -1,10 +1,9 @@
 <script lang="ts">
   import { EditJsonState } from "./EditLayerState"
-  import BackButton from "../Base/BackButton.svelte"
   import { TrashIcon } from "@rgossiaux/svelte-heroicons/solid"
   import NextButton from "../Base/NextButton.svelte"
+  import AccordionSingle from "../Flowbite/AccordionSingle.svelte"
 
-  let deleteState: "init" | "confirm" = "init"
   export let backToStudio: () => void
   export let state: EditJsonState
 
@@ -16,32 +15,28 @@
   }
 </script>
 
-<div class="mt-12">
-  {#if deleteState === "init"}
-    <button
-      on:click={() => {
-        deleteState = "confirm"
-      }}
-      class="small"
-    >
+<AccordionSingle>
+  <div slot="header" class="flex gap-x-2">
     <TrashIcon class="h-6 w-6" />
     Delete this {objectType}
-    </button>
-  {:else if deleteState === "confirm"}
-    <div class="flex">
-      <BackButton
-        on:click={() => {
-          deleteState = "init"
-        }}
-      >
-        Don't delete
-      </BackButton>
+  </div>
+
+  <div class="flex flex-col">
+    <div>
+      Deleting this layer will delete your version. If you clicked a layer made by someone else, their version will
+      remain.
+
+      If you ever accidentally delete a layer, contact Pietervdvn. He might have a backup
+    </div>
+
     <NextButton clss="primary" on:click={() => deleteLayer()}>
       <div class="alert flex p-2">
         <TrashIcon class="h-6 w-6" />
         Do delete this {objectType}
       </div>
     </NextButton>
+
   </div>
-  {/if}
-</div>
+
+</AccordionSingle>
+