Merge commit '8faea1663ae0c6d1190a5043054197b6a58019f3' into feature-clean

2025-07-05 23:11:27 +03:00
parent 84bbb0d68f 8faea1663a
commit 7e58d7dd35
512 changed files with 16548 additions and 3058 deletions
--- a/apps/app-frontend/src/components/ui/AccountsCard.vue
+++ b/apps/app-frontend/src/components/ui/AccountsCard.vue
@@ -9,15 +9,13 @@
    <Avatar
      size="36px"
      :src="
-        selectedAccount
-          ? `https://mc-heads.net/avatar/${selectedAccount.id}/128`
-          : 'https://launcher-files.modrinth.com/assets/steve_head.png'
+        selectedAccount ? avatarUrl : 'https://launcher-files.modrinth.com/assets/steve_head.png'
      "
    />
    <div class="flex flex-col w-full">
      <span>
-        <component v-if="selectedAccount" :is="getAccountType(selectedAccount)" class="vector-icon" />
-        {{ selectedAccount ? selectedAccount.username : 'Select account' }}
+        <component :is="getAccountType(selectedAccount)" v-if="selectedAccount" class="vector-icon" />
+        {{ selectedAccount ? selectedAccount.profile.name : 'Select account' }}
      </span>
      <span class="text-secondary text-xs">Minecraft account</span>
    </div>
@@ -27,36 +25,49 @@
    <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.username}/128`" />
+        <Avatar size="xs" :src="avatarUrl" />
        <div>
          <h4>
-            <component :is="getAccountType(selectedAccount)" class="vector-icon" /> {{ selectedAccount.username }}
+            <component :is="getAccountType(selectedAccount)" class="vector-icon" /> {{ selectedAccount.profile.name }}
          </h4>
          <p>Selected</p>
        </div>
-        <Button v-tooltip="'Log out'" icon-only color="raised" @click="logout(selectedAccount.id)">
+        <Button
+          v-tooltip="'Log out'"
+          icon-only
+          color="raised"
+          @click="logout(selectedAccount.profile.id)"
+        >
          <TrashIcon />
        </Button>
      </div>
      <div v-else class="login-section account">
        <h4>Not signed in</h4>
-        <Button v-tooltip="'Log in'" icon-only @click="login()">
-          <MicrosoftIcon />
+        <Button
+          v-tooltip="'Log in'"
+          :disabled="loginDisabled"
+          icon-only
+          color="primary"
+          @click="login()"
+        >
+          <LogInIcon v-if="!loginDisabled" />
+          <SpinnerIcon v-else class="animate-spin" />
+          <MicrosoftIcon/>
        </Button>
        <Button v-tooltip="'Add offline'" icon-only @click="tryOfflineLogin()">
          <PirateIcon />
        </Button>
      </div>
      <div v-if="displayAccounts.length > 0" class="account-group">
-        <div v-for="account in displayAccounts" :key="account.id" class="account-row">
+        <div v-for="account in displayAccounts" :key="account.profile.id" class="account-row">
          <Button class="option account" @click="setAccount(account)">
-            <Avatar :src="`https://mc-heads.net/avatar/${account.username}/128`" class="icon" />
+            <Avatar :src="getAccountAvatarUrl(account)" class="icon" />
            <p class="account-type">
              <component :is="getAccountType(account)" class="vector-icon" />
-              {{ account.username }}
+              {{ account.profile.name }}
            </p>
          </Button>
-          <Button v-tooltip="'Log out'" icon-only @click="logout(account.id)">
+          <Button v-tooltip="'Log out'" icon-only @click="logout(account.profile.id)">
            <TrashIcon />
          </Button>
        </div>
@@ -96,7 +107,16 @@
 </template>

 <script setup>
