fix(template): fix create template form disappeared

frontend/src/components/Template.tsx

@@ -1,13 +1,23 @@
-import type { TemplatePreview } from "@/types/api";
+import { withForm } from "@/hooks/formHook";
-import { Link } from "@tanstack/react-router";
 
-export default function Template({ template }: { template: TemplatePreview }) {
+const Template = withForm({
-    return (
+    defaultValues: {
-        <Link to={"/templates/$templateId"} params={{ templateId: template.id.toString() }}>
+        name: "",
-            <div className="p-4 border rounded-lg hover:bg-muted/40">
+        template: "",
-                <h2 className="text-xl font-semibold">{template.name}</h2>
+    },
+    props: {},
+    render({ form }) {
+        return (
+            <div className="mt-4 flex flex-col gap-4">
+                <form.AppField
+                    name="name"
+                    children={(f) => <f.TextField maxLength={50} label="Name" placeholder="Template name" />}
+                />
+
+                <form.AppField name="template" children={(f) => <f.RichTextEdit />} />
             </div>
-        </Link>
+        );
-    );
+    },
-}
+});
 
+export default Template;

frontend/src/components/TemplateLink.tsx

@@ -0,0 +1,13 @@
+import type { TemplatePreview } from "@/types/api";
+import { Link } from "@tanstack/react-router";
+
+export default function Template({ template }: { template: TemplatePreview }) {
+    return (
+        <Link to={"/templates/$templateId"} params={{ templateId: template.id.toString() }}>
+            <div className="p-4 border rounded-lg hover:bg-muted/40">
+                <h2 className="text-xl font-semibold">{template.name}</h2>
+            </div>
+        </Link>
+    );
+}
+

frontend/src/routes/index.tsx

@@ -6,7 +6,7 @@ import { useQuery } from "@tanstack/react-query";
 import requests from "@/lib/requests";
 import type { CoverLetterPreview } from "@/types/api";
 import renderQueryState from "@/components/RenderQueryState";
-import CoverLetter from "@/components/CoverLetter";
+import CoverLetter from "@/components/CoverLetterLink";
 
 export const Route = createFileRoute("/")({
     component: App,

frontend/src/routes/templates/index.tsx

@@ -6,7 +6,7 @@ import { createFileRoute, Link } from "@tanstack/react-router";
 import { Plus } from "lucide-react";
 import type { TemplatePreview } from "@/types/api";
 import renderQueryState from "@/components/RenderQueryState";
-import Template from "@/components/Template";
+import Template from "@/components/TemplateLink";
 
 export const Route = createFileRoute("/templates/")({
     component: RouteComponent,