feat: more routesand pages

app/bugs/[...slugs]/page.tsx

@@ -0,0 +1,13 @@
+import { BugsRoute } from "../../../lib/routes/Bugs/BugsRoute";
+import { t } from "../../i18n";
+
+export async function generateMetadata() {
+  return {
+    title: t("bugs-route.meta.title"),
+    description: t("bugs-route.meta.description"),
+  };
+}
+
+export default function BugsPage() {
+  return <BugsRoute></BugsRoute>;
+}

app/cards/[id]/page.tsx

@@ -0,0 +1,13 @@
+import { CardCollectionRoute } from "../../../lib/routes/CardCollection/CardCollectionRoute";
+import { t } from "../../i18n";
+
+export async function generateMetadata() {
+  return {
+    title: t("card-collection-route.meta.title"),
+    description: t("card-collection-route.meta.description"),
+  };
+}
+
+export default function CardCollectionPage() {
+  return <CardCollectionRoute></CardCollectionRoute>;
+}

app/characters/[id]/page.tsx

@@ -0,0 +1,13 @@
+import { CharacterRoute } from "../../../lib/routes/Character/CharacterRoute";
+import { t } from "../../i18n";
+
+export async function generateMetadata() {
+  return {
+    title: t("character-route.meta.title"),
+    description: t("character-route.meta.description"),
+  };
+}
+
+export default function CharacterPage() {
+  return <CharacterRoute></CharacterRoute>;
+}

app/characters/[id]/print/page.tsx

@@ -0,0 +1,13 @@
+import { CharacterPrintRoute } from "../../../../lib/routes/CharacterPrint/CharacterPrintRoute";
+import { t } from "../../../i18n";
+
+export async function generateMetadata() {
+  return {
+    title: t("character-print-route.meta.title"),
+    description: t("character-print-route.meta.description"),
+  };
+}
+
+export default function CharacterPrintPage() {
+  return <CharacterPrintRoute></CharacterPrintRoute>;
+}

app/characters/new/[category]/[name]/page.tsx

@@ -0,0 +1,13 @@
+import { NewCharacterRoute } from "../../../../../lib/routes/NewCharacter/NewCharacterRoute";
+import { t } from "../../../../i18n";
+
+export async function generateMetadata() {
+  return {
+    title: t("new-character-route.meta.title"),
+    description: t("new-character-route.meta.description"),
+  };
+}
+
+export default function NewCharacterPage() {
+  return <NewCharacterRoute></NewCharacterRoute>;
+}

app/feature-requests/[...slugs]/page.tsx

@@ -0,0 +1,13 @@
+import { FeatureRequestsRoute } from "../../../lib/routes/FeatureRequests/FeatureRequestsRoute";
+import { t } from "../../i18n";
+
+export async function generateMetadata() {
+  return {
+    title: t("feature-requests-route.meta.title"),
+    description: t("feature-requests-route.meta.description"),
+  };
+}
+
+export default function FeatureRequestsPage() {
+  return <FeatureRequestsRoute></FeatureRequestsRoute>;
+}

app/feature-requests/page.tsx

@@ -0,0 +1,13 @@
+import { FeatureRequestsRoute } from "../../lib/routes/FeatureRequests/FeatureRequestsRoute";
+import { t } from "../i18n";
+
+export async function generateMetadata() {
+  return {
+    title: t("feature-requests.meta.title"),
+    description: t("feature-requests.meta.description"),
+  };
+}
+
+export default function FeatureRequestsPage() {
+  return <FeatureRequestsRoute></FeatureRequestsRoute>;
+}

app/scenes/[id]/page.tsx

@@ -0,0 +1,13 @@
+import { SceneRoute } from "../../../lib/routes/Scene/SceneRoute";
+import { t } from "../../i18n";
+
+export async function generateMetadata() {
+  return {
+    title: t("scene-route.meta.title"),
+    description: t("scene-route.meta.description"),
+  };
+}
+
+export default function ScenePage() {
+  return <SceneRoute></SceneRoute>;
+}

lib/components/Page/Page.tsx

