feat(CE): added title change based on route

ui/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "vite-project",
+  "name": "multiwoven",
   "private": true,
   "version": "0.0.0",
   "type": "module",

ui/src/constants/index.ts

@@ -0,0 +1 @@
+export const BRAND_NAME = 'Multiwoven';

ui/src/utils/__tests__/getPageTitle.test.ts

@@ -0,0 +1,27 @@
+import { expect } from '@jest/globals';
+import '@testing-library/jest-dom/jest-globals';
+import '@testing-library/jest-dom';
+
+import getTitle from '@/utils/getPageTitle';
+
+describe('getTitle', () => {
+  it('should return the correct title for a known route', () => {
+    expect(getTitle('/')).toBe('Dashboard | Multiwoven');
+    expect(getTitle('/settings')).toBe('Settings | Multiwoven');
+    expect(getTitle('/activate/syncs')).toBe('Syncs | Multiwoven');
+    expect(getTitle('/setup/sources')).toBe('Sources | Multiwoven');
+    expect(getTitle('/define/models')).toBe('Models | Multiwoven');
+    expect(getTitle('/setup/destinations')).toBe('Destinations | Multiwoven');
+  });
+
+  it('should return "Multiwoven" for an unknown route', () => {
+    expect(getTitle('/unknown')).toBe('Multiwoven');
+    expect(getTitle('/another/unknown/path')).toBe('Multiwoven');
+  });
+
+  it('should return the correct title for a route with additional path segments', () => {
+    expect(getTitle('/')).toBe('Dashboard | Multiwoven');
+    expect(getTitle('/define/models/ai/28')).toBe('Models | Multiwoven');
+    expect(getTitle('/define/models/28')).toBe('Models | Multiwoven');
+  });
+});

ui/src/utils/getPageTitle.ts

@@ -0,0 +1,26 @@
+import { BRAND_NAME } from '@/constants';
+
+const ROUTE_MAP = {
+  '/settings': 'Settings',
+  '/activate/syncs': 'Syncs',
+  '/setup/sources': 'Sources',
+  '/define/models': 'Models',
+  '/setup/destinations': 'Destinations',
+};
+
+const getTitle = (pathname: string) => {
+  if (pathname === '/') {
+    return 'Dashboard | ' + BRAND_NAME;
+  }
+  const normalizedPath = pathname.replace(/\/+$/, '');
+  const matchingRoute = Object.keys(ROUTE_MAP).find((route) => normalizedPath.startsWith(route));
+
+  const title = matchingRoute ? ROUTE_MAP[matchingRoute as keyof typeof ROUTE_MAP] : null;
+
+  if (title) {
+    return title + ' | ' + BRAND_NAME;
+  }
+  return BRAND_NAME;
+};
+
+export default getTitle;

ui/src/views/MainLayout/MainLayout.tsx

@@ -1,19 +1,28 @@
+import { Outlet, useLocation } from 'react-router-dom';
+import { useState, useEffect } from 'react';
+
+import Loader from '@/components/Loader';
 import { useUiConfig } from '@/utils/hooks';
 import Sidebar from '@/views/Sidebar/Sidebar';
+import useCustomToast from '@/hooks/useCustomToast';
+import { CustomToastStatus } from '@/components/Toast';
+import ServerError from '../ServerError';
+import getTitle from '@/utils/getPageTitle';
+
 import { Box } from '@chakra-ui/layout';
-import { Outlet } from 'react-router-dom';
-import Loader from '@/components/Loader';
-import { useState, useEffect } from 'react';
 import { useQuery } from '@tanstack/react-query';
+
 import { getWorkspaces } from '@/services/settings';
 import { useStore } from '@/stores';
-import ServerError from '../ServerError';
-import useCustomToast from '@/hooks/useCustomToast';
-import { CustomToastStatus } from '@/components/Toast';
 
 const MainLayout = (): JSX.Element => {
   const [isLoading, setIsLoading] = useState(true);
   const { contentContainerId } = useUiConfig();
+  const location = useLocation();
+  useEffect(() => {
+    const title = getTitle(location.pathname);
+    document.title = title;
+  }, [location.pathname]);
 
   const setActiveWorkspaceId = useStore((state) => state.setActiveWorkspaceId);
   const activeWorkspaceId = useStore((state) => state.workspaceId);