Minor UI tweaks for entrelineas.

This commit is contained in:
Julio Ruiz 2026-05-12 18:59:24 -05:00
parent bbb19240fc
commit 08be5faf14
2 changed files with 56 additions and 13 deletions

View File

@ -96,7 +96,7 @@ function onToggleFavorite() {
<template> <template>
<UDashboardPanel id="entrelinea-detail"> <UDashboardPanel id="entrelinea-detail">
<UDashboardNavbar :title="document.origin||title" :toggle="false"> <UDashboardNavbar :title="document.studies?.[0]?.title" :toggle="false">
<template #leading> <template #leading>
<UButton <UButton
icon="i-lucide-x" icon="i-lucide-x"
@ -105,9 +105,22 @@ function onToggleFavorite() {
class="-ms-1.5" class="-ms-1.5"
@click="emits('close')" @click="emits('close')"
/> />
<UBadge
v-if="document.studies?.[0]?.date"
:label="String(document.studies[0].date).toUpperCase()"
color="primary"
variant="subtle"
/>
</template> </template>
<template #right> <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'"> <UTooltip :text="isFav ? 'Quitar de mi lista' : 'Guardar en mi lista'">
<UButton <UButton
:icon="isFav ? 'i-lucide-bookmark-check' : 'i-lucide-bookmark-plus'" :icon="isFav ? 'i-lucide-bookmark-check' : 'i-lucide-bookmark-plus'"
@ -127,17 +140,19 @@ function onToggleFavorite() {
:label="String(document.filter).toUpperCase()" :label="String(document.filter).toUpperCase()"
color="neutral" color="neutral"
variant="subtle" variant="subtle"
size="sm"
/> />
<UBadge <UBadge
v-if="document.type" v-if="document.type"
:label="String(document.type).toUpperCase()" :label="String(document.type).toUpperCase()"
color="neutral" color="neutral"
variant="subtle" variant="subtle"
size="sm"
/> />
<UBadge
<span v-if="document.page != null">Página {{ document.page }}</span> v-if="document.origin"
:label="String(document.origin).toUpperCase()"
color="neutral"
variant="soft"
/>
</div> </div>
</div> </div>
@ -173,9 +188,14 @@ function onToggleFavorite() {
devolvió, si no el HTML crudo del documento. --> devolvió, si no el HTML crudo del documento. -->
<article <article
v-if="bodyHtml" v-if="bodyHtml"
class="prose prose-sm max-w-none dark:prose-invert" >
<div
v-html="bodyHtml" 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"> <p v-else class="text-sm text-muted">
No hay entrelínea para esta coincidencia. No hay entrelínea para esta coincidencia.
</p> </p>

View File

@ -50,7 +50,7 @@ const { locale } = useI18n()
* usuario haya puesto en `EXTRA_FILTER_BY`. Es un computed para que se * usuario haya puesto en `EXTRA_FILTER_BY`. Es un computed para que se
* reevalúe automáticamente cuando cambia el idioma. */ * reevalúe automáticamente cuando cambia el idioma. */
const filterBy = computed(() => { const filterBy = computed(() => {
const localeFilter = `locale:=${$i18n.locale.value}` const localeFilter = `locale:=${locale.value}`
return EXTRA_FILTER_BY ? `${localeFilter} && ${EXTRA_FILTER_BY}` : localeFilter return EXTRA_FILTER_BY ? `${localeFilter} && ${EXTRA_FILTER_BY}` : localeFilter
}) })
@ -355,11 +355,11 @@ function highlightedFor(hit: TypesenseHit, field: string): string | null {
<div <div
v-for="(hit, index) in hits" v-for="(hit, index) in hits"
:key="hit.document.id ?? index" :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="[ :class="[
selected && selected.id === hit.document.id selected && selected.id === hit.document.id
? 'border-primary bg-primary/10 text-highlighted' ? 'bg-primary/10 text-highlighted'
: 'border-transparent text-toned hover:border-primary hover:bg-primary/5' : 'border-gray-200 text-toned hover:bg-primary/5'
]" ]"
@click="selected = hit.document" @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 <!-- Título pequeño = Origin (cae al id si no hay origin para no
dejar la fila huérfana). --> dejar la fila huérfana). -->
<div class="min-w-0 flex-1 flex gap-2"> <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 <UBadge
v-if="hit.document?.filter" v-if="hit.document?.filter"
:label="hit.document?.filter" :label="hit.document?.filter"
@ -383,9 +399,6 @@ function highlightedFor(hit: TypesenseHit, field: string): string | null {
color="neutral" color="neutral"
class="mb-1 uppercase" 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> </div>
<UTooltip :text="isFav(hit.document) ? 'Quitar de mi lista' : 'Guardar en mi lista'"> <UTooltip :text="isFav(hit.document) ? 'Quitar de mi lista' : 'Guardar en mi lista'">
<UButton <UButton
@ -399,6 +412,10 @@ function highlightedFor(hit: TypesenseHit, field: string): string | null {
</UTooltip> </UTooltip>
</div> </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 <!-- La entrelínea (text). Si Typesense devolvió un snippet con
highlight, lo pintamos con v-html para que aparezca el <mark>; highlight, lo pintamos con v-html para que aparezca el <mark>;
si no, mostramos el HTML crudo de `text`. --> 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" class="snippet-html text-sm text-toned line-clamp-3"
v-html="highlightedFor(hit, 'text') || hit.document.text" v-html="highlightedFor(hit, 'text') || hit.document.text"
/> />
<USeparator class="my-2"/>
<div class="text-xs text-dimmed">
{{ hit.document?.origin }}
</div>
</div> </div>
<div <div