Nicer display of name suggestion index presets

css/80_app.css

@@ -668,9 +668,12 @@ button.add-note svg.icon {
     position: relative;
     display: flex;
     align-items: center;
-    line-height: 1.2em;
+    line-height: 1.3em;
     width: 100%;
 }
+.search-add .list-item .label .namepart:nth-child(2) {
+    font-weight: normal;
+}
 .search-add .list-item.disabled .preset-icon-container,
 .search-add .list-item.disabled .label {
     opacity: 0.55;

modules/presets/index.js

@@ -270,7 +270,7 @@ export function presetIndex() {
 
     all.recent = function(geometries, n) {
         return presetCollection(_recent.matchAnyGeometry(geometries).collection.slice(0, n - 1));
-    }
+    };
 
     all.choose = function(preset) {
         if (preset.searchable !== false) {

modules/ui/modes.js

@@ -66,7 +66,7 @@ export function uiModes(context) {
             var favoritePresets = context.getFavoritePresets();
             var favoriteModes = favoritePresets.map(function(d, index) {
                 var preset = context.presets().item(d.id);
-                var presetName = preset.name();
+                var presetName = preset.name().split(' – ')[0];
                 var markerClass = 'add-preset add-' + d.geom + ' add-preset-' + presetName.replace(/\s+/g, '_')
                     + '-' + d.geom; // replace spaces with underscores to avoid css interpretation
                 if (preset.isFallback()) {
@@ -92,7 +92,7 @@ export function uiModes(context) {
                 var favoriteMode = {
                     button: markerClass,
                     title: presetName,
-                    description: t(tooltipTitleID, { feature: presetName }),
+                    description: t(tooltipTitleID, { feature: '<strong>' + presetName + '</strong>' }),
                     preset: preset,
                     geometry: d.geom
                 };

modules/ui/search_add.js

@@ -292,16 +292,32 @@ export function uiSearchAdd(context) {
             }
         });
 
-        label.append('span')
-            .text(function(d) {
-                if (d.isSubitem) {
-                    if (d.preset.setTags({}, d.geometry).building) {
-                        return t('presets.presets.building.name');
-                    }
-                    return t('modes.add_' + d.geometry + '.title');
-                }
-                return d.preset.name();
-            });
+        label.each(function(d) {
+
+            if ((d.geometry && !d.isSubitem) || d.geometries) {
+                // NOTE: split/join on en-dash, not a hypen (to avoid conflict with fr - nl names in Brussels etc)
+                d3_select(this)
+                    .append('div')
+                    .attr('class', 'label-inner')
+                    .selectAll('.namepart')
+                    .data(d.preset.name().split(' – '))
+                    .enter()
+                    .append('div')
+                    .attr('class', 'namepart')
+                    .text(function(d) { return d; });
+            } else {
+                d3_select(this).append('span')
+                    .text(function(d) {
+                        if (d.isSubitem) {
+                            if (d.preset.setTags({}, d.geometry).building) {
+                                return t('presets.presets.building.name');
+                            }
+                            return t('modes.add_' + d.geometry + '.title');
+                        }
+                        return d.preset.name();
+                    });
+            }
+        });
 
         row.each(function(d) {
             if (d.geometry) {