show emulator status in tab title

src/hooks/useDocumentTitle.ts

@@ -1,5 +1,13 @@
 import { useEffect } from "react";
 
+const DOCUMENT_TITLE_BASE =
+  "Rowy" +
+  (process.env.NODE_ENV === "production"
+    ? ""
+    : ` (${
+        process.env.REACT_APP_FIREBASE_EMULATOR ? "Emulator • " : ""
+      }${process.env.NODE_ENV.replace("development", "dev")})`);
+
 /**
  * Sets the document/tab title and resets when the page is changed
  * @param projectId - Project ID displayed in the title
@@ -7,23 +15,12 @@ import { useEffect } from "react";
  */
 export function useDocumentTitle(projectId: string, title?: string) {
   useEffect(() => {
-    document.title = [
-      title,
-      projectId,
-      "Rowy",
-      window.location.hostname === "localhost" ? "localhost" : "",
-    ]
-      .filter((x) => x)
+    document.title = [title, projectId, DOCUMENT_TITLE_BASE]
+      .filter(Boolean)
       .join(" • ");
 
     return () => {
-      document.title = [
-        projectId,
-        "Rowy",
-        window.location.hostname === "localhost" ? "localhost" : "",
-      ]
-        .filter((x) => x)
-        .join(" • ");
+      document.title = [projectId, DOCUMENT_TITLE_BASE].join(" • ");
     };
   }, [title, projectId]);
 }