diff --git a/src/components/SettingsSection.tsx b/src/components/SettingsSection.tsx index ef1a077..5f40435 100644 --- a/src/components/SettingsSection.tsx +++ b/src/components/SettingsSection.tsx @@ -1,9 +1,46 @@ import React, { useState, useEffect } from "react"; -import { MemoryStick, Save, RefreshCcw, Info } from "lucide-react"; +import { Save, RefreshCcw, Info } from "lucide-react"; import { getSettings, updateSettings } from "../lib/saturn"; -import { motion } from "framer-motion"; import { LauncherSettings } from "@/lib/types"; +export type SettingType = "slider" | "toggle" | "input"; + +export interface SettingSchemaItem { + key: keyof LauncherSettings; + label: string; + description?: string; + type: SettingType; + + // Slider-specific + min?: number; + max?: number; + step?: number; + format?: (value: any) => string; + ticks?: number[]; + info?: string; + + // Default value + default: any; +} + +export const settingsSchema: SettingSchemaItem[] = [ + { + key: "max_memory", + label: "Maximum Memory (RAM)", + type: "slider", + min: 1024, + max: 16384, + step: 512, + default: 2048, + + format: (v) => `${(v / 1024).toFixed(1)} GB`, + + ticks: [1024, 4096, 8192, 12288, 16384], + + info: `Allocating too much memory can cause system instability, while too little can lead to performance issues or crashes. 2GB - 8GB is recommended for most users.`, + }, +]; + const SettingsSection: React.FC = () => { const [settings, setSettings] = useState(null); const [isSaving, setIsSaving] = useState(false); @@ -32,11 +69,7 @@ const SettingsSection: React.FC = () => { }; const handleReset = async () => { - // In a real app, this would reset to defaults in the service - const defaultSettings: LauncherSettings = { - max_memory: 4096, - }; - setSettings(defaultSettings); + setSettings(Object.fromEntries(settingsSchema.map((v) => [v.key, v.default])) as LauncherSettings); }; if (!settings) return null; @@ -70,69 +103,82 @@ const SettingsSection: React.FC = () => {
- {/* Memory Allocation */} - -
-
- -
-

Memory Allocation

-
+ {settingsSchema.map((item) => { + const value = settings[item.key]; -
-
- Maximum Memory (RAM) - - {(settings.max_memory / 1024).toFixed(1)} GB - -
- - - setSettings({ - ...settings, - max_memory: parseInt(e.target.value), - }) - } - className="w-full h-2 bg-saturn-border rounded-lg appearance-none cursor-pointer accent-saturn-accent" - /> - -
- {[1024, 4096, 8192, 12288, 16384].map((value) => { - const percent = - (((value - 1024) / (16384 - 1024)) * 100 - 50) * 0.97 + 50; - - return ( - - {value / 1024} GB + return ( +
+
+ {item.label} + {item.format && ( + + {item.format(value)} - ); - })} -
+ )} +
-
- -

- Allocating too much memory can cause system instability, while - too little can lead to performance issues or crashes. 4GB - 8GB - is recommended for most users. -

+ {item.type === "slider" && ( + <> + + setSettings({ + ...settings, + [item.key]: parseInt(e.target.value), + }) + } + className="w-full h-2 bg-saturn-border rounded-lg appearance-none cursor-pointer accent-saturn-accent" + /> + + {/* Tick labels */} + {item.ticks && ( +
+ {item.ticks.map((tick) => { + const percent = + (((tick - item.min!) / (item.max! - item.min!)) * 100 - 50) * + 0.97 + + 50; + + return ( + + {tick / 1024} GB + + ); + })} +
+ )} + + {/* Info box */} + {item.info && ( +
+ +

+ {item.info} +

+
+ )} + + )} + + {item.description && ( +
+ +

+ {item.description} +

+
+ )}
-
- + ); + })}
);