Very rough preset selection grid

css/app.css

@@ -643,6 +643,31 @@ a.selected:hover .toggle.icon  { background-position: -40px -180px;}
     display: none;
 }
 
+/* Preset grid */
+/* temp */
+
+.preset-grid {
+  max-height:  360px;
+}
+
+.preset-grid .grid-entry {
+  float: left;
+  width: 100px;
+  height: 100px;
+  background: red;
+  color: black;
+  margin: 10px;
+}
+
+.preset-grid-search-wrap {
+  padding: 20px;
+}
+
+.preset-grid-search {
+  width: 100%;
+  height: 20px;
+}
+
 /* Map Controls */
 
 .map-control {

index.html

@@ -90,6 +90,7 @@
         <script src='js/id/ui/undo_redo.js'></script>
         <script src='js/id/ui/zoom.js'></script>
         <script src='js/id/ui/taglist.js'></script>
+        <script src='js/id/ui/presetgrid.js'></script>
 
         <script src='js/id/actions.js'></script>
         <script src="js/id/actions/add_midpoint.js"></script>

js/id/ui/inspector.js

@@ -11,6 +11,9 @@ iD.ui.Inspector = function() {
 
     function inspector(selection) {
 
+        var entity = selection.datum();
+            presetMatch = presetData.matchTags(entity);
+
         var iwrap = selection.append('div')
                 .attr('class','inspector content hide'),
             messagewrap = iwrap.append('div')
@@ -23,21 +26,23 @@ iD.ui.Inspector = function() {
             .attr('class', 'inspector-buttons pad1 fillD')
             .call(drawButtons);
 
-        if (false && initial) {
-            inspectorbody.call(iD.ui.presetfavs());
+        if (initial) {
+            inspectorbody.call(iD.ui.PresetGrid()
+                    .presetData(presetData)
+                    .entity(selection.datum())
+                    .on('choose', function(preset) {
+                        inspectorbody.call(drawEditor, entity, preset);
+                    }));
         } else {
-            inspectorbody.call(drawEditor);
+            inspectorbody.call(drawEditor, entity, presetMatch);
         }
 
         iwrap.call(iD.ui.Toggle(true));
     }
 
-    function drawEditor(selection) {
+    function drawEditor(selection, entity, presetMatch) {
         selection.html('');
 
-        var entity = selection.datum();
-            presetMatch = presetData.matchTags(entity);
-
         var editorwrap = selection.append('div')
             .attr('class', 'inspector-inner tag-wrap fillL2');
 

js/id/ui/presetgrid.js

@@ -0,0 +1,71 @@
+iD.ui.PresetGrid = function() {
+    var event = d3.dispatch('choose'),
+        entity,
+        presetData;
+
+    function presetgrid(selection) {
+
+        selection.html('');
+        var wrap = selection.append('div')
+            .attr('class', 'fillL');
+
+        var viable = presetData.match(entity);
+
+        var grid = wrap.append('div')
+            .attr('class', 'preset-grid')
+            .call(drawGrid, filter(''));
+
+        var searchwrap = wrap.append('div')
+            .attr('class', 'preset-grid-search-wrap');
+
+        var search = searchwrap.append('input')
+            .attr('class', 'preset-grid-search')
+            .on('keyup', function() {
+                grid.call(drawGrid, filter(search.property('value')));
+            });
+
+
+        function filter(value) {
+            value = value.toLowerCase();
+            return viable.filter(function(v) {
+                return v.name.toLowerCase().indexOf(value) !== -1;
+            });
+        }
+
+    }
+
+    function name(d) { return d.name; }
+
+    function drawGrid(selection, presets) {
+
+        var entries = selection
+            .selectAll('div.grid-entry')
+            .data(presets.slice(0, 12), name);
+
+        entries.enter()
+            .append('div')
+            .attr('class', 'grid-entry')
+            .text(name)
+            .on('click', function(d) {
+                event.choose(d);
+            });
+
+        entries.exit().remove();
+    }
+
+    presetgrid.presetData = function(_) {
+        if (!arguments.length) return presetData;
+        presetData = _;
+        return presetgrid;
+    };
+
+    presetgrid.entity = function(_) {
+        if (!arguments.length) return entity;
+        entity = _;
+        return presetgrid;
+    };
+
+
+
+    return d3.rebind(presetgrid, event, 'on');
+};