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 {defineMessages, useVIntl} from "@vintl/vintl";
-import {computed, useTemplateRef, ref} from 'vue';
+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({
+const messages = defineMessages({
-  id: 'app.update.modal-header',
+  header: {
-  defaultMessage: `An update is available!`,
+    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"
   },

packages/assets/generated-icons.ts

@@ -129,6 +129,7 @@ import _RadioButtonCheckedIcon from './icons/radio-button-checked.svg?component'
 import _RadioButtonIcon from './icons/radio-button.svg?component'
 import _ReceiptTextIcon from './icons/receipt-text.svg?component'
 import _RedoIcon from './icons/redo.svg?component'
+import _RefreshCwIcon from './icons/refresh-cw.svg?component'
 import _ReplyIcon from './icons/reply.svg?component'
 import _ReportIcon from './icons/report.svg?component'
 import _RestoreIcon from './icons/restore.svg?component'
@@ -316,6 +317,7 @@ export const RadioButtonCheckedIcon = _RadioButtonCheckedIcon
 export const RadioButtonIcon = _RadioButtonIcon
 export const ReceiptTextIcon = _ReceiptTextIcon
 export const RedoIcon = _RedoIcon
+export const RefreshCwIcon = _RefreshCwIcon
 export const ReplyIcon = _ReplyIcon
 export const ReportIcon = _ReportIcon
 export const RestoreIcon = _RestoreIcon

packages/assets/icons/refresh-cw.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-refresh-cw-icon lucide-refresh-cw"><path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/><path d="M8 16H3v5"/></svg>