Update profile selector, new rename functionality, display options in alphabetical order

src/App.tsx

@@ -315,6 +315,7 @@ const MedPlanAssistant = () => {
                 onSwitchProfile={switchProfile}
                 onSaveProfile={saveProfile}
                 onSaveProfileAs={saveProfileAs}
+                onRenameProfile={updateProfileName}
                 onDeleteProfile={deleteProfile}
                 t={t}
               />
@@ -333,7 +334,7 @@ const MedPlanAssistant = () => {
             </div>
 
           {/* Right Column - Settings */}
-            <div className="lg:col-span-1 space-y-6">
+            <div className="lg:col-span-1 space-y-4">
               <Settings
                 pkParams={pkParams}
                 therapeuticRange={therapeuticRange}
@@ -351,6 +352,7 @@ const MedPlanAssistant = () => {
 
           </div>
 
+          {/* Footer */}
           <footer className="mt-8 p-4 bg-muted rounded-lg text-sm border">
             <div className="space-y-3">
               <div>

src/components/profile-selector.tsx

@@ -21,7 +21,7 @@ import {
   SelectValue,
 } from './ui/select';
 import { Tooltip, TooltipContent, TooltipTrigger } from './ui/tooltip';
-import { Save, Trash2, Plus } from 'lucide-react';
+import { Save, Trash2, Plus, Pencil } from 'lucide-react';
 import { IconButtonWithTooltip } from './ui/icon-button-with-tooltip';
 import { MAX_PROFILES, type ScheduleProfile } from '../constants/defaults';
 
@@ -32,6 +32,7 @@ interface ProfileSelectorProps {
   onSwitchProfile: (profileId: string) => void;
   onSaveProfile: () => void;
   onSaveProfileAs: (name: string) => string | null;
+  onRenameProfile: (profileId: string, newName: string) => void;
   onDeleteProfile: (profileId: string) => boolean;
   t: (key: string) => string;
 }
@@ -43,20 +44,29 @@ export const ProfileSelector: React.FC<ProfileSelectorProps> = ({
   onSwitchProfile,
   onSaveProfile,
   onSaveProfileAs,
+  onRenameProfile,
   onDeleteProfile,
   t,
 }) => {
   const [newProfileName, setNewProfileName] = useState('');
   const [isSaveAsMode, setIsSaveAsMode] = useState(false);
+  const [isRenameMode, setIsRenameMode] = useState(false);
+  const [renameName, setRenameName] = useState('');
 
   const activeProfile = profiles.find(p => p.id === activeProfileId);
   const canDelete = profiles.length > 1;
   const canCreateNew = profiles.length < MAX_PROFILES;
 
+  // Sort profiles alphabetically (case-insensitive)
+  const sortedProfiles = [...profiles].sort((a, b) =>
+    a.name.toLowerCase().localeCompare(b.name.toLowerCase())
+  );
+
   const handleSelectChange = (value: string) => {
     if (value === '__new__') {
       // Enter "save as" mode
       setIsSaveAsMode(true);
+      setIsRenameMode(false);
       setNewProfileName('');
     } else {
       // Confirm before switching if there are unsaved changes
@@ -67,6 +77,7 @@ export const ProfileSelector: React.FC<ProfileSelectorProps> = ({
       }
       onSwitchProfile(value);
       setIsSaveAsMode(false);
+      setIsRenameMode(false);
     }
   };
 
@@ -114,6 +125,51 @@ export const ProfileSelector: React.FC<ProfileSelectorProps> = ({
     }
   };
 
+  const handleStartRename = () => {
+    if (activeProfile) {
+      setIsRenameMode(true);
+      setIsSaveAsMode(false);
+      setRenameName(activeProfile.name);
+    }
+  };
+
+  const handleRename = () => {
+    if (!renameName.trim() || !activeProfile) {
+      return;
+    }
+
+    const trimmedName = renameName.trim();
+
+    // Check if name is unchanged
+    if (trimmedName === activeProfile.name) {
+      setIsRenameMode(false);
+      return;
+    }
+
+    // Check for duplicate names (excluding current profile)
+    const isDuplicate = profiles.some(
+      p => p.id !== activeProfile.id && p.name.toLowerCase() === trimmedName.toLowerCase()
+    );
+
+    if (isDuplicate) {
+      alert(t('profileNameAlreadyExists') || 'A schedule with this name already exists');
+      return;
+    }
+
+    onRenameProfile(activeProfile.id, trimmedName);
+    setIsRenameMode(false);
+    setRenameName('');
+  };
+
+  const handleRenameKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      handleRename();
+    } else if (e.key === 'Escape') {
+      setIsRenameMode(false);
+      setRenameName('');
+    }
+  };
+
   return (
     <Card className="mb-4">
       <CardContent className="pt-6">
@@ -135,21 +191,32 @@ export const ProfileSelector: React.FC<ProfileSelectorProps> = ({
                 onKeyDown={handleKeyDown}
                 placeholder={t('profileSaveAsPlaceholder')}
                 autoFocus
-                className="h-9 rounded-r-none border-r-0 w-[360px] bg-background"
+                className="h-9 rounded-r-none border-r-0 w-[288px] bg-background"
+              />
+            ) : isRenameMode ? (
+              <Input
+                id="profile-selector"
+                type="text"
+                value={renameName}
+                onChange={(e) => setRenameName(e.target.value)}
+                onKeyDown={handleRenameKeyDown}
+                placeholder={t('profileRenamePlaceholder')}
+                autoFocus
+                className="h-9 rounded-r-none border-r-0 w-[288px] bg-background"
               />
             ) : (
               <Select
                 value={activeProfileId}
                 onValueChange={handleSelectChange}
               >
-                <SelectTrigger id="profile-selector" className="h-9 rounded-r-none border-r-0 w-[360px] bg-background">
+                <SelectTrigger id="profile-selector" className="h-9 rounded-r-none border-r-0 w-[288px] bg-background">
                   <SelectValue>
                     {activeProfile?.name}
                     {hasUnsavedChanges && ' *'}
                   </SelectValue>
                 </SelectTrigger>
                 <SelectContent>
-                  {profiles.map(profile => (
+                  {sortedProfiles.map(profile => (
                     <SelectItem key={profile.id} value={profile.id}>
                       {profile.name}
                     </SelectItem>
@@ -178,10 +245,21 @@ export const ProfileSelector: React.FC<ProfileSelectorProps> = ({
 
             {/* Save button - integrated */}
             <IconButtonWithTooltip
-              onClick={isSaveAsMode ? handleSaveAs : onSaveProfile}
+              onClick={isSaveAsMode ? handleSaveAs : isRenameMode ? handleRename : onSaveProfile}
               icon={<Save className="h-4 w-4" />}
-              tooltip={isSaveAsMode ? t('profileSaveAs') : t('profileSave')}
-              disabled={(isSaveAsMode && !newProfileName.trim()) || (!isSaveAsMode && !hasUnsavedChanges)}
+              tooltip={isSaveAsMode ? t('profileSaveAs') : isRenameMode ? t('profileRename') : t('profileSave')}
+              disabled={(isSaveAsMode && !newProfileName.trim()) || (isRenameMode && !renameName.trim()) || (!isSaveAsMode && !isRenameMode && !hasUnsavedChanges)}
+              variant="outline"
+              size="icon"
+              className="rounded-none border-r-0"
+            />
+
+            {/* Rename button - integrated */}
+            <IconButtonWithTooltip
+              onClick={handleStartRename}
+              icon={<Pencil className="h-4 w-4" />}
+              tooltip={t('profileRename')}
+              disabled={isSaveAsMode || isRenameMode}
               variant="outline"
               size="icon"
               className="rounded-none border-r-0"
@@ -192,7 +270,7 @@ export const ProfileSelector: React.FC<ProfileSelectorProps> = ({
               onClick={handleDelete}
               icon={<Trash2 className="h-4 w-4" />}
               tooltip={canDelete ? t('profileDelete') : t('profileDeleteDisabled')}
-              disabled={!canDelete || isSaveAsMode}
+              disabled={!canDelete || isSaveAsMode || isRenameMode}
               variant="outline"
               size="icon"
               className="rounded-l-none text-destructive hover:bg-destructive hover:text-destructive-foreground"
@@ -216,6 +294,24 @@ export const ProfileSelector: React.FC<ProfileSelectorProps> = ({
               </button>
             </div>
           )}
+
+          {/* Helper text for rename mode */}
+          {isRenameMode && (
+            <div className="flex items-center gap-2">
+              <p className="text-xs text-muted-foreground flex-1">
+                {t('profileRenameHelp')}
+              </p>
+              <button
+                onClick={() => {
+                  setIsRenameMode(false);
+                  setRenameName('');
+                }}
+                className="text-xs text-muted-foreground hover:text-foreground underline"
+              >
+                {t('cancel')}
+              </button>
+            </div>
+          )}
         </div>
       </CardContent>
     </Card>

src/components/settings.tsx

@@ -519,7 +519,7 @@ const Settings = ({
                   onValueChange={value => onUpdateUiSetting('showDayTimeOnXAxis', value)}
                   showResetButton={true}
                   defaultValue={defaultsForT.showDayTimeOnXAxis}
-                  triggerClassName="w-[360px]"
+                  triggerClassName="w-[288px]"
                 >
                   <SelectContent>
                     <Tooltip>
@@ -828,7 +828,7 @@ const Settings = ({
                 onValueChange={(value) => updateAdvanced('standardVd', 'preset', value as 'adult' | 'child' | 'custom' | 'weight-based')}
                 showResetButton={true}
                 defaultValue={defaultsForT.standardVdPreset}
-                triggerClassName="w-[360px]"
+                triggerClassName="w-[288px]"
               >
                 <SelectContent>
                   <SelectItem value="adult">{t('standardVdPresetAdult')}</SelectItem>
@@ -963,7 +963,7 @@ const Settings = ({
                   }
                   showResetButton={true}
                   defaultValue={defaultsForT.urinePh}
-                  triggerClassName="w-[360px]"
+                  triggerClassName="w-[288px]"
                 >
                   <SelectContent>
                     <SelectItem value="normal">{t('urinePHModeNormal')}</SelectItem>
@@ -1004,7 +1004,7 @@ const Settings = ({
                 }}
                 showResetButton={true}
                 defaultValue={defaultsForT.ageGroup}
-                triggerClassName="w-[360px]"
+                triggerClassName="w-[288px]"
               >
                 <SelectContent>
                   <SelectItem value="adult">{t('ageGroupAdult')}</SelectItem>

src/components/simulation-chart.tsx

@@ -149,9 +149,9 @@ const SimulationChart = React.memo(({
 
   // Dynamically calculate tick interval based on available pixel width
   const xTickInterval = React.useMemo(() => {
-      // Aim for ~46px per label to avoid overlaps on narrow screens
+    // Aim for ~46px per label to avoid overlaps on narrow screens
     //const MIN_PX_PER_TICK = 46;
-    const MIN_PX_PER_TICK = 46;
+    const MIN_PX_PER_TICK = 56; // increased to 56, partially too tight otherwise
     const intervals = [1, 2, 3, 4, 6, 8, 12, 24];
 
     const pxPerDay = scrollableWidth / Math.max(1, dispDays);
@@ -274,7 +274,7 @@ const SimulationChart = React.memo(({
         // User set yAxisMax explicitly
         // Add padding to dataMax and use the higher of manual or (dataMax + padding)
         const range = dataMax - dataMin;
-        const padding = range * 0.1;
+        const padding = range * 0.05;
         const dataMaxWithPadding = dataMax + padding;
         // Use manual max only if it's higher than dataMax + padding
         domainMax = Math.max(numMax, dataMaxWithPadding);
@@ -283,9 +283,9 @@ const SimulationChart = React.memo(({
         domainMax = numMax;
       }
     } else if (dataMax !== -Infinity) { // data exists
-      // Auto mode: add 10% padding above
+      // Auto mode: add 5% padding above
       const range = dataMax - dataMin;
-      const padding = range * 0.1;
+      const padding = range * 0.05;
       domainMax = dataMax + padding;
     } else { // no data
       domainMax = 100;
@@ -544,7 +544,9 @@ const SimulationChart = React.memo(({
               domain={yAxisDomain as any}
               axisLine={{ stroke: isDarkTheme ? '#ccc' : '#666' }}
               tick={<YAxisTick />}
-              allowDecimals={true}
+              tickCount={20}
+              interval={1}
+              allowDecimals={false}
               allowDataOverflow={false}
             />
             <RechartsTooltip
@@ -607,7 +609,7 @@ const SimulationChart = React.memo(({
                   style={{ stroke: isDarkTheme ? '#666' : '#ccc' }}
             />
 
-            {showDayReferenceLines !== false && [...Array(dispDays + 1).keys()].map(day => {
+            {showDayReferenceLines !== false && [...Array(simDays).keys()].map(day => {
               // Determine whether to use compact day labels to avoid overlap on narrow screens
               const pxPerDay = scrollableWidth / Math.max(1, dispDays);
               let label = "";

src/locales/de.ts

@@ -37,11 +37,15 @@ export const de = {
   profileSaveAsNewProfile: "Als neuen Zeitplan speichern",
   profileSave: "Änderungen im aktuellen Zeitplan speichern",
   profileSaveAs: "Neuen Zeitplan mit aktueller Konfiguration erstellen",
+  profileRename: "Diesen Zeitplan umbenennen",
+  profileRenameHelp: "Geben Sie einen neuen Namen für den Zeitplan ein und drücken Sie Enter oder klicken Sie auf Speichern",
+  profileRenamePlaceholder: "Neuer Name für den Zeitplan...",
   profileDelete: "Diesen Zeitplan löschen",
   profileDeleteDisabled: "Der letzte Zeitplan kann nicht gelöscht werden",
   profileDeleteConfirm: "Möchten Sie den Zeitplan '{name}' wirklich löschen?",
   profileSaveAsPlaceholder: "Name für den neuen Zeitplan...",
   profileSaveAsHelp: "Geben Sie einen Namen für den neuen Zeitplan ein und drücken Sie Enter oder klicken Sie auf Speichern",
+  profileNameAlreadyExists: "Ein Zeitplan mit diesem Namen existiert bereits",
   profileSwitchUnsavedConfirm: "Sie haben ungespeicherte Änderungen. Beim Wechseln des Zeitplans gehen diese verloren. Fortfahren?",
   profiles: "Zeitpläne",
   cancel: "Abbrechen",
@@ -114,7 +118,7 @@ export const de = {
   xAxisFormat24hDesc: "Wiederholender 0-24h Zyklus",
   xAxisFormat12h: "Tageszeit (12h AM/PM)",
   xAxisFormat12hDesc: "Wiederholend 12h Zyklus im AM/PM Format",
-  showTemplateDayInChart: "Basis-Zeitplan kontinuierlich anzeigen",
+  showTemplateDayInChart: "Basis-Zeitplan zum Vergleich anzeigen",
   showTemplateDayTooltip: "Führt die Simulation des Basis-Zeitplans auch dann fort, auch wenn für Tag 2+ abweichende Zeitpläne definiert sind. Die entsprechenden Plasmakonzentrationen werden, nur im Falle einer Abweichung vom Basis-Zeitplan, als zusätzliche gestrichelte Linien dargestellt.\\n\\n__Standard:__ **aktiviert**",
   simulationSettings: "Simulations-Einstellungen",
 

src/locales/en.ts

@@ -37,11 +37,15 @@ export const en = {
   profileSaveAsNewProfile: "Save as new schedule",
   profileSave: "Save changes to current schedule",
   profileSaveAs: "Create new schedule with current configuration",
+  profileRename: "Rename this schedule",
+  profileRenameHelp: "Enter a new name for the schedule and press Enter or click Save",
+  profileRenamePlaceholder: "New name for the schedule...",
   profileDelete: "Delete this schedule",
   profileDeleteDisabled: "Cannot delete the last schedule",
   profileDeleteConfirm: "Are you sure you want to delete the schedule '{name}'?",
   profileSaveAsPlaceholder: "Name for the new schedule...",
   profileSaveAsHelp: "Enter a name for the new schedule and press Enter or click Save",
+  profileNameAlreadyExists: "A schedule with this name already exists",
   profileSwitchUnsavedConfirm: "You have unsaved changes. Switching schedules will discard them. Continue?",
   profiles: "schedules",
   cancel: "Cancel",
@@ -113,7 +117,7 @@ export const en = {
   xAxisFormat24hDesc: "Repeating 0-24h cycle",
   xAxisFormat12h: "Time of Day (12h AM/PM)",
   xAxisFormat12hDesc: "Repeating 12h cycle in AM/PM format",
-  showTemplateDayInChart: "Continuously Show Baseline Schedule",
+  showTemplateDayInChart: "Show Baseline Schedule for Comparison",
   showTemplateDayTooltip: "Continue simulating the baseline schedule even when deviations are defined for day 2+. Corresponding plasma concentrations will be shown as additional dashed lines, only if deviating from the baseline schedule.\\n\\n__Default:__ **enabled**",
   simulationSettings: "Simulation Settings",
   showDayReferenceLines: "Show Day Separators",