add localhost to tab title

src/components/Navigation/index.tsx

@@ -19,6 +19,7 @@ import Loading from "components/Loading";
 
 import { name } from "@root/package.json";
 import { useAppContext } from "contexts/AppContext";
+import useDocumentTitle from "hooks/useDocumentTitle";
 
 export const APP_BAR_HEIGHT = 56;
 
@@ -38,12 +39,11 @@ export default function Navigation({
   titleTransitionProps,
 }: INavigationProps) {
   const { projectId } = useAppContext();
+  useDocumentTitle(projectId, title);
 
   const [open, setOpen] = useState(false);
   const trigger = useScrollTrigger({ disableHysteresis: true, threshold: 0 });
 
-  document.title = `${title} • ${projectId} • ${name}`;
-
   return (
     <>
       <AppBar

src/contexts/AppContext.tsx

@@ -10,10 +10,10 @@ import ErrorBoundary from "components/ErrorBoundary";
 
 import { projectId, auth, db } from "@src/firebase";
 import useDoc from "hooks/useDoc";
-import { name } from "@root/package.json";
 import { PUBLIC_SETTINGS, USERS } from "config/dbPaths";
 import { analytics } from "analytics";
 import themes from "theme";
+import useDocumentTitle from "hooks/useDocumentTitle";
 
 const useThemeState = createPersistedState("__ROWY__THEME");
 const useThemeOverriddenState = createPersistedState(
@@ -88,9 +88,7 @@ export const AppProvider: React.FC = ({ children }) => {
     });
   }, []);
 
-  useEffect(() => {
-    document.title = `${projectId} • ${name}`;
-  }, []);
+  useDocumentTitle(projectId);
 
   const [publicSettings] = useDoc(
     { path: PUBLIC_SETTINGS },

src/hooks/useDocumentTitle.ts

@@ -0,0 +1,24 @@
+import { useEffect } from "react";
+import { name } from "@root/package.json";
+
+export default function useDocumentTitle(projectId: string, title?: string) {
+  useEffect(() => {
+    console.log("set document title", projectId);
+    document.title = [
+      title,
+      projectId,
+      name + (window.location.hostname === "localhost" ? " (localhost)" : ""),
+    ]
+      .filter((x) => x)
+      .join(" • ");
+
+    return () => {
+      document.title = [
+        projectId,
+        name + (window.location.hostname === "localhost" ? " (localhost)" : ""),
+      ]
+        .filter((x) => x)
+        .join(" • ");
+    };
+  }, [title, projectId]);
+}