From 08be5faf147b5645bd217859112f854991bda67f Mon Sep 17 00:00:00 2001
From: Julio Ruiz <julio.ruiz@fusionary.com>
Date: Tue, 12 May 2026 18:59:24 -0500
Subject: [PATCH] Minor UI tweaks for entrelineas.

---
 .../entrelineas/EntrelineaDetail.vue          | 32 +++++++++++++---
 app/pages/entrelineas.vue                     | 37 +++++++++++++++----
 2 files changed, 56 insertions(+), 13 deletions(-)

diff --git a/app/components/entrelineas/EntrelineaDetail.vue b/app/components/entrelineas/EntrelineaDetail.vue
index 365867d..82693bd 100644
--- a/app/components/entrelineas/EntrelineaDetail.vue
+++ b/app/components/entrelineas/EntrelineaDetail.vue
@@ -96,7 +96,7 @@ function onToggleFavorite() {
 
 <template>
   <UDashboardPanel id="entrelinea-detail">
-    <UDashboardNavbar :title="document.origin||title" :toggle="false">
+    <UDashboardNavbar :title="document.studies?.[0]?.title" :toggle="false">
       <template #leading>
         <UButton
           icon="i-lucide-x"
@@ -105,9 +105,22 @@ function onToggleFavorite() {
           class="-ms-1.5"
           @click="emits('close')"
         />
+         <UBadge
+          v-if="document.studies?.[0]?.date"
+          :label="String(document.studies[0].date).toUpperCase()"
+          color="primary"
+          variant="subtle"
+        />
       </template>
 
       <template #right>
+        <UBadge
+          v-if="document.page"
+          :label="`Página ${document.page}`"
+          color="error"
+          variant="subtle"
+          size="sm"
+        />
         <UTooltip :text="isFav ? 'Quitar de mi lista' : 'Guardar en mi lista'">
           <UButton
             :icon="isFav ? 'i-lucide-bookmark-check' : 'i-lucide-bookmark-plus'"
@@ -127,17 +140,19 @@ function onToggleFavorite() {
           :label="String(document.filter).toUpperCase()"
           color="neutral"
           variant="subtle"
-          size="sm"
         />
         <UBadge
           v-if="document.type"
           :label="String(document.type).toUpperCase()"
           color="neutral"
           variant="subtle"
-          size="sm"
         />
-
-        <span v-if="document.page != null">Página {{ document.page }}</span>
+        <UBadge
+          v-if="document.origin"
+          :label="String(document.origin).toUpperCase()"
+          color="neutral"
+          variant="soft"
+        />
       </div>
     </div>
 
@@ -173,9 +188,14 @@ function onToggleFavorite() {
              devolvió, si no el HTML crudo del documento. -->
         <article
           v-if="bodyHtml"
-          class="prose prose-sm max-w-none dark:prose-invert"
+        >
+        <div
           v-html="bodyHtml"
+          class="prose prose-sm max-w-none"
         />
+        <USeparator class="my-4" />
+        <p class="font-semibold text-sm">{{ document.origin }}</p>
+        </article> 
         <p v-else class="text-sm text-muted">
           No hay entrelínea para esta coincidencia.
         </p>
diff --git a/app/pages/entrelineas.vue b/app/pages/entrelineas.vue
index 9d05006..c121f73 100644
--- a/app/pages/entrelineas.vue
+++ b/app/pages/entrelineas.vue
@@ -50,7 +50,7 @@ const { locale } = useI18n()
  *  usuario haya puesto en `EXTRA_FILTER_BY`. Es un computed para que se
  *  reevalúe automáticamente cuando cambia el idioma. */
 const filterBy = computed(() => {
-  const localeFilter = `locale:=${$i18n.locale.value}`
+  const localeFilter = `locale:=${locale.value}`
   return EXTRA_FILTER_BY ? `${localeFilter} && ${EXTRA_FILTER_BY}` : localeFilter
 })
 
@@ -355,11 +355,11 @@ function highlightedFor(hit: TypesenseHit, field: string): string | null {
       <div
         v-for="(hit, index) in hits"
         :key="hit.document.id ?? index"
-        class="p-4 sm:px-6 text-sm cursor-pointer border-l-2 transition-colors"
+        class="p-4 sm:px-6 text-sm cursor-pointer transition-colors border-b-2"
         :class="[
           selected && selected.id === hit.document.id
-            ? 'border-primary bg-primary/10 text-highlighted'
-            : 'border-transparent text-toned hover:border-primary hover:bg-primary/5'
+            ? 'bg-primary/10 text-highlighted'
+            : 'border-gray-200 text-toned hover:bg-primary/5'
         ]"
         @click="selected = hit.document"
       >
@@ -367,6 +367,22 @@ function highlightedFor(hit: TypesenseHit, field: string): string | null {
           <!-- Título pequeño = Origin (cae al id si no hay origin para no
                dejar la fila huérfana). -->
           <div class="min-w-0 flex-1 flex gap-2">
+            <UBadge
+              v-if="hit.document?.studies?.[0]?.date"
+              :label="hit.document?.studies?.[0]?.date"
+              size="sm"
+              variant="subtle"
+              color="info"
+              class="mb-1 uppercase"
+            />
+            <UBadge
+              v-if="hit.document?.page"
+              :label="`Página ${hit.document?.page}`"
+              size="sm"
+              variant="subtle"
+              color="error"
+              class="mb-1 uppercase"
+            />
             <UBadge
               v-if="hit.document?.filter"
               :label="hit.document?.filter"
@@ -383,9 +399,6 @@ function highlightedFor(hit: TypesenseHit, field: string): string | null {
               color="neutral"
               class="mb-1 uppercase"
             />
-          <div class="text-sm font-semibold tracking-wide truncate">
-            {{ (hit.document.origin as string) || hit.document.id || `entrelinea_${index}` }}
-          </div>
           </div>
           <UTooltip :text="isFav(hit.document) ? 'Quitar de mi lista' : 'Guardar en mi lista'">
             <UButton
@@ -399,6 +412,10 @@ function highlightedFor(hit: TypesenseHit, field: string): string | null {
           </UTooltip>
         </div>
 
+        <div class="text-sm font-semibold tracking-wide truncate mb-2">
+          {{ (hit.document?.studies?.[0]?.title as string) || hit.document.id || `entrelinea_${index}` }}
+        </div>
+
         <!-- La entrelínea (text). Si Typesense devolvió un snippet con
              highlight, lo pintamos con v-html para que aparezca el <mark>;
              si no, mostramos el HTML crudo de `text`. -->
@@ -407,6 +424,12 @@ function highlightedFor(hit: TypesenseHit, field: string): string | null {
           class="snippet-html text-sm text-toned line-clamp-3"
           v-html="highlightedFor(hit, 'text') || hit.document.text"
         />
+
+        <USeparator class="my-2"/>
+
+        <div class="text-xs text-dimmed">
+          {{ hit.document?.origin }}
+        </div>
       </div>
 
       <div