Update separated pharmacokinetic from diagram settings, made both collapsible

src/components/settings.tsx

@@ -18,6 +18,7 @@ import { Label } from './ui/label';
 import { Separator } from './ui/separator';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './ui/select';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './ui/tooltip';
+import { ChevronDown, ChevronUp } from 'lucide-react';
 
 const Settings = ({
   pkParams,
@@ -32,11 +33,20 @@ const Settings = ({
   const { showDayTimeOnXAxis, yAxisMin, yAxisMax, showTemplateDay, simulationDays, displayedDays } = uiSettings;
   const showDayReferenceLines = (uiSettings as any).showDayReferenceLines ?? true;
 
+  const [isDiagramExpanded, setIsDiagramExpanded] = React.useState(true);
+  const [isPharmacokineticExpanded, setIsPharmacokineticExpanded] = React.useState(true);
+
   return (
+    <div className="space-y-4">
+      {/* Diagram Settings Card */}
       <Card>
-      <CardHeader>
+        <CardHeader className="cursor-pointer pb-3" onClick={() => setIsDiagramExpanded(!isDiagramExpanded)}>
+          <div className="flex items-center justify-between">
             <CardTitle className="text-lg">{t('diagramSettings')}</CardTitle>
+            {isDiagramExpanded ? <ChevronUp className="h-5 w-5" /> : <ChevronDown className="h-5 w-5" />}
+          </div>
         </CardHeader>
+        {isDiagramExpanded && (
           <CardContent className="space-y-4">
             <div className="space-y-2">
               <Label className="font-medium">{t('xAxisTimeFormat')}</Label>
@@ -150,7 +160,7 @@ const Settings = ({
                 <FormNumericInput
                   value={yAxisMax}
                   onChange={val => onUpdateUiSetting('yAxisMax', val)}
-              increment={5}
+                  increment={1}
                   min={0}
                   placeholder={t('auto')}
                   unit="ng/ml"
@@ -185,9 +195,20 @@ const Settings = ({
                 />
               </div>
             </div>
+          </CardContent>
+        )}
+      </Card>
 
-        <Separator className="my-4" />
+      {/* Pharmacokinetic Settings Card */}
-
+      <Card>
+        <CardHeader className="cursor-pointer pb-3" onClick={() => setIsPharmacokineticExpanded(!isPharmacokineticExpanded)}>
+          <div className="flex items-center justify-between">
+            <CardTitle className="text-lg">{t('pharmacokineticsSettings')}</CardTitle>
+            {isPharmacokineticExpanded ? <ChevronUp className="h-5 w-5" /> : <ChevronDown className="h-5 w-5" />}
+          </div>
+        </CardHeader>
+        {isPharmacokineticExpanded && (
+          <CardContent className="space-y-4">
             <h3 className="text-lg font-semibold">{t('dAmphetamineParameters')}</h3>
             <div className="space-y-2">
               <Label className="font-medium">{t('halfLife')}</Label>
@@ -230,9 +251,11 @@ const Settings = ({
                 errorMessage={t('absorptionRateRequired') || 'Absorption rate is required'}
               />
             </div>
+          </CardContent>
+        )}
+      </Card>
 
-        <Separator className="my-4" />
+      {/* Reset Button - Always Visible */}
-
       <Button
         type="button"
         onClick={onReset}
@@ -241,8 +264,7 @@ const Settings = ({
       >
         {t('resetAllSettings')}
       </Button>
-      </CardContent>
+    </div>
-    </Card>
   );
 };
 

src/constants/defaults.ts

@@ -105,6 +105,6 @@ export const getDefaultState = (): AppState => ({
     yAxisMin: '8',
     yAxisMax: '13',
     simulationDays: '5',
-    displayedDays: '5',
+    displayedDays: '2',
   }
 });

src/locales/de.ts

@@ -55,6 +55,7 @@ export const de = {
 
   // Settings
   diagramSettings: "Diagramm-Einstellungen",
+  pharmacokineticsSettings: "Pharmakokinetik-Einstellungen",
   xAxisTimeFormat: "Zeitformat",
   xAxisFormatContinuous: "Fortlaufend",
   xAxisFormatContinuousDesc: "Endlose Sequenz (0h, 6h, 12h...)",
@@ -77,8 +78,9 @@ export const de = {
   conversionHalfLife: "Umwandlungs-Halbwertszeit",
   absorptionRate: "Absorptionsrate",
   faster: "(schneller >)",
-  resetAllSettings: "Alle Einstellungen zurücksetzen",
+  resetAllSettings: "Alle Einstellungen zurücksetzen",  resetDiagramSettings: "Diagramm-Einstellungen zurücksetzen",
-
+  resetPharmacokineticSetting: "Pharmakokinetik-Einstellungen zurücksetzen",
+  resetPlan: "Plan zurücksetzen",
   // Units
   unitMg: "mg",
   unitNgml: "ng/ml",

src/locales/en.ts

@@ -54,6 +54,7 @@ export const en = {
 
   // Settings
   diagramSettings: "Diagram Settings",
+  pharmacokineticsSettings: "Pharmacokinetics Settings",
   xAxisTimeFormat: "Time Format",
   xAxisFormatContinuous: "Continuous",
   xAxisFormatContinuousDesc: "Endless sequence (0h, 6h, 12h...)",
@@ -76,8 +77,9 @@ export const en = {
   conversionHalfLife: "Conversion Half-life",
   absorptionRate: "Absorption Rate",
   faster: "(faster >)",
-  resetAllSettings: "Reset All Settings",
+  resetAllSettings: "Reset All Settings",  resetDiagramSettings: "Reset Diagram Settings",
-
+  resetPharmacokineticSettings: "Reset Pharmacokinetic Settings",
+  resetPlan: "Reset Plan",
   // Units
   unitMg: "mg",
   unitNgml: "ng/ml",