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/GridDisplay.vue

@@ -0,0 +1,395 @@
+<script setup>
+import Instance from '@/components/ui/Instance.vue'
+import { computed, ref } from 'vue'
+import {
+  ClipboardCopyIcon,
+  FolderOpenIcon,
+  PlayIcon,
+  PlusIcon,
+  TrashIcon,
+  StopCircleIcon,
+  EyeIcon,
+  SearchIcon,
+  XIcon,
+} from '@modrinth/assets'
+import { ConfirmModal, 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'
+
+const props = defineProps({
+  instances: {
+    type: Array,
+    default() {
+      return []
+    },
+  },
+  label: {
+    type: String,
+    default: '',
+  },
+})
+const instanceOptions = ref(null)
+const instanceComponents = ref(null)
+
+const themeStore = useTheming()
+const currentDeleteInstance = ref(null)
+const confirmModal = ref(null)
+
+async function deleteProfile() {
+  if (currentDeleteInstance.value) {
+    instanceComponents.value = instanceComponents.value.filter(
+      (x) => x.instance.path !== currentDeleteInstance.value,
+    )
+    await remove(currentDeleteInstance.value).catch(handleError)
+  }
+}
+
+async function duplicateProfile(p) {
+  await duplicate(p).catch(handleError)
+}
+
+const handleRightClick = (event, profilePathId) => {
+  const item = instanceComponents.value.find((x) => x.instance.path === profilePathId)
+  const baseOptions = [
+    { name: 'add_content' },
+    { type: 'divider' },
+    { name: 'edit' },
+    { name: 'duplicate' },
+    { name: 'open' },
+    { name: 'copy' },
+    { type: 'divider' },
+    {
+      name: 'delete',
+      color: 'danger',
+    },
+  ]
+
+  instanceOptions.value.showMenu(
+    event,
+    item,
+    item.playing
+      ? [
+          {
+            name: 'stop',
+            color: 'danger',
+          },
+          ...baseOptions,
+        ]
+      : [
+          {
+            name: 'play',
+            color: 'primary',
+          },
+          ...baseOptions,
+        ],
+  )
+}
+
+const handleOptionsClick = async (args) => {
+  switch (args.option) {
+    case 'play':
+      args.item.play(null, 'InstanceGridContextMenu')
+      break
+    case 'stop':
+      args.item.stop(null, 'InstanceGridContextMenu')
+      break
+    case 'add_content':
+      await args.item.addContent()
+      break
+    case 'edit':
+      await args.item.seeInstance()
+      break
+    case 'duplicate':
+      if (args.item.instance.install_stage == 'installed')
+        await duplicateProfile(args.item.instance.path)
+      break
+    case 'open':
+      await args.item.openFolder()
+      break
+    case 'copy':
+      await navigator.clipboard.writeText(args.item.instance.path)
+      break
+    case 'delete':
+      currentDeleteInstance.value = args.item.instance.path
+      confirmModal.value.show()
+      break
+  }
+}
+
+const search = ref('')
+const group = ref('Category')
+const filters = ref('All profiles')
+const sortBy = ref('Name')
+
+const filteredResults = computed(() => {
+  let instances = props.instances.filter((instance) => {
+    return instance.metadata.name.toLowerCase().includes(search.value.toLowerCase())
+  })
+
+  if (sortBy.value === 'Name') {
+    instances.sort((a, b) => {
+      return a.metadata.name.localeCompare(b.metadata.name)
+    })
+  }
+
+  if (sortBy.value === 'Game version') {
+    instances.sort((a, b) => {
+      return a.metadata.game_version.localeCompare(b.metadata.game_version)
+    })
+  }
+
+  if (sortBy.value === 'Last played') {
+    instances.sort((a, b) => {
+      return dayjs(b.metadata.last_played ?? 0).diff(dayjs(a.metadata.last_played ?? 0))
+    })
+  }
+
+  if (sortBy.value === 'Date created') {
+    instances.sort((a, b) => {
+      return dayjs(b.metadata.date_created).diff(dayjs(a.metadata.date_created))
+    })
+  }
+
+  if (sortBy.value === 'Date modified') {
+    instances.sort((a, b) => {
+      return dayjs(b.metadata.date_modified).diff(dayjs(a.metadata.date_modified))
+    })
+  }
+
+  if (filters.value === 'Custom instances') {
+    instances = instances.filter((instance) => {
+      return !instance.metadata?.linked_data
+    })
+  } else if (filters.value === 'Downloaded modpacks') {
+    instances = instances.filter((instance) => {
+      return instance.metadata?.linked_data
+    })
+  }
+
+  const instanceMap = new Map()
+
+  if (group.value === 'Loader') {
+    instances.forEach((instance) => {
+      const loader = formatCategoryHeader(instance.metadata.loader)
+      if (!instanceMap.has(loader)) {
+        instanceMap.set(loader, [])
+      }
+
+      instanceMap.get(loader).push(instance)
+    })
+  } else if (group.value === 'Game version') {
+    instances.forEach((instance) => {
+      if (!instanceMap.has(instance.metadata.game_version)) {
+        instanceMap.set(instance.metadata.game_version, [])
+      }
+
+      instanceMap.get(instance.metadata.game_version).push(instance)
+    })
+  } else if (group.value === 'Category') {
+    instances.forEach((instance) => {
+      if (instance.metadata.groups.length === 0) {
+        instance.metadata.groups.push('None')
+      }
+
+      for (const category of instance.metadata.groups) {
+        if (!instanceMap.has(category)) {
+          instanceMap.set(category, [])
+        }
+
+        instanceMap.get(category).push(instance)
+      }
+    })
+  } else {
+    return instanceMap.set('None', instances)
+  }
+
+  // For 'name', we intuitively expect the sorting to apply to the name of the group first, not just the name of the instance
+  // ie: Category A should come before B, even if the first instance in B comes before the first instance in A
+  if (sortBy.value === 'Name') {
+    const sortedEntries = [...instanceMap.entries()].sort((a, b) => {
+      // None should always be first
+      if (a[0] === 'None' && b[0] !== 'None') {
+        return -1
+      }
+      if (a[0] !== 'None' && b[0] === 'None') {
+        return 1
+      }
+      return a[0].localeCompare(b[0])
+    })
+    instanceMap.clear()
+    sortedEntries.forEach((entry) => {
+      instanceMap.set(entry[0], entry[1])
+    })
+  }
+
+  return instanceMap
+})
+</script>
+<template>
+  <ConfirmModal
+    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">
+    <div class="iconified-input">
+      <SearchIcon />
+      <input v-model="search" type="text" placeholder="Search" class="search-input" />
+      <Button @click="() => (search = '')">
+        <XIcon />
+      </Button>
+    </div>
+    <div class="labeled_button">
+      <span>Sort by</span>
+      <DropdownSelect
+        v-model="sortBy"
+        class="sort-dropdown"
+        name="Sort Dropdown"
+        :options="['Name', 'Last played', 'Date created', 'Date modified', 'Game version']"
+        placeholder="Select..."
+      />
+    </div>
+    <div class="labeled_button">
+      <span>Filter by</span>
+      <DropdownSelect
+        v-model="filters"
+        class="filter-dropdown"
+        name="Filter Dropdown"
+        :options="['All profiles', 'Custom instances', 'Downloaded modpacks']"
+        placeholder="Select..."
+      />
+    </div>
+    <div class="labeled_button">
+      <span>Group by</span>
+      <DropdownSelect
+        v-model="group"
+        class="group-dropdown"
+        name="Group Dropdown"
+        :options="['Category', 'Loader', 'Game version', 'None']"
+        placeholder="Select..."
+      />
+    </div>
+  </Card>
+  <div
+    v-for="instanceSection in Array.from(filteredResults, ([key, value]) => ({
+      key,
+      value,
+    }))"
+    :key="instanceSection.key"
+    class="row"
+  >
+    <div v-if="instanceSection.key !== 'None'" class="divider">
+      <p>{{ instanceSection.key }}</p>
+      <hr aria-hidden="true" />
+    </div>
+    <section class="instances">
+      <Instance
+        v-for="instance in instanceSection.value"
+        ref="instanceComponents"
+        :key="instance.path + instance.install_stage"
+        :instance="instance"
+        @contextmenu.prevent.stop="(event) => handleRightClick(event, instance.path)"
+      />
+    </section>
+  </div>
+  <ContextMenu ref="instanceOptions" @option-clicked="handleOptionsClick">
+    <template #play> <PlayIcon /> Play </template>
+    <template #stop> <StopCircleIcon /> Stop </template>
+    <template #add_content> <PlusIcon /> Add content </template>
+    <template #edit> <EyeIcon /> View instance </template>
+    <template #duplicate> <ClipboardCopyIcon /> Duplicate instance</template>
+    <template #delete> <TrashIcon /> Delete </template>
+    <template #open> <FolderOpenIcon /> Open folder </template>
+    <template #copy> <ClipboardCopyIcon /> Copy path </template>
+  </ContextMenu>
+</template>
+<style lang="scss" scoped>
+.row {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  width: 100%;
+  padding: 1rem;
+
+  .divider {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    gap: 1rem;
+    margin-bottom: 1rem;
+
+    p {
+      margin: 0;
+      font-size: 1rem;
+      white-space: nowrap;
+      color: var(--color-contrast);
+    }
+
+    hr {
+      background-color: var(--color-gray);
+      height: 1px;
+      width: 100%;
+      border: none;
+    }
+  }
+}
+
+.header {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  gap: 1rem;
+  align-items: inherit;
+  margin: 1rem 1rem 0 !important;
+  padding: 1rem;
+  width: calc(100% - 2rem);
+
+  .iconified-input {
+    flex-grow: 1;
+
+    input {
+      min-width: 100%;
+    }
+  }
+
+  .sort-dropdown {
+    width: 10rem;
+  }
+
+  .filter-dropdown {
+    width: 15rem;
+  }
+
+  .group-dropdown {
+    width: 10rem;
+  }
+
+  .labeled_button {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 0.5rem;
+    white-space: nowrap;
+  }
+}
+
+.instances {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
+  width: 100%;
+  gap: 1rem;
+  margin-right: auto;
+  scroll-behavior: smooth;
+  overflow-y: auto;
+}
+</style>

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

@@ -0,0 +1,357 @@
+<script setup>
+import {
+  ClipboardCopyIcon,
+  FolderOpenIcon,
+  PlayIcon,
+  PlusIcon,
+  TrashIcon,
+  DownloadIcon,
+  GlobeIcon,
+  StopCircleIcon,
+  ExternalIcon,
+  EyeIcon,
+  ChevronRightIcon,
+} from '@modrinth/assets'
+import { ConfirmModal } from '@modrinth/ui'
+import Instance from '@/components/ui/Instance.vue'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
+import ContextMenu from '@/components/ui/ContextMenu.vue'
+import ProjectCard from '@/components/ui/ProjectCard.vue'
+import InstallConfirmModal from '@/components/ui/InstallConfirmModal.vue'
+import ModInstallModal from '@/components/ui/ModInstallModal.vue'
+import {
+  get_all_running_profile_paths,
+  get_uuids_by_profile_path,
+  kill_by_uuid,
+} from '@/helpers/process.js'
+import { handleError } from '@/store/notifications.js'
+import { duplicate, remove, run } from '@/helpers/profile.js'
+import { useRouter } from 'vue-router'
+import { showProfileInFolder } from '@/helpers/utils.js'
+import { useFetch } from '@/helpers/fetch.js'
+import { install as pack_install } from '@/helpers/pack.js'
+import { useTheming } from '@/store/state.js'
+import { mixpanel_track } from '@/helpers/mixpanel'
+import { handleSevereError } from '@/store/error.js'
+
+const router = useRouter()
+
+const props = defineProps({
+  instances: {
+    type: Array,
+    default() {
+      return []
+    },
+  },
+  label: {
+    type: String,
+    default: '',
+  },
+  canPaginate: Boolean,
+})
+
+const actualInstances = computed(() =>
+  props.instances.filter((x) => x && x.instances && x.instances[0]),
+)
+
+const modsRow = ref(null)
+const instanceOptions = ref(null)
+const instanceComponents = ref(null)
+const rows = ref(null)
+const confirmModal = ref(null)
+const deleteConfirmModal = ref(null)
+const modInstallModal = ref(null)
+
+const themeStore = useTheming()
+const currentDeleteInstance = ref(null)
+
+async function deleteProfile() {
+  if (currentDeleteInstance.value) {
+    await remove(currentDeleteInstance.value).catch(handleError)
+  }
+}
+
+async function duplicateProfile(p) {
+  await duplicate(p).catch(handleError)
+}
+
+const handleInstanceRightClick = async (event, passedInstance) => {
+  const baseOptions = [
+    { name: 'add_content' },
+    { type: 'divider' },
+    { name: 'edit' },
+    { name: 'duplicate' },
+    { name: 'open_folder' },
+    { name: 'copy_path' },
+    { type: 'divider' },
+    {
+      name: 'delete',
+      color: 'danger',
+    },
+  ]
+
+  const running = await get_all_running_profile_paths().catch(handleError)
+
+  const options = running.includes(passedInstance.path)
+    ? [
+        {
+          name: 'stop',
+          color: 'danger',
+        },
+        ...baseOptions,
+      ]
+    : [
+        {
+          name: 'play',
+          color: 'primary',
+        },
+        ...baseOptions,
+      ]
+
+  instanceOptions.value.showMenu(event, passedInstance, options)
+}
+
+const handleProjectClick = (event, passedInstance) => {
+  instanceOptions.value.showMenu(event, passedInstance, [
+    {
+      name: 'install',
+      color: 'primary',
+    },
+    { type: 'divider' },
+    {
+      name: 'open_link',
+    },
+    {
+      name: 'copy_link',
+    },
+  ])
+}
+
+const handleOptionsClick = async (args) => {
+  switch (args.option) {
+    case 'play':
+      await run(args.item.path).catch(handleSevereError)
+      mixpanel_track('InstanceStart', {
+        loader: args.item.metadata.loader,
+        game_version: args.item.metadata.game_version,
+      })
+      break
+    case 'stop':
+      for (const u of await get_uuids_by_profile_path(args.item.path).catch(handleError)) {
+        await kill_by_uuid(u).catch(handleError)
+      }
+      mixpanel_track('InstanceStop', {
+        loader: args.item.metadata.loader,
+        game_version: args.item.metadata.game_version,
+      })
+      break
+    case 'add_content':
+      await router.push({
+        path: `/browse/${args.item.metadata.loader === 'vanilla' ? 'datapack' : 'mod'}`,
+        query: { i: args.item.path },
+      })
+      break
+    case 'edit':
+      await router.push({
+        path: `/instance/${encodeURIComponent(args.item.path)}/`,
+      })
+      break
+    case 'duplicate':
+      if (args.item.install_stage == 'installed') await duplicateProfile(args.item.path)
+      break
+    case 'delete':
+      currentDeleteInstance.value = args.item.path
+      deleteConfirmModal.value.show()
+      break
+    case 'open_folder':
+      await showProfileInFolder(args.item.path)
+      break
+    case 'copy_path':
+      await navigator.clipboard.writeText(args.item.path)
+      break
+    case 'install': {
+      const versions = await useFetch(
+        `https://api.modrinth.com/v2/project/${args.item.project_id}/version`,
+        'project versions',
+      )
+
+      if (args.item.project_type === 'modpack') {
+        await pack_install(
+          args.item.project_id,
+          versions[0].id,
+          args.item.title,
+          args.item.icon_url,
+        )
+      } else {
+        modInstallModal.value.show(args.item.project_id, versions)
+      }
+      break
+    }
+    case 'open_link':
+      window.__TAURI_INVOKE__('tauri', {
+        __tauriModule: 'Shell',
+        message: {
+          cmd: 'open',
+          path: `https://modrinth.com/${args.item.project_type}/${args.item.slug}`,
+        },
+      })
+      break
+    case 'copy_link':
+      await navigator.clipboard.writeText(
+        `https://modrinth.com/${args.item.project_type}/${args.item.slug}`,
+      )
+      break
+  }
+}
+
+const maxInstancesPerRow = ref(1)
+const maxProjectsPerRow = ref(1)
+
+const calculateCardsPerRow = () => {
+  // Calculate how many cards fit in one row
+  const containerWidth = rows.value[0].clientWidth
+  // Convert container width from pixels to rem
+  const containerWidthInRem =
+    containerWidth / parseFloat(getComputedStyle(document.documentElement).fontSize)
+  maxInstancesPerRow.value = Math.floor((containerWidthInRem + 1) / 11)
+  maxProjectsPerRow.value = Math.floor((containerWidthInRem + 1) / 19)
+}
+
+onMounted(() => {
+  calculateCardsPerRow()
+  window.addEventListener('resize', calculateCardsPerRow)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('resize', calculateCardsPerRow)
+})
+</script>
+
+<template>
+  <ConfirmModal
+    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">
+    <div v-for="row in actualInstances" ref="rows" :key="row.label" class="row">
+      <div class="header">
+        <router-link :to="row.route">{{ row.label }}</router-link>
+        <ChevronRightIcon />
+      </div>
+      <section v-if="row.instances[0].metadata" ref="modsRow" class="instances">
+        <Instance
+          v-for="instance in row.instances.slice(0, maxInstancesPerRow)"
+          :key="(instance?.project_id || instance?.id) + instance.install_stage"
+          :instance="instance"
+          @contextmenu.prevent.stop="(event) => handleInstanceRightClick(event, instance)"
+        />
+      </section>
+      <section v-else ref="modsRow" class="projects">
+        <ProjectCard
+          v-for="project in row.instances.slice(0, maxProjectsPerRow)"
+          :key="project?.project_id"
+          ref="instanceComponents"
+          class="item"
+          :project="project"
+          :confirm-modal="confirmModal"
+          :mod-install-modal="modInstallModal"
+          @contextmenu.prevent.stop="(event) => handleProjectClick(event, project)"
+        />
+      </section>
+    </div>
+  </div>
+  <ContextMenu ref="instanceOptions" @option-clicked="handleOptionsClick">
+    <template #play> <PlayIcon /> Play </template>
+    <template #stop> <StopCircleIcon /> Stop </template>
+    <template #add_content> <PlusIcon /> Add content </template>
+    <template #edit> <EyeIcon /> View instance </template>
+    <template #delete> <TrashIcon /> Delete </template>
+    <template #open_folder> <FolderOpenIcon /> Open folder </template>
+    <template #duplicate> <ClipboardCopyIcon /> Duplicate instance</template>
+    <template #copy_path> <ClipboardCopyIcon /> Copy path </template>
+    <template #install> <DownloadIcon /> Install </template>
+    <template #open_link> <GlobeIcon /> Open in Modrinth <ExternalIcon /> </template>
+    <template #copy_link> <ClipboardCopyIcon /> Copy link </template>
+  </ContextMenu>
+  <InstallConfirmModal ref="confirmModal" />
+  <ModInstallModal ref="modInstallModal" />
+</template>
+<style lang="scss" scoped>
+.content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  padding: 1rem;
+  gap: 1rem;
+
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    width: 0;
+    background: transparent;
+  }
+}
+
+.row {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  overflow: hidden;
+  width: 100%;
+  min-width: 100%;
+
+  &:nth-child(even) {
+    background: var(--color-bg);
+  }
+
+  .header {
+    width: 100%;
+    margin-bottom: 1rem;
+    gap: var(--gap-xs);
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    a {
+      margin: 0;
+      font-size: var(--font-size-lg);
+      font-weight: bolder;
+      white-space: nowrap;
+      color: var(--color-contrast);
+    }
+
+    svg {
+      height: 1.5rem;
+      width: 1.5rem;
+      color: var(--color-contrast);
+    }
+  }
+
+  .instances {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
+    grid-gap: 1rem;
+    width: 100%;
+  }
+
+  .projects {
+    display: grid;
+    width: 100%;
+    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
+    grid-gap: 1rem;
+
+    .item {
+      width: 100%;
+      max-width: 100%;
+    }
+  }
+}
+</style>

