refactor: use Mantine Breadcrumbs for app navigation

src/app/ui/AppBreadcrumbs.tsx

@@ -1,3 +1,4 @@
+import { Breadcrumbs } from "@mantine/core";
 import type { FC } from "react";
 import { useTranslation } from "react-i18next";
 import { Link, useMatch } from "react-router";
@@ -20,31 +21,24 @@ const BreadcrumbTrail: FC<BreadcrumbTrailProps> = (props) => {
 	const { t } = useTranslation();
 
 	return (
-		<nav
+		<Breadcrumbs
 			aria-label={t("breadcrumbs.label")}
-			className="breadcrumbs"
+			component="nav"
 			data-depth={items.length}
+			separator={<span aria-hidden="true">→</span>}
 		>
-			{items.map((item, index) => (
-				<span className="breadcrumbs-entry" key={item.to ?? item.label}>
-					{index ? (
-						<span
-							aria-hidden="true"
-							className={`breadcrumbs-separator-${index}`}
-						>
-							→
-						</span>
-					) : null}
-					<span className={`breadcrumbs-item-${index}`}>
-						{item.to ? (
-							<Link to={item.to}>{item.label}</Link>
-						) : (
-							<span aria-current="page">{item.label}</span>
-						)}
+			{items.map((item) =>
+				item.to ? (
+					<Link key={item.to} to={item.to}>
+						{item.label}
+					</Link>
+				) : (
+					<span aria-current="page" key={item.label}>
+						{item.label}
 					</span>
-				</span>
-			))}
-		</nav>
+				),
+			)}
+		</Breadcrumbs>
 	);
 };