feat: Added Helmet

Author: Whitzscott (Developer)

src/App.tsx

@@ -11,6 +11,8 @@ import { Utils as utils } from '~/Utility';
 import { useUserStore } from '~/store';
 import { Box, useTheme } from '@mui/material';
 import { BlockedPage } from './routes/Routing';
+import { HelmetProvider } from 'react-helmet-async';
+import { HelmetWrapper } from '~/HelmetWrapper'; 
 
 interface UserData {
   is_deleted: boolean;
@@ -110,43 +112,47 @@ const AppContent = () => {
   if (isBlocked) return <BlockedPage />;
 
   return (
-    <Box
-      data-mui-theme={`theme-${currentTheme}`}
-      aria-label="PyrenzAI"
-      sx={{
-        scrollBehavior: 'smooth',
-        scrollbarWidth: 'thin',
-        scrollbarColor: 'transparent transparent',
-        '&::-webkit-scrollbar': {
-          width: 8,
-          opacity: 0.2,
-          transition: 'opacity 0.3s ease',
-        },
-        '&:hover::-webkit-scrollbar': {
-          opacity: 1,
-        },
-        '&::-webkit-scrollbar-track': {
-          background: 'transparent',
-        },
-        '&::-webkit-scrollbar-thumb': {
-          backgroundColor: 'rgba(100, 100, 100, 0.4)',
-          borderRadius: 10,
-          border: '2px solid transparent',
-          backgroundClip: 'content-box',
-        },
-      }}
-    >
-      <Routes>{AppRoutes}</Routes>
-    </Box>
+    <HelmetWrapper>
+      <Box
+        data-mui-theme={`theme-${currentTheme}`}
+        aria-label="PyrenzAI"
+        sx={{
+          scrollBehavior: 'smooth',
+          scrollbarWidth: 'thin',
+          scrollbarColor: 'transparent transparent',
+          '&::-webkit-scrollbar': {
+            width: 8,
+            opacity: 0.2,
+            transition: 'opacity 0.3s ease',
+          },
+          '&:hover::-webkit-scrollbar': {
+            opacity: 1,
+          },
+          '&::-webkit-scrollbar-track': {
+            background: 'transparent',
+          },
+          '&::-webkit-scrollbar-thumb': {
+            backgroundColor: 'rgba(100, 100, 100, 0.4)',
+            borderRadius: 10,
+            border: '2px solid transparent',
+            backgroundClip: 'content-box',
+          },
+        }}
+      >
+        <Routes>{AppRoutes}</Routes>
+      </Box>
+    </HelmetWrapper>
   );
 };
 
 export function App() {
   return (
-    <Router>
-      <Suspense fallback={<Spinner />}>
-        <AppContent />
-      </Suspense>
-    </Router>
+    <HelmetProvider>
+      <Router>
+        <Suspense fallback={<Spinner />}>
+          <AppContent />
+        </Suspense>
+      </Router>
+    </HelmetProvider>
   );
 }

src/HelmetWrapper.tsx

@@ -0,0 +1,28 @@
+import { Helmet } from 'react-helmet-async';
+import { useLocation, matchPath } from 'react-router-dom';
+import { ReactNode } from 'react';
+import { routeTitleMap } from '~/meta/pageTitles';
+
+export const HelmetWrapper = ({ children }: { children: ReactNode }) => {
+  const location = useLocation();
+  const path = location.pathname;
+
+  let title = 'Page';
+
+  for (const pattern in routeTitleMap) {
+    const match = matchPath({ path: pattern, end: true }, path);
+    if (match) {
+      title = routeTitleMap[pattern];
+      break;
+    }
+  }
+
+  return (
+    <>
+      <Helmet>
+        <title>{title}</title>
+      </Helmet>
+      {children}
+    </>
+  );
+};

src/meta/index.ts

@@ -0,0 +1 @@
+export * from './pageTitles'

src/meta/pageTitles.ts

@@ -0,0 +1,21 @@
+export const routeTitleMap: Record<string, string> = {
+    '/': 'Home',
+    '/Home': 'Home',
+    '/Policy': 'Policy',
+    '/Create': 'Create',
+    '/Create/:char_uuid': 'Edit Character',
+    '/Subscription': 'Subscription',
+    '/Archive': 'Archive',
+    '/Profile': 'Profile',
+    '/Profile/:creator_uuid': 'Profile',
+    '/Chat/:chat_uuid': 'Chat',
+    '/Settings': 'Settings',
+    '/ContentPolicy': 'Content Policy',
+    '/docs': 'Docs',
+    '/docs/:doc_name': 'Docs',
+    '/Admin': 'Admin',
+    '/character/:char_uuid': 'Character',
+    '/Blocked': 'Blocked',
+    '*': 'Page Not Found',
+  };
+