Massive bug fix. Clear button added into fields.

components/Plans.tsx

@@ -6,30 +6,15 @@ import { getPlans, savePlan, deletePlan, getExercises, saveExercise } from '../s
 import { t } from '../services/i18n';
 import { generateId } from '../utils/uuid';
 
+import FilledInput from './FilledInput';
+import { toTitleCase } from '../utils/text';
+
 interface PlansProps {
   userId: string;
   onStartPlan: (plan: WorkoutPlan) => void;
   lang: Language;
 }
 
-const FilledInput = ({ label, value, onChange, type = "number", icon, autoFocus, step }: any) => (
-  <div className="relative group bg-surface-container-high rounded-t-lg border-b border-outline-variant hover:bg-white/5 focus-within:border-primary transition-colors">
-    <label className="absolute top-2 left-4 text-[10px] font-medium text-on-surface-variant flex items-center gap-1">
-      {icon} {label}
-    </label>
-    <input
-      type={type}
-      step={step}
-      inputMode={type === 'number' ? 'decimal' : 'text'}
-      autoFocus={autoFocus}
-      className="w-full pt-6 pb-2 px-4 bg-transparent text-2xl text-on-surface focus:outline-none placeholder-transparent"
-      placeholder=" "
-      value={value}
-      onChange={onChange}
-    />
-  </div>
-);
-
 const Plans: React.FC<PlansProps> = ({ userId, onStartPlan, lang }) => {
   const [plans, setPlans] = useState<WorkoutPlan[]>([]);
   const [isEditing, setIsEditing] = useState(false);
@@ -195,6 +180,8 @@ const Plans: React.FC<PlansProps> = ({ userId, onStartPlan, lang }) => {
               placeholder={t('plan_name_ph', lang)}
               value={name}
               onChange={(e) => setName(e.target.value)}
+              autoCapitalize="words"
+              onBlur={() => setName(toTitleCase(name))}
             />
           </div>
 
@@ -305,6 +292,8 @@ const Plans: React.FC<PlansProps> = ({ userId, onStartPlan, lang }) => {
                     onChange={(e: any) => setNewExName(e.target.value)}
                     type="text"
                     autoFocus
+                    autocapitalize="words"
+                    onBlur={() => setNewExName(toTitleCase(newExName))}
                   />
 
                   <div>