feat: une extraction peut être supprimée

src/components/GrosBouton.svelte

@@ -1,20 +1,33 @@
 <script lang="ts">
-  import type { Snippet } from 'svelte';
+  import { createRawSnippet, type Snippet } from 'svelte';
   import Loader from './Loader.svelte';
 
-  type Props = {
+  let confirmationApparente = $state(false);
+
+  let props: {
     children: Snippet;
     loading?: boolean;
-    onclick?: () => void;
-  };
+    customClass?: string;
+    confirmation?: string;
+    onclick: () => void;
+  } = $props();
+
+  function clic() {
+    if (!props.confirmation) {
+      return props.onclick();
+    }
 
-  let props: Props = $props();
+    if (!confirmationApparente) {
+      confirmationApparente = true;
+      return;
+    }
+
+    props.onclick();
+  }
 </script>
 
 <button
   class="w-full
-        bg-green-300
-        disabled:bg-green-100
         py-3
         rounded-lg
         hover:shadow-md
@@ -24,12 +37,18 @@
         gap-2
         justify-center
         items-center
-        h-12"
+        h-12
+        {props.customClass}
+        "
   disabled={props.loading}
-  onclick={props.onclick}
+  onclick={clic}
 >
   {#if props.loading}
     <Loader />
   {/if}
-  <span>{@render props.children()}</span>
+  {#if confirmationApparente}
+    <span>{props.confirmation}</span>
+  {:else}
+    <span>{@render props.children()}</span>
+  {/if}
 </button>

src/routes/+page.svelte

@@ -1,14 +1,16 @@
 <script lang="ts">
+  import { goto } from '$app/navigation';
   import { currentUser } from '$lib/login.svelte';
   import GrosBouton from '../components/GrosBouton.svelte';
   import ListeExtractions from '../components/ListeExtractions.svelte';
 </script>
 
 <div class="p-2 flex flex-col">
   {#if currentUser.value != null}
-    <a href="/new">
-      <GrosBouton>➕ Nouvelle extraction</GrosBouton>
-    </a>
+    <GrosBouton customClass="bg-green-300 disabled:bg-green-100" onclick={() => goto('/new')}>
+      ➕ Nouvelle extraction
+    </GrosBouton>
+
     <ListeExtractions />
   {:else}
     <span>Salut ! Ici on fait du café !</span>

src/routes/extractions/[id]/+page.svelte

@@ -7,6 +7,8 @@
   import { pb } from '$lib/database';
   import { toPrettyDateTime } from '$lib/time';
   import ChampEditable from '../../../components/ChampEditable.svelte';
+  import GrosBouton from '../../../components/GrosBouton.svelte';
+  import { goto } from '$app/navigation';
 
   const id = $page.params.id;
 
@@ -32,6 +34,11 @@
       notes: notes
     });
   }
+
+  async function suppression() {
+    await pb.collection('extractions').delete(id);
+    goto('/');
+  }
 </script>
 
 {#if extraction}
@@ -54,6 +61,14 @@
         onupdate={majNotes}
       />
     </div>
+    <hr class="my-4" />
+    <div>
+      <GrosBouton
+        customClass="bg-red-600 text-white"
+        confirmation="Êtes-vous sûr•e ?"
+        onclick={suppression}>Supprimer l'extraction (définitif)</GrosBouton
+      >
+    </div>
   </div>
 {:else}
   <Loader />

src/routes/new/+page.svelte

@@ -35,7 +35,13 @@
   />
 
   <div class="mt-4">
-    <GrosBouton loading={creationEnCours} onclick={creationExtraction}>Faisons du café</GrosBouton>
+    <GrosBouton
+      customClass="bg-green-300 disabled:bg-green-100"
+      loading={creationEnCours}
+      onclick={creationExtraction}
+    >
+      Faisons du café
+    </GrosBouton>
   </div>
 
   {#if erreurCreation}