Misc fixes, new instance & project cards (#3040)

* Fix some TS errors, and misc settings fixes * New instance + project cards * bug fixes + lint * Quick instance switcher --------- Co-authored-by: Geometrically <18202329+Geometrically@users.noreply.github.com> Co-authored-by: Jai A <jaiagr+gpg@pm.me>
2024-12-18 15:09:16 -08:00
parent 02dd2a3980
commit 76b1d1df8c
32 changed files with 576 additions and 517 deletions
--- a/apps/app-frontend/src/components/GridDisplay.vue
+++ b/apps/app-frontend/src/components/GridDisplay.vue
@@ -363,9 +363,9 @@ const filteredResults = computed(() => {

 .instances {
  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
  width: 100%;
-  gap: 1rem;
+  gap: 0.75rem;
  margin-right: auto;
  scroll-behavior: smooth;
  overflow-y: auto;
--- a/apps/app-frontend/src/components/RowDisplay.vue
+++ b/apps/app-frontend/src/components/RowDisplay.vue
@@ -181,6 +181,7 @@ const handleOptionsClick = async (args) => {
  }
 }

+const maxInstancesPerCompactRow = ref(1)
 const maxInstancesPerRow = ref(1)
 const maxProjectsPerRow = ref(1)

@@ -190,8 +191,20 @@ const calculateCardsPerRow = () => {
  // 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)
+
+  maxInstancesPerCompactRow.value = Math.floor((containerWidthInRem + 0.75) / 18.75)
+  maxInstancesPerRow.value = Math.floor((containerWidthInRem + 0.75) / 20.75)
+  maxProjectsPerRow.value = Math.floor((containerWidthInRem + 0.75) / 18.75)
+
+  if (maxInstancesPerRow.value < 5) {
+    maxInstancesPerRow.value *= 2
+  }
+  if (maxInstancesPerCompactRow.value < 5) {
+    maxInstancesPerCompactRow.value *= 2
+  }
+  if (maxProjectsPerRow.value < 3) {
+    maxProjectsPerRow.value *= 2
+  }
 }

 onMounted(() => {
@@ -213,17 +226,33 @@ onUnmounted(() => {
    proceed-label="Delete"
    @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.instance" ref="modsRow" class="instances">
+  <div class="flex flex-col gap-4">
+    <div v-for="(row, rowIndex) in actualInstances" ref="rows" :key="row.label" class="row">
+      <router-link
+        class="flex mb-3 leading-none items-center gap-1 text-primary text-lg font-bold hover:underline group"
+        :class="{ 'mt-1': rowIndex > 0 }"
+        :to="row.route"
+      >
+        {{ row.label }}
+        <ChevronRightIcon
+          class="h-5 w-5 stroke-[3px] group-hover:translate-x-1 transition-transform group-hover:text-brand"
+        />
+      </router-link>
+      <section
+        v-if="row.instance"
+        ref="modsRow"
+        class="instances"
+        :class="{ compact: row.compact }"
+      >
        <Instance
-          v-for="instance in row.instances.slice(0, maxInstancesPerRow)"
-          :key="(instance?.project_id || instance?.id) + instance.install_stage"
+          v-for="(instance, instanceIndex) in row.instances.slice(
+            0,
+            row.compact ? maxInstancesPerCompactRow : maxInstancesPerRow,
+          )"
+          :key="row.label + instance.path"
          :instance="instance"
+          :compact="row.compact"
+          :first="instanceIndex === 0"
          @contextmenu.prevent.stop="(event) => handleInstanceRightClick(event, instance)"
        />
      </section>
@@ -308,16 +337,21 @@ onUnmounted(() => {

  .instances {
    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
-    grid-gap: 1rem;
+    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
+    grid-gap: 0.75rem;
    width: 100%;
+
+    &.compact {
+      grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
+      gap: 0.75rem;
+    }
  }

  .projects {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
-    grid-gap: 1rem;
+    grid-gap: 0.75rem;

    .item {
      width: 100%;
--- a/apps/app-frontend/src/components/ui/Instance.vue
+++ b/apps/app-frontend/src/components/ui/Instance.vue
@@ -1,8 +1,8 @@
 <script setup>
-import { onUnmounted, ref, computed } from 'vue'
+import { onUnmounted, ref, computed, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
-import { StopCircleIcon, PlayIcon } from '@modrinth/assets'
-import { Card, Avatar, AnimatedLogo } from '@modrinth/ui'
+import { SpinnerIcon, GameIcon, TimerIcon, StopCircleIcon, PlayIcon } from '@modrinth/assets'
+import { ButtonStyled, Avatar } from '@modrinth/ui'
 import { convertFileSrc } from '@tauri-apps/api/core'
 import { kill, run } from '@/helpers/profile'
 import { get_by_profile_path } from '@/helpers/process'
@@ -11,6 +11,13 @@ import { handleError } from '@/store/state.js'
 import { showProfileInFolder } from '@/helpers/utils.js'
 import { handleSevereError } from '@/store/error.js'
 import { trackEvent } from '@/helpers/analytics'
+import dayjs from 'dayjs'
+import duration from 'dayjs/plugin/duration'
+import relativeTime from 'dayjs/plugin/relativeTime'
+import { formatCategory } from '@modrinth/utils'
+
+dayjs.extend(duration)
+dayjs.extend(relativeTime)

 const props = defineProps({
  instance: {
@@ -19,11 +26,23 @@ const props = defineProps({
      return {}
    },
  },
+  compact: {
+    type: Boolean,
+    default: false,
+  },
+  first: {
+    type: Boolean,
+    default: false,
+  },
 })

 const playing = ref(false)

-const modLoading = computed(() => props.instance.install_stage !== 'installed')
+const modLoading = computed(
+  () =>
+    currentEvent.value === 'installing' || (currentEvent.value === 'launched' && !playing.value),
+)
+const installing = computed(() => props.instance.install_stage !== 'installed')

 const router = useRouter()

@@ -39,17 +58,15 @@ const checkProcess = async () => {

 const play = async (e, context) => {
  e?.stopPropagation()
-  modLoading.value = true
-  await run(props.instance.path).catch((err) =>
-    handleSevereError(err, { profilePath: props.instance.path }),
-  )
-  modLoading.value = false
-
-  trackEvent('InstancePlay', {
-    loader: props.instance.loader,
-    game_version: props.instance.game_version,
-    source: context,
-  })
+  await run(props.instance.path)
+    .catch((err) => handleSevereError(err, { profilePath: props.instance.path }))
+    .finally(() => {
+      trackEvent('InstancePlay', {
+        loader: props.instance.loader,
+        game_version: props.instance.game_version,
+        source: context,
+      })
+    })
 }

 const stop = async (e, context) => {
@@ -85,175 +102,130 @@ defineExpose({
  instance: props.instance,
 })

+const currentEvent = ref(null)
+
 const unlisten = await process_listener((e) => {
-  if (e.event === 'finished' && e.profile_path_id === props.instance.path) playing.value = false
+  if (e.profile_path_id === props.instance.path) {
+    currentEvent.value = e.event
+    if (e.event === 'finished') {
+      playing.value = false
+    }
+  }
 })

+onMounted(() => checkProcess())
 onUnmounted(() => unlisten())
 </script>

 <template>
-  <div class="instance">
-    <Card class="instance-card-item button-base" @click="seeInstance" @mouseenter="checkProcess">
-      <Avatar
-        size="lg"
-        :src="props.instance.icon_path ? convertFileSrc(props.instance.icon_path) : null"
-        alt="Mod card"
-        class="mod-image"
-      />
-      <div class="project-info">
-        <p class="title">{{ props.instance.name }}</p>
-        <p
-          v-if="
-            props.instance.install_stage === 'installing' ||
-            props.instance.install_stage === 'not_installed' ||
-            props.instance.install_stage === 'pack_installing'
-          "
-          class="description"
-        >
-          Installing...
-        </p>
-        <p v-else class="description">
-          {{ props.instance.loader }}
-          {{ props.instance.game_version }}
-        </p>
-      </div>
-    </Card>
+  <template v-if="compact">
    <div
-      v-if="playing === true"
-      class="stop cta button-base"
-      @click="(e) => stop(e, 'InstanceCard')"
-      @mousehover="checkProcess"
+      class="button-base card-shadow grid grid-cols-[auto_1fr_auto] bg-bg-raised rounded-xl p-3 pl-4 gap-2 cursor-pointer active:scale-[0.98] transition-transform"
+      @click="seeInstance"
+      @mouseenter="checkProcess"
    >
-      <StopCircleIcon />
+      <Avatar
+        size="48px"
+        :src="instance.icon_path ? convertFileSrc(instance.icon_path) : null"
+        :tint-by="instance.path"
+        alt="Mod card"
+      />
+      <div class="h-full flex items-center font-bold text-contrast leading-normal">
+        <span class="line-clamp-2">{{ instance.name }}</span>
+      </div>
+      <div class="flex items-center">
+        <ButtonStyled v-if="playing" color="red" circular @mousehover="checkProcess">
+          <button v-tooltip="'Stop'" @click="(e) => stop(e, 'InstanceCard')">
+            <StopCircleIcon />
+          </button>
+        </ButtonStyled>
+        <ButtonStyled v-else-if="modLoading" color="standard" circular>
+          <button v-tooltip="'Instance is loading...'" disabled>
+            <SpinnerIcon class="animate-spin" />
+          </button>
+        </ButtonStyled>
+        <ButtonStyled v-else :color="first ? 'brand' : 'standard'" circular>
+          <button
+            v-tooltip="'Play'"
+            @click="(e) => play(e, 'InstanceCard')"
+            @mousehover="checkProcess"
+          >
+            <!-- Translate for optical centering -->
+            <PlayIcon class="translate-x-[1px]" />
+          </button>
+        </ButtonStyled>
+      </div>
+      <div class="flex items-center col-span-3 gap-1 text-secondary font-semibold">
+        <TimerIcon />
+        <span class="text-sm"> Played {{ dayjs(instance.last_played).fromNow() }} </span>
+      </div>
    </div>
-    <div v-else-if="modLoading === true && playing === false" class="cta loading-cta">
-      <AnimatedLogo class="loading-indicator" />
-    </div>
-    <div v-else class="install cta button-base" @click="(e) => play(e, 'InstanceCard')">
-      <PlayIcon />
+  </template>
+  <div v-else>
+    <div
+      class="button-base bg-bg-raised p-4 rounded-xl flex gap-3 group"
+      @click="seeInstance"
+      @mouseenter="checkProcess"
+    >
+      <div class="relative flex items-center justify-center">
+        <Avatar
+          size="96px"
+          :src="instance.icon_path ? convertFileSrc(instance.icon_path) : null"
+          :tint-by="instance.path"
+          alt="Mod card"
+          :class="`transition-all ${modLoading || installing ? `brightness-[0.25] scale-[0.85]` : `group-hover:brightness-75`}`"
+        />
+        <div class="absolute inset-0 flex items-center justify-center">
+          <ButtonStyled v-if="playing" size="large" color="red" circular>
+            <button
+              v-tooltip="'Stop'"
+              :class="{ 'scale-100 opacity-100': playing }"
+              class="transition-all scale-75 origin-bottom opacity-0 card-shadow"
+              @click="(e) => stop(e, 'InstanceCard')"
+              @mousehover="checkProcess"
+            >
+              <StopCircleIcon />
+            </button>
+          </ButtonStyled>
+          <SpinnerIcon
+            v-else-if="modLoading || installing"
+            v-tooltip="modLoading ? 'Instance is loading...' : 'Installing...'"
+            class="animate-spin w-8 h-8"
+          />
+          <ButtonStyled v-else size="large" color="brand" circular>
+            <button
+              v-tooltip="'Play'"
+              class="transition-all scale-75 group-hover:scale-100 origin-bottom opacity-0 group-hover:opacity-100 card-shadow"
+              @click="(e) => play(e, 'InstanceCard')"
+              @mousehover="checkProcess"
+            >
+              <PlayIcon class="translate-x-[2px]" />
+            </button>
+          </ButtonStyled>
+        </div>
+      </div>
+      <div class="flex flex-col gap-1">
+        <p class="m-0 text-lg font-bold text-contrast leading-tight line-clamp-2">
+          {{ instance.name }}
+        </p>
+        <div class="flex items-center col-span-3 gap-1 text-secondary font-semibold mt-auto">
+          <GameIcon class="shrink-0" />
+          <span class="text-sm">
+            {{ formatCategory(instance.loader) }} {{ instance.game_version }}
+          </span>
+        </div>
+        <div class="flex items-center col-span-3 gap-1 text-secondary font-semibold">
+          <TimerIcon class="shrink-0" />
+          <span class="text-sm line-clamp-1">
+            Played for
+            {{
+              dayjs
+                .duration(instance.recent_time_played + instance.submitted_time_played, 'seconds')
+                .humanize()
+            }}
+          </span>
+        </div>
+      </div>
    </div>
  </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>
--- a/apps/app-frontend/src/components/ui/InstanceCreationModal.vue
+++ b/apps/app-frontend/src/components/ui/InstanceCreationModal.vue
@@ -237,7 +237,7 @@ const display_icon = ref(null)
 const showAdvanced = ref(false)
 const creating = ref(false)
 const showSnapshots = ref(false)
-const creationType = ref('from file')
+const creationType = ref('custom')
 const isShowing = ref(false)

 defineExpose({
--- a/apps/app-frontend/src/components/ui/NavButton.vue
+++ b/apps/app-frontend/src/components/ui/NavButton.vue
@@ -38,6 +38,7 @@ defineProps<{
  to: (() => void) | string
  isPrimary?: RouteFunction
  isSubpage?: RouteFunction
+  highlightOverride?: boolean
 }>()

 defineOptions({
--- a/apps/app-frontend/src/components/ui/NavTabs.vue
+++ b/apps/app-frontend/src/components/ui/NavTabs.vue
@@ -157,8 +157,4 @@ watch(route, () => {
    all 150ms cubic-bezier(0.4, 0, 0.2, 1) 0s,
    opacity 250ms cubic-bezier(0.5, 0, 0.2, 1) 50ms;
 }
-
-.card-shadow {
-  box-shadow: var(--shadow-card);
-}
 </style>
--- a/apps/app-frontend/src/components/ui/ProjectCard.vue
+++ b/apps/app-frontend/src/components/ui/ProjectCard.vue
@@ -1,17 +1,15 @@
 <script setup>
-import { Card, Avatar, Button } from '@modrinth/ui'
-import { DownloadIcon, HeartIcon, CalendarIcon } from '@modrinth/assets'
+import { Avatar, TagItem } from '@modrinth/ui'
+import { DownloadIcon, HeartIcon, TagIcon } from '@modrinth/assets'
 import { formatNumber, formatCategory } from '@modrinth/utils'
-import { computed, ref } from 'vue'
+import { computed } from 'vue'
 import dayjs from 'dayjs'
 import relativeTime from 'dayjs/plugin/relativeTime'
 import { useRouter } from 'vue-router'
-import { install as installVersion } from '@/store/install.js'

 dayjs.extend(relativeTime)

 const router = useRouter()
-const installing = ref(false)

 const props = defineProps({
  project: {
@@ -22,6 +20,17 @@ const props = defineProps({
  },
 })

+const featuredCategory = computed(() => {
+  if (props.project.categories.includes('optimization')) {
+    return 'optimization'
+  }
+
+  if (props.project.categories.length > 0) {
+    return props.project.categories[0]
+  }
+  return undefined
+})
+
 const toColor = computed(() => {
  let color = props.project.color

@@ -47,197 +56,66 @@ const toTransparent = computed(() => {
    '))'
  )
 })
-
-const install = async (e) => {
-  e?.stopPropagation()
-  installing.value = true
-  await installVersion(
-    props.project.project_id,
-    null,
-    props.instance ? props.instance.path : null,
-    'ProjectCard',
-    () => {
-      installing.value = false
-    },
-  )
-}
 </script>

 <template>
-  <div class="wrapper">
-    <Card class="project-card button-base" @click="router.push(`/project/${project.slug}`)">
+  <div
+    class="card-shadow button-base bg-bg-raised rounded-xl overflow-clip cursor-pointer active:scale-[0.98] transition-transform"
+    @click="router.push(`/project/${project.slug}`)"
+  >
+    <div
+      class="w-full aspect-[2/1] bg-cover bg-center bg-no-repeat"
+      :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'
+        })`,
+      }"
+    >
      <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'
-          })`,
+        class="badges-wrapper"
+        :class="{
          '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>
+        :style="{
+          background: !project.featured_gallery && !project.gallery[0] ? toTransparent : null,
+        }"
+      ></div>
+    </div>
+    <div class="flex flex-col justify-center gap-2 px-4 py-3">
+      <div class="flex gap-2 items-center">
+        <Avatar size="48px" :src="project.icon_url" />
+        <div class="h-full flex items-center font-bold text-contrast leading-normal">
+          <span class="line-clamp-2">{{ project.title }}</span>
+        </div>
+      </div>
+      <p class="m-0 text-sm font-medium line-clamp-3 leading-tight h-[3.25rem]">
+        {{ project.description }}
+      </p>
+      <div class="flex items-center gap-2 text-sm text-secondary font-semibold mt-auto">
+        <div
+          class="flex items-center gap-1 pr-2 border-0 border-r-[1px] border-solid border-button-border"
+        >
+          <DownloadIcon />
+          {{ formatNumber(project.downloads) }}
        </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 }}
+          class="flex items-center gap-1 pr-2 border-0 border-r-[1px] border-solid border-button-border"
+        >
+          <HeartIcon />
+          {{ formatNumber(project.follows) }}
+        </div>
+        <div class="flex items-center gap-1 pr-2">
+          <TagIcon />
+          <TagItem>
+            {{ formatCategory(featuredCategory) }}
+          </TagItem>
        </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>
  </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>
+<style scoped lang="scss"></style>
--- a/apps/app-frontend/src/components/ui/QuickInstanceSwitcher.vue
+++ b/apps/app-frontend/src/components/ui/QuickInstanceSwitcher.vue
@@ -0,0 +1,62 @@
+<script setup>
+import { list } from '@/helpers/profile'
+import { handleError } from '@/store/notifications'
+import dayjs from 'dayjs'
+import { onUnmounted, ref } from 'vue'
+import { profile_listener } from '@/helpers/events.js'
+import NavButton from '@/components/ui/NavButton.vue'
+import { Avatar } from '@modrinth/ui'
+import { convertFileSrc } from '@tauri-apps/api/core'
+import { SpinnerIcon } from '@modrinth/assets'
+
+const recentInstances = ref([])
+const getInstances = async () => {
+  const profiles = await list().catch(handleError)
+
+  recentInstances.value = profiles
+    .sort((a, b) => {
+      const dateA = dayjs(a.created > a.last_played ? a.last_played : a.created)
+      const dateB = dayjs(b.created > b.last_played ? b.last_played : b.created)
+
+      if (dateA.isSame(dateB)) {
+        return a.name.localeCompare(b.name)
+      }
+
+      return dateB - dateA
+    })
+    .slice(0, 4)
+}
+
+await getInstances()
+
+const unlistenProfile = await profile_listener(async () => {
+  await getInstances()
+})
+
+onUnmounted(() => {
+  unlistenProfile()
+})
+</script>
+
+<template>
+  <NavButton
+    v-for="instance in recentInstances"
+    :key="instance.id"
+    :to="`/instance/${encodeURIComponent(instance.path)}`"
+  >
+    <Avatar
+      :src="instance.icon_path ? convertFileSrc(instance.icon_path) : null"
+      circle
+      :class="`transition-all ${instance.install_stage !== 'installed' ? `brightness-[0.25] scale-[0.85]` : `group-hover:brightness-75`}`"
+    />
+    <div
+      v-if="instance.install_stage !== 'installed'"
+      class="absolute inset-0 flex items-center justify-center"
+    >
+      <SpinnerIcon class="animate-spin w-4 h-4" />
+    </div>
+    <template #label>{{ instance.name }}</template>
+  </NavButton>
+</template>
+
+<style scoped lang="scss"></style>
--- a/apps/app-frontend/src/components/ui/RunningAppBar.vue
+++ b/apps/app-frontend/src/components/ui/RunningAppBar.vue
@@ -14,7 +14,7 @@
      <DownloadIcon />
    </Button>
    <div v-if="offline" class="status">
-      <span class="circle stopped" />
+      <UnplugIcon />
      <div class="running-text">
        <span> Offline </span>
      </div>
@@ -108,7 +108,13 @@
 </template>

 <script setup>
-import { DownloadIcon, StopCircleIcon, TerminalSquareIcon, DropdownIcon } from '@modrinth/assets'
+import {
+  DownloadIcon,
+  StopCircleIcon,
+  TerminalSquareIcon,
+  DropdownIcon,
+  UnplugIcon,
+} from '@modrinth/assets'
 import { Button, Card } from '@modrinth/ui'
 import { onBeforeUnmount, onMounted, ref } from 'vue'
 import { get_all as getRunningProcesses, kill as killProcess } from '@/helpers/process'
--- a/apps/app-frontend/src/components/ui/SearchCard.vue
+++ b/apps/app-frontend/src/components/ui/SearchCard.vue
@@ -1,6 +1,6 @@
 <template>
  <div
-    class="button-base p-4 bg-bg-raised rounded-xl flex gap-3 group"
+    class="card-shadow button-base p-4 bg-bg-raised rounded-xl flex gap-3 group"
    @click="
      () => {
        emit('open')
--- a/apps/app-frontend/src/components/ui/friends/FriendsList.vue
+++ b/apps/app-frontend/src/components/ui/friends/FriendsList.vue
@@ -250,7 +250,7 @@ onUnmounted(() => {
  </ModalWrapper>
  <div class="flex justify-between items-center">
    <h3 class="text-lg m-0">Friends</h3>
-    <ButtonStyled type="transparent" circular>
+    <ButtonStyled v-if="userCredentials" type="transparent" circular>
      <OverflowMenu
        :options="[
          {
--- a/apps/app-frontend/src/components/ui/install_flow/IncompatibilityWarningModal.vue
+++ b/apps/app-frontend/src/components/ui/install_flow/IncompatibilityWarningModal.vue
@@ -17,19 +17,21 @@
          <tr class="content">
            <td class="data">{{ instance?.loader }} {{ instance?.game_version }}</td>
            <td>
-              <DropdownSelect
+              <multiselect
                v-if="versions?.length > 1"
                v-model="selectedVersion"
                :options="versions"
+                :searchable="true"
                placeholder="Select version"
-                name="Version select"
-                :display-name="
+                open-direction="top"
+                :show-labels="false"
+                :custom-label="
                  (version) =>
                    `${version?.name} (${version?.loaders
                      .map((name) => formatCategory(name))
                      .join(', ')} - ${version?.game_versions.join(', ')})`
                "
-                render-up
+                :max-height="150"
              />
              <span v-else>
                <span>
@@ -56,12 +58,13 @@
 <script setup>
 import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
 import { XIcon, DownloadIcon } from '@modrinth/assets'
-import { Button, DropdownSelect } from '@modrinth/ui'
+import { Button } from '@modrinth/ui'
 import { formatCategory } from '@modrinth/utils'
 import { add_project_from_version as installMod } from '@/helpers/profile'
 import { ref } from 'vue'
 import { handleError } from '@/store/state.js'
 import { trackEvent } from '@/helpers/analytics'
+import Multiselect from 'vue-multiselect'

 const instance = ref(null)
 const project = ref(null)
--- a/apps/app-frontend/src/components/ui/install_flow/ModInstallModal.vue
+++ b/apps/app-frontend/src/components/ui/install_flow/ModInstallModal.vue
@@ -357,7 +357,7 @@ const createInstance = async () => {
  display: flex;
  flex-direction: column;
  gap: 1rem;
-  padding: 1rem;
+  min-width: 350px;
 }

 .profiles {
@@ -378,7 +378,6 @@ const createInstance = async () => {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
-  padding: 0 0.5rem;
  gap: 0.5rem;

  img {
--- a/apps/app-frontend/src/components/ui/instance_settings/GeneralSettings.vue
+++ b/apps/app-frontend/src/components/ui/instance_settings/GeneralSettings.vue
@@ -10,15 +10,14 @@ import { open } from '@tauri-apps/plugin-dialog'
 import { defineMessages, useVIntl } from '@vintl/vintl'
 import { useRouter } from 'vue-router'
 import ConfirmModalWrapper from '@/components/ui/modal/ConfirmModalWrapper.vue'
+import type { InstanceSettingsTabProps, GameInstance } from '../../../helpers/types'

 const { formatMessage } = useVIntl()
 const router = useRouter()

 const deleteConfirmModal = ref()

-const props = defineProps<{
-  instance: GameInstance
-}>()
+const props = defineProps<InstanceSettingsTabProps>()

 const title = ref(props.instance.name)
 const icon: Ref<string | undefined> = ref(props.instance.icon_path)
@@ -215,6 +214,7 @@ const messages = defineMessages({
          :src="icon ? convertFileSrc(icon) : icon"
          size="108px"
          class="!border-4 group-hover:brightness-75"
+          :tint-by="props.instance.path"
          no-shadow
        />
        <div class="absolute top-0 right-0 m-2">
--- a/apps/app-frontend/src/components/ui/instance_settings/HooksSettings.vue
+++ b/apps/app-frontend/src/components/ui/instance_settings/HooksSettings.vue
@@ -5,12 +5,11 @@ import { handleError } from '@/store/notifications'
 import { defineMessages, useVIntl } from '@vintl/vintl'
 import { get } from '@/helpers/settings'
 import { edit } from '@/helpers/profile'
+import type { InstanceSettingsTabProps, AppSettings, Hooks } from '../../../helpers/types'

 const { formatMessage } = useVIntl()

-const props = defineProps<{
-  instance: GameInstance
-}>()
+const props = defineProps<InstanceSettingsTabProps>()

 const globalSettings = (await get().catch(handleError)) as AppSettings

--- a/apps/app-frontend/src/components/ui/instance_settings/InstallationSettings.vue
+++ b/apps/app-frontend/src/components/ui/instance_settings/InstallationSettings.vue
@@ -29,7 +29,11 @@ import ConfirmModalWrapper from '@/components/ui/modal/ConfirmModalWrapper.vue'
 import { get_project, get_version_many } from '@/helpers/cache'
 import ModpackVersionModal from '@/components/ui/ModpackVersionModal.vue'
 import dayjs from 'dayjs'
-import type { GameInstance, ManifestLoaderVersion, Manifest } from '@/helpers/types.d.ts'
+import type {
+  InstanceSettingsTabProps,
+  ManifestLoaderVersion,
+  Manifest,
+} from '../../../helpers/types'

 const { formatMessage } = useVIntl()

@@ -38,10 +42,7 @@ const modpackVersionModal = ref()
 const modalConfirmUnpair = ref()
 const modalConfirmReinstall = ref()

-const props = defineProps<{
-  instance: GameInstance
-  offline?: boolean
-}>()
+const props = defineProps<InstanceSettingsTabProps>()

 const loader = ref(props.instance.loader)
 const gameVersion = ref(props.instance.game_version)
@@ -307,11 +308,11 @@ const messages = defineMessages({
    defaultMessage: '(unknown version)',
  },
  repairConfirmTitle: {
-    id: 'instance.settings.tabs.installation.repair.confirm-title',
+    id: 'instance.settings.tabs.installation.repair.confirm.title',
    defaultMessage: 'Repair instance?',
  },
  repairConfirmDescription: {
-    id: 'instance.settings.tabs.installation.repair.description',
+    id: 'instance.settings.tabs.installation.repair.confirm.description',
    defaultMessage:
      'Repairing reinstalls Minecraft dependencies and checks for corruption. This may resolve issues if your game is not launching due to launcher-related errors, but will not resolve issues or crashes related to installed mods.',
  },
@@ -347,10 +348,26 @@ const messages = defineMessages({
    id: 'instance.settings.tabs.installation.change-version.button.installing',
    defaultMessage: 'Installing',
  },
+  installInProgress: {
+    id: 'instance.settings.tabs.installation.install.in-progress',
+    defaultMessage: 'Installation in progress',
+  },
  installButton: {
    id: 'instance.settings.tabs.installation.change-version.button.install',
    defaultMessage: 'Install',
  },
+  alreadyInstalledVanilla: {
+    id: 'instance.settings.tabs.installation.change-version.already-installed.vanilla',
+    defaultMessage: 'Vanilla {game_version} already installed',
+  },
+  alreadyInstalledModded: {
+    id: 'instance.settings.tabs.installation.change-version.already-installed.modded',
+    defaultMessage: '{platform} {version} for Minecraft {game_version} already installed',
+  },
+  installAction: {
+    id: 'instance.settings.tabs.installation.tooltip.action.install',
+    defaultMessage: 'install',
+  },
  installingNewVersion: {
    id: 'instance.settings.tabs.installation.change-version.in-progress',
    defaultMessage: 'Installing new version',
@@ -393,11 +410,11 @@ const messages = defineMessages({
    defaultMessage: 'Unlink instance',
  },
  unlinkInstanceConfirmTitle: {
-    id: 'instance.settings.tabs.installation.unlink.title',
+    id: 'instance.settings.tabs.installation.unlink.confirm.title',
    defaultMessage: 'Are you sure you want to unlink this instance?',
  },
  unlinkInstanceConfirmDescription: {
-    id: 'instance.settings.tabs.installation.unlink.description',
+    id: 'instance.settings.tabs.installation.unlink.confirm.description',
    defaultMessage:
      'If you proceed, you will not be able to re-link it without creating an entirely new instance. You will no longer receive modpack updates and it will become a normal.',
  },
@@ -407,7 +424,7 @@ const messages = defineMessages({
  },
  reinstallModpackConfirmDescription: {
    id: 'instance.settings.tabs.installation.reinstall.confirm.description',
-    defaultMessage: `Reinstalling will reset content provided by the modpack to their original state.`,
+    defaultMessage: `Reinstalling will reset all installed or modified content to what is provided by the modpack, removing any mods or content you have added on top of the original installation. This may fix unexpected behavior if changes have been made to the instance, but if your worlds now depend on additional installed content, it may break existing worlds.`,
  },
  reinstallModpackTitle: {
    id: 'instance.settings.tabs.installation.reinstall.title',
@@ -415,7 +432,7 @@ const messages = defineMessages({
  },
  reinstallModpackDescription: {
    id: 'instance.settings.tabs.installation.reinstall.description',
-    defaultMessage: `Resets all content provided by the modpack to their original state. This may fix unexpected behavior if changes have been made to the instance.`,
+    defaultMessage: `Resets the instance's content to its original state, removing any mods or content you have added on top of the original modpack.`,
  },
  reinstallModpackButton: {
    id: 'instance.settings.tabs.installation.reinstall.button',
@@ -647,7 +664,34 @@ const messages = defineMessages({
      </template>
      <div class="mt-4 flex flex-wrap gap-2">
        <ButtonStyled color="brand">
-          <button :disabled="!isValid || !isChanged || editing" @click="saveGvLoaderEdits()">
+          <button
+            v-tooltip="
+              installing || reinstalling
+                ? formatMessage(messages.installInProgress)
+                : !isChanged
+                  ? formatMessage(
+                      loader === 'vanilla'
+                        ? messages.alreadyInstalledVanilla
+                        : messages.alreadyInstalledModded,
+                      {
+                        platform: formatCategory(loader),
+                        version: instance.loader_version,
+                        game_version: gameVersion,
+                      },
+                    )
+                  : repairing
+                    ? formatMessage(messages.cannotWhileRepairing, {
+                        action: formatMessage(messages.installAction),
+                      })
+                    : offline
+                      ? formatMessage(messages.cannotWhileOffline, {
+                          action: formatMessage(messages.installAction),
+                        })
+                      : null
+            "
+            :disabled="!isValid || !isChanged || editing || offline || repairing"
+            @click="saveGvLoaderEdits()"
+          >
            <SpinnerIcon v-if="editing" class="animate-spin" />
            <DownloadIcon v-else />
            {{
--- a/apps/app-frontend/src/components/ui/instance_settings/JavaSettings.vue
+++ b/apps/app-frontend/src/components/ui/instance_settings/JavaSettings.vue
@@ -8,12 +8,11 @@ import { defineMessages, useVIntl } from '@vintl/vintl'
 import JavaSelector from '@/components/ui/JavaSelector.vue'
 import { get_max_memory } from '@/helpers/jre'
 import { get } from '@/helpers/settings'
+import type { InstanceSettingsTabProps, AppSettings, MemorySettings } from '../../../helpers/types'

 const { formatMessage } = useVIntl()

-const props = defineProps<{
-  instance: GameInstance
-}>()
+const props = defineProps<InstanceSettingsTabProps>()

 const globalSettings = (await get().catch(handleError)) as AppSettings

--- a/apps/app-frontend/src/components/ui/instance_settings/WindowSettings.vue
+++ b/apps/app-frontend/src/components/ui/instance_settings/WindowSettings.vue
@@ -5,12 +5,11 @@ import { handleError } from '@/store/notifications'
 import { defineMessages, useVIntl } from '@vintl/vintl'
 import { get } from '@/helpers/settings'
 import { edit } from '@/helpers/profile'
+import type { InstanceSettingsTabProps, AppSettings } from '../../../helpers/types'

 const { formatMessage } = useVIntl()

-const props = defineProps<{
-  instance: GameInstance
-}>()
+const props = defineProps<InstanceSettingsTabProps>()

 const globalSettings = (await get().catch(handleError)) as AppSettings

--- a/apps/app-frontend/src/components/ui/modal/AppSettingsModal.vue
+++ b/apps/app-frontend/src/components/ui/modal/AppSettingsModal.vue
@@ -10,7 +10,7 @@ import {
  CoffeeIcon,
 } from '@modrinth/assets'
 import { TabbedModal } from '@modrinth/ui'
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 import { useVIntl, defineMessage } from '@vintl/vintl'
 import AppearanceSettings from '@/components/ui/settings/AppearanceSettings.vue'
 import JavaSettings from '@/components/ui/settings/JavaSettings.vue'
@@ -92,7 +92,9 @@ function show() {
  modal.value.show()
 }

-defineExpose({ show })
+const isOpen = computed(() => modal.value?.isOpen)
+
+defineExpose({ show, isOpen })

 const version = await getVersion()
 const osPlatform = getOsPlatform()
--- a/apps/app-frontend/src/components/ui/modal/InstanceSettingsModal.vue
+++ b/apps/app-frontend/src/components/ui/modal/InstanceSettingsModal.vue
@@ -7,7 +7,7 @@ import {
  MonitorIcon,
  CodeIcon,
 } from '@modrinth/assets'
-import { Avatar, TabbedModal } from '@modrinth/ui'
+import { Avatar, TabbedModal, type TabbedModalTab } from '@modrinth/ui'
 import { ref } from 'vue'
 import { defineMessage, useVIntl } from '@vintl/vintl'
 import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
@@ -17,19 +17,13 @@ import InstallationSettings from '@/components/ui/instance_settings/Installation
 import JavaSettings from '@/components/ui/instance_settings/JavaSettings.vue'
 import WindowSettings from '@/components/ui/instance_settings/WindowSettings.vue'
 import HooksSettings from '@/components/ui/instance_settings/HooksSettings.vue'
+import type { InstanceSettingsTabProps } from '../../../helpers/types'

 const { formatMessage } = useVIntl()

-defineProps({
-  instance: {
-    type: Object,
-    default() {
-      return {}
-    },
-  },
-})
+const props = defineProps<InstanceSettingsTabProps>()

-const tabs = [
+const tabs: TabbedModalTab<InstanceSettingsTabProps>[] = [
  {
    name: defineMessage({
      id: 'instance.settings.tabs.general',
@@ -92,12 +86,13 @@ const titleMessage = defineMessage({
        <Avatar
          :src="instance.icon_path ? convertFileSrc(instance.icon_path) : undefined"
          size="24px"
+          :tint-by="props.instance.path"
        />
        {{ instance.name }} <ChevronRightIcon />
        <span class="font-extrabold text-contrast">{{ formatMessage(titleMessage) }}</span>
      </span>
    </template>

-    <TabbedModal :tabs="tabs.map((tab) => ({ ...tab, props: { instance } }))" />
+    <TabbedModal :tabs="tabs.map((tab) => ({ ...tab, props }))" />
  </ModalWrapper>
 </template>