easy delete

src/lib/components/Piclets/PicletDetail.svelte

@@ -16,7 +16,6 @@
   }
   
   let { instance, onClose, onDeleted }: Props = $props();
-  let showDeleteConfirm = $state(false);
   let selectedTab = $state<'about' | 'abilities'>('about');
   let isSharing = $state(false);
   
@@ -38,6 +37,9 @@
   async function handleDelete() {
     if (!instance.id) return;
     
+    const confirmed = confirm(`Are you sure you want to release ${instance.nickname || instance.typeId}? This action cannot be undone.`);
+    if (!confirmed) return;
+    
     try {
       await deletePicletInstance(instance.id);
       onDeleted?.();
@@ -209,13 +211,7 @@
       
       <!-- Actions -->
       <div class="bottom-actions">
-        {#if showDeleteConfirm}
-          <p class="delete-confirm">Are you sure you want to release this piclet?</p>
-          <button class="btn btn-danger" onclick={handleDelete}>Yes, Release</button>
-          <button class="btn btn-secondary" onclick={() => showDeleteConfirm = false}>Cancel</button>
-        {:else}
-          <button class="btn btn-danger" onclick={() => showDeleteConfirm = true}>Release Piclet</button>
-        {/if}
+        <button class="btn btn-danger" onclick={handleDelete}>Release Piclet</button>
       </div>
     </div>
 </div>
@@ -466,12 +462,6 @@
     text-align: center;
   }
   
-  .delete-confirm {
-    margin: 0 0 1rem;
-    color: #ff3b30;
-    font-size: 16px;
-  }
-  
   .section-heading {
     font-size: 18px;
     font-weight: 600;
@@ -499,13 +489,6 @@
     width: 100%;
   }
   
-  .btn-secondary {
-    background: #e5e5ea;
-    color: #333;
-    margin-top: 8px;
-    width: 100%;
-  }
-  
   /* Enhanced ability and move display styles */
   .moves-list {
     display: flex;