Merge pull request #2551 from Open-Earth-Foundation/feat/navigation-related-improvements

cephaschapa · web-flow · commit 4fa358aa52e2 · 2026-05-08T11:26:51.000+02:00
Feat/navigation related improvements
diff --git a/app/src/app/[lng]/[inventory]/data/[step]/[subsector]/page.tsx b/app/src/app/[lng]/[inventory]/data/[step]/[subsector]/page.tsx
@@ -258,20 +258,30 @@ function SubSectorPage(props: {
                     <BreadcrumbLink
                       href={pathname.replace(`/${step}/${subsector}`, "")}
                       color="content.tertiary"
+                      textDecoration="none"
+                      _hover={{
+                        textDecoration: "underline",
+                        textUnderlineOffset: "4px",
+                      }}
                       truncate
                     >
                       {t("all-sectors")}
                     </BreadcrumbLink>
                     <BreadcrumbLink
                       href={pathname.replace(`/${subsector}`, "")}
                       color="content.tertiary"
+                      textDecoration="none"
+                      _hover={{
+                        textDecoration: "underline",
+                        textUnderlineOffset: "4px",
+                      }}
                       truncate
                     >
                       {t(getSectorName(step))}
                     </BreadcrumbLink>
                     <BreadcrumbCurrentLink
                       color="content.link"
-                      textDecoration="underline"
+                      textDecoration="none"
                     >
                       <Text truncate lineClamp={1}>
                         {!subSectorData ? (
diff --git a/app/src/app/[lng]/[inventory]/data/[step]/page.tsx b/app/src/app/[lng]/[inventory]/data/[step]/page.tsx
@@ -676,13 +676,18 @@ export default function AddDataSteps() {
                 <BreadcrumbLink
                   href={`/${inventory}/data`}
                   color="content.tertiary"
+                  textDecoration="none"
+                  _hover={{
+                    textDecoration: "underline",
+                    textUnderlineOffset: "4px",
+                  }}
                 >
                   {t("all-sectors")}
                 </BreadcrumbLink>
 
                 <BreadcrumbCurrentLink
                   color="content.link"
-                  textDecoration="underline"
+                  textDecoration="none"
                 >
                   {t(kebab(currentStep.name || ""))}
                 </BreadcrumbCurrentLink>
diff --git a/app/src/components/GHGIHomePage/Hero.tsx b/app/src/components/GHGIHomePage/Hero.tsx
@@ -12,6 +12,7 @@ import { Box, Heading, Icon, Spinner, Text } from "@chakra-ui/react";
 import { CircleFlag } from "react-circle-flags";
 import {
   MdArrowOutward,
+  MdChevronRight,
   MdGroup,
   MdInfoOutline,
   MdOutlineAspectRatio,
@@ -22,6 +23,12 @@ import { getShortenNumberUnit, shortenNumber } from "@/util/helpers";
 import Link from "next/link";
 import { hasFeatureFlag, FeatureFlags } from "@/util/feature-flags";
 import { useTranslation } from "@/i18n/client";
+import {
+  BreadcrumbCurrentLink,
+  BreadcrumbLink,
+  BreadcrumbRoot,
+} from "@/components/ui/breadcrumb";
+import { usePathname } from "next/navigation";
 
 const CityMap = dynamic(() => import("@/components/CityMap"), { ssr: false });
 
@@ -47,6 +54,7 @@ export function Hero({
   city,
 }: HeroProps) {
   const { t } = useTranslation(lng, "dashboard");
+  const pathname = usePathname();
   const activeCity = inventory?.city?.name ?? city?.name;
   const activeProject = (() => {
     const projectName = inventory?.city?.project?.name ?? city?.project?.name;
@@ -72,15 +80,60 @@ export function Hero({
     [cityData?.population, population?.population, population?.year],
   );
 
+  const moduleLabel = useMemo(() => {
+    if (pathname.includes("/HIAP")) return t("breadcrumb-hiap");
+    if (pathname.includes("/dashboard")) return t("dashboard");
+    return t("ghg-inventories");
+  }, [pathname, t]);
+
+  const cityId = inventory?.cityId ?? city?.cityId;
+  const breadcrumbsHomeHref = cityId ? `/${lng}/cities/${cityId}` : `/${lng}`;
+
   return (
-    <Box bg="content.alternative" w="full" h="491px" pt="150px" px={8}>
-      <Box display="flex" mx="auto" maxW="full" w="1090px">
+    <Box bg="content.alternative" w="full" h="491px" pt="80px" px={8}>
+      <Box
+        display="flex"
+        flexDirection="column"
+        gap="24px"
+        mx="auto"
+        maxW="full"
+        w="1090px"
+      >
+        <Box>
+          <BreadcrumbRoot
+            separator={
+              <Icon as={MdChevronRight} boxSize={4} color="base.light" />
+            }
+            separatorGap="8px"
+            fontFamily="body"
+          >
+            <BreadcrumbLink href={breadcrumbsHomeHref} asChild>
+              <Link href={breadcrumbsHomeHref} color="base.light">
+                <Text
+                  fontSize="body.md"
+                  color="base.light"
+                  lineHeight="20px"
+                  _hover={{ textDecoration: "underline" }}
+                  textUnderlineOffset="8px"
+                >
+                  {t("citycatalyst")}
+                </Text>
+              </Link>
+            </BreadcrumbLink>
+            <BreadcrumbCurrentLink>
+              <Text fontSize="body.md" color="border.neutral">
+                {moduleLabel}
+              </Text>
+            </BreadcrumbCurrentLink>
+          </BreadcrumbRoot>
+        </Box>
         <Box
           w="full"
           h="240px"
           display="flex"
           flexDirection="column"
           justifyContent="center"
+          pt="36px"
         >
           <Box display="flex" h="240px">
             <Box
@@ -98,6 +151,7 @@ export function Hero({
               >
                 {!inventory ? t("welcome") : null}
               </Text>
+
               <Box display="flex" flexDirection="column" gap={2}>
                 {!isPublic &&
                 hasFeatureFlag(FeatureFlags.PROJECT_OVERVIEW_ENABLED) ? (
diff --git a/app/src/components/HomePageJN/ModuleCard.tsx b/app/src/components/HomePageJN/ModuleCard.tsx
@@ -5,11 +5,14 @@ import React from "react";
 import type { TFunction } from "i18next";
 import { ButtonMedium } from "@/components/package/Texts/Button";
 import { BodyMedium, BodySmall } from "@/components/package/Texts/Body";
-import { MdArrowForward } from "react-icons/md";
+import { MdArrowForward, MdOpenInNew } from "react-icons/md";
 import { MdInfoOutline } from "react-icons/md";
 import { TitleLarge } from "@/components/package/Texts/Title";
 import { ModuleAttributes } from "@/models/Module";
 import NextLink from "next/link";
+import { Modules } from "@/util/constants";
+
+const GHGI_START_HERE_HIDDEN_KEY = "ghgi-start-here-hidden";
 
 export function ModuleCard({
   module,
@@ -43,6 +46,18 @@ export function ModuleCard({
   };
 
   const { name, author, description, tagline, url, logo, status } = module;
+  const isGhgi = module.id === Modules.GHGI.id;
+  const [hideStartHereTag, setHideStartHereTag] = React.useState(false);
+
+  React.useEffect(() => {
+    if (!isGhgi) return;
+
+    const isHidden =
+      localStorage.getItem(GHGI_START_HERE_HIDDEN_KEY) === "true";
+    if (isHidden) {
+      setHideStartHereTag(true);
+    }
+  }, [isGhgi]);
 
   const getTranslationInLanguage = (
     obj: { [lng: string]: string } | undefined,
@@ -57,6 +72,11 @@ export function ModuleCard({
   const resolvedUrl = isExternal ? url : `${baseUrl}${url}`;
 
   const handleModuleLaunch = (e: React.MouseEvent) => {
+    if (isGhgi) {
+      setHideStartHereTag(true);
+      localStorage.setItem(GHGI_START_HERE_HIDDEN_KEY, "true");
+    }
+
     if (isExternal) {
       e.preventDefault();
       window.open(url, "_blank", "noopener,noreferrer");
@@ -84,39 +104,55 @@ export function ModuleCard({
       <Card.Body gap={2} flex="1">
         <VStack w="full" align="start" gap={2}>
           <HStack justify="space-between" w="full">
-            <HStack gap={2}>
+            <HStack gap={2} justifyContent="space-between">
               <Image
                 src={logo || "/assets/icon_inverted.svg"}
                 boxSize={8}
                 alt={`${name} module logo`}
               />
+
               {status && status !== "active" && (
                 <Tag size="sm" colorPalette={statusColorMap[status] || "gray"}>
                   {t(statusLabelMap[status] || status)}
                 </Tag>
               )}
             </HStack>
-
-            <Tooltip
-              content={getTranslationInLanguage(description)}
-              showArrow
-              closeDelay={8000}
-              contentProps={{
-                bg: "content.secondary",
-                color: "background.default",
-                borderRadius: "md",
-                p: 3,
-                maxW: "300px",
-                fontSize: "sm",
-              }}
-            >
-              <Icon
-                as={MdInfoOutline}
-                boxSize={6}
-                color="interactive.control"
-                cursor="pointer"
-              />
-            </Tooltip>
+            <HStack gap={2} justifyContent="flex-end">
+              {isGhgi && !hideStartHereTag && (
+                <Tag
+                  size="sm"
+                  colorPalette="gray"
+                  p={2}
+                  borderRadius={"8px"}
+                  bg="border.neutral"
+                  color="content.secondary"
+                  fontWeight="semibold"
+                  textTransform="uppercase"
+                >
+                  {t("start-here")}
+                </Tag>
+              )}
+              <Tooltip
+                content={getTranslationInLanguage(description)}
+                showArrow
+                closeDelay={8000}
+                contentProps={{
+                  bg: "content.secondary",
+                  color: "background.default",
+                  borderRadius: "md",
+                  p: 3,
+                  maxW: "300px",
+                  fontSize: "sm",
+                }}
+              >
+                <Icon
+                  as={MdInfoOutline}
+                  boxSize={6}
+                  color="interactive.control"
+                  cursor="pointer"
+                />
+              </Tooltip>
+            </HStack>
           </HStack>
           <Card.Title
             mt={2}
@@ -151,11 +187,11 @@ export function ModuleCard({
           <NextLink
             href={resolvedUrl}
             onClick={handleModuleLaunch}
-            target={isExternal ? "_blank" : undefined}
-            rel={isExternal ? "noopener noreferrer" : undefined}
+            target={"_blank"}
+            rel={"noopener noreferrer"}
           >
             <ButtonMedium>{t("launch")}</ButtonMedium>
-            <MdArrowForward />
+            <Icon as={MdOpenInNew} boxSize={5} />
           </NextLink>
         </Button>
       </Card.Footer>
diff --git a/app/src/components/navigation-bar.tsx b/app/src/components/navigation-bar.tsx
@@ -25,6 +25,7 @@ import {
   MdArrowDropUp,
   MdAspectRatio,
   MdLogout,
+  MdOpenInNew,
   MdOutlineMenu,
 } from "react-icons/md";
 import Cookies from "js-cookie";
@@ -245,17 +246,15 @@ export function NavigationBar({
             </Link>
             <Link
               rel="help noopener"
+              target="_blank"
               href="https://citycatalyst.openearth.org/learning-hub"
             >
-              <Heading
-                color="base.light"
-                size="md"
-                opacity={0.75}
-                whiteSpace="nowrap"
-                ml={6}
-              >
-                {t("learning-hub")}
-              </Heading>
+              <HStack ml={6} gap={2} color="base.light" opacity={0.75}>
+                <Heading size="md" whiteSpace="nowrap">
+                  {t("learning-hub")}
+                </Heading>
+                <Icon as={MdOpenInNew} boxSize={4} />
+              </HStack>
             </Link>
             <Separator
               orientation="vertical"
diff --git a/app/src/i18n/locales/de/dashboard.json b/app/src/i18n/locales/de/dashboard.json
@@ -298,5 +298,7 @@
   "status-beta": "Betaversion",
   "status-active": "Aktiv",
   "legend": "Legende",
-  "citycatalyst": "CityCatalyst"
+  "citycatalyst": "CityCatalyst",
+  "breadcrumb-hiap": "Actions & Plans",
+  "start-here": "Hier starten"
 }
diff --git a/app/src/i18n/locales/en/dashboard.json b/app/src/i18n/locales/en/dashboard.json
@@ -304,5 +304,7 @@
   "subcategory": "Sub-category",
   "inventory-versions-restore-failed": "Failed to restore version",
   "legend": "Legend",
-  "citycatalyst": "CityCatalyst"
+  "citycatalyst": "CityCatalyst",
+  "breadcrumb-hiap": "Actions & Plans",
+  "start-here": "Start here"
 }
diff --git a/app/src/i18n/locales/en/navigation.json b/app/src/i18n/locales/en/navigation.json
@@ -1,5 +1,5 @@
 {
-  "learning-hub": "Learn",
+  "learning-hub": "Learning hub",
   "admin": "Admin",
   "cities": "cities",
   "settings": "Settings",
diff --git a/app/src/i18n/locales/es/dashboard.json b/app/src/i18n/locales/es/dashboard.json
@@ -301,5 +301,7 @@
   "status-beta": "Beta",
   "status-active": "Activo",
   "legend": "Leyenda",
-  "citycatalyst": "CityCatalyst"
+  "citycatalyst": "CityCatalyst",
+  "breadcrumb-hiap": "Actions & Plans",
+  "start-here": "Empieza aquí"
 }
diff --git a/app/src/i18n/locales/fr/dashboard.json b/app/src/i18n/locales/fr/dashboard.json
@@ -298,5 +298,7 @@
   "status-beta": "Bêta",
   "status-active": "Actif",
   "legend": "Légende",
-  "citycatalyst": "CityCatalyst"
+  "citycatalyst": "CityCatalyst",
+  "breadcrumb-hiap": "Actions & Plans",
+  "start-here": "Commencer ici"
 }
diff --git a/app/src/i18n/locales/pt/dashboard.json b/app/src/i18n/locales/pt/dashboard.json
@@ -299,5 +299,7 @@
   "status-beta": "Beta",
   "status-active": "Ativo",
   "legend": "Legenda",
-  "citycatalyst": "CityCatalyst"
+  "citycatalyst": "CityCatalyst",
+  "breadcrumb-hiap": "Actions & Plans",
+  "start-here": "Comece aqui"
 }

Original file line number	Diff line number	Diff line change
`@@ -298,5 +298,7 @@`
`298`	`298`	`"status-beta": "Betaversion",`
`299`	`299`	`"status-active": "Aktiv",`
`300`	`300`	`"legend": "Legende",`
`301`		`- "citycatalyst": "CityCatalyst"`
	`301`	`+ "citycatalyst": "CityCatalyst",`
	`302`	`+ "breadcrumb-hiap": "Actions & Plans",`
	`303`	`+ "start-here": "Hier starten"`
`302`	`304`	`}`
Original file line number	Diff line number	Diff line change
`@@ -304,5 +304,7 @@`
`304`	`304`	`"subcategory": "Sub-category",`
`305`	`305`	`"inventory-versions-restore-failed": "Failed to restore version",`
`306`	`306`	`"legend": "Legend",`
`307`		`- "citycatalyst": "CityCatalyst"`
	`307`	`+ "citycatalyst": "CityCatalyst",`
	`308`	`+ "breadcrumb-hiap": "Actions & Plans",`
	`309`	`+ "start-here": "Start here"`
`308`	`310`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`	`1`	`{`
`2`		`- "learning-hub": "Learn",`
	`2`	`+ "learning-hub": "Learning hub",`
`3`	`3`	`"admin": "Admin",`
`4`	`4`	`"cities": "cities",`
`5`	`5`	`"settings": "Settings",`
Original file line number	Diff line number	Diff line change
`@@ -301,5 +301,7 @@`
`301`	`301`	`"status-beta": "Beta",`
`302`	`302`	`"status-active": "Activo",`
`303`	`303`	`"legend": "Leyenda",`
`304`		`- "citycatalyst": "CityCatalyst"`
	`304`	`+ "citycatalyst": "CityCatalyst",`
	`305`	`+ "breadcrumb-hiap": "Actions & Plans",`
	`306`	`+ "start-here": "Empieza aquí"`
`305`	`307`	`}`