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="flex justify-center gap-2 mb-4">
+          <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' : ''}`}
+               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')}
-                variant={chartView === 'damph' ? 'default' : 'secondary'}
+                onClick={() => updateUiSetting('stickyChart', !uiSettings.stickyChart)}
+                variant={uiSettings.stickyChart ? 'default' : 'outline'}
+                size="sm"
+                title={uiSettings.stickyChart ? t('unpinChart') : t('pinChart')}
               >
-                {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')}
+                {uiSettings.stickyChart ? <Pin size={16} /> : <PinOff size={16} />}
               </Button>
             </div>