feat: bulk delete action with confirmation in admin panel

src/routes/admin/+page.svelte

@@ -5,8 +5,9 @@
   let unitsData = $state<UnitsData>({ units: [], groups: [] });
   let selectedItem = $state<{ type: 'unit' | 'group'; id: string } | null>(null);
   let checkedUnitIds = $state<Set<string>>(new Set());
-  let bulkAction = $state<string>('');         // '' | 'move'
+  let bulkAction = $state<string>('');         // '' | 'move' | 'delete'
   let bulkMoveTargetGroupId = $state<string>('');
+  let bulkDeleteConfirming = $state(false);
   let expandedGroups = $state<Set<string>>(new Set());
   let deleteGroupTarget = $state<Group | null>(null);
   let deleteGroupAction = $state<'reassign' | 'orphan'>('reassign');
@@ -425,6 +426,22 @@
     }
   }
 
+  // ── Bulk delete ──────────────────────────────────────────────────────────────
+  async function executeBulkDelete() {
+    if (checkedUnitIds.size === 0) return;
+    formError = null;
+    const ids = [...checkedUnitIds];
+    const results = await Promise.all(
+      ids.map((unitId) => fetch(`/admin/api/units/${unitId}`, { method: 'DELETE' }))
+    );
+    const failed = results.filter((r) => !r.ok);
+    if (failed.length) formError = `${failed.length} unit(s) failed to delete`;
+    checkedUnitIds = new Set();
+    bulkAction = '';
+    bulkDeleteConfirming = false;
+    await loadData();
+  }
+
   // ── Unit save/delete ─────────────────────────────────────────────────────────
   async function saveUnit() {
     formError = null;
@@ -589,19 +606,23 @@
           bind:value={bulkAction}
           disabled={checkedUnitIds.size === 0}
           aria-label="Bulk action"
+          onchange={() => { bulkDeleteConfirming = false; }}
         >
           <option value="">Action…</option>
           <option value="move">Move to group</option>
+          <option value="delete">Delete</option>
         </select>
-        <button
-          class="bulk-go"
-          disabled={checkedUnitIds.size === 0 || !bulkAction || (bulkAction === 'move' && !bulkMoveTargetGroupId)}
-          onclick={executeBulkAction}
-        >Apply</button>
+        {#if bulkAction !== 'delete'}
+          <button
+            class="bulk-go"
+            disabled={checkedUnitIds.size === 0 || !bulkAction || (bulkAction === 'move' && !bulkMoveTargetGroupId)}
+            onclick={executeBulkAction}
+          >Apply</button>
+        {/if}
         <button
           class="bulk-clear plain"
           disabled={checkedUnitIds.size === 0}
-          onclick={() => { checkedUnitIds = new Set(); bulkAction = ''; bulkMoveTargetGroupId = ''; }}
+          onclick={() => { checkedUnitIds = new Set(); bulkAction = ''; bulkMoveTargetGroupId = ''; bulkDeleteConfirming = false; }}
         >Clear</button>
       </div>
       <!-- Row 2: group target dropdown (only rendered when move is selected) -->
@@ -617,6 +638,22 @@
           </select>
         </div>
       {/if}
+      <!-- Row 2 (delete): confirmation -->
+      {#if bulkAction === 'delete'}
+        {#if !bulkDeleteConfirming}
+          <div class="bulk-row bulk-row--sub">
+            <button class="bulk-go bulk-delete-confirm-btn" onclick={() => { bulkDeleteConfirming = true; }}>
+              Delete {checkedUnitIds.size} unit{checkedUnitIds.size === 1 ? '' : 's'}…
+            </button>
+          </div>
+        {:else}
+          <div class="bulk-row bulk-row--sub bulk-confirm-row">
+            <span class="bulk-confirm-label">Delete <strong>{checkedUnitIds.size}</strong> unit{checkedUnitIds.size === 1 ? '' : 's'}?</span>
+            <button class="bulk-go bulk-go--danger" onclick={executeBulkDelete}>Confirm Delete</button>
+            <button class="plain bulk-cancel" onclick={() => { bulkDeleteConfirming = false; bulkAction = ''; }}>Cancel</button>
+          </div>
+        {/if}
+      {/if}
     </div>
 
     <!-- Group tree -->
@@ -1034,6 +1071,34 @@
     white-space: nowrap;
     min-width: 4.5rem;
   }
+  .bulk-confirm-row {
+    flex-wrap: wrap;
+    gap: 0.4rem;
+  }
+  .bulk-confirm-label {
+    font-size: 0.8rem;
+    color: var(--pico-color);
+    white-space: nowrap;
+  }
+  .bulk-go--danger {
+    --pico-background-color: var(--pico-del-color, #e74c3c);
+    --pico-border-color: var(--pico-del-color, #e74c3c);
+    background: var(--pico-del-color, #e74c3c);
+    border-color: var(--pico-del-color, #e74c3c);
+  }
+  .bulk-cancel {
+    font-size: 0.8rem;
+    padding: 0.15rem 0.4rem;
+    color: var(--pico-muted-color);
+  }
+  .bulk-delete-confirm-btn {
+    background: transparent;
+    border: 1px solid var(--pico-del-color, #e74c3c);
+    color: var(--pico-del-color, #e74c3c);
+    --pico-background-color: transparent;
+    --pico-border-color: var(--pico-del-color, #e74c3c);
+    --pico-color: var(--pico-del-color, #e74c3c);
+  }
 
   /* Tree groups */
   .tree-group {
@@ -1191,8 +1256,7 @@
   .reassign-options { margin: 0.5rem 0 0.5rem 1.5rem; display: flex; flex-direction: column; gap: 0.5rem; }
   .radio-stack { display: flex; flex-direction: column; gap: 0.25rem; }
 
-  /* ── Drag-to-reorder ───────────────────────────────────────────────────────── */
-  .tree-group-header {
+  /* ── Drag-to-reorder ───────────────────────────────────────────────────────── */  .tree-group-header {
     cursor: grab;
   }
   .tree-group-header.dragging {