From cff3c72f9482e9a95a8990038d21c7e7c82b1ac7 Mon Sep 17 00:00:00 2001
From: ToBinio <Tobias.frischmann1@gmail.com>
Date: Thu, 10 Jul 2025 00:59:59 +0200
Subject: [PATCH] feat(theseus): add snapPoints for memory sliders (#1275)

* feat: add snapPoints for memory sliders

* fix lint

* Reapply changes

* Hide snap point display when disabled

* fix unused imports

---------

Co-authored-by: Prospector <prospectordev@gmail.com>
---
 .../ui/instance_settings/JavaSettings.vue     |  6 ++++--
 .../ui/settings/DefaultInstanceSettings.vue   |  7 ++++---
 .../src/composables/useMemorySlider.js        | 21 +++++++++++++++++++
 packages/ui/src/components/base/Slider.vue    |  2 +-
 4 files changed, 30 insertions(+), 6 deletions(-)
 create mode 100644 apps/app-frontend/src/composables/useMemorySlider.js

diff --git a/apps/app-frontend/src/components/ui/instance_settings/JavaSettings.vue b/apps/app-frontend/src/components/ui/instance_settings/JavaSettings.vue
index 7867791a6..cd1b58d3d 100644
--- 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">
diff --git a/apps/app-frontend/src/components/ui/settings/DefaultInstanceSettings.vue b/apps/app-frontend/src/components/ui/settings/DefaultInstanceSettings.vue
index ac43fb484..4b6a91bfb 100644
--- 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"
     />
 
diff --git a/apps/app-frontend/src/composables/useMemorySlider.js b/apps/app-frontend/src/composables/useMemorySlider.js
new file mode 100644
index 000000000..c52f457e0
--- /dev/null
+++ b/apps/app-frontend/src/composables/useMemorySlider.js
@@ -0,0 +1,21 @@
+import { ref, computed } from 'vue'
+import { get_max_memory } from '@/helpers/jre.js'
+import { handleError } from '@/store/notifications.js'
+
+export default async function () {
+  const maxMemory = ref(Math.floor((await get_max_memory().catch(handleError)) / 1024))
+
+  const snapPoints = computed(() => {
+    let points = []
+    let memory = 2048
+
+    while (memory <= maxMemory.value) {
+      points.push(memory)
+      memory *= 2
+    }
+
+    return points
+  })
+
+  return { maxMemory, snapPoints }
+}
diff --git a/packages/ui/src/components/base/Slider.vue b/packages/ui/src/components/base/Slider.vue
index 48c43c3e5..522ff5a1f 100644
--- a/packages/ui/src/components/base/Slider.vue
+++ b/packages/ui/src/components/base/Slider.vue
@@ -8,7 +8,7 @@
               v-for="snapPoint in snapPoints"
               :key="snapPoint"
               class="snap-point"
-              :class="{ green: snapPoint <= currentValue }"
+              :class="{ green: snapPoint <= currentValue, 'opacity-0': disabled }"
               :style="{ left: ((snapPoint - min) / (max - min)) * 100 + '%' }"
             ></div>
           </div>