From 2d6551fd35e3aba8ff88f259ceeb6078215894cd Mon Sep 17 00:00:00 2001
From: Henry Winkel <Henry-Winkel@web.de>
Date: Sat, 16 May 2026 21:01:08 +0200
Subject: [PATCH] fix: improve TradingSettings validation, debounce,
 accessibility, and cleanup

---
 app/components/TradingSettings.tsx | 56 +++++++++++++++++++++---------
 1 file changed, 39 insertions(+), 17 deletions(-)

diff --git a/app/components/TradingSettings.tsx b/app/components/TradingSettings.tsx
index 36409c4..5255533 100644
--- a/app/components/TradingSettings.tsx
+++ b/app/components/TradingSettings.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import { useState, useEffect, useRef } from "react";
 
 interface TradingSettingsProps {
   settings: Record<string, any>;
@@ -13,6 +13,8 @@ export default function TradingSettings({ settings, onSave, saveError }: Trading
   const [stopLossPercent, setStopLossPercent] = useState(settings["trading.stopLossPercent"] ?? 3);
   const [riskMethod, setRiskMethod] = useState(settings["trading.riskMethod"] ?? "percentage");
 
+  const saveTimersRef = useRef<Map<string, ReturnType<typeof setTimeout>>>(new Map());
+
   useEffect(() => {
     setMaxLossPercent(settings["trading.maxLossPercent"] ?? 2);
     setPositionSizePercent(settings["trading.positionSizePercent"] ?? 10);
@@ -21,10 +23,25 @@ export default function TradingSettings({ settings, onSave, saveError }: Trading
     setRiskMethod(settings["trading.riskMethod"] ?? "percentage");
   }, [settings]);
 
-  const save = async (key: string, value: any) => {
-    await onSave(key, value);
+  const debouncedSave = (key: string, value: any) => {
+    if (saveTimersRef.current.has(key)) {
+      clearTimeout(saveTimersRef.current.get(key)!);
+    }
+    const timer = setTimeout(() => {
+      onSave(key, value);
+      saveTimersRef.current.delete(key);
+    }, 300);
+    saveTimersRef.current.set(key, timer);
   };
 
+  useEffect(() => {
+    return () => {
+      saveTimersRef.current.forEach((timer) => clearTimeout(timer));
+    };
+  }, []);
+
+  const clamp = (value: number, min: number, max: number) => Math.min(Math.max(value, min), max);
+
   return (
     <div className="space-y-6">
       <div>
@@ -38,17 +55,18 @@ export default function TradingSettings({ settings, onSave, saveError }: Trading
 
       <div className="space-y-4">
         <div>
-          <label className="block text-sm font-medium text-gray-700 mb-1">Max Loss %</label>
+          <label htmlFor="max-loss" className="block text-sm font-medium text-gray-700 mb-1">Max Loss %</label>
           <input
+            id="max-loss"
             type="number"
             min="0.1"
             max="100"
             step="0.1"
             value={maxLossPercent}
             onChange={(e) => {
-              const v = parseFloat(e.target.value) || 0;
+              const v = clamp(parseFloat(e.target.value) || 0.1, 0.1, 100);
               setMaxLossPercent(v);
-              save("trading.maxLossPercent", v);
+              debouncedSave("trading.maxLossPercent", v);
             }}
             className="w-32 border border-gray-300 rounded-lg px-4 py-2.5 text-gray-900 focus:ring-2 focus:ring-blue-500"
           />
@@ -56,17 +74,18 @@ export default function TradingSettings({ settings, onSave, saveError }: Trading
         </div>
 
         <div>
-          <label className="block text-sm font-medium text-gray-700 mb-1">Position Size %</label>
+          <label htmlFor="position-size" className="block text-sm font-medium text-gray-700 mb-1">Position Size %</label>
           <input
+            id="position-size"
             type="number"
             min="1"
             max="100"
             step="1"
             value={positionSizePercent}
             onChange={(e) => {
-              const v = parseInt(e.target.value) || 1;
+              const v = clamp(parseInt(e.target.value) || 1, 1, 100);
               setPositionSizePercent(v);
-              save("trading.positionSizePercent", v);
+              debouncedSave("trading.positionSizePercent", v);
             }}
             className="w-32 border border-gray-300 rounded-lg px-4 py-2.5 text-gray-900 focus:ring-2 focus:ring-blue-500"
           />
@@ -74,17 +93,18 @@ export default function TradingSettings({ settings, onSave, saveError }: Trading
         </div>
 
         <div>
-          <label className="block text-sm font-medium text-gray-700 mb-1">Take Profit %</label>
+          <label htmlFor="take-profit" className="block text-sm font-medium text-gray-700 mb-1">Take Profit %</label>
           <input
+            id="take-profit"
             type="number"
             min="0.1"
             max="100"
             step="0.1"
             value={takeProfitPercent}
             onChange={(e) => {
-              const v = parseFloat(e.target.value) || 0;
+              const v = clamp(parseFloat(e.target.value) || 0.1, 0.1, 100);
               setTakeProfitPercent(v);
-              save("trading.takeProfitPercent", v);
+              debouncedSave("trading.takeProfitPercent", v);
             }}
             className="w-32 border border-gray-300 rounded-lg px-4 py-2.5 text-gray-900 focus:ring-2 focus:ring-blue-500"
           />
@@ -92,17 +112,18 @@ export default function TradingSettings({ settings, onSave, saveError }: Trading
         </div>
 
         <div>
-          <label className="block text-sm font-medium text-gray-700 mb-1">Stop Loss %</label>
+          <label htmlFor="stop-loss" className="block text-sm font-medium text-gray-700 mb-1">Stop Loss %</label>
           <input
+            id="stop-loss"
             type="number"
             min="0.1"
             max="100"
             step="0.1"
             value={stopLossPercent}
             onChange={(e) => {
-              const v = parseFloat(e.target.value) || 0;
+              const v = clamp(parseFloat(e.target.value) || 0.1, 0.1, 100);
               setStopLossPercent(v);
-              save("trading.stopLossPercent", v);
+              debouncedSave("trading.stopLossPercent", v);
             }}
             className="w-32 border border-gray-300 rounded-lg px-4 py-2.5 text-gray-900 focus:ring-2 focus:ring-blue-500"
           />
@@ -110,12 +131,13 @@ export default function TradingSettings({ settings, onSave, saveError }: Trading
         </div>
 
         <div>
-          <label className="block text-sm font-medium text-gray-700 mb-1">Risk Method</label>
+          <label htmlFor="risk-method" className="block text-sm font-medium text-gray-700 mb-1">Risk Method</label>
           <select
+            id="risk-method"
             value={riskMethod}
             onChange={(e) => {
               setRiskMethod(e.target.value);
-              save("trading.riskMethod", e.target.value);
+              debouncedSave("trading.riskMethod", e.target.value);
             }}
             className="w-full border border-gray-300 rounded-lg px-4 py-2.5 text-gray-900 focus:ring-2 focus:ring-blue-500"
           >