Refactor MobileNav for handling mobile title more efficiently

client/modules/IDE/components/Header/MobileNav.jsx

@@ -1,4 +1,4 @@
-import React, { useContext, useMemo, useState } from 'react';
+import React, { useContext, useState } from 'react';
 import styled from 'styled-components';
 import { useDispatch, useSelector } from 'react-redux';
 import { useTranslation } from 'react-i18next';
@@ -204,30 +204,30 @@ const MobileNav = () => {
   const project = useSelector((state) => state.project);
   const user = useSelector((state) => state.user);
 
-  const { t } = useTranslation();
+  // const { t } = useTranslation();
 
   const editorLink = useSelector(selectSketchPath);
-  const pageName = useWhatPage();
+  const { pageName, title } = useWhatPage();
 
   // TODO: remove the switch and use a props like mobileTitle <Nav layout=“dashboard” mobileTitle={t(‘Login’)} />
-  function resolveTitle() {
-    switch (pageName) {
-      case 'login':
-        return t('LoginView.Login');
-      case 'signup':
-        return t('LoginView.SignUp');
-      case 'account':
-        return t('AccountView.Settings');
-      case 'examples':
-        return t('Nav.File.Examples');
-      case 'myStuff':
-        return 'My Stuff';
-      default:
-        return project.name;
-    }
-  }
-
-  const title = useMemo(resolveTitle, [pageName, project.name]);
+  // function resolveTitle() {
+  //   switch (pageName) {
+  //     case 'login':
+  //       return t('LoginView.Login');
+  //     case 'signup':
+  //       return t('LoginView.SignUp');
+  //     case 'account':
+  //       return t('AccountView.Settings');
+  //     case 'examples':
+  //       return t('Nav.File.Examples');
+  //     case 'myStuff':
+  //       return 'My Stuff';
+  //     default:
+  //       return project.name;
+  //   }
+  // }
+
+  // const title = useMemo(resolveTitle, [pageName, project.name]);
 
   const Logo = AsteriskIcon;
   return (

client/modules/IDE/hooks/useWhatPage.js

@@ -1,14 +1,33 @@
 import { useMemo } from 'react';
 import { useSelector } from 'react-redux';
 import { useLocation } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+
+const getPageTitle = (pageName, t) => {
+  switch (pageName) {
+    case 'login':
+      return t('LoginView.Login');
+    case 'signup':
+      return t('LoginView.SignUp');
+    case 'account':
+      return t('AccountView.Settings');
+    case 'examples':
+      return t('Nav.File.Examples');
+    case 'myStuff':
+      return 'My Stuff';
+    case 'home':
+    default:
+      return null; // Will use project.name as fallback in Nav
+  }
+};
 
 /**
- *
- * @returns {"home" | "myStuff" | "login" | "signup" | "account" | "examples"}
+ * @returns {{ page: "home" | "myStuff" | "login" | "signup" | "account" | "examples", title: string }}
  */
 const useWhatPage = () => {
   const username = useSelector((state) => state.user.username);
   const { pathname } = useLocation();
+  const { t } = useTranslation();
 
   const pageName = useMemo(() => {
     const myStuffPattern = new RegExp(
@@ -24,7 +43,28 @@ const useWhatPage = () => {
     return 'home';
   }, [pathname, username]);
 
-  return pageName;
+  const title = useMemo(() => getPageTitle(pageName, t), [pageName, t]);
+
+  // For backwards compatibility
+  const returnValue = {
+    pageName,
+    title
+  };
+
+  // Add a console warning in development
+  if (process.env.NODE_ENV === 'development') {
+    // Make the object look like a string for old code
+    Object.defineProperty(returnValue, 'toString', {
+      value: () => {
+        console.warn(
+          'Deprecated: useWhatPage() now returns an object. Please update your code to use { page, title }.'
+        );
+        return pageName;
+      }
+    });
+  }
+
+  return returnValue;
 };
 
 export default useWhatPage;