From 49bc7dc60a4a093b5d6e378b092739cde226c7ad Mon Sep 17 00:00:00 2001
From: Leons Aleksandrovs <58330666+Skrazzo@users.noreply.github.com>
Date: Sun, 6 Jul 2025 22:04:12 +0300
Subject: [PATCH 1/6] Prepeared for template creation

---
 frontend/src/components/Header.tsx       | 17 ++++++---
 frontend/src/components/ui/button.tsx    | 15 +++++++-
 frontend/src/layouts/Authorised.tsx      |  2 +-
 frontend/src/routeTree.gen.ts            | 48 ++++++++++++++++++++++--
 frontend/src/routes/index.tsx            |  2 +-
 frontend/src/routes/templates/create.tsx | 16 ++++++++
 frontend/src/routes/templates/index.tsx  | 24 ++++++++++++
 7 files changed, 113 insertions(+), 11 deletions(-)
 create mode 100644 frontend/src/routes/templates/create.tsx
 create mode 100644 frontend/src/routes/templates/index.tsx

diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx
index 0cf105f..eca394b 100644
--- a/frontend/src/components/Header.tsx
+++ b/frontend/src/components/Header.tsx
@@ -1,14 +1,21 @@
 import { Link } from "@tanstack/react-router";
-import { House } from "lucide-react";
+import { House, LayoutTemplate } from "lucide-react";
+
+const linkClass = { className: "flex items-center gap-2" };
+const iconProps = { size: 20 };
 
 export default function Header() {
     return (
-        <header className="py-3 px-4 flex gap-2 bg-panel text-black justify-between shadow">
-            <nav className="flex flex-row font-bold">
-                <Link to="/" className="flex items-center gap-2">
-                    <House size={20} />
+        <header className="py-3 px-4 flex gap-2 bg-panel text-black justify-between shadow mb-4">
+            <nav className="flex items-center gap-4 font-bold ">
+                <Link to="/" {...linkClass}>
+                    <House {...iconProps} />
                     Home
                 </Link>
+                <Link to="/templates" {...linkClass}>
+                    <LayoutTemplate {...iconProps} />
+                    Templates
+                </Link>
             </nav>
         </header>
     );
diff --git a/frontend/src/components/ui/button.tsx b/frontend/src/components/ui/button.tsx
index 0327585..fc97093 100644
--- a/frontend/src/components/ui/button.tsx
+++ b/frontend/src/components/ui/button.tsx
@@ -32,19 +32,32 @@ const buttonVariants = cva(
     }
 );
 
+const withIcon = "flex items-center gap-2";
+
 function Button({
     className,
     variant,
     size,
     asChild = false,
+    icon,
     ...props
 }: React.ComponentProps<"button"> &
     VariantProps<typeof buttonVariants> & {
         asChild?: boolean;
+        icon?: React.ReactNode;
     }) {
     const Comp = asChild ? Slot : "button";
 
-    return <Comp data-slot="button" className={cn(buttonVariants({ variant, size, className }))} {...props} />;
+    return (
+        <Comp
+            data-slot="button"
+            className={cn(buttonVariants({ variant, size, className }), icon ? withIcon : "")}
+            {...props}
+        >
+            {icon}
+            {props.children}
+        </Comp>
+    );
 }
 
 export { Button, buttonVariants };
