Add in the buttons and body

apps/app-frontend/src/App.vue

@@ -364,7 +364,7 @@ async function checkUpdates() {
     updateAvailable.value = !!update
     if (updateAvailable.value) {
       console.log(`Update ${update.version} is available. Showing update modal.`)
-      updateModal.value.show()
+      updateModal.value.show(update)
     }
   }
 

apps/app-frontend/src/components/ui/UpdateModal.vue

@@ -1,32 +1,76 @@
 <template>
   <ModalWrapper
     ref="modal"
-    :header="header"
+    :header="formatMessage(messages.header)"
   >
+    <div>{{ formatMessage(messages.body, { version: update!.version }) }}</div>
+    <div class="mt-4 flex flex-wrap gap-2">
+      <ButtonStyled color="green">
+        <button>
+          <RefreshCwIcon />
+          {{ formatMessage(messages.restartNow) }}
+        </button>
+      </ButtonStyled>
+      <ButtonStyled>
+        <button @click="hide()">
+          {{ formatMessage(messages.later) }}
+        </button>
+      </ButtonStyled>
+      <ButtonStyled>
+        <button>
+          {{ formatMessage(messages.skip) }}
+        </button>
+      </ButtonStyled>
+    </div>
   </ModalWrapper>
 </template>
 
 <script setup lang="ts">
 import ModalWrapper from "@/components/ui/modal/ModalWrapper.vue";
-import {defineMessage, useVIntl} from "@vintl/vintl";
-import {computed, useTemplateRef, ref} from 'vue';
+import {defineMessages, useVIntl} from "@vintl/vintl";
+import {useTemplateRef, ref} from 'vue';
+import {Update} from "@tauri-apps/plugin-updater";
+import {ButtonStyled} from "@modrinth/ui";
+import {RefreshCwIcon} from "@modrinth/assets";
 
 const {formatMessage} = useVIntl();
 
-const headerMessage = defineMessage({
-  id: 'app.update.modal-header',
-  defaultMessage: `An update is available!`,
+const messages = defineMessages({
+  header: {
+    id: 'app.update.modal-header',
+    defaultMessage: 'An update is available!',
+  },
+  body: {
+    id: 'app.update.modal-body',
+    defaultMessage: 'Version {version} of the Modrinth App is available for installation.',
+  },
+  restartNow: {
+    id: 'app.update.restart',
+    defaultMessage: 'Restart Now',
+  },
+  later: {
+    id: 'app.update.later',
+    defaultMessage: 'Later',
+  },
+  skip: {
+    id: 'app.update.skip',
+    defaultMessage: 'Skip This Update',
+  },
 })
-const header = computed(() => formatMessage(headerMessage))
+
+const update = ref<Update>();
 
 const modal = useTemplateRef('modal')
 const isOpen = ref(false)
-function show() {
-  modal.value.show()
+
+function show(newUpdate: Update) {
+  update.value = newUpdate;
+  modal.value!.show()
   isOpen.value = true
 }
+
 function hide() {
-  modal.value.hide()
+  modal.value!.hide()
   isOpen.value = false
 }
 

apps/app-frontend/src/locales/en-US/index.json

@@ -20,9 +20,21 @@
   "app.settings.tabs.resource-management": {
     "message": "Resource management"
   },
+  "app.update.later": {
+    "message": "Later"
+  },
+  "app.update.modal-body": {
+    "message": "Version {version} of the Modrinth App is available for installation."
+  },
   "app.update.modal-header": {
     "message": "An update is available!"
   },
+  "app.update.restart": {
+    "message": "Restart Now"
+  },
+  "app.update.skip": {
+    "message": "Skip This Update"
+  },
   "instance.add-server.add-and-play": {
     "message": "Add and play"
   },