From f19e5a2d26652d5344e4530e5fc47448c4ddaf1c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pavel=20Zbytovsk=C3=BD?= <zbytovsky@gmail.com>
Date: Sat, 8 Feb 2025 21:25:03 +0400
Subject: [PATCH] FeaturePanel: add description for NwrIcon (#948)

---
 src/components/FeaturePanel/NwrIcon.tsx | 61 ++++++++++++++++++-------
 src/locales/cs.js                       |  9 ++--
 src/locales/vocabulary.js               |  9 ++--
 3 files changed, 57 insertions(+), 22 deletions(-)

diff --git a/src/components/FeaturePanel/NwrIcon.tsx b/src/components/FeaturePanel/NwrIcon.tsx
index 26c2604c7..26850fa7d 100644
--- a/src/components/FeaturePanel/NwrIcon.tsx
+++ b/src/components/FeaturePanel/NwrIcon.tsx
@@ -11,32 +11,61 @@ import { getApiId } from '../../services/helpers';
 export const getOsmTypeFromShortId = (shortId: string): OsmType =>
   getApiId(shortId).type;
 
-type NwrIconProps = {
-  osmType: OsmType;
-  color?: string;
-  fontSize?: string;
-};
-
 type TypeMap = {
-  [key: string]: { name: OsmType; icon: React.ElementType; scale?: number };
+  [key: string]: {
+    Icon: React.ElementType;
+    scale?: number;
+    label: string;
+    description: string;
+  };
 };
 
 const typeMap: TypeMap = {
-  node: { name: 'node', icon: CircleIcon, scale: 0.7 },
-  way: { name: 'way', icon: TimelineIcon },
-  relation: { name: 'relation', icon: HubIcon },
+  node: {
+    Icon: CircleIcon,
+    scale: 0.7,
+    label: t('osmtype.node'),
+    description: t('osmtype.node.description'),
+  },
+  way: {
+    Icon: TimelineIcon,
+    label: t('osmtype.way'),
+    description: t('osmtype.way.description'),
+  },
+  relation: {
+    Icon: HubIcon,
+    label: t('osmtype.relation'),
+    description: t('osmtype.relation.description'),
+  },
+};
+
+type Props = {
+  osmType: OsmType;
+  color?: string;
+  fontSize?: string;
 };
 
-export const NwrIcon = ({ osmType, color, fontSize }: NwrIconProps) => {
+export const NwrIcon = ({ osmType, color, fontSize }: Props) => {
   const type = typeMap[osmType];
-  if (!type) return null;
+  if (!type) {
+    return null;
+  }
 
-  const IconComponent = type.icon;
-  const { name, scale } = type;
+  const { Icon, scale, label, description } = type;
+  const english = label.toLowerCase() === osmType ? '' : ` (${osmType})`;
 
   return (
-    <Tooltip title={`OSM ${t(`osmtype_${name}`)}`}>
-      <IconComponent
+    <Tooltip
+      title={
+        <>
+          OSM {label}
+          {english}
+          <br />
+          {description}
+        </>
+      }
+    >
+      <Icon
         fontSize={fontSize || 'inherit'}
         color={color || 'secondary'}
         sx={{ transform: `scale(${scale || 1})` }}
diff --git a/src/locales/cs.js b/src/locales/cs.js
index d1def5570..350d95ef6 100644
--- a/src/locales/cs.js
+++ b/src/locales/cs.js
@@ -285,9 +285,12 @@ export default {
   'sharedialog.copied': 'Zkopírováno!',
   'sharedialog.share': 'Sdílet',
 
-  osmtype_node: 'Uzel',
-  osmtype_way: 'Cesta',
-  osmtype_relation: 'Relace',
+  'osmtype.node': 'Uzel',
+  'osmtype.node.description': 'Bod zájmu či bod v cestě – nese polohu a vlastnosti (tagy).',
+  'osmtype.way': 'Cesta',
+  'osmtype.way.description': 'Linie se skládá z dalších uzlů (node).',
+  'osmtype.relation': 'Relace',
+  'osmtype.relation.description': 'Skupina dalších prvků – cest, uzlů a případně dalších relací.',
 
   weather: 'Počasí',
 };
diff --git a/src/locales/vocabulary.js b/src/locales/vocabulary.js
index f31842bf3..69e8c45ed 100644
--- a/src/locales/vocabulary.js
+++ b/src/locales/vocabulary.js
@@ -376,9 +376,12 @@ export default {
   'sharedialog.copied': 'Copied!',
   'sharedialog.share': 'Share',
 
-  osmtype_node: 'Node',
-  osmtype_way: 'Way',
-  osmtype_relation: 'Relation',
+  'osmtype.node': 'Node',
+  'osmtype.node.description': 'Point of interest OR point in a way – contains coordinates and properties (tags).',
+  'osmtype.way': 'Way',
+  'osmtype.way.description': 'Line consisting of severel (many) nodes.',
+  'osmtype.relation': 'Relation',
+  'osmtype.relation.description': 'Group of other elements – ways, nodes, and even other relations.',
 
   weather: 'Weather',
 };