closes #133: Mejoras de usabilidad en ContenidoTemático — edición inmediata y foco

- Mueve el botón "+ Nueva unidad" al final de la lista y lo centra.
- Al crear una unidad: hace scrollIntoView, la unidad queda expandida, el título entra en modo edición y recibe focus.
- Al crear un subtema: nombre y horas quedan editables y el input del nombre recibe focus.
- Click en título de unidad o en un subtema inicia la edición y pone focus en el campo correspondiente.
- Elimina el botón "Listo": los cambios se guardan al pulsar Enter o perder el foco (onBlur).
- Presionar Esc cancela la edición y restaura el valor anterior.
- Evita el bug donde pulsar Enter tras crear una unidad añadía unidades extra (se desenfoca el botón y se dirige el foco al input correspondiente).
- Persistencia inmediata: las modificaciones se guardan vía useUpdateSubjectContenido en los puntos de commit.
- Conserva el estado de unidades expandidas tras las actualizaciones para evitar colapsos inesperados.

src/components/asignaturas/detalle/ContenidoTematico.tsx

@@ -8,9 +8,10 @@ import {
   Trash2,
   Clock,
 } from 'lucide-react'
-import { useEffect, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 
 import type { ContenidoApi, ContenidoTemaApi } from '@/data/api/subjects.api'
+import type { FocusEvent, KeyboardEvent } from 'react'
 
 import {
   AlertDialog,
@@ -167,16 +168,29 @@ export function ContenidoTematico() {
   const { data: data, isLoading: isLoading } = useSubject(asignaturaId)
   const [unidades, setUnidades] = useState<Array<UnidadTematica>>([])
   const [expandedUnits, setExpandedUnits] = useState<Set<string>>(new Set())
+  const unitContainerRefs = useRef<Map<string, HTMLDivElement>>(new Map())
+  const unitTitleInputRef = useRef<HTMLInputElement | null>(null)
+  const temaNombreInputElRef = useRef<HTMLInputElement | null>(null)
+  const [pendingScrollUnitId, setPendingScrollUnitId] = useState<string | null>(
+    null,
+  )
+  const cancelNextBlurRef = useRef(false)
   const [deleteDialog, setDeleteDialog] = useState<{
     type: 'unidad' | 'tema'
     id: string
     parentId?: string
   } | null>(null)
   const [editingUnit, setEditingUnit] = useState<string | null>(null)
+  const [unitDraftNombre, setUnitDraftNombre] = useState('')
+  const [unitOriginalNombre, setUnitOriginalNombre] = useState('')
   const [editingTema, setEditingTema] = useState<{
     unitId: string
     temaId: string
   } | null>(null)
+  const [temaDraftNombre, setTemaDraftNombre] = useState('')
+  const [temaOriginalNombre, setTemaOriginalNombre] = useState('')
+  const [temaDraftHoras, setTemaDraftHoras] = useState('')
+  const [temaOriginalHoras, setTemaOriginalHoras] = useState(0)
 
   const persistUnidades = async (nextUnidades: Array<UnidadTematica>) => {
     const payload = serializeUnidadesToApi(nextUnidades)
@@ -186,18 +200,116 @@ export function ContenidoTematico() {
     })
   }
 
+  const beginEditUnit = (unitId: string) => {
+    const unit = unidades.find((u) => u.id === unitId)
+    const nombre = unit?.nombre ?? ''
+    setEditingUnit(unitId)
+    setUnitDraftNombre(nombre)
+    setUnitOriginalNombre(nombre)
+    setExpandedUnits((prev) => {
+      const next = new Set(prev)
+      next.add(unitId)
+      return next
+    })
+  }
+
+  const commitEditUnit = () => {
+    if (!editingUnit) return
+    const next = unidades.map((u) =>
+      u.id === editingUnit ? { ...u, nombre: unitDraftNombre } : u,
+    )
+    setUnidades(next)
+    setEditingUnit(null)
+    void persistUnidades(next)
+  }
+
+  const cancelEditUnit = () => {
+    setEditingUnit(null)
+    setUnitDraftNombre(unitOriginalNombre)
+  }
+
+  const beginEditTema = (unitId: string, temaId: string) => {
+    const unit = unidades.find((u) => u.id === unitId)
+    const tema = unit?.temas.find((t) => t.id === temaId)
+    const nombre = tema?.nombre ?? ''
+    const horas = tema?.horasEstimadas ?? 0
+
+    setEditingTema({ unitId, temaId })
+    setTemaDraftNombre(nombre)
+    setTemaOriginalNombre(nombre)
+    setTemaDraftHoras(String(horas))
+    setTemaOriginalHoras(horas)
+    setExpandedUnits((prev) => {
+      const next = new Set(prev)
+      next.add(unitId)
+      return next
+    })
+  }
+
+  const commitEditTema = () => {
+    if (!editingTema) return
+    const parsedHoras = Number.parseInt(temaDraftHoras, 10)
+    const horasEstimadas = Number.isFinite(parsedHoras) ? parsedHoras : 0
+
+    const next = unidades.map((u) => {
+      if (u.id !== editingTema.unitId) return u
+      return {
+        ...u,
+        temas: u.temas.map((t) =>
+          t.id === editingTema.temaId
+            ? { ...t, nombre: temaDraftNombre, horasEstimadas }
+            : t,
+        ),
+      }
+    })
+
+    setUnidades(next)
+    setEditingTema(null)
+    void persistUnidades(next)
+  }
+
+  const cancelEditTema = () => {
+    setEditingTema(null)
+    setTemaDraftNombre(temaOriginalNombre)
+    setTemaDraftHoras(String(temaOriginalHoras))
+  }
+
+  const handleTemaEditorBlurCapture = (e: FocusEvent<HTMLDivElement>) => {
+    if (cancelNextBlurRef.current) {
+      cancelNextBlurRef.current = false
+      return
+    }
+    const nextFocus = e.relatedTarget as Node | null
+    if (nextFocus && e.currentTarget.contains(nextFocus)) return
+    commitEditTema()
+  }
+
+  const handleTemaEditorKeyDownCapture = (e: KeyboardEvent<HTMLDivElement>) => {
+    if (e.key === 'Enter') {
+      e.preventDefault()
+      if (e.target instanceof HTMLElement) e.target.blur()
+      return
+    }
+    if (e.key === 'Escape') {
+      e.preventDefault()
+      cancelNextBlurRef.current = true
+      cancelEditTema()
+      if (e.target instanceof HTMLElement) e.target.blur()
+    }
+  }
+
   useEffect(() => {
     const contenido = mapContenidoTematicoFromDb(
       data ? data.contenido_tematico : undefined,
     )
 
     const transformed = contenido.map((u, idx) => ({
-      id: `u-${idx}`,
+      id: `u-${u.unidad || idx + 1}`,
       numero: u.unidad || idx + 1,
       nombre: u.titulo || 'Sin título',
       temas: Array.isArray(u.temas)
         ? u.temas.map((t: any, tidx: number) => ({
-            id: `t-${idx}-${tidx}`,
+            id: `t-${u.unidad || idx + 1}-${tidx + 1}`,
             nombre: typeof t === 'string' ? t : t?.nombre || 'Tema',
             horasEstimadas: t?.horasEstimadas || 0,
           }))
@@ -216,6 +328,25 @@ export function ContenidoTematico() {
     })
   }, [data])
 
+  useEffect(() => {
+    if (!editingUnit) return
+    // Foco controlado (evitamos autoFocus por lint/a11y)
+    setTimeout(() => unitTitleInputRef.current?.focus(), 0)
+  }, [editingUnit])
+
+  useEffect(() => {
+    if (!editingTema) return
+    setTimeout(() => temaNombreInputElRef.current?.focus(), 0)
+  }, [editingTema])
+
+  useEffect(() => {
+    if (!pendingScrollUnitId) return
+    const el = unitContainerRefs.current.get(pendingScrollUnitId)
+    if (!el) return
+    el.scrollIntoView({ behavior: 'smooth', block: 'center' })
+    setPendingScrollUnitId(null)
+  }, [pendingScrollUnitId, unidades.length])
+
   if (isLoading)
     return <div className="p-10 text-center">Cargando contenido...</div>
 
@@ -234,60 +365,57 @@ export function ContenidoTematico() {
   }
 
   const addUnidad = () => {
-    const newId = `u-${Date.now()}`
+    const newNumero = unidades.length + 1
+    const newId = `u-${newNumero}`
     const newUnidad: UnidadTematica = {
       id: newId,
       nombre: 'Nueva Unidad',
-      numero: unidades.length + 1,
+      numero: newNumero,
       temas: [],
     }
     const next = [...unidades, newUnidad]
     setUnidades(next)
-    setExpandedUnits(new Set([...expandedUnits, newId]))
+    setExpandedUnits((prev) => {
-    setEditingUnit(newId)
+      const n = new Set(prev)
-  }
+      n.add(newId)
+      return n
+    })
+    setPendingScrollUnitId(newId)
 
-  const updateUnidadNombre = (id: string, nombre: string) => {
+    // Abrir edición del título inmediatamente
-    setUnidades(unidades.map((u) => (u.id === id ? { ...u, nombre } : u)))
+    setEditingUnit(newId)
+    setUnitDraftNombre(newUnidad.nombre)
+    setUnitOriginalNombre(newUnidad.nombre)
   }
 
   // --- Lógica de Temas ---
   const addTema = (unidadId: string) => {
-    setUnidades(
+    const unit = unidades.find((u) => u.id === unidadId)
-      unidades.map((u) => {
+    const unitNumero = unit?.numero ?? 0
-        if (u.id === unidadId) {
+    const newTemaIndex = (unit?.temas.length ?? 0) + 1
-          const newTemaId = `t-${Date.now()}`
+    const newTemaId = `t-${unitNumero}-${newTemaIndex}`
     const newTema: Tema = {
       id: newTemaId,
       nombre: 'Nuevo tema',
       horasEstimadas: 2,
     }
-          setEditingTema({ unitId: unidadId, temaId: newTemaId })
-          return { ...u, temas: [...u.temas, newTema] }
-        }
-        return u
-      }),
-    )
-  }
 
-  const updateTema = (
+    const next = unidades.map((u) =>
-    unidadId: string,
+      u.id === unidadId ? { ...u, temas: [...u.temas, newTema] } : u,
-    temaId: string,
-    updates: Partial<Tema>,
-  ) => {
-    setUnidades(
-      unidades.map((u) => {
-        if (u.id === unidadId) {
-          return {
-            ...u,
-            temas: u.temas.map((t) =>
-              t.id === temaId ? { ...t, ...updates } : t,
-            ),
-          }
-        }
-        return u
-      }),
     )
+    setUnidades(next)
+
+    // Expandir unidad y poner el subtema en edición con foco en el nombre
+    setExpandedUnits((prev) => {
+      const n = new Set(prev)
+      n.add(unidadId)
+      return n
+    })
+    setEditingTema({ unitId: unidadId, temaId: newTemaId })
+    setTemaDraftNombre(newTema.nombre)
+    setTemaOriginalNombre(newTema.nombre)
+    setTemaDraftHoras(String(newTema.horasEstimadas ?? 0))
+    setTemaOriginalHoras(newTema.horasEstimadas ?? 0)
   }
 
   const handleDelete = () => {
@@ -321,19 +449,18 @@ export function ContenidoTematico() {
             {unidades.length} unidades • {totalHoras} horas estimadas totales
           </p>
         </div>
-        <div className="flex items-center gap-2">
-          <Button variant="outline" onClick={addUnidad} className="gap-2">
-            <Plus className="h-4 w-4" /> Nueva unidad
-          </Button>
-        </div>
       </div>
 
       <div className="space-y-4">
         {unidades.map((unidad) => (
-          <Card
+          <div
             key={unidad.id}
-            className="overflow-hidden border-slate-200 shadow-sm"
+            ref={(el) => {
+              if (el) unitContainerRefs.current.set(unidad.id, el)
+              else unitContainerRefs.current.delete(unidad.id)
+            }}
           >
+            <Card className="overflow-hidden border-slate-200 shadow-sm">
               <Collapsible
                 open={expandedUnits.has(unidad.id)}
                 onOpenChange={() => toggleUnit(unidad.id)}
@@ -356,18 +483,27 @@ export function ContenidoTematico() {
 
                     {editingUnit === unidad.id ? (
                       <Input
-                      value={unidad.nombre}
+                        ref={unitTitleInputRef}
-                      onChange={(e) =>
+                        value={unitDraftNombre}
-                        updateUnidadNombre(unidad.id, e.target.value)
+                        onChange={(e) => setUnitDraftNombre(e.target.value)}
-                      }
                         onBlur={() => {
-                        setEditingUnit(null)
+                          if (cancelNextBlurRef.current) {
-                        void persistUnidades(unidades)
+                            cancelNextBlurRef.current = false
+                            return
+                          }
+                          commitEditUnit()
                         }}
                         onKeyDown={(e) => {
                           if (e.key === 'Enter') {
-                          setEditingUnit(null)
+                            e.preventDefault()
-                          void persistUnidades(unidades)
+                            e.currentTarget.blur()
+                            return
+                          }
+                          if (e.key === 'Escape') {
+                            e.preventDefault()
+                            cancelNextBlurRef.current = true
+                            cancelEditUnit()
+                            e.currentTarget.blur()
                           }
                         }}
                         className="h-8 max-w-md bg-white"
@@ -375,7 +511,7 @@ export function ContenidoTematico() {
                     ) : (
                       <CardTitle
                         className="cursor-pointer text-base font-semibold transition-colors hover:text-blue-600"
-                      onClick={() => setEditingUnit(unidad.id)}
+                        onClick={() => beginEditUnit(unidad.id)}
                       >
                         {unidad.nombre}
                       </CardTitle>
@@ -416,16 +552,18 @@ export function ContenidoTematico() {
                             editingTema.unitId === unidad.id &&
                             editingTema.temaId === tema.id
                           }
-                        onEdit={() =>
+                          draftNombre={temaDraftNombre}
-                          setEditingTema({ unitId: unidad.id, temaId: tema.id })
+                          draftHoras={temaDraftHoras}
+                          onBeginEdit={() => beginEditTema(unidad.id, tema.id)}
+                          onDraftNombreChange={setTemaDraftNombre}
+                          onDraftHorasChange={setTemaDraftHoras}
+                          onEditorBlurCapture={handleTemaEditorBlurCapture}
+                          onEditorKeyDownCapture={
+                            handleTemaEditorKeyDownCapture
                           }
-                        onStopEditing={() => {
+                          onNombreInputRef={(el) => {
-                          setEditingTema(null)
+                            temaNombreInputElRef.current = el
-                          void persistUnidades(unidades)
                           }}
-                        onUpdate={(updates) =>
-                          updateTema(unidad.id, tema.id, updates)
-                        }
                           onDelete={() =>
                             setDeleteDialog({
                               type: 'tema',
@@ -448,9 +586,24 @@ export function ContenidoTematico() {
                 </CollapsibleContent>
               </Collapsible>
             </Card>
+          </div>
         ))}
       </div>
 
+      <div className="flex justify-center pt-2">
+        <Button
+          variant="outline"
+          className="gap-2"
+          onClick={(e) => {
+            // Evita que Enter vuelva a disparar el click sobre el botón.
+            e.currentTarget.blur()
+            addUnidad()
+          }}
+        >
+          <Plus className="h-4 w-4" /> Nueva unidad
+        </Button>
+      </div>
+
       <DeleteConfirmDialog
         dialog={deleteDialog}
         setDialog={setDeleteDialog}
@@ -465,9 +618,14 @@ interface TemaRowProps {
   tema: Tema
   index: number
   isEditing: boolean
-  onEdit: () => void
+  draftNombre: string
-  onStopEditing: () => void
+  draftHoras: string
-  onUpdate: (updates: Partial<Tema>) => void
+  onBeginEdit: () => void
+  onDraftNombreChange: (value: string) => void
+  onDraftHorasChange: (value: string) => void
+  onEditorBlurCapture: (e: FocusEvent<HTMLDivElement>) => void
+  onEditorKeyDownCapture: (e: KeyboardEvent<HTMLDivElement>) => void
+  onNombreInputRef: (el: HTMLInputElement | null) => void
   onDelete: () => void
 }
 
@@ -475,9 +633,14 @@ function TemaRow({
   tema,
   index,
   isEditing,
-  onEdit,
+  draftNombre,
-  onStopEditing,
+  draftHoras,
-  onUpdate,
+  onBeginEdit,
+  onDraftNombreChange,
+  onDraftHorasChange,
+  onEditorBlurCapture,
+  onEditorKeyDownCapture,
+  onNombreInputRef,
   onDelete,
 }: TemaRowProps) {
   return (
@@ -489,47 +652,49 @@ function TemaRow({
     >
       <span className="w-4 font-mono text-xs text-slate-400">{index}.</span>
       {isEditing ? (
-        <div className="animate-in slide-in-from-left-2 flex flex-1 items-center gap-2">
+        <div
+          className="animate-in slide-in-from-left-2 flex flex-1 items-center gap-2"
+          onBlurCapture={onEditorBlurCapture}
+          onKeyDownCapture={onEditorKeyDownCapture}
+        >
           <Input
-            value={tema.nombre}
+            ref={onNombreInputRef}
-            onChange={(e) => onUpdate({ nombre: e.target.value })}
+            value={draftNombre}
+            onChange={(e) => onDraftNombreChange(e.target.value)}
             className="h-8 flex-1 bg-white"
             placeholder="Nombre"
           />
           <Input
             type="number"
-            value={tema.horasEstimadas}
+            value={draftHoras}
-            onChange={(e) =>
+            onChange={(e) => onDraftHorasChange(e.target.value)}
-              onUpdate({ horasEstimadas: parseInt(e.target.value) || 0 })
-            }
             className="h-8 w-16 bg-white"
           />
-          <Button
-            size="sm"
-            className="h-8 bg-emerald-600"
-            onClick={onStopEditing}
-          >
-            Listo
-          </Button>
         </div>
       ) : (
         <>
           <button
             type="button"
-            className="flex-1 cursor-pointer text-left"
+            className="flex flex-1 items-center gap-3 text-left"
-            onClick={onEdit}
+            onClick={(e) => {
+              e.stopPropagation()
+              onBeginEdit()
+            }}
           >
             <p className="text-sm font-medium text-slate-700">{tema.nombre}</p>
-          </button>
             <Badge variant="secondary" className="text-[10px] opacity-60">
               {tema.horasEstimadas}h
             </Badge>
+          </button>
           <div className="flex items-center gap-1 opacity-0 transition-opacity group-hover:opacity-100">
             <Button
               variant="ghost"
               size="icon"
               className="h-7 w-7 text-slate-400 hover:text-blue-600"
-              onClick={onEdit}
+              onClick={(e) => {
+                e.stopPropagation()
+                onBeginEdit()
+              }}
             >
               <Edit3 className="h-3 w-3" />
             </Button>
@@ -537,7 +702,10 @@ function TemaRow({
               variant="ghost"
               size="icon"
               className="h-7 w-7 text-slate-400 hover:text-red-500"
-              onClick={onDelete}
+              onClick={(e) => {
+                e.stopPropagation()
+                onDelete()
+              }}
             >
               <Trash2 className="h-3 w-3" />
             </Button>