feat(cover): add edit form to frontend

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 } from "@tanstack/react-router";
+import { createFileRoute, Link } 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 } from "lucide-react";
+import { DownloadIcon, EditIcon } from "lucide-react";
 
 export const Route = createFileRoute("/cover/$coverId")({
     component: RouteComponent,
@@ -51,10 +51,20 @@ function RouteComponent() {
         <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>
-                <Button onClick={handleDownload}>
-                    <DownloadIcon />
-                </Button>
-                {/* edit buttons */}
+
+                <div className="space-x-2">
+                    <Link
+                        to={"/cover/edit/$coverId"}
+                        params={{ coverId: cover.data?.cover.id.toString() || "" }}
+                    >
+                        <Button variant="outline">
+                            <EditIcon />
+                        </Button>
+                    </Link>
+                    <Button onClick={handleDownload}>
+                        <DownloadIcon />
+                    </Button>
+                </div>
             </div>
 
             <div ref={coverRef} className="bg-background p-4 border">

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

@@ -0,0 +1,85 @@
+import renderQueryState from "@/components/RenderQueryState";
+import { Button } from "@/components/ui/button";
+import { useAppForm } from "@/hooks/formHook";
+import Authorised from "@/layouts/Authorised";
+import requests from "@/lib/requests";
+import type { CoverLetter } from "@/types/api";
+import { useQuery } from "@tanstack/react-query";
+import { createFileRoute, useNavigate } from "@tanstack/react-router";
+import { useState } from "react";
+import { z } from "zod/v4";
+
+export const Route = createFileRoute("/cover/edit/$coverId")({
+    component: RouteComponent,
+});
+
+const editSchema = z.object({
+    name: z.string().min(1, "Name is required"),
+    letter: z.string().min(50, "Application is too short"),
+});
+
+function RouteComponent() {
+    const { coverId } = Route.useParams();
+    const navigate = useNavigate();
+    const loading = useState(false);
+
+    const cover = useQuery({
+        queryKey: ["cover", coverId],
+        queryFn: () => requests.get<{ cover: CoverLetter }>(`/cover/${coverId}`, {}),
+    });
+    const coverState = renderQueryState({
+        query: cover,
+        noFound: "cover letter",
+        skeleton: {
+            count: 1,
+            className: "h-[400px]",
+        },
+    });
+
+    const edit = useAppForm({
+        defaultValues: {
+            name: cover.data?.cover.name || "",
+            letter: cover.data?.cover.letter || null,
+        },
+        validators: {
+            onBlur: editSchema,
+        },
+        onSubmit({ value }) {
+            requests.post(`/cover/${coverId}`, {
+                data: value,
+                before() {
+                    loading[1](true);
+                },
+                finally() {
+                    loading[1](false);
+                },
+                success() {
+                    navigate({ to: "/cover/$coverId", params: { coverId: coverId } });
+                },
+            });
+        },
+    });
+
+    return (
+        <Authorised>
+            <h1 className="text-2xl font-bold text-primary">Edit cover letter</h1>
+
+            <div className="mt-4 space-y-4">
+                <edit.AppField
+                    name="name"
+                    children={(f) => <f.TextField label="Name" placeholder="Your cover letter name" />}
+                />
+
+                {coverState !== null ? (
+                    coverState
+                ) : (
+                    <edit.AppField name="letter" children={(f) => <f.RichTextEdit />} />
+                )}
+            </div>
+
+            <Button className="mt-4" onClick={edit.handleSubmit}>
+                Save
+            </Button>
+        </Authorised>
+    );
+}

frontend/src/routes/templates/index.tsx

@@ -1,11 +1,10 @@
 import { Button } from "@/components/ui/button";
 import Authorised from "@/layouts/Authorised";
 import requests from "@/lib/requests";
-import { useQuery, type UseQueryResult } from "@tanstack/react-query";
+import { useQuery } from "@tanstack/react-query";
 import { createFileRoute, Link } from "@tanstack/react-router";
 import { Plus } from "lucide-react";
 import type { Template } from "@/types/api";
-import { Skeleton } from "@/components/ui/skeleton";
 import renderQueryState from "@/components/RenderQueryState";
 
 export const Route = createFileRoute("/templates/")({