Combine package configs into single panel

spec/app/package-config-panel-spec.coffee

@@ -11,15 +11,15 @@ describe "PackageConfigPanel", ->
     panel = new PackageConfigPanel
 
   it "lists all available packages, with an unchecked checkbox next to packages in the core.disabledPackages array", ->
-    treeViewTr = panel.packageTableBody.find("tr[name='tree-view']")
+    treeViewTr = panel.installed.packageTableBody.find("tr[name='tree-view']")
     expect(treeViewTr).toExist()
     expect(treeViewTr.find("input[type='checkbox']").attr('checked')).toBeTruthy()
 
-    tomlTr = panel.packageTableBody.find("tr[name='toml']")
+    tomlTr = panel.installed.packageTableBody.find("tr[name='toml']")
     expect(tomlTr).toExist()
     expect(tomlTr.find("input[type='checkbox']").attr('checked')).toBeFalsy()
 
-    wrapGuideTr = panel.packageTableBody.find("tr[name='wrap-guide']")
+    wrapGuideTr = panel.installed.packageTableBody.find("tr[name='wrap-guide']")
     expect(wrapGuideTr).toExist()
     expect(wrapGuideTr.find("input[type='checkbox']").attr('checked')).toBeFalsy()
 

src/app/available-packages-config-panel.coffee

@@ -13,8 +13,7 @@ async = require 'async'
 module.exports =
 class AvailablePackagesConfigPanel extends ConfigPanel
   @content: ->
-    @div id: 'available-packages', =>
-      @legend 'Available Packages'
+    @div class: 'available-packages'
 
   initialize: ->
     apm = require.resolve '.bin/apm'

src/app/config-view.coffee

@@ -5,7 +5,6 @@ GeneralConfigPanel = require 'general-config-panel'
 EditorConfigPanel = require 'editor-config-panel'
 ThemeConfigPanel = require 'theme-config-panel'
 PackageConfigPanel = require 'package-config-panel'
-AvailablePackagesConfigPanel = require 'available-packages-config-panel'
 
 ###
 # Internal #
@@ -39,8 +38,7 @@ class ConfigView extends View
     @addPanel('General', new GeneralConfigPanel)
     @addPanel('Editor', new EditorConfigPanel)
     @addPanel('Themes', new ThemeConfigPanel)
-    @addPanel('Installed Packages', new PackageConfigPanel)
-    @addPanel('Available Packages', new AvailablePackagesConfigPanel)
+    @addPanel('Packages', new PackageConfigPanel)
 
   addPanel: (name, panel) ->
     panelItem = $$ -> @li name: name, => @a name

src/app/installed-packages-config-panel.coffee

@@ -0,0 +1,38 @@
+ConfigPanel = require 'config-panel'
+{$$} = require 'space-pen'
+$ = require 'jquery'
+_ = require 'underscore'
+
+###
+# Internal #
+###
+
+module.exports =
+class InstalledPackagesConfigPanel extends ConfigPanel
+  @content: ->
+    @div =>
+      @table id: 'packages', class: "table table-striped", =>
+        @thead =>
+          @tr =>
+            @th "Package Name"
+            @th class: 'package-enabled', "Enable"
+
+        @tbody outlet: 'packageTableBody', =>
+          for name in atom.getAvailablePackageNames().sort()
+            @tr name: name, =>
+              @td name
+              @td class: 'package-enabled', => @input type: 'checkbox'
+
+  initialize: ->
+    @on 'change', '#packages input[type=checkbox]', (e) ->
+      checkbox = $(e.target)
+      name = checkbox.closest('tr').attr('name')
+      if checkbox.attr('checked')
+        config.removeAtKeyPath('core.disabledPackages', name)
+      else
+        config.pushAtKeyPath('core.disabledPackages', name)
+
+    @observeConfig 'core.disabledPackages', (disabledPackages) =>
+      @packageTableBody.find("input[type='checkbox']").attr('checked', true)
+      for name in disabledPackages
+        @packageTableBody.find("tr[name='#{name}'] input[type='checkbox']").attr('checked', false)

src/app/package-config-panel.coffee

@@ -1,7 +1,6 @@
 ConfigPanel = require 'config-panel'
-{$$} = require 'space-pen'
-$ = require 'jquery'
-_ = require 'underscore'
+InstalledPackagesConfigPanel = require 'installed-packages-config-panel'
+AvailablePackagesConfigPanel = require 'available-packages-config-panel'
 
 ###
 # Internal #
@@ -10,31 +9,25 @@ _ = require 'underscore'
 module.exports =
 class PackageConfigPanel extends ConfigPanel
   @content: ->
-    @div =>
-      @legend "Installed Packages"
-
-      @table id: 'packages', class: "table table-striped", =>
-        @thead =>
-          @tr =>
-            @th "Package Name"
-            @th class: 'package-enabled', "Enable"
-
-        @tbody outlet: 'packageTableBody', =>
-          for name in atom.getAvailablePackageNames().sort()
-            @tr name: name, =>
-              @td name
-              @td class: 'package-enabled', => @input type: 'checkbox'
+    @div class: 'package-panel', =>
+      @legend 'Packages'
+      @ul class: 'nav nav-tabs', =>
+        @li class: 'active', outlet: 'installedLink', =>
+          @a 'Installed'
+        @li outlet: 'availableLink', =>
+          @a 'Available'
+      @subview 'installed', new InstalledPackagesConfigPanel()
+      @subview 'available', new AvailablePackagesConfigPanel()
 
   initialize: ->
-    @on 'change', '#packages input[type=checkbox]', (e) ->
-      checkbox = $(e.target)
-      name = checkbox.closest('tr').attr('name')
-      if checkbox.attr('checked')
-        config.removeAtKeyPath('core.disabledPackages', name)
-      else
-        config.pushAtKeyPath('core.disabledPackages', name)
+    @installedLink.on 'click', =>
+      @availableLink.removeClass('active')
+      @available.hide()
+      @installedLink.addClass('active')
+      @installed.show()
 
-    @observeConfig 'core.disabledPackages', (disabledPackages) =>
-      @packageTableBody.find("input[type='checkbox']").attr('checked', true)
-      for name in disabledPackages
-        @packageTableBody.find("tr[name='#{name}'] input[type='checkbox']").attr('checked', false)
+    @availableLink.on 'click', =>
+      @installedLink.removeClass('active')
+      @installed.hide()
+      @availableLink.addClass('active')
+      @available.show()

static/config.less

@@ -143,9 +143,15 @@
     }
   }
 
-  #available-packages {
+  .available-packages {
     .readme {
       margin-top: 10px;
     }
   }
+
+  .package-panel {
+    .nav {
+      margin-bottom: 10px;
+    }
+  }
 }