Repertoire view routing

packages/frontend/src/app.tsx

@@ -1,6 +1,7 @@
 import { Home } from "@/routes/Home";
 import { Login } from "@/routes/Login";
 import { Piece } from "@/routes/Piece";
+import { Repertoire } from "@/routes/Repertoire";
 import { Repertoires } from "@/routes/Repertoires";
 import { Root } from "@/routes/Root";
 import { Settings } from "@/routes/Settings";
@@ -35,7 +36,16 @@ const router = createBrowserRouter([
 			},
 			{
 				path: "repertoire",
-				Component: Repertoires,
+				children: [
+					{
+						index: true,
+						Component: Repertoires,
+					},
+					{
+						path: ":repertoireId",
+						Component: Repertoire,
+					},
+				],
 			},
 			{
 				path: "settings",

packages/frontend/src/routes/Repertoires.tsx

@@ -10,6 +10,7 @@ import { RepertoireId } from "common";
 import { Cause, Clock, Duration, Effect, Option } from "effect";
 import { Loader2, Plus } from "lucide-react";
 import { FormEventHandler, ReactNode, useId, useState } from "react";
+import { Link, useNavigate } from "react-router-dom";
 
 export function Repertoires() {
 
@@ -127,7 +128,7 @@ function RepertoireRow(props: RepertoireRow.Props) {
 	return (
 		<TableRow>
 			<TableCell>
-				{repertoire.name}
+				<Link className="underline" to={repertoire.repertoireId}>{repertoire.name}</Link>
 			</TableCell>
 			<TableCell>
 				{...piecesParts}
@@ -148,6 +149,8 @@ function RepertoireRow(props: RepertoireRow.Props) {
 
 function AddRepertoireDialogContent() {
 
+	const navigate = useNavigate();
+
 	const [name, setName] = useState("");
 
 	const nameId = useId();
@@ -160,7 +163,7 @@ function AddRepertoireDialogContent() {
 		try {
 			setIsLoading(true);
 
-			const { error } = await client.repertoire.post({
+			const { data, error } = await client.repertoire.post({
 				name,
 				entries: [],
 			});
@@ -169,6 +172,8 @@ function AddRepertoireDialogContent() {
 				console.error(error.value);
 				return;
 			}
+
+			navigate(data.repertoireId);
 		} finally {
 			setIsLoading(false);
 		}