From bf4361d207e6bc7a22ccea8c372c6fe733ce6d53 Mon Sep 17 00:00:00 2001
From: Szymon Nowakowski <renati@renati.me>
Date: Sat, 28 Dec 2024 21:27:10 +0100
Subject: [PATCH] Add dedicated home screen

---
 packages/frontend/src/app.tsx           |  3 ++-
 packages/frontend/src/routes/Home.tsx   | 21 +++++++++++++++++++++
 packages/frontend/src/routes/Pieces.tsx |  4 ++--
 3 files changed, 25 insertions(+), 3 deletions(-)
 create mode 100644 packages/frontend/src/routes/Home.tsx

diff --git a/packages/frontend/src/app.tsx b/packages/frontend/src/app.tsx
index 770891b..551477a 100644
--- a/packages/frontend/src/app.tsx
+++ b/packages/frontend/src/app.tsx
@@ -1,6 +1,7 @@
-import { Home, Pieces } from "@/routes/Pieces";
+import { Home } from "@/routes/Home";
 import { Login } from "@/routes/Login";
 import { Piece } from "@/routes/Piece";
+import { Pieces } from "@/routes/Pieces";
 import { Repertoire } from "@/routes/Repertoire";
 import { Repertoires } from "@/routes/Repertoires";
 import { Root } from "@/routes/Root";
diff --git a/packages/frontend/src/routes/Home.tsx b/packages/frontend/src/routes/Home.tsx
new file mode 100644
index 0000000..3fc2d32
--- /dev/null
+++ b/packages/frontend/src/routes/Home.tsx
@@ -0,0 +1,21 @@
+import { ListMusic, Music3 } from "lucide-react";
+import { Link } from "react-router-dom";
+
+export function Home() {
+	return (
+		<div className="p-4 overflow-y-auto flex flex-wrap items-start justify-center gap-4">
+			<Link to="piece">
+				<div className="w-64 h-64 p-4 flex flex-col items-center justify-center gap-4 rounded-md text-lg font-medium ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-stone-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 dark:ring-offset-stone-950 dark:focus-visible:ring-stone-300 border border-stone-200 bg-white hover:bg-stone-100 hover:text-stone-900 dark:border-stone-800 dark:bg-stone-950 dark:hover:bg-stone-800 dark:hover:text-stone-50">
+					<Music3 size={32} absoluteStrokeWidth />
+					<div>Utwory</div>
+				</div>
+			</Link>
+			<Link to="repertoire">
+				<div className="w-64 h-64 p-4 flex flex-col items-center justify-center gap-4 rounded-md text-lg font-medium ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-stone-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 dark:ring-offset-stone-950 dark:focus-visible:ring-stone-300 border border-stone-200 bg-white hover:bg-stone-100 hover:text-stone-900 dark:border-stone-800 dark:bg-stone-950 dark:hover:bg-stone-800 dark:hover:text-stone-50">
+					<ListMusic size={32} absoluteStrokeWidth />
+					<div>Repertuary</div>
+				</div>
+			</Link>
+		</div>
+	);
+}
diff --git a/packages/frontend/src/routes/Pieces.tsx b/packages/frontend/src/routes/Pieces.tsx
index cc552c2..96d0977 100644
--- a/packages/frontend/src/routes/Pieces.tsx
+++ b/packages/frontend/src/routes/Pieces.tsx
@@ -130,7 +130,7 @@ function PieceRow(props: PieceRow.Props) {
 	return (
 		<TableRow>
 			<TableCell>
-				<Link className="underline" to={`piece/${piece.pieceId}`}>{piece.name}</Link>
+				<Link className="underline" to={piece.pieceId}>{piece.name}</Link>
 			</TableCell>
 			<TableCell>
 				{...composerParts.flatMap((x, i, a) => i < a.length - 1 ? [x, <br />] : [x])}
@@ -183,7 +183,7 @@ function AddPieceDialogContent() {
 				return;
 			}
 
-			navigate(`piece/${data.pieceId}`);
+			navigate(data.pieceId);
 		} finally {
 			setIsLoading(false);
 		}