From 9b69ffe8ffbfe215fa25f87a62115fc890c7909e Mon Sep 17 00:00:00 2001
From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com>
Date: Fri, 7 Nov 2025 06:41:33 +0900
Subject: [PATCH] [Refactor/TMP2] Refactor slider logic and appearance settings

- Improve slider logic by adding useMemo for marks calculation and fixing floating point precision issues
- Add loop safety check to prevent infinite loops in createMarks function
- Remove show_label_values prop from TransparencyContainer
- Add proper decimal place handling for slider values
---
 .../config_page_setter/useSettingsLogics.js   | 23 +++++++++++++++----
 .../setting_box/appearance/Appearance.jsx     |  1 -
 2 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/src-ui/logics/configs/config_page_setter/useSettingsLogics.js b/src-ui/logics/configs/config_page_setter/useSettingsLogics.js
index 3e0daabf..d3d7c151 100644
--- a/src-ui/logics/configs/config_page_setter/useSettingsLogics.js
+++ b/src-ui/logics/configs/config_page_setter/useSettingsLogics.js
@@ -220,6 +220,7 @@ export const useSliderLogic = ({
     }
 
     const [ui_value, setUiValue] = useState(current_value.data);
+
     const decimalPlaces = marks_step.toString().includes('.')
         ? marks_step.toString().split('.')[1].length
         : 0;
@@ -228,10 +229,13 @@ export const useSliderLogic = ({
         if (show_label_values && show_label_values.length > 0) {
             return show_label_values.includes(value) ? value : "";
         }
+
         return value.toFixed(decimalPlaces);
     }, [show_label_values, decimalPlaces]);
 
-    const marks = createMarks(min, max, marks_step, labelFormatter);
+    const marks = useMemo(() => {
+        return createMarks(min, max, marks_step, labelFormatter);
+    }, [min, max, marks_step, labelFormatter]);
 
     const onchangeFunction = useCallback((value) => {
         setUiValue(value);
@@ -260,9 +264,20 @@ export const useSliderLogic = ({
 
 const createMarks = (min, max, marks_step = 1, labelFormatter = (value) => value) => {
     const marks = [];
-    for (let value = min; value <= max; value += marks_step) {
-        value = parseFloat(value.toFixed(1));
-        marks.push({ value, label: `${labelFormatter(value)}` });
+    let current_value = min;
+
+    for (let i = 0; current_value <= max; i++) {
+        const fixedValue = parseFloat(current_value.toFixed(10));
+
+        marks.push({ value: fixedValue, label: `${labelFormatter(fixedValue)}` });
+
+        current_value += marks_step;
+        current_value = parseFloat(current_value.toFixed(10));
+
+        if (i > 1000) {
+            console.error("Loop limit exceeded (1000 iterations). createMarks()");
+            break;
+        }
     }
     return marks;
 };
\ No newline at end of file
diff --git a/src-ui/views/app/config_page/setting_section/setting_box/appearance/Appearance.jsx b/src-ui/views/app/config_page/setting_section/setting_box/appearance/Appearance.jsx
index 065da736..c827a91c 100644
--- a/src-ui/views/app/config_page/setting_section/setting_box/appearance/Appearance.jsx
+++ b/src-ui/views/app/config_page/setting_section/setting_box/appearance/Appearance.jsx
@@ -157,7 +157,6 @@ const TransparencyContainer = () => {
             min={40}
             max={100}
             step={10}
-            show_label_values={[40, 60, 80, 100, 120, 140, 160, 180, 200]}
         />
     );
 };
\ No newline at end of file