feat(cover): Display generated cover letters

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

@@ -0,0 +1,48 @@
+import renderQueryState from "@/components/RenderQueryState";
+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 "../../editor.css";
+
+export const Route = createFileRoute("/cover/$coverId")({
+    component: RouteComponent,
+});
+
+function RouteComponent() {
+    const { coverId } = Route.useParams();
+
+    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]",
+        },
+    });
+
+    return (
+        <Authorised>
+            <div>
+                <h1 className="text-2xl font-semibold">{cover.data?.cover.name || "Loading..."}</h1>
+                {/* edit buttons */}
+            </div>
+
+            <div className="mt-8 p-4 border rounded-md">
+                {coverState !== null ? (
+                    coverState
+                ) : (
+                    <div
+                        className="tiptap"
+                        dangerouslySetInnerHTML={{ __html: cover.data?.cover.letter || "" }}
+                    />
+                )}
+            </div>
+        </Authorised>
+    );
+}

frontend/src/routes/index.tsx

@@ -2,16 +2,31 @@ import { createFileRoute, Link } from "@tanstack/react-router";
 import Authorised from "@/layouts/Authorised";
 import { Button } from "@/components/ui/button";
 import { Plus } from "lucide-react";
+import { useQuery } from "@tanstack/react-query";
+import requests from "@/lib/requests";
+import type { CoverLetterPreview } from "@/types/api";
+import renderQueryState from "@/components/RenderQueryState";
 
 export const Route = createFileRoute("/")({
     component: App,
 });
 
 function App() {
+    const letters = useQuery({
+        queryKey: ["cover_letters"],
+        queryFn: () => requests.get<{ covers: CoverLetterPreview[] }>("/cover", {}),
+    });
+    const lettersState = renderQueryState({
+        query: letters,
+        noFound: "cover letters",
+    });
+
     return (
         <Authorised>
             <div className="flex justify-between items-center">
-                <h1 className="text-2xl font-bold text-primary">0 Cover letters</h1>
+                <h1 className="text-2xl font-bold text-primary">
+                    {letters.data?.covers.length} Cover letters
+                </h1>
 
                 <Link to="/cover/create">
                     <Button icon={<Plus />} variant="secondary">
@@ -19,6 +34,21 @@ function App() {
                     </Button>
                 </Link>
             </div>
+
+            <div className="flex flex-col gap-2 mt-4">
+                {lettersState !== null
+                    ? lettersState
+                    : letters.data?.covers.map((l) => (
+                          <Link
+                              className="px-3 py-2 cursor-pointer rounded hover:bg-secondary"
+                              to={"/cover/$coverId"}
+                              params={{ coverId: l.id.toString() }}
+                              key={l.id}
+                          >
+                              <p>{l.name}</p>
+                          </Link>
+                      ))}
+            </div>
         </Authorised>
     );
 }