Tag the main html title with the app env

apps/webapp/app/root.tsx

@@ -1,4 +1,4 @@
-import type { LinksFunction, LoaderArgs, MetaFunction } from "@remix-run/node";
+import type { LinksFunction, LoaderArgs } from "@remix-run/node";
 import type { ShouldRevalidateFunction } from "@remix-run/react";
 import {
   Links,
@@ -10,7 +10,11 @@ import {
   isRouteErrorResponse,
   useRouteError,
 } from "@remix-run/react";
-import { typedjson, useTypedLoaderData } from "remix-typedjson";
+import {
+  TypedMetaFunction,
+  typedjson,
+  useTypedLoaderData,
+} from "remix-typedjson";
 import type { ToastMessage } from "~/models/message.server";
 import { commitSession, getSession } from "~/models/message.server";
 import tailwindStylesheetUrl from "~/tailwind.css";
@@ -22,18 +26,19 @@ import { LinkButton } from "./components/primitives/Buttons";
 import { Header1, Header3 } from "./components/primitives/Headers";
 import { Toast } from "./components/primitives/Toast";
 import { env } from "./env.server";
+import { featuresForRequest } from "./features.server";
 import { usePostHog } from "./hooks/usePostHog";
 import { getUser } from "./services/session.server";
+import { appEnvTitleTag } from "./utils";
 import { friendlyErrorDisplay } from "./utils/httpErrors";
-import { featuresForRequest } from "./features.server";
 
 export const links: LinksFunction = () => {
   return [{ rel: "stylesheet", href: tailwindStylesheetUrl }];
 };
 
-export const meta: MetaFunction = () => ({
+export const meta: TypedMetaFunction<typeof loader> = ({ data }) => ({
+  title: `Trigger.dev${appEnvTitleTag(data.appEnv)}`,
   charset: "utf-8",
-  title: "Trigger",
   viewport: "width=device-width,initial-scale=1",
 });
 
@@ -49,11 +54,14 @@ export const loader = async ({ request }: LoaderArgs) => {
       toastMessage,
       posthogProjectKey,
       features,
+      appEnv: env.APP_ENV,
     },
     { headers: { "Set-Cookie": await commitSession(session) } }
   );
 };
 
+export type LoaderType = typeof loader;
+
 export const shouldRevalidate: ShouldRevalidateFunction = (options) => {
   if (options.formAction === "/resources/environment") {
     return false;

apps/webapp/app/routes/login._index/route.tsx

@@ -1,6 +1,11 @@
-import type { LoaderArgs, MetaFunction } from "@remix-run/node";
+import type { LoaderArgs } from "@remix-run/node";
 import { Form } from "@remix-run/react";
-import { redirect, typedjson, useTypedLoaderData } from "remix-typedjson";
+import {
+  TypedMetaFunction,
+  redirect,
+  typedjson,
+  useTypedLoaderData,
+} from "remix-typedjson";
 import { LogoIcon } from "~/components/LogoIcon";
 import {
   AppContainer,
@@ -11,10 +16,17 @@ import { Fieldset } from "~/components/primitives/Fieldset";
 import { FormTitle } from "~/components/primitives/FormTitle";
 import { NamedIcon } from "~/components/primitives/NamedIcon";
 import { Paragraph, TextLink } from "~/components/primitives/Paragraph";
+import type { LoaderType as RootLoader } from "~/root";
 import { isGithubAuthSupported } from "~/services/auth.server";
 import { commitSession, setRedirectTo } from "~/services/redirectTo.server";
 import { getUserId } from "~/services/session.server";
-import { requestUrl } from "~/utils";
+import { appEnvTitleTag, requestUrl } from "~/utils";
+
+export const meta: TypedMetaFunction<typeof loader, { root: RootLoader }> = ({
+  parentsData,
+}) => ({
+  title: `Login to Trigger.dev${appEnvTitleTag(parentsData.root.appEnv)}`,
+});
 
 export async function loader({ request }: LoaderArgs) {
   const userId = await getUserId(request);
@@ -42,12 +54,6 @@ export async function loader({ request }: LoaderArgs) {
   }
 }
 
-export const meta: MetaFunction = () => {
-  return {
-    title: "Login",
-  };
-};
-
 export default function LoginPage() {
   const data = useTypedLoaderData<typeof loader>();
 

apps/webapp/app/routes/login.magic/route.tsx

@@ -1,8 +1,11 @@
-import { ArrowLeftIcon } from "@heroicons/react/24/solid";
-import type { ActionArgs, LoaderArgs, MetaFunction } from "@remix-run/node";
+import type { ActionArgs, LoaderArgs } from "@remix-run/node";
 import { redirect } from "@remix-run/node";
 import { Form, useTransition } from "@remix-run/react";
-import { typedjson, useTypedLoaderData } from "remix-typedjson";
+import {
+  TypedMetaFunction,
+  typedjson,
+  useTypedLoaderData,
+} from "remix-typedjson";
 import { z } from "zod";
 import { LogoIcon } from "~/components/LogoIcon";
 import {
@@ -11,6 +14,7 @@ import {
 } from "~/components/layout/AppLayout";
 import { Button, LinkButton } from "~/components/primitives/Buttons";
 import { Fieldset } from "~/components/primitives/Fieldset";
+import { FormButtons } from "~/components/primitives/FormButtons";
 import { FormTitle } from "~/components/primitives/FormTitle";
 import { Input } from "~/components/primitives/Input";
 import { InputGroup } from "~/components/primitives/InputGroup";
@@ -23,7 +27,15 @@ import {
   getUserSession,
 } from "~/services/sessionStorage.server";
 import magicLinkIcon from "./login.magic.svg";
-import { FormButtons } from "~/components/primitives/FormButtons";
+
+import type { LoaderType as RootLoader } from "~/root";
+import { appEnvTitleTag } from "~/utils";
+
+export const meta: TypedMetaFunction<typeof loader, { root: RootLoader }> = ({
+  parentsData,
+}) => ({
+  title: `Login to Trigger.dev${appEnvTitleTag(parentsData.root.appEnv)}`,
+});
 
 export async function loader({ request }: LoaderArgs) {
   await authenticator.isAuthenticated(request, {
@@ -65,12 +77,6 @@ export async function action({ request }: ActionArgs) {
   }
 }
 
-export const meta: MetaFunction = () => {
-  return {
-    title: "Login magic",
-  };
-};
-
 export default function LoginMagicLinkPage() {
   const { magicLinkSent } = useTypedLoaderData<typeof loader>();
   const transition = useTransition();

apps/webapp/app/utils.ts

@@ -224,3 +224,18 @@ export function requestUrl(request: Request): URL {
 
   return url;
 }
+
+export function appEnvTitleTag(
+  appEnv: "test" | "production" | "development" | "staging"
+): string {
+  switch (appEnv) {
+    case "test":
+      return " (test)";
+    case "production":
+      return "";
+    case "development":
+      return " (dev)";
+    case "staging":
+      return " (staging)";
+  }
+}