Custom alpha sort with default always on top

ui/app/components/gutter-menu.js

@@ -1,9 +1,35 @@
 import Ember from 'ember';
 
-const { Component, inject } = Ember;
+const { Component, inject, computed } = Ember;
 
 export default Component.extend({
   system: inject.service(),
 
+  sortedNamespaces: computed('system.namespaces.@each.name', function() {
+    const namespaces = this.get('system.namespaces').toArray() || [];
+
+    return namespaces.sort((a, b) => {
+      const aName = a.get('name');
+      const bName = b.get('name');
+
+      // Make sure the default namespace is always first in the list
+      if (aName === 'default') {
+        return -1;
+      }
+      if (bName === 'default') {
+        return 1;
+      }
+
+      if (aName < bName) {
+        return -1;
+      }
+      if (aName > bName) {
+        return 1;
+      }
+
+      return 0;
+    });
+  }),
+
   onNamespaceChange() {},
 });

ui/app/templates/components/gutter-menu.hbs

@@ -9,14 +9,16 @@
           <li>
             <div class="menu-item">
               {{#power-select
-                options=system.namespaces
+                options=sortedNamespaces
                 selected=system.activeNamespace
                 searchField="name"
-                searchEnabled=(gt system.namespaces.length 10)
+                searchEnabled=(gt sortedNamespaces.length 10)
                 onchange=(action (queue
                   (action (mut system.activeNamespace))
                   (action onNamespaceChange)
                 ))
+                tagName="div"
+                class="namespace-switcher"
                 as |namespace|}}
                 {{#if (eq namespace.name "default")}}
                   Default Namespace