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
2024-08-30 10:42:58 -07:00
parent 016c3d779b
commit bd61f5d591
70 changed files with 941 additions and 310 deletions
--- a/apps/app-frontend/src/App.vue
+++ b/apps/app-frontend/src/App.vue
@@ -1,7 +1,15 @@
 <script setup>
 import { computed, ref, onMounted } from 'vue'
 import { RouterView, RouterLink, useRouter, useRoute } from 'vue-router'
-import { HomeIcon, SearchIcon, LibraryIcon, PlusIcon, SettingsIcon, XIcon } from '@modrinth/assets'
+import {
+  HomeIcon,
+  SearchIcon,
+  LibraryIcon,
+  PlusIcon,
+  SettingsIcon,
+  XIcon,
+  DownloadIcon,
+} from '@modrinth/assets'
 import { Button, Notifications } from '@modrinth/ui'
 import { useLoading, useTheming } from '@/store/state'
 import AccountsCard from '@/components/ui/AccountsCard.vue'
@@ -16,7 +24,7 @@ import { handleError, useNotifications } from '@/store/notifications.js'
 import { command_listener, warning_listener } from '@/helpers/events.js'
 import { MinimizeIcon, MaximizeIcon } from '@/assets/icons'
 import { type } from '@tauri-apps/plugin-os'
-import { isDev, getOS } from '@/helpers/utils.js'
+import { isDev, getOS, restartApp } from '@/helpers/utils.js'
 import { initAnalytics, debugAnalytics, optOutAnalytics, trackEvent } from '@/helpers/analytics'
 import { getCurrentWindow } from '@tauri-apps/api/window'
 import { getVersion } from '@tauri-apps/api/app'
@@ -32,6 +40,9 @@ import { invoke } from '@tauri-apps/api/core'
 import { open } from '@tauri-apps/plugin-shell'
 import { get_opening_command, initialize_state } from '@/helpers/state'
 import { saveWindowState, StateFlags } from '@tauri-apps/plugin-window-state'
+import { renderString } from '@modrinth/utils'
+import { useFetch } from '@/helpers/fetch.js'
+import { check } from '@tauri-apps/plugin-updater'

 const themeStore = useTheming()

@@ -52,6 +63,8 @@ const os = ref('')

 const stateInitialized = ref(false)

+const criticalErrorMessage = ref()
+
 onMounted(async () => {
  await useCheckDisableMouseover()
 })
@@ -108,7 +121,18 @@ async function setupApp() {
    }),
  )

+  useFetch(
+    `https://api.modrinth.com/appCriticalAnnouncement.json?version=${version}`,
+    'criticalAnnouncements',
+    true,
+  ).then((res) => {
+    if (res && res.header && res.body) {
+      criticalErrorMessage.value = res
+    }
+  })
+
  get_opening_command().then(handleCommand)
+  checkUpdates()
 }

 const stateFailed = ref(false)
@@ -218,6 +242,20 @@ async function handleCommand(e) {
    urlModal.value.show(e)
  }
 }
+
+const updateAvailable = ref(false)
+async function checkUpdates() {
+  const update = await check()
+  console.log(update)
+  updateAvailable.value = !!update
+
+  setTimeout(
+    () => {
+      checkUpdates()
+    },
+    5 * 1000 * 60,
+  )
+}
 </script>

 <template>
@@ -251,6 +289,14 @@ async function handleCommand(e) {
        </div>
      </div>
      <div class="settings pages-list">
+        <button
+          v-if="updateAvailable"
+          v-tooltip="'Install update'"
+          class="btn btn-outline btn-primary icon-only collapsed-button"
+          @click="restartApp()"
+        >
+          <DownloadIcon />
+        </button>
        <Button
          v-tooltip="'Create profile'"
          class="sleek-primary collapsed-button"
@@ -266,6 +312,10 @@ async function handleCommand(e) {
      </div>
    </div>
    <div class="view">
+      <div v-if="criticalErrorMessage" class="critical-error-banner" data-tauri-drag-region>
+        <h1>{{ criticalErrorMessage.header }}</h1>
+        <div class="markdown-body" v-html="renderString(criticalErrorMessage.body ?? '')"></div>
+      </div>
      <div class="appbar-row">
        <div data-tauri-drag-region class="appbar">
          <section class="navigation-controls">
@@ -378,6 +428,16 @@ async function handleCommand(e) {
    width: calc(100% - var(--sidebar-width));
    background-color: var(--color-raised-bg);

+    .critical-error-banner {
+      margin-top: -1.25rem;
+      padding: 1rem;
+      background-color: rgba(203, 34, 69, 0.1);
+      border-left: 2px solid var(--color-red);
+      border-bottom: 2px solid var(--color-red);
+      border-right: 2px solid var(--color-red);
+      border-radius: 1rem;
+    }
+
    .appbar {
      display: flex;
      align-items: center;
--- a/apps/app-frontend/src/components/GridDisplay.vue
+++ b/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">
--- a/apps/app-frontend/src/components/RowDisplay.vue
+++ b/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">
--- a/apps/app-frontend/src/components/ui/AccountsCard.vue
+++ b/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
  }
 }

--- a/apps/app-frontend/src/components/ui/AddContentButton.vue
+++ b/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)
  }
 }

