Update pin feature for chart

src/App.tsx

@@ -10,7 +10,7 @@
  */
 
 import React from 'react';
-import { GitBranch } from 'lucide-react';
+import { GitBranch, Pin, PinOff } from 'lucide-react';
 
 // Components
 import DaySchedule from './components/day-schedule';
@@ -111,25 +111,36 @@ const MedPlanAssistant = () => {
         <div className="grid grid-cols-1 xl:grid-cols-2 gap-6">
 
           {/* Both Columns - Chart */}
-          <div className="xl:col-span-2 bg-card p-6 rounded-lg border min-h-[600px] flex flex-col">
+          <div className={`xl:col-span-2 bg-card p-6 rounded-lg border min-h-[600px] flex flex-col ${uiSettings.stickyChart ? 'sticky top-2 z-30 shadow-lg' : ''}`}
-            <div className="flex justify-center gap-2 mb-4">
+               style={uiSettings.stickyChart ? { borderColor: 'hsl(var(--primary))' } : {}}>
+            <div className="flex justify-between items-center mb-4">
+              <div className="flex justify-center gap-2">
+                <Button
+                  onClick={() => updateUiSetting('chartView', 'damph')}
+                  variant={chartView === 'damph' ? 'default' : 'secondary'}
+                >
+                  {t('dAmphetamine')}
+                </Button>
+                <Button
+                  onClick={() => updateUiSetting('chartView', 'ldx')}
+                  variant={chartView === 'ldx' ? 'default' : 'secondary'}
+                >
+                  {t('lisdexamfetamine')}
+                </Button>
+                <Button
+                  onClick={() => updateUiSetting('chartView', 'both')}
+                  variant={chartView === 'both' ? 'default' : 'secondary'}
+                >
+                  {t('both')}
+                </Button>
+              </div>
               <Button
-                onClick={() => updateUiSetting('chartView', 'damph')}
+                onClick={() => updateUiSetting('stickyChart', !uiSettings.stickyChart)}
-                variant={chartView === 'damph' ? 'default' : 'secondary'}
+                variant={uiSettings.stickyChart ? 'default' : 'outline'}
+                size="sm"
+                title={uiSettings.stickyChart ? t('unpinChart') : t('pinChart')}
               >
-                {t('dAmphetamine')}
+                {uiSettings.stickyChart ? <Pin size={16} /> : <PinOff size={16} />}
-              </Button>
-              <Button
-                onClick={() => updateUiSetting('chartView', 'ldx')}
-                variant={chartView === 'ldx' ? 'default' : 'secondary'}
-              >
-                {t('lisdexamfetamine')}
-              </Button>
-              <Button
-                onClick={() => updateUiSetting('chartView', 'both')}
-                variant={chartView === 'both' ? 'default' : 'secondary'}
-              >
-                {t('both')}
               </Button>
             </div>
 

src/components/ui/form-numeric-input.tsx

@@ -218,12 +218,12 @@ const FormNumericInput = React.forwardRef<HTMLInputElement, NumericInputProps>(
         </div>
         {unit && <span className="text-sm text-muted-foreground whitespace-nowrap">{unit}</span>}
         {hasError && isFocused && errorMessage && (
-          <div className="absolute top-full left-0 mt-1 z-50 w-64 bg-destructive text-destructive-foreground text-xs p-2 rounded-md shadow-lg">
+          <div className="absolute top-full left-0 mt-1 z-25 w-64 bg-destructive text-destructive-foreground text-xs p-2 rounded-md shadow-lg">
             {errorMessage}
           </div>
         )}
         {hasWarning && isFocused && warningMessage && (
-          <div className="absolute top-full left-0 mt-1 z-50 w-48 bg-yellow-500 text-white text-xs p-2 rounded-md shadow-lg">
+          <div className="absolute top-full left-0 mt-1 z-25 w-48 bg-yellow-500 text-white text-xs p-2 rounded-md shadow-lg">
             {warningMessage}
           </div>
         )}

src/constants/defaults.ts

@@ -64,6 +64,7 @@ export interface UiSettings {
   displayedDays: string;
   showDayReferenceLines?: boolean;
   showTherapeuticRange?: boolean;
+  stickyChart: boolean;
 }
 
 export interface AppState {
@@ -133,5 +134,6 @@ export const getDefaultState = (): AppState => ({
     simulationDays: '5',
     displayedDays: '2',
     showTherapeuticRange: true,
+    stickyChart: false,
   }
 });

src/locales/de.ts

@@ -55,6 +55,9 @@ export const de = {
   refLineDayShort: "T{{x}}",
   refLineMin: "Min",
   refLineMax: "Max",
+  pinChart: "Diagramm oben fixieren",
+  unpinChart: "Diagramm freigeben",
+  stickyChartTooltip: "Diagramm beim Scrollen durch die Einstellungen sichtbar halten, um Änderungen in Echtzeit zu sehen. Standard: aus.",
   tooltipHour: "Stunde",
 
   // Settings

src/locales/en.ts

@@ -49,12 +49,15 @@ export const en = {
   refLineIrregularIntake: "Irregular",
   refLineDayX: "D{{x}}",
   refLineRegularPlanShort: "(Reg.)",
-  refLineNoDeviationShort: "(Reg.)",
+  refLineNoDeviationShort: "(Reg.)", // currently the same as above (day# > 1 with curve identical to day1 / regular plan)
   refLineRecoveringShort: "(Rec.)",
   refLineIrregularIntakeShort: "(Ireg.)",
   refLineDayShort: "D{{x}}",
   refLineMin: "Min",
   refLineMax: "Max",
+  pinChart: "Pin chart to top",
+  unpinChart: "Unpin chart",
+  stickyChartTooltip: "Keep chart visible while scrolling through settings for real-time feedback. Default: off.",
 
   // Settings
   diagramSettings: "Diagram Settings",