chore: update document titles to use <title> tags

Author: lewisjared

frontend/src/components/explorer/thematicContent.tsx

@@ -40,6 +40,7 @@ export function ThematicContent() {
   const themeObj = themes.find((t) => t.name === theme);
   return (
     <>
+      <title>{`${themeObj?.title} Explorer - Climate REF`}</title>
       <div className="space-x-2">
         {themes.map((item) => (
           <Link

frontend/src/hooks/useDocumentTitle.ts

@@ -0,0 +1,36 @@
+import { useMatches } from "@tanstack/react-router";
+import { useEffect, useState } from "react";
+
+const BASE_TITLE = "Climate REF";
+
+/**
+ * Hook that updates the document title based on the current route's staticData.
+ * Uses route matches to find the most specific title in the route hierarchy.
+ * Returns the current title for use with React's <title> component.
+ *
+ * For dynamic titles, you can still use <title> which will override this hook.
+ */
+export function useDocumentTitle() {
+  const matches = useMatches();
+  const [title, setTitle] = useState(BASE_TITLE);
+
+  useEffect(() => {
+    // Find the most specific route with a title in staticData
+    // Iterate from the end (most specific) to start (least specific)
+    for (let i = matches.length - 1; i >= 0; i--) {
+      const match = matches[i];
+      const routeTitle = match?.staticData?.title;
+
+      if (routeTitle && typeof routeTitle === "string") {
+        const fullTitle = `${routeTitle} - ${BASE_TITLE}`;
+        setTitle(fullTitle);
+        return;
+      }
+    }
+
+    // If no title found, use base title
+    setTitle(BASE_TITLE);
+  }, [matches]);
+
+  return title;
+}

frontend/src/routes/__root.tsx

@@ -11,6 +11,7 @@ import { Footer } from "@/components/app/footer";
 import { Navbar } from "@/components/app/navbar.tsx";
 import { WelcomeModal } from "@/components/app/welcomeModal";
 import { useApiEndpoint } from "@/hooks/useApiEndpoint";
+import { useDocumentTitle } from "@/hooks/useDocumentTitle";
 
 // Initialize Plausible Analytics
 init({
@@ -23,6 +24,7 @@ init({
 
 function AppLayout() {
   const { isUsingOverride } = useApiEndpoint();
+  const title = useDocumentTitle();
   return (
     <ErrorBoundary
       fallback={
@@ -49,6 +51,7 @@ function AppLayout() {
         });
       }}
     >
+      <title>{title}</title>
       <Navbar />
       <ErrorBoundary
         fallback={<ErrorFallback title="Page Error" showHomeButton={true} />}

frontend/src/routes/_app/datasets.$slug.tsx

@@ -1,4 +1,5 @@
 import { createFileRoute } from "@tanstack/react-router";
+import { useEffect } from "react";
 import type { ExecutionGroup } from "@/client";
 import {
   datasetsExecutionsOptions,
@@ -31,6 +32,9 @@ export const Route = createFileRoute("/_app/datasets/$slug")({
     return { dataset, executions };
   },
   component: DatasetPage,
+  staticData: {
+    title: "Dataset Details",
+  },
   errorComponent: ({ error }) => {
     return <div>Error: {error.message}</div>;
   },
@@ -43,6 +47,7 @@ function DatasetPage() {
 
   return (
     <div className="container mx-auto p-4">
+      <title>{`${ds.slug} - Climate REF`}</title>
       <DetailsPanel
         title={ds.slug}
         description={ds.dataset_type}

frontend/src/routes/_app/datasets.index.tsx

@@ -26,6 +26,9 @@ const DatasetsSearchSchema = z.object({
 export const Route = createFileRoute("/_app/datasets/")({
   component: SourcesIndexPage,
   validateSearch: zodValidator(DatasetsSearchSchema),
+  staticData: {
+    title: "Datasets",
+  },
   loader: async ({ context: { queryClient } }) => {
     return queryClient.ensureQueryData(datasetsListOptions());
   },

frontend/src/routes/_app/diagnostics.$providerSlug.$diagnosticSlug/figures.tsx

@@ -7,6 +7,7 @@ export const Figures = () => {
   const { providerSlug, diagnosticSlug } = Route.useParams();
   return (
     <div className="space-y-4">
+      <title>{`Figures - ${diagnosticSlug} - Climate REF`}</title>
       <Card>
         <CardHeader>
           <CardTitle>Figures Gallery</CardTitle>

frontend/src/routes/_app/diagnostics.$providerSlug.$diagnosticSlug/groups.tsx

@@ -18,4 +18,7 @@ export const Route = createFileRoute(
   "/_app/diagnostics/$providerSlug/$diagnosticSlug/groups",
 )({
   component: Executions,
+  staticData: {
+    title: "Execution Groups",
+  },
 });

frontend/src/routes/_app/diagnostics.$providerSlug.$diagnosticSlug/index.tsx

@@ -3,6 +3,9 @@ import { createFileRoute, redirect } from "@tanstack/react-router";
 export const Route = createFileRoute(
   "/_app/diagnostics/$providerSlug/$diagnosticSlug/",
 )({
+  staticData: {
+    title: "Diagnostic Details",
+  },
   beforeLoad: ({ params }) => {
     throw redirect({
       to: "/diagnostics/$providerSlug/$diagnosticSlug/figures",

frontend/src/routes/_app/diagnostics.$providerSlug.$diagnosticSlug/route.tsx

@@ -6,6 +6,7 @@ import {
   useNavigate,
 } from "@tanstack/react-router";
 import { HelpCircle } from "lucide-react";
+import { useEffect } from "react";
 import type { GroupBy, ReferenceDatasetLink } from "@/client";
 import { diagnosticsGetOptions } from "@/client/@tanstack/react-query.gen.ts";
 import { DiagnosticInfoSkeleton } from "@/components/diagnostics/diagnosticInfoSkeleton";
@@ -49,6 +50,7 @@ const DiagnosticInfoLayout = () => {
 
   return (
     <div className="flex flex-col gap-4">
+      <title>{`${data?.name} - Climate REF`}</title>
       <Card className="md:col-span-2">
         <CardHeader>
           <CardTitle className="mb-6">
@@ -362,6 +364,9 @@ export const Route = createFileRoute(
   component: DiagnosticInfoLayout,
   pendingComponent: DiagnosticInfoSkeleton,
   pendingMs: 200,
+  staticData: {
+    title: "Diagnostic Details",
+  },
   loader: ({ context: { queryClient }, params }) => {
     return queryClient.ensureQueryData(
       diagnosticsGetOptions({

frontend/src/routes/_app/diagnostics.$providerSlug.$diagnosticSlug/scalars.tsx

@@ -86,4 +86,7 @@ export const Route = createFileRoute(
 )({
   component: ScalarsValuesTab,
   validateSearch: zodValidator(valuesSearchSchema),
+  staticData: {
+    title: "Scalar Values",
+  },
 });