From b4e4f3e53ff6fdf64b0eca92d4891a9ebb68789f Mon Sep 17 00:00:00 2001
From: Leons Aleksandrovs <58330666+Skrazzo@users.noreply.github.com>
Date: Sun, 13 Jul 2025 14:45:08 +0300
Subject: [PATCH] fix(template): fix create template form disappeared

---
 .../{CoverLetter.tsx => CoverLetterLink.tsx}  |  0
 frontend/src/components/Template.tsx          | 30 ++++++++++++-------
 frontend/src/components/TemplateLink.tsx      | 13 ++++++++
 frontend/src/routes/index.tsx                 |  2 +-
 frontend/src/routes/templates/index.tsx       |  2 +-
 5 files changed, 35 insertions(+), 12 deletions(-)
 rename frontend/src/components/{CoverLetter.tsx => CoverLetterLink.tsx} (100%)
 create mode 100644 frontend/src/components/TemplateLink.tsx

diff --git a/frontend/src/components/CoverLetter.tsx b/frontend/src/components/CoverLetterLink.tsx
similarity index 100%
rename from frontend/src/components/CoverLetter.tsx
rename to frontend/src/components/CoverLetterLink.tsx
diff --git a/frontend/src/components/Template.tsx b/frontend/src/components/Template.tsx
index f97211f..0f5d052 100644
--- a/frontend/src/components/Template.tsx
+++ b/frontend/src/components/Template.tsx
@@ -1,13 +1,23 @@
-import type { TemplatePreview } from "@/types/api";
-import { Link } from "@tanstack/react-router";
+import { withForm } from "@/hooks/formHook";
 
-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>
+const Template = withForm({
+    defaultValues: {
+        name: "",
+        template: "",
+    },
+    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;
diff --git a/frontend/src/components/TemplateLink.tsx b/frontend/src/components/TemplateLink.tsx
new file mode 100644
index 0000000..f97211f
--- /dev/null
+++ b/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>
+    );
+}
+
diff --git a/frontend/src/routes/index.tsx b/frontend/src/routes/index.tsx
index 6015fcb..3d5e7e0 100644
--- a/frontend/src/routes/index.tsx
+++ b/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,
diff --git a/frontend/src/routes/templates/index.tsx b/frontend/src/routes/templates/index.tsx
index ab842e1..6f15956 100644
--- a/frontend/src/routes/templates/index.tsx
+++ b/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,