Add match and file count to command panel preview

src/packages/command-panel/spec/command-panel-spec.coffee

@@ -180,17 +180,19 @@ describe "CommandPanel", ->
           expect(commandPanel.hasParent()).toBeTruthy()
 
         describe "when the mini editor is focused", ->
-          it "retains focus on the mini editor and does not show the preview list", ->
+          it "retains focus on the mini editor and does not show the preview list or preview count", ->
             expect(commandPanel.miniEditor.isFocused).toBeTruthy()
             rootView.trigger 'command-panel:toggle-preview'
             expect(commandPanel.previewList).toBeHidden()
+            expect(commandPanel.previewCount).toBeHidden()
             expect(commandPanel.miniEditor.isFocused).toBeTruthy()
 
         describe "when the mini editor is not focused", ->
-          it "focuses the mini editor and does not show the preview list", ->
+          it "focuses the mini editor and does not show the preview list or preview count", ->
             rootView.focus()
             rootView.trigger 'command-panel:toggle-preview'
             expect(commandPanel.previewList).toBeHidden()
+            expect(commandPanel.previewCount).toBeHidden()
             expect(commandPanel.miniEditor.isFocused).toBeTruthy()
 
       describe "when the command panel is not visible", ->
@@ -377,6 +379,10 @@ describe "CommandPanel", ->
       rootView.trigger 'command-panel:toggle'
       waitsForPromise -> commandPanel.execute('X x/sort/')
 
+    it "displays the number of files and operations", ->
+      rootView.attachToDom()
+      expect(commandPanel.previewCount.text()).toBe '17 matches in 4 files'
+
     describe "when move-down and move-up are triggered on the preview list", ->
       it "selects the next/previous operation (if there is one), and scrolls the list if needed", ->
         rootView.attachToDom()

src/packages/command-panel/src/command-panel-view.coffee

@@ -24,6 +24,7 @@ class CommandPanelView extends View
 
   @content: (rootView) ->
     @div class: 'command-panel tool-panel', =>
+      @div outlet: 'previewCount', class: 'preview-count'
       @subview 'previewList', new PreviewList(rootView)
       @ul class: 'error-messages', outlet: 'errorMessages'
       @div class: 'prompt-and-editor', =>
@@ -48,6 +49,7 @@ class CommandPanelView extends View
     @command 'core:move-down', => @navigateForwardInHistory()
 
     @previewList.hide()
+    @previewCount.hide()
     @errorMessages.hide()
     @prompt.iconSize(@miniEditor.fontSize)
 
@@ -73,12 +75,14 @@ class CommandPanelView extends View
   togglePreview: ->
     if @previewList.is(':focus')
       @previewList.hide()
+      @previewCount.hide()
       @detach()
       @rootView.focus()
     else
       @attach() unless @hasParent()
       if @previewList.hasOperations()
         @previewList.show().focus()
+        @previewCount.show()
       else
         @miniEditor.focus()
 
@@ -94,6 +98,7 @@ class CommandPanelView extends View
   detach: ->
     @rootView.focus()
     @previewList.hide()
+    @previewCount.hide()
     super
 
   escapedCommand: ->
@@ -115,6 +120,7 @@ class CommandPanelView extends View
         else if operationsToPreview?.length
           @previewList.populate(operationsToPreview)
           @previewList.focus()
+          @previewCount.text("#{_.pluralize(operationsToPreview.length, 'match', 'matches')} in #{_.pluralize(@previewList.getPathCount(), 'file')}").show()
         else
           @detach()
     catch error

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

@@ -84,6 +84,9 @@ class PreviewList extends ScrollView
     @rootView.focus()
     false
 
+  getPathCount: ->
+    _.keys(_.groupBy(@operations, (operation) -> operation.getPath())).length
+
   getOperations: ->
     new Array(@operations...)
 

themes/Atom - Dark/command-panel.css

@@ -15,6 +15,13 @@
   cursor: default;
 }
 
+.command-panel .preview-count {
+  font-size: 11px;
+  color: #969696;
+  text-align: right;
+  padding-bottom: 1px;
+}
+
 .command-panel .preview-list li.selected, .command-panel .preview-list li.operation:hover {
   background-color: rgba(255, 255, 255, .13);
 }

themes/Atom - Light/command-panel.css

@@ -16,6 +16,13 @@
   border: 1px solid #989898;
 }
 
+.command-panel .preview-count {
+  font-size: 11px;
+  color: #333;
+  text-align: right;
+  padding-bottom: 1px;
+}
+
 .command-panel .preview-list li.selected, .command-panel .preview-list li.operation:hover {
   background-color: rgba(255, 255, 255, .6);
 }