Merge branch 'beta' into release

2025-07-24 16:39:31 +03:00
parent 5fd8c38c1c 634000cdb6
commit f90998157d
218 changed files with 8578 additions and 935 deletions
--- a/apps/app-frontend/src/components/ui/AccountsCard.vue
+++ b/apps/app-frontend/src/components/ui/AccountsCard.vue
@@ -1,17 +1,9 @@
 <template>
-  <div
-    v-if="mode !== 'isolated'"
-    ref="button"
+  <div v-if="mode !== 'isolated'" ref="button"
    class="button-base mt-2 px-3 py-2 bg-button-bg rounded-xl flex items-center gap-2"
-    :class="{ expanded: mode === 'expanded' }"
-    @click="toggleMenu"
-  >
-    <Avatar
-      size="36px"
-      :src="
-        selectedAccount ? avatarUrl : 'https://launcher-files.modrinth.com/assets/steve_head.png'
-      "
-    />
+    :class="{ expanded: mode === 'expanded' }" @click="toggleMenu">
+    <Avatar size="36px" :src="selectedAccount ? avatarUrl : 'https://launcher-files.modrinth.com/assets/steve_head.png'
+      " />
    <div class="flex flex-col w-full">
      <span>
        <component :is="getAccountType(selectedAccount)" v-if="selectedAccount" class="vector-icon" />
@@ -32,31 +24,23 @@
          </h4>
          <p>Selected</p>
        </div>
-        <Button
-          v-tooltip="'Log out'"
-          icon-only
-          color="raised"
-          @click="logout(selectedAccount.profile.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'"
-          :disabled="loginDisabled"
-          icon-only
-          color="primary"
-          @click="login()"
-        >
-          <LogInIcon v-if="!loginDisabled" />
+        <Button v-tooltip="'Log via Microsoft'" :disabled="microsoftLoginDisabled" icon-only @click="login()">
+          <MicrosoftIcon v-if="!microsoftLoginDisabled" />
          <SpinnerIcon v-else class="animate-spin" />
-          <MicrosoftIcon/>
        </Button>
-        <Button v-tooltip="'Add offline'" icon-only @click="tryOfflineLogin()">
+        <Button v-tooltip="'Add offline account'" icon-only @click="showOfflineLoginModal()">
          <PirateIcon />
        </Button>
+        <Button v-tooltip="'Log via Ely.by'" icon-only @click="showElybyLoginModal()">
+          <ElyByIcon v-if="!elybyLoginDisabled" />
+          <SpinnerIcon v-else class="animate-spin" />
+        </Button>
      </div>
      <div v-if="displayAccounts.length > 0" class="account-group">
        <div v-for="account in displayAccounts" :key="account.profile.id" class="account-row">
@@ -73,53 +57,135 @@
        </div>
      </div>
      <div v-if="accounts.length > 0" class="login-section account centered">
-        <Button v-tooltip="'Log in'" icon-only @click="login()">
-          <MicrosoftIcon />
+        <Button v-tooltip="'Log via Microsoft'" icon-only @click="login()">
+          <MicrosoftIcon v-if="!microsoftLoginDisabled" />
+          <SpinnerIcon v-else class="animate-spin" />
        </Button>
-        <Button v-tooltip="'Add offline'" icon-only @click="tryOfflineLogin()">
+        <Button v-tooltip="'Add offline account'" icon-only @click="showOfflineLoginModal()">
          <PirateIcon />
        </Button>
+        <Button v-tooltip="'Log via Ely.by'" icon-only @click="showElybyLoginModal()">
+          <ElyByIcon v-if="!elybyLoginDisabled" />
+          <SpinnerIcon v-else class="animate-spin" />
+        </Button>
      </div>
    </Card>
  </transition>
