feat(core): 19315 implement dynamic titles

src/core/localization/translations/en/common.json

@@ -365,7 +365,9 @@
   "modes": {
     "map": "Map",
     "about": "About",
+    "cookies": "Cookies",
     "reports": "Reports",
+    "report": "Report",
     "profile": "Profile",
     "privacy": "Privacy",
     "terms": "Terms"

src/core/router/atoms/currentRoute.ts

@@ -16,15 +16,20 @@ export const currentRouteAtom = createAtom(
     const routesConfig = get('availableRoutesAtom');
     if (routesConfig === null) return null;
     const location = get('currentLocationAtom');
+    const normalizedLocation = stripBasename(location.pathname, configRepo.get().baseUrl);
+
+    const matchedRoute = routesConfig.routes.find((route) => {
+      const path = getAbsoluteRoute(route);
+      return matchPath({ path, exact: true }, normalizedLocation);
+    });
+
+    if (matchedRoute) {
+      return matchedRoute;
+    }
+
+    // fallback to default route
     return (
-      routesConfig.routes.find((route) => {
-        const path = getAbsoluteRoute(route);
-        const normalizedLocation = stripBasename(
-          location.pathname,
-          configRepo.get().baseUrl,
-        );
-        return matchPath({ path, exact: true }, normalizedLocation);
-      }) ?? null
+      routesConfig.routes.find((route) => route.id === routesConfig.defaultRoute) ?? null
     );
   },
   'currentRouteAtom',

src/core/router/components/Router.tsx

@@ -29,6 +29,11 @@ globalThis.addEventListener(NAVIGATE_EVENT, ((e: CustomEvent) => {
   routerInstance.navigate(getAbsoluteRoute(slug) + globalThis.location.search);
 }) as EventListener);
 
+// update Title
+currentRouteAtom.v3atom.onChange((ctx, route) => {
+  document.title = `${configRepo.get().name} - ${route?.title || ''}`;
+});
+
 export function Router() {
   return <RouterProvider router={routerInstance} />;
 }

src/core/router/routes.tsx

@@ -49,7 +49,7 @@ export const routerConfig: AppRouterConfig = {
     {
       id: 'report',
       slug: ':reportId',
-      title: 'modes.report',
+      title: i18n.t('modes.report'),
       icon: <Reports16 />,
       view: <ReportPage />,
       requiredFeature: AppFeature.REPORTS,
@@ -112,7 +112,7 @@ export const routerConfig: AppRouterConfig = {
     {
       id: 'cookies',
       slug: 'cookies',
-      title: 'modes.cookies',
+      title: i18n.t('modes.cookies'),
       icon: <Reports16 />,
       view: <PagesDocument doc={[{ type: 'md', url: 'cookies.md' }]} key="cookies" />,
       parentRouteId: 'about',

src/core/router/types.ts

@@ -6,7 +6,7 @@ export interface AppRoute {
   view: JSX.Element;
   icon: JSX.Element;
   /** How to name this route in navigation */
-  title: string | JSX.Element;
+  title: string;
   /** Redirect to this route users that see it first time */
   showForNewUsers?: boolean;
   /** Should we unmount (false) or just hide (true) route when it deactivated */

src/views/CommonView.tsx

@@ -4,7 +4,6 @@ import { useAtom } from '@reatom/react-v2';
 import { configRepo } from '~core/config';
 import { OriginalLogo } from '~components/KonturLogo/KonturLogo';
 import { CookieConsentBanner } from '~features/cookie_consent_banner';
-import { useTabNameUpdate } from '~utils/hooks/useTabNameUpdate';
 import { featureFlagsAtom, FeatureFlag } from '~core/shared_state';
 import { FullScreenLoader } from '~components/LoadingSpinner/LoadingSpinner';
 import s from './CommonView.module.css';
@@ -26,7 +25,6 @@ export function CommonView({
   getAbsoluteRoute: (path: string | AppRoute) => string;
 }>) {
   const [featureFlags] = useAtom(featureFlagsAtom);
-  useTabNameUpdate(configRepo.get().name);
 
   useEffect(() => {
     if (featureFlags[FeatureFlag.INTERCOM]) {