--- a/apps/app-frontend/src/components/ui/ContextMenu.vue
+++ b/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')
 }
--- a/apps/app-frontend/src/components/ui/ErrorModal.vue
+++ b/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>
--- a/apps/app-frontend/src/components/ui/ExportModal.vue
+++ b/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">
--- a/apps/app-frontend/src/components/ui/InstanceCreationModal.vue
+++ b/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',
--- a/apps/app-frontend/src/components/ui/JavaDetectionModal.vue
+++ b/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)
--- a/apps/app-frontend/src/components/ui/JavaSelector.vue
+++ b/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,
    })

--- a/apps/app-frontend/src/components/ui/ModpackVersionModal.vue
+++ b/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">
--- a/apps/app-frontend/src/components/ui/PromotionWrapper.vue
+++ b/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)
  }
 }

--- a/apps/app-frontend/src/components/ui/SplashScreen.vue
+++ b/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...'
  }
 })

--- a/apps/app-frontend/src/components/ui/URLConfirmModal.vue
+++ b/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">
--- a/apps/app-frontend/src/components/ui/install_flow/IncompatibilityWarningModal.vue
+++ b/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)
--- a/apps/app-frontend/src/components/ui/install_flow/InstallConfirmModal.vue
+++ b/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>
--- a/apps/app-frontend/src/components/ui/install_flow/ModInstallModal.vue
+++ b/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">
--- a/apps/app-frontend/src/components/ui/modal/ConfirmModalWrapper.vue
+++ b/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>
--- a/apps/app-frontend/src/components/ui/modal/ModalWrapper.vue
+++ b/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>
--- a/apps/app-frontend/src/components/ui/modal/ShareModalWrapper.vue
+++ b/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>
--- a/apps/app-frontend/src/components/ui/tutorial/ModrinthLoginScreen.vue
+++ b/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">
--- a/apps/app-frontend/src/helpers/ads.js
+++ b/apps/app-frontend/src/helpers/ads.js
@@ -1,9 +1,13 @@
 import { invoke } from '@tauri-apps/api/core'

