Add routes meta

package.json

@@ -54,6 +54,7 @@
     "react": "^18",
     "react-day-picker": "^8",
     "react-dom": "^18",
+    "react-helmet": "^6.1.0",
     "react-hook-form": "^7.53.0",
     "sharp": "^0.33",
     "sonner": "^1.5.0",
@@ -78,6 +79,7 @@
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "@types/react-helmet": "^6.1.11",
     "@typescript-eslint/eslint-plugin": "^7",
     "@typescript-eslint/parser": "^7",
     "@vitest/coverage-v8": "^2.1.1",

routes/~__root.tsx

@@ -9,6 +9,7 @@
 import { createRootRoute, Outlet, redirect } from '@tanstack/react-router'
 import { NextIntlClientProvider } from 'next-intl'
 import { useLayoutEffect } from 'react'
+import { Helmet } from 'react-helmet'
 import { auth } from '@/modules/firebase/app'
 import { AuthProvider } from '@/modules/firebase/AuthProvider'
 import messages from '@/modules/messages/translations/en.json'
@@ -17,12 +18,6 @@
 import { lightTheme } from '@/packages/design-system/src'
 import { Toaster } from '@/packages/design-system/src/components/Toaster'
 
-/**
- * TODO
- * metadata
- * favicon
- * */
-
 const Root = () => {
   useLayoutEffect(() => {
     Object.entries(lightTheme).forEach(([key, value]) => {
@@ -38,6 +33,7 @@
           timeZone="Europe/Warsaw"
           messages={messages}
         >
+          <Helmet defaultTitle="ENGAGE-HF" titleTemplate="%s - ENGAGE-HF" />
           <Outlet />
           <Toaster />
         </NextIntlClientProvider>

routes/~_dashboard/~index.tsx

@@ -7,11 +7,15 @@
 //
 import { createFileRoute } from '@tanstack/react-router'
 import { Home } from 'lucide-react'
+import { Helmet } from 'react-helmet'
 import { PageTitle } from '@/packages/design-system/src/molecules/DashboardLayout'
 import { DashboardLayout } from './DashboardLayout'
 
 const DashboardPage = () => (
   <DashboardLayout title={<PageTitle title="Home" icon={<Home />} />}>
+    <Helmet>
+      <title>Home</title>
+    </Helmet>
     <h1 className="text-2xl">Dashboard</h1>
   </DashboardLayout>
 )

routes/~_dashboard/~patients/~$id/~index.tsx

@@ -9,6 +9,7 @@
 import { UserType } from '@stanfordbdhg/engagehf-models'
 import { createFileRoute, notFound, useRouter } from '@tanstack/react-router'
 import { Contact } from 'lucide-react'
+import { Helmet } from 'react-helmet'
 import { callables, db, docRefs, refs } from '@/modules/firebase/app'
 import {
   getMedicationRequestData,
@@ -175,6 +176,9 @@
         />
       }
     >
+      <Helmet>
+        <title>Edit {userName}</title>
+      </Helmet>
       <Tabs defaultValue={Tab.medications}>
         <TabsList className="mb-6 w-full">
           <TabsTrigger value={Tab.information} className="grow">

routes/~_dashboard/~patients/~index.tsx

@@ -9,6 +9,7 @@
 import { createFileRoute, Link } from '@tanstack/react-router'
 import { query, where } from 'firebase/firestore'
 import { Contact, UserPlus } from 'lucide-react'
+import { Helmet } from 'react-helmet'
 import {
   docRefs,
   getCurrentUser,
@@ -96,6 +97,9 @@
         </Button>
       }
     >
+      <Helmet>
+        <title>Patients</title>
+      </Helmet>
       <PatientsTable data={patients} />
     </DashboardLayout>
   )

routes/~_dashboard/~patients/~invite.tsx

@@ -8,6 +8,7 @@
 import { UserType } from '@stanfordbdhg/engagehf-models'
 import { createFileRoute, useNavigate } from '@tanstack/react-router'
 import { Contact } from 'lucide-react'
+import { Helmet } from 'react-helmet'
 import { callables, docRefs } from '@/modules/firebase/app'
 import { useUser } from '@/modules/firebase/UserProvider'
 import { getDocDataOrThrow } from '@/modules/firebase/utils'
@@ -48,6 +49,9 @@
     <DashboardLayout
       title={<PageTitle title="Invite patient" icon={<Contact />} />}
     >
+      <Helmet>
+        <title>Invite patient</title>
+      </Helmet>
       <PatientForm
         onSubmit={invitePatient}
         clinicianPreselectId={

routes/~_dashboard/~users/~$id.tsx

@@ -9,6 +9,7 @@
 import { UserType } from '@stanfordbdhg/engagehf-models'
 import { createFileRoute, notFound, useRouter } from '@tanstack/react-router'
 import { Users } from 'lucide-react'
+import { Helmet } from 'react-helmet'
 import { callables, docRefs, ensureType } from '@/modules/firebase/app'
 import { getDocDataOrThrow } from '@/modules/firebase/utils'
 import { queryClient } from '@/modules/query/queryClient'
@@ -64,16 +65,16 @@
     await router.invalidate()
   }
 
+  const userName = getUserName(authUser)
   return (
     <DashboardLayout
       title={
-        <PageTitle
-          title="Edit user"
-          subTitle={getUserName(authUser)}
-          icon={<Users />}
-        />
+        <PageTitle title="Edit user" subTitle={userName} icon={<Users />} />
       }
     >
+      <Helmet>
+        <title>Edit {userName}</title>
+      </Helmet>
       <UserForm
         organizations={organizations}
         type={user.type}

routes/~_dashboard/~users/~index.tsx

@@ -9,6 +9,7 @@
 import { createFileRoute, Link } from '@tanstack/react-router'
 import { query, where } from 'firebase/firestore'
 import { UserPlus, Users } from 'lucide-react'
+import { Helmet } from 'react-helmet'
 import { ensureType, getCurrentUser, refs } from '@/modules/firebase/app'
 import { mapAuthData } from '@/modules/firebase/user'
 import { getDocsData } from '@/modules/firebase/utils'
@@ -91,6 +92,9 @@
       }
       title={<PageTitle title="Users" icon={<Users />} />}
     >
+      <Helmet>
+        <title>Users</title>
+      </Helmet>
       <UsersTable data={users} />
     </DashboardLayout>
   )

routes/~_dashboard/~users/~invite.tsx

@@ -8,6 +8,7 @@
 import { UserType } from '@stanfordbdhg/engagehf-models'
 import { createFileRoute, useNavigate } from '@tanstack/react-router'
 import { Users } from 'lucide-react'
+import { Helmet } from 'react-helmet'
 import { callables, ensureType } from '@/modules/firebase/app'
 import { queryClient } from '@/modules/query/queryClient'
 import { routes } from '@/modules/routes'
@@ -40,6 +41,9 @@
 
   return (
     <DashboardLayout title={<PageTitle title="Invite user" icon={<Users />} />}>
+      <Helmet>
+        <title>Invite user</title>
+      </Helmet>
       <UserForm organizations={organizations} onSubmit={inviteUser} />
     </DashboardLayout>
   )

routes/~sign-in/~index.tsx

@@ -7,12 +7,16 @@
 //
 import { createFileRoute } from '@tanstack/react-router'
 import { signInWithEmailAndPassword, signInWithPopup } from 'firebase/auth'
+import { Helmet } from 'react-helmet'
 import { AsideEngageLayout } from '@/components/AsideEngageLayout'
 import { authProvider, auth } from '@/modules/firebase/app'
 import { SignInForm as AuthSignInForm } from '@/packages/design-system/src/modules/auth/SignInForm'
 
 const SignIn = () => (
   <AsideEngageLayout>
+    <Helmet>
+      <title>Sign In</title>
+    </Helmet>
     <AuthSignInForm
       className="mx-auto w-[350px]"
       providers={[