Select preview item when preview list is shown

spec/extensions/command-panel-spec.coffee

@@ -137,25 +137,6 @@ describe "CommandPanel", ->
         expect(buffer.lineForRow(0)).toMatch /quicktorta/
         expect(buffer.lineForRow(1)).toMatch /var torta/
 
-    describe "when the command returns operations to be previewed", ->
-      it "displays a preview of the operations above the mini-editor", ->
-        rootView.attachToDom()
-        editor.remove()
-
-        rootView.trigger 'command-panel:toggle'
-
-        waitsForPromise -> commandPanel.execute('X x/a+/')
-
-        runs ->
-          expect(commandPanel).toBeVisible()
-          expect(commandPanel.previewList).toBeVisible()
-          previewItem = commandPanel.previewList.find("li:contains(dir/a):first")
-          expect(previewItem.find('.path').text()).toBe "dir/a"
-          expect(previewItem.find('.preview').text()).toBe "aaa bbb"
-          expect(previewItem.find('.preview > .match').text()).toBe "aaa"
-
-          rootView.trigger 'command-panel:toggle' # ensure we can close panel without problems
-
     describe "if the command is malformed", ->
       it "adds and removes an error class to the command panel and does not close it", ->
         rootView.trigger 'command-panel:toggle'
@@ -187,6 +168,27 @@ describe "CommandPanel", ->
       commandPanel.miniEditor.trigger 'move-down'
       expect(commandPanel.miniEditor.getText()).toBe ''
 
+  describe "when the command returns operations to be previewed", ->
+    it "displays a preview of the operations above the mini-editor", ->
+      rootView.attachToDom()
+      editor.remove()
+
+      rootView.trigger 'command-panel:toggle'
+
+      waitsForPromise -> commandPanel.execute('X x/a+/')
+
+      runs ->
+        expect(commandPanel).toBeVisible()
+        expect(commandPanel.previewList).toBeVisible()
+        previewItem = commandPanel.previewList.find("li:contains(dir/a):first")
+        expect(previewItem.find('.path').text()).toBe "dir/a"
+        expect(previewItem.find('.preview').text()).toBe "aaa bbb"
+        expect(previewItem.find('.preview > .match').text()).toBe "aaa"
+
+        expect(commandPanel.previewList.find("li:first")).toHaveClass('selected')
+
+        rootView.trigger 'command-panel:toggle' # ensure we can close panel without problems
+
   describe ".execute()", ->
     it "executes the command and closes the command panel", ->
       rootView.getActiveEditor().setText("i hate love")

src/extensions/command-panel/command-panel.coffee

@@ -2,7 +2,7 @@
 CommandInterpreter = require 'command-panel/command-interpreter'
 RegexAddress = require 'command-panel/commands/regex-address'
 CompositeCommand = require 'command-panel/commands/composite-command'
-PreviewItem = require 'command-panel/preview-item'
+PreviewList = require 'command-panel/preview-list'
 Editor = require 'editor'
 {SyntaxError} = require('pegjs').parser
 
@@ -31,7 +31,7 @@ class CommandPanel extends View
 
   @content: ->
     @div class: 'command-panel', =>
-      @ol class: 'preview-list', outlet: 'previewList'
+      @subview 'previewList', new PreviewList()
       @div class: 'prompt-and-editor', =>
         @div ':', class: 'prompt', outlet: 'prompt'
         @subview 'miniEditor', new Editor(mini: true)
@@ -75,11 +75,11 @@ class CommandPanel extends View
 
   execute: (command = @miniEditor.getText()) ->
     try
-      @commandInterpreter.eval(command, @rootView.getActiveEditSession()).done (operations) =>
+      @commandInterpreter.eval(command, @rootView.getActiveEditSession()).done (operationsToPreview) =>
         @history.push(command)
         @historyIndex = @history.length
-        if operations?.length
-          @populatePreviewList(operations)
+        if operationsToPreview?.length
+          @populatePreviewList(operationsToPreview)
         else
           @detach()
     catch error
@@ -91,18 +91,7 @@ class CommandPanel extends View
 
   populatePreviewList: (operations) ->
     @previewedOperations = operations
-    @previewList.empty()
-    @previewList.html $$$ ->
-      for operation in operations
-        {prefix, suffix, match} = operation.preview()
-        @li =>
-          @span operation.getPath(), outlet: "path", class: "path"
-          @span outlet: "preview", class: "preview", =>
-            @span prefix
-            @span match, class: 'match'
-            @span suffix
-
-    @previewList.show()
+    @previewList.populate(operations)
 
   navigateBackwardInHistory: ->
     return if @historyIndex == 0

src/extensions/command-panel/preview-item.coffee

@@ -1,15 +0,0 @@
-{View} = require 'space-pen'
-
-module.exports =
-class PreviewItem extends View
-  @content: (operation) ->
-    {prefix, suffix, match} = operation.preview()
-
-    @li =>
-      @span operation.getPath(), outlet: "path", class: "path"
-      @span outlet: "preview", class: "preview", =>
-        @span prefix
-        @span match, class: 'match'
-        @span suffix
-
-

src/extensions/command-panel/preview-list.coffee

@@ -0,0 +1,35 @@
+{$$$, View} = require 'space-pen'
+
+module.exports =
+class PreviewList extends View
+  @content: ->
+    @ol class: 'preview-list', ->
+
+  selectedOperationIndex: 0
+  operations: null
+
+  initialize: ->
+
+  populate: (@operations) ->
+    @empty()
+    @html $$$ ->
+      for operation in operations
+        {prefix, suffix, match} = operation.preview()
+        @li =>
+          @span operation.getPath(), outlet: "path", class: "path"
+          @span outlet: "preview", class: "preview", =>
+            @span prefix
+            @span match, class: 'match'
+            @span suffix
+
+    @setSelectedOperationIndex(0)
+
+    @show()
+
+  setSelectedOperationIndex: (index) ->
+    @children(".selected").removeClass('selected')
+    console.log @children("li:eq(#{index})")
+    @children("li:eq(#{index})").addClass('selected')
+
+  #getSelectedOperation: ->
+    #@operations[@selectedOperationIndex]

static/command-panel.css

@@ -36,3 +36,7 @@
   font-weight: bold;
   padding: .2em;
 }
+
+.command-panel .preview-list li.selected {
+  background-color: green;
+}