apps/app-frontend/src/components/modrinth-loading-indicator.js

@@ -0,0 +1,134 @@
+import { computed, defineComponent, h, onBeforeUnmount, ref, watch } from 'vue'
+import { useLoading } from '@/store/state.js'
+
+export default defineComponent({
+  props: {
+    throttle: {
+      type: Number,
+      default: 50,
+    },
+    duration: {
+      type: Number,
+      default: 500,
+    },
+    height: {
+      type: Number,
+      default: 3,
+    },
+    color: {
+      type: [String, Boolean],
+      default:
+        'repeating-linear-gradient(to right, var(--color-brand) 0%, var(--color-brand) 100%)',
+    },
+    offsetWidth: {
+      type: String,
+      default: '208px',
+    },
+    offsetHeight: {
+      type: String,
+      default: '52px',
+    },
+  },
+  setup(props, { slots }) {
+    const indicator = useLoadingIndicator({
+      duration: props.duration,
+      throttle: props.throttle,
+    })
+
+    onBeforeUnmount(() => indicator.clear)
+
+    const loading = useLoading()
+
+    watch(loading, (newValue) => {
+      if (newValue.loading) {
+        indicator.start()
+      } else {
+        indicator.finish()
+      }
+    })
+
+    return () =>
+      h(
+        'div',
+        {
+          style: {
+            position: 'fixed',
+            top: props.offsetHeight,
+            right: 0,
+            left: props.offsetWidth,
+            pointerEvents: 'none',
+            width: `calc((100vw - ${props.offsetWidth}) * ${indicator.progress.value / 100})`,
+            height: `${props.height}px`,
+            opacity: indicator.isLoading.value ? 1 : 0,
+            background: props.color || undefined,
+            backgroundSize: `${(100 / indicator.progress.value) * 100}% auto`,
+            transition: 'width 0.1s, height 0.4s, opacity 0.4s',
+            zIndex: 6,
+          },
+        },
+        slots,
+      )
+  },
+})
+
+function useLoadingIndicator(opts) {
+  const progress = ref(0)
+  const isLoading = ref(false)
+  const step = computed(() => 10000 / opts.duration)
+
+  let _timer = null
+  let _throttle = null
+
+  function start() {
+    clear()
+    progress.value = 0
+    if (opts.throttle) {
+      _throttle = setTimeout(() => {
+        isLoading.value = true
+        _startTimer()
+      }, opts.throttle)
+    } else {
+      isLoading.value = true
+      _startTimer()
+    }
+  }
+  function finish() {
+    progress.value = 100
+    _hide()
+  }
+
+  function clear() {
+    clearInterval(_timer)
+    clearTimeout(_throttle)
+    _timer = null
+    _throttle = null
+  }
+
+  function _increase(num) {
+    progress.value = Math.min(100, progress.value + num)
+  }
+
+  function _hide() {
+    clear()
+    setTimeout(() => {
+      isLoading.value = false
+      setTimeout(() => {
+        progress.value = 0
+      }, 400)
+    }, 500)
+  }
+
+  function _startTimer() {
+    _timer = setInterval(() => {
+      _increase(step.value)
+    }, 100)
+  }
+
+  return {
+    progress,
+    isLoading,
+    start,
+    finish,
+    clear,
+  }
+}

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

@@ -0,0 +1,391 @@
+<template>
+  <div
+    v-if="mode !== 'isolated'"
+    ref="button"
+    v-tooltip.right="'Minecraft accounts'"
+    class="button-base avatar-button"
+    :class="{ expanded: mode === 'expanded' }"
+    @click="showCard = !showCard"
+  >
+    <Avatar
+      :size="mode === 'expanded' ? 'xs' : 'sm'"
+      :src="
+        selectedAccount
+          ? `https://mc-heads.net/avatar/${selectedAccount.id}/128`
+          : 'https://launcher-files.modrinth.com/assets/steve_head.png'
+      "
+    />
+  </div>
+  <transition name="fade">
+    <Card
+      v-if="showCard || mode === 'isolated'"
+      ref="card"
+      class="account-card"
+      :class="{ expanded: mode === 'expanded', isolated: mode === 'isolated' }"
+    >
+      <div v-if="selectedAccount" class="selected account">
+        <Avatar size="xs" :src="`https://mc-heads.net/avatar/${selectedAccount.id}/128`" />
+        <div>
+          <h4>{{ selectedAccount.username }}</h4>
+          <p>Selected</p>
+        </div>
+        <Button v-tooltip="'Log out'" icon-only color="raised" @click="logout(selectedAccount.id)">
+          <TrashIcon />
+        </Button>
+      </div>
+      <div v-else class="logged-out account">
+        <h4>Not signed in</h4>
+        <Button v-tooltip="'Log in'" icon-only color="primary" @click="login()">
+          <LogInIcon />
+        </Button>
+      </div>
+      <div v-if="displayAccounts.length > 0" class="account-group">
+        <div v-for="account in displayAccounts" :key="account.id" class="account-row">
+          <Button class="option account" @click="setAccount(account)">
+            <Avatar :src="`https://mc-heads.net/avatar/${account.id}/128`" class="icon" />
+            <p>{{ account.username }}</p>
+          </Button>
+          <Button v-tooltip="'Log out'" icon-only @click="logout(account.id)">
+            <TrashIcon />
+          </Button>
+        </div>
+      </div>
+      <Button v-if="accounts.length > 0" @click="login()">
+        <PlusIcon />
+        Add account
+      </Button>
+    </Card>
+  </transition>
+</template>
+
+<script setup>
+import { PlusIcon, TrashIcon, LogInIcon } from '@modrinth/assets'
+import { Avatar, Button, Card } from '@modrinth/ui'
+import { ref, computed, onMounted, onBeforeUnmount, onUnmounted } from 'vue'
+import {
+  users,
+  remove_user,
+  set_default_user,
+  login as login_flow,
+  get_default_user,
+} from '@/helpers/auth'
+import { handleError } from '@/store/state.js'
+import { mixpanel_track } from '@/helpers/mixpanel'
+import { process_listener } from '@/helpers/events'
+import { handleSevereError } from '@/store/error.js'
+
+defineProps({
+  mode: {
+    type: String,
+    required: true,
+    default: 'normal',
+  },
+})
+
+const emit = defineEmits(['change'])
+
+const accounts = ref({})
+const defaultUser = ref()
+
+async function refreshValues() {
+  defaultUser.value = await get_default_user().catch(handleError)
+  accounts.value = await users().catch(handleError)
+}
+defineExpose({
+  refreshValues,
+})
+await refreshValues()
+
+const displayAccounts = computed(() =>
+  accounts.value.filter((account) => defaultUser.value !== account.id),
+)
+
+const selectedAccount = computed(() =>
+  accounts.value.find((account) => account.id === defaultUser.value),
+)
+
+async function setAccount(account) {
+  defaultUser.value = account.id
+  await set_default_user(account.id).catch(handleError)
+  emit('change')
+}
+
+async function login() {
+  const loggedIn = await login_flow().catch(handleSevereError)
+
+  if (loggedIn) {
+    await setAccount(loggedIn)
+    await refreshValues()
+  }
+
+  mixpanel_track('AccountLogIn')
+}
+
+const logout = async (id) => {
+  await remove_user(id).catch(handleError)
+  await refreshValues()
+  if (!selectedAccount.value && accounts.value.length > 0) {
+    await setAccount(accounts.value[0])
+    await refreshValues()
+  } else {
+    emit('change')
+  }
+  mixpanel_track('AccountLogOut')
+}
+
+let showCard = ref(false)
+let card = ref(null)
+let button = ref(null)
+const handleClickOutside = (event) => {
+  const elements = document.elementsFromPoint(event.clientX, event.clientY)
+  if (
+    card.value &&
+    card.value.$el !== event.target &&
+    !elements.includes(card.value.$el) &&
+    !button.value.contains(event.target)
+  ) {
+    showCard.value = false
+  }
+}
+
+const unlisten = await process_listener(async (e) => {
+  if (e.event === 'launched') {
+    await refreshValues()
+  }
+})
+
+onMounted(() => {
+  window.addEventListener('click', handleClickOutside)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('click', handleClickOutside)
+})
+
+onUnmounted(() => {
+  unlisten()
+})
+</script>
+
+<style scoped lang="scss">
+.selected {
+  background: var(--color-brand-highlight);
+  border-radius: var(--radius-lg);
+  color: var(--color-contrast);
+  gap: 1rem;
+}
+
+.logged-out {
+  background: var(--color-bg);
+  border-radius: var(--radius-lg);
+  gap: 1rem;
+}
+
+.account {
+  width: max-content;
+  display: flex;
+  align-items: center;
+  text-align: left;
+  padding: 0.5rem 1rem;
+
+  h4,
+  p {
+    margin: 0;
+  }
+}
+
+.account-card {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  top: 0.5rem;
+  left: 5.5rem;
+  z-index: 11;
+  gap: 0.5rem;
+  padding: 1rem;
+  border: 1px solid var(--color-button-bg);
+  width: max-content;
+  user-select: none;
+  -ms-user-select: none;
+  -webkit-user-select: none;
+  max-height: 98vh;
+  overflow-y: auto;
+
+  &::-webkit-scrollbar-track {
+    border-top-right-radius: 1rem;
+    border-bottom-right-radius: 1rem;
+  }
+
+  &::-webkit-scrollbar {
+    border-top-right-radius: 1rem;
+    border-bottom-right-radius: 1rem;
+  }
+
+  &.hidden {
+    display: none;
+  }
+
+  &.expanded {
+    left: 13.5rem;
+  }
+
+  &.isolated {
+    position: relative;
+    left: 0;
+    top: 0;
+  }
+}
+
+.accounts-title {
+  font-size: 1.2rem;
+  font-weight: bolder;
+}
+
+.account-group {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.option {
+  width: calc(100% - 2.25rem);
+  background: var(--color-raised-bg);
+  color: var(--color-base);
+  box-shadow: none;
+
+  img {
+    margin-right: 0.5rem;
+  }
+}
+
+.icon {
+  --size: 1.5rem !important;
+}
+
+.account-row {
+  display: flex;
+  flex-direction: row;
+  gap: 0.5rem;
+  vertical-align: center;
+  justify-content: space-between;
+  padding-right: 1rem;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.avatar-button {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  color: var(--color-base);
+  background-color: var(--color-raised-bg);
+  border-radius: var(--radius-md);
+  width: 100%;
+  text-align: left;
+
+  &.expanded {
+    border: 1px solid var(--color-button-bg);
+    padding: 1rem;
+  }
+}
+
+.avatar-text {
+  margin: auto 0 auto 0.25rem;
+  display: flex;
+  flex-direction: column;
+}
+
+.text {
+  width: 6rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.accounts-text {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  margin: 0;
+}
+
+.qr-code {
+  background-color: white !important;
+  border-radius: var(--radius-md);
+}
+
+.modal-body {
+  display: flex;
+  flex-direction: row;
+  gap: var(--gap-lg);
+  align-items: center;
+  padding: var(--gap-xl);
+
+  .modal-text {
+    display: flex;
+    flex-direction: column;
+    gap: var(--gap-sm);
+    width: 100%;
+
+    h2,
+    p {
+      margin: 0;
+    }
+
+    .code-text {
+      display: flex;
+      flex-direction: row;
+      gap: var(--gap-xs);
+      align-items: center;
+
+      .code {
+        background-color: var(--color-bg);
+        border-radius: var(--radius-md);
+        border: solid 1px var(--color-button-bg);
+        font-family: var(--mono-font);
+        letter-spacing: var(--gap-md);
+        color: var(--color-contrast);
+        font-size: 2rem;
+        font-weight: bold;
+        padding: var(--gap-sm) 0 var(--gap-sm) var(--gap-md);
+      }
+
+      .btn {
+        width: 2.5rem;
+        height: 2.5rem;
+      }
+    }
+  }
+}
+
+.button-row {
+  display: flex;
+  flex-direction: row;
+}
+
+.modal {
+  position: absolute;
+}
+
+.code {
+  color: var(--color-brand);
+  padding: 0.05rem 0.1rem;
+  // row not column
+  display: flex;
+
+  .card {
+    background: var(--color-base);
+    color: var(--color-contrast);
+    padding: 0.5rem 1rem;
+  }
+}
+</style>

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

@@ -0,0 +1,87 @@
+<template>
+  <div class="breadcrumbs">
+    <Button class="breadcrumbs__back transparent" icon-only @click="$router.back()">
+      <ChevronLeftIcon />
+    </Button>
+    <Button class="breadcrumbs__forward transparent" icon-only @click="$router.forward()">
+      <ChevronRightIcon />
+    </Button>
+    {{ breadcrumbData.resetToNames(breadcrumbs) }}
+    <div v-for="breadcrumb in breadcrumbs" :key="breadcrumb.name" class="breadcrumbs__item">
+      <router-link
+        v-if="breadcrumb.link"
+        :to="{
+          path: breadcrumb.link.replace('{id}', encodeURIComponent($route.params.id)),
+          query: breadcrumb.query,
+        }"
+        >{{
+          breadcrumb.name.charAt(0) === '?'
+            ? breadcrumbData.getName(breadcrumb.name.slice(1))
+            : breadcrumb.name
+        }}
+      </router-link>
+      <span v-else class="selected">{{
+        breadcrumb.name.charAt(0) === '?'
+          ? breadcrumbData.getName(breadcrumb.name.slice(1))
+          : breadcrumb.name
+      }}</span>
+      <ChevronRightIcon v-if="breadcrumb.link" class="chevron" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ChevronRightIcon, ChevronLeftIcon } from '@modrinth/assets'
+import { Button } from '@modrinth/ui'
+import { useBreadcrumbs } from '@/store/breadcrumbs'
+import { useRoute } from 'vue-router'
+import { computed } from 'vue'
+
+const route = useRoute()
+
+const breadcrumbData = useBreadcrumbs()
+const breadcrumbs = computed(() => {
+  const additionalContext =
+    route.meta.useContext === true
+      ? breadcrumbData.context
+      : route.meta.useRootContext === true
+        ? breadcrumbData.rootContext
+        : null
+  return additionalContext ? [additionalContext, ...route.meta.breadcrumb] : route.meta.breadcrumb
+})
+</script>
+
+<style scoped lang="scss">
+.breadcrumbs {
+  display: flex;
+  flex-direction: row;
+
+  .breadcrumbs__item {
+    display: flex;
+    flex-direction: row;
+    vertical-align: center;
+    margin: auto 0;
+
+    .chevron,
+    a {
+      margin: auto 0;
+    }
+  }
+
+  .breadcrumbs__back,
+  .breadcrumbs__forward {
+    margin: auto 0;
+    color: var(--color-base);
+    height: unset;
+    width: unset;
+  }
+
+  .breadcrumbs__forward {
+    margin-right: 1rem;
+  }
+}
+
+.selected {
+  color: var(--color-contrast);
+}
+</style>

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

@@ -0,0 +1,176 @@
+<template>
+  <transition name="fade">
+    <div
+      v-show="shown"
+      ref="contextMenu"
+      class="context-menu"
+      :style="{
+        left: left,
+        top: top,
+      }"
+    >
+      <div v-for="(option, index) in options" :key="index" @click.stop="optionClicked(option.name)">
+        <hr v-if="option.type === 'divider'" class="divider" />
+        <div
+          v-else-if="!(isLinkedData(item) && option.name === `add_content`)"
+          class="item clickable"
+          :class="[option.color ?? 'base']"
+        >
+          <slot :name="option.name" />
+        </div>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script setup>
+import { onBeforeUnmount, onMounted, ref } from 'vue'
+
+const emit = defineEmits(['menu-closed', 'option-clicked'])
+
+const item = ref(null)
+const contextMenu = ref(null)
+const options = ref([])
+const left = ref('0px')
+const top = ref('0px')
+const shown = ref(false)
+
+defineExpose({
+  showMenu: (event, passedItem, passedOptions) => {
+    item.value = passedItem
+    options.value = passedOptions
+
+    const menuWidth = contextMenu.value.clientWidth
+    const menuHeight = contextMenu.value.clientHeight
+
+    if (menuWidth + event.pageX >= window.innerWidth) {
+      left.value = event.pageX - menuWidth + 2 + 'px'
+    } else {
+      left.value = event.pageX - 2 + 'px'
+    }
+
+    if (menuHeight + event.pageY >= window.innerHeight) {
+      top.value = event.pageY - menuHeight + 2 + 'px'
+    } else {
+      top.value = event.pageY - 2 + 'px'
+    }
+
+    shown.value = true
+  },
+})
+
+const isLinkedData = (item) => {
+  if (item.instance != undefined && item.instance.metadata.linked_data) {
+    return true
+  } else if (item.metadata != undefined && item.metadata.linked_data) {
+    return true
+  }
+  return false
+}
+
+const hideContextMenu = () => {
+  shown.value = false
+  emit('menu-closed')
+}
+
+const optionClicked = (option) => {
+  emit('option-clicked', {
+    item: item.value,
+    option: option,
+  })
+  hideContextMenu()
+}
+
+const onEscKeyRelease = (event) => {
+  if (event.keyCode === 27) {
+    hideContextMenu()
+  }
+}
+
+const handleClickOutside = (event) => {
+  const elements = document.elementsFromPoint(event.clientX, event.clientY)
+  if (
+    contextMenu.value &&
+    contextMenu.value.$el !== event.target &&
+    !elements.includes(contextMenu.value.$el)
+  ) {
+    hideContextMenu()
+  }
+}
+
+onMounted(() => {
+  window.addEventListener('click', handleClickOutside)
+  document.body.addEventListener('keyup', onEscKeyRelease)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('click', handleClickOutside)
+  document.removeEventListener('keyup', onEscKeyRelease)
+})
+</script>
+
+<style lang="scss" scoped>
+.context-menu {
+  background-color: var(--color-raised-bg);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-floating);
+  border: 1px solid var(--color-button-bg);
+  margin: 0;
+  position: fixed;
+  z-index: 1000000;
+  overflow: hidden;
+  padding: var(--gap-sm);
+
+  .item {
+    align-items: center;
+    color: var(--color-base);
+    cursor: pointer;
+    display: flex;
+    gap: var(--gap-sm);
+    padding: var(--gap-sm);
+    border-radius: var(--radius-sm);
+
+    &:hover,
+    &:active {
+      &.base {
+        background-color: var(--color-button-bg);
+        color: var(--color-contrast);
+      }
+
+      &.primary {
+        background-color: var(--color-brand);
+        color: var(--color-accent-contrast);
+        font-weight: bold;
+      }
+
+      &.danger {
+        background-color: var(--color-red);
+        color: var(--color-accent-contrast);
+        font-weight: bold;
+      }
+
+      &.contrast {
+        background-color: var(--color-orange);
+        color: var(--color-accent-contrast);
+        font-weight: bold;
+      }
+    }
+  }
+
+  .divider {
+    border: 1px solid var(--color-button-bg);
+    margin: var(--gap-sm);
+    pointer-events: none;
+  }
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.2s ease-in-out;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>

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

