Historial en tarjetas verticales; «Dejar de leer» vuelve atrás o al inicio

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

app/public/app.js

@@ -119,7 +119,9 @@ const chapLabel = c => (c.num ? `Cap. ${c.num}` : 'Oneshot') + (c.title ? ` —
 const readUrl = (mangaId, chapterId, page) => `#/read/${mangaId}/${chapterId}${page != null ? `?page=${page + 1}` : ''}`
 
 // ---------- Router ----------
+let prevHash = '', curHash = '' // para volver atrás sin pasar por el lector
 async function router() {
+  if (location.hash !== curHash) { prevHash = curHash; curHash = location.hash }
   if (cleanup) { cleanup(); cleanup = null }
   document.body.classList.remove('reading')
   const [pathPart, query] = location.hash.slice(1).split('?')
@@ -626,7 +628,9 @@ async function viewManga(id, langOverride) {
     if (!confirm(`¿Dejar de leer «${manga.title}»?\nSe quitará del historial, se borrará el progreso de sus capítulos y dejarás de seguirlo.`)) return
     await api(`/api/history/${id}`, { method: 'DELETE' })
     toast('Quitado del historial')
-    viewManga(id, langOverride)
+    // Volver a donde se estaba (salvo el lector o la propia ficha, que lo volverían a marcar) o al inicio.
+    const back = prevHash && !prevHash.startsWith('#/read/') && !prevHash.startsWith(`#/manga/${id}`) && prevHash !== '#/login'
+    location.hash = back ? prevHash : '#/'
   })
   // Cerrar el menú ⋯ al pulsar fuera.
   const menu = $('.menu', app)
@@ -1331,15 +1335,20 @@ async function viewHistory() {
   const hist = await api('/api/history')
   app.innerHTML = `<h1>Historial de lectura</h1>
     ${hist.length ? '' : '<p class="muted">Aún no has leído nada.</p>'}
-    <div class="history">${hist.map(h => `
-      <div class="cont">
-        ${continueCard(h).replace('class="cont"', 'style="display:flex;gap:12px;flex:1;min-width:0;align-items:center"')}
-        <div class="row" style="flex:none">
-          <a class="btn small" href="#/manga/${h.manga_id}">${icon('book')} Ficha</a>
-          <button class="btn small danger" data-del="${h.manga_id}">${icon('trash')} Borrar</button>
-        </div>
-      </div>`).join('')}</div>`
-  app.querySelectorAll('[data-del]').forEach(b => b.addEventListener('click', async () => {
+    <div class="grid">${hist.map(h => {
+      const pct = h.total_pages ? Math.round(((h.page + 1) / h.total_pages) * 100) : 0
+      return `<a class="card hcard" href="#/manga/${h.manga_id}">
+        <img class="cover" loading="lazy" src="${esc(h.cover || '/icon.svg')}" alt="">
+        ${h.finished ? '<span class="badge corner">Terminado</span>' : h.hasNew ? '<span class="badge corner">Caps. nuevos</span>' : ''}
+        <button class="hdel" data-del="${h.manga_id}" title="Borrar del historial" aria-label="Borrar del historial">${icon('trash')}</button>
+        <div class="bar" title="${pct}% del capítulo"><i style="width:${pct}%"></i></div>
+        <div class="t">${esc(h.manga_title)}</div>
+        <div class="sub">${h.chapter_num ? `Cap. ${esc(h.chapter_num)}` : 'Oneshot'} · ${timeAgo(h.updated_at)}</div>
+      </a>`
+    }).join('')}</div>`
+  app.querySelectorAll('[data-del]').forEach(b => b.addEventListener('click', async e => {
+    e.preventDefault()
+    e.stopPropagation()
     if (!confirm('¿Borrar el historial de este manga?')) return
     await api(`/api/history/${b.dataset.del}`, { method: 'DELETE' })
     viewHistory()