install update button

package.json

@@ -2,7 +2,7 @@
   "name": "amethyst",
   "author": "Geoxor <[email protected]>",
   "productName": "Amethyst",
-  "version": "1.7.1",
+  "version": "1.7.2",
   "main": "./release/dist/main/main.js",
   "licenses": [
     {

src/main/mainWindow.ts

@@ -49,7 +49,7 @@ export class MainWindow {
 		show: false,
 		width: 1280,
 		height: 720,
-		minHeight: 100,
+		minHeight: 500,
 		minWidth: 800,
 		icon: icon(),
 		frame: false,
@@ -116,14 +116,14 @@ export class MainWindow {
 		this.window.on("minimize", () => this.window.webContents.send("minimize"));
 		this.window.on("unmaximize", () => this.window.webContents.send("unmaximize"));
 		this.window.on("maximize", () => this.window.webContents.send("maximize"));
-
 		this.window.on("closed", () => this.destroy());
+
+		autoUpdater.on("update-downloaded", () => this.window.webContents.send("update"))
+
 		this.window.webContents.on("dom-ready", async () => {
 			if (process.argv[1])
 				this.playAudio(process.argv[1]);
 
-
-
 			this.window.webContents.send("default-cover", await fs.promises.readFile(
 				path.join(RESOURCES_PATH, "/images/default-cover.png"),
 			));

src/main/preload.ts

@@ -17,6 +17,7 @@ export type Channels =
 	"update-rich-presence" |
 	"sync-window-state" |
 	"drop-file" |
+	"update" |
 	"get-cover-colors" |
 	"open-preferences" |
 	"test-notification" |

src/renderer/app.pcss

@@ -10,6 +10,11 @@
   src: url("../../assets/fonts/aseprite-remix.ttf");
 }
 
+*.font-aseprite {
+  font-family: "aseprite";
+  @apply text-7px;
+}
+
 * {
   cursor: url("./cursors/default.png"), auto !important;
   font-family: "jost";

src/renderer/components/MenuBar.vue

@@ -2,13 +2,15 @@
 import { bytesToHuman } from '../logic/formating';
 import { useState, useElectron, usePlayer } from "../amethyst";
 import ControlButtons from "./ControlButtons.vue";
+import { useRoute } from "vue-router";
 import Menu from "./Menu.vue";
 import MenuOption from "./MenuOption.vue";
 import MenuSplitter from "./MenuSplitter.vue";
 import ProcessorUsageMeter from "./ProcessorUsageMeter.vue";
 const state = useState();
 const electron = useElectron();
 const player = usePlayer();
+const route = useRoute();
 
 </script>
 
@@ -35,19 +37,25 @@ const player = usePlayer();
         <menu-option :title="`Check for updates`" @click="electron.invoke('check-for-updates')" />
       </Menu>
       <Menu title="Debug" v-if="state.isDev.value">
+        <menu-option title="Set 'updateReady' to 'true'" @click="state.state.updateReady = true;" />
+        <menu-option title="Set 'updateReady' to 'false'" @click="state.state.updateReady = false;" />
+        <menu-splitter />
         <menu-option title="Test 'UpdateInstallingNotification'"
           @click="electron.invoke('test-notification', ['showUpdateInstallingNotification'])" />
         <menu-option title="Test 'UpdateAvailableNotification'"
           @click="electron.invoke('test-notification', ['showUpdateAvailableNotification'])" />
       </Menu>
     </div>
 
-    <p class="absolute left-1/2 transform-gpu -translate-x-1/2">
+    <p class="">
       Amethyst v{{ state.state.version }}
     </p>
 
 
-    <div class="flex gap-2 items-center overflow-hidden">
+    <div class="flex gap-2 items-center overflow-hidden font-aseprite">
+      <button @click="electron.close(route.name as string)" v-if="state.state.updateReady"
+        class="no-drag py-1 px-2 cursor-pointer bg-green-900 bg-opacity-50 text-green-400 hover:bg-green-400 active:text-black hover:text-black active:bg-primary-900">INSTALL
+        UPDATE</button>
       <processor-usage-meter />
       <control-buttons />
     </div>

src/renderer/components/NavigationButton.vue

@@ -3,7 +3,7 @@
     class="p-4 items-center hover:text-primary flex transition relative duration-200 justify-center">
     <component :is="icon" />
     <div v-if="notifs"
-      class="absolute top-2 right-0 transform -translate-x-1/2 p-0.5 overflow-hidden text-primary font-small text-7px items-center flex justify-center">
+      class="absolute top-2 right-0 transform -translate-x-1/2 p-0.5 overflow-hidden text-primary font-aseprite text-7px items-center flex justify-center">
       {{ notifs }}
     </div>
   </div>
@@ -15,4 +15,5 @@ defineProps<{ icon: any, active: boolean, notifs?: number }>();
 </script>
 
 <style scoped lang="postcss">
+
 </style>

src/renderer/components/ProcessorUsageMeter.vue

@@ -1,12 +1,11 @@
 <template>
-  <div
-    class="font-small flex justify-center relative items-center text-7px bg-surface-600 text-white w-12 h-3.5 box-content border-[#303030]">
-    <p class="z-10">{{ state.state.cpuUsage.toFixed(0)}}%</p>
+  <div class=" flex justify-center relative items-center bg-surface-600 text-primary-900 w-12 h-3.5 box-content ">
+    <p class="font-aseprite z-10">{{ state.state.cpuUsage.toFixed(0)}}%</p>
     <div class="bg-primary-800 h-full h-full absolute top-0 left-0" :style="`width: ${state.state.cpuUsage}%;`" />
   </div>
 </template>
 
 <script setup lang="ts">
 import { useState } from '../amethyst';
 const state = useState();
-</script>
+</script>

src/renderer/components/input/DraggableModifierInput.vue

@@ -1,6 +1,7 @@
 
 <template>
-  <div ref="modifier" class="modifier font-small" @mousedown.passive="onMouseDown" @mouseup.passive="dragging = false">
+  <div ref="modifier" class="modifier font-aseprite" @mousedown.passive="onMouseDown"
+    @mouseup.passive="dragging = false">
     <div :class="{ pop }">
       <h1 class="absolute z-10 top-2px">
         {{ displayValue }}

src/renderer/electronEventManager.ts

@@ -11,10 +11,12 @@ export default class ElectronEventManager {
     this.electron.on<Buffer>("default-cover", image => state.state.defaultCover = URL.createObjectURL(new Blob([image], { type: "image/png" })));
 
     // These are state syncs that get emitted on every state change
-
     this.electron.on("maximize", () => state.state.isMaximized = true);
     this.electron.on("unmaximize", () => state.state.isMaximized = false);
     this.electron.on("minimize", () => state.state.isMinimized = true);
+
+    // Shows the update button on the menu bar whenever theres an update ready to be installed
+    this.electron.on("update", () => state.state.updateReady = true);
   }
 
   public syncWindowState = async () => {

src/renderer/state.ts

@@ -8,6 +8,7 @@ export default class AppState {
 		version: "",
 		isMinimized: false,
 		isMaximized: false,
+		updateReady: false,
 		processQueue: new Set(),
 		coverProcessQueue: 0,
 		bpmProcessQueue: 0,