@@ -0,0 +1,226 @@
+<script setup>
+import { XIcon, IssuesIcon, LogInIcon } 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'
+import { handleError } from '@/store/notifications.js'
+import mixpanel from 'mixpanel-browser'
+import { handleSevereError } from '@/store/error.js'
+
+const errorModal = ref()
+const error = ref()
+
+const title = ref('An error occurred')
+const errorType = ref('unknown')
+const supportLink = ref('https://support.modrinth.com')
+const metadata = ref({})
+
+defineExpose({
+  async show(errorVal) {
+    if (errorVal.message && errorVal.message.includes('Minecraft authentication error:')) {
+      title.value = 'Unable to sign in to Minecraft'
+      errorType.value = 'minecraft_auth'
+      supportLink.value =
+        'https://support.modrinth.com/en/articles/9038231-minecraft-sign-in-issues'
+
+      if (
+        errorVal.message.includes('existing connection was forcibly closed') ||
+        errorVal.message.includes('error sending request for url')
+      ) {
+        metadata.value.network = true
+      }
+      if (errorVal.message.includes('because the target machine actively refused it')) {
+        metadata.value.hostsFile = true
+      }
+    } else if (errorVal.message && errorVal.message.includes('User is not logged in')) {
+      title.value = 'Sign in to Minecraft'
+      errorType.value = 'minecraft_sign_in'
+      supportLink.value = 'https://support.modrinth.com'
+    } else {
+      title.value = 'An error occurred'
+      errorType.value = 'unknown'
+      supportLink.value = 'https://support.modrinth.com'
+      metadata.value = {}
+    }
+
+    error.value = errorVal
+    errorModal.value.show()
+  },
+})
+
+const loadingMinecraft = ref(false)
+async function loginMinecraft() {
+  try {
+    loadingMinecraft.value = true
+    const loggedIn = await login_flow()
+
+    if (loggedIn) {
+      await set_default_user(loggedIn.id).catch(handleError)
+    }
+
+    await mixpanel.track('AccountLogIn')
+    loadingMinecraft.value = false
+    errorModal.value.hide()
+  } catch (err) {
+    loadingMinecraft.value = false
+    handleSevereError(err)
+  }
+}
+</script>
+
+<template>
+  <Modal ref="errorModal" :header="title">
+    <div class="modal-body">
+      <div class="markdown-body">
+        <template v-if="errorType === 'minecraft_auth'">
+          <template v-if="metadata.network">
+            <h3>Network issues</h3>
+            <p>
+              It looks like there were issues with the Modrinth App connecting to Microsoft's
+              servers. This is often the result of a poor connection, so we recommend trying again
+              to see if it works. If issues continue to persist, follow the steps in
+              <a
+                href="https://support.modrinth.com/en/articles/9038231-minecraft-sign-in-issues#h_e71a5f805f"
+              >
+                our support article
+              </a>
+              to troubleshoot.
+            </p>
+          </template>
+          <template v-else-if="metadata.hostsFile">
+            <h3>Network issues</h3>
+            <p>
+              The Modrinth App tried to connect to Microsoft / Xbox / Minecraft services, but the
+              remote server rejected the connection. This may indicate that these services are
+              blocked by the hosts file. Please visit
+              <a
+                href="https://support.modrinth.com/en/articles/9038231-minecraft-sign-in-issues#h_d694a29256"
+              >
+                our support article
+              </a>
+              for steps on how to fix the issue.
+            </p>
+          </template>
+          <template v-else>
+            <h3>Try another Microsoft account</h3>
+            <p>
+              Double check you've signed in with the right account. You may own Minecraft on a
+              different Microsoft account.
+            </p>
+            <div class="cta-button">
+              <button class="btn btn-primary" :disabled="loadingMinecraft" @click="loginMinecraft">
+                <LogInIcon /> Try another account
+              </button>
+            </div>
+            <h3>Using PC Game Pass, coming from Bedrock, or just bought the game?</h3>
+            <p>
+              Try signing in with the
+              <a href="https://www.minecraft.net/en-us/download">official Minecraft Launcher</a>
+              first. Once you're done, come back here and sign in!
+            </p>
+          </template>
+          <div class="cta-button">
+            <button class="btn btn-primary" :disabled="loadingMinecraft" @click="loginMinecraft">
+              <LogInIcon /> Try signing in again
+            </button>
+          </div>
+          <hr />
+          <p>
+            If nothing is working and you need help, visit
+            <a :href="supportLink">our support page</a>
+            and start a chat using the widget in the bottom right and we will be more than happy to
+            assist! Make sure to provide the following debug information to the agent:
+          </p>
+          <details>
+            <summary>Debug information</summary>
+            {{ error.message ?? error }}
+          </details>
+        </template>
+        <div v-else-if="errorType === 'minecraft_sign_in'">
+          <div class="warning-banner">
+            <div class="warning-banner__title">
+              <IssuesIcon />
+              <span>Installed the app before April 23rd, 2024?</span>
+            </div>
+            <div class="warning-banner__description">
+              Modrinth has updated our sign-in workflow to allow for better stability, security, and
+              performance. You must sign in again so your credentials can be upgraded to this new
+              flow.
+            </div>
+          </div>
+          <p>
+            To play this instance, you must sign in through Microsoft below. If you don't have a
+            Minecraft account, you can purchase the game on the
+            <a href="https://www.minecraft.net/en-us/store/minecraft-java-bedrock-edition-pc"
+              >Minecraft website</a
+            >.
+          </p>
+          <div class="cta-button">
+            <button class="btn btn-primary" :disabled="loadingMinecraft" @click="loginMinecraft">
+              <LogInIcon /> Sign in to Minecraft
+            </button>
+          </div>
+        </div>
+        <template v-else>
+          {{ error.message ?? error }}
+        </template>
+      </div>
+      <div class="input-group push-right">
+        <a :href="supportLink" class="btn" @click="errorModal.hide()"><ChatIcon /> Get support</a>
+        <button class="btn" @clicdck="errorModal.hide()"><XIcon /> Close</button>
+      </div>
+    </div>
+  </Modal>
+</template>
+
+<style>
+.light-mode {
+  --color-orange-bg: rgba(255, 163, 71, 0.2);
+}
+
+.dark-mode,
+.oled-mode {
+  --color-orange-bg: rgba(224, 131, 37, 0.2);
+}
+</style>
+
+<style scoped lang="scss">
+.cta-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.5rem;
+}
+
+.warning-banner {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: var(--gap-lg);
+  background-color: var(--color-orange-bg);
+  border: 2px solid var(--color-orange);
+  border-radius: var(--radius-md);
+  margin-bottom: 1rem;
+}
+
+.warning-banner__title {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-weight: 700;
+
+  svg {
+    color: var(--color-orange);
+    height: 1.5rem;
+    width: 1.5rem;
+  }
+}
+
+.modal-body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-md);
+  padding: var(--gap-lg);
+}
+</style>

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

