Update custome translations to i18n and various improvements

src/App.tsx

@@ -54,7 +54,8 @@ const MedPlanAssistant = () => {
     yAxisMax,
     showTemplateDay,
     simulationDays,
-    displayedDays
+    displayedDays,
+    showDayReferenceLines
   } = uiSettings;
 
   const {
@@ -68,8 +69,8 @@ const MedPlanAssistant = () => {
         <header className="mb-8">
           <div className="flex justify-between items-start">
             <div>
-              <h1 className="text-3xl md:text-4xl font-bold tracking-tight">{t.appTitle}</h1>
-              <p className="text-muted-foreground mt-1">{t.appSubtitle}</p>
+              <h1 className="text-3xl md:text-4xl font-bold tracking-tight">{t('appTitle')}</h1>
+              <p className="text-muted-foreground mt-1">{t('appSubtitle')}</p>
             </div>
             <LanguageSelector currentLanguage={currentLanguage} onLanguageChange={changeLanguage} t={t} />
           </div>
@@ -84,19 +85,19 @@ const MedPlanAssistant = () => {
                 onClick={() => updateUiSetting('chartView', 'damph')}
                 variant={chartView === 'damph' ? 'default' : 'secondary'}
               >
-                {t.dAmphetamine}
+                {t('dAmphetamine')}
               </Button>
               <Button
                 onClick={() => updateUiSetting('chartView', 'ldx')}
                 variant={chartView === 'ldx' ? 'default' : 'secondary'}
               >
-                {t.lisdexamfetamine}
+                {t('lisdexamfetamine')}
               </Button>
               <Button
                 onClick={() => updateUiSetting('chartView', 'both')}
                 variant={chartView === 'both' ? 'default' : 'secondary'}
               >
-                {t.both}
+                {t('both')}
               </Button>
             </div>
 
@@ -105,6 +106,7 @@ const MedPlanAssistant = () => {
               templateProfile={showTemplateDay ? templateProfile : null}
               chartView={chartView}
               showDayTimeOnXAxis={showDayTimeOnXAxis}
+              showDayReferenceLines={showDayReferenceLines}
               therapeuticRange={therapeuticRange}
               simulationDays={simulationDays}
               displayedDays={displayedDays}
@@ -145,8 +147,8 @@ const MedPlanAssistant = () => {
         </div>
 
         <footer className="mt-8 p-4 bg-muted rounded-lg text-sm text-muted-foreground border">
-          <h3 className="font-semibold mb-2 text-foreground">{t.importantNote}</h3>
-          <p>{t.disclaimer}</p>
+          <h3 className="font-semibold mb-2 text-foreground">{t('importantNote')}</h3>
+          <p>{t('disclaimer')}</p>
         </footer>
       </div>
     </div>