Fix advanced rendering, ads showing over modals (#3029)

apps/app-frontend/src/App.vue

@@ -133,8 +133,8 @@ async function setupApp() {
     default_page,
   } = await get()
 
-  if (default_page && default_page !== 'Home') {
+  if (default_page === 'Library') {
-    await router.push({ name: default_page })
+    await router.push('/library')
   }
 
   os.value = await getOS()

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

@@ -1,5 +1,5 @@
 <template>
-  <ModalWrapper ref="detectJavaModal" header="Select java version">
+  <ModalWrapper ref="detectJavaModal" header="Select java version" :show-ad-on-close="false">
     <div class="auto-detect-modal">
       <div class="table">
         <div class="table-row table-head">

apps/app-frontend/src/components/ui/friends/FriendsList.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Avatar, ButtonStyled, NewModal, OverflowMenu } from '@modrinth/ui'
+import { Avatar, ButtonStyled, OverflowMenu } from '@modrinth/ui'
 import {
   UserPlusIcon,
   MoreVerticalIcon,
@@ -16,6 +16,7 @@ import { handleError } from '@/store/notifications.js'
 import ContextMenu from '@/components/ui/ContextMenu.vue'
 import type { Dayjs } from 'dayjs'
 import dayjs from 'dayjs'
+import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
 
 const props = defineProps<{
   credentials: unknown | null
@@ -140,7 +141,6 @@ async function loadFriends(timeout = false) {
 watch(
   userCredentials,
   () => {
-    console.log('watch', userCredentials.value)
     if (userCredentials.value === undefined) {
       userFriends.value = []
     } else if (userCredentials.value === null) {
@@ -160,7 +160,7 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <NewModal ref="manageFriendsModal" header="Manage friends">
+  <ModalWrapper ref="manageFriendsModal" header="Manage friends">
     <p v-if="acceptedFriends.length === 0">You have no friends :C</p>
     <div v-else class="flex flex-col gap-4 min-w-[20rem]">
       <input v-model="search" type="text" placeholder="Search friends..." class="w-full" />
@@ -189,8 +189,8 @@ onUnmounted(() => {
         </div>
       </div>
     </div>
-  </NewModal>
+  </ModalWrapper>
-  <NewModal ref="friendInvitesModal" header="View friend requests">
+  <ModalWrapper ref="friendInvitesModal" header="View friend requests">
     <p v-if="pendingFriends.length === 0">You have no pending friend requests :C</p>
     <div v-else class="flex flex-col gap-4">
       <div v-for="friend in pendingFriends" :key="friend.username" class="flex gap-2">
@@ -234,8 +234,8 @@ onUnmounted(() => {
         </div>
       </div>
     </div>
-  </NewModal>
+  </ModalWrapper>
-  <NewModal ref="addFriendModal" header="Add a friend">
+  <ModalWrapper ref="addFriendModal" header="Add a friend">
     <div class="mb-4">
       <h2 class="m-0 text-xl">Username</h2>
       <p class="m-0 mt-1 leading-tight">You can add friends with their Modrinth username.</p>
@@ -247,7 +247,7 @@ onUnmounted(() => {
         Add friend
       </button>
     </ButtonStyled>
-  </NewModal>
+  </ModalWrapper>
   <div class="flex justify-between items-center">
     <h3 class="text-lg m-0">Friends</h3>
     <ButtonStyled type="transparent" circular>

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

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { NewModal } from '@modrinth/ui'
 import {
   ReportIcon,
   ModrinthIcon,
@@ -21,6 +20,7 @@ import { getVersion } from '@tauri-apps/api/app'
 import { version as getOsVersion, platform as getOsPlatform } from '@tauri-apps/plugin-os'
 import { useTheming } from '@/store/state'
 import FeatureFlagSettings from '@/components/ui/settings/FeatureFlagSettings.vue'
+import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
 
 const themeStore = useTheming()
 
@@ -100,7 +100,7 @@ const osVersion = getOsVersion()
 </script>
 /
 <template>
-  <NewModal ref="modal">
+  <ModalWrapper ref="modal">
     <template #title>
       <span class="flex items-center gap-2 text-lg font-extrabold text-contrast">
         <SettingsIcon /> Settings
@@ -157,5 +157,5 @@ const osVersion = getOsVersion()
         <component :is="tabs[selectedTab].content" />
       </div>
     </div>
-  </NewModal>
+  </ModalWrapper>
 </template>

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

@@ -21,8 +21,11 @@ const props = defineProps({
       return () => {}
     },
   },
+  showAdOnClose: {
+    type: Boolean,
+    default: true,
+  },
 })
-
 const modal = ref(null)
 
 defineExpose({
@@ -37,7 +40,9 @@ defineExpose({
 })
 
 function onModalHide() {
-  show_ads_window()
+  if (props.showAdOnClose) {
+    show_ads_window()
+  }
   props.onHide()
 }
 </script>

apps/app-frontend/src/components/ui/settings/AppearanceSettings.vue

@@ -10,9 +10,13 @@ const themeStore = useTheming()
 const os = ref(await getOS())
 const settings = ref(await get())
 
-watch(settings, async () => {
+watch(
-  await set(settings.value)
+  settings,
-})
+  async () => {
+    await set(settings.value)
+  },
+  { deep: true },
+)
 </script>
 <template>
   <h2 class="m-0 text-2xl">Color theme</h2>
@@ -88,16 +92,11 @@ watch(settings, async () => {
     </div>
     <DropdownSelect
       id="opening-page"
+      v-model="settings.default_page"
       name="Opening page dropdown"
       :options="['Home', 'Library']"
-      :default-value="settings.default_page"
-      :model-value="settings.default_page"
       class="opening-page"
-      @change="
+      @change="updateDefaultPage"
-        (e) => {
-          settings.default_page = e.option
-        }
-      "
     />
   </div>
 </template>

apps/app-frontend/src/components/ui/settings/PrivacySettings.vue

@@ -6,15 +6,19 @@ import { optInAnalytics, optOutAnalytics } from '@/helpers/analytics'
 
 const settings = ref(await get())
 
-watch(settings, async () => {
+watch(
-  if (settings.value.telemetry) {
+  settings,
-    optInAnalytics()
+  async () => {
-  } else {
+    if (settings.value.telemetry) {
-    optOutAnalytics()
+      optInAnalytics()
-  }
+    } else {
+      optOutAnalytics()
+    }
 
-  await set(settings.value)
+    await set(settings.value)
-})
+  },
+  { deep: true },
+)
 </script>
 
 <template>

apps/app-frontend/src/components/ui/settings/ResourceManagementSettings.vue

@@ -10,15 +10,19 @@ import { open } from '@tauri-apps/plugin-dialog'
 
 const settings = ref(await get())
 
-watch(settings, async () => {
+watch(
-  const setSettings = JSON.parse(JSON.stringify(settings.value))
+  settings,
+  async () => {
+    const setSettings = JSON.parse(JSON.stringify(settings.value))
 
-  if (!setSettings.custom_dir) {
+    if (!setSettings.custom_dir) {
-    setSettings.custom_dir = null
+      setSettings.custom_dir = null
-  }
+    }
 
-  await set(setSettings)
+    await set(setSettings)
-})
+  },
+  { deep: true },
+)
 
 async function purgeCache() {
   await purge_cache_types([