Release 3.24.0

docs/changelog.md

@@ -1,5 +1,16 @@
 # Changelog
 
+## 3.24.0 (2024-11-20)
+
+**✨ Improvements**
+
+- Keep user search results (scroll position and map fitbounds) when returning from a detail page (#1282)
+- Refacto details top icons (#1304)
+
+**🔧 Maintenance**
+
+- Bump next from 13.2.4 to 14.2.15 (#1284)
+
 ## 3.23.3 (2024-11-19)
 
 **🐛 Fixes**

frontend/next.config.js

@@ -69,6 +69,7 @@ const nextConfig = {
   },
   experimental: {
     instrumentationHook: true,
+    scrollRestoration: true,
   },
 };
 

frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "geotrek-rando-frontend",
-  "version": "3.23.3",
+  "version": "3.24.0",
   "private": true,
   "scripts": {
     "debug": "NODE_OPTIONS='--inspect' next ./src",
@@ -59,7 +59,7 @@
     "leaflet-rastercoords": "^1.0.5",
     "leaflet.locatecontrol": "^0.81.1",
     "leaflet.offline": "^3.1.0",
-    "next": "13.2.4",
+    "next": "^14.2.15",
     "next-compose-plugins": "^2.2.1",
     "next-leaflet-cluster": "^1.0.0",
     "next-pwa": "^5.6.0",

frontend/src/components/Header/Header.tsx

@@ -3,7 +3,6 @@
 import { routes } from 'services/routes';
 
 import { Link } from 'components/Link';
-import { Display } from 'hooks/useHideOnScrollDown';
 
 import InlineMenu from 'components/InlineMenu';
 import { GoToSearchButton } from 'components/GoToSearchButton';
@@ -15,11 +14,6 @@
 export const Header: React.FC = () => {
   const menuNode = useRef<HTMLDivElement | null>(null);
   const { config, menuItems, isDesktopMenu, intl } = useHeader(menuNode);
-  /**
-   * Disabled for now to handle the map on the search page
-   */
-  // const headerState = useHideOnScrollDown(sizes.desktopHeader);
-  const headerState: Display = 'DISPLAYED';
 
   const headerTop = config.headerTopHtml[intl.locale] ?? config.headerTopHtml.default;
   const headerBottom = config.headerBottomHtml[intl.locale] ?? config.headerBottomHtml.default;
@@ -31,18 +25,11 @@
           <HtmlParser template={headerTop} />
         </div>
       )}
-      <header
-        className={cn(
-          'sticky z-header bg-primary1',
-          headerState === 'DISPLAYED' ? 'top-0' : '-top-desktopHeader',
-        )}
-        role="banner"
-        id="header"
-      >
+      <header className="sticky z-header bg-primary1 top-0" role="banner" id="header">
         <div className="h-11 desktop:h-desktopHeader flex justify-between  items-center sticky z-header px-3 shadow-sm shrink-0 transition-all duration-300 delay-100">
           <Link href={routes.HOME} className="flex items-center">
             <div className="shrink-0" id="header_logo">
               <img
                 id="header_logoImg"
                 className="h-9 w-auto desktop:h-18 mr-3"
                 alt=""
@@ -75,7 +62,7 @@
         <BurgerMenu
           className={cn(isDesktopMenu && 'hidden')}
           config={config.menu}
-          displayState={headerState}
+          displayState="DISPLAYED"
           menuItems={menuItems}
         />
       </header>

frontend/src/components/Icons/AlertTriangle/index.tsx

@@ -3,9 +3,8 @@ import { GenericIconProps } from '../types';
 
 export const AlertTriangle: React.FC<GenericIconProps> = ({
   color = 'currentColor',
-  opacity,
-  className,
   size,
+  ...props
 }) => {
   return (
     <svg
@@ -14,8 +13,7 @@ export const AlertTriangle: React.FC<GenericIconProps> = ({
       viewBox="0 0 49 49"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      className={className}
-      opacity={opacity}
+      {...props}
     >
       <path
         fillRule="evenodd"

frontend/src/components/Icons/Printer/index.tsx

@@ -3,9 +3,8 @@ import { GenericIconProps } from '../types';
 
 export const Printer: React.FC<GenericIconProps> = ({
   color = 'currentColor',
-  opacity,
-  className,
   size,
+  ...props
 }) => {
   return (
     <svg
@@ -14,8 +13,7 @@ export const Printer: React.FC<GenericIconProps> = ({
       viewBox="0 0 30 30"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      className={className}
-      opacity={opacity}
+      {...props}
     >
       <path
         d="M7.5 11.25V2.5h15v8.75M7.5 22.5H5A2.5 2.5 0 012.5 20v-6.25a2.5 2.5 0 012.5-2.5h20a2.5 2.5 0 012.5 2.5V20a2.5 2.5 0 01-2.5 2.5h-2.5"

frontend/src/components/Icons/ThreeDMap/index.tsx

@@ -3,9 +3,8 @@ import { GenericIconProps } from '../types';
 
 export const ThreeDMap: React.FC<GenericIconProps> = ({
   color = 'currentColor',
-  opacity,
-  className,
   size,
+  ...props
 }) => {
   return (
     <svg
@@ -14,8 +13,7 @@ export const ThreeDMap: React.FC<GenericIconProps> = ({
       viewBox="0 0 31 31"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      className={className}
-      opacity={opacity}
+      {...props}
     >
       <path
         fillRule="evenodd"

frontend/src/components/Map/SearchMap/BoundsHandler.tsx

@@ -0,0 +1,21 @@
+import { LatLngBounds } from 'leaflet';
+import { useEffect } from 'react';
+import { useMap } from 'react-leaflet';
+
+interface Props {
+  bounds: LatLngBounds | null;
+}
+
+const BoundsHandler: React.FC<Props> = ({ bounds }) => {
+  const map = useMap();
+
+  useEffect(() => {
+    if (bounds) {
+      map.fitBounds(bounds);
+    }
+  }, [bounds, map]);
+
+  return null;
+};
+
+export default BoundsHandler;

frontend/src/components/Map/SearchMap/MapContainer.tsx

@@ -1,6 +1,5 @@
 import { getMapConfig } from 'components/Map/config';
 import { MapContainer as LeafMapContainer } from 'react-leaflet';
-import React, { memo } from 'react';
 import { Map } from 'leaflet';
 
 interface Props {
@@ -28,4 +27,4 @@ const MapContainer: React.FC<Props> = ({ children, whenCreated, hasZoomControl =
   );
 };
 
-export default memo(MapContainer, () => true);
+export default MapContainer;

frontend/src/components/Map/SearchMap/index.tsx

@@ -13,6 +13,8 @@ import { ResetView } from 'components/Map/components/ResetView';
 import TileLayerManager from 'components/Map/components/TileLayerManager';
 import FullscreenControl from 'components/Map/components/FullScreenControl';
 import LocateControl from 'components/Map/components/LocateControl';
+import { useListAndMapContext } from 'modules/map/ListAndMapContext';
+import BoundsHandler from './BoundsHandler';
 
 export type PropsType = {
   segments?: { x: number; y: number }[];
@@ -35,6 +37,7 @@ const SearchMap: React.FC<PropsType> = props => {
   };
 
   const { setMapInstance } = useTileLayer();
+  const { searchBbox, isNavigatedByBrowser } = useListAndMapContext();
 
   return (
     <MapContainer whenCreated={setMapInstance} hasZoomControl={props.hasZoomControl}>
@@ -44,6 +47,8 @@ const SearchMap: React.FC<PropsType> = props => {
       <FilterButton openFilterMenu={props.openFilterMenu} />
       {props.hasZoomControl === true && <FullscreenControl />}
       <ResetView />
+      {/* Must be below ResetView */}
+      {isNavigatedByBrowser && <BoundsHandler bounds={searchBbox} />}
       <ScaleControl />
       <LocateControl />
       <SearchMapChildrens {...props} />

frontend/src/components/ToolTip/ToolTip.tsx

@@ -29,8 +29,8 @@ const ToolTipGT: FC<Props> = ({
         className={cn(
           'tooltipSpan',
           'relative absolute left-1/2 -translate-x-1/2 p-1.5 text-center rounded-md z-1',
-          'w-0 invisible',
-          'group-hover:w-max group-hover:visible',
+          'w-0 hidden',
+          'group-hover:w-max group-hover:inline',
           "after:content-[''] after:block after:absolute after:left-1/2 after:-ml-1 after:border-4 after:border-transparent",
           invertPosition
             ? 'top-full after:bottom-full after:border-b-primary1'

frontend/src/components/pages/details/Details.tsx

@@ -49,6 +49,7 @@
 import { DetailsViewPoints } from './components/DetailsViewPoints';
 import { DetailsFiles } from './components/DetailsFiles';
 import { theme } from '../../../../tailwind.config';
+import { DetailsBackButton } from './components/DetailsPreview/DetailsBackButton';
 
 interface Props {
   slug: string | string[] | undefined;
@@ -706,7 +707,7 @@
         )}
       </>
     ),
     [
       details,
       displayAltimetricProfile,
       displayMobileMap,
@@ -736,15 +737,18 @@
   return (
     <div
       id="details_headerMobile"
-      className={`py-3 px-4
-      text-P2 font-bold text-primary1
-      shadow-md bg-white
-      ${displayState === 'DISPLAYED' ? 'top-mobileHeader sticky' : '-top-mobileHeader'}
-      desktop:hidden z-headerDetails truncate
-      transition-all duration-500
-      `}
+      className={cn(
+        'flex gap-3 items-center py-3 px-4',
+        'text-P2 font-bold text-primary1',
+        'shadow-md bg-white',
+        '-top-4 right-0 left-0 z-headerDetails fixed',
+        displayState === 'DISPLAYED' && 'top-0 translate-y-mobileHeader',
+        'desktop:hidden',
+        'transition-transform duration-500 will-change-transform',
+      )}
     >
-      {name}
+      <DetailsBackButton className="border-r border-solid pr-4" />
+      <span className="truncate">{name}</span>
     </div>
   );
 };

frontend/src/components/pages/details/components/DetailsButton/DetailsButton.tsx

@@ -3,12 +3,12 @@ import React from 'react';
 interface DetailsButtonProps {
   url?: string;
   onClick?: (event: React.MouseEvent) => void;
-  children: JSX.Element;
+  children: React.ReactNode;
 }
 
 export const DetailsButton: React.FC<DetailsButtonProps> = ({ url, onClick, children }) => {
   const className =
-    'h-12 w-12 grid place-items-center rounded-full shadow-lg text-primary1 bg-white cursor-pointer hover:text-primary1-light transition-all';
+    'size-12 grid place-items-center rounded-full shadow-lg text-primary1 bg-white hover:text-primary1-light transition';
 
   if (url === undefined) {
     return (

frontend/src/components/pages/details/components/DetailsButtonDropdown/DetailsButtonDropdown.tsx

@@ -6,7 +6,7 @@ interface DetailsButtonDropdownProps {
     label: string;
     size: number;
   }[];
-  children: JSX.Element;
+  children: React.ReactNode;
 }
 
 export const DetailsButtonDropdown: React.FC<DetailsButtonDropdownProps> = ({