Implement ads in desktop app (#2318)

* Implement ads in desktop app

* Finish ads

* use git dep instead

* attempt to fix linux build (temp)

* bump version + lint

* comment more

* fix build

* try to fix linux build

* Fix crashing on windows

* Fix icons not showing

* Remove useless env vars

* Actual linux build fix

* Run fmt

* Fix scrolling

* fix clippy

* bump version + fix localhost

* rev linux build patch

* update version num

* update csp

* update csp

* update csp

* Switch to mousewheel event

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

@@ -1,12 +1,20 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-import { Promotion } from '@modrinth/ui'
+<script setup>
+import { ref, onMounted, onUnmounted } from 'vue'
 import { get as getCreds } from '@/helpers/mr_auth.js'
 import { handleError } from '@/store/notifications.js'
 import { get_user } from '@/helpers/cache.js'
+import { ChevronRightIcon } from '@modrinth/assets'
+import { init_ads_window } from '@/helpers/ads.js'
+import { listen } from '@tauri-apps/api/event'
 
 const showAd = ref(true)
 
+defineExpose({
+  scroll() {
+    updateAdPosition()
+  },
+})
+
 const creds = await getCreds().catch(handleError)
 if (creds && creds.user_id) {
   const user = await get_user(creds.user_id).catch(handleError)
@@ -16,8 +24,98 @@ if (creds && creds.user_id) {
     showAd.value = false
   }
 }
+
+const adsWrapper = ref(null)
+let resizeObserver
+let scrollHandler
+let intersectionObserver
+let mutationObserver
+onMounted(() => {
+  if (showAd.value) {
+    updateAdPosition()
+
+    resizeObserver = new ResizeObserver(updateAdPosition)
+    resizeObserver.observe(adsWrapper.value)
+
+    intersectionObserver = new IntersectionObserver(updateAdPosition)
+    intersectionObserver.observe(adsWrapper.value)
+
+    mutationObserver = new MutationObserver(updateAdPosition)
+    mutationObserver.observe(adsWrapper.value, { attributes: true, childList: true, subtree: true })
+
+    // Add scroll event listener
+    scrollHandler = () => {
+      requestAnimationFrame(updateAdPosition)
+    }
+    window.addEventListener('scroll', scrollHandler, { passive: true })
+  }
+})
+
+function updateAdPosition() {
+  if (adsWrapper.value) {
+    const rect = adsWrapper.value.getBoundingClientRect()
+
+    let y = rect.top + window.scrollY
+    let height = rect.bottom - rect.top
+
+    // Prevent ad from overlaying the app bar
+    if (y <= 52) {
+      y = 52
+      height = rect.bottom - 52
+
+      if (height < 0) {
+        height = 0
+        y = -1000
+      }
+    }
+
+    init_ads_window(rect.left + window.scrollX, y, rect.right - rect.left, height)
+  }
+}
+
+const unlisten = await listen('ads-scroll', (event) => {
+  if (adsWrapper.value) {
+    adsWrapper.value.parentNode.scrollTop += event.payload.scroll
+    updateAdPosition()
+  }
+})
+
+onUnmounted(() => {
+  if (resizeObserver) {
+    resizeObserver.disconnect()
+  }
+  if (intersectionObserver) {
+    intersectionObserver.disconnect()
+  }
+  if (mutationObserver) {
+    mutationObserver.disconnect()
+  }
+  if (scrollHandler) {
+    window.removeEventListener('scroll', scrollHandler)
+  }
+
+  unlisten()
+})
 </script>
 
 <template>
-  <Promotion v-if="showAd" :external="false" query-param="?r=launcher" />
+  <div
+    v-if="showAd"
+    ref="adsWrapper"
+    class="ad-parent relative mb-3 flex w-full justify-center rounded-2xl bg-bg-raised cursor-pointer"
+  >
+    <div class="flex max-h-[250px] min-h-[250px] min-w-[300px] max-w-[300px] flex-col gap-4 p-6">
+      <p class="m-0 text-2xl font-bold text-contrast">90% of ad revenue goes to creators</p>
+      <a
+        href="https://modrinth.com/plus"
+        class="mt-auto items-center gap-1 text-purple hover:underline"
+      >
+        <span>
+          Support creators and Modrinth ad-free with
+          <span class="font-bold">Modrinth+</span>
+        </span>
+        <ChevronRightIcon class="relative top-[3px] h-5 w-5" />
+      </a>
+    </div>
+  </div>
 </template>