feat: Add dynamic page titles with route-based translations

harperreed · Feb 18, 2025 · 691bff4 · 691bff4
1 parent 5c4cb71
commit 691bff4
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 1 deletion.
diff --git a/packages/chat/app/+html.tsx b/packages/chat/app/+html.tsx
@@ -9,6 +9,7 @@ export default function Root({ children }: PropsWithChildren) {
     return (
         <html lang="en">
             <head>
+                <title>Orbiting</title>
                 <meta charSet="utf-8" />
                 <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
                 <meta

diff --git a/packages/chat/app/_layout.tsx b/packages/chat/app/_layout.tsx
@@ -1,5 +1,6 @@
-import { Stack } from "expo-router";
+import { Stack, usePathname } from "expo-router";
 import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import './i18n/config';
 import { WelcomeModal } from './components/WelcomeModal';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
@@ -11,6 +12,31 @@ import { ErrorBoundary } from './components/ErrorBoundary';
 
 function AppContent() {
   const { currentTheme } = useSettings();
+  const { t } = useTranslation();
+  const pathname = usePathname();
+
+  useEffect(() => {
+    let title = 'Orbiting';
+
+    switch (pathname) {
+      case '/history':
+        title = `${t('history')} | Orbiting`;
+        break;
+      case '/settings':
+        title = `${t('settings')} | Orbiting`;
+        break;
+      case '/help':
+        title = `${t('help')} | Orbiting`;
+        break;
+      case '/about':
+        title = `${t('about')} | Orbiting`;
+        break;
+    }
+
+    if (typeof document !== 'undefined') {
+      document.title = title;
+    }
+  }, [pathname, t]);
 
   return (
     <PaperProvider theme={currentTheme}>