fix: Real-time UI updates and exercise picker - rename routine updates instantly, set +/- reflects immediately, exercise picker shows recent exercises dropdown

Author: cuete

src/components/DayView.tsx

@@ -62,6 +62,7 @@ export function DayView({ date, onBack }: Props) {
             key={r.id}
             routine={r}
             onDelete={deleteRoutine}
+            onUpdate={refresh}
             expanded={activeId === r.id}
             onToggle={() => handleToggle(r.id!)}
           />

src/components/DraggableExerciseList.tsx

@@ -18,10 +18,11 @@ import type { Exercise } from '../types';
 interface Props {
   exercises: Exercise[];
   onTap: (exercise: Exercise) => void;
+  onUpdate?: () => void | Promise<void>;
   onReorder: (activeId: string, overId: string) => void;
 }
 
-export function DraggableExerciseList({ exercises, onTap, onReorder }: Props) {
+export function DraggableExerciseList({ exercises, onTap, onUpdate, onReorder }: Props) {
   const sensors = useSensors(
     useSensor(PointerSensor, {
       activationConstraint: {
@@ -60,6 +61,7 @@ export function DraggableExerciseList({ exercises, onTap, onReorder }: Props) {
             key={ex.id}
             exercise={ex}
             onTap={onTap}
+            onUpdate={onUpdate}
             isDraggable={true}
           />
         ))}

src/components/ExercisePicker.tsx

@@ -1,5 +1,6 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { createPortal } from 'react-dom';
+import { db } from '../db';
 
 interface Props {
   onSelect: (exerciseName: string) => void;
@@ -8,16 +9,52 @@ interface Props {
 
 export function ExercisePicker({ onSelect, onClose }: Props) {
   const [name, setName] = useState('');
+  const [recentExercises, setRecentExercises] = useState<string[]>([]);
+  const [filteredExercises, setFilteredExercises] = useState<string[]>([]);
+
+  useEffect(() => {
+    // Load recent unique exercise names
+    async function loadRecent() {
+      const allExercises = await db.exercises.toArray();
+      const uniqueNames = Array.from(new Set(allExercises.map(e => e.name)))
+        .filter(Boolean)
+        .sort();
+      setRecentExercises(uniqueNames);
+      setFilteredExercises(uniqueNames);
+    }
+    loadRecent();
+  }, []);
+
+  useEffect(() => {
+    // Filter exercises based on input
+    if (!name.trim()) {
+      setFilteredExercises(recentExercises);
+    } else {
+      const filtered = recentExercises.filter(ex =>
+        ex.toLowerCase().includes(name.toLowerCase())
+      );
+      setFilteredExercises(filtered);
+    }
+  }, [name, recentExercises]);
 
   function handleSubmit() {
     if (name.trim()) {
       onSelect(name.trim());
     }
   }
 
+  function handleSelect(exerciseName: string) {
+    onSelect(exerciseName);
+  }
+
   function handleKeyDown(e: React.KeyboardEvent) {
     if (e.key === 'Enter') {
-      handleSubmit();
+      if (filteredExercises.length > 0 && !name.trim()) {
+        // If no input and there are suggestions, select first one
+        handleSelect(filteredExercises[0]);
+      } else {
+        handleSubmit();
+      }
     }
   }
 
@@ -33,19 +70,34 @@ export function ExercisePicker({ onSelect, onClose }: Props) {
           <div className="form-group">
             <input
               type="text"
-              placeholder="Exercise name..."
+              placeholder="Exercise name or search..."
               value={name}
               onChange={(e) => setName(e.target.value)}
               onKeyDown={handleKeyDown}
               autoFocus
             />
           </div>
+
+          {filteredExercises.length > 0 && (
+            <div className="exercise-suggestions">
+              <div className="suggestions-label">Recent exercises:</div>
+              {filteredExercises.map((ex) => (
+                <div
+                  key={ex}
+                  className="suggestion-item"
+                  onClick={() => handleSelect(ex)}
+                >
+                  {ex}
+                </div>
+              ))}
+            </div>
+          )}
         </div>
 
         <div className="modal-actions">
           <button className="btn" onClick={onClose}>Cancel</button>
           <button className="btn btn-primary" onClick={handleSubmit} disabled={!name.trim()}>
-            Add
+            Add New
           </button>
         </div>
       </div>

src/components/ExerciseRow.tsx

@@ -6,10 +6,11 @@ import type { Exercise } from '../types';
 interface Props {
   exercise: Exercise;
   onTap: (exercise: Exercise) => void;
+  onUpdate?: () => void | Promise<void>;
   isDraggable?: boolean;
 }
 
-export function ExerciseRow({ exercise, onTap, isDraggable = false }: Props) {
+export function ExerciseRow({ exercise, onTap, onUpdate, isDraggable = false }: Props) {
   const {
     attributes,
     listeners,
@@ -36,6 +37,7 @@ export function ExerciseRow({ exercise, onTap, isDraggable = false }: Props) {
       sets: exercise.sets + 1,
       setsCompleted: exercise.setsCompleted + 1,
     });
+    if (onUpdate) await onUpdate();
   }
 
   async function toggleSet(index: number, e: React.MouseEvent) {
@@ -44,6 +46,7 @@ export function ExerciseRow({ exercise, onTap, isDraggable = false }: Props) {
       ? index
       : index + 1;
     await db.exercises.update(exercise.id!, { setsCompleted: newCompleted });
+    if (onUpdate) await onUpdate();
   }
 
   const style = {

src/components/RoutineCard.tsx

@@ -10,11 +10,12 @@ import type { Routine, Exercise } from '../types';
 interface Props {
   routine: Routine;
   onDelete: (id: string) => void;
+  onUpdate?: () => void | Promise<void>;
   expanded: boolean;
   onToggle: () => void;
 }
 
-export function RoutineCard({ routine, onDelete, expanded, onToggle }: Props) {
+export function RoutineCard({ routine, onDelete, onUpdate, expanded, onToggle }: Props) {
   const [editing, setEditing] = useState<Exercise | null>(null);
   const [renaming, setRenaming] = useState(false);
   const [showCopyDialog, setShowCopyDialog] = useState(false);
@@ -50,6 +51,7 @@ export function RoutineCard({ routine, onDelete, expanded, onToggle }: Props) {
     setRenaming(false);
     if (newName.trim() && newName !== routine.name) {
       await db.routines.update(routine.id!, { name: newName.trim() });
+      if (onUpdate) await onUpdate();
     }
   }
 
@@ -158,6 +160,7 @@ export function RoutineCard({ routine, onDelete, expanded, onToggle }: Props) {
             <DraggableExerciseList
               exercises={exercises}
               onTap={setEditing}
+              onUpdate={refresh}
               onReorder={handleReorder}
             />
           )}

src/styles/app.css

@@ -709,3 +709,38 @@ body {
   margin-left: 8px;
   white-space: nowrap;
 }
+
+
+/* Exercise Suggestions */
+.exercise-suggestions {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  max-height: 300px;
+  overflow-y: auto;
+}
+
+.suggestions-label {
+  font-size: 0.75rem;
+  color: var(--text-muted);
+  margin-bottom: 4px;
+  padding: 0 4px;
+}
+
+.suggestion-item {
+  padding: 10px 12px;
+  background: var(--surface-2);
+  border-radius: 6px;
+  cursor: pointer;
+  transition: background 0.2s;
+  font-size: 0.9rem;
+}
+
+.suggestion-item:hover {
+  background: var(--accent);
+  color: var(--bg);
+}
+
+.suggestion-item:active {
+  transform: scale(0.98);
+}