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

2026-02-18 11:19:58 +00:00
parent 89c26fb20c
commit 5f64372b94
4 changed files with 116 additions and 12 deletions
--- a/src/components/profile-selector.tsx
+++ b/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>
--- a/src/components/settings.tsx
+++ b/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>
--- a/src/locales/de.ts
+++ b/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",
--- a/src/locales/en.ts
+++ b/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",