feat(webapp): tab titles for organization, account and onboarding pages

kathiekiwi · kathiekiwi · commit 442f5a3fb96c · 2026-08-05T23:57:13.000Z
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.invite/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.invite/route.tsx
@@ -38,6 +38,9 @@ import { dashboardAction, dashboardLoader } from "~/services/routeBuilders/dashb
 import { acceptInvitePath, organizationTeamPath, v3BillingPath } from "~/utils/pathBuilder";
 import { isAtOrBelow } from "~/utils/inviteRoleLadder";
 import { PurchaseSeatsModal } from "../_app.orgs.$organizationSlug.settings.team/route";
+import { pageMeta } from "~/utils/pageTitle";
+
+export const meta = pageMeta("Invite team members");
 
 const Params = z.object({
   organizationSlug: z.string(),
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.settings._index/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.settings._index/route.tsx
@@ -7,7 +7,7 @@ import {
   FolderIcon,
   TrashIcon,
 } from "@heroicons/react/20/solid";
-import { Form, type MetaFunction, useActionData, useNavigation, useSubmit } from "@remix-run/react";
+import { Form, useActionData, useNavigation, useSubmit } from "@remix-run/react";
 import { json, type LoaderFunctionArgs } from "@remix-run/server-runtime";
 import { useEffect, useRef, useState } from "react";
 import { redirect, typedjson, useTypedLoaderData } from "remix-typedjson";
@@ -54,14 +54,9 @@ import { dashboardAction } from "~/services/routeBuilders/dashboardBuilder";
 import { cn } from "~/utils/cn";
 import { extractDomain, faviconUrl as buildFaviconUrl } from "~/utils/favicon";
 import { OrganizationParamsSchema, organizationSettingsPath, rootPath } from "~/utils/pathBuilder";
+import { pageMeta } from "~/utils/pageTitle";
 
-export const meta: MetaFunction = () => {
-  return [
-    {
-      title: `Organization settings | Trigger.dev`,
-    },
-  ];
-};
+export const meta = pageMeta("Organization settings");
 
 export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   const userId = await requireUserId(request);
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.billing-limits/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.billing-limits/route.tsx
@@ -1,5 +1,4 @@
 import { parseWithZod } from "@conform-to/zod";
-import type { MetaFunction } from "@remix-run/react";
 import { json, redirect } from "@remix-run/server-runtime";
 import { tryCatch } from "@trigger.dev/core";
 import { typedjson, useTypedLoaderData } from "remix-typedjson";
@@ -74,15 +73,14 @@ import {
   v3BillingLimitsPath,
   v3BillingPath,
 } from "~/utils/pathBuilder";
+import { pageMeta } from "~/utils/pageTitle";
 
 const billingLimitsAuthorization = {
   action: "manage" as const,
   resource: { type: "billing-limits" as const },
 };
 
-export const meta: MetaFunction = () => {
-  return [{ title: `Billing limits | Trigger.dev` }];
-};
+export const meta = pageMeta("Billing limits");
 
 export const loader = dashboardLoader(
   {
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.billing/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.billing/route.tsx
@@ -1,5 +1,4 @@
 import { CalendarDaysIcon, CreditCardIcon, StarIcon } from "@heroicons/react/20/solid";
-import { type MetaFunction } from "@remix-run/react";
 import { type PlanDefinition } from "@trigger.dev/platform";
 import { redirect, typedjson, useTypedLoaderData } from "remix-typedjson";
 import { Feedback } from "~/components/Feedback";
@@ -21,14 +20,9 @@ import {
   v3StripePortalPath,
 } from "~/utils/pathBuilder";
 import { PricingPlans } from "../resources.orgs.$organizationSlug.select-plan";
+import { pageMeta } from "~/utils/pageTitle";
 
-export const meta: MetaFunction = () => {
-  return [
-    {
-      title: `Billing | Trigger.dev`,
-    },
-  ];
-};
+export const meta = pageMeta("Billing");
 
 export const loader = dashboardLoader(
   {
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.integrations.slack.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.integrations.slack.tsx
@@ -40,6 +40,9 @@ import { $transaction, prisma } from "~/db.server";
 import { requireOrganization } from "~/services/org.server";
 import { OrganizationParamsSchema, organizationSlackIntegrationPath } from "~/utils/pathBuilder";
 import { logger } from "~/services/logger.server";
+import { pageMeta } from "~/utils/pageTitle";
+
+export const meta = pageMeta("Slack integration");
 
 export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   const { organizationSlug } = OrganizationParamsSchema.parse(params);
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.integrations.vercel.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.integrations.vercel.tsx
@@ -35,6 +35,9 @@ import { requireOrganization } from "~/services/org.server";
 import { rbac } from "~/services/rbac.server";
 import { dashboardAction } from "~/services/routeBuilders/dashboardBuilder";
 import { OrganizationParamsSchema, v3ProjectSettingsIntegrationsPath } from "~/utils/pathBuilder";
+import { pageMeta } from "~/utils/pageTitle";
+
+export const meta = pageMeta("Vercel integration");
 
 function formatDate(date: Date): string {
   return new Intl.DateTimeFormat("en-US", {
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.private-connections._index/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.private-connections._index/route.tsx
@@ -4,7 +4,7 @@ import {
   PlusIcon,
   TrashIcon,
 } from "@heroicons/react/20/solid";
-import { Form, useRevalidator, type MetaFunction } from "@remix-run/react";
+import { Form, useRevalidator } from "@remix-run/react";
 import { json, type ActionFunctionArgs, type LoaderFunctionArgs } from "@remix-run/server-runtime";
 import { tryCatch } from "@trigger.dev/core/utils";
 import type { PrivateLinkConnectionStatus } from "@trigger.dev/platform";
@@ -33,10 +33,9 @@ import {
 } from "~/utils/pathBuilder";
 import { canAccessPrivateConnections } from "~/v3/canAccessPrivateConnections.server";
 import { useCurrentPlan } from "../_app.orgs.$organizationSlug/route";
+import { pageMeta } from "~/utils/pageTitle";
 
-export const meta: MetaFunction = () => {
-  return [{ title: `Private Connections | Trigger.dev` }];
-};
+export const meta = pageMeta("Private Connections");
 
 export async function loader({ params, request }: LoaderFunctionArgs) {
   const userId = await requireUserId(request);
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.private-connections.new/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.private-connections.new/route.tsx
@@ -1,6 +1,6 @@
 import { getFormProps, getInputProps, getSelectProps, useForm } from "@conform-to/react";
 import { parseWithZod } from "@conform-to/zod";
-import { Form, useActionData, useParams, type MetaFunction } from "@remix-run/react";
+import { Form, useActionData, useParams } from "@remix-run/react";
 import { json, type ActionFunction, type LoaderFunctionArgs } from "@remix-run/server-runtime";
 import { tryCatch } from "@trigger.dev/core/utils";
 import { useState } from "react";
@@ -45,10 +45,9 @@ import {
   SparklesIcon,
   TrashIcon,
 } from "@heroicons/react/20/solid";
+import { pageMeta } from "~/utils/pageTitle";
 
-export const meta: MetaFunction = () => {
-  return [{ title: `Add Private Connection | Trigger.dev` }];
-};
+export const meta = pageMeta("Add Private Connection");
 
 export async function loader({ params, request }: LoaderFunctionArgs) {
   const userId = await requireUserId(request);
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.roles/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.roles/route.tsx
@@ -1,5 +1,4 @@
 import { CheckIcon, XMarkIcon } from "@heroicons/react/20/solid";
-import { type MetaFunction } from "@remix-run/react";
 import { useState } from "react";
 import { type UseDataFunctionReturn, typedjson, useTypedLoaderData } from "remix-typedjson";
 import { z } from "zod";
@@ -27,14 +26,9 @@ import { useShowSelfServe } from "~/hooks/useShowSelfServe";
 import { resolveOrgIdFromSlug } from "~/models/organization.server";
 import { rbac } from "~/services/rbac.server";
 import { dashboardLoader } from "~/services/routeBuilders/dashboardBuilder";
+import { pageMeta } from "~/utils/pageTitle";
 
-export const meta: MetaFunction = () => {
-  return [
-    {
-      title: `Roles | Trigger.dev`,
-    },
-  ];
-};
+export const meta = pageMeta("Roles");
 
 const Params = z.object({
   organizationSlug: z.string(),
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.sso/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.sso/route.tsx
@@ -4,7 +4,6 @@ import {
   ClockIcon,
   ExclamationCircleIcon,
 } from "@heroicons/react/20/solid";
-import { type MetaFunction } from "@remix-run/react";
 import { redirect } from "@remix-run/server-runtime";
 import { useEffect, useState } from "react";
 import { useFetcher, useRevalidator } from "@remix-run/react";
@@ -48,8 +47,9 @@ import { FEATURE_FLAG } from "~/v3/featureFlags";
 import { dashboardAction, dashboardLoader } from "~/services/routeBuilders/dashboardBuilder";
 import { cn } from "~/utils/cn";
 import { throwPermissionDenied } from "~/utils/permissionDenied";
+import { pageMeta } from "~/utils/pageTitle";
 
-export const meta: MetaFunction = () => [{ title: "SSO & Directory Sync | Trigger.dev" }];
+export const meta = pageMeta("SSO & Directory Sync");
 
 const Params = z.object({ organizationSlug: z.string() });
 
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.team/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.team/route.tsx
@@ -2,13 +2,7 @@ import { getFormProps, getInputProps, useForm } from "@conform-to/react";
 import { parseWithZod } from "@conform-to/zod";
 import { EnvelopeIcon, NoSymbolIcon, UserPlusIcon } from "@heroicons/react/20/solid";
 import { DialogClose } from "@radix-ui/react-dialog";
-import {
-  Form,
-  type MetaFunction,
-  useActionData,
-  useFetcher,
-  useNavigation,
-} from "@remix-run/react";
+import { Form, useActionData, useFetcher, useNavigation } from "@remix-run/react";
 import { json } from "@remix-run/server-runtime";
 import { tryCatch } from "@trigger.dev/core/utils";
 import { cloneElement, useEffect, useRef, useState } from "react";
@@ -61,14 +55,9 @@ import {
 } from "~/utils/pathBuilder";
 import { SetSeatsAddOnService } from "~/v3/services/setSeatsAddOn.server";
 import { useCurrentPlan } from "../_app.orgs.$organizationSlug/route";
+import { pageMeta } from "~/utils/pageTitle";
 
-export const meta: MetaFunction = () => {
-  return [
-    {
-      title: `Team | Trigger.dev`,
-    },
-  ];
-};
+export const meta = pageMeta("Team");
 
 const Params = z.object({
   organizationSlug: z.string(),
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.usage/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.usage/route.tsx
@@ -1,5 +1,5 @@
 import { InformationCircleIcon } from "@heroicons/react/20/solid";
-import { Await, type MetaFunction } from "@remix-run/react";
+import { Await } from "@remix-run/react";
 import { type LoaderFunctionArgs } from "@remix-run/server-runtime";
 import { formatDurationMilliseconds } from "@trigger.dev/core/v3";
 import { Suspense, useMemo } from "react";
@@ -36,14 +36,9 @@ import { formatCurrency, formatCurrencyAccurate, formatNumber } from "~/utils/nu
 import { useBillingLimit } from "~/hooks/useOrganizations";
 import { OrganizationParamsSchema, organizationPath } from "~/utils/pathBuilder";
 import { useCurrentPlan } from "../_app.orgs.$organizationSlug/route";
+import { pageMeta } from "~/utils/pageTitle";
 
-export const meta: MetaFunction = () => {
-  return [
-    {
-      title: `Usage | Trigger.dev`,
-    },
-  ];
-};
+export const meta = pageMeta("Usage");
 
 export async function loader({ params, request }: LoaderFunctionArgs) {
   const userId = await requireUserId(request);
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug_.projects.new/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug_.projects.new/route.tsx
@@ -36,6 +36,9 @@ import {
   v3ProjectPath,
 } from "~/utils/pathBuilder";
 import { generateVercelOAuthState } from "~/v3/vercel/vercelOAuthState.server";
+import { pageMeta } from "~/utils/pageTitle";
+
+export const meta = pageMeta("New project");
 
 const WORKING_ON_OTHER = "Other/not sure yet";
 const GOALS_OTHER = "Other/not sure yet";
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug_.select-plan/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug_.select-plan/route.tsx
@@ -9,6 +9,9 @@ import { getCurrentPlan, getPlans } from "~/services/platform.v3.server";
 import { dashboardLoader } from "~/services/routeBuilders/dashboardBuilder";
 import { OrganizationParamsSchema, organizationPath } from "~/utils/pathBuilder";
 import { PricingPlans } from "../resources.orgs.$organizationSlug.select-plan";
+import { pageMeta } from "~/utils/pageTitle";
+
+export const meta = pageMeta("Choose a plan");
 
 export const loader = dashboardLoader(
   {
diff --git a/apps/webapp/app/routes/_app.orgs.new/route.tsx b/apps/webapp/app/routes/_app.orgs.new/route.tsx
@@ -27,6 +27,9 @@ import { NewOrganizationPresenter } from "~/presenters/NewOrganizationPresenter.
 import { requireUser, requireUserId } from "~/services/session.server";
 import { extractDomain, faviconUrl } from "~/utils/favicon";
 import { organizationPath, rootPath } from "~/utils/pathBuilder";
+import { pageMeta } from "~/utils/pageTitle";
+
+export const meta = pageMeta("New organization");
 
 const schema = z.object({
   orgName: z.string().min(3).max(50),
diff --git a/apps/webapp/app/routes/_app.timezones/route.tsx b/apps/webapp/app/routes/_app.timezones/route.tsx
@@ -5,6 +5,9 @@ import { LogoIcon } from "~/components/LogoIcon";
 import { Header1 } from "~/components/primitives/Headers";
 import { Paragraph } from "~/components/primitives/Paragraph";
 import { getTimezones } from "~/utils/timezones.server";
+import { pageMeta } from "~/utils/pageTitle";
+
+export const meta = pageMeta("Supported timezones");
 
 export const loader = async ({ request }: LoaderFunctionArgs) => {
   return typedjson({
diff --git a/apps/webapp/app/routes/account._index/route.tsx b/apps/webapp/app/routes/account._index/route.tsx
@@ -2,13 +2,7 @@ import { getFormProps, getInputProps, useForm } from "@conform-to/react";
 import { useEffect, useState } from "react";
 import { conformZodMessage, parseWithZod } from "@conform-to/zod";
 import { ComputerDesktopIcon, MoonIcon, SunIcon, SwatchIcon } from "@heroicons/react/20/solid";
-import {
-  Form,
-  type MetaFunction,
-  useActionData,
-  useFetcher,
-  useLoaderData,
-} from "@remix-run/react";
+import { Form, useActionData, useFetcher, useLoaderData } from "@remix-run/react";
 import { type ActionFunction, json, type LoaderFunctionArgs } from "@remix-run/server-runtime";
 import { z } from "zod";
 import { UserProfilePhoto } from "~/components/UserProfilePhoto";
@@ -44,6 +38,7 @@ import { cachedFlag } from "~/v3/featureFlags.server";
 import { requireUser, requireUserId } from "~/services/session.server";
 import { emailSchema, MAX_EMAIL_LENGTH } from "~/utils/emailValidation";
 import { accountPath } from "~/utils/pathBuilder";
+import { pageMeta } from "~/utils/pageTitle";
 
 const THEME_LABELS: Record<ThemePreference, string> = {
   classic: "Classic",
@@ -75,13 +70,7 @@ function themeIcon(value: ThemePreference) {
   }
 }
 
-export const meta: MetaFunction = () => {
-  return [
-    {
-      title: `Your profile | Trigger.dev`,
-    },
-  ];
-};
+export const meta = pageMeta("Your profile");
 
 function createSchema(
   constraints: {
diff --git a/apps/webapp/app/routes/account.authorization-code.$authorizationCode/route.tsx b/apps/webapp/app/routes/account.authorization-code.$authorizationCode/route.tsx
@@ -15,6 +15,9 @@ import {
   isAuthorizationCodeMintable,
 } from "~/services/personalAccessToken.server";
 import { requireUserId } from "~/services/session.server";
+import { pageMeta } from "~/utils/pageTitle";
+
+export const meta = pageMeta("Authorize login");
 
 const ParamsSchema = z.object({
   authorizationCode: z.string(),
diff --git a/apps/webapp/app/routes/account.security/route.tsx b/apps/webapp/app/routes/account.security/route.tsx
@@ -1,4 +1,3 @@
-import { type MetaFunction } from "@remix-run/react";
 import type { LoaderFunctionArgs } from "@remix-run/server-runtime";
 import { typedjson, useTypedLoaderData } from "remix-typedjson";
 import {
@@ -16,14 +15,9 @@ import {
 } from "~/services/sessionDuration.server";
 import { MfaSetup } from "../resources.account.mfa.setup/route";
 import { SessionDurationSetting } from "../resources.account.session-duration/SessionDurationSetting";
+import { pageMeta } from "~/utils/pageTitle";
 
-export const meta: MetaFunction = () => {
-  return [
-    {
-      title: `Security | Trigger.dev`,
-    },
-  ];
-};
+export const meta = pageMeta("Security");
 
 export async function loader({ request }: LoaderFunctionArgs) {
   const user = await requireUser(request);
diff --git a/apps/webapp/app/routes/account.tokens/route.tsx b/apps/webapp/app/routes/account.tokens/route.tsx
@@ -3,7 +3,7 @@ import { parseWithZod } from "@conform-to/zod";
 import { BookOpenIcon, ShieldCheckIcon, TrashIcon } from "@heroicons/react/20/solid";
 import { ShieldExclamationIcon } from "@heroicons/react/24/solid";
 import { DialogClose } from "@radix-ui/react-dialog";
-import { Form, type MetaFunction, useActionData, useFetcher } from "@remix-run/react";
+import { Form, useActionData, useFetcher } from "@remix-run/react";
 import { type ActionFunction, type LoaderFunctionArgs, json } from "@remix-run/server-runtime";
 import { useState } from "react";
 import { typedjson, useTypedLoaderData } from "remix-typedjson";
@@ -47,14 +47,9 @@ import {
 } from "~/services/personalAccessToken.server";
 import { requireUserId } from "~/services/session.server";
 import { docsPath, personalAccessTokensPath } from "~/utils/pathBuilder";
+import { pageMeta } from "~/utils/pageTitle";
 
-export const meta: MetaFunction = () => {
-  return [
-    {
-      title: `Personal Access Tokens | Trigger.dev`,
-    },
-  ];
-};
+export const meta = pageMeta("Personal Access Tokens");
 
 // Shared between the create-token panel hint and the listing column
 // header tooltip so the cap is explained identically in both places.
diff --git a/apps/webapp/app/routes/confirm-basic-details.tsx b/apps/webapp/app/routes/confirm-basic-details.tsx
@@ -30,6 +30,9 @@ import { requireUserId } from "~/services/session.server";
 import { emailSchema, MAX_EMAIL_LENGTH } from "~/utils/emailValidation";
 import { rootPath } from "~/utils/pathBuilder";
 import { getVercelInstallParams } from "~/v3/vercel";
+import { pageMeta } from "~/utils/pageTitle";
+
+export const meta = pageMeta("Confirm your details");
 
 const referralSourceOptions = [
   "Search engine",
diff --git a/apps/webapp/app/routes/invites.tsx b/apps/webapp/app/routes/invites.tsx
@@ -25,6 +25,9 @@ import {
 import { redirectWithErrorMessage, redirectWithSuccessMessage } from "~/models/message.server";
 import { requireUser } from "~/services/session.server";
 import { invitesPath, rootPath } from "~/utils/pathBuilder";
+import { pageMeta } from "~/utils/pageTitle";
+
+export const meta = pageMeta("Your invitations");
 
 export const loader = async ({ request }: LoaderFunctionArgs) => {
   const user = await requireUser(request);
diff --git a/apps/webapp/app/routes/unsubscribe.$userId.$token.tsx b/apps/webapp/app/routes/unsubscribe.$userId.$token.tsx
diff --git a/apps/webapp/app/routes/vercel.onboarding.tsx b/apps/webapp/app/routes/vercel.onboarding.tsx