-export async function init_ads_window(x, y, width, height) {
-  return await invoke('plugin:ads|init_ads_window', { x, y, width, height })
+export async function init_ads_window(x, y, width, height, overrideShown = false) {
+  return await invoke('plugin:ads|init_ads_window', { x, y, width, height, overrideShown })
 }

-export async function hide_ads_window() {
-  return await invoke('plugin:ads|hide_ads_window')
+export async function show_ads_window() {
+  return await invoke('plugin:ads|show_ads_window')
+}
+
+export async function hide_ads_window(reset) {
+  return await invoke('plugin:ads|hide_ads_window', { reset })
 }
--- a/apps/app-frontend/src/helpers/utils.js
+++ b/apps/app-frontend/src/helpers/utils.js
@@ -33,6 +33,10 @@ export async function highlightModInProfile(profilePath, projectPath) {
  return await highlightInFolder(fullPath)
 }

+export async function restartApp() {
+  return await invoke('restart_app')
+}
+
 export const releaseColor = (releaseType) => {
  switch (releaseType) {
    case 'release':
--- a/apps/app-frontend/src/pages/Browse.vue
+++ b/apps/app-frontend/src/pages/Browse.vue
@@ -884,6 +884,7 @@ const isModProject = computed(() => ['modpack', 'mod'].includes(projectType.valu
    height: fit-content;
    min-height: calc(100vh - 3.25rem);
    max-height: calc(100vh - 3.25rem);
+    width: 20rem;
    overflow-y: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
@@ -902,8 +903,8 @@ const isModProject = computed(() => ['modpack', 'mod'].includes(projectType.valu
  }

  .search {
-    margin: 0 1rem 0.5rem calc(300px + 2.5rem);
-    width: calc(100% - calc(300px + 2.5rem));
+    margin: 0 1rem 0.5rem calc(20rem + 1rem);
+    width: calc(100% - calc(20rem + 1rem));

    .offline {
      margin: 1rem;
--- a/apps/app-frontend/src/pages/Index.vue
+++ b/apps/app-frontend/src/pages/Index.vue
@@ -11,7 +11,7 @@ import { get_search_results } from '@/helpers/cache.js'
 import { hide_ads_window } from '@/helpers/ads.js'

 onMounted(() => {
-  hide_ads_window()
+  hide_ads_window(true)
 })

 const featuredModpacks = ref({})
--- a/apps/app-frontend/src/pages/Library.vue
+++ b/apps/app-frontend/src/pages/Library.vue
@@ -13,7 +13,7 @@ import { NewInstanceImage } from '@/assets/icons'
 import { hide_ads_window } from '@/helpers/ads.js'

 onMounted(() => {
-  hide_ads_window()
+  hide_ads_window(true)
 })

 const route = useRoute()
--- a/apps/app-frontend/src/pages/Settings.vue
+++ b/apps/app-frontend/src/pages/Settings.vue
@@ -1,7 +1,7 @@
 <script setup>
 import { ref, watch, onMounted } from 'vue'
 import { LogOutIcon, LogInIcon, BoxIcon, FolderSearchIcon, TrashIcon } from '@modrinth/assets'
-import { Card, Slider, DropdownSelect, Toggle, ConfirmModal, Button } from '@modrinth/ui'
+import { Card, Slider, DropdownSelect, Toggle, Button } from '@modrinth/ui'
 import { handleError, useTheming } from '@/store/state'
 import { get, set } from '@/helpers/settings'
 import { get_java_versions, get_max_memory, set_java_version } from '@/helpers/jre'
@@ -14,6 +14,7 @@ import { getOS } from '@/helpers/utils.js'
 import { getVersion } from '@tauri-apps/api/app'
 import { get_user, purge_cache_types } from '@/helpers/cache.js'
 import { hide_ads_window } from '@/helpers/ads.js'
+import ConfirmModalWrapper from '@/components/ui/modal/ConfirmModalWrapper.vue'

 onMounted(() => {
  hide_ads_window()
@@ -174,13 +175,12 @@ async function purgeCache() {
          Sign in
        </button>
      </div>
-      <ConfirmModal
+      <ConfirmModalWrapper
        ref="purgeCacheConfirmModal"
        title="Are you sure you want to purge the cache?"
        description="If you proceed, your entire cache will be purged. This may slow down the app temporarily."
        :has-to-type="false"
        proceed-label="Purge cache"
-        :noblur="!themeStore.advancedRendering"
        @proceed="purgeCache"
      />
      <div class="adjacent-input">
--- a/apps/app-frontend/src/pages/instance/Logs.vue
+++ b/apps/app-frontend/src/pages/instance/Logs.vue
@@ -76,7 +76,7 @@
        </div>
      </RecycleScroller>
    </div>
-    <ShareModal
+    <ShareModalWrapper
      ref="shareModal"
      header="Share Log"
      share-title="Instance Log"
@@ -89,7 +89,7 @@

 <script setup>
 import { CheckIcon, ClipboardCopyIcon, ShareIcon, TrashIcon } from '@modrinth/assets'
-import { Button, Card, ShareModal, Checkbox, DropdownSelect } from '@modrinth/ui'
+import { Button, Card, Checkbox, DropdownSelect } from '@modrinth/ui'
 import {
  delete_logs_by_filename,
  get_logs,
@@ -107,6 +107,7 @@ import { handleError } from '@/store/notifications.js'
 import { ofetch } from 'ofetch'
 import { RecycleScroller } from 'vue-virtual-scroller'
 import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
+import ShareModalWrapper from '@/components/ui/modal/ShareModalWrapper.vue'

 dayjs.extend(isToday)
 dayjs.extend(isYesterday)
--- a/apps/app-frontend/src/pages/instance/Mods.vue
+++ b/apps/app-frontend/src/pages/instance/Mods.vue
@@ -284,7 +284,7 @@
    :link-function="(page) => `?page=${page}`"
    @switch-page="switchPage"
  />
-  <Modal ref="deleteWarning" header="Are you sure?">
+  <ModalWrapper ref="deleteWarning" header="Are you sure?">
    <div class="modal-body">
      <div class="markdown-body">
        <p>
@@ -302,8 +302,8 @@
        </Button>
      </div>
    </div>
-  </Modal>
-  <Modal ref="deleteDisabledWarning" header="Are you sure?">
+  </ModalWrapper>
+  <ModalWrapper ref="deleteDisabledWarning" header="Are you sure?">
    <div class="modal-body">
      <div class="markdown-body">
        <p>
@@ -325,8 +325,8 @@
        </Button>
      </div>
    </div>
-  </Modal>
-  <ShareModal
+  </ModalWrapper>
+  <ShareModalWrapper
    ref="shareModal"
    share-title="Sharing modpack content"
    share-text="Check out the projects I'm using in my modpack!"
@@ -360,8 +360,6 @@ import {
 import {
  Pagination,
  DropdownSelect,
-  ShareModal,
-  Modal,
  Checkbox,
  AnimatedLogo,
  Avatar,
@@ -393,6 +391,8 @@ import {
  get_version_many,
 } from '@/helpers/cache.js'
 import { profile_listener } from '@/helpers/events.js'
+import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
+import ShareModalWrapper from '@/components/ui/modal/ShareModalWrapper.vue'

 const props = defineProps({
  instance: {
@@ -784,6 +784,7 @@ const deleteDisabled = async () => {
 }

 const shareNames = async () => {
+  console.log(functionValues.value)
  await shareModal.value.show(functionValues.value.map((x) => x.name).join('\n'))
 }

--- a/apps/app-frontend/src/pages/instance/Options.vue
+++ b/apps/app-frontend/src/pages/instance/Options.vue
@@ -1,18 +1,13 @@
 <template>
-  <ConfirmModal
+  <ConfirmModalWrapper
    ref="modal_confirm"
    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="removeProfile"
  />
-  <Modal
-    ref="modalConfirmUnlock"
-    header="Are you sure you want to unlock this instance?"
-    :noblur="!themeStore.advancedRendering"
-  >
+  <ModalWrapper ref="modalConfirmUnlock" header="Are you sure you want to unlock this instance?">
    <div class="modal-delete">
      <div
        class="markdown-body"
@@ -31,13 +26,9 @@
        </button>
      </div>
    </div>
-  </Modal>
+  </ModalWrapper>

-  <Modal
-    ref="modalConfirmUnpair"
-    header="Are you sure you want to unpair this instance?"
-    :noblur="!themeStore.advancedRendering"
-  >
+  <ModalWrapper ref="modalConfirmUnpair" header="Are you sure you want to unpair this instance?">
    <div class="modal-delete">
      <div
        class="markdown-body"
@@ -56,13 +47,9 @@
        </button>
      </div>
    </div>
-  </Modal>
+  </ModalWrapper>

-  <Modal
-    ref="changeVersionsModal"
-    header="Change instance versions"
-    :noblur="!themeStore.advancedRendering"
-  >
+  <ModalWrapper ref="changeVersionsModal" header="Change instance versions">
    <div class="change-versions-modal universal-body">
      <div class="input-row">
        <p class="input-label">Loader</p>
@@ -106,7 +93,7 @@
        </button>
      </div>
    </div>
-  </Modal>
+  </ModalWrapper>
  <section class="card">
    <div class="label">
      <h3>
@@ -511,18 +498,7 @@ import {
  DownloadIcon,
  ClipboardCopyIcon,
 } from '@modrinth/assets'
-import {
-  Button,
-  Toggle,
-  ConfirmModal,
-  Card,
-  Slider,
-  Checkbox,
-  Avatar,
-  Modal,
-  Chips,
-  DropdownSelect,
-} from '@modrinth/ui'
+import { Button, Toggle, Card, Slider, Checkbox, Avatar, Chips, DropdownSelect } from '@modrinth/ui'
 import { SwapIcon } from '@/assets/icons'

 import { Multiselect } from 'vue-multiselect'
@@ -546,10 +522,11 @@ import { open } from '@tauri-apps/plugin-dialog'
 import { get_loader_versions } from '@/helpers/metadata.js'
 import { get_game_versions, get_loaders } from '@/helpers/tags.js'
 import { handleError } from '@/store/notifications.js'
-import { useTheming } from '@/store/theme.js'
 import { useBreadcrumbs } from '@/store/breadcrumbs'
 import ModpackVersionModal from '@/components/ui/ModpackVersionModal.vue'
 import { trackEvent } from '@/helpers/analytics'
+import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
+import ConfirmModalWrapper from '@/components/ui/modal/ConfirmModalWrapper.vue'

 const breadcrumbs = useBreadcrumbs()

@@ -570,8 +547,6 @@ const props = defineProps({
  },
 })

-const themeStore = useTheming()
-
 const title = ref(props.instance.name)
 const icon = ref(props.instance.icon_path)
 const groups = ref(props.instance.groups)
@@ -606,7 +581,7 @@ async function setIcon() {

  if (!value) return

-  icon.value = value
+  icon.value = value.path
  await edit_icon(props.instance.path, icon.value).catch(handleError)

  trackEvent('InstanceSetIcon')