-  <ModalWrapper ref="loginOfflineModal" class="modal" header="Add new offline account">
-    <div class="modal-body">
-      <div class="label">Enter offline username</div>
-      <input type="text" v-model="playerName" placeholder="Provide offline player name" />
-      <Button icon-only color="secondary" @click="offlineLoginFinally()">
-        Continue
-      </Button>
+  <ModalWrapper ref="addElybyModal" class="modal" header="Authenticate with Ely.by">
+    <ModalWrapper ref="requestElybyTwoFactorCodeModal" class="modal"
+      header="Ely.by requested 2FA code for authentication">
+      <div class="flex flex-col gap-4 px-6 py-5">
+        <label class="label">Enter your 2FA code</label>
+        <input v-model="elybyTwoFactorCode" type="text" placeholder="Your 2FA code here..." class="input" />
+        <div class="mt-6 ml-auto">
+          <Button icon-only color="primary" class="continue-button" @click="addElybyProfile()">
+            Continue
+          </Button>
+        </div>
+      </div>
+    </ModalWrapper>
+    <div class="flex flex-col gap-4 px-6 py-5">
+      <label class="label">Enter your player name or email (preferred)</label>
+      <input v-model="elybyLogin" type="text" placeholder="Your player name or email here..." class="input" />
+      <label class="label">Enter your password</label>
+      <input v-model="elybyPassword" type="password" placeholder="Your password here..." class="input" />
+      <div class="mt-6 ml-auto">
+        <Button icon-only color="primary" class="continue-button" @click="addElybyProfile()">
+          Login
+        </Button>
+      </div>
    </div>
  </ModalWrapper>
-  <ModalWrapper ref="loginErrorModal" class="modal" header="Error while proceed">
-    <div class="modal-body">
-      <div class="label">Error occurred while adding offline account</div>
-      <Button color="primary" @click="retryOfflineLogin()">
-        Try again
-      </Button>
+  <ModalWrapper ref="addOfflineModal" class="modal" header="Add new offline account">
+    <div class="flex flex-col gap-4 px-6 py-5">
+      <label class="label">Enter your player name</label>
+      <input v-model="offlinePlayerName" type="text" placeholder="Your player name here..." class="input" />
+      <div class="mt-6 ml-auto">
+        <Button icon-only color="primary" class="continue-button" @click="addOfflineProfile()">
+          Login
+        </Button>
+      </div>
    </div>
  </ModalWrapper>
-  <ModalWrapper ref="unexpectedErrorModal" class="modal" header="Ошибка">
+  <ModalWrapper 
+    ref="authenticationElybyErrorModal"
+    class="modal"
+    header="Error while proceeding authentication event with Ely.by">
+    <div class="flex flex-col gap-4 px-6 py-5">
+      <label class="text-base font-medium text-red-700">
+        An error occurred while logging in.
+      </label>
+
+      <div class="mt-6 ml-auto">
+        <Button color="primary" class="retry-button" @click="retryAddElybyProfile">
+          Try again
+        </Button>
+      </div>
+    </div>
+  </ModalWrapper>
+  <ModalWrapper ref="inputElybyErrorModal" class="modal" header="Error while proceeding input event with Ely.by">
+    <div class="flex flex-col gap-4 px-6 py-5">
+      <label class="text-base font-medium text-red-700">
+        An error occurred while adding the Ely.by account. Please follow the instructions below.
+      </label>
+
+      <ul class="list-disc list-inside text-sm space-y-1">
+        <li>Check that you have entered the correct player name or email.</li>
+        <li>Check that you have entered the correct password.</li>
+      </ul>
+
+      <div class="mt-6 ml-auto">
+        <Button color="primary" class="retry-button" @click="retryAddElybyProfile">
+          Try again
+        </Button>
+      </div>
+    </div>
+  </ModalWrapper>
+  <ModalWrapper ref="inputErrorModal" class="modal" header="Error while proceeding input event with offline account">
+    <div class="flex flex-col gap-4 px-6 py-5">
+      <label class="text-base font-medium text-red-700">
+        An error occurred while adding the offline account. Please follow the instructions below.
+      </label>
+
+      <ul class="list-disc list-inside text-sm space-y-1">
+        <li>Check that you have entered the correct player name.</li>
+        <li>
+          Player name must be at least {{ minOfflinePlayerNameLength }} characters long and no more than
+          {{ maxOfflinePlayerNameLength }} characters.
+        </li>
+      </ul>
+
+      <div class="mt-6 ml-auto">
+        <Button color="primary" class="retry-button" @click="retryAddOfflineProfile">
+          Try again
+        </Button>
+      </div>
+    </div>
+  </ModalWrapper>
+  <ModalWrapper ref="exceptionErrorModal" class="modal" header="Unexpected error occurred">
    <div class="modal-body">
