añadida pestaña de traducido

app.py

@@ -166,20 +166,30 @@ def _build_news_query(args, *, count=False, limit=None, offset=None, lang="es",
             SELECT
                    COALESCE(t.traduccion_id, NULL)           AS traduccion_id,
                    n.fecha,
-                   COALESCE(t.titulo_trad,  n.titulo)        AS titulo,
+                   n.titulo                                   AS titulo_original,
-                   COALESCE(t.resumen_trad, n.resumen)       AS resumen,
+                   n.resumen                                  AS resumen_original,
+                   t.titulo_trad                              AS titulo_traducido,
+                   t.resumen_trad                             AS resumen_traducido,
+                   COALESCE(t.titulo_trad,  n.titulo)         AS titulo,
+                   COALESCE(t.resumen_trad, n.resumen)        AS resumen,
                    n.url, n.imagen_url, n.fuente_nombre,
                    c.nombre AS categoria, p.nombre AS pais, co.nombre AS continente,
-                   (t.titulo_trad IS NOT NULL OR t.resumen_trad IS NOT NULL) AS usa_trad
+                   (t.titulo_trad IS NOT NULL OR t.resumen_trad IS NOT NULL) AS tiene_traduccion
         """
     else:
         select_cols = """
             SELECT
-                   NULL::int AS traduccion_id,
+                   NULL::int                                   AS traduccion_id,
-                   n.fecha, n.titulo, n.resumen,
+                   n.fecha,
+                   n.titulo                                    AS titulo_original,
+                   n.resumen                                   AS resumen_original,
+                   NULL::text                                  AS titulo_traducido,
+                   NULL::text                                  AS resumen_traducido,
+                   n.titulo                                    AS titulo,
+                   n.resumen                                   AS resumen,
                    n.url, n.imagen_url, n.fuente_nombre,
                    c.nombre AS categoria, p.nombre AS pais, co.nombre AS continente,
-                   FALSE AS usa_trad
+                   FALSE                                        AS tiene_traduccion
         """
 
     order_clause = " ORDER BY n.fecha DESC NULLS LAST"

static/style.css

@@ -159,4 +159,39 @@ a { color: var(--secondary-color); text-decoration: none; font-weight: 500; } a:
     max-height: none;
     overflow: visible;
 }
+/* Pestañas por noticia */
+.tabs { width: 100%; }
+.tabs-header { display: flex; gap: 8px; margin-bottom: 8px; }
+.tab-btn {
+  background: rgba(255,255,255,0.7);
+  border: 1px solid var(--border-color);
+  border-radius: 999px;
+  padding: 6px 12px;
+  font-weight: 600;
+  cursor: pointer;
+}
+.tab-btn.active {
+  background: var(--gradiente-principal);
+  color: #fff !important;
+  border-color: transparent;
+}
+.tab-btn[disabled] {
+  opacity: .45;
+  cursor: not-allowed;
+}
+.tab-panel { display: none; }
+.tab-panel.active { display: block; }
 
+.badge {
+  display: inline-block;
+  margin-left: 8px;
+  font-size: .75rem;
+  padding: 2px 8px;
+  border-radius: 999px;
+  background: #e8f0ff;
+  color: var(--secondary-color);
+  vertical-align: middle;
+}
+.badge-secondary { background: #f1f3f5; color: #555; }
+.mini-link { margin-left: 8px; font-size: .8rem; }
+.m0 { margin: 0 0 6px 0; }

templates/_noticias_list.html

@@ -1,56 +1,89 @@
 <ul class="noticias-list">
-  {% for noticia in noticias %}
+  {% for n in noticias %}
-  <li class="noticia-item">
+  <li class="noticia-item" data-item>
-    {% if noticia.imagen_url %}
+    {% if n.imagen_url %}
-    <div class="noticia-imagen">
+      <div class="noticia-imagen">
-      <a href="{{ noticia.url }}" target="_blank" rel="noopener noreferrer">
+        <a href="{{ n.url }}" target="_blank" rel="noopener noreferrer">
-        <img src="{{ noticia.imagen_url }}" alt="Imagen para {{ noticia.titulo }}" loading="lazy">
+          <img src="{{ n.imagen_url }}" alt="Imagen para {{ n.titulo }}" loading="lazy">
-      </a>
+        </a>
-    </div>
+      </div>
     {% endif %}
 
     <div class="noticia-texto">
-      <h3 style="margin:0 0 6px 0;">
+      <div class="tabs">
-        <a href="{{ noticia.url }}" target="_blank" rel="noopener noreferrer">{{ noticia.titulo }}</a>
+        <div class="tabs-header" role="tablist">
-        {% if use_tr %}
+          <button class="tab-btn {% if use_tr and n.tiene_traduccion %}active{% endif %}" data-tab="trad" {% if not n.tiene_traduccion %}disabled{% endif %}>
-          {% if noticia.usa_tr %}
+            Traducido
-            <span class="badge" title="Mostrando traducción">Traducido</span>
+          </button>
-          {% else %}
+          <button class="tab-btn {% if not (use_tr and n.tiene_traduccion) %}active{% endif %}" data-tab="orig">
-            <span class="badge" title="Mostrando original">Original</span>
+            Original
-          {% endif %}
+          </button>
-        {% endif %}
+        </div>
-      </h3>
 
-      <div class="noticia-meta">
+        <div class="tabs-body">
-        <span>
+          <div class="tab-panel {% if use_tr and n.tiene_traduccion %}active{% endif %}" data-panel="trad">
-          <i class="far fa-calendar-alt"></i>
+            <h3 class="m0">
-          {% if noticia.fecha %}
+              <a href="{{ n.url }}" target="_blank" rel="noopener noreferrer">
-            {% if noticia.fecha is string %}
+                {{ n.titulo_traducido or n.titulo }}
-              {{ noticia.fecha }}
+              </a>
-            {% else %}
+              {% if n.tiene_traduccion %}
-              {{ noticia.fecha.strftime('%d-%m-%Y %H:%M') }}
+                <span class="badge" title="Mostrando traducción">ES</span>
-            {% endif %}
+                {% if n.traduccion_id %}
-          {% else %}
+                  <a class="mini-link" href="{{ url_for('noticia', tr_id=n.traduccion_id) }}">ver detalle</a>
-            N/D
+                {% endif %}
-          {% endif %}
+              {% endif %}
-        </span>
+            </h3>
-        {% if noticia.fuente_nombre %}
-          | <span><i class="fas fa-newspaper"></i> <strong>{{ noticia.fuente_nombre }}</strong></span>
-        {% endif %}
-        {% if noticia.categoria %}
-          | <span><i class="fas fa-tag"></i> {{ noticia.categoria }}</span>
-        {% endif %}
-        {% if noticia.pais %}
-          | <span><i class="fas fa-globe-americas"></i> {{ noticia.pais }}</span>
-        {% endif %}
-      </div>
 
-      <div class="resumen-container">
+            <div class="noticia-meta">
-        {% set resumen_txt = noticia.resumen | safe_html %}
+              <span><i class="far fa-calendar-alt"></i>
-        <div class="resumen clamp">{{ resumen_txt }}</div>
+                {% if n.fecha %}
-        {% if noticia.resumen and noticia.resumen|length > 280 %}
+                  {% if n.fecha is string %}{{ n.fecha }}{% else %}{{ n.fecha.strftime('%d-%m-%Y %H:%M') }}{% endif %}
-          <button class="ver-mas-btn" type="button">Ver más</button>
+                {% else %}N/D{% endif %}
-        {% endif %}
+              </span>
+              {% if n.fuente_nombre %} | <span><i class="fas fa-newspaper"></i> <strong>{{ n.fuente_nombre }}</strong></span>{% endif %}
+              {% if n.categoria %} | <span><i class="fas fa-tag"></i> {{ n.categoria }}</span>{% endif %}
+              {% if n.pais %} | <span><i class="fas fa-globe-americas"></i> {{ n.pais }}</span>{% endif %}
+            </div>
+
+            <div class="resumen-container">
+              {% set resumen_txt = (n.resumen_traducido or n.resumen) | safe_html %}
+              <div class="resumen-corto">{{ resumen_txt | truncate(280, True) }}</div>
+              <div class="resumen-completo" style="display:none;">{{ resumen_txt }}</div>
+              {% if (n.resumen_traducido or n.resumen) and (n.resumen_traducido or n.resumen)|length > 280 %}
+                <button class="ver-mas-btn" type="button">Ver más</button>
+              {% endif %}
+            </div>
+          </div>
+
+          <div class="tab-panel {% if not (use_tr and n.tiene_traduccion) %}active{% endif %}" data-panel="orig">
+            <h3 class="m0">
+              <a href="{{ n.url }}" target="_blank" rel="noopener noreferrer">
+                {{ n.titulo_original or n.titulo }}
+              </a>
+              <span class="badge badge-secondary">ORIG</span>
+            </h3>
+
+            <div class="noticia-meta">
+              <span><i class="far fa-calendar-alt"></i>
+                {% if n.fecha %}
+                  {% if n.fecha is string %}{{ n.fecha }}{% else %}{{ n.fecha.strftime('%d-%m-%Y %H:%M') }}{% endif %}
+                {% else %}N/D{% endif %}
+              </span>
+              {% if n.fuente_nombre %} | <span><i class="fas fa-newspaper"></i> <strong>{{ n.fuente_nombre }}</strong></span>{% endif %}
+              {% if n.categoria %} | <span><i class="fas fa-tag"></i> {{ n.categoria }}</span>{% endif %}
+              {% if n.pais %} | <span><i class="fas fa-globe-americas"></i> {{ n.pais }}</span>{% endif %}
+            </div>
+
+            <div class="resumen-container">
+              {% set resumen_orig = (n.resumen_original or n.resumen) | safe_html %}
+              <div class="resumen-corto">{{ resumen_orig | truncate(280, True) }}</div>
+              <div class="resumen-completo" style="display:none;">{{ resumen_orig }}</div>
+              {% if (n.resumen_original or n.resumen) and (n.resumen_original or n.resumen)|length > 280 %}
+                <button class="ver-mas-btn" type="button">Ver más</button>
+              {% endif %}
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   </li>
@@ -72,62 +105,75 @@
 {% if total_pages and total_pages > 1 %}
 <nav class="pagination" aria-label="Paginación de noticias" style="margin-top:15px;">
   {% set current = page %}
-
+  {% if current > 1 %}<a href="#" class="page-link" data-page="{{ current - 1 }}">&laquo; Anterior</a>{% endif %}
-  {% if current > 1 %}
-    <a href="#" class="page-link" data-page="{{ current - 1 }}">&laquo; Anterior</a>
-  {% endif %}
-
   {% set start = 1 if current - 2 < 1 else current - 2 %}
   {% set end = total_pages if current + 2 > total_pages else current + 2 %}
-
   {% if start > 1 %}
     <a href="#" class="page-link" data-page="1">1</a>
     {% if start > 2 %}<span class="page-link">…</span>{% endif %}
   {% endif %}
-
   {% for p in range(start, end + 1) %}
-    {% if p == current %}
+    {% if p == current %}<span class="page-link active">{{ p }}</span>
-      <span class="page-link active">{{ p }}</span>
+    {% else %}<a href="#" class="page-link" data-page="{{ p }}">{{ p }}</a>{% endif %}
-    {% else %}
-      <a href="#" class="page-link" data-page="{{ p }}">{{ p }}</a>
-    {% endif %}
   {% endfor %}
-
   {% if end < total_pages %}
     {% if end < total_pages - 1 %}<span class="page-link">…</span>{% endif %}
     <a href="#" class="page-link" data-page="{{ total_pages }}">{{ total_pages }}</a>
   {% endif %}
-
+  {% if current < total_pages %}<a href="#" class="page-link" data-page="{{ current + 1 }}">Siguiente &raquo;</a>{% endif %}
-  {% if current < total_pages %}
-    <a href="#" class="page-link" data-page="{{ current + 1 }}">Siguiente &raquo;</a>
-  {% endif %}
 </nav>
 {% endif %}
 
 <script>
 (function () {
-  if (window.__noticiasToggleBound) return;
+  if (window.__noticiasHandlersBound) return;
-  window.__noticiasToggleBound = true;
+  window.__noticiasHandlersBound = true;
 
-  const container = document.getElementById('noticias-container') || document;
+  const root = document.getElementById('noticias-container') || document;
 
-  container.addEventListener('click', function (e) {
+  root.addEventListener('click', function(e){
-    const btn = e.target.closest('.ver-mas-btn');
+    const t = e.target;
-    if (!btn) return;
 
-    const wrap = btn.closest('.resumen-container');
+    // Ver más / Ver menos
-    if (!wrap) return;
+    const verMasBtn = t.closest('.ver-mas-btn');
+    if (verMasBtn) {
+      const wrap = verMasBtn.closest('.resumen-container');
+      if (!wrap) return;
+      const corto = wrap.querySelector('.resumen-corto');
+      const completo = wrap.querySelector('.resumen-completo');
+      const expanded = completo.style.display === 'block';
+      completo.style.display = expanded ? 'none' : 'block';
+      corto.style.display = expanded ? 'block' : 'none';
+      verMasBtn.textContent = expanded ? 'Ver más' : 'Ver menos';
+      return;
+    }
 
-    const resumen = wrap.querySelector('.resumen.clamp');
+    // Pestañas
-    if (!resumen) return;
+    const tabBtn = t.closest('.tab-btn');
+    if (tabBtn && !tabBtn.disabled) {
+      const li = tabBtn.closest('[data-item]');
+      const header = tabBtn.parentElement;
+      header.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
+      tabBtn.classList.add('active');
 
-    const isExpanded = resumen.classList.contains('expanded');
+      const wanted = tabBtn.getAttribute('data-tab');
-    if (isExpanded) {
+      li.querySelectorAll('.tab-panel').forEach(p => {
-      resumen.classList.remove('expanded');
+        p.classList.toggle('active', p.getAttribute('data-panel') === wanted);
-      btn.textContent = 'Ver más';
+      });
-    } else {
+    }
-      resumen.classList.add('expanded');
+
-      btn.textContent = 'Ver menos';
+    // Paginación (AJAX)
+    const pageLink = t.closest('.page-link[data-page]');
+    if (pageLink) {
+      e.preventDefault();
+      const url = new URL(window.location.href);
+      url.searchParams.set('page', pageLink.dataset.page);
+      fetch(url, { headers: { 'X-Requested-With': 'XMLHttpRequest' }})
+        .then(r => r.text())
+        .then(html => {
+          (document.getElementById('noticias-container') || document).innerHTML = html;
+        })
+        .catch(console.error);
     }
   });
 })();

templates/noticias.html

@@ -6,11 +6,8 @@
     <h2><i class="fas fa-filter" style="color: var(--secondary-color); margin-right: 10px;"></i>Filtrar Noticias</h2>
 
     <form method="get" action="{{ url_for('home') }}" id="filter-form">
-        <!-- Campos ocultos para paginación -->
         <input type="hidden" name="page" id="page" value="{{ page or 1 }}">
         <input type="hidden" name="per_page" id="per_page" value="{{ per_page or 20 }}">
-
-        <!-- Idioma/traducción por defecto -->
         <input type="hidden" name="lang" id="lang" value="{{ (lang or 'es') }}">
         {% if not use_tr %}
           <input type="hidden" name="orig" id="orig" value="1">
@@ -68,7 +65,6 @@
     </form>
 </div>
 
-<!-- Barra de estado de traducción -->
 <div class="card" style="margin-top: 16px; padding: 12px;">
   {% if use_tr %}
     <div class="alert alert-info" style="margin:0;">
@@ -84,7 +80,6 @@
 </div>
 
 <div id="noticias-container" style="margin-top:16px;">
-    {# El parcial incluye la lista + la paginación #}
     {% include '_noticias_list.html' %}
 </div>
 
@@ -111,7 +106,6 @@ document.addEventListener('DOMContentLoaded', function() {
     }
 
     async function cargarNoticias(keepPage) {
-        // Si cambiamos filtros manualmente, reiniciamos a página 1
         if (!keepPage) pageInput.value = 1;
 
         const formData = new FormData(form);
@@ -135,40 +129,17 @@ document.addEventListener('DOMContentLoaded', function() {
         }
     }
 
-    // Envío del formulario (filtrar) -> page = 1
     form.addEventListener('submit', function(e) {
         e.preventDefault();
         cargarNoticias(false);
     });
 
-    // Clic en enlaces de paginación (delegación)
-    document.addEventListener('click', function(e) {
-        const link = e.target.closest('a.page-link');
-        if (link) {
-            // soporta data-page o parseo del href
-            let nextPage = link.dataset.page;
-            if (!nextPage) {
-                try {
-                    const u = new URL(link.href);
-                    nextPage = u.searchParams.get('page');
-                } catch(_) {}
-            }
-            if (nextPage) {
-                e.preventDefault();
-                pageInput.value = nextPage;
-                cargarNoticias(true);
-            }
-        }
-    });
-
-    // Conmutar traducciones <-> originales manteniendo filtros
     const toggleOrig = document.getElementById('toggle-orig');
     const toggleTr = document.getElementById('toggle-tr');
 
     if (toggleOrig) {
         toggleOrig.addEventListener('click', function(e) {
             e.preventDefault();
-            // orig=1 fuerza originales
             origInput.value = '1';
             cargarNoticias(false);
         });
@@ -176,22 +147,18 @@ document.addEventListener('DOMContentLoaded', function() {
     if (toggleTr) {
         toggleTr.addEventListener('click', function(e) {
             e.preventDefault();
-            // orig vacío => usar traducciones
             origInput.value = '';
-            // asegúrate de tener lang (por si el back usa default)
             if (!langInput.value) langInput.value = 'es';
             cargarNoticias(false);
         });
     }
 
-    // Inicializaciones
     continenteSelect.addEventListener('change', function() {
         filtrarPaises();
-        // al cambiar continente, forzamos recarga desde página 1
         cargarNoticias(false);
     });
 
-    filtrarPaises(); // Ejecutar al inicio
+    filtrarPaises();
 });
 </script>
 {% endblock %}