Improve update visibility and integrate automatic updates for Windows

package.json

@@ -29,6 +29,7 @@
     "date-fns": "^2.15.0",
     "deepmerge": "^4.2.2",
     "electron-dl": "^1.14.0",
+    "electron-updater": "^4.3.5",
     "electron-window-state": "^5.0.3",
     "is-url-relative-without-domain": "^2.0.0",
     "lodash-id": "^0.14.0",

src/background.js

@@ -2,6 +2,7 @@ import electronDl from 'electron-dl';
 import windowStateKeeper from 'electron-window-state';
 import * as path from 'path';
 import { format as formatUrl } from 'url';
+import checkForUpdates from '@/utils/updater';
 
 import {
   app, Menu, protocol, BrowserWindow, shell,
@@ -76,6 +77,8 @@ function createMainWindow() {
       protocol: 'file',
       slashes: true,
     }));
+
+    checkForUpdates();
   }
 
   window.on('ready-to-show', () => {

src/components/AppButton.vue

@@ -40,6 +40,10 @@ export default {
     border rounded;
 }
 
+.button[disabled] {
+  @apply opacity-75;
+}
+
 .primary {
   @apply text-white bg-gray-600 border-gray-500 shadow;
 }

src/components/AppIcon.vue

@@ -5,6 +5,7 @@
       [$style.icon]: true,
       [$style.inline]: inline,
       [$style[`size-${size}`]]: true,
+      [$style.spin]: spin,
     }"
     viewBox="0 0 24 24"
   >
@@ -29,6 +30,10 @@ export default {
       type: Number,
       default: 4,
     },
+    spin: {
+      type: Boolean,
+      default: false,
+    },
   },
   computed: {
     content() {
@@ -62,4 +67,20 @@ export default {
 .size-8 {
   @apply w-8 h-8;
 }
+
+.spin {
+  animation-name: spin;
+  animation-duration: 1000ms;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
 </style>

src/components/SideBarButton.vue

@@ -12,6 +12,10 @@
         :face="icon"
         :size="6"
       />
+      <span
+        v-if="showBadge"
+        :class="$style.badge"
+      />
     </div>
     <div
       v-if="$slots.default && showLabel"
@@ -29,6 +33,10 @@ export default {
       type: String,
       required: true,
     },
+    showBadge: {
+      type: Boolean,
+      default: false,
+    },
     showLabel: {
       type: Boolean,
       required: true,
@@ -51,10 +59,14 @@ export default {
 }
 
 .icon {
-  @apply flex-shrink-0 px-2;
+  @apply relative flex-shrink-0 px-2;
 }
 
 .label {
   @apply flex-grow pl-2 whitespace-no-wrap;
 }
+
+.badge {
+  @apply absolute top-0 left-0 w-2 h-2 ml-1 bg-teal-500 rounded-full;
+}
 </style>

src/components/TheSideBar.vue

@@ -12,9 +12,11 @@
       </side-bar-button>
       <side-bar-button
         :to="{ name: 'home' }"
+        :show-badge="showMenuBadge"
         :show-label="displaysTabLabels"
         icon="Menu"
         title="Show menu"
+        @click.native="showMenuBadge = false"
         @contextmenu.native.prevent="showMenu"
       >
         Menu
@@ -33,12 +35,25 @@ export default {
     SideBarButton,
     TabsNav,
   },
+  data() {
+    return {
+      showMenuBadge: false,
+    };
+  },
   computed: {
     displaysTabLabels() {
       const key = 'navigation.displayTabLabels';
       return this.$store.getters['Settings/byKey'](key);
     },
   },
+  created() {
+    remote.app.on('app-update-available', (info) => {
+      if (this.$route.name !== 'home') {
+        this.showMenuBadge = true;
+      }
+      this.$store.commit('SET_UPDATE_INFO', info);
+    });
+  },
   methods: {
     showMenu() {
       const settingsMenu = remote.Menu.buildFromTemplate([
@@ -72,6 +87,10 @@ export default {
           click: () => this.$router.push({ name: 'settings' }),
         },
         { type: 'separator' },
+        {
+          label: 'Check for updates…',
+          click: () => remote.app.emit('app-update-check'),
+        },
         { role: 'toggledevtools' },
       ]);