feat: ✨ add delete button

src/lib/avatars.ts

@@ -298,3 +298,10 @@ export async function createNewAvatar(
 
     return time
 }
+
+export function deleteAvatar(id: string) {
+    const targetAvatarDirectory = join(avatarDirectory, id)
+    return prisma.avatar
+        .delete({ where: { id } })
+        .then(_ => rm(targetAvatarDirectory, { recursive: true, force: true }))
+}

src/lib/components/StatusBanner.svelte

@@ -12,29 +12,15 @@
     }
 
     .error {
-        --color: #d20f39;
+        --color: var(--red);
     }
 
     .warn {
-        --color: #df8e1d;
+        --color: var(--yellow);
     }
 
     .success {
-        --color: #40a02b;
+        --color: var(--green);
-    }
-
-    @media (prefers-color-scheme: dark) {
-        .error {
-            --color: #f38ba8;
-        }
-
-        .warn {
-            --color: #f9e2af;
-        }
-
-        .success {
-            --color: #a6e3a1;
-        }
     }
 </style>
 <div class={status}>

src/routes/+layout.svelte

@@ -21,15 +21,23 @@
             --link: #333;
             --background: white;
             --crust: #eee;
+            --red: #d20f39;
+            --yellow: #df8e1d;
+            --green: #40a02b;
         }
+
         @media (prefers-color-scheme:dark) {
             :root {
                 --text: white;
                 --link: #aaa;
                 --background: #111;
                 --crust: #333;
+                --red: #f38ba8;
+                --yellow: #f9e2af;
+                --green: #a6e3a1
             }
         }
+        
         html {
             background: var(--background);
         }

src/routes/avatars/[id]/+page.server.ts

@@ -1,9 +1,10 @@
 import { getRequestUser, launchLogin } from "$lib/oidc"
 import configuration from "$lib/configuration.js"
-import { fail, redirect } from "@sveltejs/kit"
+import { error, fail, redirect } from "@sveltejs/kit"
 import {
     avatarDirectory,
     createNewAvatar,
+    deleteAvatar,
     getMetadataForUserId,
 } from "$lib/avatars.js"
 import { join } from "path"
@@ -12,9 +13,16 @@ export async function load({ request, parent, url, params: { id } }) {
     const { user } = await parent()
     if (!user) return launchLogin(url.toString())
 
+    let avatar = await prisma.avatar.findUnique({
+        where: { id, userId: user.sub },
+    })
+
+    if (!avatar)
+        throw error(404, "Avatar is not owned by you or does not exist")
+
     return {
         url: url.toString(),
-        avatar: await prisma.avatar.findUnique({ where: { id } }),
+        avatar,
     }
 }
 
@@ -23,10 +31,20 @@ export const actions = {
         let user = await getRequestUser(request, cookies)
         if (!user) return fail(401, { error: "unauthenticated" })
 
-        let { altText, source } = Object.fromEntries(
+        if (
+            !(await prisma.avatar.findUnique({
+                where: { id, userId: user.sub },
+            }))
+        )
+            return fail(404, {
+                error: "Avatar is not owned by you or does not exist",
+            })
+
+        let { action, altText, source } = Object.fromEntries(
             (await request.formData()).entries()
         )
 
+        if (action == "Save") {
             await prisma.avatar.update({
                 where: {
                     id,
@@ -38,5 +56,9 @@ export const actions = {
             })
 
             return redirect(302, "/set")
+        } else if (action == "Delete") {
+            await deleteAvatar(id)
+            return redirect(302, "/set")
+        }
     },
 }

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

@@ -58,6 +58,12 @@
     form textarea:disabled {
         color: var(--link);
     }
+    form input[type="submit"][value="Delete"] {
+        border: 1px solid var(--red);
+        background-color: color-mix(in srgb, var(--red) 20%, var(--background) 80%);
+        color: var(--red);
+        margin-right: auto;
+    }
 </style>
 
 <ReversibleHeading to="/set">
@@ -82,6 +88,7 @@
         <textarea name="source" placeholder="Provide a source for your image">{data.avatar.source}</textarea>
     </div>
     <div class="buttons">
+        <input type="submit" name="action" value="Delete">
         <input type="submit" name="action" value="Save">
     </div>
 </form>