Add a package config panel with the list of enabled packages

src/app/config-view.coffee

@@ -3,6 +3,7 @@ $ = require 'jquery'
 _ = require 'underscore'
 GeneralConfigPanel = require 'general-config-panel'
 EditorConfigPanel = require 'editor-config-panel'
+PackageConfigPanel = require 'package-config-panel'
 
 module.exports =
 class ConfigView extends View
@@ -26,6 +27,7 @@ class ConfigView extends View
 
     @addPanel('General', new GeneralConfigPanel)
     @addPanel('Editor', new EditorConfigPanel)
+    @addPanel('Installed Packages', new PackageConfigPanel)
 
   addPanel: (name, panel) ->
     panelItem = $$ -> @li name: name, => @a name

src/app/general-config-panel.coffee

@@ -3,14 +3,6 @@ ConfigPanel = require 'config-panel'
 $ = require 'jquery'
 _ = require 'underscore'
 
-window.jQuery = $
-require 'jqueryui-browser/ui/jquery.ui.core'
-require 'jqueryui-browser/ui/jquery.ui.widget'
-require 'jqueryui-browser/ui/jquery.ui.mouse'
-require 'jqueryui-browser/ui/jquery.ui.sortable'
-require 'jqueryui-browser/ui/jquery.ui.draggable'
-delete window.jQuery
-
 module.exports =
 class GeneralConfigPanel extends ConfigPanel
   @content: ->
@@ -23,11 +15,6 @@ class GeneralConfigPanel extends ConfigPanel
         @label for: 'core.autosave', "Autosave on unfocus:"
         @input id: 'core.autosave', type: 'checkbox'
 
-      @div class: 'section', =>
-        @div class: 'list-wrapper', =>
-          @div class: 'list-header', "Enabled Packages"
-          @ol id: 'package-list', outlet: 'packageList'
-
       @div class: 'section', =>
         @div class: 'list-wrapper pull-left', =>
           @div class: 'list-header', "Enabled Themes (Drag from right)"
@@ -37,33 +24,6 @@ class GeneralConfigPanel extends ConfigPanel
           @div class: 'list-header', "Available Themes"
           @ol id: 'available-theme-list', outlet: 'availableThemeList'
 
-  initialize: ->
-    @populatePackageList()
-    @populateThemeLists()
-    @packageList.on 'change', 'input[type=checkbox]', (e) ->
-      checkbox = $(e.target)
-      name = checkbox.closest('li').attr('name')
-      if checkbox.attr('checked')
-        _.remove(config.get('core.disabledPackages'), name)
-      else
-        config.get('core.disabledPackages').push(name)
-      config.update()
-
-  populatePackageList: ->
-    for name in atom.getAvailablePackageNames()
-      @packageList.append $$ ->
-        @li name: name, =>
-          @input type: 'checkbox'
-          @span name
-
-    @observeConfig 'core.disabledPackages', (disabledPackages) =>
-      @updatePackageListCheckboxes(disabledPackages)
-
-  updatePackageListCheckboxes: (disabledPackages=[]) ->
-    @packageList.find("input[type='checkbox']").attr('checked', true)
-    for name in disabledPackages
-      @packageList.find("li[name='#{name}'] input[type='checkbox']").attr('checked', false)
-
   populateThemeLists: ->
     for name in atom.getAvailableThemeNames()
       @availableThemeList.append(@buildThemeLi(name, draggable: true))

src/app/package-config-panel.coffee

@@ -0,0 +1,45 @@
+ConfigPanel = require 'config-panel'
+{$$} = require 'space-pen'
+$ = require 'jquery'
+_ = require 'underscore'
+
+window.jQuery = $
+require 'jqueryui-browser/ui/jquery.ui.core'
+require 'jqueryui-browser/ui/jquery.ui.widget'
+require 'jqueryui-browser/ui/jquery.ui.mouse'
+require 'jqueryui-browser/ui/jquery.ui.sortable'
+require 'jqueryui-browser/ui/jquery.ui.draggable'
+delete window.jQuery
+
+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'
+
+  initialize: ->
+    @on 'change', '#packages input[type=checkbox]', (e) ->
+      checkbox = $(e.target)
+      name = checkbox.closest('tr').attr('name')
+      if checkbox.attr('checked')
+        _.remove(config.get('core.disabledPackages'), name)
+      else
+        config.get('core.disabledPackages').push(name)
+      config.update()
+
+    @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)