feat: add meta titles to all page routes for accessibility

.eslintrc

@@ -133,8 +133,8 @@
     // Custom local rules
     "local-rules/require-react-import-when-using-namespace": "error",
     "local-rules/require-satisfies-on-nested-prisma-selects": "error",
-    "local-rules/require-deleted-at-check-on-custom-field-queries": "error"
-    // "local-rules/require-meta-export-in-routes": "warn"
+    "local-rules/require-deleted-at-check-on-custom-field-queries": "error",
+    "local-rules/require-meta-export-in-routes": "warn"
   },
   "overrides": [
     {

app/routes/_auth+/_auth.tsx

@@ -2,9 +2,12 @@ import { Link, useMatches, Outlet } from "react-router";
 import { ErrorContent } from "~/components/errors";
 import { ShelfSymbolLogo } from "~/components/marketing/logos";
 import SubHeading from "~/components/shared/sub-heading";
+import { appendToMetaTitle } from "~/utils/append-to-meta-title";
 
 export const loader = () => null;
 
+export const meta = () => [{ title: appendToMetaTitle("Authentication") }];
+
 export default function App() {
   const matches = useMatches();
   /** Find the title and subHeading from current route */

app/routes/_auth+/accept-invite.$inviteId.tsx

@@ -19,6 +19,7 @@ import {
   updateInviteStatus,
 } from "~/modules/invite/service.server";
 import { setSelectedOrganizationIdCookie } from "~/modules/organization/context.server";
+import { appendToMetaTitle } from "~/utils/append-to-meta-title";
 import { setCookie } from "~/utils/cookies.server";
 import { INVITE_TOKEN_SECRET, SUPPORT_EMAIL } from "~/utils/env";
 import { ShelfError, makeShelfError } from "~/utils/error";
@@ -91,6 +92,8 @@ export async function loader({ context, params }: LoaderFunctionArgs) {
   }
 }
 
+export const meta = () => [{ title: appendToMetaTitle("Accept team invite") }];
+
 export async function action({ context, request }: LoaderFunctionArgs) {
   try {
     const { token } = parseData(

app/routes/_auth+/oauth.callback.tsx

@@ -1,6 +1,10 @@
 import { useEffect, useMemo } from "react";
 
-import type { ActionFunctionArgs, LoaderFunctionArgs } from "react-router";
+import type {
+  ActionFunctionArgs,
+  LoaderFunctionArgs,
+  MetaFunction,
+} from "react-router";
 import { data, redirect, useFetcher } from "react-router";
 import { z } from "zod";
 import { Button } from "~/components/shared/button";
@@ -10,6 +14,7 @@ import { useSearchParams } from "~/hooks/search-params";
 import { supabaseClient } from "~/integrations/supabase/client";
 import { refreshAccessToken } from "~/modules/auth/service.server";
 import { setSelectedOrganizationIdCookie } from "~/modules/organization/context.server";
+import { appendToMetaTitle } from "~/utils/append-to-meta-title";
 import { createSSOFormData } from "~/utils/auth";
 import { setCookie } from "~/utils/cookies.server";
 import { makeShelfError, notAllowedMethod, ShelfError } from "~/utils/error";
@@ -154,6 +159,11 @@ export function loader({ context }: LoaderFunctionArgs) {
 
   return data(payload({ title, subHeading }));
 }
+
+export const meta: MetaFunction<typeof loader> = ({ data }) => [
+  { title: data ? appendToMetaTitle(data.title) : "" },
+];
+
 export default function LoginCallback() {
   const fetcher = useFetcher<typeof action>();
   const { data } = fetcher;

app/routes/_index.tsx

@@ -1,5 +1,8 @@
 import type { LoaderFunctionArgs } from "react-router";
 import { redirect } from "react-router";
+import { appendToMetaTitle } from "~/utils/append-to-meta-title";
+
+export const meta = () => [{ title: appendToMetaTitle("Home") }];
 
 export const loader = ({ context }: LoaderFunctionArgs) => {
   if (context.isAuthenticated) {

app/routes/_layout+/account-details.workspace.new.tsx

@@ -5,7 +5,11 @@ import {
 } from "@remix-run/form-data-parser";
 import { invariant } from "framer-motion";
 import { useAtomValue } from "jotai";
-import type { ActionFunctionArgs, LoaderFunctionArgs } from "react-router";
+import type {
+  ActionFunctionArgs,
+  LoaderFunctionArgs,
+  MetaFunction,
+} from "react-router";
 import { data, redirect } from "react-router";
 import { dynamicTitleAtom } from "~/atoms/dynamic-title-atom";
 import Header from "~/components/layout/header";
@@ -21,6 +25,7 @@ import {
   setSelectedOrganizationIdCookie,
 } from "~/modules/organization/context.server";
 import { createOrganization } from "~/modules/organization/service.server";
+import { appendToMetaTitle } from "~/utils/append-to-meta-title";
 import { DEFAULT_MAX_IMAGE_UPLOAD_SIZE } from "~/utils/constants";
 import { setCookie } from "~/utils/cookies.server";
 import { sendNotification } from "~/utils/emitter/send-notification.server";
@@ -55,6 +60,10 @@ export async function loader({ context, request }: LoaderFunctionArgs) {
   }
 }
 
+export const meta: MetaFunction<typeof loader> = ({ data }) => [
+  { title: data ? appendToMetaTitle(data.header.title) : "" },
+];
+
 export async function action({ context, request }: ActionFunctionArgs) {
   const authSession = context.getSession();
   const { userId } = authSession;

app/routes/_layout+/account-details.workspace.tsx

@@ -1,5 +1,8 @@
 import { Link, Outlet } from "react-router";
 import { ErrorContent } from "~/components/errors";
+import { appendToMetaTitle } from "~/utils/append-to-meta-title";
+
+export const meta = () => [{ title: appendToMetaTitle("Workspaces") }];
 
 export const handle = {
   breadcrumb: () => <Link to="/account-details/workspace">Workspaces</Link>,

app/routes/_layout+/admin-dashboard+/$userId.tsx

@@ -29,6 +29,7 @@ import { useDisabled } from "~/hooks/use-disabled";
 import { resetPersonalWorkspaceBranding } from "~/modules/organization/service.server";
 import { updateUserTierId } from "~/modules/tier/service.server";
 import { softDeleteUser, getUserByID } from "~/modules/user/service.server";
+import { appendToMetaTitle } from "~/utils/append-to-meta-title";
 import { sendNotification } from "~/utils/emitter/send-notification.server";
 import { makeShelfError, ShelfError } from "~/utils/error";
 import {
@@ -47,6 +48,8 @@ import {
   getStripePricesAndProducts,
 } from "~/utils/stripe.server";
 
+export const meta = () => [{ title: appendToMetaTitle("User details") }];
+
 export type QrCodeWithAsset = Qr & {
   asset: {
     title: Asset["title"];

app/routes/_layout+/admin-dashboard+/_layout.tsx

@@ -3,6 +3,7 @@ import { data, Link, Outlet } from "react-router";
 import { ErrorContent } from "~/components/errors";
 
 import HorizontalTabs from "~/components/layout/horizontal-tabs";
+import { appendToMetaTitle } from "~/utils/append-to-meta-title";
 import { makeShelfError } from "~/utils/error";
 import { payload, error } from "~/utils/http.server";
 import { requireAdmin } from "~/utils/roles.server";
@@ -21,6 +22,8 @@ export async function loader({ context }: LoaderFunctionArgs) {
   }
 }
 
+export const meta = () => [{ title: appendToMetaTitle("Admin dashboard") }];
+
 export const handle = {
   breadcrumb: () => <Link to="/admin-dashboard">Admin dashboard</Link>,
 };

app/routes/_layout+/admin-dashboard+/announcements.new.tsx

@@ -7,10 +7,13 @@ import { Switch } from "~/components/forms/switch";
 import { MarkdownEditor } from "~/components/markdown/markdown-editor";
 import { Button } from "~/components/shared/button";
 import { db } from "~/database/db.server";
+import { appendToMetaTitle } from "~/utils/append-to-meta-title";
 import { makeShelfError, ShelfError } from "~/utils/error";
 import { payload, error, parseData } from "~/utils/http.server";
 import { requireAdmin } from "~/utils/roles.server";
 
+export const meta = () => [{ title: appendToMetaTitle("New announcement") }];
+
 export const loader = async ({ context }: LoaderFunctionArgs) => {
   const authSession = context.getSession();
   const { userId } = authSession;

app/routes/_layout+/admin-dashboard+/announcements.tsx

@@ -6,11 +6,14 @@ import { MarkdownViewer } from "~/components/markdown/markdown-viewer";
 import { Button } from "~/components/shared/button";
 import { Table, Td, Th, Tr } from "~/components/table";
 import { db } from "~/database/db.server";
+import { appendToMetaTitle } from "~/utils/append-to-meta-title";
 import { makeShelfError, ShelfError } from "~/utils/error";
 import { payload, error, parseData } from "~/utils/http.server";
 import { parseMarkdownToReact } from "~/utils/md";
 import { requireAdmin } from "~/utils/roles.server";
 
+export const meta = () => [{ title: appendToMetaTitle("Announcements") }];
+
 export const loader = async ({ context }: LoaderFunctionArgs) => {
   const authSession = context.getSession();
   const { userId } = authSession;

app/routes/_layout+/admin-dashboard+/generate-locations.tsx

@@ -10,6 +10,7 @@ import Input from "~/components/forms/input";
 import { Button } from "~/components/shared/button";
 import { useDisabled } from "~/hooks/use-disabled";
 import { generateLocationWithImages } from "~/modules/location/service.server";
+import { appendToMetaTitle } from "~/utils/append-to-meta-title";
 import { DEFAULT_MAX_IMAGE_UPLOAD_SIZE } from "~/utils/constants";
 import { sendNotification } from "~/utils/emitter/send-notification.server";
 import { makeShelfError, ShelfError } from "~/utils/error";
@@ -24,6 +25,7 @@ const GenerateLocationSchema = z.object({
   numberOfLocations: z.coerce.number().min(1).max(500).default(100),
   image: z.instanceof(File, { message: "Image is required" }),
 });
+export const meta = () => [{ title: appendToMetaTitle("Generate locations") }];
 
 export async function loader({ context }: LoaderFunctionArgs) {
   const { userId } = context.getSession();

app/routes/_layout+/admin-dashboard+/move-location-images.tsx

@@ -9,6 +9,7 @@ import { Button } from "~/components/shared/button";
 import { db } from "~/database/db.server";
 import { useDisabled } from "~/hooks/use-disabled";
 import { getSupabaseAdmin } from "~/integrations/supabase/client";
+import { appendToMetaTitle } from "~/utils/append-to-meta-title";
 import { PUBLIC_BUCKET } from "~/utils/constants";
 import { cropImage } from "~/utils/crop-image";
 import { sendNotification } from "~/utils/emitter/send-notification.server";
@@ -25,6 +26,9 @@ export const MigrationFormSchema = z.object({
     .transform((value) => value === "on"),
 });
 
+export const meta = () => [
+  { title: appendToMetaTitle("Move location images") },
+];
 export async function loader({ context }: LoaderFunctionArgs) {
   const { userId } = context.getSession();
 

app/routes/_layout+/admin-dashboard+/org.$organizationId.assets.tsx

@@ -9,6 +9,7 @@ import {
 } from "~/modules/asset/service.server";
 import { CurrentSearchParamsSchema } from "~/modules/asset/utils.server";
 import { getAssetIndexSettings } from "~/modules/asset-index-settings/service.server";
+import { appendToMetaTitle } from "~/utils/append-to-meta-title";
 import { checkExhaustiveSwitch } from "~/utils/check-exhaustive-switch";
 import { sendNotification } from "~/utils/emitter/send-notification.server";
 import { makeShelfError } from "~/utils/error";
@@ -19,6 +20,8 @@ import {
 } from "~/utils/permissions/permission.data";
 import { requireAdmin, requirePermission } from "~/utils/roles.server";
 
+export const meta = () => [{ title: appendToMetaTitle("Organization assets") }];
+
 export const loader = async ({
   request,
   context,

app/routes/_layout+/admin-dashboard+/org.$organizationId.members.tsx

@@ -5,10 +5,15 @@ import { DateS } from "~/components/shared/date";
 import { Table, Td, Tr } from "~/components/table";
 import { SSOUserBadge } from "~/components/user/sso-user-badge";
 import { db } from "~/database/db.server";
+import { appendToMetaTitle } from "~/utils/append-to-meta-title";
 import { makeShelfError } from "~/utils/error";
 import { payload, error, getParams } from "~/utils/http.server";
 import { requireAdmin } from "~/utils/roles.server";
 
+export const meta = () => [
+  { title: appendToMetaTitle("Organization members") },
+];
+
 export const loader = async ({ context, params }: LoaderFunctionArgs) => {
   const authSession = context.getSession();
   const { userId } = authSession;

app/routes/_layout+/admin-dashboard+/org.$organizationId.qr-codes.tsx

@@ -7,10 +7,15 @@ import { DateS } from "~/components/shared/date";
 import { Table, Td, Tr } from "~/components/table";
 import { db } from "~/database/db.server";
 import { generateOrphanedCodes } from "~/modules/qr/service.server";
+import { appendToMetaTitle } from "~/utils/append-to-meta-title";
 import { makeShelfError, ShelfError } from "~/utils/error";
 import { payload, error, getParams, parseData } from "~/utils/http.server";
 import { requireAdmin } from "~/utils/roles.server";
 
+export const meta = () => [
+  { title: appendToMetaTitle("Organization QR codes") },
+];
+
 export const loader = async ({ context, params }: LoaderFunctionArgs) => {
   const authSession = context.getSession();
   const { userId } = authSession;

app/routes/_layout+/admin-dashboard+/org.$organizationId.transfer-ownership.tsx

@@ -2,10 +2,15 @@ import { data, type LoaderFunctionArgs } from "react-router";
 import z from "zod";
 import TransferOwnershipCard from "~/components/settings/transfer-ownership-card";
 import { getOrganizationAdmins } from "~/modules/organization/service.server";
+import { appendToMetaTitle } from "~/utils/append-to-meta-title";
 import { makeShelfError } from "~/utils/error";
 import { error, getParams, payload } from "~/utils/http.server";
 import { requireAdmin } from "~/utils/roles.server";
 
+export const meta = () => [
+  { title: appendToMetaTitle("Transfer organization ownership") },
+];
+
 export async function loader({ context, params }: LoaderFunctionArgs) {
   const { userId } = context.getSession();
   const { organizationId } = getParams(

app/routes/_layout+/admin-dashboard+/org.$organizationId.tsx

@@ -28,6 +28,8 @@ import {
   toggleBarcodeEnabled,
 } from "~/modules/organization/service.server";
 import { createDefaultWorkingHours } from "~/modules/working-hours/service.server";
+import { appendToMetaTitle } from "~/utils/append-to-meta-title";
+
 import { csvDataFromRequest } from "~/utils/csv.server";
 import { ShelfError, makeShelfError } from "~/utils/error";
 import { isFormProcessing } from "~/utils/form";
@@ -36,6 +38,9 @@ import { extractCSVDataFromContentImport } from "~/utils/import.server";
 import { requireAdmin } from "~/utils/roles.server";
 import { validateDomains } from "~/utils/sso.server";
 
+export const meta = () => [
+  { title: appendToMetaTitle("Organization details") },
+];
 export const loader = async ({ context, params }: LoaderFunctionArgs) => {
   const authSession = context.getSession();
   const { userId } = authSession;

app/routes/_layout+/admin-dashboard+/qrs.tsx

@@ -1,5 +1,9 @@
 import type { PrintBatch, Prisma } from "@prisma/client";
-import type { ActionFunctionArgs, LoaderFunctionArgs } from "react-router";
+import type {
+  ActionFunctionArgs,
+  LoaderFunctionArgs,
+  MetaFunction,
+} from "react-router";
 import {
   data,
   redirect,
@@ -28,6 +32,7 @@ import {
   getPaginatedAndFilterableQrCodes,
   markBatchAsPrinted,
 } from "~/modules/qr/service.server";
+import { appendToMetaTitle } from "~/utils/append-to-meta-title";
 import { makeShelfError } from "~/utils/error";
 import { isFormProcessing } from "~/utils/form";
 import { payload, error, parseData } from "~/utils/http.server";
@@ -78,6 +83,10 @@ export async function loader({ context, request }: LoaderFunctionArgs) {
   }
 }
 
+export const meta: MetaFunction<typeof loader> = ({ loaderData }) => [
+  { title: appendToMetaTitle(loaderData?.header.title) },
+];
+
 export async function action({ context, request }: ActionFunctionArgs) {
   const authSession = context.getSession();
   const { userId } = authSession;

app/routes/_layout+/admin-dashboard+/test-supabase-rls.tsx

@@ -3,10 +3,13 @@ import { useEffect, useState } from "react";
 import { data, type LoaderFunctionArgs } from "react-router";
 import { Button } from "~/components/shared/button";
 import { supabaseClient } from "~/integrations/supabase/client";
+import { appendToMetaTitle } from "~/utils/append-to-meta-title";
 import { makeShelfError } from "~/utils/error";
 import { payload, error } from "~/utils/http.server";
 import { requireAdmin } from "~/utils/roles.server";
 
+export const meta = () => [{ title: appendToMetaTitle("Test Supabase RLS") }];
+
 export const loader = async ({ context }: LoaderFunctionArgs) => {
   const authSession = context.getSession();
   const { userId } = authSession;

app/routes/_layout+/admin-dashboard+/updates.$updateId.edit.tsx

@@ -5,10 +5,13 @@ import { z } from "zod";
 import { Card } from "~/components/shared/card";
 import { UpdateForm } from "~/components/update/update-form";
 import { getUpdateById, updateUpdate } from "~/modules/update/service.server";
+import { appendToMetaTitle } from "~/utils/append-to-meta-title";
 import { makeShelfError } from "~/utils/error";
 import { payload, error, parseData } from "~/utils/http.server";
 import { requireAdmin } from "~/utils/roles.server";
 
+export const meta = () => [{ title: appendToMetaTitle("Edit update") }];
+
 export const loader = async ({ context, params }: LoaderFunctionArgs) => {
   const authSession = context.getSession();
   const { userId } = authSession;

app/routes/_layout+/admin-dashboard+/updates.new.tsx

@@ -5,10 +5,13 @@ import { z } from "zod";
 import { Card } from "~/components/shared/card";
 import { UpdateForm } from "~/components/update/update-form";
 import { createUpdate } from "~/modules/update/service.server";
+import { appendToMetaTitle } from "~/utils/append-to-meta-title";
 import { makeShelfError } from "~/utils/error";
 import { payload, error, parseData } from "~/utils/http.server";
 import { requireAdmin } from "~/utils/roles.server";
 
+export const meta = () => [{ title: appendToMetaTitle("New update") }];
+
 export const loader = async ({ context }: LoaderFunctionArgs) => {
   const authSession = context.getSession();
   const { userId } = authSession;

app/routes/_layout+/admin-dashboard+/updates.tsx

@@ -11,10 +11,13 @@ import {
   getAllUpdatesForAdmin,
   updateUpdate,
 } from "~/modules/update/service.server";
+import { appendToMetaTitle } from "~/utils/append-to-meta-title";
 import { makeShelfError } from "~/utils/error";
 import { payload, error, parseData } from "~/utils/http.server";
 import { requireAdmin } from "~/utils/roles.server";
 
+export const meta = () => [{ title: appendToMetaTitle("Updates") }];
+
 export const loader = async ({ context }: LoaderFunctionArgs) => {
   const authSession = context.getSession();
   const { userId } = authSession;