From 5865d9dbe536c936cc982a2314395391b19124b5 Mon Sep 17 00:00:00 2001
From: Andreas Weyer <dev@cbaoth.de>
Date: Sat, 29 Nov 2025 18:45:30 +0000
Subject: [PATCH] Update style improvements and minor fixes

---
 src/App.tsx                              |   2 +-
 src/components/deviation-list.tsx        | 108 +++++++++++-----------
 src/components/settings.tsx              |   2 +-
 src/components/simulation-chart.tsx      | 109 ++++++++++++++++++-----
 src/components/ui/form-numeric-input.tsx |   3 +-
 src/hooks/useSimulation.ts               |  12 ++-
 src/utils/suggestions.ts                 |  12 ++-
 7 files changed, 162 insertions(+), 86 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 572ed88..b71b7b4 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -64,7 +64,7 @@ const MedPlanAssistant = () => {
     removeDeviation,
     handleDeviationChange,
     applySuggestion
-  } = useSimulation(appState);
+  } = useSimulation(appState, t);
 
   return (
     <div className="min-h-screen bg-background p-4 sm:p-6 lg:p-8">
diff --git a/src/components/deviation-list.tsx b/src/components/deviation-list.tsx
index 696f88a..e5636a0 100644
--- a/src/components/deviation-list.tsx
+++ b/src/components/deviation-list.tsx
@@ -36,69 +36,71 @@ const DeviationList = ({
       </CardHeader>
       <CardContent className="space-y-2">
         {deviations.map((dev: any, index: number) => (
-          <div key={index} className="flex items-center gap-3 p-3 bg-card rounded-lg border flex-wrap">
-            <Select
-              value={String(dev.dayOffset || 0)}
-              onValueChange={val => onDeviationChange(index, 'dayOffset', parseInt(val, 10))}
-            >
-              <SelectTrigger className="w-28">
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                {[...Array(parseInt(simulationDays, 10) || 1).keys()].map(day => (
-                  <SelectItem key={day} value={String(day)}>
-                    {t.day} {day + 1}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
+          <div key={index} className="relative flex items-start gap-3 p-3 bg-card rounded-lg border flex-wrap">
+            <div className="flex items-center gap-3 flex-1 flex-wrap">
+              <Select
+                value={String(dev.dayOffset || 0)}
+                onValueChange={val => onDeviationChange(index, 'dayOffset', parseInt(val, 10))}
+              >
+                <SelectTrigger className="w-28">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {[...Array(parseInt(simulationDays, 10) || 1).keys()].map(day => (
+                    <SelectItem key={day} value={String(day)}>
+                      {t.day} {day + 1}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
 
-            <FormTimeInput
-              value={dev.time}
-              onChange={newTime => onDeviationChange(index, 'time', newTime)}
-              required={true}
-              errorMessage={t.timeRequired || 'Time is required'}
-            />
+              <FormTimeInput
+                value={dev.time}
+                onChange={newTime => onDeviationChange(index, 'time', newTime)}
+                required={true}
+                errorMessage={t.timeRequired || 'Time is required'}
+              />
 
-            <FormNumericInput
-              value={dev.dose}
-              onChange={newDose => onDeviationChange(index, 'dose', newDose)}
-              increment={doseIncrement}
-              min={0}
-              unit={t.mg}
-              required={true}
-              errorMessage={t.doseRequired || 'Dose is required'}
-            />
+              <FormNumericInput
+                value={dev.dose}
+                onChange={newDose => onDeviationChange(index, 'dose', newDose)}
+                increment={doseIncrement}
+                min={0}
+                unit={t.mg}
+                required={true}
+                errorMessage={t.doseRequired || 'Dose is required'}
+              />
+
+              <TooltipProvider>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <div className="flex items-center gap-2">
+                      <Switch
+                        id={`add_dose_${index}`}
+                        checked={dev.isAdditional}
+                        onCheckedChange={checked => onDeviationChange(index, 'isAdditional', checked)}
+                      />
+                      <Label htmlFor={`add_dose_${index}`} className="text-xs whitespace-nowrap">
+                        {t.additional}
+                      </Label>
+                    </div>
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    <p>{t.additionalTooltip}</p>
+                  </TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
+            </div>
 
             <Button
               type="button"
-              variant="ghost"
+              variant="outline"
               size="icon"
               onClick={() => onRemoveDeviation(index)}
-              className="text-destructive hover:text-destructive"
+              className="absolute top-3 right-3 text-destructive hover:bg-destructive hover:text-destructive-foreground border-destructive/30"
             >
               <X className="h-4 w-4" />
             </Button>
-
-            <TooltipProvider>
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <div className="flex items-center gap-2">
-                    <Switch
-                      id={`add_dose_${index}`}
-                      checked={dev.isAdditional}
-                      onCheckedChange={checked => onDeviationChange(index, 'isAdditional', checked)}
-                    />
-                    <Label htmlFor={`add_dose_${index}`} className="text-xs whitespace-nowrap">
-                      {t.additional}
-                    </Label>
-                  </div>
-                </TooltipTrigger>
-                <TooltipContent>
-                  <p>{t.additionalTooltip}</p>
-                </TooltipContent>
-              </Tooltip>
-            </TooltipProvider>
           </div>
         ))}
 
diff --git a/src/components/settings.tsx b/src/components/settings.tsx
index 836c0c9..80b21a9 100644
--- a/src/components/settings.tsx
+++ b/src/components/settings.tsx
@@ -35,7 +35,7 @@ const Settings = ({
         <CardTitle>{t.advancedSettings}</CardTitle>
       </CardHeader>
       <CardContent className="space-y-4">
-        <div className="flex items-center justify-between">
+        <div className="flex items-center gap-3">
           <Label htmlFor="showDayTimeOnXAxis" className="font-medium">
             {t.show24hTimeAxis}
           </Label>
diff --git a/src/components/simulation-chart.tsx b/src/components/simulation-chart.tsx
index b80a4b8..02f4331 100644
--- a/src/components/simulation-chart.tsx
+++ b/src/components/simulation-chart.tsx
@@ -12,6 +12,27 @@
 import React from 'react';
 import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ReferenceLine, ResponsiveContainer } from 'recharts';
 
+// Chart color scheme
+const CHART_COLORS = {
+  // d-Amphetamine profiles
+  idealDamph: '#2563eb',      // blue-600 (primary, solid, bold)
+  deviatedDamph: '#f59e0b',   // amber-500 (warning, dashed)
+  correctedDamph: '#10b981',  // emerald-500 (success, dash-dot)
+
+  // Lisdexamfetamine profiles
+  idealLdx: '#7c3aed',        // violet-600 (primary, dashed)
+  deviatedLdx: '#f97316',     // orange-500 (warning, dashed)
+  correctedLdx: '#059669',    // emerald-600 (success, dash-dot)
+
+  // Reference lines
+  therapeuticMin: '#22c55e',  // green-500
+  therapeuticMax: '#ef4444',  // red-500
+  dayDivider: '#9ca3af',      // gray-400
+
+  // Tooltip cursor
+  cursor: '#6b7280'           // gray-500
+} as const;
+
 const SimulationChart = ({
   idealProfile,
   deviatedProfile,
@@ -46,11 +67,47 @@ const SimulationChart = ({
     return [domainMin, domainMax];
   }, [yAxisMin, yAxisMax]);
 
+  // Merge all profiles into a single dataset for proper tooltip synchronization
+  const mergedData = React.useMemo(() => {
+    const dataMap = new Map();
+
+    // Add ideal profile data
+    idealProfile?.forEach((point: any) => {
+      dataMap.set(point.timeHours, {
+        timeHours: point.timeHours,
+        idealDamph: point.damph,
+        idealLdx: point.ldx
+      });
+    });
+
+    // Add deviated profile data
+    deviatedProfile?.forEach((point: any) => {
+      const existing = dataMap.get(point.timeHours) || { timeHours: point.timeHours };
+      dataMap.set(point.timeHours, {
+        ...existing,
+        deviatedDamph: point.damph,
+        deviatedLdx: point.ldx
+      });
+    });
+
+    // Add corrected profile data
+    correctedProfile?.forEach((point: any) => {
+      const existing = dataMap.get(point.timeHours) || { timeHours: point.timeHours };
+      dataMap.set(point.timeHours, {
+        ...existing,
+        correctedDamph: point.damph,
+        correctedLdx: point.ldx
+      });
+    });
+
+    return Array.from(dataMap.values()).sort((a, b) => a.timeHours - b.timeHours);
+  }, [idealProfile, deviatedProfile, correctedProfile]);
+
   return (
-    <div className="flex-grow w-full overflow-x-auto">
+    <div className="flex-grow w-full overflow-x-auto overflow-y-hidden">
       <div style={{ width: `${chartWidthPercentage}%`, height: '100%', minWidth: '100%' }}>
         <ResponsiveContainer width="100%" height="100%">
-          <LineChart margin={{ top: 20, right: 20, left: 0, bottom: 5 }}>
+          <LineChart data={mergedData} margin={{ top: 20, right: 20, left: 0, bottom: 5 }}>
             <CartesianGrid strokeDasharray="3 3" />
             <XAxis
               dataKey="timeHours"
@@ -76,14 +133,18 @@ const SimulationChart = ({
             <Tooltip
               formatter={(value: any, name) => [`${typeof value === 'number' ? value.toFixed(1) : value} ${t.ngml}`, name]}
               labelFormatter={(label) => `${t.hour.replace('h', 'Hour')}: ${label}${t.hour}`}
+              wrapperStyle={{ pointerEvents: 'none', zIndex: 200 }}
+              allowEscapeViewBox={{ x: false, y: false }}
+              cursor={{ stroke: CHART_COLORS.cursor, strokeWidth: 1, strokeDasharray: '1 1' }}
+              position={{ y: 0 }}
             />
-            <Legend verticalAlign="top" height={36} />
+            <Legend verticalAlign="top" align="left" height={36} wrapperStyle={{ zIndex: 100, marginLeft: 60 }} />
 
             {(chartView === 'damph' || chartView === 'both') && (
               <ReferenceLine
                 y={parseFloat(therapeuticRange.min) || 0}
                 label={{ value: t.min, position: 'insideTopLeft' }}
-                stroke="green"
+                stroke={CHART_COLORS.therapeuticMin}
                 strokeDasharray="3 3"
                 xAxisId="hours"
               />
@@ -92,7 +153,7 @@ const SimulationChart = ({
               <ReferenceLine
                 y={parseFloat(therapeuticRange.max) || 0}
                 label={{ value: t.max, position: 'insideTopLeft' }}
-                stroke="red"
+                stroke={CHART_COLORS.therapeuticMax}
                 strokeDasharray="3 3"
                 xAxisId="hours"
               />
@@ -103,7 +164,7 @@ const SimulationChart = ({
                 <ReferenceLine
                   key={day}
                   x={day * 24}
-                  stroke="#999"
+                  stroke={CHART_COLORS.dayDivider}
                   strokeDasharray="5 5"
                   xAxisId="hours"
                 />
@@ -113,80 +174,80 @@ const SimulationChart = ({
             {(chartView === 'damph' || chartView === 'both') && (
               <Line
                 type="monotone"
-                data={idealProfile}
-                dataKey="damph"
+                dataKey="idealDamph"
                 name={`${t.dAmphetamine} (Ideal)`}
-                stroke="#3b82f6"
+                stroke={CHART_COLORS.idealDamph}
                 strokeWidth={2.5}
                 dot={false}
                 xAxisId="hours"
+                connectNulls
               />
             )}
             {(chartView === 'ldx' || chartView === 'both') && (
               <Line
                 type="monotone"
-                data={idealProfile}
-                dataKey="ldx"
+                dataKey="idealLdx"
                 name={`${t.lisdexamfetamine} (Ideal)`}
-                stroke="#8b5cf6"
+                stroke={CHART_COLORS.idealLdx}
                 strokeWidth={2}
                 dot={false}
                 strokeDasharray="3 3"
                 xAxisId="hours"
+                connectNulls
               />
             )}
 
             {deviatedProfile && (chartView === 'damph' || chartView === 'both') && (
               <Line
                 type="monotone"
-                data={deviatedProfile}
-                dataKey="damph"
+                dataKey="deviatedDamph"
                 name={`${t.dAmphetamine} (Deviation)`}
-                stroke="#f59e0b"
+                stroke={CHART_COLORS.deviatedDamph}
                 strokeWidth={2}
                 strokeDasharray="5 5"
                 dot={false}
                 xAxisId="hours"
+                connectNulls
               />
             )}
             {deviatedProfile && (chartView === 'ldx' || chartView === 'both') && (
               <Line
                 type="monotone"
-                data={deviatedProfile}
-                dataKey="ldx"
+                dataKey="deviatedLdx"
                 name={`${t.lisdexamfetamine} (Deviation)`}
-                stroke="#f97316"
+                stroke={CHART_COLORS.deviatedLdx}
                 strokeWidth={1.5}
                 strokeDasharray="5 5"
                 dot={false}
                 xAxisId="hours"
+                connectNulls
               />
             )}
 
             {correctedProfile && (chartView === 'damph' || chartView === 'both') && (
               <Line
                 type="monotone"
-                data={correctedProfile}
-                dataKey="damph"
+                dataKey="correctedDamph"
                 name={`${t.dAmphetamine} (Correction)`}
-                stroke="#10b981"
+                stroke={CHART_COLORS.correctedDamph}
                 strokeWidth={2.5}
                 strokeDasharray="3 7"
                 dot={false}
                 xAxisId="hours"
+                connectNulls
               />
             )}
             {correctedProfile && (chartView === 'ldx' || chartView === 'both') && (
               <Line
                 type="monotone"
-                data={correctedProfile}
-                dataKey="ldx"
+                dataKey="correctedLdx"
                 name={`${t.lisdexamfetamine} (Correction)`}
-                stroke="#059669"
+                stroke={CHART_COLORS.correctedLdx}
                 strokeWidth={2}
                 strokeDasharray="3 7"
                 dot={false}
                 xAxisId="hours"
+                connectNulls
               />
             )}
           </LineChart>
diff --git a/src/components/ui/form-numeric-input.tsx b/src/components/ui/form-numeric-input.tsx
index e045479..64973c8 100644
--- a/src/components/ui/form-numeric-input.tsx
+++ b/src/components/ui/form-numeric-input.tsx
@@ -136,7 +136,7 @@ const FormNumericInput = React.forwardRef<HTMLInputElement, NumericInputProps>(
 
     return (
       <div ref={containerRef} className={cn("relative flex items-center gap-2", className)}>
-        <div className="flex items-center flex-1">
+        <div className="flex items-center">
           <Button
             type="button"
             variant="outline"
@@ -159,6 +159,7 @@ const FormNumericInput = React.forwardRef<HTMLInputElement, NumericInputProps>(
             onFocus={handleFocus}
             onKeyDown={handleKeyDown}
             className={cn(
+              "w-24",
               "rounded-none border-x-0 h-9",
               getAlignmentClass(),
               hasError && "border-destructive focus-visible:ring-destructive"
diff --git a/src/hooks/useSimulation.ts b/src/hooks/useSimulation.ts
index ffd5ca8..2a76b27 100644
--- a/src/hooks/useSimulation.ts
+++ b/src/hooks/useSimulation.ts
@@ -24,7 +24,12 @@ interface SuggestionResult {
   dayOffset?: number;
 }
 
-export const useSimulation = (appState: AppState) => {
+interface Translations {
+  noSuitableNextDose: string;
+  noSignificantCorrection: string;
+}
+
+export const useSimulation = (appState: AppState, t: Translations) => {
   const { pkParams, doses, steadyStateConfig, doseIncrement, uiSettings } = appState;
   const { simulationDays } = uiSettings;
 
@@ -51,10 +56,11 @@ export const useSimulation = (appState: AppState) => {
       doseIncrement,
       simulationDays,
       steadyStateConfig,
-      pkParams
+      pkParams,
+      t
     );
     setSuggestion(newSuggestion);
-  }, [doses, deviations, doseIncrement, simulationDays, steadyStateConfig, pkParams]);
+  }, [doses, deviations, doseIncrement, simulationDays, steadyStateConfig, pkParams, t]);
 
   React.useEffect(() => {
     generateSuggestionMemo();
diff --git a/src/utils/suggestions.ts b/src/utils/suggestions.ts
index 2942b9f..27122bc 100644
--- a/src/utils/suggestions.ts
+++ b/src/utils/suggestions.ts
@@ -22,13 +22,19 @@ interface SuggestionResult {
   dayOffset?: number;
 }
 
+interface Translations {
+  noSuitableNextDose: string;
+  noSignificantCorrection: string;
+}
+
 export const generateSuggestion = (
   doses: Dose[],
   deviations: Deviation[],
   doseIncrement: string,
   simulationDays: string,
   steadyStateConfig: SteadyStateConfig,
-  pkParams: PkParams
+  pkParams: PkParams,
+  t: Translations
 ): SuggestionResult | null => {
   if (deviations.length === 0) {
     return null;
@@ -68,7 +74,7 @@ export const generateSuggestion = (
   });
 
   if (!nextDose) {
-    return { text: "Keine passende nächste Dosis für Korrektur gefunden." };
+    return { text: t.noSuitableNextDose };
   }
 
   // Type assertion after null check
@@ -85,7 +91,7 @@ export const generateSuggestion = (
   const concentrationDifference = idealConcentration - deviatedConcentration;
 
   if (Math.abs(concentrationDifference) < 0.5) {
-    return { text: "Keine signifikante Korrektur notwendig." };
+    return { text: t.noSignificantCorrection };
   }
 
   const doseAdjustmentFactor = 0.5;