Add funcitoning delete button

src/routes/recipe/[recipeId]/+page.svelte

@@ -32,7 +32,6 @@
     <div class="buttonBox">
         <a class="button" href="/recipe/{data.recipe.id}/edit">Edit</a>
         <button>Printable PDF</button>
-        <button>Delete</button>
         <button>Link</button>
     </div>
 </div>

src/routes/recipe/[recipeId]/edit/+page.svelte

@@ -1,8 +1,21 @@
 <script>
     import EditableRecipe from "../../EditableRecipe.svelte";
+    import {notify} from "$lib/notifier.svelte.js";
+    import {goto} from "$app/navigation";
 
     let {data} = $props();
-    console.log(data)
+
+    const deleteRecipe = async ()=>{
+        const response = await fetch(`/recipe/${data.id}/edit`, {
+            method: "DELETE",
+            headers: {"Content-Type": "application/json"},
+            credentials: "include"
+        });
+
+        const json = await response.json();
+        if(!response.ok) return notify("error", json.msg);
+        goto("/dashboard");
+    }
 </script>
 
 <div class="container">
@@ -15,4 +28,57 @@
         visibility={data.private ? "private" : "public"}
         route="/recipe/{data.id}/edit"
     />
+    <button
+        type="button"
+        class="button delete"
+        onclick={deleteRecipe}
+    >Delete</button>
 </div>
+
+<style>
+    .container{
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-start;
+        align-items: center;
+        gap: 0.75rem;
+        width: 100%;
+        max-width: 100%;
+        min-height: calc(100% - 75px);
+        min-height: calc(100dvh - 75px);
+        padding: 1rem max(0.75rem, env(safe-area-inset-right, 0px)) max(1.5rem, env(safe-area-inset-bottom, 0px)) max(0.75rem, env(safe-area-inset-left, 0px));
+        color: var(--color-text);
+        overflow-x: clip;
+        box-sizing: border-box;
+    }
+
+    .delete{
+        margin: 0;
+        width: min(640px, 100%);
+        background: var(--color-error);
+        color: var(--color-text);
+    }
+
+    .delete:hover{
+        background: color-mix(in srgb, var(--color-error) 82%, white);
+    }
+
+    @media (min-width: 640px){
+        .container{
+            padding: 2rem 1rem 3rem;
+        }
+    }
+
+    @media (max-height: 500px){
+        .container{
+            padding-top: 0.75rem;
+            padding-bottom: 1rem;
+        }
+    }
+
+    @media (pointer: coarse){
+        .delete{
+            min-height: 44px;
+        }
+    }
+</style>

src/routes/recipe/[recipeId]/edit/+server.js

@@ -28,3 +28,19 @@ export async function POST({request, cookies, params}){
 
     return json({msg: "success"}, {status: 200});
 }
+
+export async function DELETE({cookies, params}){
+    const user = await auth(cookies, false);
+
+    let recipe;
+    try{
+        recipe = await Recipe.findOne({_id: params.recipeId});
+        if(!recipe || user._id.toString() !== recipe.user.toString()) error(403, "Forbidden");
+        await Recipe.deleteOne({_id: params.recipeId});
+    }catch(e){
+        if(e.status === 403) error(403, "Forbidden");
+        error(500, "Internal Server Error");
+    }
+
+    return json({msg: "success"}, {status: 200});
+}