Add dedicated home screen

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

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

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