feat: added different document titles if the app is installed (#5)

Author: The24thDS

src/components/Home.tsx

@@ -1,8 +1,9 @@
 import { Text } from "@mantine/core";
-import { useDocumentTitle } from "@mantine/hooks";
+
+import { useCustomDocumentTitle } from "../hooks";
 
 export default function Home() {
-  useDocumentTitle("RMG Utils for Stellaris - Home");
+  useCustomDocumentTitle("Home");
   return (
     <Text align="center" size="xl" weight={700}>
       Welcome to RMG's utils for Stellaris. Use the tabs above to navigate.

src/components/LightLocatorsGeneratorTab.tsx

@@ -7,19 +7,20 @@ import {
   Text,
   Textarea,
 } from "@mantine/core";
-import { useDocumentTitle, useInputState } from "@mantine/hooks";
+import { useInputState } from "@mantine/hooks";
 import * as Sentry from "@sentry/browser";
 import { NetlifyFunctions } from "../constants";
 import { makeLocators } from "../utils/factories";
 import { isDNTEnabled, netlifyFunctionInvoke } from "../utils/general";
+import { useCustomDocumentTitle } from "../hooks";
 
 const gridColums = 12;
 
 export default function LightLocatorsGeneratorTab() {
   const [locators, setLocators] = useInputState<number | "">(10);
   const [stateTime, setStateTime] = useInputState<number | "">(5);
   const [generatedLocators, setGeneratedLocators] = useInputState("");
-  useDocumentTitle("RMG Utils for Stellaris - Light Locators Generator");
+  useCustomDocumentTitle("Light Locators Generator");
 
   const onGenerateClick = async () => {
     const result = makeLocators(Number(locators || 0), Number(stateTime || 0));

src/components/TraitsBuilderTab/index.tsx

@@ -9,7 +9,6 @@ import {
 import ColorPickerElement from "../shared/ColorPickerElement";
 import { Dropzone, IMAGE_MIME_TYPE } from "@mantine/dropzone";
 import ImagePreview from "../shared/ImagePreview";
-import { useDocumentTitle } from "@mantine/hooks";
 import DownloadButton from "../shared/DownloadButton";
 import { Stage as StageType } from "konva/lib/Stage";
 import TraitIconControls from "./TraitIconControls";
@@ -20,6 +19,7 @@ import {
   traitsBuilderReducer,
 } from "./traits-builder.utils";
 import { State } from "./index.d";
+import { useCustomDocumentTitle } from "../../hooks";
 
 const TRAIT_WIDTH = 29;
 
@@ -37,7 +37,7 @@ const INITIAL_STATE: State = {
 };
 
 export default function TraitsBuilderTab() {
-  useDocumentTitle("RMG Utils for Stellaris - Traits Builder");
+  useCustomDocumentTitle("Traits Builder");
   const [state, dispatch] = useReducer(traitsBuilderReducer, INITIAL_STATE);
   const mainStageRef = useRef<StageType>(null);
 

src/constants.ts

@@ -25,3 +25,5 @@ export enum NetlifyFunctions {
   SAVE_LOCATORS_INTERACTIONS = "save_locators_interaction",
   SAVE_TRAITS_INTERACTIONS = "save_traits_interaction",
 }
+
+export const APP_TITLE = "RMG Utils for Stellaris";

src/hooks/index.ts

@@ -0,0 +1,2 @@
+export { useIsInstalled } from "./useIsInstalled";
+export { useCustomDocumentTitle } from "./useCustomDocumentTitle";

src/hooks/useCustomDocumentTitle.ts

@@ -0,0 +1,15 @@
+import { useDocumentTitle } from "@mantine/hooks";
+
+import { APP_TITLE } from "../constants";
+import { useIsInstalled } from "./useIsInstalled";
+
+/**
+ * A custom hook that sets the document title with a given title string.
+ * If the app is not installed, the app title is prepended to the given title.
+ * @param title - The title string to set as the document title.
+ */
+export const useCustomDocumentTitle = (title: string) => {
+  const isInstalled = useIsInstalled();
+  const prefix = isInstalled ? "" : `${APP_TITLE} - `;
+  useDocumentTitle(`${prefix}${title}`);
+};

src/hooks/useIsInstalled.ts

@@ -0,0 +1,10 @@
+/**
+ * Returns a boolean indicating whether the web app is installed on the user's device.
+ *
+ * @returns {boolean} A boolean indicating whether the web app is installed on the user's device.
+ */
+export const useIsInstalled = () => {
+  const isInstalled = window.matchMedia("(display-mode: standalone)").matches;
+
+  return isInstalled;
+};

src/static_pages/OtherTools.tsx

@@ -1,6 +1,8 @@
 import { Anchor, Container, List, Text, Title } from "@mantine/core";
+import { useCustomDocumentTitle } from "../hooks";
 
 export default function OtherTools() {
+  useCustomDocumentTitle("Other Tools");
   return (
     <Container>
       <Title order={3} my="sm">

src/static_pages/Privacy.tsx

@@ -8,6 +8,7 @@ import {
   Title,
 } from "@mantine/core";
 import { dateFormatter, isDNTEnabled } from "../utils/general";
+import { useCustomDocumentTitle } from "../hooks";
 
 const PRIVACY_POLICY_LAST_UPDATE = new Date("2022-09-03");
 const CONTACT_EMAIL = "[email protected]";
@@ -16,6 +17,7 @@ const DNTstatus = isDNTEnabled() ? "ENABLED" : "DISABLED";
 const DNTstatusColor = isDNTEnabled() ? "green" : "red";
 
 export default function Privacy() {
+  useCustomDocumentTitle("Privacy Policy");
   return (
     <Container>
       <Title