-      <div class="label">Unexcepted error</div>
+      <label class="label">An unexpected error has occurred. Please try again later.</label>
    </div>
  </ModalWrapper>
 </template>

 <script setup>
-import { 
+import {
  DropdownIcon,
-  PlusIcon,
  TrashIcon,
-  LogInIcon,
  PirateIcon as Offline,
  MicrosoftIcon as License,
+  ElyByIcon as Elyby,
  MicrosoftIcon,
  PirateIcon,
-  SpinnerIcon } from '@modrinth/assets'
+  ElyByIcon,
+  SpinnerIcon
+} from '@modrinth/assets'
 import { Avatar, Button, Card } from '@modrinth/ui'
 import { ref, computed, onMounted, onBeforeUnmount, onUnmounted } from 'vue'
 import {
+  elyby_auth_authenticate,
+  elyby_login,
  offline_login,
  users,
  remove_user,
@@ -146,48 +212,180 @@ defineProps({
 const emit = defineEmits(['change'])

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

-async function tryOfflineLogin() { // [AR] Feature
-  loginOfflineModal.value.show()
+// [AR] • Feature
+const clientToken = "astralrinth"
+const addOfflineModal = ref(null)
+const addElybyModal = ref(null)
+const requestElybyTwoFactorCodeModal = ref(null)
+const authenticationElybyErrorModal = ref(null)
+const inputElybyErrorModal = ref(null)
+const inputErrorModal = ref(null)
+const exceptionErrorModal = ref(null)
+const offlinePlayerName = ref('')
+const elybyLogin = ref('')
+const elybyPassword = ref('')
+const elybyTwoFactorCode = ref('')
+const minOfflinePlayerNameLength = 2
+const maxOfflinePlayerNameLength = 20
+
+// [AR] • Feature
+function getAccountType(account) {
+  switch (account.account_type) {
+    case 'microsoft':
+      return License
+    case 'pirate':
+      return Offline
+    case 'elyby':
+      return Elyby
+  }
 }

-async function offlineLoginFinally() { // [AR] Feature
-  const name = playerName.value
-  if (name.length > 1 && name.length < 20 && name !== '') {
-    const loggedIn = await offline_login(name).catch(handleError)
-    loginOfflineModal.value.hide()
-    if (loggedIn) {
-      await setAccount(loggedIn)
+// [AR] • Feature
+function showOfflineLoginModal() {
+  addOfflineModal.value?.show()
+}
+
+// [AR] • Feature
+function showElybyLoginModal() {
+  addElybyModal.value?.show()
+}
+
+// [AR] • Feature
+function retryAddOfflineProfile() {
+  inputErrorModal.value?.hide()
+  clearOfflineFields()
+  showOfflineLoginModal()
+}
+
+// [AR] • Feature
+function retryAddElybyProfile() {
+  authenticationElybyErrorModal.value?.hide()
+  inputElybyErrorModal.value?.hide()
+  clearElybyFields()
+  showElybyLoginModal()
+}
+
+// [AR] • Feature
+function clearElybyFields() {
+  elybyLogin.value = ''
+  elybyPassword.value = ''
+  elybyTwoFactorCode.value = ''
+}
+
+// [AR] • Feature
+function clearOfflineFields() {
+  offlinePlayerName.value = ''
+}
+
+// [AR] • Feature
+async function addOfflineProfile() {
+  const name = offlinePlayerName.value.trim()
+  const isValidName = name.length >= minOfflinePlayerNameLength && name.length <= maxOfflinePlayerNameLength
+
+  if (!isValidName) {
+    addOfflineModal.value?.hide()
+    inputErrorModal.value?.show()
+    clearOfflineFields()
+    return
+  }
+
+  try {
+    const result = await offline_login(name)
+
+    addOfflineModal.value?.hide()
+
+    if (result) {
+      await setAccount(result)
      await refreshValues()
    } else {
-      unexpectedErrorModal.value.show()
+      exceptionErrorModal.value?.show()
    }
-    playerName.value = ''
-  } else {
-    playerName.value = ''
-    loginOfflineModal.value.hide()
-    loginErrorModal.value.show()
+  } catch (error) {
+    handleError(error)
+    exceptionErrorModal.value?.show()
+  } finally {
+    clearOfflineFields()
  }
 }

-function retryOfflineLogin() { // [AR] Feature
-  loginErrorModal.value.hide()
-  tryOfflineLogin()
-}
+// [AR] • Feature
+async function addElybyProfile() {
+  if (!elybyLogin.value || !elybyPassword.value) {
+    addElybyModal.value?.hide()
+    inputElybyErrorModal.value?.show()
+    clearElybyFields()
+    return
+  }
+  elybyLoginDisabled.value = true

-function getAccountType(account) { // [AR] Feature
-  if (account.access_token != "null" && account.access_token != null && account.access_token != "") {
-    return License
-  } else {
-    return Offline
+  const login = elybyLogin.value.trim()
+  let password = elybyPassword.value.trim()
+  const twoFactorCode = elybyTwoFactorCode.value.trim()
+  if (password && twoFactorCode) {
+    password = `${password}:${twoFactorCode}`
+  }
+
+  try {
+    const raw_result = await elyby_auth_authenticate(
+      login,
+      password,
+      clientToken
+    )
+
+    const json_data = JSON.parse(raw_result)
+
+    console.log(json_data?.error)
+    console.log(json_data?.errorMessage)
+
+    if (!json_data.accessToken) {
+      if (
+        json_data.error === 'ForbiddenOperationException' &&
+        json_data.errorMessage?.includes('two factor')
+      ) {
+        requestElybyTwoFactorCodeModal.value?.show()
+        return
+      }
+
+      addElybyModal.value?.hide()
+      requestElybyTwoFactorCodeModal.value?.hide()
+      authenticationElybyErrorModal.value?.show()
+      return
+    }
+
+    const accessToken = json_data.accessToken
+    const selectedProfileId = convertRawStringToUUIDv4(json_data.selectedProfile.id)
+    const selectedProfileName = json_data.selectedProfile.name
+
+    const result = await elyby_login(selectedProfileId, selectedProfileName, accessToken)
+
+    addElybyModal.value?.hide()
+    requestElybyTwoFactorCodeModal.value?.hide()
+
+    clearElybyFields()
+
+    await setAccount(result)
+    await refreshValues()
+  } catch (err) {
+    handleError(err)
+    exceptionErrorModal.value?.show()
+  } finally {
+    elybyLoginDisabled.value = false
  }
 }
+
+// [AR] • Feature
+function convertRawStringToUUIDv4(rawId) {
+  if (rawId.length !== 32) {
+    console.warn('Invalid UUID string:', rawId)
+    return rawId
+  }
+  return `${rawId.slice(0, 8)}-${rawId.slice(8, 12)}-${rawId.slice(12, 16)}-${rawId.slice(16, 20)}-${rawId.slice(20)}`
+}
+
 const equippedSkin = ref(null)
 const headUrlCache = ref(new Map())

@@ -213,13 +411,13 @@ async function refreshValues() {
 }

 function setLoginDisabled(value) {
-  loginDisabled.value = value
+  microsoftLoginDisabled.value = value
 }

 defineExpose({
  refreshValues,
  setLoginDisabled,
-  loginDisabled,
+  loginDisabled: microsoftLoginDisabled,
 })
 await refreshValues()

@@ -265,7 +463,7 @@ async function setAccount(account) {
 }

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

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

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

 const logout = async (id) => {
--- a/apps/app-frontend/src/components/ui/InstanceCreationModal.vue
+++ b/apps/app-frontend/src/components/ui/InstanceCreationModal.vue
@@ -320,12 +320,16 @@ const [
  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()),
+      ref(
+        value
+          .filter((item) => item.supported_project_types.includes('modpack'))
+          .map((item) => item.name.toLowerCase()),
+      ),
    )
-    .then(ref)
-    .catch(handleError),
+    .catch((err) => {
+      handleError(err)
+      return ref([])
+    }),
 ])
 loaders.value.unshift('vanilla')

--- a/apps/app-frontend/src/components/ui/instance_settings/InstallationSettings.vue
+++ b/apps/app-frontend/src/components/ui/instance_settings/InstallationSettings.vue
@@ -26,6 +26,7 @@ import {
  type Version,
 } from '@modrinth/utils'
 import ConfirmModalWrapper from '@/components/ui/modal/ConfirmModalWrapper.vue'
+import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
 import { get_project, get_version_many } from '@/helpers/cache'
 import ModpackVersionModal from '@/components/ui/ModpackVersionModal.vue'
 import dayjs from 'dayjs'
@@ -35,6 +36,11 @@ import type {
  Manifest,
 } from '../../../helpers/types'

+import { initAuthlibPatching } from '@/helpers/utils.js'
+const authLibPatchingModal = ref(null)
+const isAuthLibPatchedSuccess = ref(false)
+const isAuthLibPatching = ref(false)
+
 const { formatMessage } = useVIntl()

 const repairConfirmModal = ref()
@@ -447,9 +453,43 @@ const messages = defineMessages({
    defaultMessage: 'reinstall',
  },
 })
+
+async function handleInitAuthLibPatching(ismojang: boolean) {
+  isAuthLibPatching.value = true
+  let state = false
+  let instance_path =  props.instance.loader_version != null ? props.instance.game_version + "-" + props.instance.loader_version : props.instance.game_version
+  try {
+    state = await initAuthlibPatching(instance_path, ismojang)
+  } catch (err) {
+    console.error(err)
+  }
+  isAuthLibPatching.value = false
+  isAuthLibPatchedSuccess.value = state
+  authLibPatchingModal.value.show()
+}
 </script>

 <template>
+  <ModalWrapper
+    ref="authLibPatchingModal"
+    :header="'AuthLib installation report'"
+    :closable="true"
+    @close="authLibPatchingModal.hide()"
+  >
+    <div class="modal-body">
+      <h2 class="text-lg font-bold text-contrast space-y-2">
+        <p class="flex items-center gap-2 neon-text">
+          <span v-if="isAuthLibPatchedSuccess" class="neon-text">
+            AuthLib installation completed successfully! Now you can log in and play!
+          </span>
+          <span v-else class="neon-text">
+            Failed to install AuthLib. It's possible that no compatible AuthLib version was found for the selected game and/or mod loader version.
+            There may also be a problem with accessing resources behind CloudFlare.
+          </span>
+        </p>
+      </h2>
+    </div>
+  </ModalWrapper>
  <ConfirmModalWrapper
    ref="repairConfirmModal"
    :title="formatMessage(messages.repairConfirmTitle)"
@@ -720,6 +760,24 @@ const messages = defineMessages({
          </button>
        </ButtonStyled>
      </div>
+      <h2 class="m-0 mt-4 text-lg font-extrabold text-contrast block">
+        <div v-if="isAuthLibPatching" class="w-6 h-6 cursor-pointer hover:brightness-75 neon-icon pulse">
+          <SpinnerIcon class="size-4 animate-spin" />
+        </div>
+        Auth system (Skins) <span class="text-sm font-bold px-2 bg-brand-highlight text-brand rounded-full">Beta</span>
+      </h2>
+      <div class="mt-4 flex gap-2">
+        <ButtonStyled class="neon-button neon">
+          <button :disabled="isAuthLibPatching" @click="handleInitAuthLibPatching(true)">
+            Install Microsoft
+          </button>
+        </ButtonStyled>
+        <ButtonStyled class="neon-button neon">
+          <button :disabled="isAuthLibPatching" @click="handleInitAuthLibPatching(false) ">
+            Install Ely.By
+          </button>
+        </ButtonStyled>
+      </div>
    </template>
    <template v-else>
      <template v-if="instance.linked_data && instance.linked_data.locked">
@@ -787,3 +845,9 @@ const messages = defineMessages({
    </template>
  </div>
 </template>
+
+<style lang="scss" scoped>
+@import '../../../../../../packages/assets/styles/neon-button.scss';
+@import '../../../../../../packages/assets/styles/neon-text.scss';
+@import '../../../../../../packages/assets/styles/neon-icon.scss';
+</style>
--- a/apps/app-frontend/src/components/ui/instance_settings/JavaSettings.vue
+++ b/apps/app-frontend/src/components/ui/instance_settings/JavaSettings.vue
@@ -6,9 +6,9 @@ import { edit, get_optimal_jre_key } from '@/helpers/profile'
 import { handleError } from '@/store/notifications'
 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.ts'
 import type { InstanceSettingsTabProps, AppSettings, MemorySettings } from '../../../helpers/types'
+import useMemorySlider from '@/composables/useMemorySlider'

 const { formatMessage } = useVIntl()

@@ -34,7 +34,7 @@ const envVars = ref(

 const overrideMemorySettings = ref(!!props.instance.memory)
 const memory = ref(props.instance.memory ?? globalSettings.memory)
-const maxMemory = Math.floor((await get_max_memory().catch(handleError)) / 1024)
+const { maxMemory, snapPoints } = await useMemorySlider()

 const editProfileObject = computed(() => {
  const editProfile: {
@@ -156,6 +156,8 @@ const messages = defineMessages({
      :min="512"
      :max="maxMemory"
      :step="64"
+      :snap-points="snapPoints"
+      :snap-range="512"
      unit="MB"
    />
    <h2 id="project-name" class="mt-4 mb-1 text-lg font-extrabold text-contrast block">
--- a/apps/app-frontend/src/components/ui/modal/AuthGrantFlowWaitModal.vue
+++ b/apps/app-frontend/src/components/ui/modal/AuthGrantFlowWaitModal.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { LogInIcon, SpinnerIcon } from '@modrinth/assets'
+import { ref } from 'vue'
+import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
+
+defineProps({
+  onFlowCancel: {
+    type: Function,
+    default() {
+      return async () => {}
+    },
+  },
+})
+
+const modal = ref()
+
+function show() {
+  modal.value.show()
+}
+
+function hide() {
+  modal.value.hide()
+}
+
+defineExpose({ show, hide })
+</script>
+<template>
+  <ModalWrapper ref="modal" @hide="onFlowCancel">
+    <template #title>
+      <span class="items-center gap-2 text-lg font-extrabold text-contrast">
+        <LogInIcon /> Sign in
+      </span>
+    </template>
+
+    <div class="flex justify-center gap-2">
+      <SpinnerIcon class="w-12 h-12 animate-spin" />
+    </div>
+    <p class="text-sm text-secondary">
+      Please sign in at the browser window that just opened to continue.
+    </p>
+  </ModalWrapper>
+</template>
--- a/apps/app-frontend/src/components/ui/settings/DefaultInstanceSettings.vue
+++ b/apps/app-frontend/src/components/ui/settings/DefaultInstanceSettings.vue
@@ -1,9 +1,8 @@
 <script setup lang="ts">
 import { get, set } from '@/helpers/settings.ts'
 import { ref, watch } from 'vue'
-import { get_max_memory } from '@/helpers/jre'
-import { handleError } from '@/store/notifications'
 import { Slider, Toggle } from '@modrinth/ui'
+import useMemorySlider from '@/composables/useMemorySlider'

 const fetchSettings = await get()
 fetchSettings.launchArgs = fetchSettings.extra_launch_args.join(' ')
@@ -11,7 +10,7 @@ fetchSettings.envVars = fetchSettings.custom_env_vars.map((x) => x.join('=')).jo

 const settings = ref(fetchSettings)

-const maxMemory = ref(Math.floor((await get_max_memory().catch(handleError)) / 1024))
+const { maxMemory, snapPoints } = await useMemorySlider()

 watch(
  settings,
@@ -107,6 +106,8 @@ watch(
      :min="512"
      :max="maxMemory"
      :step="64"
+      :snap-points="snapPoints"
+      :snap-range="512"
      unit="MB"
    />

--- a/apps/app-frontend/src/components/ui/skin/EditSkinModal.vue
+++ b/apps/app-frontend/src/components/ui/skin/EditSkinModal.vue
@@ -118,6 +118,7 @@ import {
  type Cape,
  type SkinModel,
  get_normalized_skin_texture,
+  determineModelType,
 } from '@/helpers/skins.ts'
 import { handleError } from '@/store/notifications'
 import {
@@ -253,7 +254,7 @@ async function showNew(e: MouseEvent, skinTextureUrl: string) {
  mode.value = 'new'
  currentSkin.value = null
  uploadedTextureUrl.value = skinTextureUrl
-  variant.value = 'CLASSIC'
+  variant.value = await determineModelType(skinTextureUrl)
  selectedCape.value = undefined
  visibleCapeList.value = []
  initVisibleCapeList()
--- a/apps/app-frontend/src/components/ui/world/WorldItem.vue
+++ b/apps/app-frontend/src/components/ui/world/WorldItem.vue
@@ -128,6 +128,14 @@ const messages = defineMessages({
    id: 'instance.worlds.game_already_open',
    defaultMessage: 'Instance is already open',
  },
+  noContact: {
+    id: 'instance.worlds.no_contact',
+    defaultMessage: "Server couldn't be contacted",
+  },
+  incompatibleServer: {
+    id: 'instance.worlds.incompatible_server',
+    defaultMessage: 'Server is incompatible',
+  },
  copyAddress: {
    id: 'instance.worlds.copy_address',
    defaultMessage: 'Copy address',
@@ -302,39 +310,33 @@ const messages = defineMessages({
        </template>
      </div>
      <div class="flex gap-1 justify-end smart-clickable:allow-pointer-events">
-        <template v-if="world.type === 'singleplayer' || serverStatus">
-          <ButtonStyled
-            v-if="(playingWorld || (locked && playingInstance)) && !startingInstance"
-            color="red"
-          >
-            <button @click="emit('stop')">
-              <StopCircleIcon aria-hidden="true" />
-              {{ formatMessage(commonMessages.stopButton) }}
-            </button>
-          </ButtonStyled>
-          <ButtonStyled v-else>
-            <button
-              v-tooltip="
-                serverIncompatible
-                  ? 'Server is incompatible'
+        <ButtonStyled
+          v-if="(playingWorld || (locked && playingInstance)) && !startingInstance"
+          color="red"
+        >
+          <button @click="emit('stop')">
+            <StopCircleIcon aria-hidden="true" />
+            {{ formatMessage(commonMessages.stopButton) }}
+          </button>
+        </ButtonStyled>
+        <ButtonStyled v-else>
+          <button
+            v-tooltip="
+              !serverStatus
+                ? formatMessage(messages.noContact)
+                : serverIncompatible
+                  ? formatMessage(messages.incompatibleServer)
                  : !supportsQuickPlay
                    ? formatMessage(messages.noQuickPlay)
                    : playingOtherWorld || locked
                      ? formatMessage(messages.gameAlreadyOpen)
                      : null
-              "
-              :disabled="!supportsQuickPlay || playingOtherWorld || startingInstance"
-              @click="emit('play')"
-            >
-              <SpinnerIcon v-if="startingInstance && playingWorld" class="animate-spin" />
-              <PlayIcon v-else aria-hidden="true" />
-              {{ formatMessage(commonMessages.playButton) }}
-            </button>
-          </ButtonStyled>
-        </template>
-        <ButtonStyled v-else>
-          <button class="invisible">
-            <PlayIcon aria-hidden="true" />
+            "
+            :disabled="!supportsQuickPlay || playingOtherWorld || startingInstance"
+            @click="emit('play')"
+          >
+            <SpinnerIcon v-if="startingInstance && playingWorld" class="animate-spin" />
+            <PlayIcon v-else aria-hidden="true" />
            {{ formatMessage(commonMessages.playButton) }}
          </button>
        </ButtonStyled>