El paginador ya estaba y se veía bien: 1 … 4 5 6 … 20. Hasta que un listado se quedó en cinco páginas y en pantalla salió 1 … 3 4 5.
Los puntos suspensivos escondían la página 2. Una sola. Un botón que cabía de sobra, sustituido por un adorno que encima no se puede pulsar.
El algoritmo no era el problema
La función es pura y corta: le das la página actual, el total y cuántos números quieres ver, y devuelve una lista de números con huecos. Quince líneas. Lo que no es corto es la tabla de casos: total menor que la ventana, estar en la primera, estar en la última, ventana par o impar, total de una página, total de cero.
Así que lo que le pedí a la IA no fue la función. Fue el banco de pruebas: enumera todas las combinaciones de total de 1 a 12 y página actual de 1 a total, y pinta cada resultado como lo vería un humano, con los números y los puntos. Setenta y ocho líneas de texto para leer de un tirón. Tres chirriaban.
De ahí salieron las dos reglas que faltaban:
- Un «…» solo se dibuja si oculta dos páginas o más. Si oculta una, se dibuja la página y punto.
- El bloque de números mantiene siempre el mismo ancho: en la primera página la ventana se estira hacia la derecha, en la última hacia la izquierda. Si no, los botones bailan de sitio cada vez que avanzas y acabas pulsando el que no querías.
La segunda no la pilla ningún test: se ve pasando páginas con el ratón. La primera sí, y ahora está clavada en el banco de pruebas.
Por qué esto pasó entero en el navegador
Para que la IA ayudara de verdad tuvo que ver el componente real, no un getPageRange en el vacío: el fichero traía las rutas del panel, los nombres de los endpoints internos, los flags de permiso y de dónde salía el contador de registros. Es el panel de administración de un cliente con NDA.
Y no fue un prompt. Fueron catorce, discutiendo si la página 2 se dibuja o se esconde, pegando el fichero entero sin pensarlo dos veces. Nadie manda catorce rondas del panel de un cliente a un servidor ajeno para arreglar un «…». O lo haces en local, o no lo haces y dejas los puntos suspensivos ahí, mintiendo un poquito.
El algoritmo bueno no es el que pasa los tests: es el que, impreso en texto plano, no te chirría al leerlo.
El IDE en una pestaña, el modelo corriendo en tu propia GPU, y el trayecto de tren sin cobertura en el que se hizo todo esto. Ni el código ni el prompt tocaron la red.
Abre Elffuss Code y monta el tuyo con la IA mirando el componente de verdad: corre dentro del navegador, sobre tu GPU, sin subir una línea a ningún servidor.
Abrir Code →