5 files changed, 58 insertions, 8 deletions
diff --git a/module/web/static/css/default/settings.less b/module/web/static/css/default/settings.less
index 12cc31e06..947cbaa22 100644
--- a/module/web/static/css/default/settings.less
+++ b/module/web/static/css/default/settings.less
@@ -22,7 +22,7 @@
     margin-top: 0;
   }
 
-  .plugin {
+  .plugin, .addon {
     a {
       padding-left: 28px;
       background-position: 4px 2px;
@@ -30,7 +30,7 @@
       background-size: 20px 20px;
     }
 
-    i {
+    .iconf-remove {
       display: none;
     }
 
@@ -42,6 +42,20 @@
 
   }
 
+  .addon {
+    div {
+      font-size: small;
+    }
+    .addon-on {
+      color: @green;
+    }
+
+    .addon-off {
+      color: @red;
+    }
+
+  }
+
   border-top-left-radius: 0;
   border-top-right-radius: 0;
 
diff --git a/module/web/static/img/default/logo_grey.png b/module/web/static/img/default/logo_grey.png
index 7061372aa..a4114d832 100644
--- a/module/web/static/img/default/logo_grey.png
+++ b/module/web/static/img/default/logo_grey.png
diff --git a/module/web/static/js/views/settings/configSectionView.js b/module/web/static/js/views/settings/configSectionView.js
index b3861f27e..14ce4a0b9 100644
--- a/module/web/static/js/views/settings/configSectionView.js
+++ b/module/web/static/js/views/settings/configSectionView.js
@@ -74,7 +74,6 @@ define(['jquery', 'underscore', 'backbone', 'app', '../abstract/itemView', '../i
                 // TODO: success / failure popups
                 var self = this;
                 this.model.save({success: function(){
-                    console.log("saved");
                     self.render();
                     App.settingsView.refresh();
                 }});
diff --git a/module/web/static/js/views/settings/settingsView.js b/module/web/static/js/views/settings/settingsView.js
index 9968a48e0..d6f874c47 100644
--- a/module/web/static/js/views/settings/settingsView.js
+++ b/module/web/static/js/views/settings/settingsView.js
@@ -49,9 +49,22 @@ define(['jquery', 'underscore', 'backbone', 'app', 'models/ConfigHolder', './con
             },
 
             render: function() {
+                var plugins = [],
+                    addons = [];
+
+                // separate addons and default plugins
+                // addons have an activated state
+                _.each(this.pluginConfig, function(item) {
+                    if (item.activated === null)
+                        plugins.push(item);
+                    else
+                        addons.push(item);
+                });
+
                 this.menu.html(this.templateMenu({
                     core: this.coreConfig,
-                    plugin: this.pluginConfig
+                    plugin: plugins,
+                    addon: addons
                 }));
 
                 // mark the selected element
@@ -122,7 +135,8 @@ define(['jquery', 'underscore', 'backbone', 'app', 'models/ConfigHolder', './con
                 // TODO check for changes
                 // TODO move this into render?
 
-                var el = $(e.target).parent();
+                var el = $(e.target).closest('li');
+
                 this.selected = el.data("name");
                 this.openConfig(this.selected);
 
diff --git a/module/web/templates/default/settings.html b/module/web/templates/default/settings.html
index d8e3430f5..0b92730c2 100644
--- a/module/web/templates/default/settings.html
+++ b/module/web/templates/default/settings.html
@@ -22,15 +22,38 @@
         <%/if%>
         <li class="divider"></li>
         <li class="nav-header"><i class="icon-th-large icon-white"></i> {{ _("Addons") }}</li>
+        <%= each addon %>
+        <li class="addon" data-name="<% name %>">
+            <a href="#" style="background-image: url(icons/<% name %>);">
+                <% label %>
+                <i class="iconf-remove pull-right"></i>
+                <%= if activated %>
+                <div class="addon-on">
+                    active
+                <%else%>
+                <div class="addon-off">
+                    inactive
+                <%/if%>
+                <%= if user_context %>
+                {# TODO: tooltip #}
+                    <i class="iconf-user pull-right"></i>
+                <%else%>
+                    <i class="iconf-globe pull-right"></i>
+                <%/if%>
+                </div>
+            </a>
+        </li>
+        <%/each%>
+        <li class="divider"></li>
+        <li class="nav-header"><i class="icon-th-list icon-white"></i> {{ _("Plugin Configs") }}</li>
         <%= each plugin %>
         <li class="plugin" data-name="<% name %>">
             <a href="#" style="background-image: url(icons/<% name %>);">
                 <% label %>
                 <i class="iconf-remove pull-right"></i>
-            </a></li>
+            </a>
+        </li>
         <%/each%>
-        {#        <li class="divider"></li>#}
-        {#        <li class="nav-header"><i class="icon-th-list icon-white"></i> {{ _("Other") }}</li>#}
     </script>
     <script type="text/template" id="template-config">
         <legend>