Fix auto updater, add failure message, fix modals (#2335)

* Fix auto updater, add failure message, fix modals

* Fix ads hiding, updater UI

* dummy version, fix gh actions cache

* fix release conf

* actual version bump

* Fix ads hiding sometimes

* Fix event state init

* fix remaining bugs

* Fix lint on linux

* Fix deep linking on Windows

* Fix ad links opening multiple times

apps/app-frontend/src/components/GridDisplay.vue

@@ -12,13 +12,13 @@ import {
   SearchIcon,
   XIcon,
 } from '@modrinth/assets'
-import { ConfirmModal, Button, Card, DropdownSelect } from '@modrinth/ui'
+import { Button, Card, DropdownSelect } from '@modrinth/ui'
 import { formatCategoryHeader } from '@modrinth/utils'
 import ContextMenu from '@/components/ui/ContextMenu.vue'
 import dayjs from 'dayjs'
-import { useTheming } from '@/store/theme.js'
 import { duplicate, remove } from '@/helpers/profile.js'
 import { handleError } from '@/store/notifications.js'
+import ConfirmModalWrapper from '@/components/ui/modal/ConfirmModalWrapper.vue'
 
 const props = defineProps({
   instances: {
@@ -35,7 +35,6 @@ const props = defineProps({
 const instanceOptions = ref(null)
 const instanceComponents = ref(null)
 
-const themeStore = useTheming()
 const currentDeleteInstance = ref(null)
 const confirmModal = ref(null)
 
@@ -230,13 +229,12 @@ const filteredResults = computed(() => {
 })
 </script>
 <template>
-  <ConfirmModal
+  <ConfirmModalWrapper
     ref="confirmModal"
     title="Are you sure you want to delete this instance?"
     description="If you proceed, all data for your instance will be removed. You will not be able to recover it."
     :has-to-type="false"
     proceed-label="Delete"
-    :noblur="!themeStore.advancedRendering"
     @proceed="deleteProfile"
   />
   <Card class="header">

apps/app-frontend/src/components/RowDisplay.vue

@@ -12,7 +12,7 @@ import {
   EyeIcon,
   ChevronRightIcon,
 } from '@modrinth/assets'
-import { ConfirmModal } from '@modrinth/ui'
+import ConfirmModalWrapper from '@/components/ui/modal/ConfirmModalWrapper.vue'
 import Instance from '@/components/ui/Instance.vue'
 import { computed, onMounted, onUnmounted, ref } from 'vue'
 import ContextMenu from '@/components/ui/ContextMenu.vue'
@@ -22,7 +22,6 @@ import { handleError } from '@/store/notifications.js'
 import { duplicate, kill, remove, run } from '@/helpers/profile.js'
 import { useRouter } from 'vue-router'
 import { showProfileInFolder } from '@/helpers/utils.js'
-import { useTheming } from '@/store/state.js'
 import { trackEvent } from '@/helpers/analytics'
 import { handleSevereError } from '@/store/error.js'
 import { install as installVersion } from '@/store/install.js'
@@ -53,7 +52,6 @@ const instanceComponents = ref(null)
 const rows = ref(null)
 const deleteConfirmModal = ref(null)
 
-const themeStore = useTheming()
 const currentDeleteInstance = ref(null)
 
 async function deleteProfile() {
@@ -207,13 +205,12 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <ConfirmModal
+  <ConfirmModalWrapper
     ref="deleteConfirmModal"
     title="Are you sure you want to delete this instance?"
     description="If you proceed, all data for your instance will be removed. You will not be able to recover it."
     :has-to-type="false"
     proceed-label="Delete"
-    :noblur="!themeStore.advancedRendering"
     @proceed="deleteProfile"
   />
   <div class="content">

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

@@ -5,7 +5,7 @@
     v-tooltip.right="'Minecraft accounts'"
     class="button-base avatar-button"
     :class="{ expanded: mode === 'expanded' }"
-    @click="showCard = !showCard"
+    @click="toggleMenu"
   >
     <Avatar
       :size="mode === 'expanded' ? 'xs' : 'sm'"
@@ -73,6 +73,7 @@ import { handleError } from '@/store/state.js'
 import { trackEvent } from '@/helpers/analytics'
 import { process_listener } from '@/helpers/events'
 import { handleSevereError } from '@/store/error.js'
+import { show_ads_window, hide_ads_window } from '@/helpers/ads.js'
 
 defineProps({
   mode: {
@@ -144,7 +145,20 @@ const handleClickOutside = (event) => {
     !elements.includes(card.value.$el) &&
     !button.value.contains(event.target)
   ) {
+    toggleMenu(false)
+  }
+}
+
+function toggleMenu(override = true) {
+  if (showCard.value || !override) {
+    if (showCard.value) {
+      show_ads_window()
+    }
+
     showCard.value = false
+  } else {
+    hide_ads_window()
+    showCard.value = true
   }
 }
 

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

@@ -20,7 +20,7 @@ const handleAddContentFromFile = async () => {
   if (!newProject) return
 
   for (const project of newProject) {
-    await add_project_from_path(props.instance.path, project).catch(handleError)
+    await add_project_from_path(props.instance.path, project.path).catch(handleError)
   }
 }
 

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

@@ -25,6 +25,7 @@
 
 <script setup>
 import { onBeforeUnmount, onMounted, ref } from 'vue'
+import { show_ads_window, hide_ads_window } from '@/helpers/ads.js'
 
 const emit = defineEmits(['menu-closed', 'option-clicked'])
 
@@ -37,6 +38,7 @@ const shown = ref(false)
 
 defineExpose({
   showMenu: (event, passedItem, passedOptions) => {
+    hide_ads_window()
     item.value = passedItem
     options.value = passedOptions
 
@@ -69,6 +71,9 @@ const isLinkedData = (item) => {
 }
 
 const hideContextMenu = () => {
+  if (shown.value) {
+    show_ads_window()
+  }
   shown.value = false
   emit('menu-closed')
 }

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

@@ -1,6 +1,5 @@
 <script setup>
 import { XIcon, HammerIcon, LogInIcon, UpdatedIcon } from '@modrinth/assets'
-import { Modal } from '@modrinth/ui'
 import { ChatIcon } from '@/assets/icons'
 import { ref } from 'vue'
 import { login as login_flow, set_default_user } from '@/helpers/auth.js'
@@ -9,6 +8,7 @@ import { handleSevereError } from '@/store/error.js'
 import { cancel_directory_change } from '@/helpers/settings.js'
 import { install } from '@/helpers/profile.js'
 import { trackEvent } from '@/helpers/analytics'
+import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
 
 const errorModal = ref()
 const error = ref()
@@ -121,7 +121,7 @@ async function repairInstance() {
 </script>
 
 <template>
-  <Modal ref="errorModal" :header="title" :closable="closable">
+  <ModalWrapper ref="errorModal" :header="title" :closable="closable">
     <div class="modal-body">
       <div class="markdown-body">
         <template v-if="errorType === 'minecraft_auth'">
@@ -272,7 +272,7 @@ async function repairInstance() {
         <button v-if="closable" class="btn" @click="errorModal.hide()"><XIcon /> Close</button>
       </div>
     </div>
-  </Modal>
+  </ModalWrapper>
 </template>
 
 <style>

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

@@ -1,12 +1,12 @@
 <script setup>
 import { XIcon, PlusIcon } from '@modrinth/assets'
-import { Button, Checkbox, Modal } from '@modrinth/ui'
+import { Button, Checkbox } from '@modrinth/ui'
 import { PackageIcon, VersionIcon } from '@/assets/icons'
 import { ref } from 'vue'
 import { export_profile_mrpack, get_pack_export_candidates } from '@/helpers/profile.js'
 import { open } from '@tauri-apps/plugin-dialog'
 import { handleError } from '@/store/notifications.js'
-import { useTheming } from '@/store/theme'
+import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
 
 const props = defineProps({
   instance: {
@@ -30,8 +30,6 @@ const files = ref([])
 const folders = ref([])
 const showingFiles = ref(false)
 
-const themeStore = useTheming()
-
 const initFiles = async () => {
   const newFolders = new Map()
   const sep = '/'
@@ -106,7 +104,7 @@ const exportPack = async () => {
 </script>
 
 <template>
-  <Modal ref="exportModal" header="Export modpack" :noblur="!themeStore.advancedRendering">
+  <ModalWrapper ref="exportModal" header="Export modpack">
     <div class="modal-body">
       <div class="labeled_input">
         <p>Modpack Name</p>
@@ -208,7 +206,7 @@ const exportPack = async () => {
         </Button>
       </div>
     </div>
-  </Modal>
+  </ModalWrapper>
 </template>
 
 <style scoped lang="scss">

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

@@ -1,5 +1,5 @@
 <template>
-  <Modal ref="modal" header="Create instance" :noblur="!themeStore.advancedRendering">
+  <ModalWrapper ref="modal" header="Create instance">
     <div class="modal-header">
       <Chips v-model="creationType" :items="['custom', 'from file', 'import from launcher']" />
     </div>
@@ -193,10 +193,11 @@
         />
       </div>
     </div>
-  </Modal>
+  </ModalWrapper>
 </template>
 
 <script setup>
+import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
 import {
   PlusIcon,
   UploadIcon,
@@ -207,7 +208,7 @@ import {
   FolderSearchIcon,
   UpdatedIcon,
 } from '@modrinth/assets'
-import { Avatar, Button, Chips, Modal, Checkbox } from '@modrinth/ui'
+import { Avatar, Button, Chips, Checkbox } from '@modrinth/ui'
 import { computed, onUnmounted, ref, shallowRef } from 'vue'
 import { get_loaders } from '@/helpers/tags'
 import { create } from '@/helpers/profile'
@@ -217,7 +218,6 @@ import { get_game_versions, get_loader_versions } from '@/helpers/metadata'
 import { handleError } from '@/store/notifications.js'
 import Multiselect from 'vue-multiselect'
 import { trackEvent } from '@/helpers/analytics'
-import { useTheming } from '@/store/state.js'
 import { listen } from '@tauri-apps/api/event'
 import { install_from_file } from '@/helpers/pack.js'
 import {
@@ -227,8 +227,6 @@ import {
 } from '@/helpers/import.js'
 import ProgressBar from '@/components/ui/ProgressBar.vue'
 
-const themeStore = useTheming()
-
 const profile_name = ref('')
 const game_version = ref('')
 const loader = ref('vanilla')
@@ -371,7 +369,7 @@ const create_instance = async () => {
 }
 
 const upload_icon = async () => {
-  icon.value = await open({
+  const res = await open({
     multiple: false,
     filters: [
       {
@@ -381,6 +379,8 @@ const upload_icon = async () => {
     ],
   })
 
+  icon.value = res ? res.path : null
+
   if (!icon.value) return
   display_icon.value = convertFileSrc(icon.value)
 }
@@ -417,7 +417,7 @@ const openFile = async () => {
   const newProject = await open({ multiple: false })
   if (!newProject) return
   hide()
-  await install_from_file(newProject).catch(handleError)
+  await install_from_file(newProject.path).catch(handleError)
 
   trackEvent('InstanceCreate', {
     source: 'CreationModalFileOpen',

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

@@ -1,5 +1,5 @@
 <template>
-  <Modal ref="detectJavaModal" header="Select java version" :noblur="!themeStore.advancedRendering">
+  <ModalWrapper ref="detectJavaModal" header="Select java version">
     <div class="auto-detect-modal">
       <div class="table">
         <div class="table-row table-head">
@@ -32,18 +32,16 @@
         </Button>
       </div>
     </div>
-  </Modal>
+  </ModalWrapper>
 </template>
 <script setup>
 import { PlusIcon, CheckIcon, XIcon } from '@modrinth/assets'
-import { Modal, Button } from '@modrinth/ui'
+import { Button } from '@modrinth/ui'
 import { ref } from 'vue'
 import { find_filtered_jres } from '@/helpers/jre.js'
 import { handleError } from '@/store/notifications.js'
-import { useTheming } from '@/store/theme.js'
 import { trackEvent } from '@/helpers/analytics'
-
-const themeStore = useTheming()
+import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
 
 const chosenInstallOptions = ref([])
 const detectJavaModal = ref(null)

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

@@ -127,17 +127,17 @@ async function handleJavaFileInput() {
   let filePath = await open()
 
   if (filePath) {
-    let result = await get_jre(filePath)
+    let result = await get_jre(filePath.path)
     if (!result) {
       result = {
-        path: filePath,
+        path: filePath.path,
         version: props.version.toString(),
         architecture: 'x86',
       }
     }
 
     trackEvent('JavaManualSelect', {
-      path: filePath,
+      path: filePath.path,
       version: props.version,
     })
 

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

@@ -1,11 +1,11 @@
 <script setup>
 import { CheckIcon } from '@modrinth/assets'
-import { Button, Modal, Badge } from '@modrinth/ui'
+import { Button, Badge } from '@modrinth/ui'
 import { computed, ref } from 'vue'
-import { useTheming } from '@/store/theme'
 import { update_managed_modrinth_version } from '@/helpers/profile'
 import { releaseColor } from '@/helpers/utils'
 import { SwapIcon } from '@/assets/icons/index.js'
+import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
 
 const props = defineProps({
   versions: {
@@ -33,8 +33,6 @@ const installedVersion = computed(() => props.instance?.linked_data?.version_id)
 const installing = computed(() => props.instance.install_stage !== 'installed')
 const inProgress = ref(false)
 
-const themeStore = useTheming()
-
 const switchVersion = async (versionId) => {
   inProgress.value = true
   await update_managed_modrinth_version(props.instance.path, versionId)
@@ -43,11 +41,10 @@ const switchVersion = async (versionId) => {
 </script>
 
 <template>
-  <Modal
+  <ModalWrapper
     ref="modpackVersionModal"
     class="modpack-version-modal"
     header="Change modpack version"
-    :noblur="!themeStore.advancedRendering"
   >
     <div class="modal-body">
       <Card v-if="instance.linked_data" class="mod-card">
@@ -111,7 +108,7 @@ const switchVersion = async (versionId) => {
         </div>
       </Card>
     </div>
-  </Modal>
+  </ModalWrapper>
 </template>
 
 <style scoped lang="scss">

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

@@ -32,26 +32,26 @@ let intersectionObserver
 let mutationObserver
 onMounted(() => {
   if (showAd.value) {
-    updateAdPosition()
+    updateAdPosition(true)
 
-    resizeObserver = new ResizeObserver(updateAdPosition)
+    resizeObserver = new ResizeObserver(() => updateAdPosition())
     resizeObserver.observe(adsWrapper.value)
 
-    intersectionObserver = new IntersectionObserver(updateAdPosition)
+    intersectionObserver = new IntersectionObserver(() => updateAdPosition())
     intersectionObserver.observe(adsWrapper.value)
 
-    mutationObserver = new MutationObserver(updateAdPosition)
+    mutationObserver = new MutationObserver(() => updateAdPosition())
     mutationObserver.observe(adsWrapper.value, { attributes: true, childList: true, subtree: true })
 
     // Add scroll event listener
     scrollHandler = () => {
-      requestAnimationFrame(updateAdPosition)
+      requestAnimationFrame(() => updateAdPosition())
     }
     window.addEventListener('scroll', scrollHandler, { passive: true })
   }
 })
 
-function updateAdPosition() {
+function updateAdPosition(overrideShown = false) {
   if (adsWrapper.value) {
     const rect = adsWrapper.value.getBoundingClientRect()
 
@@ -69,7 +69,7 @@ function updateAdPosition() {
       }
     }
 
-    init_ads_window(rect.left + window.scrollX, y, rect.right - rect.left, height)
+    init_ads_window(rect.left + window.scrollX, y, rect.right - rect.left, height, overrideShown)
   }
 }
 

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

@@ -130,9 +130,16 @@ const os = ref('')
 getOS().then((x) => (os.value = x))
 
 loading_listener(async (e) => {
+  console.log(e)
   if (e.event.type === 'directory_move') {
     loadingProgress.value = 100 * (e.fraction ?? 1)
     message.value = 'Updating app directory...'
+  } else if (e.event.type === 'launcher_update') {
+    loadingProgress.value = 100 * (e.fraction ?? 1)
+    message.value = 'Updating Modrinth App...'
+  } else if (e.event.type === 'checking_for_updates') {
+    loadingProgress.value = 100 * (e.fraction ?? 1)
+    message.value = 'Checking for updates...'
   }
 })
 

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

@@ -1,11 +1,12 @@
 <script setup>
-import { Modal, Button } from '@modrinth/ui'
+import { Button } from '@modrinth/ui'
 import { ref } from 'vue'
 import SearchCard from '@/components/ui/SearchCard.vue'
 import { get_categories } from '@/helpers/tags.js'
 import { handleError } from '@/store/notifications.js'
 import { get_version, get_project } from '@/helpers/cache.js'
 import { install as installVersion } from '@/store/install.js'
+import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
 
 const confirmModal = ref(null)
 const project = ref(null)
@@ -41,7 +42,7 @@ async function install() {
 </script>
 
 <template>
-  <Modal ref="confirmModal" :header="`Install ${project?.title}`">
+  <ModalWrapper ref="confirmModal" :header="`Install ${project?.title}`">
     <div class="modal-body">
       <SearchCard
         :project="project"
@@ -60,7 +61,7 @@ async function install() {
         </div>
       </div>
     </div>
-  </Modal>
+  </ModalWrapper>
 </template>
 
 <style scoped lang="scss">

apps/app-frontend/src/components/ui/install_flow/IncompatibilityWarningModal.vue

@@ -1,10 +1,5 @@
 <template>
-  <Modal
-    ref="incompatibleModal"
-    header="Incompatibility warning"
-    :noblur="!themeStore.advancedRendering"
-    :on-hide="onInstall"
-  >
+  <ModalWrapper ref="incompatibleModal" header="Incompatibility warning" :on-hide="onInstall">
     <div class="modal-body">
       <p>
         This {{ versions?.length > 0 ? 'project' : 'version' }} is not compatible with the instance
@@ -51,20 +46,19 @@
         </Button>
       </div>
     </div>
-  </Modal>
+  </ModalWrapper>
 </template>
 
 <script setup>
+import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
 import { XIcon, DownloadIcon } from '@modrinth/assets'
-import { Button, Modal, DropdownSelect } from '@modrinth/ui'
+import { Button, DropdownSelect } from '@modrinth/ui'
 import { formatCategory } from '@modrinth/utils'
 import { add_project_from_version as installMod } from '@/helpers/profile'
 import { ref } from 'vue'
-import { handleError, useTheming } from '@/store/state.js'
+import { handleError } from '@/store/state.js'
 import { trackEvent } from '@/helpers/analytics'
 
-const themeStore = useTheming()
-
 const instance = ref(null)
 const project = ref(null)
 const versions = ref(null)

apps/app-frontend/src/components/ui/install_flow/InstallConfirmModal.vue

@@ -1,13 +1,11 @@
 <script setup>
 import { XIcon, DownloadIcon } from '@modrinth/assets'
-import { Button, Modal } from '@modrinth/ui'
+import { Button } from '@modrinth/ui'
 import { install as pack_install } from '@/helpers/pack'
 import { ref } from 'vue'
 import { trackEvent } from '@/helpers/analytics'
-import { useTheming } from '@/store/theme.js'
 import { handleError } from '@/store/state.js'
-
-const themeStore = useTheming()
+import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
 
 const versionId = ref()
 const project = ref()
@@ -52,12 +50,7 @@ async function install() {
 </script>
 
 <template>
-  <Modal
-    ref="confirmModal"
-    header="Are you sure?"
-    :noblur="!themeStore.advancedRendering"
-    :on-hide="onInstall"
-  >
+  <ModalWrapper ref="confirmModal" header="Are you sure?" :on-hide="onInstall">
     <div class="modal-body">
       <p>You already have this modpack installed. Are you sure you want to install it again?</p>
       <div class="input-group push-right">
@@ -67,7 +60,7 @@ async function install() {
         >
       </div>
     </div>
-  </Modal>
+  </ModalWrapper>
 </template>
 
 <style lang="scss" scoped>

apps/app-frontend/src/components/ui/install_flow/ModInstallModal.vue

@@ -7,7 +7,7 @@ import {
   RightArrowIcon,
   CheckIcon,
 } from '@modrinth/assets'
-import { Avatar, Modal, Button, Card } from '@modrinth/ui'
+import { Avatar, Button, Card } from '@modrinth/ui'
 import { computed, ref } from 'vue'
 import {
   add_project_from_version as installMod,
@@ -19,12 +19,11 @@ import {
 import { open } from '@tauri-apps/plugin-dialog'
 import { installVersionDependencies } from '@/store/install.js'
 import { handleError } from '@/store/notifications.js'
-import { useTheming } from '@/store/theme.js'
 import { useRouter } from 'vue-router'
 import { convertFileSrc } from '@tauri-apps/api/core'
 import { trackEvent } from '@/helpers/analytics'
+import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
 
-const themeStore = useTheming()
 const router = useRouter()
 
 const versions = ref()
@@ -142,7 +141,7 @@ const toggleCreation = () => {
 }
 
 const upload_icon = async () => {
-  icon.value = await open({
+  const res = await open({
     multiple: false,
     filters: [
       {
@@ -151,6 +150,7 @@ const upload_icon = async () => {
       },
     ],
   })
+  icon.value = res ? res.path : null
 
   if (!icon.value) return
   display_icon.value = convertFileSrc(icon.value)
@@ -213,12 +213,7 @@ const createInstance = async () => {
 </script>
 
 <template>
-  <Modal
-    ref="installModal"
-    header="Install project to instance"
-    :noblur="!themeStore.advancedRendering"
-    :on-hide="onInstall"
-  >
+  <ModalWrapper ref="installModal" header="Install project to instance" :on-hide="onInstall">
     <div class="modal-body">
       <input
         v-model="searchFilter"
@@ -304,7 +299,7 @@ const createInstance = async () => {
         <Button @click="installModal.hide()">Cancel</Button>
       </div>
     </div>
-  </Modal>
+  </ModalWrapper>
 </template>
 
 <style scoped lang="scss">

apps/app-frontend/src/components/ui/modal/ConfirmModalWrapper.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { ConfirmModal } from '@modrinth/ui'
+import { show_ads_window, hide_ads_window } from '@/helpers/ads.js'
+import { useTheming } from '@/store/theme.js'
+
+const themeStore = useTheming()
+
+defineProps({
+  confirmationText: {
+    type: String,
+    default: '',
+  },
+  hasToType: {
+    type: Boolean,
+    default: false,
+  },
+  title: {
+    type: String,
+    default: 'No title defined',
+    required: true,
+  },
+  description: {
+    type: String,
+    default: 'No description defined',
+    required: true,
+  },
+  proceedLabel: {
+    type: String,
+    default: 'Proceed',
+  },
+})
+
+const emit = defineEmits(['proceed'])
+const modal = ref(null)
+
+defineExpose({
+  show: () => {
+    hide_ads_window()
+    modal.value.show()
+  },
+  hide: () => {
+    onModalHide()
+    modal.value.hide()
+  },
+})
+
+function onModalHide() {
+  show_ads_window()
+}
+
+function proceed() {
+  emit('proceed')
+}
+</script>
+
+<template>
+  <ConfirmModal
+    ref="modal"
+    :confirmation-text="confirmationText"
+    :has-to-type="hasToType"
+    :title="title"
+    :description="description"
+    :proceed-label="proceedLabel"
+    :on-hide="onModalHide"
+    :noblur="!themeStore.advancedRendering"
+    @proceed="proceed"
+  />
+</template>

apps/app-frontend/src/components/ui/modal/ModalWrapper.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Modal } from '@modrinth/ui'
+import { show_ads_window, hide_ads_window } from '@/helpers/ads.js'
+import { useTheming } from '@/store/theme.js'
+
+const themeStore = useTheming()
+
+const props = defineProps({
+  header: {
+    type: String,
+    default: null,
+  },
+  closable: {
+    type: Boolean,
+    default: true,
+  },
+  onHide: {
+    type: Function,
+    default() {
+      return () => {}
+    },
+  },
+})
+
+const modal = ref(null)
+
+defineExpose({
+  show: () => {
+    hide_ads_window()
+    modal.value.show()
+  },
+  hide: () => {
+    onModalHide()
+    modal.value.hide()
+  },
+})
+
+function onModalHide() {
+  show_ads_window()
+  props.onHide()
+}
+</script>
+
+<template>
+  <Modal ref="modal" :header="header" :noblur="!themeStore.advancedRendering" @hide="onModalHide">
+    <slot />
+  </Modal>
+</template>

apps/app-frontend/src/components/ui/modal/ShareModalWrapper.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { ShareModal } from '@modrinth/ui'
+import { show_ads_window, hide_ads_window } from '@/helpers/ads.js'
+import { useTheming } from '@/store/theme.js'
+
+const themeStore = useTheming()
+
+defineProps({
+  header: {
+    type: String,
+    default: 'Share',
+  },
+  shareTitle: {
+    type: String,
+    default: 'Modrinth',
+  },
+  shareText: {
+    type: String,
+    default: null,
+  },
+  link: {
+    type: Boolean,
+    default: false,
+  },
+  openInNewTab: {
+    type: Boolean,
+    default: true,
+  },
+})
+
+const modal = ref(null)
+
+defineExpose({
+  show: (passedContent) => {
+    hide_ads_window()
+    modal.value.show(passedContent)
+  },
+  hide: () => {
+    onModalHide()
+    modal.value.hide()
+  },
+})
+
+function onModalHide() {
+  show_ads_window()
+}
+</script>
+
+<template>
+  <ShareModal
+    ref="modal"
+    :header="header"
+    :share-title="shareTitle"
+    :share-text="shareText"
+    :link="link"
+    :open-in-new-tab="openInNewTab"
+    :on-hide="onModalHide"
+    :noblur="!themeStore.advancedRendering"
+  />
+</template>

apps/app-frontend/src/components/ui/tutorial/ModrinthLoginScreen.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { UserIcon, LockIcon, MailIcon } from '@modrinth/assets'
-import { Button, Card, Checkbox, Modal } from '@modrinth/ui'
+import { Button, Card, Checkbox } from '@modrinth/ui'
 import {
   DiscordIcon,
   GithubIcon,
@@ -13,6 +13,7 @@ import { login, login_2fa, create_account, login_pass } from '@/helpers/mr_auth.
 import { handleError, useNotifications } from '@/store/state.js'
 import { ref } from 'vue'
 import { handleSevereError } from '@/store/error.js'
+import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
 
 const props = defineProps({
   callback: {
@@ -132,7 +133,7 @@ async function createAccount() {
 </script>
 
 <template>
-  <Modal ref="modal" :on-hide="removeWidget">
+  <ModalWrapper ref="modal" :on-hide="removeWidget">
     <Card>
       <template v-if="twoFactorFlow">
         <h1>Enter two-factor code</h1>
@@ -217,17 +218,17 @@ async function createAccount() {
           v-else-if="loggingIn"
           color="primary"
           large
-          @click="signIn"
           :disabled="!turnstileToken"
+          @click="signIn"
         >
           Login
         </Button>
-        <Button v-else color="primary" large @click="createAccount" :disabled="!turnstileToken">
+        <Button v-else color="primary" large :disabled="!turnstileToken" @click="createAccount">
           Create account
         </Button>
       </div>
     </Card>
-  </Modal>
+  </ModalWrapper>
 </template>
 
 <style scoped lang="scss">