Split out NotFound page to its own component, improve.

packages/react/src/components/common/NotFound.tsx

@@ -0,0 +1,22 @@
+import { Button } from "@/shadcn/ui/button";
+import { Helmet } from "react-helmet-async";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router-dom";
+
+export default function NotFound() {
+  const { t } = useTranslation();
+
+  return (
+    <>
+      <Helmet>
+        <title>{t("views.notFound.title")} - Holodex</title>
+      </Helmet>
+      <div className="text-center">
+        <h1 className="my-10 text-xl font-bold">{t("views.notFound.title")}</h1>
+        <Button asChild variant="secondary">
+          <Link to="/">{t("views.notFound.back")}</Link>
+        </Button>
+      </div>
+    </>
+  );
+}

packages/react/src/locales/en/ui.yml

@@ -298,7 +298,7 @@ views:
       dateuploadedLatestFirst: Upload date, latest first
       dateuploadedEarliestFirst: Upload date, earliest first
   notFound:
-    title: Content not found
+    title: Content Not Found
     back: Return Home
   search:
     sort:

packages/react/src/routes/router.tsx

@@ -101,6 +101,7 @@ const Watch = lazy(() =>
 const ResetClientPage = lazy(() =>
   import("./debug").then((module) => ({ default: module.ResetClientPage })),
 );
+const NotFound = lazy(() => import("@/components/common/NotFound"));
 const Playlist = lazy(() => import("./playlist"));
 const Multiview = lazy(() =>
   import("./multiview/multiview").then((module) => ({
@@ -174,6 +175,6 @@ export const routes = (
     <Route path="watch/:id" Component={Watch} />
     <Route path="debug" Component={ResetClientPage} />
     <Route path="debug/run" element={<div>Debug Run</div>} />
-    <Route path="*" element={<div>Not found</div>} />
+    <Route path="*" Component={NotFound} />
   </Route>
 );