Monorepo missing features (#1273)

* fix tauri config

* fix package patch

* regen pnpm lock

* use new workflow

* New GH actions

* Update lockfile

* update scripts

* Fix build script

* Fix missing deps

* Fix assets eslint

* Update libraries lint

* Fix all lint configs

* update lockfile

* add fmt + clippy fails

* Separate App Tauri portion

* fix app features

* Fix lints

* install tauri cli

* update lockfile

* corepack, fix lints

* add store path

* fix unused import

* Fix tests

* Issue templates + port over tauri release

* fix actions

* fix before build command

* Add X86 target

* Update build matrix

* finalize actions

* make debug build smaller

* Use debug build to make cache smaller

* dummy commit

* change proj name

* update file name

* Use release builds for less space use

* Remove rust cache

* Readd for app build

* add merge queue trigger

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

@@ -0,0 +1,136 @@
+<script setup>
+import { Modal, Button } from '@modrinth/ui'
+import { ref } from 'vue'
+import { useFetch } from '@/helpers/fetch.js'
+import SearchCard from '@/components/ui/SearchCard.vue'
+import { get_categories } from '@/helpers/tags.js'
+import { handleError } from '@/store/notifications.js'
+import { install as packInstall } from '@/helpers/pack.js'
+import mixpanel from 'mixpanel-browser'
+import ModInstallModal from '@/components/ui/ModInstallModal.vue'
+
+const confirmModal = ref(null)
+const project = ref(null)
+const version = ref(null)
+const categories = ref(null)
+const installing = ref(false)
+const modInstallModal = ref(null)
+
+defineExpose({
+  async show(event) {
+    if (event.event === 'InstallVersion') {
+      version.value = await useFetch(
+        `https://api.modrinth.com/v2/version/${encodeURIComponent(event.id)}`,
+        'version',
+      )
+      project.value = await useFetch(
+        `https://api.modrinth.com/v2/project/${encodeURIComponent(version.value.project_id)}`,
+        'project',
+      )
+    } else {
+      project.value = await useFetch(
+        `https://api.modrinth.com/v2/project/${encodeURIComponent(event.id)}`,
+        'project',
+      )
+      version.value = await useFetch(
+        `https://api.modrinth.com/v2/version/${encodeURIComponent(project.value.versions[0])}`,
+        'version',
+      )
+    }
+    categories.value = (await get_categories().catch(handleError)).filter(
+      (cat) => project.value.categories.includes(cat.name) && cat.project_type === 'mod',
+    )
+    confirmModal.value.show()
+    categories.value = (await get_categories().catch(handleError)).filter(
+      (cat) => project.value.categories.includes(cat.name) && cat.project_type === 'mod',
+    )
+    confirmModal.value.show()
+  },
+})
+
+async function install() {
+  confirmModal.value.hide()
+  if (project.value.project_type === 'modpack') {
+    await packInstall(
+      project.value.id,
+      version.value.id,
+      project.value.title,
+      project.value.icon_url,
+    ).catch(handleError)
+
+    mixpanel.track('PackInstall', {
+      id: project.value.id,
+      version_id: version.value.id,
+      title: project.value.title,
+      source: 'ProjectPage',
+    })
+  } else {
+    modInstallModal.value.show(
+      project.value.id,
+      [version.value],
+      project.value.title,
+      project.value.project_type,
+    )
+  }
+}
+</script>
+
+<template>
+  <Modal ref="confirmModal" :header="`Install ${project?.title}`">
+    <div class="modal-body">
+      <SearchCard
+        :project="project"
+        class="project-card"
+        :categories="categories"
+        @open="confirmModal.hide()"
+      />
+      <div class="button-row">
+        <div class="markdown-body">
+          <p>
+            Installing <code>{{ version.id }}</code> from Modrinth
+          </p>
+        </div>
+        <div class="button-group">
+          <Button :loading="installing" color="primary" @click="install">Install</Button>
+        </div>
+      </div>
+    </div>
+  </Modal>
+  <ModInstallModal ref="modInstallModal" />
+</template>
+
+<style scoped lang="scss">
+.modal-body {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--gap-md);
+  padding: var(--gap-lg);
+}
+
+.button-row {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--gap-md);
+}
+
+.button-group {
+  display: flex;
+  flex-direction: row;
+  gap: var(--gap-sm);
+}
+
+.project-card {
+  background-color: var(--color-bg);
+  width: 100%;
+
+  :deep(.badge) {
+    border: 1px solid var(--color-raised-bg);
+    background-color: var(--color-accent-contrast);
+  }
+}
+</style>