-import { DropdownIcon, PlusIcon, TrashIcon, LogInIcon, PirateIcon as Offline, MicrosoftIcon as License, MicrosoftIcon, PirateIcon } from '@modrinth/assets'
+import { 
+  DropdownIcon,
+  PlusIcon,
+  TrashIcon,
+  LogInIcon,
+  PirateIcon as Offline,
+  MicrosoftIcon as License,
+  MicrosoftIcon,
+  PirateIcon,
+  SpinnerIcon } from '@modrinth/assets'
 import { Avatar, Button, Card } from '@modrinth/ui'
 import { ref, computed, onMounted, onBeforeUnmount, onUnmounted } from 'vue'
 import {
@@ -111,7 +131,9 @@ import { handleError } from '@/store/state.js'
 import { trackEvent } from '@/helpers/analytics'
 import { process_listener } from '@/helpers/events'
 import { handleSevereError } from '@/store/error.js'
-import ModalWrapper from './modal/ModalWrapper.vue'
+import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
+import { get_available_skins } from '@/helpers/skins'
+import { getPlayerHeadUrl } from '@/helpers/rendering/batch-skin-renderer.ts'

 defineProps({
  mode: {
@@ -124,18 +146,19 @@ defineProps({
 const emit = defineEmits(['change'])

 const accounts = ref({})
+const loginDisabled = ref(false)
 const defaultUser = ref()
 const loginOfflineModal = ref(null)
 const loginErrorModal = ref(null)
 const unexpectedErrorModal = ref(null)
 const playerName = ref('')

-async function tryOfflineLogin() { // Patched
+async function tryOfflineLogin() { // Patched by AstralRinth
  loginOfflineModal.value.show()
 }

-async function offlineLoginFinally() { // Patched
-  let name = playerName.value
+async function offlineLoginFinally() { // Patched by AstralRinth
+  const name = playerName.value
  if (name.length > 1 && name.length < 20 && name !== '') {
    const loggedIn = await offline_login(name).catch(handleError)
    loginOfflineModal.value.hide()
@@ -153,43 +176,96 @@ async function offlineLoginFinally() { // Patched
  }
 }

-function retryOfflineLogin() { // Patched
+function retryOfflineLogin() { // Patched by AstralRinth
  loginErrorModal.value.hide()
  tryOfflineLogin()
 }

-function getAccountType(account) { // Patched
+function getAccountType(account) { // Patched by AstralRinth
  if (account.access_token != "null" && account.access_token != null && account.access_token != "") {
    return License
  } else {
    return Offline
  }
 }
+const equippedSkin = ref(null)
+const headUrlCache = ref(new Map())

 async function refreshValues() {
  defaultUser.value = await get_default_user().catch(handleError)
  accounts.value = await users().catch(handleError)
+
+  try {
+    const skins = await get_available_skins()
+    equippedSkin.value = skins.find((skin) => skin.is_equipped)
+
+    if (equippedSkin.value) {
+      try {
+        const headUrl = await getPlayerHeadUrl(equippedSkin.value)
+        headUrlCache.value.set(equippedSkin.value.texture_key, headUrl)
+      } catch (error) {
+        console.warn('Failed to get head render for equipped skin:', error)
+      }
+    }
+  } catch {
+    equippedSkin.value = null
+  }
 }
+
+function setLoginDisabled(value) {
+  loginDisabled.value = value
+}
+
 defineExpose({
  refreshValues,
+  setLoginDisabled,
+  loginDisabled,
 })
 await refreshValues()

 const displayAccounts = computed(() =>
-  accounts.value.filter((account) => defaultUser.value !== account.id),
+  accounts.value.filter((account) => defaultUser.value !== account.profile.id),
 )

+const avatarUrl = computed(() => {
+  if (equippedSkin.value?.texture_key) {
+    const cachedUrl = headUrlCache.value.get(equippedSkin.value.texture_key)
+    if (cachedUrl) {
+      return cachedUrl
+    }
+    return `https://mc-heads.net/avatar/${equippedSkin.value.texture_key}/128`
+  }
+  if (selectedAccount.value?.profile?.id) {
+    return `https://mc-heads.net/avatar/${selectedAccount.value.profile.id}/128`
+  }
+  return 'https://launcher-files.modrinth.com/assets/steve_head.png'
+})
+
+function getAccountAvatarUrl(account) {
+  if (
+    account.profile.id === selectedAccount.value?.profile?.id &&
+    equippedSkin.value?.texture_key
+  ) {
+    const cachedUrl = headUrlCache.value.get(equippedSkin.value.texture_key)
+    if (cachedUrl) {
+      return cachedUrl
+    }
+  }
+  return `https://mc-heads.net/avatar/${account.profile.id}/128`
+}
+
 const selectedAccount = computed(() =>
-  accounts.value.find((account) => account.id === defaultUser.value),
+  accounts.value.find((account) => account.profile.id === defaultUser.value),
 )

 async function setAccount(account) {
-  defaultUser.value = account.id
-  await set_default_user(account.id).catch(handleError)
+  defaultUser.value = account.profile.id
+  await set_default_user(account.profile.id).catch(handleError)
  emit('change')
 }

 async function login() {
+  loginDisabled.value = true
  const loggedIn = await login_flow().catch(handleSevereError)

  if (loggedIn) {
@@ -198,6 +274,7 @@ async function login() {
  }

  trackEvent('AccountLogIn')
+  loginDisabled.value = false
 }

 const logout = async (id) => {
--- a/apps/app-frontend/src/components/ui/ErrorModal.vue
+++ b/apps/app-frontend/src/components/ui/ErrorModal.vue
@@ -92,7 +92,7 @@ async function loginMinecraft() {
    const loggedIn = await login_flow()

    if (loggedIn) {
-      await set_default_user(loggedIn.id).catch(handleError)
+      await set_default_user(loggedIn.profile.id).catch(handleError)
    }

    await trackEvent('AccountLogIn', { source: 'ErrorModal' })
@@ -219,8 +219,8 @@ async function copyToClipboard(text) {
          <template v-else-if="metadata.notEnoughSpace">
            <h3>Not enough space</h3>
            <p>
-              It looks like there is not enough space on the disk containing the dirctory you
-              selected Please free up some space and try again or cancel the directory change.
+              It looks like there is not enough space on the disk containing the directory you
+              selected. Please free up some space and try again or cancel the directory change.
            </p>
          </template>
          <template v-else>
--- a/apps/app-frontend/src/components/ui/Instance.vue
+++ b/apps/app-frontend/src/components/ui/Instance.vue
@@ -19,7 +19,6 @@ import { showProfileInFolder } from '@/helpers/utils.js'
 import { handleSevereError } from '@/store/error.js'
 import { trackEvent } from '@/helpers/analytics'
 import dayjs from 'dayjs'
-import { formatCategory } from '@modrinth/utils'

 const formatRelativeTime = useRelativeTime()

@@ -173,7 +172,10 @@ onUnmounted(() => unlisten())
      <div class="flex items-center col-span-3 gap-1 text-secondary font-semibold">
        <TimerIcon />
        <span class="text-sm">
-          Played {{ formatRelativeTime(dayjs(instance.last_played).toISOString()) }}
+          <template v-if="instance.last_played">
+            Played {{ formatRelativeTime(dayjs(instance.last_played).toISOString()) }}
+          </template>
+          <template v-else> Never played </template>
        </span>
      </div>
    </div>
@@ -237,8 +239,8 @@ onUnmounted(() => unlisten())
        </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 class="text-sm capitalize">
+            {{ instance.loader }} {{ instance.game_version }}
          </span>
        </div>
      </div>
--- a/apps/app-frontend/src/components/ui/JavaSelector.vue
+++ b/apps/app-frontend/src/components/ui/JavaSelector.vue
@@ -127,7 +127,7 @@ async function handleJavaFileInput() {
  const filePath = await open()

  if (filePath) {
-    let result = await get_jre(filePath.path ?? filePath)
+    let result = await get_jre(filePath.path ?? filePath).catch(handleError)
    if (!result) {
      result = {
        path: filePath.path ?? filePath,
--- a/apps/app-frontend/src/components/ui/QuickInstanceSwitcher.vue
+++ b/apps/app-frontend/src/components/ui/QuickInstanceSwitcher.vue
@@ -30,7 +30,7 @@ const getInstances = async () => {

      return dateB - dateA
    })
-    .slice(0, 4)
+    .slice(0, 3)
 }

 await getInstances()
--- a/apps/app-frontend/src/components/ui/modal/AppSettingsModal.vue
+++ b/apps/app-frontend/src/components/ui/modal/AppSettingsModal.vue
@@ -5,7 +5,7 @@ import {
  ShieldIcon,
  SettingsIcon,
  GaugeIcon,
-  PaintBrushIcon,
+  PaintbrushIcon,
  GameIcon,
  CoffeeIcon,
 } from '@modrinth/assets'
@@ -41,7 +41,7 @@ const tabs = [
      id: 'app.settings.tabs.appearance',
      defaultMessage: 'Appearance',
    }),
-    icon: PaintBrushIcon,
+    icon: PaintbrushIcon,
    content: AppearanceSettings,
  },
  {
--- a/apps/app-frontend/src/components/ui/modal/ModalWrapper.vue
+++ b/apps/app-frontend/src/components/ui/modal/ModalWrapper.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { useTemplateRef } from 'vue'
 import { NewModal as Modal } from '@modrinth/ui'
 // import { show_ads_window, hide_ads_window } from '@/helpers/ads.js'
 import { useTheming } from '@/store/theme.js'
@@ -26,15 +26,16 @@ const props = defineProps({
  //   default: true,
  // },
 })
-const modal = ref(null)
+const modal = useTemplateRef('modal')

 defineExpose({
-  show: () => {
-    modal.value.show()
+  show: (e: MouseEvent) => {
+    // hide_ads_window()
+    modal.value?.show(e)
  },
  hide: () => {
    onModalHide()
-    modal.value.hide()
+    modal.value?.hide()
  },
 })

--- a/apps/app-frontend/src/components/ui/settings/AppearanceSettings.vue
+++ b/apps/app-frontend/src/components/ui/settings/AppearanceSettings.vue
@@ -56,9 +56,17 @@ watch(
    />
  </div>

+  <div class="mt-4 flex items-center justify-between">
+    <div>
+      <h2 class="m-0 text-lg font-extrabold text-contrast">Hide nametag</h2>
+      <p class="m-0 mt-1">Disables the nametag above your player on the skins page. page.</p>
+    </div>
+    <Toggle id="hide-nametag-skins-page" v-model="settings.hide_nametag_skins_page" />
+  </div>
+
  <div v-if="os !== 'MacOS'" class="mt-4 flex items-center justify-between gap-4">
    <div>
-      <h2 class="m-0 text-lg font-extrabold text-contrast">Native Decorations</h2>
+      <h2 class="m-0 text-lg font-extrabold text-contrast">Native decorations</h2>
      <p class="m-0 mt-1">Use system window frame (app restart required).</p>
    </div>
    <Toggle id="native-decorations" v-model="settings.native_decorations" />
--- a/apps/app-frontend/src/components/ui/skin/EditSkinModal.vue
+++ b/apps/app-frontend/src/components/ui/skin/EditSkinModal.vue
@@ -0,0 +1,420 @@
+<script lang="ts">
+import capeModelUrl from '@/assets/models/cape.gltf?url'
+import wideModelUrl from '@/assets/models/classic_player.gltf?url'
+import slimModelUrl from '@/assets/models/slim_player.gltf?url'
+</script>
+<template>
+  <UploadSkinModal ref="uploadModal" />
+  <ModalWrapper ref="modal" @on-hide="resetState">
+    <template #title>
+      <span class="text-lg font-extrabold text-contrast">
+        {{ mode === 'edit' ? 'Editing skin' : 'Adding a skin' }}
+      </span>
+    </template>
+
+    <div class="flex flex-col md:flex-row gap-6">
+      <div class="max-h-[25rem] w-[16rem] min-w-[16rem] overflow-hidden relative">
+        <div class="absolute top-[-4rem] left-0 h-[32rem] w-[16rem] flex-shrink-0">
+          <SkinPreviewRenderer
+            :slim-model-src="slimModelUrl"
+            :wide-model-src="wideModelUrl"
+            :cape-model-src="capeModelUrl"
+            :variant="variant"
+            :texture-src="previewSkin || ''"
+            :cape-src="selectedCapeTexture"
+            :scale="1.4"
+            :fov="50"
+            :initial-rotation="Math.PI / 8"
+            class="h-full w-full"
+          />
+        </div>
+      </div>
+
+      <div class="flex flex-col gap-4 w-full min-h-[20rem]">
+        <section>
+          <h2 class="text-base font-semibold mb-2">Texture</h2>
+          <Button @click="openUploadSkinModal"> <UploadIcon /> Replace texture </Button>
+        </section>
+
+        <section>
+          <h2 class="text-base font-semibold mb-2">Arm style</h2>
+          <RadioButtons v-model="variant" :items="['CLASSIC', 'SLIM']">
+            <template #default="{ item }">
+              {{ item === 'CLASSIC' ? 'Wide' : 'Slim' }}
+            </template>
+          </RadioButtons>
+        </section>
+
+        <section>
+          <h2 class="text-base font-semibold mb-2">Cape</h2>
+          <div class="flex gap-2">
+            <CapeButton
+              v-if="defaultCape"
+              :id="defaultCape.id"
+              :texture="defaultCape.texture"
+              :name="undefined"
+              :selected="!selectedCape"
+              faded
+              @select="selectCape(undefined)"
+            >
+              <span>Use default cape</span>
+            </CapeButton>
+            <CapeLikeTextButton v-else :highlighted="!selectedCape" @click="selectCape(undefined)">
+              <span>Use default cape</span>
+            </CapeLikeTextButton>
+
+            <CapeButton
+              v-for="cape in visibleCapeList"
+              :id="cape.id"
+              :key="cape.id"
+              :texture="cape.texture"
+              :name="cape.name || 'Cape'"
+              :selected="selectedCape?.id === cape.id"
+              @select="selectCape(cape)"
+            />
+
+            <CapeLikeTextButton
+              v-if="(capes?.length ?? 0) > 2"
+              tooltip="View more capes"
+              @mouseup="openSelectCapeModal"
+            >
+              <template #icon><ChevronRightIcon /></template>
+              <span>More</span>
+            </CapeLikeTextButton>
+          </div>
+        </section>
+      </div>
+    </div>
+
+    <div class="flex gap-2 mt-12">
+      <ButtonStyled color="brand" :disabled="disableSave || isSaving">
+        <button v-tooltip="saveTooltip" :disabled="disableSave || isSaving" @click="save">
+          <SpinnerIcon v-if="isSaving" class="animate-spin" />
+          <CheckIcon v-else-if="mode === 'new'" />
+          <SaveIcon v-else />
+          {{ mode === 'new' ? 'Add skin' : 'Save skin' }}
+        </button>
+      </ButtonStyled>
+      <Button :disabled="isSaving" @click="hide"><XIcon />Cancel</Button>
+    </div>
+  </ModalWrapper>
+
+  <SelectCapeModal
+    ref="selectCapeModal"
+    :capes="capes || []"
+    @select="handleCapeSelected"
+    @cancel="handleCapeCancel"
+  />
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, useTemplateRef } from 'vue'
+import SelectCapeModal from '@/components/ui/skin/SelectCapeModal.vue'
+import {
+  SkinPreviewRenderer,
+  Button,
+  RadioButtons,
+  CapeButton,
+  CapeLikeTextButton,
+  ButtonStyled,
+} from '@modrinth/ui'
+import {
+  add_and_equip_custom_skin,
+  remove_custom_skin,
+  unequip_skin,
+  type Skin,
+  type Cape,
+  type SkinModel,
+  get_normalized_skin_texture,
+} from '@/helpers/skins.ts'
+import { handleError } from '@/store/notifications'
+import {
+  UploadIcon,
+  CheckIcon,
+  SaveIcon,
+  XIcon,
+  ChevronRightIcon,
+  SpinnerIcon,
+} from '@modrinth/assets'
+import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
+import UploadSkinModal from '@/components/ui/skin/UploadSkinModal.vue'
+
+const modal = useTemplateRef('modal')
+const selectCapeModal = useTemplateRef('selectCapeModal')
+const mode = ref<'new' | 'edit'>('new')
+const currentSkin = ref<Skin | null>(null)
+const shouldRestoreModal = ref(false)
+const isSaving = ref(false)
+
+const uploadedTextureUrl = ref<string | null>(null)
+const previewSkin = ref<string>('')
+
+const variant = ref<SkinModel>('CLASSIC')
+const selectedCape = ref<Cape | undefined>(undefined)
+const props = defineProps<{ capes?: Cape[]; defaultCape?: Cape }>()
+
+const selectedCapeTexture = computed(() => selectedCape.value?.texture)
+const visibleCapeList = ref<Cape[]>([])
+
+const sortedCapes = computed(() => {
+  return [...(props.capes || [])].sort((a, b) => {
+    const nameA = (a.name || '').toLowerCase()
+    const nameB = (b.name || '').toLowerCase()
+    return nameA.localeCompare(nameB)
+  })
+})
+
+function initVisibleCapeList() {
+  if (!props.capes || props.capes.length === 0) {
+    visibleCapeList.value = []
+    return
+  }
+
+  if (visibleCapeList.value.length === 0) {
+    if (selectedCape.value) {
+      const otherCape = getSortedCapeExcluding(selectedCape.value.id)
+      visibleCapeList.value = otherCape ? [selectedCape.value, otherCape] : [selectedCape.value]
+    } else {
+      visibleCapeList.value = getSortedCapes(2)
+    }
+  }
+}
+
+function getSortedCapes(count: number): Cape[] {
+  if (!sortedCapes.value || sortedCapes.value.length === 0) return []
+  return sortedCapes.value.slice(0, count)
+}
+
+function getSortedCapeExcluding(excludeId: string): Cape | undefined {
+  if (!sortedCapes.value || sortedCapes.value.length <= 1) return undefined
+  return sortedCapes.value.find((cape) => cape.id !== excludeId)
+}
+
+async function loadPreviewSkin() {
+  if (uploadedTextureUrl.value) {
+    previewSkin.value = uploadedTextureUrl.value
+  } else if (currentSkin.value) {
+    try {
+      previewSkin.value = await get_normalized_skin_texture(currentSkin.value)
+    } catch (error) {
+      console.error('Failed to load skin texture:', error)
+      previewSkin.value = '/src/assets/skins/steve.png'
+    }
+  } else {
+    previewSkin.value = '/src/assets/skins/steve.png'
+  }
+}
+
+const hasEdits = computed(() => {
+  if (mode.value !== 'edit') return true
+  if (uploadedTextureUrl.value) return true
+  if (!currentSkin.value) return false
+  if (variant.value !== currentSkin.value.variant) return true
+  if ((selectedCape.value?.id || null) !== (currentSkin.value.cape_id || null)) return true
+  return false
+})
+
+const disableSave = computed(
+  () =>
+    (mode.value === 'new' && !uploadedTextureUrl.value) ||
+    (mode.value === 'edit' && !hasEdits.value),
+)
+
+const saveTooltip = computed(() => {
+  if (isSaving.value) return 'Saving...'
+  if (mode.value === 'new' && !uploadedTextureUrl.value) return 'Upload a skin first!'
+  if (mode.value === 'edit' && !hasEdits.value) return 'Make an edit to the skin first!'
+  return undefined
+})
+
+function resetState() {
+  mode.value = 'new'
+  currentSkin.value = null
+  uploadedTextureUrl.value = null
+  previewSkin.value = ''
+  variant.value = 'CLASSIC'
+  selectedCape.value = undefined
+  visibleCapeList.value = []
+  shouldRestoreModal.value = false
+  isSaving.value = false
+}
+
+async function show(e: MouseEvent, skin?: Skin) {
+  mode.value = skin ? 'edit' : 'new'
+  currentSkin.value = skin ?? null
+  if (skin) {
+    variant.value = skin.variant
+    selectedCape.value = props.capes?.find((c) => c.id === skin.cape_id)
+  } else {
+    variant.value = 'CLASSIC'
+    selectedCape.value = undefined
+  }
+  visibleCapeList.value = []
+  initVisibleCapeList()
+
+  await loadPreviewSkin()
+
+  modal.value?.show(e)
+}
+
+async function showNew(e: MouseEvent, skinTextureUrl: string) {
+  mode.value = 'new'
+  currentSkin.value = null
+  uploadedTextureUrl.value = skinTextureUrl
+  variant.value = 'CLASSIC'
+  selectedCape.value = undefined
+  visibleCapeList.value = []
+  initVisibleCapeList()
+
+  await loadPreviewSkin()
+
+  modal.value?.show(e)
+}
+
+async function restoreWithNewTexture(skinTextureUrl: string) {
+  uploadedTextureUrl.value = skinTextureUrl
+  await loadPreviewSkin()
+
+  if (shouldRestoreModal.value) {
+    setTimeout(() => {
+      modal.value?.show()
+      shouldRestoreModal.value = false
+    }, 0)
+  }
+}
+
+function hide() {
+  modal.value?.hide()
+  setTimeout(() => resetState(), 250)
+}
+
+function selectCape(cape: Cape | undefined) {
+  if (cape && selectedCape.value?.id !== cape.id) {
+    const isInVisibleList = visibleCapeList.value.some((c) => c.id === cape.id)
+    if (!isInVisibleList && visibleCapeList.value.length > 0) {
+      visibleCapeList.value.splice(0, 1, cape)
+
+      if (visibleCapeList.value.length > 1 && visibleCapeList.value[1].id === cape.id) {
+        const otherCape = getSortedCapeExcluding(cape.id)
+        if (otherCape) {
+          visibleCapeList.value.splice(1, 1, otherCape)
+        }
+      }
+    }
+  }
+  selectedCape.value = cape
+}
+
+function handleCapeSelected(cape: Cape | undefined) {
+  selectCape(cape)
+
+  if (shouldRestoreModal.value) {
+    setTimeout(() => {
+      modal.value?.show()
+      shouldRestoreModal.value = false
+    }, 0)
+  }
+}
+
+function handleCapeCancel() {
+  if (shouldRestoreModal.value) {
+    setTimeout(() => {
+      modal.value?.show()
+      shouldRestoreModal.value = false
+    }, 0)
+  }
+}
+
+function openSelectCapeModal(e: MouseEvent) {
+  if (!selectCapeModal.value) return
+
+  shouldRestoreModal.value = true
+  modal.value?.hide()
+
+  setTimeout(() => {
+    selectCapeModal.value?.show(
+      e,
+      currentSkin.value?.texture_key,
+      selectedCape.value,
+      previewSkin.value,
+      variant.value,
+    )
+  }, 0)
+}
+
+function openUploadSkinModal(e: MouseEvent) {
+  shouldRestoreModal.value = true
+  modal.value?.hide()
+  emit('open-upload-modal', e)
+}
+
+function restoreModal() {
+  if (shouldRestoreModal.value) {
+    setTimeout(() => {
+      const fakeEvent = new MouseEvent('click')
+      modal.value?.show(fakeEvent)
+      shouldRestoreModal.value = false
+    }, 500)
+  }
+}
+
+async function save() {
+  isSaving.value = true
+
+  try {
+    let textureUrl: string
+
+    if (uploadedTextureUrl.value) {
+      textureUrl = uploadedTextureUrl.value
+    } else {
+      textureUrl = currentSkin.value!.texture
+    }
+
+    await unequip_skin()
+
+    const bytes: Uint8Array = new Uint8Array(await (await fetch(textureUrl)).arrayBuffer())
+
+    if (mode.value === 'new') {
+      await add_and_equip_custom_skin(bytes, variant.value, selectedCape.value)
+      emit('saved')
+    } else {
+      await add_and_equip_custom_skin(bytes, variant.value, selectedCape.value)
+      await remove_custom_skin(currentSkin.value!)
+      emit('saved')
+    }
+
+    hide()
+  } catch (err) {
+    handleError(err)
+  } finally {
+    isSaving.value = false
+  }
+}
+
+watch([uploadedTextureUrl, currentSkin], async () => {
+  await loadPreviewSkin()
+})
+
+watch(
+  () => props.capes,
+  () => {
+    initVisibleCapeList()
+  },
+  { immediate: true },
+)
+
+const emit = defineEmits<{
+  (event: 'saved'): void
+  (event: 'deleted', skin: Skin): void
+  (event: 'open-upload-modal', mouseEvent: MouseEvent): void
+}>()
+
+defineExpose({
+  show,
+  showNew,
+  restoreWithNewTexture,
+  hide,
+  shouldRestoreModal,
+  restoreModal,
+})
+</script>
--- a/apps/app-frontend/src/components/ui/skin/SelectCapeModal.vue
+++ b/apps/app-frontend/src/components/ui/skin/SelectCapeModal.vue
@@ -0,0 +1,146 @@
+<script setup lang="ts">
+import { useTemplateRef, ref, computed } from 'vue'
+import type { Cape, SkinModel } from '@/helpers/skins.ts'
+import {
+  ButtonStyled,
+  ScrollablePanel,
+  CapeButton,
+  CapeLikeTextButton,
+  SkinPreviewRenderer,
+} from '@modrinth/ui'
+import { CheckIcon, XIcon } from '@modrinth/assets'
+import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
+import capeModelUrl from '@/assets/models/cape.gltf?url'
+import wideModelUrl from '@/assets/models/classic_player.gltf?url'
+import slimModelUrl from '@/assets/models/slim_player.gltf?url'
+
+const modal = useTemplateRef('modal')
+
+const emit = defineEmits<{
+  (e: 'select', cape: Cape | undefined): void
+  (e: 'cancel'): void
+}>()
+
+const props = defineProps<{
+  capes: Cape[]
+}>()
+
+const sortedCapes = computed(() => {
+  return [...props.capes].sort((a, b) => {
+    const nameA = (a.name || '').toLowerCase()
+    const nameB = (b.name || '').toLowerCase()
+    return nameA.localeCompare(nameB)
+  })
+})
+
+const currentSkinId = ref<string | undefined>()
+const currentSkinTexture = ref<string | undefined>()
+const currentSkinVariant = ref<SkinModel>('CLASSIC')
+const currentCapeTexture = computed<string | undefined>(() => currentCape.value?.texture)
+const currentCape = ref<Cape | undefined>()
+
+function show(
+  e: MouseEvent,
+  skinId?: string,
+  selected?: Cape,
+  skinTexture?: string,
+  variant?: SkinModel,
+) {
+  currentSkinId.value = skinId
+  currentSkinTexture.value = skinTexture
+  currentSkinVariant.value = variant || 'CLASSIC'
+  currentCape.value = selected
+  modal.value?.show(e)
+}
+
+function select() {
+  emit('select', currentCape.value)
+  hide()
+}
+
+function hide() {
+  modal.value?.hide()
+  emit('cancel')
+}
+
+function updateSelectedCape(cape: Cape | undefined) {
+  currentCape.value = cape
+}
+
+function onModalHide() {
+  emit('cancel')
+}
+
+defineExpose({
+  show,
+  hide,
+})
+</script>
+<template>
+  <ModalWrapper ref="modal" @on-hide="onModalHide">
+    <template #title>
+      <div class="flex flex-col">
+        <span class="text-lg font-extrabold text-heading">Change cape</span>
+      </div>
+    </template>
+    <div class="flex flex-col md:flex-row gap-6">
+      <div class="max-h-[25rem] h-[25rem] w-[16rem] min-w-[16rem] overflow-hidden relative">
+        <div class="absolute top-[-4rem] left-0 h-[32rem] w-[16rem] flex-shrink-0">
+          <SkinPreviewRenderer
+            v-if="currentSkinTexture"
+            :slim-model-src="slimModelUrl"
+            :wide-model-src="wideModelUrl"
+            :cape-model-src="capeModelUrl"
+            :cape-src="currentCapeTexture"
+            :texture-src="currentSkinTexture"
+            :variant="currentSkinVariant"
+            :scale="1.4"
+            :fov="50"
+            :initial-rotation="Math.PI + Math.PI / 8"
+            class="h-full w-full"
+          />
+        </div>
+      </div>
+
+      <div class="flex flex-col gap-4 w-full my-auto">
+        <ScrollablePanel class="max-h-[20rem] max-w-[30rem] mb-5 h-full">
+          <div class="flex flex-wrap gap-2 justify-center content-start overflow-y-auto h-full">
+            <CapeLikeTextButton
+              tooltip="No Cape"
+              :highlighted="!currentCape"
+              @click="updateSelectedCape(undefined)"
+            >
+              <template #icon>
+                <XIcon />
+              </template>
+              <span>None</span>
+            </CapeLikeTextButton>
+            <CapeButton
+              v-for="cape in sortedCapes"
+              :id="cape.id"
+              :key="cape.id"
+              :name="cape.name"
+              :texture="cape.texture"
+              :selected="currentCape?.id === cape.id"
+              @select="updateSelectedCape(cape)"
+            />
+          </div>
+        </ScrollablePanel>
+      </div>
+    </div>
+    <div class="flex gap-2 items-center">
+      <ButtonStyled color="brand">
+        <button @click="select">
+          <CheckIcon />
+          Select
+        </button>
+      </ButtonStyled>
+      <ButtonStyled>
+        <button @click="hide">
+          <XIcon />
+          Cancel
+        </button>
+      </ButtonStyled>
+    </div>
+  </ModalWrapper>
+</template>
--- a/apps/app-frontend/src/components/ui/skin/UploadSkinModal.vue
+++ b/apps/app-frontend/src/components/ui/skin/UploadSkinModal.vue
@@ -0,0 +1,140 @@
+<template>
+  <ModalWrapper ref="modal" @on-hide="hide(true)">
+    <template #title>
+      <span class="text-lg font-extrabold text-contrast"> Upload skin texture </span>
+    </template>
+    <div class="relative">
+      <div
+        class="border-2 border-dashed border-highlight-gray rounded-xl h-[173px] flex flex-col items-center justify-center p-8 cursor-pointer bg-button-bg hover:bg-button-hover transition-colors relative"
+        @click="triggerFileInput"
+      >
+        <p class="mx-auto mb-0 text-primary font-bold text-lg text-center flex items-center gap-2">
+          <UploadIcon /> Select skin texture file
+        </p>
+        <p class="mx-auto mt-0 text-secondary text-sm text-center">
+          Drag and drop or click here to browse
+        </p>
+        <input
+          ref="fileInput"
+          type="file"
+          accept="image/png"
+          class="hidden"
+          @change="handleInputFileChange"
+        />
+      </div>
+    </div>
+  </ModalWrapper>
+</template>
+
+<script setup lang="ts">
+import { ref, onBeforeUnmount, watch } from 'vue'
+import { UploadIcon } from '@modrinth/assets'
+import { useNotifications } from '@/store/state'
+import { getCurrentWebview } from '@tauri-apps/api/webview'
+import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
+import { get_dragged_skin_data } from '@/helpers/skins'
+
+const notifications = useNotifications()
+
+const modal = ref()
+const fileInput = ref<HTMLInputElement>()
+const unlisten = ref<() => void>()
+const modalVisible = ref(false)
+
+const emit = defineEmits<{
+  (e: 'uploaded', data: ArrayBuffer): void
+  (e: 'canceled'): void
+}>()
+
+function show(e?: MouseEvent) {
+  modal.value?.show(e)
+  modalVisible.value = true
+  setupDragDropListener()
+}
+
+function hide(emitCanceled = false) {
+  modal.value?.hide()
+  modalVisible.value = false
+  cleanupDragDropListener()
+  resetState()
+  if (emitCanceled) {
+    emit('canceled')
+  }
+}
+
+function resetState() {
+  if (fileInput.value) fileInput.value.value = ''
+}
+
+function triggerFileInput() {
+  fileInput.value?.click()
+}
+
+async function handleInputFileChange(e: Event) {
+  const files = (e.target as HTMLInputElement).files
+  if (!files || files.length === 0) {
+    return
+  }
+  const file = files[0]
+  const buffer = await file.arrayBuffer()
+  await processData(buffer)
+}
+
+async function setupDragDropListener() {
+  try {
+    if (modalVisible.value) {
+      await cleanupDragDropListener()
+      unlisten.value = await getCurrentWebview().onDragDropEvent(async (event) => {
+        if (event.payload.type !== 'drop') {
+          return
+        }
+
+        if (!event.payload.paths || event.payload.paths.length === 0) {
+          return
+        }
+
+        const filePath = event.payload.paths[0]
+
+        try {
+          const data = await get_dragged_skin_data(filePath)
+          await processData(data.buffer)
+        } catch (error) {
+          notifications.addNotification({
+            title: 'Error processing file',
+            text: error instanceof Error ? error.message : 'Failed to read the dropped file.',
+            type: 'error',
+          })
+        }
+      })
+    }
+  } catch (error) {
+    console.error('Failed to set up drag and drop listener:', error)
+  }
+}
+
+async function cleanupDragDropListener() {
+  if (unlisten.value) {
+    unlisten.value()
+    unlisten.value = undefined
+  }
+}
+
+async function processData(buffer: ArrayBuffer) {
+  emit('uploaded', buffer)
+  hide()
+}
+
+watch(modalVisible, (isVisible) => {
+  if (isVisible) {
+    setupDragDropListener()
+  } else {
+    cleanupDragDropListener()
+  }
+})
+
+onBeforeUnmount(() => {
+  cleanupDragDropListener()
+})
+
+defineExpose({ show, hide })
+</script>
--- a/apps/app-frontend/src/components/ui/world/InstanceItem.vue
+++ b/apps/app-frontend/src/components/ui/world/InstanceItem.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import type { Dayjs } from 'dayjs'
 import dayjs from 'dayjs'
 import {
  EyeIcon,
@@ -42,6 +43,7 @@ const emit = defineEmits<{

 const props = defineProps<{
  instance: GameInstance
+  last_played: Dayjs
 }>()

 const loadingModpack = ref(!!props.instance.linked_data)
@@ -147,12 +149,12 @@ onUnmounted(() => {
                : null
            "
            class="w-fit shrink-0"
-            :class="{ 'cursor-help smart-clickable:allow-pointer-events': instance.last_played }"
+            :class="{ 'cursor-help smart-clickable:allow-pointer-events': last_played }"
          >
-            <template v-if="instance.last_played">
+            <template v-if="last_played">
              {{
                formatMessage(commonMessages.playedLabel, {
-                  time: formatRelativeTime(instance.last_played.toISOString()),
+                  time: formatRelativeTime(last_played.toISOString?.()),
                })
              }}
            </template>
--- a/apps/app-frontend/src/components/ui/world/RecentWorldsList.vue
+++ b/apps/app-frontend/src/components/ui/world/RecentWorldsList.vue
@@ -84,7 +84,7 @@ async function populateJumpBackIn() {

      worldItems.push({
        type: 'world',
-        last_played: dayjs(world.last_played),
+        last_played: dayjs(world.last_played ?? 0),
        world: world,
        instance: instance,
      })
@@ -138,13 +138,13 @@ async function populateJumpBackIn() {

    instanceItems.push({
      type: 'instance',
-      last_played: dayjs(instance.last_played),
+      last_played: dayjs(instance.last_played ?? 0),
      instance: instance,
    })
  }

  const items: JumpBackInItem[] = [...worldItems, ...instanceItems]
-  items.sort((a, b) => dayjs(b.last_played).diff(dayjs(a.last_played)))
+  items.sort((a, b) => dayjs(b.last_played ?? 0).diff(dayjs(a.last_played ?? 0)))
  jumpBackInItems.value = items
    .filter((item, index) => index < MIN_JUMP_BACK_IN || item.last_played.isAfter(TWO_WEEKS_AGO))
    .slice(0, MAX_JUMP_BACK_IN)
@@ -291,7 +291,7 @@ onUnmounted(() => {
          "
          @stop="() => stopInstance(item.instance.path)"
        />
-        <InstanceItem v-else :instance="item.instance" />
+        <InstanceItem v-else :instance="item.instance" :last_played="item.last_played" />
      </template>
    </div>
  </div>