@@ -600,7 +600,7 @@ export const Page: React.FC<{
                     label: "Documents",
                     links: [
                       {
-                        href: "https://fari.games/en/resources/fari-rpgs/fari-app-wiki",
+                        href: "https://fari.community/creators/fari-rpgs/projects/fari-app-wiki",
                         label: t("menu.fari-wiki"),
                         icon: <InfoIcon />,
                       },

lib/routes/Bugs/BugsRoute.tsx

@@ -1,3 +1,4 @@
+"use client";
 import BugReportIcon from "@mui/icons-material/BugReport";
 import { Box, Container, useTheme } from "@mui/material";
 import { Heading } from "../../components/Heading/Heading";

lib/routes/CardCollection/CardCollectionRoute.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import AddCircleOutlineIcon from "@mui/icons-material/AddCircleOutline";
 import SaveIcon from "@mui/icons-material/Save";
 import Masonry from "@mui/lab/Masonry";
@@ -13,9 +15,8 @@ import {
 } from "@mui/material";
 import { produce } from "immer";
 import isEqual from "lodash/isEqual";
-import { useRouter } from "next/navigation";
+import { useParams, useRouter } from "next/navigation";
 import { useContext, useEffect, useMemo, useState } from "react";
-import { useParams } from "react-router";
 
 import {
   ContentEditable,
@@ -25,7 +26,6 @@ import { FateLabel } from "../../components/FateLabel/FateLabel";
 import { IndexCard } from "../../components/IndexCard/IndexCard";
 import { MasonryResizer } from "../../components/MasonryResizer/MasonryResizer";
 import { Page } from "../../components/Page/Page";
-import { PageMeta } from "../../components/PageMeta/PageMeta";
 import { IndexCardCollectionsContext } from "../../contexts/IndexCardCollectionsContext/IndexCardCollectionsContext";
 import { useLogger } from "../../contexts/InjectionsContext/hooks/useLogger";
 import { MyBinderContext } from "../../contexts/MyBinderContext/MyBinderContext";
@@ -239,8 +239,8 @@ function useCardCollection(props: {
   };
 }
 
-function CardCollectionRoute() {
-  const params = useParams<{ id: string }>();
+export function CardCollectionRoute() {
+  const params = useParams();
   const indexCardCollectionsManager = useContext(IndexCardCollectionsContext);
   const [selectedCardCollection, setSelectedCardCollection] = useState<
     IIndexCardCollection | undefined
@@ -286,7 +286,6 @@ function CardCollectionRoute() {
 
   return (
     <>
-      <PageMeta title={pageTitle} />
       <Page maxWidth="none" sx={{ paddingTop: "2rem" }}>
         <Container maxWidth="md">
           <Box mb=".5rem">

lib/routes/Character/CharacterRoute.tsx

@@ -1,8 +1,9 @@
+"use client";
+
 import { Box, Snackbar, useTheme } from "@mui/material";
+import { useParams, useRouter } from "next/navigation";
 import { useContext, useEffect, useRef, useState } from "react";
-import { useNavigate, useParams } from "react-router";
 import { Page } from "../../components/Page/Page";
-import { PageMeta } from "../../components/PageMeta/PageMeta";
 import { Toolbox } from "../../components/Toolbox/Toolbox";
 import { CharactersContext } from "../../contexts/CharactersContext/CharactersContext";
 import { useLogger } from "../../contexts/InjectionsContext/hooks/useLogger";
@@ -86,13 +87,13 @@ function DicePoolResultsSnackBar(props: {
   );
 }
 
-function CharacterRoute() {
+export function CharacterRoute() {
   const theme = useTheme();
-  const params = useParams<{ id: string }>();
+  const params = useParams();
   const query = useQuery<"dialog" | "readonly">();
   const dialogMode = query.get("dialog") === "true";
   const readonly = query.get("readonly") === "true";
-  const navigate = useNavigate();
+  const router = useRouter();
   const charactersManager = useContext(CharactersContext);
   const [dicePoolResults, setDicePoolResults] = useState<
     Array<IDicePoolResult>
@@ -130,16 +131,13 @@ function CharacterRoute() {
     if (characterToLoad) {
       setSelectedCharacter(characterToLoad);
     } else {
-      navigate("/", {
-        replace: true,
-      });
+      router.replace("/");
       myBinderManager.actions.open({ folder: "characters" });
     }
   }, [params.id, charactersManager.state.characters]);
 
   return (
     <>
-      <PageMeta title={selectedCharacter?.name} />
       <DicePoolResultsSnackBar
         open={resultsVisible}
         onClose={handleHideResults}

lib/routes/CharacterPrint/CharacterPrintRoute.tsx

@@ -1,3 +1,4 @@
+"use client";
 import {
   Box,
   Container,
@@ -6,11 +7,10 @@ import {
   Typography,
   useTheme,
 } from "@mui/material";
+import { useParams, useRouter } from "next/navigation";
 import { useContext, useEffect, useState } from "react";
-import { useNavigate, useParams } from "react-router";
 import { previewContentEditable } from "../../components/ContentEditable/ContentEditable";
 import { FateLabel } from "../../components/FateLabel/FateLabel";
-import { PageMeta } from "../../components/PageMeta/PageMeta";
 import { CharactersContext } from "../../contexts/CharactersContext/CharactersContext";
 import { useLogger } from "../../contexts/InjectionsContext/hooks/useLogger";
 import { MyBinderContext } from "../../contexts/MyBinderContext/MyBinderContext";
@@ -22,10 +22,11 @@ import {
   useMiniTheme,
 } from "../Character/components/CharacterDialog/MiniThemeContext";
 import { BlockByType } from "../Character/components/CharacterDialog/components/BlockByType";
-function CharacterPrintRoute() {
+
+export function CharacterPrintRoute() {
   const theme = useTheme();
-  const navigate = useNavigate();
-  const params = useParams<{ id: string }>();
+  const router = useRouter();
+  const params = useParams();
   const charactersManager = useContext(CharactersContext);
   const settingsManager = useContext(SettingsContext);
   const [character, setCharacter] = useState<ICharacter | undefined>(undefined);
@@ -46,9 +47,7 @@ function CharacterPrintRoute() {
     if (characterToLoad) {
       setCharacter(characterToLoad);
     } else {
-      navigate("/", {
-        replace: true,
-      });
+      router.replace("/");
       myBinderManager.actions.open({ folder: "characters" });
     }
   }, [params.id, charactersManager.state.characters]);
@@ -57,8 +56,6 @@ function CharacterPrintRoute() {
 
   return (
     <>
-      <PageMeta title={character?.name} />
-
       <Box bgcolor={theme.palette.background.paper} mt="1rem">
         <Container maxWidth={maxWidth}>
           <PrintCharacter character={character} />

lib/routes/FeatureRequests/FeatureRequestsRoute.tsx

@@ -1,8 +1,9 @@
+"use client";
 import QuestionAnswerIcon from "@mui/icons-material/QuestionAnswer";
+
 import { Box, Container, useTheme } from "@mui/material";
 import { Heading } from "../../components/Heading/Heading";
 import { Page } from "../../components/Page/Page";
-import { PageMeta } from "../../components/PageMeta/PageMeta";
 import { useCanny } from "../../hooks/useCanny/useCanny";
 import { useTranslate } from "../../hooks/useTranslate/useTranslate";
 
@@ -20,10 +21,6 @@ export function FeatureRequestsRoute() {
 
   return (
     <Page sx={{ paddingTop: "2rem" }}>
-      <PageMeta
-        title={pageTitle}
-        description={t("feature-requests-route.meta.description")}
-      />
       <Heading
         icon={QuestionAnswerIcon}
         title={t("feature-requests-route.meta.title")}

lib/routes/Home/HomeRoute.tsx

@@ -396,7 +396,7 @@ export const HomeRoute: React.FC<{}> = () => {
             src="https://img.icons8.com/plasticine/100/000000/contract.png"
           />
         ),
-        href: "https://fari.games/en/resources/fari-rpgs/fari-app-wiki",
+        href: "https://fari.community/creators/fari-rpgs/projects/fari-app-wiki",
       },
       {
         label: t("home-route.cards.fari-games.title"),
@@ -410,7 +410,7 @@ export const HomeRoute: React.FC<{}> = () => {
             src="https://img.icons8.com/plasticine/100/000000/bookmark--v1.png"
           />
         ),
-        href: "https://fari.games",
+        href: "https://fari.community",
       },
     ];
     return (

lib/routes/Scene/SceneRoute.tsx

@@ -1,9 +1,9 @@
+"use client";
 import { Box } from "@mui/material";
+import { useParams, useRouter } from "next/navigation";
 import { useContext, useEffect, useState } from "react";
-import { useNavigate, useParams } from "react-router";
 import { previewContentEditable } from "../../components/ContentEditable/ContentEditable";
 import { Page } from "../../components/Page/Page";
-import { PageMeta } from "../../components/PageMeta/PageMeta";
 import { Scene } from "../../components/Scene/Scene";
 import { Toolbox } from "../../components/Toolbox/Toolbox";
 import { useLogger } from "../../contexts/InjectionsContext/hooks/useLogger";
@@ -14,14 +14,14 @@ import { useEvent } from "../../hooks/useEvent/useEvent";
 import { useScene } from "../../hooks/useScene/useScene";
 import { DiceDrawer } from "../DiceRoute/components/DiceDrawer";
 
-function SceneRoute() {
-  const params = useParams<{ id: string }>();
+export function SceneRoute() {
+  const params = useParams();
   const scenesManager = useContext(ScenesContext);
   const sceneManager = useScene();
   const sceneName = sceneManager.state.scene?.name ?? "";
 
   const pageTitle = previewContentEditable({ value: sceneName });
-  const navigate = useNavigate();
+  const router = useRouter();
   const logger = useLogger();
   const myBinderManager = useContext(MyBinderContext);
 
@@ -42,14 +42,13 @@ function SceneRoute() {
     if (sceneToLoad) {
       sceneManager.actions.loadScene(sceneToLoad);
     } else {
-      navigate("/", { replace: true });
+      router.replace("/");
       myBinderManager.actions.open({ folder: "scenes" });
     }
   }, [params.id, scenesManager.state.scenes]);
 
   return (
     <>
-      <PageMeta title={pageTitle} />
       <Page maxWidth="none" sx={{ paddingTop: "2rem" }}>
         <Box px="2rem">
           <Scene