diff --git a/Foxnouns.Frontend/app/components/nav/BaseNavbar.tsx b/Foxnouns.Frontend/app/components/nav/BaseNavbar.tsx new file mode 100644 index 0000000..f87b941 --- /dev/null +++ b/Foxnouns.Frontend/app/components/nav/BaseNavbar.tsx @@ -0,0 +1,22 @@ +import { ReactNode } from "react"; +import { Nav, Navbar } from "react-bootstrap"; +import { Link } from "@remix-run/react"; +import Logo from "~/components/nav/Logo"; + +export default function BaseNavbar({ children, theme }: { children?: ReactNode; theme: string }) { + return ( + + + + + {children && ( + <> + + + + + + )} + + ); +} diff --git a/Foxnouns.Frontend/app/components/nav/Navbar.tsx b/Foxnouns.Frontend/app/components/nav/Navbar.tsx index 7e311f2..3f8beae 100644 --- a/Foxnouns.Frontend/app/components/nav/Navbar.tsx +++ b/Foxnouns.Frontend/app/components/nav/Navbar.tsx @@ -1,11 +1,11 @@ import { Link, useFetcher } from "@remix-run/react"; import Meta from "~/lib/api/meta"; import { User, UserSettings } from "~/lib/api/user"; -import Logo from "./Logo"; -import { Nav, Navbar, NavDropdown } from "react-bootstrap"; +import { Nav, NavDropdown } from "react-bootstrap"; import { BrightnessHigh, BrightnessHighFill, MoonFill } from "react-bootstrap-icons"; import { useTranslation } from "react-i18next"; +import BaseNavbar from "~/components/nav/BaseNavbar"; export default function MainNavbar({ user, @@ -49,36 +49,28 @@ export default function MainNavbar({ const theme = settings.dark_mode ? "dark" : "light"; return ( - - - - - - - - - + + {userMenu} + + + {t("navbar.theme")} + + } + align="end" + > + + {t("navbar.theme-auto")} + + + {t("navbar.theme-dark")} + + + {t("navbar.theme-light")} + + + + ); } diff --git a/Foxnouns.Frontend/app/root.tsx b/Foxnouns.Frontend/app/root.tsx index a3296b4..e7caee7 100644 --- a/Foxnouns.Frontend/app/root.tsx +++ b/Foxnouns.Frontend/app/root.tsx @@ -24,6 +24,8 @@ import getLocalSettings from "./lib/settings.server"; import { LANGUAGE } from "~/env.server"; import { errorCodeDesc } from "./components/ErrorAlert"; import { Container } from "react-bootstrap"; +import { ReactNode } from "react"; +import BaseNavbar from "~/components/nav/BaseNavbar"; export const loader = async ({ request }: LoaderFunctionArgs) => { const meta = await serverRequest("GET", "/meta"); @@ -54,7 +56,7 @@ export const loader = async ({ request }: LoaderFunctionArgs) => { ); }; -export function Layout({ children }: { children: React.ReactNode }) { +export function Layout({ children }: { children: ReactNode }) { const { locale, settings } = useRouteLoaderData("root") || { meta: { users: { @@ -94,6 +96,8 @@ export function Layout({ children }: { children: React.ReactNode }) { } export function ErrorBoundary() { + const data = useRouteLoaderData("root"); + // eslint-disable-next-line @typescript-eslint/no-explicit-any const error: any = useRouteError(); const { t } = useTranslation(); @@ -110,14 +114,17 @@ export function ErrorBoundary() { return ( - - <>{t("error.title")} - pronouns.cc</> - + {t("error.title")} - {errorElem} + {data?.meUser && data?.settings && data?.meta ? ( + + ) : ( + + )} + {errorElem} @@ -130,8 +137,14 @@ function ApiErrorElem({ error }: { error: ApiError }) { return ( <> -

{t("error.heading")}

+

{t("error.heading")}

{errorDesc}

+
+ {t("error.more-info")} +
+					{JSON.stringify(error, null, "  ")}
+				
+
); } diff --git a/Foxnouns.Frontend/public/locales/en.json b/Foxnouns.Frontend/public/locales/en.json index d3c8d85..07672bc 100644 --- a/Foxnouns.Frontend/public/locales/en.json +++ b/Foxnouns.Frontend/public/locales/en.json @@ -18,7 +18,8 @@ "member-not-found": "Member not found, please check your spelling and try again.", "user-not-found": "User not found, please check your spelling and try again." }, - "title": "Error" + "title": "An error occurred", + "more-info": "Click here for a more detailed error" }, "navbar": { "view-profile": "View profile", @@ -66,9 +67,13 @@ "welcome": { "title": "Welcome", "header": "Welcome to pronouns.cc!", + "blurb": "{welcome.blurb}", "customize-profile": "Customize your profile", + "customize-profile-blurb": "{welcome.customize-profile-blurb}", "create-members": "Create members", + "create-members-blurb": "{welcome.create-members-blurb}", "custom-preferences": "Customize your preferences", + "custom-preferences-blurb": "{welcome.custom-preferences-blurb}", "profile-button": "Go to your profile" } }