FeaturePanel: Add NwrIcon

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'));
@@ -150,6 +151,7 @@ export const AddMemberForm = ({
               color="inherit"
               variant="text"
               size="small"
+              startIcon={<NwrIcon osmType="relation" color="inherit" />}
             >
               {t('editdialog.members.convert_button')}
             </Button>

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>
         )}

src/components/FeaturePanel/EditDialog/EditContent/FeatureEditSection/FeatureEditSection.tsx

@@ -19,6 +19,7 @@ const EditFeatureMapDynamic = dynamic(
 );
 import { Stack, Typography } from '@mui/material';
 import { useEditContext } from '../../EditContext';
+import { getOsmTypeFromShortId, NwrIcon } from '../../../NwrIcon';
 
 type Props = {
   shortId: string;
@@ -28,10 +29,6 @@ const EditFeatureHeading = (props: { shortId: string }) => {
   const { items } = useEditContext();
   const { tags } = useFeatureEditData();
 
-  if (items.length <= 1) {
-    return null;
-  }
-
   return (
     <Stack
       direction="row"
@@ -41,9 +38,7 @@ const EditFeatureHeading = (props: { shortId: string }) => {
       mb={2}
     >
       <Typography variant="h6">{tags.name || ' '}</Typography>
-      <Typography variant="caption" color="secondary">
-        {props.shortId}
-      </Typography>
+      <NwrIcon osmType={getOsmTypeFromShortId(props.shortId)} />
     </Stack>
   );
 };

src/components/FeaturePanel/EditDialog/EditContent/FeatureRow.tsx

@@ -1,6 +1,13 @@
-import { Divider, ListItem, ListItemText, Stack } from '@mui/material';
+import {
+  Divider,
+  ListItem,
+  ListItemText,
+  Stack,
+  Typography,
+} from '@mui/material';
 import ChevronRightIcon from '@mui/icons-material/ChevronRight';
 import React from 'react';
+import { getOsmTypeFromShortId, NwrIcon } from '../../NwrIcon';
 
 export const FeatureRow = ({ label, shortId, onClick }) => {
   return (
@@ -12,7 +19,12 @@ export const FeatureRow = ({ label, shortId, onClick }) => {
           direction="row"
           width="100%"
         >
-          <ListItemText>{label ?? shortId}</ListItemText>
+          <ListItemText>
+            <Stack direction="row" gap={2} alignItems="center">
+              <Typography>{label ?? shortId}</Typography>
+              <NwrIcon osmType={getOsmTypeFromShortId(shortId)} />
+            </Stack>
+          </ListItemText>
           <ChevronRightIcon />
         </Stack>
       </ListItem>

src/components/FeaturePanel/FeatureHeading.tsx

@@ -1,24 +1,22 @@
 import React from 'react';
 import styled from '@emotion/styled';
 import EditIcon from '@mui/icons-material/Edit';
-import { IconButton, useMediaQuery } from '@mui/material';
+import { Box, IconButton, Stack, useMediaQuery } from '@mui/material';
 import { useEditDialogContext } from './helpers/EditDialogContext';
 import { PoiDescription } from './helpers/PoiDescription';
 import { getLabel, getSecondaryLabel } from '../../helpers/featureLabel';
 import { useFeatureContext } from '../utils/FeatureContext';
 import { t } from '../../services/intl';
 import { isMobileDevice } from '../helpers';
 import { QuickActions } from './QuickActions/QuickActions';
+import { NwrIcon } from './NwrIcon';
+import { getShortId } from '../../services/helpers';
 
 const StyledEditButton = styled(IconButton)`
   visibility: hidden;
   position: relative;
   top: 3px;
 `;
-const NameWithEdit = styled.div`
-  display: flex;
-  gap: 8px;
-`;
 
 const EditNameButton = () => {
   const { openWithTag } = useEditDialogContext();
@@ -49,7 +47,6 @@ const HeadingContainer = styled.div`
 
   display: flex;
   justify-content: space-between;
-  align-items: flex-start;
   position: relative;
 
   &:hover ${StyledEditButton} {
@@ -95,16 +92,20 @@ const SecondaryHeading = styled.h2<{ $deleted: boolean }>`
 export const FeatureHeading = React.forwardRef<HTMLDivElement>((_, ref) => {
   // thw pwa needs space at the bottom
   const isStandalone = useMediaQuery('(display-mode: standalone)');
+  const { feature } = useFeatureContext();
 
   return (
     <Container ref={ref} isStandalone={isStandalone}>
       <PoiDescription />
       <HeadingContainer>
-        <NameWithEdit>
+        <Stack direction="row" gap={1}>
           <Headings />
           {/* <YellowedBadge /> */}
           <EditNameButton />
-        </NameWithEdit>
+        </Stack>
+        <Box mt={1.1}>
+          <NwrIcon osmType={feature.osmMeta.type} />
+        </Box>
       </HeadingContainer>
       <QuickActions />
     </Container>

src/components/FeaturePanel/NwrIcon.tsx

@@ -0,0 +1,49 @@
+import CircleIcon from '@mui/icons-material/Circle';
+import TimelineIcon from '@mui/icons-material/Timeline';
+import HubIcon from '@mui/icons-material/Hub';
+import { Tooltip } from '@mui/material';
+import React from 'react';
+import { t } from '../../services/intl';
+import { OsmType } from '../../services/types';
+import { fontSize } from '@mui/system';
+
+export const getOsmTypeFromShortId = (shortId: string) => {
+  const typeMap = {
+    n: 'node',
+    w: 'way',
+    r: 'relation',
+  };
+  return typeMap[shortId[0]];
+};
+
+type NwrIconProps = {
+  osmType: OsmType;
+  color?: string;
+  fontSize?: string;
+};
+
+type TypeMap = {
+  [key: string]: { name: OsmType; icon: React.ElementType; scale?: number };
+};
+
+const typeMap: TypeMap = {
+  node: { name: 'node', icon: CircleIcon, scale: 0.7 },
+  way: { name: 'way', icon: TimelineIcon },
+  relation: { name: 'relation', icon: HubIcon },
+};
+
+export const NwrIcon = ({ osmType, color }: NwrIconProps) => {
+  const type = typeMap[osmType];
+  const IconComponent = type.icon;
+  const { name, scale } = type;
+
+  return (
+    <Tooltip title={`OSM ${t(`osmtype_${name}`)}`}>
+      <IconComponent
+        fontSize={fontSize || 'inherit'}
+        color={color || 'secondary'}
+        sx={{ transform: `scale(${scale || 1})` }}
+      />
+    </Tooltip>
+  );
+};

src/locales/cs.js

@@ -259,5 +259,9 @@ export default {
   'sharedialog.copied': 'Zkopírováno!',
   'sharedialog.share': 'Sdílet',
 
+  osmtype_node: 'Uzel',
+  osmtype_way: 'Cesta',
+  osmtype_relation: 'Relace',
+
   weather: 'Počasí',
 };

src/locales/vocabulary.js

@@ -356,5 +356,9 @@ export default {
   'sharedialog.copied': 'Copied!',
   'sharedialog.share': 'Share',
 
+  osmtype_node: 'Node',
+  osmtype_way: 'Way',
+  osmtype_relation: 'Relation',
+
   weather: 'Weather',
 };