@@ -0,0 +1,305 @@
+<script setup>
+import { XIcon, PlusIcon } from '@modrinth/assets'
+import { Button, Checkbox, Modal } 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/api/dialog'
+import { handleError } from '@/store/notifications.js'
+import { useTheming } from '@/store/theme'
+
+const props = defineProps({
+  instance: {
+    type: Object,
+    required: true,
+  },
+})
+
+defineExpose({
+  show: () => {
+    exportModal.value.show()
+    initFiles()
+  },
+})
+
+const exportModal = ref(null)
+const nameInput = ref(props.instance.metadata.name)
+const exportDescription = ref('')
+const versionInput = ref('1.0.0')
+const files = ref([])
+const folders = ref([])
+const showingFiles = ref(false)
+
+const themeStore = useTheming()
+
+const initFiles = async () => {
+  const newFolders = new Map()
+  const sep = '/'
+  files.value = []
+  await get_pack_export_candidates(props.instance.path).then((filePaths) =>
+    filePaths
+      .map((folder) => ({
+        path: folder,
+        name: folder.split(sep).pop(),
+        selected:
+          folder.startsWith('mods') ||
+          folder.startsWith('datapacks') ||
+          folder.startsWith('resourcepacks') ||
+          folder.startsWith('shaderpacks') ||
+          folder.startsWith('config'),
+        disabled:
+          folder === 'profile.json' ||
+          folder.startsWith('modrinth_logs') ||
+          folder.startsWith('.fabric') ||
+          folder.includes('.DS_Store'),
+      }))
+      .forEach((pathData) => {
+        const parent = pathData.path.split(sep).slice(0, -1).join(sep)
+        if (parent !== '') {
+          if (newFolders.has(parent)) {
+            newFolders.get(parent).push(pathData)
+          } else {
+            newFolders.set(parent, [pathData])
+          }
+        } else {
+          files.value.push(pathData)
+        }
+      }),
+  )
+  folders.value = [...newFolders.entries()].map(([name, value]) => [
+    {
+      name,
+      showingMore: false,
+    },
+    value,
+  ])
+}
+
+await initFiles()
+
+const exportPack = async () => {
+  const filesToExport = files.value.filter((file) => file.selected).map((file) => file.path)
+  folders.value.forEach((args) => {
+    args[1].forEach((child) => {
+      if (child.selected) {
+        filesToExport.push(child.path)
+      }
+    })
+  })
+  const outputPath = await open({
+    directory: true,
+    multiple: false,
+  })
+
+  if (outputPath) {
+    export_profile_mrpack(
+      props.instance.path,
+      outputPath + `/${nameInput.value} ${versionInput.value}.mrpack`,
+      filesToExport,
+      versionInput.value,
+      exportDescription.value,
+      nameInput.value,
+    ).catch((err) => handleError(err))
+    exportModal.value.hide()
+  }
+}
+</script>
+
+<template>
+  <Modal ref="exportModal" header="Export modpack" :noblur="!themeStore.advancedRendering">
+    <div class="modal-body">
+      <div class="labeled_input">
+        <p>Modpack Name</p>
+        <div class="iconified-input">
+          <PackageIcon />
+          <input v-model="nameInput" type="text" placeholder="Modpack name" class="input" />
+          <Button @click="nameInput = ''">
+            <XIcon />
+          </Button>
+        </div>
+      </div>
+      <div class="labeled_input">
+        <p>Version number</p>
+        <div class="iconified-input">
+          <VersionIcon />
+          <input v-model="versionInput" type="text" placeholder="1.0.0" class="input" />
+          <Button @click="versionInput = ''">
+            <XIcon />
+          </Button>
+        </div>
+      </div>
+      <div class="adjacent-input">
+        <div class="labeled_input">
+          <p>Description</p>
+
+          <div class="textarea-wrapper">
+            <textarea v-model="exportDescription" placeholder="Enter modpack description..." />
+          </div>
+        </div>
+      </div>
+
+      <div class="table">
+        <div class="table-head">
+          <div class="table-cell row-wise">
+            Select files and folders to include in pack
+            <Button
+              class="sleek-primary collapsed-button"
+              icon-only
+              @click="() => (showingFiles = !showingFiles)"
+            >
+              <PlusIcon v-if="!showingFiles" />
+              <XIcon v-else />
+            </Button>
+          </div>
+        </div>
+        <div v-if="showingFiles" class="table-content">
+          <div v-for="[path, children] of folders" :key="path.name" class="table-row">
+            <div class="table-cell file-entry">
+              <div class="file-primary">
+                <Checkbox
+                  :model-value="children.every((child) => child.selected)"
+                  :label="path.name"
+                  class="select-checkbox"
+                  :disabled="children.every((x) => x.disabled)"
+                  @update:model-value="
+                    (newValue) => children.forEach((child) => (child.selected = newValue))
+                  "
+                />
+                <Checkbox
+                  v-model="path.showingMore"
+                  class="select-checkbox dropdown"
+                  collapsing-toggle-style
+                />
+              </div>
+              <div v-if="path.showingMore" class="file-secondary">
+                <div v-for="child in children" :key="child.path" class="file-secondary-row">
+                  <Checkbox
+                    v-model="child.selected"
+                    :label="child.name"
+                    class="select-checkbox"
+                    :disabled="child.disabled"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+          <div v-for="file in files" :key="file.path" class="table-row">
+            <div class="table-cell file-entry">
+              <div class="file-primary">
+                <Checkbox
+                  v-model="file.selected"
+                  :label="file.name"
+                  :disabled="file.disabled"
+                  class="select-checkbox"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="button-row push-right">
+        <Button @click="exportModal.hide">
+          <XIcon />
+          Cancel
+        </Button>
+        <Button color="primary" @click="exportPack">
+          <PackageIcon />
+          Export
+        </Button>
+      </div>
+    </div>
+  </Modal>
+</template>
+
+<style scoped lang="scss">
+.modal-body {
+  padding: var(--gap-xl);
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-md);
+}
+
+.labeled_input {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-sm);
+
+  p {
+    margin: 0;
+  }
+}
+
+.select-checkbox {
+  gap: var(--gap-sm);
+
+  button.checkbox {
+    border: none;
+  }
+
+  &.dropdown {
+    margin-left: auto;
+  }
+}
+
+.table-content {
+  max-height: 18rem;
+  overflow-y: auto;
+}
+
+.table {
+  border: 1px solid var(--color-bg);
+}
+
+.file-entry {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-sm);
+}
+
+.file-primary {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-sm);
+}
+
+.file-secondary {
+  margin-left: var(--gap-xl);
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-sm);
+  height: 100%;
+  vertical-align: center;
+}
+
+.file-secondary-row {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-sm);
+}
+
+.button-row {
+  display: flex;
+  gap: var(--gap-sm);
+  align-items: center;
+}
+
+.row-wise {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.textarea-wrapper {
+  // margin-top: 1rem;
+  height: 12rem;
+
+  textarea {
+    max-height: 12rem;
+  }
+
+  .preview {
+    overflow-y: auto;
+  }
+}
+</style>

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

@@ -0,0 +1,176 @@
+<template>
+  <Modal
+    ref="incompatibleModal"
+    header="Incompatibility warning"
+    :noblur="!themeStore.advancedRendering"
+  >
+    <div class="modal-body">
+      <p>
+        This {{ versions?.length > 0 ? 'project' : 'version' }} is not compatible with the instance
+        you're trying to install it on. Are you sure you want to continue? Dependencies will not be
+        installed.
+      </p>
+      <table>
+        <tr class="header">
+          <th>{{ instance?.metadata.name }}</th>
+          <th>{{ projectTitle }}</th>
+        </tr>
+        <tr class="content">
+          <td class="data">
+            {{ instance?.metadata.loader }} {{ instance?.metadata.game_version }}
+          </td>
+          <td>
+            <DropdownSelect
+              v-if="versions?.length > 1"
+              v-model="selectedVersion"
+              :options="versions"
+              placeholder="Select version"
+              name="Version select"
+              :display-name="
+                (version) =>
+                  `${version?.name} (${version?.loaders
+                    .map((name) => formatCategory(name))
+                    .join(', ')} - ${version?.game_versions.join(', ')})`
+              "
+              render-up
+            />
+            <span v-else>
+              <span>
+                {{ selectedVersion?.name }} ({{
+                  selectedVersion?.loaders.map((name) => formatCategory(name)).join(', ')
+                }}
+                - {{ selectedVersion?.game_versions.join(', ') }})
+              </span>
+            </span>
+          </td>
+        </tr>
+      </table>
+      <div class="button-group">
+        <Button @click="() => incompatibleModal.hide()"><XIcon />Cancel</Button>
+        <Button color="primary" :disabled="installing" @click="install()">
+          <DownloadIcon /> {{ installing ? 'Installing' : 'Install' }}
+        </Button>
+      </div>
+    </div>
+  </Modal>
+</template>
+
+<script setup>
+import { XIcon, DownloadIcon } from '@modrinth/assets'
+import { Button, Modal, 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 { mixpanel_track } from '@/helpers/mixpanel'
+
+const themeStore = useTheming()
+
+const instance = ref(null)
+const project = ref(null)
+const projectType = ref(null)
+const projectTitle = ref(null)
+const versions = ref(null)
+const selectedVersion = ref(null)
+const incompatibleModal = ref(null)
+const installing = ref(false)
+
+let markInstalled = () => {}
+
+defineExpose({
+  show: (
+    instanceVal,
+    projectTitleVal,
+    selectedVersions,
+    extMarkInstalled,
+    projectIdVal,
+    projectTypeVal,
+  ) => {
+    instance.value = instanceVal
+    projectTitle.value = projectTitleVal
+    versions.value = selectedVersions
+    selectedVersion.value = selectedVersions[0]
+
+    project.value = projectIdVal
+    projectType.value = projectTypeVal
+
+    incompatibleModal.value.show()
+    markInstalled = extMarkInstalled
+
+    mixpanel_track('ProjectInstallStart', { source: 'ProjectIncompatibilityWarningModal' })
+  },
+})
+
+const install = async () => {
+  installing.value = true
+  await installMod(instance.value.path, selectedVersion.value.id).catch(handleError)
+  installing.value = false
+  markInstalled()
+  incompatibleModal.value.hide()
+
+  mixpanel_track('ProjectInstall', {
+    loader: instance.value.metadata.loader,
+    game_version: instance.value.metadata.game_version,
+    id: project.value,
+    version_id: selectedVersion.value.id,
+    project_type: projectType.value,
+    title: projectTitle.value,
+    source: 'ProjectIncompatibilityWarningModal',
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+.data {
+  text-transform: capitalize;
+}
+
+table {
+  width: 100%;
+  border-radius: var(--radius-lg);
+  border-collapse: collapse;
+  box-shadow: 0 0 0 1px var(--color-button-bg);
+}
+
+th {
+  text-align: left;
+  padding: 1rem;
+  background-color: var(--color-bg);
+  overflow: hidden;
+  border-bottom: 1px solid var(--color-button-bg);
+}
+
+th:first-child {
+  border-top-left-radius: var(--radius-lg);
+  border-right: 1px solid var(--color-button-bg);
+}
+
+th:last-child {
+  border-top-right-radius: var(--radius-lg);
+}
+
+td {
+  padding: 1rem;
+}
+
+td:first-child {
+  border-right: 1px solid var(--color-button-bg);
+}
+
+.button-group {
+  display: flex;
+  justify-content: flex-end;
+  gap: 1rem;
+}
+
+.modal-body {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 1rem;
+
+  :deep(.animated-dropdown .options) {
+    max-height: 13.375rem;
+  }
+}
+</style>

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

@@ -0,0 +1,72 @@
+<script setup>
+import { XIcon, DownloadIcon } from '@modrinth/assets'
+import { Button, Modal } from '@modrinth/ui'
+import { install as pack_install } from '@/helpers/pack'
+import { ref } from 'vue'
+import { mixpanel_track } from '@/helpers/mixpanel'
+import { useTheming } from '@/store/theme.js'
+import { handleError } from '@/store/state.js'
+
+const themeStore = useTheming()
+
+const version = ref('')
+const title = ref('')
+const projectId = ref('')
+const icon = ref('')
+const confirmModal = ref(null)
+const installing = ref(false)
+
+defineExpose({
+  show: (projectIdVal, versionId, projectTitle, projectIcon) => {
+    projectId.value = projectIdVal
+    version.value = versionId
+    title.value = projectTitle
+    icon.value = projectIcon
+    installing.value = false
+    confirmModal.value.show()
+
+    mixpanel_track('PackInstallStart')
+  },
+})
+
+async function install() {
+  installing.value = true
+  console.log(`Installing ${projectId.value} ${version.value} ${title.value} ${icon.value}`)
+  confirmModal.value.hide()
+  await pack_install(
+    projectId.value,
+    version.value,
+    title.value,
+    icon.value ? icon.value : null,
+  ).catch(handleError)
+  mixpanel_track('PackInstall', {
+    id: projectId.value,
+    version_id: version.value,
+    title: title.value,
+    source: 'ConfirmModal',
+  })
+}
+</script>
+
+<template>
+  <Modal ref="confirmModal" header="Are you sure?" :noblur="!themeStore.advancedRendering">
+    <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">
+        <Button @click="() => $refs.confirmModal.hide()"><XIcon />Cancel</Button>
+        <Button color="primary" :disabled="installing" @click="install()"
+          ><DownloadIcon /> {{ installing ? 'Installing' : 'Install' }}</Button
+        >
+      </div>
+    </div>
+  </Modal>
+</template>
+
+<style lang="scss" scoped>
+.modal-body {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 1rem;
+}
+</style>

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

@@ -0,0 +1,356 @@
+<script setup>
+import { onUnmounted, ref, watch } from 'vue'
+import { useRouter } from 'vue-router'
+import { DownloadIcon, StopCircleIcon, PlayIcon } from '@modrinth/assets'
+import { Card, Avatar, AnimatedLogo } from '@modrinth/ui'
+import { convertFileSrc } from '@tauri-apps/api/tauri'
+import InstallConfirmModal from '@/components/ui/InstallConfirmModal.vue'
+import { install as pack_install } from '@/helpers/pack'
+import { list, run } from '@/helpers/profile'
+import {
+  get_all_running_profile_paths,
+  get_uuids_by_profile_path,
+  kill_by_uuid,
+} from '@/helpers/process'
+import { process_listener } from '@/helpers/events'
+import { useFetch } from '@/helpers/fetch.js'
+import { handleError } from '@/store/state.js'
+import { showProfileInFolder } from '@/helpers/utils.js'
+import ModInstallModal from '@/components/ui/ModInstallModal.vue'
+import { mixpanel_track } from '@/helpers/mixpanel'
+import { handleSevereError } from '@/store/error.js'
+
+const props = defineProps({
+  instance: {
+    type: Object,
+    default() {
+      return {}
+    },
+  },
+})
+
+const confirmModal = ref(null)
+const modInstallModal = ref(null)
+const playing = ref(false)
+
+const uuid = ref(null)
+const modLoading = ref(
+  props.instance.install_stage ? props.instance.install_stage !== 'installed' : false,
+)
+
+watch(
+  () => props.instance,
+  () => {
+    modLoading.value = props.instance.install_stage
+      ? props.instance.install_stage !== 'installed'
+      : false
+  },
+)
+
+const router = useRouter()
+
+const seeInstance = async () => {
+  const instancePath = props.instance.metadata
+    ? `/instance/${encodeURIComponent(props.instance.path)}/`
+    : `/project/${encodeURIComponent(props.instance.project_id)}/`
+
+  await router.push(instancePath)
+}
+
+const checkProcess = async () => {
+  const runningPaths = await get_all_running_profile_paths().catch(handleError)
+
+  if (runningPaths.includes(props.instance.path)) {
+    playing.value = true
+    return
+  }
+
+  playing.value = false
+  uuid.value = null
+}
+
+const install = async (e) => {
+  e?.stopPropagation()
+  modLoading.value = true
+  const versions = await useFetch(
+    `https://api.modrinth.com/v2/project/${props.instance.project_id}/version`,
+    'project versions',
+  )
+
+  if (props.instance.project_type === 'modpack') {
+    const packs = Object.values(await list(true).catch(handleError))
+
+    if (
+      packs.length === 0 ||
+      !packs
+        .map((value) => value.metadata)
+        .find((pack) => pack.linked_data?.project_id === props.instance.project_id)
+    ) {
+      modLoading.value = true
+      await pack_install(
+        props.instance.project_id,
+        versions[0].id,
+        props.instance.title,
+        props.instance.icon_url,
+      ).catch(handleError)
+      modLoading.value = false
+
+      mixpanel_track('PackInstall', {
+        id: props.instance.project_id,
+        version_id: versions[0].id,
+        title: props.instance.title,
+        source: 'InstanceCard',
+      })
+    } else
+      confirmModal.value.show(
+        props.instance.project_id,
+        versions[0].id,
+        props.instance.title,
+        props.instance.icon_url,
+      )
+  } else {
+    modInstallModal.value.show(
+      props.instance.project_id,
+      versions,
+      props.instance.title,
+      props.instance.project_type,
+    )
+  }
+
+  modLoading.value = false
+}
+
+const play = async (e, context) => {
+  e?.stopPropagation()
+  modLoading.value = true
+  uuid.value = await run(props.instance.path).catch(handleSevereError)
+  modLoading.value = false
+  playing.value = true
+
+  mixpanel_track('InstancePlay', {
+    loader: props.instance.metadata.loader,
+    game_version: props.instance.metadata.game_version,
+    source: context,
+  })
+}
+
+const stop = async (e, context) => {
+  e?.stopPropagation()
+  playing.value = false
+
+  // If we lost the uuid for some reason, such as a user navigating
+  // from-then-back to this page, we will get all uuids by the instance path.
+  // For-each uuid, kill the process.
+  if (!uuid.value) {
+    const uuids = await get_uuids_by_profile_path(props.instance.path).catch(handleError)
+    uuid.value = uuids[0]
+    uuids.forEach(async (u) => await kill_by_uuid(u).catch(handleError))
+  } else await kill_by_uuid(uuid.value).catch(handleError) // If we still have the uuid, just kill it
+
+  mixpanel_track('InstanceStop', {
+    loader: props.instance.metadata.loader,
+    game_version: props.instance.metadata.game_version,
+    source: context,
+  })
+
+  uuid.value = null
+}
+
+const openFolder = async () => {
+  await showProfileInFolder(props.instance.path)
+}
+
+const addContent = async () => {
+  await router.push({
+    path: `/browse/${props.instance.metadata.loader === 'vanilla' ? 'datapack' : 'mod'}`,
+    query: { i: props.instance.path },
+  })
+}
+
+defineExpose({
+  install,
+  playing,
+  play,
+  stop,
+  seeInstance,
+  openFolder,
+  addContent,
+  instance: props.instance,
+})
+
+const unlisten = await process_listener((e) => {
+  if (e.event === 'finished' && e.uuid === uuid.value) playing.value = false
+})
+
+onUnmounted(() => unlisten())
+</script>
+
+<template>
+  <div class="instance">
+    <Card class="instance-card-item button-base" @click="seeInstance" @mouseenter="checkProcess">
+      <Avatar
+        size="lg"
+        :src="
+          props.instance.metadata
+            ? !props.instance.metadata.icon ||
+              (props.instance.metadata.icon && props.instance.metadata.icon.startsWith('http'))
+              ? props.instance.metadata.icon
+              : convertFileSrc(props.instance.metadata?.icon)
+            : props.instance.icon_url
+        "
+        alt="Mod card"
+        class="mod-image"
+      />
+      <div class="project-info">
+        <p class="title">{{ props.instance.metadata?.name || props.instance.title }}</p>
+        <p class="description">
+          {{ props.instance.metadata?.loader }}
+          {{ props.instance.metadata?.game_version || props.instance.latest_version }}
+        </p>
+      </div>
+    </Card>
+    <div
+      v-if="props.instance.metadata && playing === false && modLoading === false"
+      class="install cta button-base"
+      @click="(e) => play(e, 'InstanceCard')"
+    >
+      <PlayIcon />
+    </div>
+    <div v-else-if="modLoading === true && playing === false" class="cta loading-cta">
+      <AnimatedLogo class="loading-indicator" />
+    </div>
+    <div
+      v-else-if="playing === true"
+      class="stop cta button-base"
+      @click="(e) => stop(e, 'InstanceCard')"
+      @mousehover="checkProcess"
+    >
+      <StopCircleIcon />
+    </div>
+    <div v-else class="install cta button-base" @click="install"><DownloadIcon /></div>
+    <InstallConfirmModal ref="confirmModal" />
+    <ModInstallModal ref="modInstallModal" />
+  </div>
+</template>
+
+<style lang="scss">
+.loading-indicator {
+  width: 2.5rem !important;
+  height: 2.5rem !important;
+
+  svg {
+    width: 2.5rem !important;
+    height: 2.5rem !important;
+  }
+}
+</style>
+
+<style lang="scss" scoped>
+.instance {
+  position: relative;
+
+  &:hover {
+    .cta {
+      opacity: 1;
+      bottom: calc(var(--gap-md) + 4.25rem);
+    }
+  }
+}
+
+.cta {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-md);
+  z-index: 1;
+  width: 3rem;
+  height: 3rem;
+  right: calc(var(--gap-md) * 2);
+  bottom: 3.25rem;
+  opacity: 0;
+  transition:
+    0.2s ease-in-out bottom,
+    0.2s ease-in-out opacity,
+    0.1s ease-in-out filter !important;
+  cursor: pointer;
+  box-shadow: var(--shadow-floating);
+
+  svg {
+    color: var(--color-accent-contrast);
+    width: 1.5rem !important;
+    height: 1.5rem !important;
+  }
+
+  &.install {
+    background: var(--color-brand);
+    display: flex;
+  }
+
+  &.stop {
+    background: var(--color-red);
+    display: flex;
+  }
+
+  &.loading-cta {
+    background: hsl(220, 11%, 10%) !important;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+}
+
+.instance-card-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  padding: var(--gap-md);
+  transition: 0.1s ease-in-out all !important; /* overrides Omorphia defaults */
+  margin-bottom: 0;
+
+  .mod-image {
+    --size: 100%;
+
+    width: 100% !important;
+    height: auto !important;
+    max-width: unset !important;
+    max-height: unset !important;
+    aspect-ratio: 1 / 1 !important;
+  }
+
+  .project-info {
+    margin-top: 1rem;
+    width: 100%;
+
+    .title {
+      color: var(--color-contrast);
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      width: 100%;
+      margin: 0;
+      font-weight: 600;
+      font-size: 1rem;
+      line-height: 110%;
+      display: inline-block;
+    }
+
+    .description {
+      color: var(--color-base);
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      font-weight: 500;
+      font-size: 0.775rem;
+      line-height: 125%;
+      margin: 0.25rem 0 0;
+      text-transform: capitalize;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,679 @@
+<template>
+  <Modal ref="modal" header="Create instance" :noblur="!themeStore.advancedRendering">
+    <div class="modal-header">
+      <Chips v-model="creationType" :items="['custom', 'from file', 'import from launcher']" />
+    </div>
+    <hr class="card-divider" />
+    <div v-if="creationType === 'custom'" class="modal-body">
+      <div class="image-upload">
+        <Avatar :src="display_icon" size="md" :rounded="true" />
+        <div class="image-input">
+          <Button @click="upload_icon()">
+            <UploadIcon />
+            Select icon
+          </Button>
+          <Button :disabled="!display_icon" @click="reset_icon">
+            <XIcon />
+            Remove icon
+          </Button>
+        </div>
+      </div>
+      <div class="input-row">
+        <p class="input-label">Name</p>
+        <input
+          v-model="profile_name"
+          autocomplete="off"
+          class="text-input"
+          type="text"
+          maxlength="100"
+        />
+      </div>
+      <div class="input-row">
+        <p class="input-label">Loader</p>
+        <Chips v-model="loader" :items="loaders" />
+      </div>
+      <div class="input-row">
+        <p class="input-label">Game version</p>
+        <div class="versions">
+          <multiselect
+            v-model="game_version"
+            class="selector"
+            :options="game_versions"
+            :multiple="false"
+            :searchable="true"
+            placeholder="Select game version"
+            open-direction="top"
+            :show-labels="false"
+          />
+          <Checkbox
+            v-if="showAdvanced"
+            v-model="showSnapshots"
+            class="filter-checkbox"
+            label="Include snapshots"
+          />
+        </div>
+      </div>
+      <div v-if="showAdvanced && loader !== 'vanilla'" class="input-row">
+        <p class="input-label">Loader version</p>
+        <Chips v-model="loader_version" :items="['stable', 'latest', 'other']" />
+      </div>
+      <div v-if="showAdvanced && loader_version === 'other' && loader !== 'vanilla'">
+        <div v-if="game_version" class="input-row">
+          <p class="input-label">Select version</p>
+          <multiselect
+            v-model="specified_loader_version"
+            class="selector"
+            :options="selectable_versions"
+            :searchable="true"
+            placeholder="Select loader version"
+            open-direction="top"
+            :show-labels="false"
+          />
+        </div>
+        <div v-else class="input-row">
+          <p class="warning">Select a game version before you select a loader version</p>
+        </div>
+      </div>
+      <div class="input-group push-right">
+        <Button @click="toggle_advanced">
+          <CodeIcon />
+          {{ showAdvanced ? 'Hide advanced' : 'Show advanced' }}
+        </Button>
+        <Button @click="hide()">
+          <XIcon />
+          Cancel
+        </Button>
+        <Button color="primary" :disabled="!check_valid || creating" @click="create_instance()">
+          <PlusIcon v-if="!creating" />
+          {{ creating ? 'Creating...' : 'Create' }}
+        </Button>
+      </div>
+    </div>
+    <div v-else-if="creationType === 'from file'" class="modal-body">
+      <Button @click="openFile"> <FolderOpenIcon /> Import from file </Button>
+      <div class="info"><InfoIcon /> Or drag and drop your .mrpack file</div>
+    </div>
+    <div v-else class="modal-body">
+      <Chips
+        v-model="selectedProfileType"
+        :items="profileOptions"
+        :format-label="(profile) => profile?.name"
+      />
+      <div class="path-selection">
+        <h3>{{ selectedProfileType.name }} path</h3>
+        <div class="path-input">
+          <div class="iconified-input">
+            <FolderOpenIcon />
+            <input
+              v-model="selectedProfileType.path"
+              type="text"
+              placeholder="Path to launcher"
+              @change="setPath"
+            />
+            <Button @click="() => (selectedLauncherPath = '')">
+              <XIcon />
+            </Button>
+          </div>
+          <Button icon-only @click="selectLauncherPath">
+            <FolderSearchIcon />
+          </Button>
+          <Button icon-only @click="reload">
+            <UpdatedIcon />
+          </Button>
+        </div>
+      </div>
+      <div class="table">
+        <div class="table-head table-row">
+          <div class="toggle-all table-cell">
+            <Checkbox
+              class="select-checkbox"
+              :model-value="
+                profiles.get(selectedProfileType.name)?.every((child) => child.selected)
+              "
+              @update:model-value="
+                (newValue) =>
+                  profiles
+                    .get(selectedProfileType.name)
+                    ?.forEach((child) => (child.selected = newValue))
+              "
+            />
+          </div>
+          <div class="name-cell table-cell">Profile name</div>
+        </div>
+        <div
+          v-if="
+            profiles.get(selectedProfileType.name) &&
+            profiles.get(selectedProfileType.name).length > 0
+          "
+          class="table-content"
+        >
+          <div
+            v-for="(profile, index) in profiles.get(selectedProfileType.name)"
+            :key="index"
+            class="table-row"
+          >
+            <div class="checkbox-cell table-cell">
+              <Checkbox v-model="profile.selected" class="select-checkbox" />
+            </div>
+            <div class="name-cell table-cell">
+              {{ profile.name }}
+            </div>
+          </div>
+        </div>
+        <div v-else class="table-content empty">No profiles found</div>
+      </div>
+      <div class="button-row">
+        <Button
+          :disabled="
+            loading ||
+            !Array.from(profiles.values())
+              .flatMap((e) => e)
+              .some((e) => e.selected)
+          "
+          color="primary"
+          @click="next"
+        >
+          {{
+            loading
+              ? 'Importing...'
+              : Array.from(profiles.values())
+                    .flatMap((e) => e)
+                    .some((e) => e.selected)
+                ? `Import ${
+                    Array.from(profiles.values())
+                      .flatMap((e) => e)
+                      .filter((e) => e.selected).length
+                  } profiles`
+                : 'Select profiles to import'
+          }}
+        </Button>
+        <ProgressBar
+          v-if="loading"
+          :progress="(importedProfiles / (totalProfiles + 0.0001)) * 100"
+        />
+      </div>
+    </div>
+  </Modal>
+</template>
+
+<script setup>
+import {
+  PlusIcon,
+  UploadIcon,
+  XIcon,
+  CodeIcon,
+  FolderOpenIcon,
+  InfoIcon,
+  FolderSearchIcon,
+  UpdatedIcon,
+} from '@modrinth/assets'
+import { Avatar, Button, Chips, Modal, Checkbox } from '@modrinth/ui'
+import { computed, onUnmounted, ref, shallowRef } from 'vue'
+import { get_loaders } from '@/helpers/tags'
+import { create } from '@/helpers/profile'
+import { open } from '@tauri-apps/api/dialog'
+import { tauri } from '@tauri-apps/api'
+import {
+  get_game_versions,
+  get_fabric_versions,
+  get_forge_versions,
+  get_quilt_versions,
+  get_neoforge_versions,
+} from '@/helpers/metadata'
+import { handleError } from '@/store/notifications.js'
+import Multiselect from 'vue-multiselect'
+import { mixpanel_track } from '@/helpers/mixpanel'
+import { useTheming } from '@/store/state.js'
+import { listen } from '@tauri-apps/api/event'
+import { install_from_file } from '@/helpers/pack.js'
+import {
+  get_default_launcher_path,
+  get_importable_instances,
+  import_instance,
+} 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')
+const loader_version = ref('stable')
+const specified_loader_version = ref('')
+const icon = ref(null)
+const display_icon = ref(null)
+const showAdvanced = ref(false)
+const creating = ref(false)
+const showSnapshots = ref(false)
+const creationType = ref('from file')
+const isShowing = ref(false)
+
+defineExpose({
+  show: async () => {
+    game_version.value = ''
+    specified_loader_version.value = ''
+    profile_name.value = ''
+    creating.value = false
+    showAdvanced.value = false
+    showSnapshots.value = false
+    loader.value = 'vanilla'
+    loader_version.value = 'stable'
+    icon.value = null
+    display_icon.value = null
+    isShowing.value = true
+    modal.value.show()
+
+    unlistener.value = await listen('tauri://file-drop', async (event) => {
+      // Only if modal is showing
+      if (!isShowing.value) return
+      if (creationType.value !== 'from file') return
+      hide()
+      if (event.payload && event.payload.length > 0 && event.payload[0].endsWith('.mrpack')) {
+        await install_from_file(event.payload[0]).catch(handleError)
+        mixpanel_track('InstanceCreate', {
+          source: 'CreationModalFileDrop',
+        })
+      }
+    })
+
+    mixpanel_track('InstanceCreateStart', { source: 'CreationModal' })
+  },
+})
+
+const unlistener = ref(null)
+const hide = () => {
+  isShowing.value = false
+  modal.value.hide()
+  if (unlistener.value) {
+    unlistener.value()
+    unlistener.value = null
+  }
+}
+onUnmounted(() => {
+  if (unlistener.value) {
+    unlistener.value()
+    unlistener.value = null
+  }
+})
+
+const [
+  fabric_versions,
+  forge_versions,
+  quilt_versions,
+  neoforge_versions,
+  all_game_versions,
+  loaders,
+] = await Promise.all([
+  get_fabric_versions().then(shallowRef).catch(handleError),
+  get_forge_versions().then(shallowRef).catch(handleError),
+  get_quilt_versions().then(shallowRef).catch(handleError),
+  get_neoforge_versions().then(shallowRef).catch(handleError),
+  get_game_versions().then(shallowRef).catch(handleError),
+  get_loaders()
+    .then((value) =>
+      value
+        .filter((item) => item.supported_project_types.includes('modpack'))
+        .map((item) => item.name.toLowerCase()),
+    )
+    .then(ref)
+    .catch(handleError),
+])
+loaders.value.unshift('vanilla')
+
+const game_versions = computed(() => {
+  return all_game_versions.value.versions
+    .filter((item) => {
+      let defaultVal = item.type === 'release' || showSnapshots.value
+      if (loader.value === 'fabric') {
+        defaultVal &= fabric_versions.value.gameVersions.some((x) => item.id === x.id)
+      } else if (loader.value === 'forge') {
+        defaultVal &= forge_versions.value.gameVersions.some((x) => item.id === x.id)
+      } else if (loader.value === 'quilt') {
+        defaultVal &= quilt_versions.value.gameVersions.some((x) => item.id === x.id)
+      } else if (loader.value === 'neoforge') {
+        defaultVal &= neoforge_versions.value.gameVersions.some((x) => item.id === x.id)
+      }
+
+      return defaultVal
+    })
+    .map((item) => item.id)
+})
+
+const modal = ref(null)
+
+const check_valid = computed(() => {
+  return (
+    profile_name.value.trim() &&
+    game_version.value &&
+    game_versions.value.includes(game_version.value)
+  )
+})
+
+const create_instance = async () => {
+  creating.value = true
+  const loader_version_value =
+    loader_version.value === 'other' ? specified_loader_version.value : loader_version.value
+  const loaderVersion = loader.value === 'vanilla' ? null : loader_version_value ?? 'stable'
+
+  hide()
+  creating.value = false
+
+  await create(
+    profile_name.value,
+    game_version.value,
+    loader.value,
+    loader.value === 'vanilla' ? null : loader_version_value ?? 'stable',
+    icon.value,
+  ).catch(handleError)
+
+  mixpanel_track('InstanceCreate', {
+    profile_name: profile_name.value,
+    game_version: game_version.value,
+    loader: loader.value,
+    loader_version: loaderVersion,
+    has_icon: !!icon.value,
+    source: 'CreationModal',
+  })
+}
+
+const upload_icon = async () => {
+  icon.value = await open({
+    multiple: false,
+    filters: [
+      {
+        name: 'Image',
+        extensions: ['png', 'jpeg', 'svg', 'webp', 'gif', 'jpg'],
+      },
+    ],
+  })
+
+  if (!icon.value) return
+  display_icon.value = tauri.convertFileSrc(icon.value)
+}
+
+const reset_icon = () => {
+  icon.value = null
+  display_icon.value = null
+}
+
+const selectable_versions = computed(() => {
+  if (game_version.value) {
+    if (loader.value === 'fabric') {
+      return fabric_versions.value.gameVersions[0].loaders.map((item) => item.id)
+    } else if (loader.value === 'forge') {
+      return forge_versions.value.gameVersions
+        .find((item) => item.id === game_version.value)
+        .loaders.map((item) => item.id)
+    } else if (loader.value === 'quilt') {
+      return quilt_versions.value.gameVersions[0].loaders.map((item) => item.id)
+    } else if (loader.value === 'neoforge') {
+      return neoforge_versions.value.gameVersions
+        .find((item) => item.id === game_version.value)
+        .loaders.map((item) => item.id)
+    }
+  }
+  return []
+})
+
+const toggle_advanced = () => {
+  showAdvanced.value = !showAdvanced.value
+}
+
+const openFile = async () => {
+  const newProject = await open({ multiple: false })
+  if (!newProject) return
+  hide()
+  await install_from_file(newProject).catch(handleError)
+
+  mixpanel_track('InstanceCreate', {
+    source: 'CreationModalFileOpen',
+  })
+}
+
+const profiles = ref(
+  new Map([
+    ['MultiMC', []],
+    ['GDLauncher', []],
+    ['ATLauncher', []],
+    ['Curseforge', []],
+    ['PrismLauncher', []],
+  ]),
+)
+
+const loading = ref(false)
+const importedProfiles = ref(0)
+const totalProfiles = ref(0)
+
+const selectedProfileType = ref('MultiMC')
+const profileOptions = ref([
+  { name: 'MultiMC', path: '' },
+  { name: 'GDLauncher', path: '' },
+  { name: 'ATLauncher', path: '' },
+  { name: 'Curseforge', path: '' },
+  { name: 'PrismLauncher', path: '' },
+])
+
+// Attempt to get import profiles on default paths
+const promises = profileOptions.value.map(async (option) => {
+  const path = await get_default_launcher_path(option.name).catch(handleError)
+  if (!path || path === '') return
+
+  // Try catch to allow failure and simply ignore default path attempt
+  try {
+    const instances = await get_importable_instances(option.name, path)
+
+    if (!instances) return
+    profileOptions.value.find((profile) => profile.name === option.name).path = path
+    profiles.value.set(
+      option.name,
+      instances.map((name) => ({ name, selected: false })),
+    )
+  } catch (error) {
+    // Allow failure silently
+  }
+})
+await Promise.all(promises)
+
+const selectLauncherPath = async () => {
+  selectedProfileType.value.path = await open({ multiple: false, directory: true })
+
+  if (selectedProfileType.value.path) {
+    await reload()
+  }
+}
+
+const reload = async () => {
+  const instances = await get_importable_instances(
+    selectedProfileType.value.name,
+    selectedProfileType.value.path,
+  ).catch(handleError)
+  if (instances) {
+    profiles.value.set(
+      selectedProfileType.value.name,
+      instances.map((name) => ({ name, selected: false })),
+    )
+  } else {
+    profiles.value.set(selectedProfileType.value.name, [])
+  }
+}
+
+const setPath = () => {
+  profileOptions.value.find((profile) => profile.name === selectedProfileType.value.name).path =
+    selectedProfileType.value.path
+}
+
+const next = async () => {
+  importedProfiles.value = 0
+  totalProfiles.value = Array.from(profiles.value.values())
+    .map((profiles) => profiles.filter((profile) => profile.selected).length)
+    .reduce((a, b) => a + b, 0)
+  loading.value = true
+  for (const launcher of Array.from(profiles.value.entries()).map(([launcher, profiles]) => ({
+    launcher,
+    path: profileOptions.value.find((option) => option.name === launcher).path,
+    profiles,
+  }))) {
+    for (const profile of launcher.profiles.filter((profile) => profile.selected)) {
+      await import_instance(launcher.launcher, launcher.path, profile.name)
+        .catch(handleError)
+        .then(() => console.log(`Successfully Imported ${profile.name} from ${launcher.launcher}`))
+      profile.selected = false
+      importedProfiles.value++
+    }
+  }
+  loading.value = false
+}
+</script>
+
+<style lang="scss" scoped>
+.modal-body {
+  display: flex;
+  flex-direction: column;
+  padding: var(--gap-lg);
+  gap: var(--gap-md);
+}
+
+.input-label {
+  font-size: 1rem;
+  font-weight: bolder;
+  color: var(--color-contrast);
+  margin-bottom: 0.5rem;
+}
+
+.text-input {
+  width: 20rem;
+}
+
+.image-upload {
+  display: flex;
+  gap: 1rem;
+}
+
+.image-input {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  justify-content: center;
+}
+
+.warning {
+  font-style: italic;
+}
+
+.versions {
+  display: flex;
+  flex-direction: row;
+  gap: 1rem;
+}
+
+:deep(button.checkbox) {
+  border: none;
+}
+
+.selector {
+  max-width: 20rem;
+}
+
+.labeled-divider {
+  text-align: center;
+}
+
+.labeled-divider:after {
+  background-color: var(--color-raised-bg);
+  content: 'Or';
+  color: var(--color-base);
+  padding: var(--gap-sm);
+  position: relative;
+  top: -0.5rem;
+}
+
+.info {
+  display: flex;
+  flex-direction: row;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+.modal-header {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--gap-lg);
+  padding-bottom: 0;
+}
+
+.path-selection {
+  padding: var(--gap-xl);
+  background-color: var(--color-bg);
+  border-radius: var(--radius-lg);
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-md);
+
+  h3 {
+    margin: 0;
+  }
+
+  .path-input {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    flex-direction: row;
+    gap: var(--gap-sm);
+
+    .iconified-input {
+      flex-grow: 1;
+      :deep(input) {
+        width: 100%;
+        flex-basis: auto;
+      }
+    }
+  }
+}
+
+.table {
+  border: 1px solid var(--color-bg);
+}
+
+.table-row {
+  grid-template-columns: min-content auto;
+}
+
+.table-content {
+  max-height: calc(5 * (18px + 2rem));
+  height: calc(5 * (18px + 2rem));
+  overflow-y: auto;
+}
+
+.select-checkbox {
+  button.checkbox {
+    border: none;
+  }
+}
+
+.button-row {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--gap-md);
+
+  .transparent {
+    padding: var(--gap-sm) 0;
+  }
+}
+
+.empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.5rem;
+  font-weight: bolder;
+  color: var(--color-contrast);
+}
+
+.card-divider {
+  margin: var(--gap-md) var(--gap-lg) 0 var(--gap-lg);
+}
+</style>

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

@@ -0,0 +1,102 @@
+<template>
+  <Modal ref="detectJavaModal" header="Select java version" :noblur="!themeStore.advancedRendering">
+    <div class="auto-detect-modal">
+      <div class="table">
+        <div class="table-row table-head">
+          <div class="table-cell table-text">Version</div>
+          <div class="table-cell table-text">Path</div>
+          <div class="table-cell table-text">Actions</div>
+        </div>
+        <div v-for="javaInstall in chosenInstallOptions" :key="javaInstall.path" class="table-row">
+          <div class="table-cell table-text">
+            <span>{{ javaInstall.version }}</span>
+          </div>
+          <div v-tooltip="javaInstall.path" class="table-cell table-text">
+            <span>{{ javaInstall.path }}</span>
+          </div>
+          <div class="table-cell table-text manage">
+            <Button v-if="currentSelected.path === javaInstall.path" disabled
+              ><CheckIcon /> Selected</Button
+            >
+            <Button v-else @click="setJavaInstall(javaInstall)"><PlusIcon /> Select</Button>
+          </div>
+        </div>
+        <div v-if="chosenInstallOptions.length === 0" class="table-row entire-row">
+          <div class="table-cell table-text">No java installations found!</div>
+        </div>
+      </div>
+      <div class="input-group push-right">
+        <Button @click="$refs.detectJavaModal.hide()">
+          <XIcon />
+          Cancel
+        </Button>
+      </div>
+    </div>
+  </Modal>
+</template>
+<script setup>
+import { PlusIcon, CheckIcon, XIcon } from '@modrinth/assets'
+import { Modal, Button } from '@modrinth/ui'
+import { ref } from 'vue'
+import { find_filtered_jres } from '@/helpers/jre.js'
+import { handleError } from '@/store/notifications.js'
+import { mixpanel_track } from '@/helpers/mixpanel'
+import { useTheming } from '@/store/theme.js'
+
+const themeStore = useTheming()
+
+const chosenInstallOptions = ref([])
+const detectJavaModal = ref(null)
+const currentSelected = ref({})
+
+defineExpose({
+  show: async (version, currentSelectedJava) => {
+    chosenInstallOptions.value = await find_filtered_jres(version).catch(handleError)
+
+    console.log(chosenInstallOptions.value)
+    console.log(version)
+
+    currentSelected.value = currentSelectedJava
+    if (!currentSelected.value) {
+      currentSelected.value = { path: '', version: '' }
+    }
+
+    detectJavaModal.value.show()
+  },
+})
+
+const emit = defineEmits(['submit'])
+
+function setJavaInstall(javaInstall) {
+  emit('submit', javaInstall)
+  detectJavaModal.value.hide()
+  mixpanel_track('JavaAutoDetect', {
+    path: javaInstall.path,
+    version: javaInstall.version,
+  })
+}
+</script>
+<style lang="scss" scoped>
+.auto-detect-modal {
+  padding: 1rem;
+
+  .table {
+    .table-row {
+      grid-template-columns: 1fr 4fr min-content;
+    }
+
+    span {
+      display: inherit;
+      align-items: center;
+      justify-content: center;
+    }
+
+    padding: 0.5rem;
+  }
+}
+
+.manage {
+  display: flex;
+  gap: 0.5rem;
+}
+</style>

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

@@ -0,0 +1,217 @@
+<template>
+  <JavaDetectionModal ref="detectJavaModal" @submit="(val) => emit('update:modelValue', val)" />
+  <div class="toggle-setting" :class="{ compact }">
+    <input
+      autocomplete="off"
+      :disabled="props.disabled"
+      :value="props.modelValue ? props.modelValue.path : ''"
+      type="text"
+      class="installation-input"
+      :placeholder="placeholder ?? '/path/to/java'"
+      @input="
+        (val) => {
+          emit('update:modelValue', {
+            ...props.modelValue,
+            path: val.target.value,
+          })
+        }
+      "
+    />
+    <span class="installation-buttons">
+      <Button
+        v-if="props.version"
+        :disabled="props.disabled || installingJava"
+        @click="reinstallJava"
+      >
+        <DownloadIcon />
+        {{ installingJava ? 'Installing...' : 'Install recommended' }}
+      </Button>
+      <Button :disabled="props.disabled" @click="autoDetect">
+        <SearchIcon />
+        Auto detect
+      </Button>
+      <Button :disabled="props.disabled" @click="handleJavaFileInput()">
+        <FolderSearchIcon />
+        Browse
+      </Button>
+      <Button v-if="testingJava" disabled> Testing... </Button>
+      <Button v-else-if="testingJavaSuccess === true">
+        <CheckIcon class="test-success" />
+        Success
+      </Button>
+      <Button v-else-if="testingJavaSuccess === false">
+        <XIcon class="test-fail" />
+        Failed
+      </Button>
+      <Button v-else :disabled="props.disabled" @click="testJava">
+        <PlayIcon />
+        Test
+      </Button>
+    </span>
+  </div>
+</template>
+
+<script setup>
+import {
+  SearchIcon,
+  PlayIcon,
+  CheckIcon,
+  XIcon,
+  FolderSearchIcon,
+  DownloadIcon,
+} from '@modrinth/assets'
+import { Button } from '@modrinth/ui'
+import { auto_install_java, find_filtered_jres, get_jre, test_jre } from '@/helpers/jre.js'
+import { ref } from 'vue'
+import { open } from '@tauri-apps/api/dialog'
+import JavaDetectionModal from '@/components/ui/JavaDetectionModal.vue'
+import { mixpanel_track } from '@/helpers/mixpanel'
+import { handleError } from '@/store/state.js'
+
+const props = defineProps({
+  version: {
+    type: Number,
+    required: false,
+    default: null,
+  },
+  modelValue: {
+    type: Object,
+    default: () => ({
+      path: '',
+      version: '',
+    }),
+  },
+  disabled: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
+  placeholder: {
+    type: String,
+    required: false,
+    default: null,
+  },
+  compact: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const testingJava = ref(false)
+const testingJavaSuccess = ref(null)
+
+const installingJava = ref(false)
+
+async function testJava() {
+  testingJava.value = true
+  testingJavaSuccess.value = await test_jre(
+    props.modelValue ? props.modelValue.path : '',
+    1,
+    props.version,
+  )
+  testingJava.value = false
+
+  mixpanel_track('JavaTest', {
+    path: props.modelValue ? props.modelValue.path : '',
+    success: testingJavaSuccess.value,
+  })
+
+  setTimeout(() => {
+    testingJavaSuccess.value = null
+  }, 2000)
+}
+
+async function handleJavaFileInput() {
+  let filePath = await open()
+
+  if (filePath) {
+    let result = await get_jre(filePath)
+    if (!result) {
+      result = {
+        path: filePath,
+        version: props.version.toString(),
+        architecture: 'x86',
+      }
+    }
+
+    mixpanel_track('JavaManualSelect', {
+      path: filePath,
+      version: props.version,
+    })
+
+    emit('update:modelValue', result)
+  }
+}
+
+const detectJavaModal = ref(null)
+async function autoDetect() {
+  if (!props.compact) {
+    detectJavaModal.value.show(props.version, props.modelValue)
+  } else {
+    let versions = await find_filtered_jres(props.version).catch(handleError)
+    if (versions.length > 0) {
+      emit('update:modelValue', versions[0])
+    }
+  }
+}
+
+async function reinstallJava() {
+  installingJava.value = true
+  const path = await auto_install_java(props.version).catch(handleError)
+  let result = await get_jre(path)
+
+  console.log('java result ' + result)
+  if (!result) {
+    result = {
+      path: path,
+      version: props.version.toString(),
+      architecture: 'x86',
+    }
+  }
+
+  mixpanel_track('JavaReInstall', {
+    path: path,
+    version: props.version,
+  })
+
+  emit('update:modelValue', result)
+  installingJava.value = false
+}
+</script>
+
+<style lang="scss" scoped>
+.installation-input {
+  width: 100% !important;
+  flex-grow: 1;
+}
+
+.toggle-setting {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  gap: 0.5rem;
+
+  &.compact {
+    flex-wrap: wrap;
+  }
+}
+
+.installation-buttons {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 0.5rem;
+  margin: 0;
+}
+
+.test-success {
+  color: var(--color-green);
+}
+
+.test-fail {
+  color: var(--color-red);
+}
+</style>

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

@@ -0,0 +1,417 @@
+<script setup>
+import {
+  DownloadIcon,
+  PlusIcon,
+  UploadIcon,
+  XIcon,
+  RightArrowIcon,
+  CheckIcon,
+} from '@modrinth/assets'
+import { Avatar, Modal, Button, Card } from '@modrinth/ui'
+import { computed, ref } from 'vue'
+import {
+  add_project_from_version as installMod,
+  check_installed,
+  get,
+  list,
+} from '@/helpers/profile'
+import { open } from '@tauri-apps/api/dialog'
+import { create } from '@/helpers/profile'
+import { installVersionDependencies } from '@/helpers/utils'
+import { handleError } from '@/store/notifications.js'
+import { mixpanel_track } from '@/helpers/mixpanel'
+import { useTheming } from '@/store/theme.js'
+import { useRouter } from 'vue-router'
+import { tauri } from '@tauri-apps/api'
+
+const themeStore = useTheming()
+const router = useRouter()
+
+const versions = ref([])
+const project = ref('')
+const projectTitle = ref('')
+const projectType = ref('')
+
+const installModal = ref(null)
+const searchFilter = ref('')
+const showCreation = ref(false)
+const icon = ref(null)
+const name = ref(null)
+const display_icon = ref(null)
+const loader = ref(null)
+const gameVersion = ref(null)
+const creatingInstance = ref(false)
+
+defineExpose({
+  show: async (projectId, selectedVersions, title, type) => {
+    project.value = projectId
+    versions.value = selectedVersions
+    projectTitle.value = title
+    projectType.value = type
+
+    installModal.value.show()
+    searchFilter.value = ''
+
+    profiles.value = await getData()
+
+    mixpanel_track('ProjectInstallStart', { source: 'ProjectInstallModal' })
+  },
+})
+
+const profiles = ref([])
+
+async function install(instance) {
+  instance.installing = true
+  const version = versions.value.find((v) => {
+    return (
+      v.game_versions.includes(instance.metadata.game_version) &&
+      (v.loaders.includes(instance.metadata.loader) ||
+        v.loaders.includes('minecraft') ||
+        v.loaders.includes('iris') ||
+        v.loaders.includes('optifine'))
+    )
+  })
+
+  if (!version) {
+    instance.installing = false
+    handleError('No compatible version found')
+    return
+  }
+
+  await installMod(instance.path, version.id).catch(handleError)
+  await installVersionDependencies(instance, version)
+
+  instance.installedMod = true
+  instance.installing = false
+
+  mixpanel_track('ProjectInstall', {
+    loader: instance.metadata.loader,
+    game_version: instance.metadata.game_version,
+    id: project.value,
+    version_id: version.id,
+    project_type: projectType.value,
+    title: projectTitle.value,
+    source: 'ProjectInstallModal',
+  })
+}
+
+async function getData() {
+  const projects = await list(true).then(Object.values).catch(handleError)
+
+  const filtered = projects
+    .filter((profile) => {
+      return profile.metadata.name.toLowerCase().includes(searchFilter.value.toLowerCase())
+    })
+    .filter((profile) => {
+      return (
+        versions.value.flatMap((v) => v.game_versions).includes(profile.metadata.game_version) &&
+        versions.value
+          .flatMap((v) => v.loaders)
+          .some(
+            (value) =>
+              value === profile.metadata.loader ||
+              ['minecraft', 'iris', 'optifine'].includes(value),
+          )
+      )
+    })
+
+  for (let profile of filtered) {
+    profile.installing = false
+    profile.installedMod = await check_installed(profile.path, project.value).catch(handleError)
+  }
+
+  return filtered
+}
+
+const alreadySentCreation = ref(false)
+const toggleCreation = () => {
+  showCreation.value = !showCreation.value
+  name.value = null
+  icon.value = null
+  display_icon.value = null
+  gameVersion.value = null
+  loader.value = null
+
+  if (!alreadySentCreation.value) {
+    alreadySentCreation.value = false
+    mixpanel_track('InstanceCreateStart', { source: 'ProjectInstallModal' })
+  }
+}
+
+const upload_icon = async () => {
+  icon.value = await open({
+    multiple: false,
+    filters: [
+      {
+        name: 'Image',
+        extensions: ['png', 'jpeg'],
+      },
+    ],
+  })
+
+  if (!icon.value) return
+  display_icon.value = tauri.convertFileSrc(icon.value)
+}
+
+const reset_icon = () => {
+  icon.value = null
+  display_icon.value = null
+}
+
+const createInstance = async () => {
+  creatingInstance.value = true
+
+  const loader =
+    versions.value[0].loaders[0] !== 'forge' &&
+    versions.value[0].loaders[0] !== 'fabric' &&
+    versions.value[0].loaders[0] !== 'quilt'
+      ? 'vanilla'
+      : versions.value[0].loaders[0]
+
+  const id = await create(
+    name.value,
+    versions.value[0].game_versions[0],
+    loader,
+    'latest',
+    icon.value,
+  ).catch(handleError)
+
+  await installMod(id, versions.value[0].id).catch(handleError)
+
+  await router.push(`/instance/${encodeURIComponent(id)}/`)
+
+  const instance = await get(id, true)
+  await installVersionDependencies(instance, versions.value[0])
+
+  mixpanel_track('InstanceCreate', {
+    profile_name: name.value,
+    game_version: versions.value[0].game_versions[0],
+    loader: loader,
+    loader_version: 'latest',
+    has_icon: !!icon.value,
+    source: 'ProjectInstallModal',
+  })
+
+  mixpanel_track('ProjectInstall', {
+    loader: loader,
+    game_version: versions.value[0].game_versions[0],
+    id: project.value,
+    version_id: versions.value[0].id,
+    project_type: projectType.value,
+    title: projectTitle.value,
+    source: 'ProjectInstallModal',
+  })
+
+  if (installModal.value) installModal.value.hide()
+  creatingInstance.value = false
+}
+
+const check_valid = computed(() => {
+  return name.value
+})
+</script>
+
+<template>
+  <Modal
+    ref="installModal"
+    header="Install project to instance"
+    :noblur="!themeStore.advancedRendering"
+  >
+    <div class="modal-body">
+      <input
+        v-model="searchFilter"
+        autocomplete="off"
+        type="text"
+        class="search"
+        placeholder="Search for an instance"
+      />
+      <div class="profiles" :class="{ 'hide-creation': !showCreation }">
+        <div v-for="profile in profiles" :key="profile.metadata.name" class="option">
+          <Button
+            color="raised"
+            class="profile-button"
+            @click="$router.push(`/instance/${encodeURIComponent(profile.path)}`)"
+          >
+            <Avatar
+              :src="
+                !profile.metadata.icon ||
+                (profile.metadata.icon && profile.metadata.icon.startsWith('http'))
+                  ? profile.metadata.icon
+                  : tauri.convertFileSrc(profile.metadata?.icon)
+              "
+              class="profile-image"
+            />
+            {{ profile.metadata.name }}
+          </Button>
+          <div
+            v-tooltip="
+              profile.metadata.linked_data?.locked && !profile.installedMod
+                ? 'Unpair or unlock an instance to add mods.'
+                : ''
+            "
+          >
+            <Button
+              :disabled="
+                profile.installedMod || profile.installing || profile.metadata.linked_data?.locked
+              "
+              @click="install(profile)"
+            >
+              <DownloadIcon v-if="!profile.installedMod && !profile.installing" />
+              <CheckIcon v-else-if="profile.installedMod" />
+              {{
+                profile.installing
+                  ? 'Installing...'
+                  : profile.installedMod
+                    ? 'Installed'
+                    : profile.metadata.linked_data && profile.metadata.linked_data.locked
+                      ? 'Paired'
+                      : 'Install'
+              }}
+            </Button>
+          </div>
+        </div>
+      </div>
+      <Card v-if="showCreation" class="creation-card">
+        <div class="creation-container">
+          <div class="creation-icon">
+            <Avatar size="md" class="icon" :src="display_icon" />
+            <div class="creation-icon__description">
+              <Button @click="upload_icon()">
+                <UploadIcon />
+                <span class="no-wrap"> Select icon </span>
+              </Button>
+              <Button :disabled="!display_icon" @click="reset_icon()">
+                <XIcon />
+                <span class="no-wrap"> Remove icon </span>
+              </Button>
+            </div>
+          </div>
+          <div class="creation-settings">
+            <input
+              v-model="name"
+              autocomplete="off"
+              type="text"
+              placeholder="Name"
+              class="creation-input"
+            />
+            <Button :disabled="creatingInstance === true || !check_valid" @click="createInstance()">
+              <RightArrowIcon />
+              {{ creatingInstance ? 'Creating...' : 'Create' }}
+            </Button>
+          </div>
+        </div>
+      </Card>
+      <div class="input-group push-right">
+        <Button :color="showCreation ? '' : 'primary'" @click="toggleCreation()">
+          <PlusIcon />
+          {{ showCreation ? 'Hide New Instance' : 'Create new instance' }}
+        </Button>
+        <Button @click="installModal.hide()">Cancel</Button>
+      </div>
+    </div>
+  </Modal>
+</template>
+
+<style scoped lang="scss">
+.creation-card {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  margin: 0;
+  padding: 1rem;
+  background-color: var(--color-bg);
+}
+
+.creation-container {
+  display: flex;
+  flex-direction: row;
+  gap: 1rem;
+}
+
+.creation-icon {
+  display: flex;
+  flex-direction: row;
+  gap: 1rem;
+  align-items: center;
+  flex-grow: 1;
+
+  .creation-icon__description {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+}
+
+.creation-input {
+  width: 100%;
+}
+
+.no-wrap {
+  white-space: nowrap;
+}
+
+.creation-dropdown {
+  width: min-content !important;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.creation-settings {
+  width: 100%;
+  margin-left: 0.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  justify-content: center;
+}
+
+.modal-body {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 1rem;
+}
+
+.profiles {
+  max-height: 12rem;
+  overflow-y: auto;
+
+  &.hide-creation {
+    max-height: 21rem;
+  }
+}
+
+.option {
+  width: calc(100%);
+  background: var(--color-raised-bg);
+  color: var(--color-base);
+  box-shadow: none;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 0.5rem;
+  gap: 0.5rem;
+
+  img {
+    margin-right: 0.5rem;
+  }
+
+  .name {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+
+  .profile-button {
+    align-content: start;
+    padding: 0.5rem;
+    text-align: left;
+  }
+}
+
+.profile-image {
+  --size: 2rem !important;
+}
+</style>

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

@@ -0,0 +1,188 @@
+<script setup>
+import { CheckIcon } from '@modrinth/assets'
+import { Button, Modal, 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'
+
+const props = defineProps({
+  versions: {
+    type: Array,
+    required: true,
+  },
+  instance: {
+    type: Object,
+    default: null,
+  },
+})
+
+defineExpose({
+  show: () => {
+    modpackVersionModal.value.show()
+  },
+})
+
+const filteredVersions = computed(() => {
+  return props.versions
+})
+
+const modpackVersionModal = ref(null)
+const installedVersion = computed(() => props.instance?.metadata?.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)
+  inProgress.value = false
+}
+</script>
+
+<template>
+  <Modal
+    ref="modpackVersionModal"
+    class="modpack-version-modal"
+    header="Change modpack version"
+    :noblur="!themeStore.advancedRendering"
+  >
+    <div class="modal-body">
+      <Card v-if="instance.metadata.linked_data" class="mod-card">
+        <div class="table">
+          <div class="table-row with-columns table-head">
+            <div class="table-cell table-text download-cell" />
+            <div class="name-cell table-cell table-text">Name</div>
+            <div class="table-cell table-text">Supports</div>
+          </div>
+          <div class="scrollable">
+            <div
+              v-for="version in filteredVersions"
+              :key="version.id"
+              class="table-row with-columns selectable"
+              @click="$router.push(`/project/${$route.params.id}/version/${version.id}`)"
+            >
+              <div class="table-cell table-text">
+                <Button
+                  :color="version.id === installedVersion ? '' : 'primary'"
+                  icon-only
+                  :disabled="inProgress || installing || version.id === installedVersion"
+                  @click.stop="() => switchVersion(version.id)"
+                >
+                  <SwapIcon v-if="version.id !== installedVersion" />
+                  <CheckIcon v-else />
+                </Button>
+              </div>
+              <div class="name-cell table-cell table-text">
+                <div class="version-link">
+                  {{ version.name.charAt(0).toUpperCase() + version.name.slice(1) }}
+                  <div class="version-badge">
+                    <div class="channel-indicator">
+                      <Badge
+                        :color="releaseColor(version.version_type)"
+                        :type="
+                          version.version_type.charAt(0).toUpperCase() +
+                          version.version_type.slice(1)
+                        "
+                      />
+                    </div>
+                    <div>
+                      {{ version.version_number }}
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="table-cell table-text stacked-text">
+                <span>
+                  {{
+                    version.loaders
+                      .map((str) => str.charAt(0).toUpperCase() + str.slice(1))
+                      .join(', ')
+                  }}
+                </span>
+                <span>
+                  {{ version.game_versions.join(', ') }}
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </Card>
+    </div>
+  </Modal>
+</template>
+
+<style scoped lang="scss">
+.filter-header {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.with-columns {
+  grid-template-columns: min-content 1fr 1fr;
+}
+
+.scrollable {
+  overflow-y: auto;
+  max-height: 25rem;
+}
+
+.card-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background-color: var(--color-raised-bg);
+}
+
+.mod-card {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  overflow: hidden;
+  margin-top: 0.5rem;
+}
+
+.version-link {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+
+  .version-badge {
+    display: flex;
+    flex-wrap: wrap;
+
+    .channel-indicator {
+      margin-right: 0.5rem;
+    }
+  }
+}
+
+.stacked-text {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  align-items: flex-start;
+}
+
+.download-cell {
+  width: 4rem;
+  padding: 1rem;
+}
+
+.modal-body {
+  padding: var(--gap-xl);
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-md);
+}
+
+.table {
+  border: 1px solid var(--color-bg);
+}
+</style>

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

@@ -0,0 +1,33 @@
+<template>
+  <div class="progress-bar">
+    <div class="progress-bar__fill" :style="{ width: `${progress}%` }"></div>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  progress: {
+    type: Number,
+    required: true,
+    validator(value) {
+      return value >= 0 && value <= 100
+    },
+  },
+})
+</script>
+
+<style scoped>
+.progress-bar {
+  width: 100%;
+  height: 0.5rem;
+  background-color: var(--color-button-bg);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+}
+
+.progress-bar__fill {
+  height: 100%;
+  background-color: var(--color-brand);
+  transition: width 0.3s;
+}
+</style>

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

@@ -0,0 +1,282 @@
+<script setup>
+import { Card, Avatar, Button } from '@modrinth/ui'
+import { DownloadIcon, HeartIcon, CalendarIcon } from '@modrinth/assets'
+import { formatNumber, formatCategory } from '@modrinth/utils'
+import { computed, ref } from 'vue'
+import dayjs from 'dayjs'
+import relativeTime from 'dayjs/plugin/relativeTime'
+import { useRouter } from 'vue-router'
+import { useFetch } from '@/helpers/fetch.js'
+import { list } from '@/helpers/profile.js'
+import { handleError } from '@/store/notifications.js'
+import { install as pack_install } from '@/helpers/pack.js'
+dayjs.extend(relativeTime)
+
+const router = useRouter()
+const installing = ref(false)
+
+const props = defineProps({
+  project: {
+    type: Object,
+    default() {
+      return {}
+    },
+  },
+  confirmModal: {
+    type: Object,
+    default() {
+      return {}
+    },
+  },
+  modInstallModal: {
+    type: Object,
+    default() {
+      return {}
+    },
+  },
+})
+
+const toColor = computed(() => {
+  let color = props.project.color
+
+  color >>>= 0
+  const b = color & 0xff
+  const g = (color >>> 8) & 0xff
+  const r = (color >>> 16) & 0xff
+  return 'rgba(' + [r, g, b, 1].join(',') + ')'
+})
+
+const toTransparent = computed(() => {
+  let color = props.project.color
+
+  color >>>= 0
+  const b = color & 0xff
+  const g = (color >>> 8) & 0xff
+  const r = (color >>> 16) & 0xff
+  return (
+    'linear-gradient(rgba(' +
+    [r, g, b, 0.03].join(',') +
+    '), 65%, rgba(' +
+    [r, g, b, 0.3].join(',') +
+    '))'
+  )
+})
+
+const install = async (e) => {
+  e?.stopPropagation()
+  installing.value = true
+  const versions = await useFetch(
+    `https://api.modrinth.com/v2/project/${props.project.project_id}/version`,
+    'project versions',
+  )
+
+  if (props.project.project_type === 'modpack') {
+    const packs = Object.values(await list(true).catch(handleError))
+
+    if (
+      packs.length === 0 ||
+      !packs
+        .map((value) => value.metadata)
+        .find((pack) => pack.linked_data?.project_id === props.project.project_id)
+    ) {
+      installing.value = true
+      await pack_install(
+        props.project.project_id,
+        versions[0].id,
+        props.project.title,
+        props.project.icon_url,
+      ).catch(handleError)
+      installing.value = false
+    } else
+      props.confirmModal.show(
+        props.project.project_id,
+        versions[0].id,
+        props.project.title,
+        props.project.icon_url,
+      )
+  } else {
+    props.modInstallModal.show(props.project.project_id, versions)
+  }
+
+  installing.value = false
+}
+</script>
+
+<template>
+  <div class="wrapper">
+    <Card class="project-card button-base" @click="router.push(`/project/${project.slug}`)">
+      <div
+        class="banner"
+        :style="{
+          'background-color': project.featured_gallery ?? project.gallery[0] ? null : toColor,
+          'background-image': `url(${
+            project.featured_gallery ??
+            project.gallery[0] ??
+            'https://launcher-files.modrinth.com/assets/maze-bg.png'
+          })`,
+          'no-image': !project.featured_gallery && !project.gallery[0],
+        }"
+      >
+        <div class="badges">
+          <div class="badge">
+            <DownloadIcon />
+            {{ formatNumber(project.downloads) }}
+          </div>
+          <div class="badge">
+            <HeartIcon />
+            {{ formatNumber(project.follows) }}
+          </div>
+          <div class="badge">
+            <CalendarIcon />
+            {{ formatCategory(dayjs(project.date_modified).fromNow()) }}
+          </div>
+        </div>
+        <div
+          class="badges-wrapper"
+          :class="{
+            'no-image': !project.featured_gallery && !project.gallery[0],
+          }"
+          :style="{
+            background: !project.featured_gallery && !project.gallery[0] ? toTransparent : null,
+          }"
+        ></div>
+      </div>
+      <Avatar class="icon" size="sm" :src="project.icon_url" />
+      <div class="title">
+        <div class="title-text">
+          {{ project.title }}
+        </div>
+        <div class="author">by {{ project.author }}</div>
+      </div>
+      <div class="description">
+        {{ project.description }}
+      </div>
+    </Card>
+    <Button color="primary" class="install" :disabled="installing" @click="install">
+      <DownloadIcon />
+      {{ installing ? 'Installing' : 'Install' }}
+    </Button>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.wrapper {
+  position: relative;
+  aspect-ratio: 1;
+
+  &:hover {
+    .install:enabled {
+      opacity: 1;
+    }
+  }
+}
+
+.project-card {
+  display: grid;
+  grid-gap: 1rem;
+  grid-template:
+    '. . . .' 0
+    '. icon title .' 3rem
+    'banner banner banner banner' auto
+    '. description description .' 3.5rem
+    '. . . .' 0 / 0 3rem minmax(0, 1fr) 0;
+  max-width: 100%;
+  height: 100%;
+  padding: 0;
+  margin: 0;
+
+  .icon {
+    grid-area: icon;
+  }
+
+  .title {
+    max-width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    grid-area: title;
+    white-space: nowrap;
+
+    .title-text {
+      width: 100%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      font-size: var(--font-size-md);
+      font-weight: bold;
+    }
+  }
+
+  .author {
+    font-size: var(--font-size-sm);
+    grid-area: author;
+  }
+
+  .banner {
+    grid-area: banner;
+    background-size: cover;
+    background-position: center;
+    position: relative;
+
+    .badges-wrapper {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      position: absolute;
+      top: 0;
+      left: 0;
+      mix-blend-mode: hard-light;
+    }
+
+    .badges {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      padding: var(--gap-sm);
+      gap: var(--gap-xs);
+      display: flex;
+      z-index: 10;
+      flex-direction: row;
+      justify-content: flex-end;
+      align-items: flex-end;
+    }
+  }
+
+  .description {
+    grid-area: description;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+  }
+}
+
+.badge {
+  background-color: var(--color-raised-bg);
+  font-size: var(--font-size-xs);
+  padding: var(--gap-xs) var(--gap-sm);
+  border-radius: var(--radius-sm);
+
+  svg {
+    width: 1rem;
+    height: 1rem;
+    margin-right: var(--gap-xs);
+  }
+}
+
+.install {
+  position: absolute;
+  top: calc(5rem + var(--gap-sm));
+  right: var(--gap-sm);
+  z-index: 10;
+  opacity: 0;
+  transition: opacity 0.2s ease-in-out;
+
+  svg {
+    width: 1rem;
+    height: 1rem;
+  }
+}
+</style>

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

@@ -0,0 +1,475 @@
+<template>
+  <div class="action-groups">
+    <a href="https://support.modrinth.com" class="link">
+      <ChatIcon />
+      <span> Get support </span>
+    </a>
+    <Button
+      v-if="currentLoadingBars.length > 0"
+      ref="infoButton"
+      icon-only
+      class="icon-button show-card-icon"
+      @click="toggleCard()"
+    >
+      <DownloadIcon />
+    </Button>
+    <div v-if="offline" class="status">
+      <span class="circle stopped" />
+      <div class="running-text clickable" @click="refreshInternet()">
+        <span> Offline </span>
+      </div>
+    </div>
+    <div v-if="selectedProfile" class="status">
+      <span class="circle running" />
+      <div ref="profileButton" class="running-text">
+        <router-link :to="`/instance/${encodeURIComponent(selectedProfile.path)}`">
+          {{ selectedProfile.metadata.name }}
+        </router-link>
+        <div
+          v-if="currentProcesses.length > 1"
+          class="arrow button-base"
+          :class="{ rotate: showProfiles }"
+          @click="toggleProfiles()"
+        >
+          <DropdownIcon />
+        </div>
+      </div>
+      <Button v-tooltip="'Stop instance'" icon-only class="icon-button stop" @click="stop()">
+        <StopCircleIcon />
+      </Button>
+      <Button v-tooltip="'View logs'" icon-only class="icon-button" @click="goToTerminal()">
+        <TerminalSquareIcon />
+      </Button>
+      <Button
+        v-if="currentLoadingBars.length > 0"
+        ref="infoButton"
+        icon-only
+        class="icon-button show-card-icon"
+        @click="toggleCard()"
+      >
+        <DownloadIcon />
+      </Button>
+    </div>
+    <div v-else class="status">
+      <span class="circle stopped" />
+      <span class="running-text"> No instances running </span>
+    </div>
+  </div>
+  <transition name="download">
+    <Card v-if="showCard === true && currentLoadingBars.length > 0" ref="card" class="info-card">
+      <div v-for="loadingBar in currentLoadingBars" :key="loadingBar.id" class="info-text">
+        <h3 class="info-title">
+          {{ loadingBar.title }}
+        </h3>
+        <ProgressBar :progress="Math.floor((100 * loadingBar.current) / loadingBar.total)" />
+        <div class="row">
+          {{ Math.floor((100 * loadingBar.current) / loadingBar.total) }}% {{ loadingBar.message }}
+        </div>
+      </div>
+    </Card>
+  </transition>
+  <transition name="download">
+    <Card
+      v-if="showProfiles === true && currentProcesses.length > 0"
+      ref="profiles"
+      class="profile-card"
+    >
+      <Button
+        v-for="profile in currentProcesses"
+        :key="profile.id"
+        class="profile-button"
+        @click="selectProfile(profile)"
+      >
+        <div class="text"><span class="circle running" /> {{ profile.metadata.name }}</div>
+        <Button
+          v-tooltip="'Stop instance'"
+          icon-only
+          class="icon-button stop"
+          @click.stop="stop(profile.path)"
+        >
+          <StopCircleIcon />
+        </Button>
+        <Button
+          v-tooltip="'View logs'"
+          icon-only
+          class="icon-button"
+          @click.stop="goToTerminal(profile.path)"
+        >
+          <TerminalSquareIcon />
+        </Button>
+      </Button>
+    </Card>
+  </transition>
+</template>
+
+<script setup>
+import { DownloadIcon, StopCircleIcon, TerminalSquareIcon, DropdownIcon } from '@modrinth/assets'
+import { Button, Card } from '@modrinth/ui'
+import { onBeforeUnmount, onMounted, ref } from 'vue'
+import {
+  get_all_running_profiles as getRunningProfiles,
+  kill_by_uuid as killProfile,
+  get_uuids_by_profile_path as getProfileProcesses,
+} from '@/helpers/process'
+import { loading_listener, process_listener, offline_listener } from '@/helpers/events'
+import { useRouter } from 'vue-router'
+import { progress_bars_list } from '@/helpers/state.js'
+import { refreshOffline, isOffline } from '@/helpers/utils.js'
+import ProgressBar from '@/components/ui/ProgressBar.vue'
+import { handleError } from '@/store/notifications.js'
+import { mixpanel_track } from '@/helpers/mixpanel'
+import { ChatIcon } from '@/assets/icons'
+
+const router = useRouter()
+const card = ref(null)
+const profiles = ref(null)
+const infoButton = ref(null)
+const profileButton = ref(null)
+const showCard = ref(false)
+
+const showProfiles = ref(false)
+
+const currentProcesses = ref(await getRunningProfiles().catch(handleError))
+const selectedProfile = ref(currentProcesses.value[0])
+
+const offline = ref(await isOffline().catch(handleError))
+const refreshInternet = async () => {
+  offline.value = await refreshOffline().catch(handleError)
+}
+
+const unlistenProcess = await process_listener(async () => {
+  await refresh()
+})
+
+const unlistenRefresh = await offline_listener(async (b) => {
+  offline.value = b
+  await refresh()
+})
+
+const refresh = async () => {
+  currentProcesses.value = await getRunningProfiles().catch(handleError)
+  if (!currentProcesses.value.includes(selectedProfile.value)) {
+    selectedProfile.value = currentProcesses.value[0]
+  }
+}
+
+const stop = async (path) => {
+  try {
+    const processes = await getProfileProcesses(path ?? selectedProfile.value.path)
+    await killProfile(processes[0])
+
+    mixpanel_track('InstanceStop', {
+      loader: currentProcesses.value[0].metadata.loader,
+      game_version: currentProcesses.value[0].metadata.game_version,
+      source: 'AppBar',
+    })
+  } catch (e) {
+    console.error(e)
+  }
+  await refresh()
+}
+
+const goToTerminal = (path) => {
+  router.push(`/instance/${encodeURIComponent(path ?? selectedProfile.value.path)}/logs`)
+}
+
+const currentLoadingBars = ref([])
+
+const refreshInfo = async () => {
+  const currentLoadingBarCount = currentLoadingBars.value.length
+  currentLoadingBars.value = Object.values(await progress_bars_list().catch(handleError)).map(
+    (x) => {
+      if (x.bar_type.type === 'java_download') {
+        x.title = 'Downloading Java ' + x.bar_type.version
+      }
+      if (x.bar_type.profile_name) {
+        x.title = x.bar_type.profile_name
+      }
+      if (x.bar_type.pack_name) {
+        x.title = x.bar_type.pack_name
+      }
+
+      return x
+    },
+  )
+
+  currentLoadingBars.value.sort((a, b) => {
+    if (a.loading_bar_uuid < b.loading_bar_uuid) {
+      return -1
+    }
+    if (a.loading_bar_uuid > b.loading_bar_uuid) {
+      return 1
+    }
+    return 0
+  })
+
+  if (currentLoadingBars.value.length === 0) {
+    showCard.value = false
+  } else if (currentLoadingBarCount < currentLoadingBars.value.length) {
+    showCard.value = true
+  }
+}
+
+await refreshInfo()
+const unlistenLoading = await loading_listener(async () => {
+  await refreshInfo()
+})
+
+const selectProfile = (profile) => {
+  selectedProfile.value = profile
+  showProfiles.value = false
+}
+
+const handleClickOutsideCard = (event) => {
+  const elements = document.elementsFromPoint(event.clientX, event.clientY)
+  if (
+    card.value &&
+    card.value.$el !== event.target &&
+    !elements.includes(card.value.$el) &&
+    infoButton.value &&
+    !infoButton.value.contains(event.target)
+  ) {
+    showCard.value = false
+  }
+}
+
+const handleClickOutsideProfile = (event) => {
+  const elements = document.elementsFromPoint(event.clientX, event.clientY)
+  if (
+    profiles.value &&
+    profiles.value.$el !== event.target &&
+    !elements.includes(profiles.value.$el) &&
+    !profileButton.value.contains(event.target)
+  ) {
+    showProfiles.value = false
+  }
+}
+
+const toggleCard = async () => {
+  showCard.value = !showCard.value
+  showProfiles.value = false
+  await refreshInfo()
+}
+
+const toggleProfiles = async () => {
+  if (currentProcesses.value.length === 1) return
+  showProfiles.value = !showProfiles.value
+  showCard.value = false
+}
+
+onMounted(() => {
+  window.addEventListener('click', handleClickOutsideCard)
+  window.addEventListener('click', handleClickOutsideProfile)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('click', handleClickOutsideCard)
+  window.removeEventListener('click', handleClickOutsideProfile)
+  unlistenProcess()
+  unlistenLoading()
+  unlistenRefresh()
+})
+</script>
+
+<style scoped lang="scss">
+.action-groups {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--gap-md);
+}
+
+.arrow {
+  transition: transform 0.2s ease-in-out;
+  display: flex;
+  align-items: center;
+  &.rotate {
+    transform: rotate(180deg);
+  }
+}
+
+.status {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 0.5rem;
+  border-radius: var(--radius-md);
+  border: 1px solid var(--color-button-bg);
+  padding: var(--gap-sm) var(--gap-lg);
+}
+
+.running-text {
+  display: flex;
+  flex-direction: row;
+  gap: var(--gap-xs);
+  white-space: nowrap;
+  overflow: hidden;
+  -webkit-user-select: none; /* Safari */
+  -ms-user-select: none; /* IE 10 and IE 11 */
+  user-select: none;
+
+  &.clickable:hover {
+    cursor: pointer;
+  }
+}
+
+.circle {
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 50%;
+  display: inline-block;
+  margin-right: 0.25rem;
+
+  &.running {
+    background-color: var(--color-brand);
+  }
+
+  &.stopped {
+    background-color: var(--color-base);
+  }
+}
+
+.icon-button {
+  background-color: rgba(0, 0, 0, 0);
+  box-shadow: none;
+  width: 1.25rem !important;
+  height: 1.25rem !important;
+
+  &.stop {
+    --text-color: var(--color-red) !important;
+  }
+}
+
+.info-card {
+  position: absolute;
+  top: 3.5rem;
+  right: 0.5rem;
+  z-index: 9;
+  width: 20rem;
+  background-color: var(--color-raised-bg);
+  box-shadow: var(--shadow-raised);
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  overflow: auto;
+  transition: all 0.2s ease-in-out;
+  border: 1px solid var(--color-button-bg);
+
+  &.hidden {
+    transform: translateY(-100%);
+  }
+}
+
+.loading-option {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 0.5rem;
+  margin: 0;
+  padding: 0;
+
+  :hover {
+    background-color: var(--color-raised-bg-hover);
+  }
+}
+
+.loading-text {
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  padding: 0;
+
+  .row {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 0.5rem;
+  }
+}
+
+.loading-icon {
+  width: 2.25rem;
+  height: 2.25rem;
+  display: block;
+
+  :deep(svg) {
+    left: 1rem;
+    width: 2.25rem;
+    height: 2.25rem;
+  }
+}
+
+.show-card-icon {
+  color: var(--color-brand);
+}
+
+.download-enter-active,
+.download-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.download-enter-from,
+.download-leave-to {
+  opacity: 0;
+}
+
+.progress-bar {
+  width: 100%;
+}
+
+.info-text {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.5rem;
+  margin: 0;
+  padding: 0;
+}
+
+.info-title {
+  margin: 0;
+}
+
+.profile-button {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--gap-sm);
+  width: 100%;
+  background-color: var(--color-raised-bg);
+  box-shadow: none;
+
+  .text {
+    margin-right: auto;
+  }
+}
+
+.profile-card {
+  position: absolute;
+  top: 3.5rem;
+  right: 0.5rem;
+  z-index: 9;
+  background-color: var(--color-raised-bg);
+  box-shadow: var(--shadow-raised);
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+  transition: all 0.2s ease-in-out;
+  border: 1px solid var(--color-button-bg);
+  padding: var(--gap-md);
+
+  &.hidden {
+    transform: translateY(-100%);
+  }
+}
+
+.link {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--gap-sm);
+  margin: 0;
+  color: var(--color-text);
+  text-decoration: none;
+}
+</style>

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

