fix: deterministically sort footer badges

Author: arielsvg

app/assets/javascripts/views/footer/footer-view.pug

@@ -72,8 +72,8 @@
         .sk-label Offline
       .sk-app-bar-item(ng-click='ctrl.refreshData()', ng-if='!ctrl.offline')
         .sk-label Refresh
-      .sk-app-bar-item.border(ng-if='ctrl.dockShortcuts.length > 0')
-      .sk-app-bar-item.dock-shortcut(ng-repeat='shortcut in ctrl.dockShortcuts')
+      .sk-app-bar-item.border(ng-if='ctrl.state.dockShortcuts.length > 0')
+      .sk-app-bar-item.dock-shortcut(ng-repeat='shortcut in ctrl.state.dockShortcuts')
         .sk-app-bar-item-column(
           ng-class="{'underline': shortcut.component.active}", 
           ng-click='ctrl.selectShortcut(shortcut)'

app/assets/javascripts/views/footer/footer_view.ts

@@ -32,7 +32,12 @@ type DockShortcut = {
   }
 }
 
-class FooterViewCtrl extends PureViewCtrl {
+class FooterViewCtrl extends PureViewCtrl<{}, {
+  outOfSync: boolean;
+  hasPasscode: boolean;
+  dataUpgradeAvailable: boolean;
+  dockShortcuts: DockShortcut[];
+}> {
 
   private $rootScope: ng.IRootScopeService
   private rooms: SNComponent[] = []
@@ -96,7 +101,10 @@ class FooterViewCtrl extends PureViewCtrl {
 
   getInitialState() {
     return {
-      hasPasscode: false
+      outOfSync: false,
+      dataUpgradeAvailable: false,
+      hasPasscode: false,
+      dockShortcuts: [],
     };
   }
 
@@ -379,19 +387,19 @@ class FooterViewCtrl extends PureViewCtrl {
         icon: icon
       } as DockShortcut);
     }
-    this.dockShortcuts = shortcuts.sort((a, b) => {
-      /** Circles first, then images */
-      const aType = a.icon.type;
-      const bType = b.icon.type;
-      if (aType === bType) {
-        return 0;
-      } else if (aType === 'circle' && bType === 'svg') {
-        return -1;
-      } else if (bType === 'circle' && aType === 'svg') {
-        return 1;
-      } else {
-        return 0;
-      }
+    this.setState({
+      dockShortcuts: shortcuts.sort((a, b) => {
+        /** Circles first, then images */
+        const aType = a.icon.type;
+        const bType = b.icon.type;
+        if (aType === 'circle' && bType === 'svg') {
+          return -1;
+        } else if (bType === 'circle' && aType === 'svg') {
+          return 1;
+        } else {
+          return a.name.localeCompare(b.name);
+        }
+      })
     });
   }