Prepeared for template creation

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">
+        <header className="py-3 px-4 flex gap-2 bg-panel text-black justify-between shadow mb-4">
-            <nav className="flex flex-row font-bold">
+            <nav className="flex items-center gap-4 font-bold ">
-                <Link to="/" className="flex items-center gap-2">
+                <Link to="/" {...linkClass}>
-                    <House size={20} />
+                    <House {...iconProps} />
                     Home
                 </Link>
+                <Link to="/templates" {...linkClass}>
+                    <LayoutTemplate {...iconProps} />
+                    Templates
+                </Link>
             </nav>
         </header>
     );

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 };

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

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'
+  to: '/' | '/login' | '/register' | '/templates/create' | '/templates'
-  id: '__root__' | '/' | '/login' | '/register'
+  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)

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>
     );
 }

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>
+    );
+}

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>
+    );
+}