3 files changed, 39 insertions, 3 deletions
diff --git a/javascript/app/components/file-tree.js b/javascript/app/components/file-tree.js
index c86a71d..d255229 100644
--- a/javascript/app/components/file-tree.js
+++ b/javascript/app/components/file-tree.js
@@ -35,23 +35,47 @@ const containsHaskellModule = function(node) {
   });
 }
 
+const fileExtension = function (filename) {  
+  const idx = filename.lastIndexOf('.');  
+  return (idx < 1) ? "" : filename.substr(idx + 1);  
+}
+
 export default Ember.Component.extend({
   query: null,
+  sortType: "alphabetical",
+  sortTypeObserver : Ember.observer('sortType',function() {
+    Ember.run.next(this,() => {
+      this.jstree.refresh();
+    });
+  }),
   didInsertElement : function () {
     this._super(...arguments);    
     const element = this.element.getElementsByClassName('file-tree')[0];
+    const component = this;
     
     const jstreeElement = Ember.$(element).jstree({
       'core' : {
         'data' : directoryTreeToJsTree(this.get('packageId'),this.get('directoryTree'))
       },
       "plugins" : [
-        "search"
+        "search",
+        "sort"
       ],
       "search": {
         "case_insensitive": true,
         "show_only_matches" : true,
         "show_only_matches_children": true
+      },
+      'sort' : function (a,b) {
+        const node1 = this.get_node(a).data;
+        const node2 = this.get_node(b).data;
+        if(component.get("sortType") === "alphabetical") {          
+          return node1.name > node2.name;
+        } else {          
+          const extendedName1 = (node1.tag === "Dir" ? "0" : "1") + fileExtension(node1.name) + node1.name;
+          const extendedName2 = (node2.tag === "Dir" ? "0" : "1") + fileExtension(node2.name) + node2.name;          
+          return extendedName1 > extendedName2;
+        }
       }
     });
     
diff --git a/javascript/app/styles/app.scss b/javascript/app/styles/app.scss
index c847bfa..b87c0d8 100644
--- a/javascript/app/styles/app.scss
+++ b/javascript/app/styles/app.scss
@@ -477,13 +477,13 @@ ul.autocomplete-items {
     top:0;
     left:0;
     right:0;
-    height:50px;
+    height:65px;
     margin:5px;
 }
 
 .file-tree-content {
     position:absolute;
-    top:50px;
+    top:70px;
     left:0;
     right:0;
     bottom:0;
diff --git a/javascript/app/templates/components/file-tree.hbs b/javascript/app/templates/components/file-tree.hbs
index b5e38ef..3559efe 100644
--- a/javascript/app/templates/components/file-tree.hbs
+++ b/javascript/app/templates/components/file-tree.hbs
@@ -2,6 +2,18 @@
     <div class="input-group">
         {{input class="form-control" value=query placeholder="Filename"}}<a class="hide-file-tree" href="#" {{action "hide"}}>Hide</a>
     </div>
+    <div>
+        {{#radio-button
+           value="alphabetical"
+           groupValue=sortType}}
+            <span>Sort by name</span>
+        {{/radio-button}}
+        {{#radio-button
+           value="type"
+           groupValue=sortType}}
+            <span>Sort by type</span>
+        {{/radio-button}}
+    </div>
 </div>
 <div class="file-tree-content">
     <div class="file-tree"></div>