Add update available box (#2329)

* current stand

* added update available button

* improved update available icon

* improved update available box

* adding server side version

* added backend

* fixed text

* added option handling

* added field disabling

* removed options

* fixed terminology

* removed unnecessary imports

src/public/app/widgets/buttons/global_menu.js

@@ -1,5 +1,7 @@
 import BasicWidget from "../basic_widget.js";
 import utils from "../../services/utils.js";
+import UpdateAvailableWidget from "./update_available.js";
+const axios = require("axios");
 
 const TPL = `
 <div class="dropdown global-menu dropright">
@@ -19,16 +21,30 @@ const TPL = `
         background-position: 50% 45%;
         width: 100%;
         height: 100%;
+        
+        position: relative;
     }
     
     .global-menu-button:hover {
         background-image: url("images/icon-color.png");
     }
+    
+    .global-menu-button-update-available {
+        position: absolute;
+        right: -30px;
+        bottom: -30px;
+        width: 100%;
+        height: 100%;
+            
+        pointer-events: none;
+    }
     </style>
 
     <button type="button" data-toggle="dropdown" data-placement="right"
             aria-haspopup="true" aria-expanded="false" 
-            class="icon-action global-menu-button" title="Menu"></button>
+            class="icon-action global-menu-button" title="Menu">
+        <div class="global-menu-button-update-available"></div>
+    </button>
 
     <div class="dropdown-menu dropdown-menu-right">
         <a class="dropdown-item options-button" data-trigger-command="showOptions">
@@ -89,6 +105,11 @@ const TPL = `
             About Trilium Notes
         </a>
 
+        <a class="dropdown-item show-about-dialog-button">
+            <span class="bx bx-sync"></span>
+            Update to newest version
+        </a>
+
         <a class="dropdown-item logout-button" data-trigger-command="logout">
             <span class="bx bx-log-out"></span>
             Logout
@@ -96,8 +117,23 @@ const TPL = `
     </div>
 </div>
 `;
+const RELEASES_API_URL = "https://api.github.com/repos/zadam/trilium/releases/latest";
+const CURRENT_VERSION = process.env.npm_package_version;
 
 export default class GlobalMenuWidget extends BasicWidget {
+    static getVersionChange(oldVersion, newVersion) {
+        const [oldMajor, oldMinor, oldPatch] = oldVersion.split(".").map(Number);
+        const [newMajor, newMinor, newPatch] = newVersion.split(".").map(Number);
+
+        if (newMajor !== oldMajor) {
+            return "major";
+        } else if (newMinor !== oldMinor) {
+            return "minor";
+        } else if (newPatch !== oldPatch) {
+            return "patch";
+        }
+    }
+
     doRender() {
         this.$widget = $(TPL);
 
@@ -114,7 +150,32 @@ export default class GlobalMenuWidget extends BasicWidget {
         this.$widget.find(".open-dev-tools-button").toggle(isElectron);
         this.$widget.find(".switch-to-mobile-version-button").toggle(!isElectron);
 
+
         this.$widget.on('click', '.dropdown-item',
             () => this.$widget.find("[data-toggle='dropdown']").dropdown('toggle'));
+
+        this.loadUpdateAvailable();
+    }
+
+    async loadUpdateAvailable() {
+        const newVersion = await this.fetchNewVersion();
+
+        if (!newVersion) {
+            return;
+        }
+
+        const versionChange = "major";
+
+        this.$widget.find(".global-menu-button-update-available").append(
+            new UpdateAvailableWidget()
+                .withVersionChange(versionChange)
+                .render()
+        )
+    }
+
+    async fetchNewVersion() {
+        const {data} = await axios.get(RELEASES_API_URL);
+
+        return data.tag_name.substring(1);
     }
 }