feat(api): add endpoints to edit and delete cover letters

frontend/src/components/ui/button.tsx

@@ -5,7 +5,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
-    "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+    "cursor-pointer inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
     {
         variants: {
             variant: {

frontend/src/routes/cover/$coverId.tsx

@@ -3,12 +3,12 @@ import Authorised from "@/layouts/Authorised";
 import requests from "@/lib/requests";
 import type { CoverLetter } from "@/types/api";
 import { useQuery } from "@tanstack/react-query";
-import { createFileRoute, Link } from "@tanstack/react-router";
+import { createFileRoute, Link, useNavigate } from "@tanstack/react-router";
 import "../../editor.css";
 import { toPng } from "html-to-image";
 import { useRef } from "react";
 import { Button } from "@/components/ui/button";
-import { DownloadIcon, EditIcon } from "lucide-react";
+import { DownloadIcon, EditIcon, Trash2 } from "lucide-react";
 
 export const Route = createFileRoute("/cover/$coverId")({
     component: RouteComponent,
@@ -16,6 +16,7 @@ export const Route = createFileRoute("/cover/$coverId")({
 
 function RouteComponent() {
     const { coverId } = Route.useParams();
+    const navigate = useNavigate();
 
     const cover = useQuery({
         queryKey: ["cover", coverId],
@@ -47,12 +48,30 @@ function RouteComponent() {
         link.click();
     };
 
+    const handleDelete = async () => {
+        const a = confirm("Are you sure?");
+        if (!a) return;
+
+        requests.delete(`/cover/${coverId}`, {
+            success() {
+                navigate({ to: "/" });
+            },
+        });
+    };
+
     return (
         <Authorised>
             <div className="flex items-center gap-4 mb-8 md:justify-between">
                 <h1 className="text-2xl font-semibold">{cover.data?.cover.name || "Loading..."}</h1>
 
                 <div className="space-x-2">
+                    <Button
+                        className="hover:bg-danger hover:text-background"
+                        variant="ghost"
+                        onClick={handleDelete}
+                    >
+                        <Trash2 />
+                    </Button>
                     <Link
                         to={"/cover/edit/$coverId"}
                         params={{ coverId: cover.data?.cover.id.toString() || "" }}

frontend/src/routes/cover/edit.$coverId.tsx

@@ -45,7 +45,7 @@ function RouteComponent() {
             onBlur: editSchema,
         },
         onSubmit({ value }) {
-            requests.post(`/cover/${coverId}`, {
+            requests.put(`/cover/${coverId}`, {
                 data: value,
                 before() {
                     loading[1](true);