diff --git a/src/components/FeaturePanel/EditDialog/EditContent/EditContent.tsx b/src/components/FeaturePanel/EditDialog/EditContent/EditContent.tsx
index 477d372a..c2641176 100644
--- a/src/components/FeaturePanel/EditDialog/EditContent/EditContent.tsx
+++ b/src/components/FeaturePanel/EditDialog/EditContent/EditContent.tsx
@@ -3,35 +3,70 @@ import {
Stack,
Tab,
Tabs,
+ Typography,
useMediaQuery,
useTheme,
} from '@mui/material';
-import React from 'react';
+import React, { useState } from 'react';
import { EditDialogActions } from './EditDialogActions';
import { CommentField } from './CommentField';
import { OsmUserLogged } from './OsmUserLogged';
import { ContributionInfoBox } from './ContributionInfoBox';
import { OsmUserLoggedOut } from './OsmUserLoggedOut';
import { FeatureEditSection } from './FeatureEditSection/FeatureEditSection';
-import { useEditDialogFeature } from '../utils';
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';
+import { useFeatureContext } from '../../../utils/FeatureContext';
+import { useMatchTags, useOptions } from './FeatureEditSection/PresetSelect';
export const EditContent = () => {
- const { items, addFeature, current, setCurrent } = useEditContext();
+ const { items, current, setCurrent } = useEditContext();
const theme = useTheme();
+ const options = useOptions();
+
+ const isSmallScreen = useMediaQuery(theme.breakpoints.down('sm'));
+
+ const RenderTabLabel = ({ item: { shortId, tags } }) => {
+ const [preset, setPreset] = useState('');
+ const { feature } = useFeatureContext();
+
+ useMatchTags(feature, tags, setPreset);
+ const presetName = options.find((o) => o.presetKey === preset)?.name;
+
+ return (
+
+
+
+ {tags.name ?? shortId}
+
+
+
+
+ {presetName}
+
+
+ );
+ };
- const isSmallScreen = useMediaQuery(theme.breakpoints.down('md'));
return (
<>
{items.length > 1 && (
{
alignItems: isSmallScreen ? undefined : 'baseline',
textAlign: isSmallScreen ? undefined : 'left',
},
+ ...(isSmallScreen
+ ? {}
+ : {
+ resize: 'horizontal',
+ minWidth: 120,
+ maxWidth: '50%',
+ }),
}}
>
- {items.map(({ shortId, tags }, idx) => (
+ {items.map((item, idx) => (
- {tags.name ?? shortId}{' '}
-
-
- }
- value={shortId}
+ label={}
+ value={item.shortId}
+ sx={{
+ maxWidth: '100%',
+ ...(isSmallScreen
+ ? {}
+ : { borderBottom: `solid 1px ${theme.palette.divider}` }),
+ }}
/>
))}
)}
-
+