diff --git a/frontend/src/layouts/Authorised.tsx b/frontend/src/layouts/Authorised.tsx
index cb0afa0..a956b79 100644
--- a/frontend/src/layouts/Authorised.tsx
+++ b/frontend/src/layouts/Authorised.tsx
@@ -11,7 +11,7 @@ interface Props {
 
 export default function Authorised({ children, className = "" }: Props) {
     // Check authentication
-    const info = useQuery({
+    useQuery({
         queryKey: ["user_info"],
         queryFn: () => requests.get<TokenUserInfo>("/info", {}),
         staleTime: 60 * 1000, // 1 minutes
diff --git a/frontend/src/routeTree.gen.ts b/frontend/src/routeTree.gen.ts
index c5a6cff..379c18f 100644
--- a/frontend/src/routeTree.gen.ts
+++ b/frontend/src/routeTree.gen.ts
@@ -12,6 +12,8 @@ import { Route as rootRouteImport } from './routes/__root'
 import { Route as RegisterRouteImport } from './routes/register'
 import { Route as LoginRouteImport } from './routes/login'
 import { Route as IndexRouteImport } from './routes/index'
+import { Route as TemplatesIndexRouteImport } from './routes/templates/index'
+import { Route as TemplatesCreateRouteImport } from './routes/templates/create'
 
 const RegisterRoute = RegisterRouteImport.update({
   id: '/register',
@@ -28,35 +30,59 @@ const IndexRoute = IndexRouteImport.update({
   path: '/',
   getParentRoute: () => rootRouteImport,
 } as any)
+const TemplatesIndexRoute = TemplatesIndexRouteImport.update({
+  id: '/templates/',
+  path: '/templates/',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const TemplatesCreateRoute = TemplatesCreateRouteImport.update({
+  id: '/templates/create',
+  path: '/templates/create',
+  getParentRoute: () => rootRouteImport,
+} as any)
 
 export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
   '/login': typeof LoginRoute
   '/register': typeof RegisterRoute
+  '/templates/create': typeof TemplatesCreateRoute
+  '/templates': typeof TemplatesIndexRoute
 }
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
   '/login': typeof LoginRoute
   '/register': typeof RegisterRoute
+  '/templates/create': typeof TemplatesCreateRoute
+  '/templates': typeof TemplatesIndexRoute
 }
 export interface FileRoutesById {
   __root__: typeof rootRouteImport
   '/': typeof IndexRoute
   '/login': typeof LoginRoute
   '/register': typeof RegisterRoute
+  '/templates/create': typeof TemplatesCreateRoute
+  '/templates/': typeof TemplatesIndexRoute
 }
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
-  fullPaths: '/' | '/login' | '/register'
+  fullPaths: '/' | '/login' | '/register' | '/templates/create' | '/templates'
   fileRoutesByTo: FileRoutesByTo
-  to: '/' | '/login' | '/register'
-  id: '__root__' | '/' | '/login' | '/register'
+  to: '/' | '/login' | '/register' | '/templates/create' | '/templates'
+  id:
+    | '__root__'
+    | '/'
+    | '/login'
+    | '/register'
+    | '/templates/create'
+    | '/templates/'
   fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
   IndexRoute: typeof IndexRoute
   LoginRoute: typeof LoginRoute
   RegisterRoute: typeof RegisterRoute
+  TemplatesCreateRoute: typeof TemplatesCreateRoute
+  TemplatesIndexRoute: typeof TemplatesIndexRoute
 }
 
 declare module '@tanstack/react-router' {
@@ -82,6 +108,20 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof IndexRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/templates/': {
+      id: '/templates/'
+      path: '/templates'
+      fullPath: '/templates'
+      preLoaderRoute: typeof TemplatesIndexRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/templates/create': {
+      id: '/templates/create'
+      path: '/templates/create'
+      fullPath: '/templates/create'
+      preLoaderRoute: typeof TemplatesCreateRouteImport
+      parentRoute: typeof rootRouteImport
+    }
   }
 }
 
@@ -89,6 +129,8 @@ const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
   LoginRoute: LoginRoute,
   RegisterRoute: RegisterRoute,
+  TemplatesCreateRoute: TemplatesCreateRoute,
+  TemplatesIndexRoute: TemplatesIndexRoute,
 }
 export const routeTree = rootRouteImport
   ._addFileChildren(rootRouteChildren)
diff --git a/frontend/src/routes/index.tsx b/frontend/src/routes/index.tsx
index abed847..31dfe6a 100644
--- a/frontend/src/routes/index.tsx
+++ b/frontend/src/routes/index.tsx
@@ -8,7 +8,7 @@ export const Route = createFileRoute("/")({
 function App() {
     return (
         <Authorised>
-            <h1 className="mt-4">Welcome to cover letter</h1>
+            <h1>Welcome to cover letter</h1>
         </Authorised>
     );
 }
diff --git a/frontend/src/routes/templates/create.tsx b/frontend/src/routes/templates/create.tsx
new file mode 100644
index 0000000..c9cf445
--- /dev/null
+++ b/frontend/src/routes/templates/create.tsx
@@ -0,0 +1,16 @@
+import Authorised from "@/layouts/Authorised";
+import { createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/templates/create")({
+    component: RouteComponent,
+});
+
+function RouteComponent() {
+    return (
+        <Authorised>
+            <h1 className="text-2xl font-bold text-primary">Create new template</h1>
+
+            {/* TODO: create a create/edit component to which we pass initialData (will be easier for edit functionality) */}
+        </Authorised>
+    );
+}
diff --git a/frontend/src/routes/templates/index.tsx b/frontend/src/routes/templates/index.tsx
new file mode 100644
index 0000000..4a55d7c
--- /dev/null
+++ b/frontend/src/routes/templates/index.tsx
@@ -0,0 +1,24 @@
+import { Button } from "@/components/ui/button";
+import Authorised from "@/layouts/Authorised";
+import { createFileRoute, Link } from "@tanstack/react-router";
+import { Plus } from "lucide-react";
+
+export const Route = createFileRoute("/templates/")({
+    component: RouteComponent,
+});
+
+function RouteComponent() {
+    return (
+        <Authorised>
+            <div className="flex justify-between items-center">
+                <h1 className="text-2xl font-bold text-primary">0 Templates</h1>
+
+                <Link to="/templates/create">
+                    <Button icon={<Plus />} variant="secondary">
+                        Create new
+                    </Button>
+                </Link>
+            </div>
+        </Authorised>
+    );
+}

From 33760434283ff31d8fad4c57e4255fb466eea8d6 Mon Sep 17 00:00:00 2001
From: Leons Aleksandrovs <58330666+Skrazzo@users.noreply.github.com>
Date: Wed, 9 Jul 2025 21:29:07 +0300
Subject: [PATCH 2/6] feat(template): add form hook for rich text editor /
 create template page

---
 frontend/bun.lock                             | 135 +++++++++++++++
 frontend/package.json                         |   5 +
 frontend/src/components/Template.tsx          |  23 +++
 .../src/components/forms/RichTextEdit.tsx     | 160 ++++++++++++++++++
 frontend/src/editor.css                       | 102 +++++++++++
 frontend/src/hooks/formHook.tsx               |   4 +-
 frontend/src/routes/templates/create.tsx      |  45 ++++-
 7 files changed, 472 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/components/Template.tsx
 create mode 100644 frontend/src/components/forms/RichTextEdit.tsx
 create mode 100644 frontend/src/editor.css

diff --git a/frontend/bun.lock b/frontend/bun.lock
index d71b688..0efdc05 100644
--- a/frontend/bun.lock
+++ b/frontend/bun.lock
@@ -12,6 +12,11 @@
         "@tanstack/react-router": "^1.121.2",
         "@tanstack/react-router-devtools": "^1.121.2",
         "@tanstack/router-plugin": "^1.121.2",
+        "@tiptap/extension-link": "^2.25.0",
+        "@tiptap/extension-list-item": "^2.25.0",
+        "@tiptap/extension-text-style": "^2.25.0",
+        "@tiptap/react": "^2.25.0",
+        "@tiptap/starter-kit": "^2.25.0",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "lucide-react": "^0.525.0",
@@ -175,10 +180,14 @@
 
     "@jridgewell/trace-mapping": ["@jridgewell/trace-mapping@0.3.29", "", { "dependencies": { "@jridgewell/resolve-uri": "^3.1.0", "@jridgewell/sourcemap-codec": "^1.4.14" } }, "sha512-uw6guiW/gcAGPDhLmd77/6lW8QLeiV5RUTsAX46Db6oLhGaVj4lhnPwb184s1bkc8kdVg/+h988dro8GRDpmYQ=="],
 
+    "@popperjs/core": ["@popperjs/core@2.11.8", "", {}, "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A=="],
+
     "@radix-ui/react-compose-refs": ["@radix-ui/react-compose-refs@1.1.2", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg=="],
 
     "@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
 
+    "@remirror/core-constants": ["@remirror/core-constants@3.0.0", "", {}, "sha512-42aWfPrimMfDKDi4YegyS7x+/0tlzaqwPQCULLanv3DMIlu96KTJR0fM5isWX2UViOqlGnX6YFgqWepcX+XMNg=="],
+
     "@rolldown/pluginutils": ["@rolldown/pluginutils@1.0.0-beta.19", "", {}, "sha512-3FL3mnMbPu0muGOCaKAhhFEYmqv9eTfPSJRJmANrCwtgK8VuxpsZDGK+m0LYAGoyO8+0j5uRe4PeyPDK1yA/hA=="],
 
     "@rollup/rollup-android-arm-eabi": ["@rollup/rollup-android-arm-eabi@4.44.1", "", { "os": "android", "cpu": "arm" }, "sha512-JAcBr1+fgqx20m7Fwe1DxPUl/hPkee6jA6Pl7n1v2EFiktAHenTaXl5aIFjUIEsfn9w3HE4gK1lEgNGMzBDs1w=="],
@@ -289,6 +298,58 @@
 
     "@testing-library/react": ["@testing-library/react@16.3.0", "", { "dependencies": { "@babel/runtime": "^7.12.5" }, "peerDependencies": { "@testing-library/dom": "^10.0.0", "@types/react": "^18.0.0 || ^19.0.0", "@types/react-dom": "^18.0.0 || ^19.0.0", "react": "^18.0.0 || ^19.0.0", "react-dom": "^18.0.0 || ^19.0.0" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-kFSyxiEDwv1WLl2fgsq6pPBbw5aWKrsY2/noi1Id0TK0UParSF62oFQFGHXIyaG4pp2tEub/Zlel+fjjZILDsw=="],
 
+    "@tiptap/core": ["@tiptap/core@2.25.0", "", { "peerDependencies": { "@tiptap/pm": "^2.7.0" } }, "sha512-pTLV0+g+SBL49/Y5A9ii7oHwlzIzpgroJVI3AcBk7/SeR7554ZzjxxtJmZkQ9/NxJO+k1jQp9grXaqqOLqC7cA=="],
+
+    "@tiptap/extension-blockquote": ["@tiptap/extension-blockquote@2.25.0", "", { "peerDependencies": { "@tiptap/core": "^2.7.0" } }, "sha512-W+sVPlV9XmaNPUkxV2BinNEbk2hr4zw8VgKjqKQS9O0k2YIVRCfQch+4DudSAwBVMrVW97zVAKRNfictGFQ8vQ=="],
+
+    "@tiptap/extension-bold": ["@tiptap/extension-bold@2.25.0", "", { "peerDependencies": { "@tiptap/core": "^2.7.0" } }, "sha512-3cBX2EtdFR3+EDTkIshhpQpXoZQbFUzxf6u86Qm0qD49JnVOjX9iexnUp8MydXPZA6NVsKeEfMhf18gV7oxTEw=="],
+
+    "@tiptap/extension-bubble-menu": ["@tiptap/extension-bubble-menu@2.25.0", "", { "dependencies": { "tippy.js": "^6.3.7" }, "peerDependencies": { "@tiptap/core": "^2.7.0", "@tiptap/pm": "^2.7.0" } }, "sha512-BnbfQWRXJDDy9/x/0Atu2Nka5ZAMyXLDFqzSLMAXqXSQcG6CZRTSNRgOCnjpda6Hq2yCtq7l/YEoXkbHT1ZZdQ=="],
+
+    "@tiptap/extension-bullet-list": ["@tiptap/extension-bullet-list@2.25.0", "", { "peerDependencies": { "@tiptap/core": "^2.7.0" } }, "sha512-KD+q/q6KIU2anedjtjG8vELkL5rYFdNHWc5XcUJgQoxbOCK3/sBuOgcn9mnFA2eAS6UkraN9Yx0BXEDbXX2HOw=="],
+
+    "@tiptap/extension-code": ["@tiptap/extension-code@2.25.0", "", { "peerDependencies": { "@tiptap/core": "^2.7.0" } }, "sha512-rRp6X2aNNnvo7Fbqc3olZ0vLb52FlCPPfetr9gy6/M9uQdVYDhJcFOPuRuXtZ8M8X+WpCZBV29BvZFeDqfw8bw=="],
+
+    "@tiptap/extension-code-block": ["@tiptap/extension-code-block@2.25.0", "", { "peerDependencies": { "@tiptap/core": "^2.7.0", "@tiptap/pm": "^2.7.0" } }, "sha512-T4kXbZNZ/NyklzQ/FWmUnjD4hgmJPrIBazzCZ/E/rF/Ag2IvUsztBT0PN3vTa+DAZ+IbM61TjlIpyJs1R7OdbQ=="],
+
+    "@tiptap/extension-document": ["@tiptap/extension-document@2.25.0", "", { "peerDependencies": { "@tiptap/core": "^2.7.0" } }, "sha512-3gEZlQKUSIRrC6Az8QS7SJi4CvhMWrA7RBChM1aRl9vMNN8Ul7dZZk5StYJGPjL/koTiceMqx9pNmTCBprsbvQ=="],
+
+    "@tiptap/extension-dropcursor": ["@tiptap/extension-dropcursor@2.25.0", "", { "peerDependencies": { "@tiptap/core": "^2.7.0", "@tiptap/pm": "^2.7.0" } }, "sha512-eSHqp+iUI2mGVwvIyENP02hi5TSyQ+bdwNwIck6bdzjRvXakm72+8uPfVSLGxRKAQZ0RFtmux8ISazgUqF/oSw=="],
+
+    "@tiptap/extension-floating-menu": ["@tiptap/extension-floating-menu@2.25.0", "", { "dependencies": { "tippy.js": "^6.3.7" }, "peerDependencies": { "@tiptap/core": "^2.7.0", "@tiptap/pm": "^2.7.0" } }, "sha512-hPZ5SNpI14smTz4GpWQXTnxmeICINYiABSgXcsU5V66tik9OtxKwoCSR/gpU35esaAFUVRdjW7+sGkACLZD5AQ=="],
+
+    "@tiptap/extension-gapcursor": ["@tiptap/extension-gapcursor@2.25.0", "", { "peerDependencies": { "@tiptap/core": "^2.7.0", "@tiptap/pm": "^2.7.0" } }, "sha512-s/3WDbgkvLac88h5iYJLPJCDw8tMhlss1hk9GAo+zzP4h0xfazYie09KrA0CBdfaSOFyeJK3wedzjKZBtdgX4w=="],
+
+    "@tiptap/extension-hard-break": ["@tiptap/extension-hard-break@2.25.0", "", { "peerDependencies": { "@tiptap/core": "^2.7.0" } }, "sha512-h8be5Zdtsl5GQHxRXvYlGfIJsLvdbexflSTr12gr4kvcQqTdtrsqyu2eksfAK+p2szbiwP2G4VZlH0LNS47UXQ=="],
+
+    "@tiptap/extension-heading": ["@tiptap/extension-heading@2.25.0", "", { "peerDependencies": { "@tiptap/core": "^2.7.0" } }, "sha512-IrRKRRr7Bhpnq5aue1v5/e5N/eNdVV/THsgqqpLZO48pgN8Wv+TweOZe1Ntg/v8L4QSBC8iGMxxhiJZT8AzSkA=="],
+
+    "@tiptap/extension-history": ["@tiptap/extension-history@2.25.0", "", { "peerDependencies": { "@tiptap/core": "^2.7.0", "@tiptap/pm": "^2.7.0" } }, "sha512-y3uJkJv+UngDaDYfcVJ4kx8ivc3Etk5ow6N+47AMCRjUUweQ/CLiJwJ2C7nL7L82zOzVbb/NoR/B3UeE4ts/wQ=="],
+
+    "@tiptap/extension-horizontal-rule": ["@tiptap/extension-horizontal-rule@2.25.0", "", { "peerDependencies": { "@tiptap/core": "^2.7.0", "@tiptap/pm": "^2.7.0" } }, "sha512-bZovyhdOexB3Cv9ddUogWT+cd3KbnenMIZKhgrJ+R0J27rlOtzeUD9TeIjn4V8Of9mTxm3XDKUZGLgPiriN8Ww=="],
+
+    "@tiptap/extension-italic": ["@tiptap/extension-italic@2.25.0", "", { "peerDependencies": { "@tiptap/core": "^2.7.0" } }, "sha512-FZHmNqvWJ5SHYlUi+Qg3b2C0ZBt82DUDUqM+bqcQqSQu6B0c4IEc3+VHhjAJwEUIO9wX7xk/PsdM4Z5Ex4Lr3w=="],
+
+    "@tiptap/extension-link": ["@tiptap/extension-link@2.25.0", "", { "dependencies": { "linkifyjs": "^4.2.0" }, "peerDependencies": { "@tiptap/core": "^2.7.0", "@tiptap/pm": "^2.7.0" } }, "sha512-jNd+1Fd7wiIbxlS51weBzyDtBEBSVzW0cgzdwOzBYQtPJueRyXNNVERksyinDuVgcfvEWgmNZUylgzu7mehnEg=="],
+
+    "@tiptap/extension-list-item": ["@tiptap/extension-list-item@2.25.0", "", { "peerDependencies": { "@tiptap/core": "^2.7.0" } }, "sha512-HLstO/R+dNjIFMXN15bANc8i/+CDpEgtEQhZNHqvSUJH9xQ5op0S05m5VvFI10qnwXNjwwXdhxUYwwjIDCiAgg=="],
+
+    "@tiptap/extension-ordered-list": ["@tiptap/extension-ordered-list@2.25.0", "", { "peerDependencies": { "@tiptap/core": "^2.7.0" } }, "sha512-Hlid16nQdDFOGOx6mJT+zPEae2t1dGlJ18pqCqaVMuDnIpNIWmQutJk5QYxGVxr9awd2SpHTpQtdBTqcufbHtw=="],
+
+    "@tiptap/extension-paragraph": ["@tiptap/extension-paragraph@2.25.0", "", { "peerDependencies": { "@tiptap/core": "^2.7.0" } }, "sha512-53gpWMPedkWVDp3u/1sLt6vnr3BWz4vArGCmmabLucCI2Yl4R6S/AQ9yj/+jOHvWbXCroCbKtmmwxJl32uGN2w=="],
+
+    "@tiptap/extension-strike": ["@tiptap/extension-strike@2.25.0", "", { "peerDependencies": { "@tiptap/core": "^2.7.0" } }, "sha512-Z5YBKnv4N6MMD1LEo9XbmWnmdXavZKOOJt/OkXYFZ3KgzB52Z3q3DDfH+NyeCtKKSWqWVxbBHKLnsojDerSf2g=="],
+
+    "@tiptap/extension-text": ["@tiptap/extension-text@2.25.0", "", { "peerDependencies": { "@tiptap/core": "^2.7.0" } }, "sha512-HlZL86rihpP/R8+dqRrvzSRmiPpx6ctlAKM9PnWT/WRMeI4Y1AUq6PSHLz74wtYO1LH4PXys1ws3n+pLP4Mo6g=="],
+
+    "@tiptap/extension-text-style": ["@tiptap/extension-text-style@2.25.0", "", { "peerDependencies": { "@tiptap/core": "^2.7.0" } }, "sha512-MKAXqDATEbuFEB1SeeAFy2VbefUMJ9jxQyybpaHjDX+Ik0Ddu+aYuJP/njvLuejXCqhrkS/AorxzmHUC4HNPbQ=="],
+
+    "@tiptap/pm": ["@tiptap/pm@2.25.0", "", { "dependencies": { "prosemirror-changeset": "^2.3.0", "prosemirror-collab": "^1.3.1", "prosemirror-commands": "^1.6.2", "prosemirror-dropcursor": "^1.8.1", "prosemirror-gapcursor": "^1.3.2", "prosemirror-history": "^1.4.1", "prosemirror-inputrules": "^1.4.0", "prosemirror-keymap": "^1.2.2", "prosemirror-markdown": "^1.13.1", "prosemirror-menu": "^1.2.4", "prosemirror-model": "^1.23.0", "prosemirror-schema-basic": "^1.2.3", "prosemirror-schema-list": "^1.4.1", "prosemirror-state": "^1.4.3", "prosemirror-tables": "^1.6.4", "prosemirror-trailing-node": "^3.0.0", "prosemirror-transform": "^1.10.2", "prosemirror-view": "^1.37.0" } }, "sha512-vuzU0pLGQyHqtikAssHn9V61aXLSQERQtn3MUtaJ36fScQg7RClAK5gnIbBt3Ul3VFof8o4xYmcidARc0X/E5A=="],
+
+    "@tiptap/react": ["@tiptap/react@2.25.0", "", { "dependencies": { "@tiptap/extension-bubble-menu": "^2.25.0", "@tiptap/extension-floating-menu": "^2.25.0", "@types/use-sync-external-store": "^0.0.6", "fast-deep-equal": "^3", "use-sync-external-store": "^1" }, "peerDependencies": { "@tiptap/core": "^2.7.0", "@tiptap/pm": "^2.7.0", "react": "^17.0.0 || ^18.0.0 || ^19.0.0", "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-Fc7uj/+goEhvJkH2vYJxXLH1GsUkOcsIR3kUyL0vejNRvpzzd87CI/EiSD2ESJO43czQcsJkiYzY4EC+p8NF9w=="],
+
+    "@tiptap/starter-kit": ["@tiptap/starter-kit@2.25.0", "", { "dependencies": { "@tiptap/core": "^2.25.0", "@tiptap/extension-blockquote": "^2.25.0", "@tiptap/extension-bold": "^2.25.0", "@tiptap/extension-bullet-list": "^2.25.0", "@tiptap/extension-code": "^2.25.0", "@tiptap/extension-code-block": "^2.25.0", "@tiptap/extension-document": "^2.25.0", "@tiptap/extension-dropcursor": "^2.25.0", "@tiptap/extension-gapcursor": "^2.25.0", "@tiptap/extension-hard-break": "^2.25.0", "@tiptap/extension-heading": "^2.25.0", "@tiptap/extension-history": "^2.25.0", "@tiptap/extension-horizontal-rule": "^2.25.0", "@tiptap/extension-italic": "^2.25.0", "@tiptap/extension-list-item": "^2.25.0", "@tiptap/extension-ordered-list": "^2.25.0", "@tiptap/extension-paragraph": "^2.25.0", "@tiptap/extension-strike": "^2.25.0", "@tiptap/extension-text": "^2.25.0", "@tiptap/extension-text-style": "^2.25.0", "@tiptap/pm": "^2.25.0" } }, "sha512-MWt6gEdQ2LPuCqbvNGmS0uA+6rtMGRh3vC0WBNp6rJPAvwS8OPcpraLz61cWjgzeKZBUKODpNA5IZ6gDRyH9LQ=="],
+
     "@types/aria-query": ["@types/aria-query@5.0.4", "", {}, "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw=="],
 
     "@types/babel__core": ["@types/babel__core@7.20.5", "", { "dependencies": { "@babel/parser": "^7.20.7", "@babel/types": "^7.20.7", "@types/babel__generator": "*", "@types/babel__template": "*", "@types/babel__traverse": "*" } }, "sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA=="],
@@ -305,10 +366,18 @@
 
     "@types/estree": ["@types/estree@1.0.8", "", {}, "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w=="],
 
+    "@types/linkify-it": ["@types/linkify-it@5.0.0", "", {}, "sha512-sVDA58zAw4eWAffKOaQH5/5j3XeayukzDk+ewSsnv3p4yJEZHCCzMDiZM8e0OUrRvmpGZ85jf4yDHkHsgBNr9Q=="],
+
+    "@types/markdown-it": ["@types/markdown-it@14.1.2", "", { "dependencies": { "@types/linkify-it": "^5", "@types/mdurl": "^2" } }, "sha512-promo4eFwuiW+TfGxhi+0x3czqTYJkG8qB17ZUJiVF10Xm7NLVRSLUsfRTU/6h1e24VvRnXCx+hG7li58lkzog=="],
+
+    "@types/mdurl": ["@types/mdurl@2.0.0", "", {}, "sha512-RGdgjQUZba5p6QEFAVx2OGb8rQDL/cPRG7GiedRzMcJ1tYnUANBncjbSB1NRGwbvjcPeikRABz2nshyPk1bhWg=="],
+
     "@types/react": ["@types/react@19.1.8", "", { "dependencies": { "csstype": "^3.0.2" } }, "sha512-AwAfQ2Wa5bCx9WP8nZL2uMZWod7J7/JSplxbTmBQ5ms6QpqNYm672H0Vu9ZVKVngQ+ii4R/byguVEUZQyeg44g=="],
 
     "@types/react-dom": ["@types/react-dom@19.1.6", "", { "peerDependencies": { "@types/react": "^19.0.0" } }, "sha512-4hOiT/dwO8Ko0gV1m/TJZYk3y0KBnY9vzDh7W+DH17b2HFSOGgdj33dhihPeuy3l0q23+4e+hoXHV6hCC4dCXw=="],
 
+    "@types/use-sync-external-store": ["@types/use-sync-external-store@0.0.6", "", {}, "sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg=="],
+
     "@vitejs/plugin-react": ["@vitejs/plugin-react@4.6.0", "", { "dependencies": { "@babel/core": "^7.27.4", "@babel/plugin-transform-react-jsx-self": "^7.27.1", "@babel/plugin-transform-react-jsx-source": "^7.27.1", "@rolldown/pluginutils": "1.0.0-beta.19", "@types/babel__core": "^7.20.5", "react-refresh": "^0.17.0" }, "peerDependencies": { "vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0-beta.0" } }, "sha512-5Kgff+m8e2PB+9j51eGHEpn5kUzRKH2Ry0qGoe8ItJg7pqnkPrYPkDQZGgGmTa0EGarHrkjLvOdU3b1fzI8otQ=="],
 
     "@vitest/expect": ["@vitest/expect@3.2.4", "", { "dependencies": { "@types/chai": "^5.2.2", "@vitest/spy": "3.2.4", "@vitest/utils": "3.2.4", "chai": "^5.2.0", "tinyrainbow": "^2.0.0" } }, "sha512-Io0yyORnB6sikFlt8QW5K7slY4OjqNX9jmJQ02QDda8lyM6B5oNgVWoSoKPac8/kgnCUzuHQKrSLtu/uOqqrig=="],
@@ -337,6 +406,8 @@
 
     "anymatch": ["anymatch@3.1.3", "", { "dependencies": { "normalize-path": "^3.0.0", "picomatch": "^2.0.4" } }, "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw=="],
 
+    "argparse": ["argparse@2.0.1", "", {}, "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="],
+
     "aria-query": ["aria-query@5.3.0", "", { "dependencies": { "dequal": "^2.0.3" } }, "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A=="],
 
     "assertion-error": ["assertion-error@2.0.1", "", {}, "sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA=="],
@@ -377,6 +448,8 @@
 
     "cookie-es": ["cookie-es@1.2.2", "", {}, "sha512-+W7VmiVINB+ywl1HGXJXmrqkOhpKrIiVZV6tQuV54ZyQC7MMuBt81Vc336GMLoHBq5hV/F9eXgt5Mnx0Rha5Fg=="],
 
+    "crelt": ["crelt@1.0.6", "", {}, "sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g=="],
+
     "cssstyle": ["cssstyle@4.6.0", "", { "dependencies": { "@asamuzakjp/css-color": "^3.2.0", "rrweb-cssom": "^0.8.0" } }, "sha512-2z+rWdzbbSZv6/rhtvzvqeZQHrBaqgogqt85sqFNbabZOuFbCVFb8kPeEtZjiKkbrm395irpNKiYeFeLiQnFPg=="],
 
     "csstype": ["csstype@3.1.3", "", {}, "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="],
@@ -413,12 +486,16 @@
 
     "escalade": ["escalade@3.2.0", "", {}, "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA=="],
 
+    "escape-string-regexp": ["escape-string-regexp@4.0.0", "", {}, "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA=="],
+
     "esprima": ["esprima@4.0.1", "", { "bin": { "esparse": "./bin/esparse.js", "esvalidate": "./bin/esvalidate.js" } }, "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A=="],
 
     "estree-walker": ["estree-walker@3.0.3", "", { "dependencies": { "@types/estree": "^1.0.0" } }, "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g=="],
 
     "expect-type": ["expect-type@1.2.1", "", {}, "sha512-/kP8CAwxzLVEeFrMm4kMmy4CCDlpipyA7MYLVrdJIkV0fYF0UaigQHRsxHiuY/GEea+bh4KSv3TIlgr+2UL6bw=="],
 
+    "fast-deep-equal": ["fast-deep-equal@3.1.3", "", {}, "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="],
+
     "fdir": ["fdir@6.4.6", "", { "peerDependencies": { "picomatch": "^3 || ^4" }, "optionalPeers": ["picomatch"] }, "sha512-hiFoqpyZcfNm1yc4u8oWCf9A2c4D3QjCrks3zmoVKVxpQRzmPNar1hUJcBG2RQHvEVGDN+Jm81ZheVLAQMK6+w=="],
 
     "fill-range": ["fill-range@7.1.1", "", { "dependencies": { "to-regex-range": "^5.0.1" } }, "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg=="],
@@ -489,6 +566,10 @@
 
     "lightningcss-win32-x64-msvc": ["lightningcss-win32-x64-msvc@1.30.1", "", { "os": "win32", "cpu": "x64" }, "sha512-PVqXh48wh4T53F/1CCu8PIPCxLzWyCnn/9T5W1Jpmdy5h9Cwd+0YQS6/LwhHXSafuc61/xg9Lv5OrCby6a++jg=="],
 
+    "linkify-it": ["linkify-it@5.0.0", "", { "dependencies": { "uc.micro": "^2.0.0" } }, "sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ=="],
+
+    "linkifyjs": ["linkifyjs@4.3.1", "", {}, "sha512-DRSlB9DKVW04c4SUdGvKK5FR6be45lTU9M76JnngqPeeGDqPwYc0zdUErtsNVMtxPXgUWV4HbXbnC4sNyBxkYg=="],
+
     "loupe": ["loupe@3.1.4", "", {}, "sha512-wJzkKwJrheKtknCOKNEtDK4iqg/MxmZheEMtSTYvnzRdEYaZzmgH976nenp8WdJRdx5Vc1X/9MO0Oszl6ezeXg=="],
 
     "lru-cache": ["lru-cache@5.1.1", "", { "dependencies": { "yallist": "^3.0.2" } }, "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w=="],
@@ -499,6 +580,10 @@
 
     "magic-string": ["magic-string@0.30.17", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.0" } }, "sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA=="],
 
+    "markdown-it": ["markdown-it@14.1.0", "", { "dependencies": { "argparse": "^2.0.1", "entities": "^4.4.0", "linkify-it": "^5.0.0", "mdurl": "^2.0.0", "punycode.js": "^2.3.1", "uc.micro": "^2.1.0" }, "bin": { "markdown-it": "bin/markdown-it.mjs" } }, "sha512-a54IwgWPaeBCAAsv13YgmALOF1elABB08FxO9i+r4VFk5Vl4pKokRPeX8u5TCgSsPi6ec1otfLjdOpVcgbpshg=="],
+
+    "mdurl": ["mdurl@2.0.0", "", {}, "sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w=="],
+
     "minipass": ["minipass@7.1.2", "", {}, "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw=="],
 
     "minizlib": ["minizlib@3.0.2", "", { "dependencies": { "minipass": "^7.1.2" } }, "sha512-oG62iEk+CYt5Xj2YqI5Xi9xWUeZhDI8jjQmC5oThVH5JGCTgIjr7ciJDzC7MBzYd//WvR1OTmP5Q38Q8ShQtVA=="],
@@ -515,6 +600,8 @@
 
     "nwsapi": ["nwsapi@2.2.20", "", {}, "sha512-/ieB+mDe4MrrKMT8z+mQL8klXydZWGR5Dowt4RAGKbJ3kIGEx3X4ljUo+6V73IXtUPWgfOlU5B9MlGxFO5T+cA=="],
 
+    "orderedmap": ["orderedmap@2.1.1", "", {}, "sha512-TvAWxi0nDe1j/rtMcWcIj94+Ffe6n7zhow33h40SKxmsmozs6dz/e+EajymfoFcHd7sxNn8yHM8839uixMOV6g=="],
+
     "parse5": ["parse5@7.3.0", "", { "dependencies": { "entities": "^6.0.0" } }, "sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw=="],
 
     "pathe": ["pathe@2.0.3", "", {}, "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w=="],
@@ -531,8 +618,46 @@
 
     "pretty-format": ["pretty-format@27.5.1", "", { "dependencies": { "ansi-regex": "^5.0.1", "ansi-styles": "^5.0.0", "react-is": "^17.0.1" } }, "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ=="],
 
+    "prosemirror-changeset": ["prosemirror-changeset@2.3.1", "", { "dependencies": { "prosemirror-transform": "^1.0.0" } }, "sha512-j0kORIBm8ayJNl3zQvD1TTPHJX3g042et6y/KQhZhnPrruO8exkTgG8X+NRpj7kIyMMEx74Xb3DyMIBtO0IKkQ=="],
+
+    "prosemirror-collab": ["prosemirror-collab@1.3.1", "", { "dependencies": { "prosemirror-state": "^1.0.0" } }, "sha512-4SnynYR9TTYaQVXd/ieUvsVV4PDMBzrq2xPUWutHivDuOshZXqQ5rGbZM84HEaXKbLdItse7weMGOUdDVcLKEQ=="],
+
+    "prosemirror-commands": ["prosemirror-commands@1.7.1", "", { "dependencies": { "prosemirror-model": "^1.0.0", "prosemirror-state": "^1.0.0", "prosemirror-transform": "^1.10.2" } }, "sha512-rT7qZnQtx5c0/y/KlYaGvtG411S97UaL6gdp6RIZ23DLHanMYLyfGBV5DtSnZdthQql7W+lEVbpSfwtO8T+L2w=="],
+
+    "prosemirror-dropcursor": ["prosemirror-dropcursor@1.8.2", "", { "dependencies": { "prosemirror-state": "^1.0.0", "prosemirror-transform": "^1.1.0", "prosemirror-view": "^1.1.0" } }, "sha512-CCk6Gyx9+Tt2sbYk5NK0nB1ukHi2ryaRgadV/LvyNuO3ena1payM2z6Cg0vO1ebK8cxbzo41ku2DE5Axj1Zuiw=="],
+
+    "prosemirror-gapcursor": ["prosemirror-gapcursor@1.3.2", "", { "dependencies": { "prosemirror-keymap": "^1.0.0", "prosemirror-model": "^1.0.0", "prosemirror-state": "^1.0.0", "prosemirror-view": "^1.0.0" } }, "sha512-wtjswVBd2vaQRrnYZaBCbyDqr232Ed4p2QPtRIUK5FuqHYKGWkEwl08oQM4Tw7DOR0FsasARV5uJFvMZWxdNxQ=="],
+
+    "prosemirror-history": ["prosemirror-history@1.4.1", "", { "dependencies": { "prosemirror-state": "^1.2.2", "prosemirror-transform": "^1.0.0", "prosemirror-view": "^1.31.0", "rope-sequence": "^1.3.0" } }, "sha512-2JZD8z2JviJrboD9cPuX/Sv/1ChFng+xh2tChQ2X4bB2HeK+rra/bmJ3xGntCcjhOqIzSDG6Id7e8RJ9QPXLEQ=="],
+
+    "prosemirror-inputrules": ["prosemirror-inputrules@1.5.0", "", { "dependencies": { "prosemirror-state": "^1.0.0", "prosemirror-transform": "^1.0.0" } }, "sha512-K0xJRCmt+uSw7xesnHmcn72yBGTbY45vm8gXI4LZXbx2Z0jwh5aF9xrGQgrVPu0WbyFVFF3E/o9VhJYz6SQWnA=="],
+
+    "prosemirror-keymap": ["prosemirror-keymap@1.2.3", "", { "dependencies": { "prosemirror-state": "^1.0.0", "w3c-keyname": "^2.2.0" } }, "sha512-4HucRlpiLd1IPQQXNqeo81BGtkY8Ai5smHhKW9jjPKRc2wQIxksg7Hl1tTI2IfT2B/LgX6bfYvXxEpJl7aKYKw=="],
+
+    "prosemirror-markdown": ["prosemirror-markdown@1.13.2", "", { "dependencies": { "@types/markdown-it": "^14.0.0", "markdown-it": "^14.0.0", "prosemirror-model": "^1.25.0" } }, "sha512-FPD9rHPdA9fqzNmIIDhhnYQ6WgNoSWX9StUZ8LEKapaXU9i6XgykaHKhp6XMyXlOWetmaFgGDS/nu/w9/vUc5g=="],
+
+    "prosemirror-menu": ["prosemirror-menu@1.2.5", "", { "dependencies": { "crelt": "^1.0.0", "prosemirror-commands": "^1.0.0", "prosemirror-history": "^1.0.0", "prosemirror-state": "^1.0.0" } }, "sha512-qwXzynnpBIeg1D7BAtjOusR+81xCp53j7iWu/IargiRZqRjGIlQuu1f3jFi+ehrHhWMLoyOQTSRx/IWZJqOYtQ=="],
+
+    "prosemirror-model": ["prosemirror-model@1.25.1", "", { "dependencies": { "orderedmap": "^2.0.0" } }, "sha512-AUvbm7qqmpZa5d9fPKMvH1Q5bqYQvAZWOGRvxsB6iFLyycvC9MwNemNVjHVrWgjaoxAfY8XVg7DbvQ/qxvI9Eg=="],
+
+    "prosemirror-schema-basic": ["prosemirror-schema-basic@1.2.4", "", { "dependencies": { "prosemirror-model": "^1.25.0" } }, "sha512-ELxP4TlX3yr2v5rM7Sb70SqStq5NvI15c0j9j/gjsrO5vaw+fnnpovCLEGIcpeGfifkuqJwl4fon6b+KdrODYQ=="],
+
+    "prosemirror-schema-list": ["prosemirror-schema-list@1.5.1", "", { "dependencies": { "prosemirror-model": "^1.0.0", "prosemirror-state": "^1.0.0", "prosemirror-transform": "^1.7.3" } }, "sha512-927lFx/uwyQaGwJxLWCZRkjXG0p48KpMj6ueoYiu4JX05GGuGcgzAy62dfiV8eFZftgyBUvLx76RsMe20fJl+Q=="],
+
+    "prosemirror-state": ["prosemirror-state@1.4.3", "", { "dependencies": { "prosemirror-model": "^1.0.0", "prosemirror-transform": "^1.0.0", "prosemirror-view": "^1.27.0" } }, "sha512-goFKORVbvPuAQaXhpbemJFRKJ2aixr+AZMGiquiqKxaucC6hlpHNZHWgz5R7dS4roHiwq9vDctE//CZ++o0W1Q=="],
+
+    "prosemirror-tables": ["prosemirror-tables@1.7.1", "", { "dependencies": { "prosemirror-keymap": "^1.2.2", "prosemirror-model": "^1.25.0", "prosemirror-state": "^1.4.3", "prosemirror-transform": "^1.10.3", "prosemirror-view": "^1.39.1" } }, "sha512-eRQ97Bf+i9Eby99QbyAiyov43iOKgWa7QCGly+lrDt7efZ1v8NWolhXiB43hSDGIXT1UXgbs4KJN3a06FGpr1Q=="],
+
+    "prosemirror-trailing-node": ["prosemirror-trailing-node@3.0.0", "", { "dependencies": { "@remirror/core-constants": "3.0.0", "escape-string-regexp": "^4.0.0" }, "peerDependencies": { "prosemirror-model": "^1.22.1", "prosemirror-state": "^1.4.2", "prosemirror-view": "^1.33.8" } }, "sha512-xiun5/3q0w5eRnGYfNlW1uU9W6x5MoFKWwq/0TIRgt09lv7Hcser2QYV8t4muXbEr+Fwo0geYn79Xs4GKywrRQ=="],
+
+    "prosemirror-transform": ["prosemirror-transform@1.10.4", "", { "dependencies": { "prosemirror-model": "^1.21.0" } }, "sha512-pwDy22nAnGqNR1feOQKHxoFkkUtepoFAd3r2hbEDsnf4wp57kKA36hXsB3njA9FtONBEwSDnDeCiJe+ItD+ykw=="],
+
+    "prosemirror-view": ["prosemirror-view@1.40.0", "", { "dependencies": { "prosemirror-model": "^1.20.0", "prosemirror-state": "^1.0.0", "prosemirror-transform": "^1.1.0" } }, "sha512-2G3svX0Cr1sJjkD/DYWSe3cfV5VPVTBOxI9XQEGWJDFEpsZb/gh4MV29ctv+OJx2RFX4BLt09i+6zaGM/ldkCw=="],
+
     "punycode": ["punycode@2.3.1", "", {}, "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg=="],
 
+    "punycode.js": ["punycode.js@2.3.1", "", {}, "sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA=="],
+
     "react": ["react@19.1.0", "", {}, "sha512-FS+XFBNvn3GTAWq26joslQgWNoFu08F4kl0J4CgdNKADkdSGXQyTCnKteIAJy96Br6YbpEU1LSzV5dYtjMkMDg=="],
 
     "react-dom": ["react-dom@19.1.0", "", { "dependencies": { "scheduler": "^0.26.0" }, "peerDependencies": { "react": "^19.1.0" } }, "sha512-Xs1hdnE+DyKgeHJeJznQmYMIBG3TKIHJJT95Q58nHLSrElKlGQqDTR2HQ9fx5CN/Gk6Vh/kupBTDLU11/nDk/g=="],
@@ -551,6 +676,8 @@
 
     "rollup": ["rollup@4.44.1", "", { "dependencies": { "@types/estree": "1.0.8" }, "optionalDependencies": { "@rollup/rollup-android-arm-eabi": "4.44.1", "@rollup/rollup-android-arm64": "4.44.1", "@rollup/rollup-darwin-arm64": "4.44.1", "@rollup/rollup-darwin-x64": "4.44.1", "@rollup/rollup-freebsd-arm64": "4.44.1", "@rollup/rollup-freebsd-x64": "4.44.1", "@rollup/rollup-linux-arm-gnueabihf": "4.44.1", "@rollup/rollup-linux-arm-musleabihf": "4.44.1", "@rollup/rollup-linux-arm64-gnu": "4.44.1", "@rollup/rollup-linux-arm64-musl": "4.44.1", "@rollup/rollup-linux-loongarch64-gnu": "4.44.1", "@rollup/rollup-linux-powerpc64le-gnu": "4.44.1", "@rollup/rollup-linux-riscv64-gnu": "4.44.1", "@rollup/rollup-linux-riscv64-musl": "4.44.1", "@rollup/rollup-linux-s390x-gnu": "4.44.1", "@rollup/rollup-linux-x64-gnu": "4.44.1", "@rollup/rollup-linux-x64-musl": "4.44.1", "@rollup/rollup-win32-arm64-msvc": "4.44.1", "@rollup/rollup-win32-ia32-msvc": "4.44.1", "@rollup/rollup-win32-x64-msvc": "4.44.1", "fsevents": "~2.3.2" }, "bin": { "rollup": "dist/bin/rollup" } }, "sha512-x8H8aPvD+xbl0Do8oez5f5o8eMS3trfCghc4HhLAnCkj7Vl0d1JWGs0UF/D886zLW2rOj2QymV/JcSSsw+XDNg=="],
 
+    "rope-sequence": ["rope-sequence@1.3.4", "", {}, "sha512-UT5EDe2cu2E/6O4igUr5PSFs23nvvukicWHx6GnOPlHAiiYbzNuCRQCuiUdHJQcqKalLKlrYJnjY0ySGsXNQXQ=="],
+
     "rrweb-cssom": ["rrweb-cssom@0.8.0", "", {}, "sha512-guoltQEx+9aMf2gDZ0s62EcV8lsXR+0w8915TC3ITdn2YueuNjdAYh/levpU9nFaoChh9RUS5ZdQMrKfVEN9tw=="],
 
     "safer-buffer": ["safer-buffer@2.1.2", "", {}, "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="],
@@ -607,6 +734,8 @@
 
     "tinyspy": ["tinyspy@4.0.3", "", {}, "sha512-t2T/WLB2WRgZ9EpE4jgPJ9w+i66UZfDc8wHh0xrwiRNN+UwH98GIJkTeZqX9rg0i0ptwzqW+uYeIF0T4F8LR7A=="],
 
+    "tippy.js": ["tippy.js@6.3.7", "", { "dependencies": { "@popperjs/core": "^2.9.0" } }, "sha512-E1d3oP2emgJ9dRQZdf3Kkn0qJgI6ZLpyS5z6ZkY1DF3kaQaBsGZsndEpHwx+eC+tYM41HaSNvNtLx8tU57FzTQ=="],
+
     "tldts": ["tldts@6.1.86", "", { "dependencies": { "tldts-core": "^6.1.86" }, "bin": { "tldts": "bin/cli.js" } }, "sha512-WMi/OQ2axVTf/ykqCQgXiIct+mSQDFdH2fkwhPwgEwvJ1kSzZRiinb0zF2Xb8u4+OqPChmyI6MEu4EezNJz+FQ=="],
 
     "tldts-core": ["tldts-core@6.1.86", "", {}, "sha512-Je6p7pkk+KMzMv2XXKmAE3McmolOQFdxkKw0R8EYNr7sELW46JqnNeTX8ybPiQgvg1ymCoF8LXs5fzFaZvJPTA=="],
@@ -625,6 +754,8 @@
 
     "typescript": ["typescript@5.8.3", "", { "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" } }, "sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ=="],
 
+    "uc.micro": ["uc.micro@2.1.0", "", {}, "sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A=="],
+
     "unplugin": ["unplugin@2.3.5", "", { "dependencies": { "acorn": "^8.14.1", "picomatch": "^4.0.2", "webpack-virtual-modules": "^0.6.2" } }, "sha512-RyWSb5AHmGtjjNQ6gIlA67sHOsWpsbWpwDokLwTcejVdOjEkJZh7QKu14J00gDDVSh8kGH4KYC/TNBceXFZhtw=="],
 
     "update-browserslist-db": ["update-browserslist-db@1.1.3", "", { "dependencies": { "escalade": "^3.2.0", "picocolors": "^1.1.1" }, "peerDependencies": { "browserslist": ">= 4.21.0" }, "bin": { "update-browserslist-db": "cli.js" } }, "sha512-UxhIZQ+QInVdunkDAaiazvvT/+fXL5Osr0JZlJulepYu6Jd7qJtDZjlur0emRlT71EN3ScPoE7gvsuIKKNavKw=="],
@@ -637,6 +768,8 @@
 
     "vitest": ["vitest@3.2.4", "", { "dependencies": { "@types/chai": "^5.2.2", "@vitest/expect": "3.2.4", "@vitest/mocker": "3.2.4", "@vitest/pretty-format": "^3.2.4", "@vitest/runner": "3.2.4", "@vitest/snapshot": "3.2.4", "@vitest/spy": "3.2.4", "@vitest/utils": "3.2.4", "chai": "^5.2.0", "debug": "^4.4.1", "expect-type": "^1.2.1", "magic-string": "^0.30.17", "pathe": "^2.0.3", "picomatch": "^4.0.2", "std-env": "^3.9.0", "tinybench": "^2.9.0", "tinyexec": "^0.3.2", "tinyglobby": "^0.2.14", "tinypool": "^1.1.1", "tinyrainbow": "^2.0.0", "vite": "^5.0.0 || ^6.0.0 || ^7.0.0-0", "vite-node": "3.2.4", "why-is-node-running": "^2.3.0" }, "peerDependencies": { "@edge-runtime/vm": "*", "@types/debug": "^4.1.12", "@types/node": "^18.0.0 || ^20.0.0 || >=22.0.0", "@vitest/browser": "3.2.4", "@vitest/ui": "3.2.4", "happy-dom": "*", "jsdom": "*" }, "optionalPeers": ["@edge-runtime/vm", "@types/debug", "@types/node", "@vitest/browser", "@vitest/ui", "happy-dom", "jsdom"], "bin": { "vitest": "vitest.mjs" } }, "sha512-LUCP5ev3GURDysTWiP47wRRUpLKMOfPh+yKTx3kVIEiu5KOMeqzpnYNsKyOoVrULivR8tLcks4+lga33Whn90A=="],
 
+    "w3c-keyname": ["w3c-keyname@2.2.8", "", {}, "sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ=="],
+
     "w3c-xmlserializer": ["w3c-xmlserializer@5.0.0", "", { "dependencies": { "xml-name-validator": "^5.0.0" } }, "sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA=="],
 
     "web-vitals": ["web-vitals@4.2.4", "", {}, "sha512-r4DIlprAGwJ7YM11VZp4R884m0Vmgr6EAKe3P+kO0PPj3Unqyvv59rczf6UiGcb9Z8QxZVcqKNwv/g0WNdWwsw=="],
@@ -681,6 +814,8 @@
 
     "lru-cache/yallist": ["yallist@3.1.1", "", {}, "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g=="],
 
+    "markdown-it/entities": ["entities@4.5.0", "", {}, "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw=="],
+
     "pretty-format/ansi-styles": ["ansi-styles@5.2.0", "", {}, "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA=="],
 
     "readdirp/picomatch": ["picomatch@2.3.1", "", {}, "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA=="],
diff --git a/frontend/package.json b/frontend/package.json
index 8a590db..f96fadf 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -17,6 +17,11 @@
         "@tanstack/react-router": "^1.121.2",
         "@tanstack/react-router-devtools": "^1.121.2",
         "@tanstack/router-plugin": "^1.121.2",
+        "@tiptap/extension-link": "^2.25.0",
+        "@tiptap/extension-list-item": "^2.25.0",
+        "@tiptap/extension-text-style": "^2.25.0",
+        "@tiptap/react": "^2.25.0",
+        "@tiptap/starter-kit": "^2.25.0",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "lucide-react": "^0.525.0",
diff --git a/frontend/src/components/Template.tsx b/frontend/src/components/Template.tsx
new file mode 100644
index 0000000..316b28f
--- /dev/null
+++ b/frontend/src/components/Template.tsx
@@ -0,0 +1,23 @@
+import { withForm } from "@/hooks/formHook";
+
+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 label="Name" placeholder="Template name" />}
+                />
+
+                <form.AppField name="template" children={(f) => <f.RichTextEdit />} />
+            </div>
+        );
+    },
+});
+
+export default Template;
diff --git a/frontend/src/components/forms/RichTextEdit.tsx b/frontend/src/components/forms/RichTextEdit.tsx
new file mode 100644
index 0000000..6f02fec
--- /dev/null
+++ b/frontend/src/components/forms/RichTextEdit.tsx
@@ -0,0 +1,160 @@
+import "../../editor.css";
+import { useFieldContext } from "@/hooks/formHook";
+import TextStyle from "@tiptap/extension-text-style";
+import { EditorContent, useEditor } from "@tiptap/react";
+import type { Editor } from "@tiptap/react";
+import StarterKit from "@tiptap/starter-kit";
+import { Button } from "../ui/button";
+import Link from "@tiptap/extension-link";
+import {
+    BoldIcon,
+    CodeIcon,
+    Heading1Icon,
+    Heading2Icon,
+    Heading3Icon,
+    ItalicIcon,
+    ListIcon,
+    ListOrderedIcon,
+    PilcrowIcon,
+    QuoteIcon,
+    StrikethroughIcon,
+} from "lucide-react";
+
+const MenuBar = ({ editor }: { editor: Editor | null }) => {
+    if (!editor) {
+        return;
+    }
+
+    return (
+        <div className="control-group">
+            <div className="flex flex-wrap gap-2">
+                <Button
+                    variant="ghost"
+                    onClick={() => editor.chain().focus().toggleBold().run()}
+                    disabled={!editor.can().chain().focus().toggleBold().run()}
+                    className={editor.isActive("bold") ? "bg-accent" : ""}
+                >
+                    <BoldIcon />
+                </Button>
+                <Button
+                    variant="ghost"
+                    onClick={() => editor.chain().focus().toggleItalic().run()}
+                    disabled={!editor.can().chain().focus().toggleItalic().run()}
+                    className={editor.isActive("italic") ? "bg-accent" : ""}
+                >
+                    <ItalicIcon />
+                </Button>
+                <Button
+                    variant="ghost"
+                    onClick={() => editor.chain().focus().toggleStrike().run()}
+                    disabled={!editor.can().chain().focus().toggleStrike().run()}
+                    className={editor.isActive("strike") ? "bg-accent" : ""}
+                >
+                    <StrikethroughIcon />
+                </Button>
+                <Button
+                    variant="ghost"
+                    onClick={() => editor.chain().focus().toggleCode().run()}
+                    disabled={!editor.can().chain().focus().toggleCode().run()}
+                    className={editor.isActive("code") ? "bg-accent" : ""}
+                >
+                    <CodeIcon />
+                </Button>
+                <Button
+                    variant="ghost"
+                    onClick={() => editor.chain().focus().setParagraph().run()}
+                    className={editor.isActive("paragraph") ? "bg-accent" : ""}
+                >
+                    <PilcrowIcon />
+                </Button>
+                <Button
+                    variant="ghost"
+                    onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
+                    className={editor.isActive("heading", { level: 1 }) ? "bg-accent" : ""}
+                >
+                    <Heading1Icon />
+                </Button>
+                <Button
+                    variant="ghost"
+                    onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
+                    className={editor.isActive("heading", { level: 2 }) ? "bg-accent" : ""}
+                >
+                    <Heading2Icon />
+                </Button>
+                <Button
+                    variant="ghost"
+                    onClick={() => editor.chain().focus().toggleHeading({ level: 3 }).run()}
+                    className={editor.isActive("heading", { level: 3 }) ? "bg-accent" : ""}
+                >
+                    <Heading3Icon />
+                </Button>
+                <Button
+                    variant="ghost"
+                    onClick={() => editor.chain().focus().toggleBulletList().run()}
+                    className={editor.isActive("bulletList") ? "bg-accent" : ""}
+                >
+                    <ListIcon />
+                </Button>
+                <Button
+                    variant="ghost"
+                    onClick={() => editor.chain().focus().toggleOrderedList().run()}
+                    className={editor.isActive("orderedList") ? "bg-accent" : ""}
+                >
+                    <ListOrderedIcon />
+                </Button>
+                <Button
+                    variant="ghost"
+                    onClick={() => editor.chain().focus().toggleBlockquote().run()}
+                    className={editor.isActive("blockquote") ? "bg-accent" : ""}
+                >
+                    <QuoteIcon />
+                </Button>
+            </div>
+        </div>
+    );
+};
+
+const extensions = [
+    TextStyle.configure(),
+    StarterKit.configure({
+        bulletList: {
+            keepMarks: true,
+            keepAttributes: true,
+        },
+        orderedList: {
+            keepMarks: true,
+            keepAttributes: false,
+        },
+    }),
+    Link.configure({
+        defaultProtocol: "https",
+    }),
+];
+
+export default () => {
+    // Get field with predefined text type
+    const field = useFieldContext<string>();
+
+    // Configure editor
+    const editor = useEditor({
+        onUpdate: ({ editor }) => field.handleChange(editor.getHTML()),
+        onBlur: () => field.handleBlur(),
+        content: field.state.value,
+        extensions,
+    });
+
+    // Render custom field
+    return (
+        <div>
+            <div className="tiptap-container">
+                <MenuBar editor={editor} />
+                <EditorContent editor={editor} />
+            </div>
+            {!field.state.meta.isValid && (
+                <span className="text-xs text-danger mt-1">
+                    {field.state.meta.errors.map((e) => e.message).join(", ")}
+                </span>
+            )}
+        </div>
+    );
+};
diff --git a/frontend/src/editor.css b/frontend/src/editor.css
new file mode 100644
index 0000000..48f9d85
--- /dev/null
+++ b/frontend/src/editor.css
@@ -0,0 +1,102 @@
+:root {
+    --editor-accent: #1c81d9;
+}
+
+.tiptap-container {
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    box-shadow: 0 4px 8px -2px rgba(0, 0, 0, 0.05);
+
+    .control-group {
+        border-bottom: 1px solid var(--border);
+        padding: 0.5rem;
+    }
+
+    .tiptap {
+        outline: none;
+        padding: 1rem;
+    }
+}
+
+/* Basic editor styles */
+.tiptap {
+    :first-child {
+        margin-top: 0;
+    }
+
+    /* Links */
+    a {
+        color: var(--editor-accent);
+        text-decoration: underline;
+    }
+
+    /* List styles */
+    ul {
+        list-style: disc;
+    }
+    ol {
+        list-style: decimal;
+    }
+
+    ul,
+    ol {
+        ::marker {
+            color: var(--editor-accent);
+        }
+
+        padding: 0 1rem;
+
+        p {
+            /* Text in list */
+            margin-bottom: 0.5rem;
+        }
+    }
+
+    /* Heading styles */
+    h1,
+    h2,
+    h3 {
+        margin-top: 1.5rem;
+        margin-bottom: 1rem;
+    }
+
+    h1 {
+        font-size: 1.75rem;
+        font-weight: 700;
+    }
+
+    h2 {
+        font-weight: 600;
+        font-size: 1.5rem;
+    }
+
+    h3 {
+        font-weight: 500;
+        font-size: 1.25rem;
+    }
+
+    /* Code and preformatted text styles */
+    code {
+        border: 1px solid var(--border);
+        border-radius: 0.4rem;
+
+        background-color: var(--secondary);
+
+        font-size: 0.85rem;
+        padding: 0.25rem 0.3rem;
+    }
+
+    /* Quotes */
+    blockquote {
+        border-left: 4px solid var(--border);
+        margin: 1rem 0;
+        padding-left: 1rem;
+    }
+
+    /* Line breaks */
+    hr {
+        border: none;
+        border-top: 1px solid var(--border);
+        margin: 2rem 0;
+    }
+}
diff --git a/frontend/src/hooks/formHook.tsx b/frontend/src/hooks/formHook.tsx
index ebad8d5..e886beb 100644
--- a/frontend/src/hooks/formHook.tsx
+++ b/frontend/src/hooks/formHook.tsx
@@ -1,12 +1,14 @@
+import RichTextEdit from "@/components/forms/RichTextEdit";
 import TextField from "@/components/forms/TextField";
 import { createFormHookContexts, createFormHook } from "@tanstack/react-form";
 
 // export useFieldContext for use in your custom components
 export const { fieldContext, formContext, useFieldContext } = createFormHookContexts();
 
-export const { useAppForm } = createFormHook({
+export const { useAppForm, withForm } = createFormHook({
     fieldComponents: {
         TextField,
+        RichTextEdit,
     },
     formComponents: {},
     fieldContext,
diff --git a/frontend/src/routes/templates/create.tsx b/frontend/src/routes/templates/create.tsx
index c9cf445..3235dc7 100644
--- a/frontend/src/routes/templates/create.tsx
+++ b/frontend/src/routes/templates/create.tsx
@@ -1,16 +1,59 @@
+import Template from "@/components/Template";
+import { Button } from "@/components/ui/button";
+import { useAppForm } from "@/hooks/formHook";
 import Authorised from "@/layouts/Authorised";
 import { createFileRoute } from "@tanstack/react-router";
+import { useState } from "react";
+import * as z from "zod/v4";
 
 export const Route = createFileRoute("/templates/create")({
     component: RouteComponent,
 });
 
+const TemplateSchema = z.object({
+    name: z.string().nonempty("Name is required"),
+    template: z.string().nonempty("Template is required"),
+});
+
 function RouteComponent() {
+    const loading = useState(false);
+    const createForm = useAppForm({
+        defaultValues: {
+            name: "",
+            template: "",
+        },
+        validators: {
+            onBlur: TemplateSchema,
+        },
+    });
+
     return (
         <Authorised>
             <h1 className="text-2xl font-bold text-primary">Create new template</h1>
+            <div className="border rounded-md p-4 bg-orange-50 mt-4">
+                <p className="mb-2 text-orange-400 font-bold">NOTE!</p>
+                <p>
+                    Places that you want AI to fill, need to be in this format{" "}
+                    <span className="font-semibold">{"<what to fill>"}</span>. For example:
+                </p>
 
-            {/* TODO: create a create/edit component to which we pass initialData (will be easier for edit functionality) */}
+                <p className="mt-2">
+                    Hello <span className="font-bold">{"<company name>"}</span> Team
+                </p>
+                <p>
+                    My experiences{" "}
+                    <span className="font-bold">{"<required experiences separated by comma>"}</span>
+                </p>
+                <p>
+                    My experiences:{" "}
+                    <span className="font-bold">{"<required experiences in unordered list>"}</span>
+                </p>
+                <p>etc...</p>
+            </div>
+            <Template form={createForm} />
+            <Button onClick={createForm.handleSubmit} disabled={loading[0]} className="mt-4">
+                Create
+            </Button>
         </Authorised>
     );
 }

From 938c9a66e5fe522949f44d465c2935ad56694379 Mon Sep 17 00:00:00 2001
From: Leons Aleksandrovs <58330666+Skrazzo@users.noreply.github.com>
Date: Wed, 9 Jul 2025 23:19:31 +0300
Subject: [PATCH 3/6] feat(api): create template

Add template table to the database
Create controller function to check if user has template, and create it
in the database
Made universal jwt.Claims of user data retrieval function
---
 backend/controllers/template/template.go    | 70 +++++++++++++++++++++
 backend/controllers/user/user.go            | 15 +++--
 backend/db/migrations.sql                   | 17 ++++-
 backend/models/template/template.go         | 70 +++++++++++++++++++++
 backend/routes/routes.go                    | 11 +++-
 backend/utils/jwt/jwt.go                    | 27 ++++++++
 backend/utils/responses/responses.go        |  2 +-
 frontend/src/components/Template.tsx        |  2 +-
 frontend/src/components/forms/TextField.tsx |  3 +
 frontend/src/routes/templates/create.tsx    |  6 +-
 10 files changed, 209 insertions(+), 14 deletions(-)
 create mode 100644 backend/controllers/template/template.go
 create mode 100644 backend/models/template/template.go

diff --git a/backend/controllers/template/template.go b/backend/controllers/template/template.go
new file mode 100644
index 0000000..16b1a47
--- /dev/null
+++ b/backend/controllers/template/template.go
@@ -0,0 +1,70 @@
+package template
+
+import (
+	"backend/models/template"
+	"backend/utils/jwt"
+	res "backend/utils/responses"
+	"net/http"
+
+	"github.com/gin-gonic/gin"
+	"github.com/go-playground/validator/v10"
+)
+
+type TemplateForm struct {
+	Name     string `json:"name" validate:"required,min=2,max=50"`
+	Template string `json:"template" validate:"required"`
+}
+
+var validate = validator.New()
+
+func Create(c *gin.Context) {
+	// Receive data from frontend, check if data is okay, hash password, call model
+	var data TemplateForm
+	if err := c.ShouldBindJSON(&data); err != nil {
+		res.Error(c, err.Error(), http.StatusInternalServerError)
+		return
+	}
+
+	// Validate data
+	if err := validate.Struct(data); err != nil {
+		res.Error(c, err.Error(), http.StatusBadRequest)
+		return
+	}
+
+	// Get user id
+	user, err := jwt.GetUser(c)
+	if err != nil {
+		res.Error(c, err.Error(), http.StatusInternalServerError)
+		return
+	}
+
+	// Check if template already exists
+	templates, err := template.FindByName(data.Name, user.Id)
+	if err != nil {
+		res.Error(c, err.Error(), http.StatusInternalServerError)
+		return
+	}
+
+	// Check if template already exists with that name
+	if len(templates) > 0 {
+		res.Error(c, "Template already exists", http.StatusBadRequest)
+		return
+	}
+
+	// Create in database
+	if err := template.Create(data.Name, data.Template, user.Id); err != nil {
+		res.Error(c, err.Error(), http.StatusInternalServerError)
+		return
+	}
+
+	res.Success(c, gin.H{"message": "Successfully created template"})
+}
+
+func Get(c *gin.Context) {
+}
+
+func Update(c *gin.Context) {
+}
+
+func Delete(c *gin.Context) {
+}
diff --git a/backend/controllers/user/user.go b/backend/controllers/user/user.go
index df89594..d1b8e15 100644
--- a/backend/controllers/user/user.go
+++ b/backend/controllers/user/user.go
@@ -10,8 +10,6 @@ import (
 	"log"
 	"net/http"
 
-	JWT "github.com/golang-jwt/jwt"
-
 	res "backend/utils/responses"
 
 	"github.com/gin-gonic/gin"
@@ -138,10 +136,11 @@ func Login(c *gin.Context) {
 
 // Returns info from token middleware
 func TokenInfo(c *gin.Context) {
-	user := c.MustGet("user").(JWT.MapClaims)
-	res.Success(c, gin.H{
-		"id":    user["id"],
-		"name":  user["name"],
-		"email": user["email"],
-	})
+	user, err := jwt.GetUser(c)
+	if err != nil {
+		res.Error(c, err.Error(), http.StatusInternalServerError)
+		return
+	}
+
+	res.Success(c, user)
 }
diff --git a/backend/db/migrations.sql b/backend/db/migrations.sql
index 6647117..ff8ff2d 100644
--- a/backend/db/migrations.sql
+++ b/backend/db/migrations.sql
@@ -1,7 +1,20 @@
 CREATE TABLE IF NOT EXISTS users (
     id SERIAL PRIMARY KEY,
     email TEXT NOT NULL UNIQUE,
-    name TEXT NOT NULL,
-    password TEXT NOT NULL,
+    "name" TEXT NOT NULL,
+    "password" TEXT NOT NULL,
     created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
 );
+
+CREATE TABLE IF NOT EXISTS "templates" (
+    "id" SERIAL PRIMARY KEY,
+    "user_id" INTEGER NOT NULL,
+    "name" VARCHAR(50) NOT NULL UNIQUE,
+    "template" TEXT NOT NULL,
+    "created_at" TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT fk_user
+        FOREIGN KEY (user_id)
+        REFERENCES users (id)
+        ON DELETE CASCADE
+);
diff --git a/backend/models/template/template.go b/backend/models/template/template.go
new file mode 100644
index 0000000..a980e57
--- /dev/null
+++ b/backend/models/template/template.go
@@ -0,0 +1,70 @@
+package template
+
+import (
+	"backend/db"
+	"context"
+	"time"
+)
+
+type Template struct {
+	ID        int
+	UserID    int
+	Name      string
+	Template  string
+	CreatedAt time.Time
+}
+
+func Create(name string, template string, userId float64) error {
+	ctx, cancel := context.WithTimeout(context.Background(), 3*time.Second)
+	defer cancel()
+
+	// build query
+	query := `INSERT INTO templates (name, template, user_id) VALUES ($1, $2, $3)`
+
+	// execute query
+	_, err := db.Pool.Exec(ctx, query, name, template, userId)
+
+	return err
+}
+
+// * will follow the pointer to its value
+// If user id is 0, then we will search only by name
+func FindByName(name string, userId float64) ([]Template, error) {
+	// Create timeout context
+	ctx, cancel := context.WithTimeout(context.Background(), 3*time.Second)
+	defer cancel()
+
+	// Build query and execute
+	query := `SELECT * FROM templates WHERE "name" = $1`
+	args := []any{name}
+
+	// Do we need to search by user id?
+	if userId > 0 {
+		query += " AND user_id = $2"
+		args = append(args, userId)
+	}
+
+	rows, err := db.Pool.Query(ctx, query, args...)
+	// Query executes query instantly, and returns error instantly
+	// Not like QueryRow, which executes query only on row.Scan
+	if err != nil {
+		return nil, err
+	}
+	// need to tell database to close the rows connection
+	// and free up resources
+	defer rows.Close()
+
+	// Prepeare results now
+	var results []Template
+	for rows.Next() {
+		var t Template
+		if err := rows.Scan(&t.ID, &t.UserID, &t.Name, &t.Template, &t.CreatedAt); err != nil {
+			return nil, err
+		}
+
+		results = append(results, t)
+	}
+
+	// Give pointer back
+	return results, nil
+}
diff --git a/backend/routes/routes.go b/backend/routes/routes.go
index 50dbf25..a85b797 100644
--- a/backend/routes/routes.go
+++ b/backend/routes/routes.go
@@ -1,6 +1,7 @@
 package routes
 
 import (
+	"backend/controllers/template"
 	"backend/controllers/user"
 	"backend/middleware"
 
@@ -18,7 +19,15 @@ func SetupRoutes() *gin.Engine {
 	auth := r.Group("/")
 	auth.Use(middleware.IsAuthenticated())
 
-	auth.GET("/info", user.TokenInfo) // Route to check if user is authenticated
+	// Route to check if user is authenticated
+	auth.GET("/info", user.TokenInfo)
+
+	// Template routes (REST FUCKING GOOOOO)
+	templates := auth.Group("/templates")
+	// GET (Gets all templates)
+	templates.POST("", template.Create)
+	// PUT (Edit)
+	// DELETE (Delete)
 
 	return r
 }
diff --git a/backend/utils/jwt/jwt.go b/backend/utils/jwt/jwt.go
index ce0ffc5..8a7743b 100644
--- a/backend/utils/jwt/jwt.go
+++ b/backend/utils/jwt/jwt.go
@@ -6,9 +6,16 @@ import (
 	"fmt"
 	"time"
 
+	"github.com/gin-gonic/gin"
 	"github.com/golang-jwt/jwt"
 )
 
+type UserClaims struct {
+	Id    float64 `json:"id"`
+	Name  string  `json:"name"`
+	Email string  `json:"email"`
+}
+
 func GenerateJWT(u *user.User) (string, error) {
 	// Generate JWT token
 	mySigningKey := []byte(config.Env["JWT_SECRET"])
@@ -53,3 +60,23 @@ func ParseJWT(tokenString string) (jwt.MapClaims, error) {
 	// Return on invalid token
 	return nil, fmt.Errorf("invalid token")
 }
+
+func GetUser(c *gin.Context) (UserClaims, error) {
+	// Get user from context
+	user, ok := c.Get("user")
+	if !ok {
+		return UserClaims{}, fmt.Errorf("no user in middleware context")
+	}
+
+	// Get claims from user
+	mapClaims, ok := user.(jwt.MapClaims)
+	if !ok {
+		return UserClaims{}, fmt.Errorf("invalid token claims")
+	}
+
+	return UserClaims{
+		Id:    mapClaims["id"].(float64),
+		Name:  mapClaims["name"].(string),
+		Email: mapClaims["email"].(string),
+	}, nil
+}
diff --git a/backend/utils/responses/responses.go b/backend/utils/responses/responses.go
index f77783a..d758b51 100644
--- a/backend/utils/responses/responses.go
+++ b/backend/utils/responses/responses.go
@@ -6,7 +6,7 @@ import (
 	"github.com/gin-gonic/gin"
 )
 
-func Success(c *gin.Context, data gin.H) {
+func Success(c *gin.Context, data any) {
 	// Return success to api
 	c.JSON(200, gin.H{
 		"success": true,
diff --git a/frontend/src/components/Template.tsx b/frontend/src/components/Template.tsx
index 316b28f..0f5d052 100644
--- a/frontend/src/components/Template.tsx
+++ b/frontend/src/components/Template.tsx
@@ -11,7 +11,7 @@ const Template = withForm({
             <div className="mt-4 flex flex-col gap-4">
                 <form.AppField
                     name="name"
-                    children={(f) => <f.TextField label="Name" placeholder="Template name" />}
+                    children={(f) => <f.TextField maxLength={50} label="Name" placeholder="Template name" />}
                 />
 
                 <form.AppField name="template" children={(f) => <f.RichTextEdit />} />
diff --git a/frontend/src/components/forms/TextField.tsx b/frontend/src/components/forms/TextField.tsx
index 671b0f6..a151412 100644
--- a/frontend/src/components/forms/TextField.tsx
+++ b/frontend/src/components/forms/TextField.tsx
@@ -7,6 +7,7 @@ interface TextFieldProps {
     placeholder?: string;
     label?: string;
     type?: React.ComponentProps<"input">["type"];
+    maxLength?: React.ComponentProps<"input">["maxLength"];
     className?: string;
 }
 
@@ -15,6 +16,7 @@ export default function TextField({
     type = "text",
     className = "",
     label = "",
+    maxLength = 255,
 }: TextFieldProps) {
     // Get field with predefined text type
     const field = useFieldContext<string>();
@@ -30,6 +32,7 @@ export default function TextField({
 
             <Input
                 id={field.name}
+                maxLength={maxLength}
                 name={field.name}
                 value={field.state.value}
                 onBlur={field.handleBlur}
diff --git a/frontend/src/routes/templates/create.tsx b/frontend/src/routes/templates/create.tsx
index 3235dc7..f9ecae1 100644
--- a/frontend/src/routes/templates/create.tsx
+++ b/frontend/src/routes/templates/create.tsx
@@ -11,7 +11,11 @@ export const Route = createFileRoute("/templates/create")({
 });
 
 const TemplateSchema = z.object({
-    name: z.string().nonempty("Name is required"),
+    name: z
+        .string()
+        .nonempty("Name is required")
+        .min(2, "Name is too short")
+        .max(50, "Name is too long (max 50)"),
     template: z.string().nonempty("Template is required"),
 });
 

From 9f99f6a4a9ada3c2d483c09d9c8f276b6f9e53cd Mon Sep 17 00:00:00 2001
From: Leons Aleksandrovs <58330666+Skrazzo@users.noreply.github.com>
Date: Thu, 10 Jul 2025 19:11:21 +0300
Subject: [PATCH 4/6] feat(template): create template via GUI

---
 frontend/src/routes/templates/create.tsx | 20 ++++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/frontend/src/routes/templates/create.tsx b/frontend/src/routes/templates/create.tsx
index f9ecae1..8c40c6c 100644
--- a/frontend/src/routes/templates/create.tsx
+++ b/frontend/src/routes/templates/create.tsx
@@ -2,7 +2,8 @@ import Template from "@/components/Template";
 import { Button } from "@/components/ui/button";
 import { useAppForm } from "@/hooks/formHook";
 import Authorised from "@/layouts/Authorised";
-import { createFileRoute } from "@tanstack/react-router";
+import requests from "@/lib/requests";
+import { createFileRoute, useNavigate } from "@tanstack/react-router";
 import { useState } from "react";
 import * as z from "zod/v4";
 
@@ -16,11 +17,12 @@ const TemplateSchema = z.object({
         .nonempty("Name is required")
         .min(2, "Name is too short")
         .max(50, "Name is too long (max 50)"),
-    template: z.string().nonempty("Template is required"),
+    template: z.string().nonempty("Template is required").min(50, "Template is too short"),
 });
 
 function RouteComponent() {
     const loading = useState(false);
+    const navigate = useNavigate();
     const createForm = useAppForm({
         defaultValues: {
             name: "",
@@ -29,6 +31,20 @@ function RouteComponent() {
         validators: {
             onBlur: TemplateSchema,
         },
+        onSubmit: ({ value }) => {
+            requests.post("/templates", {
+                before() {
+                    loading[1](true);
+                },
+                finally() {
+                    loading[1](false);
+                },
+                success() {
+                    navigate({ to: "/templates" });
+                },
+                data: value,
+            });
+        },
     });
 
     return (

From e35bf46dacccf50b4fe929ee020ce179c0c16f16 Mon Sep 17 00:00:00 2001
From: Leons Aleksandrovs <58330666+Skrazzo@users.noreply.github.com>
Date: Thu, 10 Jul 2025 20:36:37 +0300
Subject: [PATCH 5/6] feat(api): add return for all user templates

BREAKING: Template api will return different variables in template
object
---
 backend/controllers/template/template.go | 17 +++++++++++++-
 backend/models/template/template.go      | 30 ++++++++++++++----------
 backend/routes/routes.go                 |  4 ++--
 caddy/Caddyfile                          |  1 +
 4 files changed, 36 insertions(+), 16 deletions(-)

diff --git a/backend/controllers/template/template.go b/backend/controllers/template/template.go
index 16b1a47..c0dd33a 100644
--- a/backend/controllers/template/template.go
+++ b/backend/controllers/template/template.go
@@ -34,7 +34,7 @@ func Create(c *gin.Context) {
 	// Get user id
 	user, err := jwt.GetUser(c)
 	if err != nil {
-		res.Error(c, err.Error(), http.StatusInternalServerError)
+		res.NeedsToLogin(c)
 		return
 	}
 
@@ -61,6 +61,21 @@ func Create(c *gin.Context) {
 }
 
 func Get(c *gin.Context) {
+	// Get user from context
+	user, err := jwt.GetUser(c)
+	if err != nil {
+		res.NeedsToLogin(c)
+		return
+	}
+
+	// Get all user templates
+	templates, err := template.Get("user_id = $1", user.Id)
+	if err != nil {
+		res.Error(c, err.Error(), http.StatusInternalServerError)
+		return
+	}
+
+	res.Success(c, templates)
 }
 
 func Update(c *gin.Context) {
diff --git a/backend/models/template/template.go b/backend/models/template/template.go
index a980e57..da7cb50 100644
--- a/backend/models/template/template.go
+++ b/backend/models/template/template.go
@@ -7,11 +7,11 @@ import (
 )
 
 type Template struct {
-	ID        int
-	UserID    int
-	Name      string
-	Template  string
-	CreatedAt time.Time
+	ID        int       `json:"id"`
+	UserID    int       `json:"user_id"`
+	Name      string    `json:"name"`
+	Template  string    `json:"template"`
+	CreatedAt time.Time `json:"created_at"`
 }
 
 func Create(name string, template string, userId float64) error {
@@ -30,18 +30,23 @@ func Create(name string, template string, userId float64) error {
 // * will follow the pointer to its value
 // If user id is 0, then we will search only by name
 func FindByName(name string, userId float64) ([]Template, error) {
+	templates, err := Get(`"name" = $1 AND user_id = $2`, name, userId)
+	if err != nil {
+		return nil, err
+	}
+
+	return templates, nil
+}
+
+func Get(where string, args ...any) ([]Template, error) {
 	// Create timeout context
 	ctx, cancel := context.WithTimeout(context.Background(), 3*time.Second)
 	defer cancel()
 
 	// Build query and execute
-	query := `SELECT * FROM templates WHERE "name" = $1`
-	args := []any{name}
-
-	// Do we need to search by user id?
-	if userId > 0 {
-		query += " AND user_id = $2"
-		args = append(args, userId)
+	query := `SELECT * FROM templates`
+	if where != "" {
+		query += " WHERE " + where
 	}
 
 	rows, err := db.Pool.Query(ctx, query, args...)
@@ -65,6 +70,5 @@ func FindByName(name string, userId float64) ([]Template, error) {
 		results = append(results, t)
 	}
 
-	// Give pointer back
 	return results, nil
 }
diff --git a/backend/routes/routes.go b/backend/routes/routes.go
index a85b797..d6fb9c9 100644
--- a/backend/routes/routes.go
+++ b/backend/routes/routes.go
@@ -11,7 +11,7 @@ import (
 func SetupRoutes() *gin.Engine {
 	r := gin.Default()
 
-	// Guest routes (Register, Login, check auth)
+	// Guest routes (Register, Login)
 	r.POST("/register", user.Register)
 	r.POST("/login", user.Login)
 
@@ -24,7 +24,7 @@ func SetupRoutes() *gin.Engine {
 
 	// Template routes (REST FUCKING GOOOOO)
 	templates := auth.Group("/templates")
-	// GET (Gets all templates)
+	templates.GET("", template.Get)
 	templates.POST("", template.Create)
 	// PUT (Edit)
 	// DELETE (Delete)
diff --git a/caddy/Caddyfile b/caddy/Caddyfile
index 643de04..bd49dae 100644
--- a/caddy/Caddyfile
+++ b/caddy/Caddyfile
@@ -4,6 +4,7 @@
 }
 
 :8080 {
+    encode
     reverse_proxy frontend:3000
 
     handle_path /api* {

From 16269e96694a6e5f4df417487d4ac6e13a2f2125 Mon Sep 17 00:00:00 2001
From: Leons Aleksandrovs <58330666+Skrazzo@users.noreply.github.com>
Date: Thu, 10 Jul 2025 21:05:10 +0300
Subject: [PATCH 6/6] feat(template): show template in templates view

---
 frontend/src/components/ui/skeleton.tsx | 13 +++++++++
 frontend/src/lib/requests.ts            |  3 +-
 frontend/src/routes/templates/index.tsx | 39 ++++++++++++++++++++++++-
 frontend/src/styles.css                 | 36 -----------------------
 frontend/src/types/api.ts               |  9 ++++++
 5 files changed, 62 insertions(+), 38 deletions(-)
 create mode 100644 frontend/src/components/ui/skeleton.tsx

diff --git a/frontend/src/components/ui/skeleton.tsx b/frontend/src/components/ui/skeleton.tsx
new file mode 100644
index 0000000..32ea0ef
--- /dev/null
+++ b/frontend/src/components/ui/skeleton.tsx
@@ -0,0 +1,13 @@
+import { cn } from "@/lib/utils"
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn("bg-accent animate-pulse rounded-md", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }
diff --git a/frontend/src/lib/requests.ts b/frontend/src/lib/requests.ts
index 104f9d6..88cd4c2 100644
--- a/frontend/src/lib/requests.ts
+++ b/frontend/src/lib/requests.ts
@@ -49,7 +49,7 @@ class Requests {
         return data.data;
     }
 
-    async get<T>(url: string, props: GetProps<T>): Promise<T | void> {
+    async get<T>(url: string, props: GetProps<T>): Promise<T | null> {
         // Call before
         props.before?.();
 
@@ -78,6 +78,7 @@ class Requests {
             // Show notification, and call error callback
             toast.error(err.message);
             props.error?.(err);
+            return null;
         } finally {
             props.finally?.();
         }
diff --git a/frontend/src/routes/templates/index.tsx b/frontend/src/routes/templates/index.tsx
index 4a55d7c..f33ca5a 100644
--- a/frontend/src/routes/templates/index.tsx
+++ b/frontend/src/routes/templates/index.tsx
@@ -1,17 +1,50 @@
 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 { createFileRoute, Link } from "@tanstack/react-router";
 import { Plus } from "lucide-react";
+import type { Template } from "@/types/api";
+import { Skeleton } from "@/components/ui/skeleton";
 
 export const Route = createFileRoute("/templates/")({
     component: RouteComponent,
 });
 
+function RenderTemplates({ templates }: { templates: UseQueryResult<null | Template[], Error> }) {
+    // Render loading
+    if (templates.isPending) {
+        const skelets = new Array(5).fill(null);
+        return skelets.map((_, i) => <Skeleton className="h-10" key={i} />);
+    }
+
+    // Render error
+    if (templates.isError) {
+        return <div className="text-danger font-bold">Error: {templates.error.message}</div>;
+    }
+
+    // Render null
+    if (templates.data === null) {
+        return <div className="text-primary">No templates found</div>;
+    }
+
+    return templates.data.map((template, i) => (
+        <div className="flex gap-2 items-center" key={i}>
+            <p className="text-lg">{template.name}</p>
+        </div>
+    ));
+}
+
 function RouteComponent() {
+    const templates = useQuery({
+        queryKey: ["user_templates"],
+        queryFn: () => requests.get<Template[]>("/templates", {}),
+    });
+
     return (
         <Authorised>
             <div className="flex justify-between items-center">
-                <h1 className="text-2xl font-bold text-primary">0 Templates</h1>
+                <h1 className="text-2xl font-bold text-primary">{templates.data?.length} Templates</h1>
 
                 <Link to="/templates/create">
                     <Button icon={<Plus />} variant="secondary">
@@ -19,6 +52,10 @@ function RouteComponent() {
                     </Button>
                 </Link>
             </div>
+
+            <div className="flex flex-col gap-2 mt-4">
+                <RenderTemplates templates={templates} />
+            </div>
         </Authorised>
     );
 }
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 1c2dfe4..c09f66b 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -1,8 +1,6 @@
 @import "tailwindcss";
 @import "tw-animate-css";
 
-@custom-variant dark (&:is(.dark *));
-
 :root {
     --radius: 0.625rem;
     --background: oklch(1 0 0);
@@ -38,40 +36,6 @@
     --sidebar-ring: oklch(0.708 0 0);
 }
 
-.dark {
-    --background: oklch(0.145 0 0);
-    --foreground: oklch(0.985 0 0);
-    --card: oklch(0.205 0 0);
-    --card-foreground: oklch(0.985 0 0);
-    --popover: oklch(0.205 0 0);
-    --popover-foreground: oklch(0.985 0 0);
-    --primary: oklch(0.922 0 0);
-    --primary-foreground: oklch(0.205 0 0);
-    --secondary: oklch(0.269 0 0);
-    --secondary-foreground: oklch(0.985 0 0);
-    --muted: oklch(0.269 0 0);
-    --muted-foreground: oklch(0.708 0 0);
-    --accent: oklch(0.269 0 0);
-    --accent-foreground: oklch(0.985 0 0);
-    --destructive: oklch(0.704 0.191 22.216);
-    --border: oklch(1 0 0 / 10%);
-    --input: oklch(1 0 0 / 15%);
-    --ring: oklch(0.556 0 0);
-    --chart-1: oklch(0.488 0.243 264.376);
-    --chart-2: oklch(0.696 0.17 162.48);
-    --chart-3: oklch(0.769 0.188 70.08);
-    --chart-4: oklch(0.627 0.265 303.9);
-    --chart-5: oklch(0.645 0.246 16.439);
-    --sidebar: oklch(0.205 0 0);
-    --sidebar-foreground: oklch(0.985 0 0);
-    --sidebar-primary: oklch(0.488 0.243 264.376);
-    --sidebar-primary-foreground: oklch(0.985 0 0);
-    --sidebar-accent: oklch(0.269 0 0);
-    --sidebar-accent-foreground: oklch(0.985 0 0);
-    --sidebar-border: oklch(1 0 0 / 10%);
-    --sidebar-ring: oklch(0.556 0 0);
-}
-
 @theme inline {
     --radius-sm: calc(var(--radius) - 4px);
     --radius-md: calc(var(--radius) - 2px);
diff --git a/frontend/src/types/api.ts b/frontend/src/types/api.ts
index a38fafc..c8a0131 100644
--- a/frontend/src/types/api.ts
+++ b/frontend/src/types/api.ts
@@ -18,3 +18,12 @@ export interface TokenUserInfo {
     name: string;
     email: string;
 }
+
+// -------- Templates --------
+export interface Template {
+    id: number;
+    user_id: number;
+    name: string;
+    template: string;
+    created_at: string;
+}