fix: Added "Delete filtered creatures" button to Bestiary in settings

src/settings/creatures/Creatures.svelte

@@ -10,6 +10,7 @@
     import type { Monster } from "index";
     import { derived, writable } from "svelte/store";
     import { onDestroy } from "svelte";
+    import { confirmWithModal } from "src/view/statblock";
 
     export let plugin: StatBlockPlugin;
 
@@ -59,6 +60,18 @@
         }
     );
 
+    const remove = async () => {
+        if (!$filtered.length) return;
+        if (
+            await confirmWithModal(
+                plugin.app,
+                `Are you sure you want to delete ${$filtered.length} creature${$filtered.length === 1 ? "" : "s"}?`
+            )
+        ) {
+            Bestiary.removeCreatures(...$filtered.map((f) => f.name));
+        }
+    };
+
     const pages = derived([slice, filtered], ([slice, filtered]) =>
         Math.ceil(filtered.length / slice)
     );
@@ -75,7 +88,7 @@
         class="filters-container"
         style="background-color: {backgroundColor}; top: -{paddingTop};"
     >
-        <Filters />
+        <Filters on:remove={() => remove()} />
         <div class="setting-item-description">
             {$filtered.length ? $filtered.length : "No"} creature{$filtered.length ===
             1

src/settings/creatures/filters/Filters.svelte

@@ -7,8 +7,11 @@
     import { linear } from "svelte/easing";
     import { Bestiary } from "src/bestiary/bestiary";
     import { writable } from "svelte/store";
+    import { createEventDispatcher } from "svelte";
 
     const sources = writable([...Bestiary.getIndex("source").keys()]);
+
+    const dispatch = createEventDispatcher<{ remove: void }>();
     Bestiary.onIndexUpdated(
         "source",
         () => ($sources = [...Bestiary.getIndex("source").keys()])
@@ -18,6 +21,9 @@
     const resetIcon = (node: HTMLElement) => {
         new ExtraButtonComponent(node).setIcon("reset");
     };
+    const deleteIcon = (node: HTMLElement) => {
+        new ExtraButtonComponent(node).setIcon("trash");
+    };
     const filter = (node: HTMLElement) => {
         new ExtraButtonComponent(node).setIcon("filter");
     };
@@ -36,6 +42,11 @@
         </div>
 
         <div use:resetIcon on:click={() => reset()} />
+        <div
+            use:deleteIcon
+            on:click={() => dispatch("remove")}
+            aria-label="Delete filtered creatures"
+        />
     </div>
     {#if open}
         <div class="filters" transition:slide={{ easing: linear }}>