Add favoriting or presets in the search add bar

css/80_app.css

@@ -649,11 +649,12 @@ button.add-note svg.icon {
     display: flex;
     align-items: center;
     line-height: 1.2em;
+    width: 100%;
 }
 .search-add .list-item > *:not(button) {
     pointer-events: none;
 }
-.search-add .list-item button {
+.search-add .list-item button.choose {
     position: absolute;
     border-radius: 0;
     height: 100%;
@@ -661,7 +662,17 @@ button.add-note svg.icon {
     top: 0;
     left: 0;
 }
-
+.search-add .list-item button.accessory {
+    position: relative;
+    flex: 0 0 auto;
+    color: #808080;
+    background: transparent;
+    padding-right: 3px;
+    padding-left: 3px;
+}
+.search-add .list-item button.accessory:hover {
+    color: #666;
+}
 /* Header for modals / panes
 ------------------------------------------------------- */
 .header {
@@ -1209,7 +1220,8 @@ a.hide-toggle {
 .preset-list-item button.tag-reference-button {
     height: 100%;
     border: 1px solid #ccc;
-    flex: 32px;
+    width: 32px;
+    flex: 0 0 auto;
     background: #f6f6f6;
 }
 [dir='ltr'] .preset-list-item button.preset-favorite-button,
@@ -1238,11 +1250,11 @@ a.hide-toggle {
     opacity: .5;
 }
 
-.preset-list-item button.preset-favorite-button .icon {
+button.preset-favorite-button .icon {
     fill-opacity: 0;
-    stroke-width: 1.6;
+    stroke-width: 1;
 }
-.preset-list-item button.preset-favorite-button.active .icon {
+button.preset-favorite-button.active .icon {
     fill-opacity: inherit;
 }
 

modules/ui/preset_favorite.js

@@ -6,7 +6,7 @@ import {
 import { t } from '../util/locale';
 import { svgIcon } from '../svg';
 
-export function uiPresetFavorite(preset, geom, context) {
+export function uiPresetFavorite(preset, geom, context, klass) {
 
     var presetFavorite = {};
 
@@ -15,7 +15,7 @@ export function uiPresetFavorite(preset, geom, context) {
 
     presetFavorite.button = function(selection) {
 
-        var canFavorite = geom !== 'vertex' && geom !== 'relation' && !preset.isFallback();
+        var canFavorite = geom !== 'vertex' && geom !== 'relation';
 
         _button = selection.selectAll('.preset-favorite-button')
             .data(canFavorite ? [0] : []);
@@ -24,7 +24,7 @@ export function uiPresetFavorite(preset, geom, context) {
 
         _button = _button.enter()
             .insert('button', '.tag-reference-button')
-            .attr('class', 'preset-favorite-button')
+            .attr('class', 'preset-favorite-button ' + klass)
             .attr('title', t('icons.favorite'))
             .attr('tabindex', -1)
             .call(svgIcon('#iD-icon-favorite'))

modules/ui/search_add.js

@@ -17,6 +17,7 @@ import { actionChangePreset } from '../actions/index';
 import { operationDelete } from '../operations/index';
 import { svgIcon } from '../svg/index';
 import { tooltip } from '../util/tooltip';
+import { uiPresetFavorite } from './preset_favorite';
 import { uiPresetIcon } from './preset_icon';
 import { uiTagReference } from './tag_reference';
 import { utilKeybinding, utilNoAuto, utilRebind } from '../util';
@@ -116,6 +117,7 @@ export function uiSearchAdd(context) {
             .attr('class', function(item) { return 'list-item preset-' + item.id.replace('/', '-'); });
 
         var button = row.append('button')
+            .attr('class', 'choose')
             .on('click', function(d) {
                 var geom = defaultGeometry(d);
                 var markerClass = 'add-preset add-' + geom + ' add-preset-' + d.name()
@@ -159,6 +161,14 @@ export function uiSearchAdd(context) {
                 return d.name();
             });
 
+        row.each(function(d) {
+            var supportedGeom = supportedGeometry(d);
+            if (supportedGeom.length === 1) {
+                var presetFavorite = uiPresetFavorite(d, supportedGeom[0], context, 'accessory');
+                d3_select(this).call(presetFavorite.button);
+            }
+        });
+
         //updateForFeatureHiddenState();
     }