Merge branch 'master' into patch-1

zbycz · Jan 28, 2025 · 656f525 · 656f525
2 parents ea0e284 + fe8ffe4
commit 656f525
Show file tree

Hide file tree

Showing 34 changed files with 493 additions and 192 deletions.
diff --git a/sentry.client.config.ts b/sentry.client.config.ts
@@ -4,9 +4,12 @@
 
 import * as Sentry from '@sentry/nextjs';
 
+const enabled = process.env.NODE_ENV === 'production';
 Sentry.init({
-  enabled: process.env.NODE_ENV === 'production',
-  dsn: 'https://79cd9dbaeb0f4d0f868e2d4574f8b7e2@o332956.ingest.us.sentry.io/1858591',
+  enabled,
+  dsn: enabled
+    ? 'https://79cd9dbaeb0f4d0f868e2d4574f8b7e2@o332956.ingest.us.sentry.io/1858591'
+    : undefined,
   release: process.env.sentryRelease,
 
   // Adjust this value in production, or use tracesSampler for greater control

diff --git a/sentry.edge.config.ts b/sentry.edge.config.ts
@@ -5,9 +5,13 @@
 
 import * as Sentry from '@sentry/nextjs';
 
+const enabled = process.env.NODE_ENV === 'production';
+
 Sentry.init({
-  enabled: process.env.NODE_ENV === 'production',
-  dsn: 'https://79cd9dbaeb0f4d0f868e2d4574f8b7e2@o332956.ingest.us.sentry.io/1858591',
+  enabled,
+  dsn: enabled
+    ? 'https://79cd9dbaeb0f4d0f868e2d4574f8b7e2@o332956.ingest.us.sentry.io/1858591'
+    : undefined,
   release: process.env.sentryRelease,
 
   // Adjust this value in production, or use tracesSampler for greater control

diff --git a/sentry.server.config.ts b/sentry.server.config.ts
@@ -4,9 +4,12 @@
 
 import * as Sentry from '@sentry/nextjs';
 
+const enabled = process.env.NODE_ENV === 'production';
 Sentry.init({
-  enabled: process.env.NODE_ENV === 'production',
-  dsn: 'https://79cd9dbaeb0f4d0f868e2d4574f8b7e2@o332956.ingest.us.sentry.io/1858591',
+  enabled,
+  dsn: enabled
+    ? 'https://79cd9dbaeb0f4d0f868e2d4574f8b7e2@o332956.ingest.us.sentry.io/1858591'
+    : undefined,
   release: process.env.sentryRelease,
 
   // Adjust this value in production, or use tracesSampler for greater control

diff --git a/src/components/ClimbingAreasPanel/ClimbingAreasPanel.tsx b/src/components/ClimbingAreasPanel/ClimbingAreasPanel.tsx
@@ -21,6 +21,7 @@ import { MobilePageDrawer } from '../utils/MobilePageDrawer';
 import { ClimbingArea } from '../../services/climbing-areas/getClimbingAreas';
 import Link from 'next/link';
 import { TooltipButton } from '../utils/TooltipButton';
+import { ClimbingGuideInfo } from '../FeaturePanel/Climbing/ClimbingGuideInfo';
 
 type ClimbingAreasPanelProps = {
   areas: ClimbingArea[];
@@ -35,14 +36,10 @@ export const ClimbingAreasPanel = ({ areas }: ClimbingAreasPanelProps) => {
     <MobilePageDrawer className="climbing-areas-drawer">
       <PanelContent>
         <PanelScrollbars>
-          <ClosePanelButton right onClick={handleClose} />
+          <ClimbingGuideInfo />
           <PanelSidePadding>
+            <ClosePanelButton right onClick={handleClose} />
             <h1>{t('climbingareas.title')}</h1>
-
-            <Typography variant="body2">
-              {t('climbing.guideinfo.title')}{' '}
-              <TooltipButton tooltip={t('climbing.guideinfo.description')} />
-            </Typography>
           </PanelSidePadding>
 
           <TableContainer component={Paper}>

diff --git a/src/components/FeaturePanel/Climbing/ClimbingGuideInfo.tsx b/src/components/FeaturePanel/Climbing/ClimbingGuideInfo.tsx
@@ -1,32 +1,66 @@
 import React from 'react';
-import { Typography } from '@mui/material';
+import {
+  Accordion,
+  AccordionDetails,
+  AccordionSummary,
+  Button,
+  Stack,
+  Typography,
+  useTheme,
+} from '@mui/material';
 import { useFeatureContext } from '../../utils/FeatureContext';
 import { t } from '../../../services/intl';
-import { TooltipButton } from '../../utils/TooltipButton';
-import styled from '@emotion/styled';
-
-const Container = styled.div`
-  font-size: 14px;
-  margin-bottom: 12px;
-`;
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
+import { LogoOpenClimbing } from '../../../assets/LogoOpenClimbing';
 
 export const ClimbingGuideInfo = () => {
-  const { feature } = useFeatureContext();
+  const { persistShowHomepage } = useFeatureContext();
+  const theme = useTheme();
 
-  if (
-    !['crag', 'area', 'route', 'route_bottom', 'route_top'].includes(
-      feature.tags.climbing,
-    )
-  ) {
-    return null;
-  }
+  const handleClick = () => {
+    persistShowHomepage();
+  };
 
   return (
-    <Container>
-      <Typography variant="body2">
-        {t('climbing.guideinfo.title')}{' '}
-        <TooltipButton tooltip={t('climbing.guideinfo.description')} />
-      </Typography>
-    </Container>
+    <Accordion
+      disableGutters
+      elevation={0}
+      square
+      sx={{
+        borderBottom: `solid 1px ${theme.palette.divider}`,
+        marginBottom: 2,
+      }}
+    >
+      <AccordionSummary expandIcon={<ExpandMoreIcon color="secondary" />}>
+        <Stack direction="row" alignItems="center" gap={1}>
+          <LogoOpenClimbing width={24} />
+          <Typography color="secondary" variant="caption">
+            <strong>openclimbing.org:</strong> {t('climbing.guideinfo.title')}
+          </Typography>
+        </Stack>
+      </AccordionSummary>
+      <AccordionDetails>
+        <Typography variant="body2">
+          {t('climbing.guideinfo.description')}
+        </Typography>
+        <Stack
+          direction="row"
+          justifyContent="flex-end"
+          alignItems="center"
+          mt={1}
+        >
+          <Button
+            variant="text"
+            color="primary"
+            endIcon={<ArrowForwardIosIcon />}
+            sx={{ alignSelf: 'flex-end' }}
+            onClick={handleClick}
+          >
+            {t('climbing.guideinfo.button')}
+          </Button>
+        </Stack>
+      </AccordionDetails>
+    </Accordion>
   );
 };
diff --git a/src/components/FeaturePanel/Climbing/FeaturePanelClimbingGuideInfo.tsx b/src/components/FeaturePanel/Climbing/FeaturePanelClimbingGuideInfo.tsx
@@ -0,0 +1,15 @@
+import { ClimbingGuideInfo } from './ClimbingGuideInfo';
+import { useFeatureContext } from '../../utils/FeatureContext';
+import { climbingTagValues } from './utils/climbingTagValues';
+
+export const FeaturePanelClimbingGuideInfo = () => {
+  const { feature } = useFeatureContext();
+
+  const isClimbing = climbingTagValues.includes(feature.tags.climbing);
+
+  if (!isClimbing) {
+    return null;
+  }
+
+  return <ClimbingGuideInfo />;
+};
diff --git a/src/components/FeaturePanel/Climbing/utils/climbingTagValues.ts b/src/components/FeaturePanel/Climbing/utils/climbingTagValues.ts
@@ -0,0 +1,7 @@
+export const climbingTagValues = [
+  'crag',
+  'area',
+  'route',
+  'route_bottom',
+  'route_top',
+];
diff --git a/src/components/FeaturePanel/Coordinates.tsx b/src/components/FeaturePanel/Coordinates.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { useFeatureContext } from '../utils/FeatureContext';
 import { positionToDeg } from '../../utils';
 import { PositionBoth } from '../../services/types';
+import { Typography } from '@mui/material';
 
 type Props = { coords: PositionBoth };
 
@@ -21,7 +22,11 @@ const Coordinates = () => {
   const { feature } = useFeatureContext();
   const { center, roundedCenter = undefined } = feature;
   const coords = roundedCenter ?? center;
-  return coords ? <Coords coords={coords} /> : null;
+  return coords ? (
+    <Typography variant="caption" color="secondary">
+      <Coords coords={coords} />
+    </Typography>
+  ) : null;
 };
 
 export default Coordinates;
diff --git a/src/components/FeaturePanel/CragsInArea.tsx b/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} />

diff --git a/src/components/FeaturePanel/EditDialog/EditContent/AddMemberForm.tsx b/src/components/FeaturePanel/EditDialog/EditContent/AddMemberForm.tsx
@@ -9,6 +9,7 @@ import { Alert, Button, TextField } from '@mui/material';
 import { LonLat, OsmId } from '../../../../services/types';
 import { t } from '../../../../services/intl';
 import AddIcon from '@mui/icons-material/Add';
+import { NwrIcon } from '../../NwrIcon';
 
 const hasAtLeastOneNode = (members: Members) => {
   return members?.some((member) => member.shortId.startsWith('n'));
@@ -41,7 +42,28 @@ const getNewNodeLocation = async (items: EditDataItem[], members: Members) => {
   return lonLat.map((x) => x + 0.0001);
 };
 
-export const AddMemberForm = ({ newLonLat }: { newLonLat?: LonLat }) => {
+const defaultRouteBottomTags = {
+  climbing: 'route_bottom',
+  sport: 'climbing',
+};
+
+export const AddMemberForm = ({
+  newLonLat,
+  selectedPresetKey,
+}: {
+  newLonLat?: LonLat;
+  selectedPresetKey?: string;
+}) => {
+  const getDefaultTags = useCallback(
+    () => ({
+      ...(selectedPresetKey === 'climbing/route_bottom'
+        ? defaultRouteBottomTags
+        : {}),
+    }),
+    [selectedPresetKey],
+  );
+  const defaultTags = getDefaultTags();
+
   const { addFeature, items, setCurrent, current } = useEditContext();
   const { members, setMembers, tags, setShortId } = useFeatureEditData();
   const [showInput, setShowInput] = React.useState(false);
@@ -51,7 +73,7 @@ export const AddMemberForm = ({ newLonLat }: { newLonLat?: LonLat }) => {
   const handleAddMember = useCallback(async () => {
     const lastNodeLocation =
       newLonLat ?? (await getNewNodeLocation(items, members));
-    const newNode = getNewNode(lastNodeLocation, label);
+    const newNode = getNewNode(lastNodeLocation, label, defaultTags);
     const newShortId = getShortId(newNode.osmMeta);
     addFeature(newNode);
     setMembers((prev) => [
@@ -61,7 +83,16 @@ export const AddMemberForm = ({ newLonLat }: { newLonLat?: LonLat }) => {
     setShowInput(false);
     setLabel('');
     setCurrent(newShortId);
-  }, [addFeature, items, label, members, newLonLat, setCurrent, setMembers]);
+  }, [
+    addFeature,
+    defaultTags,
+    items,
+    label,
+    members,
+    newLonLat,
+    setCurrent,
+    setMembers,
+  ]);
 
   React.useEffect(() => {
     const downHandler = (e) => {
@@ -120,6 +151,7 @@ export const AddMemberForm = ({ newLonLat }: { newLonLat?: LonLat }) => {
               color="inherit"
               variant="text"
               size="small"
+              startIcon={<NwrIcon osmType="relation" color="inherit" />}
             >
               {t('editdialog.members.convert_button')}
             </Button>

diff --git a/src/components/FeaturePanel/EditDialog/EditContent/EditContent.tsx b/src/components/FeaturePanel/EditDialog/EditContent/EditContent.tsx
@@ -18,6 +18,7 @@ import { useEditContext } from '../EditContext';
 import { getShortId } from '../../../../services/helpers';
 import { fetchSchemaTranslations } from '../../../../services/tagging/translations';
 import { TestApiWarning } from '../../helpers/TestApiWarning';
+import { getOsmTypeFromShortId, NwrIcon } from '../../NwrIcon';
 
 export const EditContent = () => {
   const { items, addFeature, current, setCurrent } = useEditContext();
@@ -51,7 +52,22 @@ export const EditContent = () => {
             }}
           >
             {items.map(({ shortId, tags }, idx) => (
-              <Tab key={idx} label={tags.name ?? shortId} value={shortId} />
+              <Tab
+                key={idx}
+                label={
+                  <Stack
+                    direction="row"
+                    gap={1}
+                    alignItems="center"
+                    justifyContent="space-between"
+                    width="100%"
+                  >
+                    {tags.name ?? shortId}{' '}
+                    <NwrIcon osmType={getOsmTypeFromShortId(shortId)} />
+                  </Stack>
+                }
+                value={shortId}
+              />
             ))}
           </Tabs>
         )}