add page titles

src/assets/locales/en.json

@@ -56,7 +56,15 @@
     "goHome": "Back to home"
   },
   "global": {
-    "name": "movie-web"
+    "name": "movie-web",
+    "pages": {
+      "pagetitle": "{{title}} - movie-web",
+      "dmca": "DMCA",
+      "settings": "Settings",
+      "about": "About",
+      "login": "Login",
+      "register": "Register"
+    }
   },
   "media": {
     "types": {

src/pages/About.tsx

@@ -3,6 +3,7 @@ import { useTranslation } from "react-i18next";
 import { ThinContainer } from "@/components/layout/ThinContainer";
 import { Ol } from "@/components/utils/Ol";
 import { Heading1, Heading2, Paragraph } from "@/components/utils/Text";
+import { PageTitle } from "@/pages/parts/util/PageTitle";
 
 import { SubPageLayout } from "./layouts/SubPageLayout";
 
@@ -19,6 +20,7 @@ export function AboutPage() {
   const { t } = useTranslation();
   return (
     <SubPageLayout>
+      <PageTitle subpage k="global.pages.about" />
       <ThinContainer>
         <Heading1>{t("faq.title")}</Heading1>
         <Ol

src/pages/Dmca.tsx

@@ -1,9 +1,9 @@
-/* eslint-disable react/no-unescaped-entities */
 import { useTranslation } from "react-i18next";
 
 import { Icon, Icons } from "@/components/Icon";
 import { ThinContainer } from "@/components/layout/ThinContainer";
 import { Heading1, Paragraph } from "@/components/utils/Text";
+import { PageTitle } from "@/pages/parts/util/PageTitle";
 
 import { SubPageLayout } from "./layouts/SubPageLayout";
 
@@ -13,6 +13,7 @@ export function DmcaPage() {
 
   return (
     <SubPageLayout>
+      <PageTitle subpage k="global.pages.dmca" />
       <ThinContainer>
         <Heading1>{t("screens.dmca.title")}</Heading1>
         <Paragraph>{t("screens.dmca.text")}</Paragraph>

src/pages/Login.tsx

@@ -2,12 +2,14 @@ import { useHistory } from "react-router-dom";
 
 import { SubPageLayout } from "@/pages/layouts/SubPageLayout";
 import { LoginFormPart } from "@/pages/parts/auth/LoginFormPart";
+import { PageTitle } from "@/pages/parts/util/PageTitle";
 
 export function LoginPage() {
   const history = useHistory();
 
   return (
     <SubPageLayout>
+      <PageTitle subpage k="global.pages.login" />
       <LoginFormPart
         onLogin={() => {
           history.push("/");

src/pages/Register.tsx

@@ -11,6 +11,7 @@ import {
 import { PassphraseGeneratePart } from "@/pages/parts/auth/PassphraseGeneratePart";
 import { TrustBackendPart } from "@/pages/parts/auth/TrustBackendPart";
 import { VerifyPassphrase } from "@/pages/parts/auth/VerifyPassphrasePart";
+import { PageTitle } from "@/pages/parts/util/PageTitle";
 
 function CaptchaProvider(props: {
   siteKey: string | null;
@@ -34,6 +35,7 @@ export function RegisterPage() {
   return (
     <CaptchaProvider siteKey={siteKey}>
       <SubPageLayout>
+        <PageTitle subpage k="global.pages.register" />
         {step === 0 ? (
           <TrustBackendPart
             onNext={(meta: MetaResponse) => {

src/pages/Settings.tsx

@@ -28,6 +28,7 @@ import { DeviceListPart } from "@/pages/parts/settings/DeviceListPart";
 import { RegisterCalloutPart } from "@/pages/parts/settings/RegisterCalloutPart";
 import { SidebarPart } from "@/pages/parts/settings/SidebarPart";
 import { ThemePart } from "@/pages/parts/settings/ThemePart";
+import { PageTitle } from "@/pages/parts/util/PageTitle";
 import { AccountWithToken, useAuthStore } from "@/stores/auth";
 import { useLanguageStore } from "@/stores/language";
 import { useSubtitleStore } from "@/stores/subtitles";
@@ -191,6 +192,7 @@ export function SettingsPage() {
   ]);
   return (
     <SubPageLayout>
+      <PageTitle subpage k="global.pages.settings" />
       <SettingsLayout>
         <div id="settings-account">
           <Heading1 border className="!mb-0">

src/pages/parts/util/PageTitle.tsx

@@ -0,0 +1,20 @@
+import { Helmet } from "react-helmet-async";
+import { useTranslation } from "react-i18next";
+
+export interface PageTitleProps {
+  k: string;
+  subpage?: boolean;
+}
+
+export function PageTitle(props: PageTitleProps) {
+  const { t } = useTranslation();
+
+  const title = t(props.k);
+  const subPageTitle = t("global.pages.pagetitle", { title });
+
+  return (
+    <Helmet>
+      <title>{props.subpage ? subPageTitle : title}</title>
+    </Helmet>
+  );
+}