@@ -0,0 +1,288 @@
+<template>
+  <Card
+    class="card button-base"
+    @click="
+      () => {
+        emits('open')
+        $router.push({
+          path: `/project/${project.project_id ?? project.id}/`,
+          query: { i: props.instance ? props.instance.path : undefined },
+        })
+      }
+    "
+  >
+    <div class="icon">
+      <Avatar :src="project.icon_url" size="md" class="search-icon" />
+    </div>
+    <div class="content-wrapper">
+      <div class="title joined-text">
+        <h2>{{ project.title }}</h2>
+        <span v-if="project.author">by {{ project.author }}</span>
+      </div>
+      <div class="description">
+        {{ project.description }}
+      </div>
+      <div class="tags">
+        <Categories :categories="categories" :type="project.project_type">
+          <EnvironmentIndicator
+            :type-only="project.moderation"
+            :client-side="project.client_side"
+            :server-side="project.server_side"
+            :type="project.project_type"
+            :search="true"
+          />
+        </Categories>
+      </div>
+    </div>
+    <div class="stats button-group">
+      <div v-if="featured" class="badge">
+        <StarIcon />
+        Featured
+      </div>
+      <div class="badge">
+        <DownloadIcon />
+        {{ formatNumber(project.downloads) }}
+      </div>
+      <div class="badge">
+        <HeartIcon />
+        {{ formatNumber(project.follows ?? project.followers) }}
+      </div>
+      <div class="badge">
+        <CalendarIcon />
+        {{ formatCategory(dayjs(project.date_modified ?? project.updated).fromNow()) }}
+      </div>
+    </div>
+    <div v-if="project.author" class="install">
+      <Button color="primary" :disabled="installed || installing" @click.stop="install()">
+        <DownloadIcon v-if="!installed" />
+        <CheckIcon v-else />
+        {{ installing ? 'Installing' : installed ? 'Installed' : 'Install' }}
+      </Button>
+    </div>
+  </Card>
+</template>
+
+<script setup>
+import { DownloadIcon, HeartIcon, CalendarIcon, CheckIcon, StarIcon } from '@modrinth/assets'
+import { Avatar, Card, Categories, EnvironmentIndicator, Button } from '@modrinth/ui'
+import { formatNumber, formatCategory } from '@modrinth/utils'
+import dayjs from 'dayjs'
+import relativeTime from 'dayjs/plugin/relativeTime'
+import { ref } from 'vue'
+import { add_project_from_version as installMod, list } from '@/helpers/profile.js'
+import { install as packInstall } from '@/helpers/pack.js'
+import { installVersionDependencies } from '@/helpers/utils.js'
+import { useFetch } from '@/helpers/fetch.js'
+import { handleError } from '@/store/notifications.js'
+import { mixpanel_track } from '@/helpers/mixpanel'
+dayjs.extend(relativeTime)
+
+const props = defineProps({
+  backgroundImage: {
+    type: String,
+    default: null,
+  },
+  project: {
+    type: Object,
+    required: true,
+  },
+  categories: {
+    type: Array,
+    required: true,
+  },
+  instance: {
+    type: Object,
+    default: null,
+  },
+  confirmModal: {
+    type: Object,
+    default: null,
+  },
+  modInstallModal: {
+    type: Object,
+    default: null,
+  },
+  incompatibilityWarningModal: {
+    type: Object,
+    default: null,
+  },
+  featured: {
+    type: Boolean,
+    default: false,
+  },
+  installed: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const emits = defineEmits(['open'])
+
+const installing = ref(false)
+const installed = ref(props.installed)
+
+async function install() {
+  installing.value = true
+  const versions = await useFetch(
+    `https://api.modrinth.com/v2/project/${props.project.project_id}/version`,
+    'project versions',
+  )
+  let queuedVersionData
+
+  if (!props.instance) {
+    queuedVersionData = versions[0]
+  } else {
+    queuedVersionData = versions.find(
+      (v) =>
+        v.game_versions.includes(props.instance.metadata.game_version) &&
+        (props.project.project_type !== 'mod' ||
+          v.loaders.includes(props.instance.metadata.loader)),
+    )
+  }
+
+  if (props.project.project_type === 'modpack') {
+    const packs = Object.values(await list().catch(handleError))
+    if (
+      packs.length === 0 ||
+      !packs
+        .map((value) => value.metadata)
+        .find((pack) => pack.linked_data?.project_id === props.project.project_id)
+    ) {
+      await packInstall(
+        props.project.project_id,
+        queuedVersionData.id,
+        props.project.title,
+        props.project.icon_url,
+      ).catch(handleError)
+
+      mixpanel_track('PackInstall', {
+        id: props.project.project_id,
+        version_id: queuedVersionData.id,
+        title: props.project.title,
+        source: 'SearchCard',
+      })
+    } else {
+      props.confirmModal.show(
+        props.project.project_id,
+        queuedVersionData.id,
+        props.project.title,
+        props.project.icon_url,
+      )
+    }
+  } else {
+    if (props.instance) {
+      if (!queuedVersionData) {
+        props.incompatibilityWarningModal.show(
+          props.instance,
+          props.project.title,
+          versions,
+          () => (installed.value = true),
+          props.project.project_id,
+          props.project.project_type,
+        )
+        installing.value = false
+        return
+      } else {
+        await installMod(props.instance.path, queuedVersionData.id).catch(handleError)
+        await installVersionDependencies(props.instance, queuedVersionData)
+
+        mixpanel_track('ProjectInstall', {
+          loader: props.instance.metadata.loader,
+          game_version: props.instance.metadata.game_version,
+          id: props.project.project_id,
+          project_type: props.project.project_type,
+          version_id: queuedVersionData.id,
+          title: props.project.title,
+          source: 'SearchCard',
+        })
+      }
+    } else {
+      props.modInstallModal.show(
+        props.project.project_id,
+        versions,
+        props.project.title,
+        props.project.project_type,
+      )
+      installing.value = false
+      return
+    }
+    if (props.instance) installed.value = true
+  }
+
+  installing.value = false
+}
+</script>
+
+<style scoped lang="scss">
+.icon {
+  grid-column: 1;
+  grid-row: 1;
+  align-self: center;
+  height: 6rem;
+}
+
+.content-wrapper {
+  display: flex;
+  justify-content: space-between;
+  grid-column: 2 / 4;
+  flex-direction: column;
+  grid-row: 1;
+  gap: 0.5rem;
+
+  .description {
+    word-wrap: break-word;
+    overflow-wrap: anywhere;
+  }
+}
+
+.stats {
+  grid-column: 1 / 3;
+  grid-row: 2;
+  justify-self: stretch;
+  align-self: start;
+}
+
+.install {
+  grid-column: 3 / 4;
+  grid-row: 2;
+  justify-self: end;
+  align-self: start;
+}
+
+.card {
+  margin-bottom: 0;
+  display: grid;
+  grid-template-columns: 6rem auto 7rem;
+  gap: 0.75rem;
+  padding: 1rem;
+
+  &:active:not(&:disabled) {
+    scale: 0.98 !important;
+  }
+}
+
+.joined-text {
+  display: inline-flex;
+  flex-wrap: wrap;
+  flex-direction: row;
+  column-gap: 0.5rem;
+  align-items: baseline;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  h2 {
+    margin-bottom: 0 !important;
+    word-wrap: break-word;
+    overflow-wrap: anywhere;
+  }
+}
+
+.button-group {
+  display: inline-flex;
+  flex-direction: row;
+  gap: 0.5rem;
+  align-items: flex-start;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+}
+</style>

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

@@ -0,0 +1,43 @@
+<template>
+  <div class="page-loading" :class="{ 'app-loading': appLoading }">
+    <AnimatedLogo class="initializing-icon" />
+  </div>
+</template>
+
+<script setup>
+import { AnimatedLogo } from '@modrinth/ui'
+
+defineProps({
+  appLoading: Boolean,
+})
+</script>
+
+<style scoped lang="scss">
+.page-loading {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+
+  &.app-loading {
+    background-color: #16181c;
+    height: 100vh;
+  }
+}
+
+.initializing-icon {
+  width: 12rem;
+  height: 12rem;
+
+  :deep(svg),
+  svg {
+    width: 12rem;
+    height: 12rem;
+    fill: var(--color-brand);
+    color: var(--color-brand);
+  }
+}
+</style>

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>

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

@@ -0,0 +1,140 @@
+<script setup>
+import { LogInIcon } from '@modrinth/assets'
+import { Button, Card } from '@modrinth/ui'
+import { login as login_flow, set_default_user } from '@/helpers/auth.js'
+import { handleError } from '@/store/notifications.js'
+import mixpanel from 'mixpanel-browser'
+import { ref } from 'vue'
+import { handleSevereError } from '@/store/error.js'
+const loading = ref(false)
+
+const props = defineProps({
+  nextPage: {
+    type: Function,
+    required: true,
+  },
+  prevPage: {
+    type: Function,
+    required: true,
+  },
+})
+
+async function login() {
+  try {
+    loading.value = true
+    const loggedIn = await login_flow()
+
+    if (loggedIn) {
+      await set_default_user(loggedIn.id).catch(handleError)
+    }
+
+    await mixpanel.track('AccountLogIn')
+    loading.value = false
+    props.nextPage()
+  } catch (err) {
+    loading.value = false
+    handleSevereError(err)
+  }
+}
+</script>
+
+<template>
+  <div class="login-card">
+    <img
+      src="https://launcher-files.modrinth.com/assets/default_profile.png"
+      class="logo"
+      alt="Minecraft art"
+    />
+    <Card class="logging-in">
+      <h2>Sign into Minecraft</h2>
+      <p>
+        Sign in with your Microsoft account to launch Minecraft with your mods and modpacks. If you
+        don't have a Minecraft account, you can purchase the game on the
+        <a
+          href="https://www.minecraft.net/en-us/store/minecraft-java-bedrock-edition-pc"
+          class="link"
+        >
+          Minecraft website
+        </a>
+      </p>
+      <div class="action-row">
+        <Button class="transparent" large @click="prevPage"> Back </Button>
+        <div class="sign-in-pair">
+          <Button color="primary" large :disabled="loading" @click="login">
+            <LogInIcon />
+            {{ loading ? 'Loading...' : 'Sign in' }}
+          </Button>
+        </div>
+        <Button class="transparent" large @click="nextPage()"> Finish</Button>
+      </div>
+    </Card>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.login-card {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  margin: auto;
+  padding: var(--gap-lg);
+  width: 30rem;
+
+  img {
+    width: 100%;
+    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
+  }
+}
+
+.logging-in {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  vertical-align: center;
+  gap: var(--gap-md);
+  background-color: var(--color-raised-bg);
+  width: 100%;
+  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
+
+  h2,
+  p {
+    margin: 0;
+  }
+
+  p {
+    text-align: center;
+  }
+}
+
+.link {
+  color: var(--color-blue);
+  text-decoration: underline;
+}
+
+.button-row {
+  display: flex;
+  flex-direction: row;
+}
+
+.action-row {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  gap: var(--gap-md);
+  margin-top: var(--gap-md);
+
+  .transparent {
+    padding: 0 var(--gap-md);
+  }
+}
+
+.sign-in-pair {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-sm);
+  align-items: center;
+}
+</style>

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

@@ -0,0 +1,326 @@
+<script setup>
+import { UserIcon, LockIcon, MailIcon } from '@modrinth/assets'
+import { Button, Card, Checkbox } from '@modrinth/ui'
+import {
+  DiscordIcon,
+  GithubIcon,
+  MicrosoftIcon,
+  GoogleIcon,
+  SteamIcon,
+  GitLabIcon,
+} from '@/assets/external'
+import {
+  authenticate_begin_flow,
+  authenticate_await_completion,
+  login_2fa,
+  create_account,
+  login_pass,
+} from '@/helpers/mr_auth.js'
+import { handleError, useNotifications } from '@/store/state.js'
+import { onMounted, ref } from 'vue'
+
+const props = defineProps({
+  nextPage: {
+    type: Function,
+    required: true,
+  },
+  prevPage: {
+    type: Function,
+    required: true,
+  },
+  modal: {
+    type: Boolean,
+    required: true,
+  },
+})
+
+const loggingIn = ref(true)
+const twoFactorFlow = ref(null)
+const twoFactorCode = ref('')
+
+const email = ref('')
+const username = ref('')
+const password = ref('')
+const confirmPassword = ref('')
+const subscribe = ref(true)
+
+async function signInOauth(provider) {
+  const url = await authenticate_begin_flow(provider).catch(handleError)
+
+  await window.__TAURI_INVOKE__('tauri', {
+    __tauriModule: 'Shell',
+    message: {
+      cmd: 'open',
+      path: url,
+    },
+  })
+
+  const creds = await authenticate_await_completion().catch(handleError)
+
+  if (creds && creds.type === 'two_factor_required') {
+    twoFactorFlow.value = creds.flow
+  } else if (creds && creds.session) {
+    props.nextPage()
+  }
+}
+
+async function signIn2fa() {
+  const creds = await login_2fa(twoFactorCode.value, twoFactorFlow.value).catch(handleError)
+
+  if (creds && creds.session) {
+    props.nextPage()
+  }
+}
+
+async function signIn() {
+  const creds = await login_pass(
+    username.value,
+    password.value,
+    window.turnstile.getResponse(),
+  ).catch(handleError)
+  window.turnstile.reset()
+
+  if (creds && creds.type === 'two_factor_required') {
+    twoFactorFlow.value = creds.flow
+  } else if (creds && creds.session) {
+    props.nextPage()
+  }
+}
+
+async function createAccount() {
+  if (password.value !== confirmPassword.value) {
+    const notifs = useNotifications()
+    notifs.addNotification({
+      title: 'An error occurred',
+      text: 'Passwords do not match!',
+      type: 'error',
+    })
+    return
+  }
+
+  const creds = await create_account(
+    username.value,
+    email.value,
+    password.value,
+    window.turnstile.getResponse(),
+    subscribe.value,
+  ).catch(handleError)
+  window.turnstile.reset()
+
+  if (creds && creds.session) {
+    props.nextPage()
+  }
+}
+
+async function goToNextPage() {
+  props.nextPage()
+}
+
+onMounted(() => {
+  if (window.turnstile === null || !window.turnstile) {
+    const script = document.createElement('script')
+    script.src = 'https://challenges.cloudflare.com/turnstile/v0/api.js'
+    script.async = true
+    script.defer = true
+    document.head.appendChild(script)
+  }
+})
+</script>
+
+<template>
+  <Card>
+    <div class="cf-turnstile" data-sitekey="0x4AAAAAAAHWfmKCm7cUG869"></div>
+    <template v-if="twoFactorFlow">
+      <h1>Enter two-factor code</h1>
+      <p>Please enter a two-factor code to proceed.</p>
+      <input v-model="twoFactorCode" maxlength="11" type="text" placeholder="Enter code..." />
+    </template>
+    <template v-else>
+      <h1 v-if="loggingIn">Login to Modrinth</h1>
+      <h1 v-else>Create an account</h1>
+      <div class="button-grid">
+        <Button class="discord" large @click="signInOauth('discord')">
+          <DiscordIcon />
+          Discord
+        </Button>
+        <Button class="github" large @click="signInOauth('github')">
+          <GithubIcon />
+          Github
+        </Button>
+        <Button class="white" large @click="signInOauth('microsoft')">
+          <MicrosoftIcon />
+          Microsoft
+        </Button>
+        <Button class="google" large @click="signInOauth('google')">
+          <GoogleIcon />
+          Google
+        </Button>
+        <Button class="white" large @click="signInOauth('steam')">
+          <SteamIcon />
+          Steam
+        </Button>
+        <Button class="gitlab" large @click="signInOauth('gitlab')">
+          <GitLabIcon />
+          GitLab
+        </Button>
+      </div>
+      <div class="divider">
+        <hr />
+        <p>Or</p>
+      </div>
+      <div v-if="!loggingIn" class="iconified-input username">
+        <MailIcon />
+        <input v-model="email" type="text" placeholder="Email" />
+      </div>
+      <div class="iconified-input username">
+        <UserIcon />
+        <input
+          v-model="username"
+          type="text"
+          :placeholder="loggingIn ? 'Email or username' : 'Username'"
+        />
+      </div>
+      <div class="iconified-input" :class="{ username: !loggingIn }">
+        <LockIcon />
+        <input v-model="password" type="password" placeholder="Password" />
+      </div>
+      <div v-if="!loggingIn" class="iconified-input username">
+        <LockIcon />
+        <input v-model="confirmPassword" type="password" placeholder="Confirm password" />
+      </div>
+      <Checkbox
+        v-if="!loggingIn"
+        v-model="subscribe"
+        class="subscribe-btn"
+        label="Subscribe to updates about Modrinth"
+      />
+      <div class="link-row">
+        <a v-if="loggingIn" class="button-base" @click="loggingIn = false"> Create account </a>
+        <a v-else class="button-base" @click="loggingIn = true">Sign in</a>
+        <a class="button-base" href="https://modrinth.com/auth/reset-password">
+          Forgot password?
+        </a>
+      </div>
+    </template>
+    <div class="button-row">
+      <Button class="transparent" large @click="prevPage"> {{ modal ? 'Close' : 'Back' }} </Button>
+      <Button v-if="twoFactorCode" color="primary" large @click="signIn2fa"> Login </Button>
+      <Button v-else-if="loggingIn" color="primary" large @click="signIn"> Login </Button>
+      <Button v-else color="primary" large @click="createAccount"> Create account </Button>
+      <Button v-if="!modal" class="transparent" large @click="goToNextPage"> Next </Button>
+    </div>
+  </Card>
+</template>
+
+<style scoped lang="scss">
+.card {
+  width: 25rem;
+}
+
+.button-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-gap: var(--gap-md);
+
+  .btn {
+    width: 100%;
+    justify-content: center;
+  }
+
+  .discord {
+    background-color: #5865f2;
+    color: var(--color-contrast);
+  }
+
+  .github {
+    background-color: #8740f1;
+    color: var(--color-contrast);
+  }
+
+  .white {
+    background-color: var(--color-contrast);
+    color: var(--color-accent-contrast);
+  }
+
+  .google {
+    background-color: #4285f4;
+    color: var(--color-contrast);
+  }
+
+  .gitlab {
+    background-color: #fc6d26;
+    color: var(--color-contrast);
+  }
+}
+
+.divider {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: var(--gap-md) 0;
+
+  p {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-color: var(--color-raised-bg);
+    padding: 0 1rem;
+    margin: 0;
+  }
+
+  hr {
+    border: none;
+    width: 100%;
+    border-top: 2px solid var(--color-button-bg);
+  }
+}
+
+.iconified-input {
+  width: 100%;
+
+  input {
+    width: 100%;
+    flex-basis: auto;
+  }
+}
+
+.username {
+  margin-bottom: var(--gap-sm);
+}
+
+.link-row {
+  display: flex;
+  justify-content: space-between;
+  margin: var(--gap-md) 0;
+
+  a {
+    color: var(--color-blue);
+    text-decoration: underline;
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+}
+
+.button-row {
+  display: flex;
+  justify-content: space-between;
+
+  .btn {
+    flex-basis: auto;
+  }
+
+  .transparent {
+    padding: var(--gap-md) 0;
+  }
+}
+
+:deep {
+  .checkbox {
+    border: none;
+  }
+}
+</style>

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

@@ -0,0 +1,284 @@
+<script setup>
+import { Button } from '@modrinth/ui'
+import { ref } from 'vue'
+import { get, set } from '@/helpers/settings.js'
+import mixpanel from 'mixpanel-browser'
+import GalleryImage from '@/components/ui/tutorial/GalleryImage.vue'
+import LoginCard from '@/components/ui/tutorial/LoginCard.vue'
+import StickyTitleBar from '@/components/ui/tutorial/StickyTitleBar.vue'
+
+const page = ref(1)
+
+const props = defineProps({
+  finish: {
+    type: Function,
+    default: () => {},
+  },
+})
+
+const flow = ref('')
+
+const nextPage = (newFlow) => {
+  page.value++
+  mixpanel.track('OnboardingPage', { page: page.value })
+
+  if (newFlow) {
+    flow.value = newFlow
+  }
+}
+
+const prevPage = () => {
+  page.value--
+}
+
+const finishOnboarding = async () => {
+  mixpanel.track('OnboardingFinish')
+  const settings = await get()
+  settings.fully_onboarded = true
+  await set(settings)
+  props.finish()
+}
+</script>
+
+<template>
+  <div class="onboarding">
+    <StickyTitleBar />
+    <GalleryImage
+      v-if="page === 1"
+      :gallery="[
+        {
+          url: 'https://launcher-files.modrinth.com/onboarding/home.png',
+          title: 'Discovery',
+          subtitle: 'See the latest and greatest mods and modpacks to play with from Modrinth',
+        },
+        {
+          url: 'https://launcher-files.modrinth.com/onboarding/discover.png',
+          title: 'Profile Management',
+          subtitle:
+            'Play, manage and search through all the amazing profiles downloaded on your computer at any time, even offline!',
+        },
+      ]"
+      logo
+    >
+      <Button color="primary" @click="nextPage"> Get started </Button>
+    </GalleryImage>
+    <LoginCard v-else-if="page === 2" :next-page="finishOnboarding" :prev-page="prevPage" />
+  </div>
+</template>
+
+<style scoped lang="scss">
+.sleek-primary {
+  background-color: var(--color-brand-highlight);
+  transition: all ease-in-out 0.1s;
+}
+
+.navigation-controls {
+  flex-grow: 1;
+  width: min-content;
+}
+
+.window-controls {
+  z-index: 20;
+  display: none;
+  flex-direction: row;
+  align-items: center;
+  gap: 0.25rem;
+
+  .titlebar-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all ease-in-out 0.1s;
+    background-color: var(--color-raised-bg);
+    color: var(--color-base);
+
+    &.close {
+      &:hover,
+      &:active {
+        background-color: var(--color-red);
+        color: var(--color-accent-contrast);
+      }
+    }
+
+    &:hover,
+    &:active {
+      background-color: var(--color-button-bg);
+      color: var(--color-contrast);
+    }
+  }
+}
+
+.container {
+  --appbar-height: 3.25rem;
+  --sidebar-width: 4.5rem;
+
+  height: 100vh;
+  display: flex;
+  flex-direction: row;
+  overflow: hidden;
+
+  .view {
+    width: calc(100% - var(--sidebar-width));
+
+    .appbar {
+      display: flex;
+      align-items: center;
+      background: var(--color-raised-bg);
+      box-shadow: var(--shadow-inset-sm), var(--shadow-floating);
+      padding: var(--gap-md);
+      height: 3.25rem;
+      gap: var(--gap-sm);
+      user-select: none;
+      -webkit-user-select: none;
+    }
+
+    .router-view {
+      width: 100%;
+      height: calc(100% - 3.125rem);
+      overflow: auto;
+      overflow-x: hidden;
+      background-color: var(--color-bg);
+    }
+  }
+}
+
+.nav-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  height: 100%;
+  background-color: var(--color-raised-bg);
+  box-shadow: var(--shadow-inset-sm), var(--shadow-floating);
+  padding: var(--gap-md);
+  width: var(--sidebar-width);
+  max-width: var(--sidebar-width);
+  min-width: var(--sidebar-width);
+
+  --sidebar-width: 4.5rem;
+}
+
+.pages-list {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  width: 100%;
+  gap: 0.5rem;
+
+  .btn {
+    background-color: var(--color-raised-bg);
+    height: 3rem !important;
+    width: 3rem !important;
+    padding: 0.75rem;
+    border-radius: var(--radius-md);
+    box-shadow: none;
+
+    svg {
+      width: 1.5rem !important;
+      height: 1.5rem !important;
+      max-width: 1.5rem !important;
+      max-height: 1.5rem !important;
+    }
+
+    &.active {
+      background-color: var(--color-button-bg);
+      box-shadow: var(--shadow-floating);
+    }
+
+    &.sleek-primary {
+      background-color: var(--color-brand-highlight);
+      transition: all ease-in-out 0.1s;
+    }
+  }
+}
+
+.nav-section {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  gap: 1rem;
+}
+
+.sticky-tip {
+  position: absolute;
+  bottom: 1rem;
+  right: 1rem;
+  z-index: 10;
+}
+
+.intro-card {
+  display: flex;
+  flex-direction: column;
+  padding: var(--gap-xl);
+
+  .app-logo {
+    width: 100%;
+    height: auto;
+    display: block;
+    margin: auto;
+  }
+
+  p {
+    color: var(--color-contrast);
+    text-align: left;
+    width: 100%;
+  }
+
+  .actions {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--gap-sm);
+  }
+}
+
+.final-tip {
+  position: absolute;
+  bottom: 50%;
+  right: 50%;
+  transform: translate(50%, 50%);
+  z-index: 10;
+}
+
+.onboarding {
+  background:
+    top linear-gradient(0deg, #31375f, rgba(8, 14, 55, 0)),
+    url(https://cdn.modrinth.com/landing-new/landing-lower.webp);
+  background-size: cover;
+  height: 100vh;
+  min-height: 100vh;
+  max-height: 100vh;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: var(--gap-xl);
+  padding-top: calc(2.5rem + var(--gap-lg));
+}
+
+.first-tip {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 10;
+}
+
+.whole-page-shadow {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100%;
+  backdrop-filter: brightness(0.5);
+  -webkit-backdrop-filter: brightness(0.5);
+  z-index: 9;
+}
+</style>

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

@@ -0,0 +1,81 @@
+<script setup>
+import { Button } from '@modrinth/ui'
+import { XIcon } from '@modrinth/assets'
+import { appWindow } from '@tauri-apps/api/window'
+import { saveWindowState, StateFlags } from 'tauri-plugin-window-state-api'
+import { window } from '@tauri-apps/api'
+import { MinimizeIcon, MaximizeIcon } from '@/assets/icons'
+</script>
+
+<template>
+  <div data-tauri-drag-region class="fake-appbar">
+    <section class="window-controls">
+      <Button class="titlebar-button" icon-only @click="() => appWindow.minimize()">
+        <MinimizeIcon />
+      </Button>
+      <Button class="titlebar-button" icon-only @click="() => appWindow.toggleMaximize()">
+        <MaximizeIcon />
+      </Button>
+      <Button
+        class="titlebar-button close"
+        icon-only
+        @click="
+          () => {
+            saveWindowState(StateFlags.ALL)
+            window.getCurrent().close()
+          }
+        "
+      >
+        <XIcon />
+      </Button>
+    </section>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.fake-appbar {
+  position: absolute;
+  width: 100vw;
+  top: 0;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  align-items: center;
+  height: 2.25rem;
+  background-color: var(--color-raised-bg);
+  -webkit-app-region: drag;
+  z-index: 10000;
+}
+
+.window-controls {
+  display: none;
+  flex-direction: row;
+  align-items: center;
+
+  .titlebar-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all ease-in-out 0.1s;
+    background-color: var(--color-raised-bg);
+    color: var(--color-base);
+    border-radius: 0;
+    height: 2.25rem;
+
+    &.close {
+      &:hover,
+      &:active {
+        background-color: var(--color-red);
+        color: var(--color-accent-contrast);
+      }
+    }
+
+    &:hover,
+    &:active {
+      background-color: var(--color-button-bg);
+      color: var(--color-contrast);
+    }
+  }
+}
+</style>