FeaturePanel: Add description on the top in climbing entities (#901)

src/components/FeaturePanel/Climbing/FeaturePanelClimbingGuideInfo.tsx

@@ -1,14 +1,13 @@
 import { ClimbingGuideInfo } from './ClimbingGuideInfo';
 import { useFeatureContext } from '../../utils/FeatureContext';
+import { climbingTagValues } from './utils/climbingTagValues';
 
 export const FeaturePanelClimbingGuideInfo = () => {
   const { feature } = useFeatureContext();
 
-  if (
-    !['crag', 'area', 'route', 'route_bottom', 'route_top'].includes(
-      feature.tags.climbing,
-    )
-  ) {
+  const isClimbing = climbingTagValues.includes(feature.tags.climbing);
+
+  if (!isClimbing) {
     return null;
   }
 

src/components/FeaturePanel/Climbing/utils/climbingTagValues.ts

@@ -0,0 +1,7 @@
+export const climbingTagValues = [
+  'crag',
+  'area',
+  'route',
+  'route_bottom',
+  'route_top',
+];

src/components/FeaturePanel/CragsInArea.tsx

@@ -1,5 +1,5 @@
 import styled from '@emotion/styled';
-import { Box } from '@mui/material';
+import { Box, Typography } from '@mui/material';
 import React from 'react';
 import Router from 'next/router';
 import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
@@ -12,7 +12,7 @@ import { getLabel } from '../../helpers/featureLabel';
 import { Slider, Wrapper } from './FeatureImages/FeatureImages';
 import { Image } from './FeatureImages/Image/Image';
 import { getInstantImage } from '../../services/images/getImageDefs';
-import { intl } from '../../services/intl';
+import { intl, t } from '../../services/intl';
 import Link from 'next/link';
 import { naturalSort } from './Climbing/utils/array';
 
@@ -49,6 +49,7 @@ const CragList = styled.div`
   display: flex;
   flex-direction: column;
   gap: 12px;
+  margin-top: 12px;
 `;
 
 const StyledLink = styled(Link)`
@@ -157,7 +158,13 @@ export const CragsInArea = () => {
   }
 
   return (
-    <Box mb={2}>
+    <Box mt={2} mb={2}>
+      <Typography variant="subtitle2" color="secondary">
+        {t('featurepanel.climbing_sectors')}{' '}
+        {feature.tags.name
+          ? `${t('featurepanel.climbing_sectors_in')} ${feature.tags.name}`
+          : ''}
+      </Typography>
       <CragList>
         {feature.memberFeatures.map((item) => (
           <CragItem key={getOsmappLink(item)} feature={item} />

src/components/FeaturePanel/FeaturePanel.tsx

@@ -22,13 +22,14 @@ import { RouteDistributionInPanel } from './Climbing/RouteDistribution';
 import { FeaturePanelFooter } from './FeaturePanelFooter';
 import { ClimbingRouteGrade } from './ClimbingRouteGrade';
 import { Box, Stack } from '@mui/material';
-import { ClimbingGuideInfo } from './Climbing/ClimbingGuideInfo';
 import { ClimbingStructuredData } from './Climbing/ClimbingStructuredData';
 import { isPublictransportRoute } from '../../utils';
 import { Sockets } from './Sockets/Sockets';
 import { ClimbingTypeBadge } from './Climbing/ClimbingTypeBadge';
 import { TestApiWarning } from './helpers/TestApiWarning';
 import { FeaturePanelClimbingGuideInfo } from './Climbing/FeaturePanelClimbingGuideInfo';
+import { FeaturedTag } from './FeaturedTag';
+import { climbingTagValues } from './Climbing/utils/climbingTagValues';
 
 const Flex = styled.div`
   flex: 1;
@@ -54,6 +55,21 @@ export const FeaturePanel = ({ headingRef }: FeaturePanelProps) => {
   // Conditional components should have if(feature.tags.xxx) check at the beginning
   // All components should have margin-bottoms to accommodate missing parts
   const isClimbingCrag = tags.climbing === 'crag';
+  const isClimbing = climbingTagValues.includes(feature.tags.climbing);
+
+  const ClimbingDescription = () => {
+    if (!isClimbing || !feature.tags.description) {
+      return null;
+    }
+
+    return (
+      <FeaturedTag
+        key={'description'}
+        k={'description'}
+        v={feature.tags.description}
+      />
+    );
+  };
 
   const PropertiesComponent = () => (
     <Properties showTags={showTagsTable} key={getReactKey(feature)} />
@@ -73,6 +89,7 @@ export const FeaturePanel = ({ headingRef }: FeaturePanelProps) => {
 
           <OsmError />
           <TestApiWarning />
+          <ClimbingDescription />
         </PanelSidePadding>
 
         <Flex>

src/components/FeaturePanel/FeaturedTags.tsx

@@ -1,19 +1,24 @@
 import React from 'react';
 import styled from '@emotion/styled';
 import { FeaturedTag } from './FeaturedTag';
+import { climbingTagValues } from './Climbing/utils/climbingTagValues';
+import { useFeatureContext } from '../utils/FeatureContext';
 
 const Spacer = styled.div`
   padding-bottom: 10px;
 `;
 
 export const FeaturedTags = ({ featuredTags }) => {
+  const { feature } = useFeatureContext();
   if (!featuredTags.length) return null;
-
+  const isClimbing = climbingTagValues.includes(feature.tags.climbing);
   return (
     <>
-      {featuredTags.map(([k, v]) => (
-        <FeaturedTag key={k} k={k} v={v} />
-      ))}
+      {featuredTags.map(([k, v]) => {
+        if (isClimbing && k === 'description') return null;
+
+        return <FeaturedTag key={k} k={k} v={v} />;
+      })}
       <Spacer />
     </>
   );

src/locales/cs.js

@@ -138,6 +138,8 @@ export default {
   'featurepanel.inline_edit_title': 'Upravit',
   'featurepanel.objects_around': 'Objekty v okolí',
   'featurepanel.climbing_restriction': 'Lezecké omezení',
+  'featurepanel.climbing_sectors': 'Lezecké sektory',
+  'featurepanel.climbing_sectors_in': 'v oblasti',
 
   'opening_hours.open': 'Otevřeno: __todayTime__',
   'opening_hours.now_closed_but_today': 'Nyní zavřeno, dnes: __todayTime__',

src/locales/vocabulary.js

@@ -176,6 +176,8 @@ export default {
   'featurepanel.more_in_openplaceguide': 'More information on __instanceName__',
   'featurepanel.climbing_restriction': 'Climbing restriction',
   'featurepanel.login': 'Login',
+  'featurepanel.climbing_sectors': 'Climbing sectors',
+  'featurepanel.climbing_sectors_in': 'in',
 
   'opening_hours.all_day': '24 hours',
   'opening_hours.open': 'Open: __todayTime__',