From c883975e33c9aaba35a4eb2a2281e91ab27fe9de Mon Sep 17 00:00:00 2001
From: Julio Ruiz <julio.ruiz@fusionary.com>
Date: Thu, 21 May 2026 15:33:30 -0500
Subject: [PATCH] Removed old meili pages Renamed typesense pages for correct
 routes Updated initial route Fixed copy to clipboard dependency error in nuxt

---
 app/layouts/default.vue                       |  19 +-
 app/pages/actividades.vue                     | 261 ------
 app/pages/conferencias-typensense.vue         | 787 ------------------
 app/pages/conferencias.vue                    | 767 ++++++++++++++---
 ...s-typensense.vue => estudios-biblicos.vue} |   0
 app/pages/index.vue                           |   2 +-
 app/utils/textUtilities.ts                    |   4 +-
 7 files changed, 649 insertions(+), 1191 deletions(-)
 delete mode 100755 app/pages/actividades.vue
 delete mode 100644 app/pages/conferencias-typensense.vue
 mode change 100755 => 100644 app/pages/conferencias.vue
 rename app/pages/{estudios-typensense.vue => estudios-biblicos.vue} (100%)

diff --git a/app/layouts/default.vue b/app/layouts/default.vue
index d663dec..85ae94a 100755
--- a/app/layouts/default.vue
+++ b/app/layouts/default.vue
@@ -22,10 +22,9 @@ const { total: histTotal } = storeToRefs(history)
 const links = computed(() => {
   return [
     {
-      label: $i18n.t('nav.bible_studies'),
+      label: t('nav.bible_studies'),
       icon: 'ph:books',
-      to: '/actividades',
-      locale: locale.value,
+      to: '/estudios-biblicos',
       onSelect: () => { open.value = false }
     },
     {
@@ -34,18 +33,6 @@ const links = computed(() => {
       to: '/conferencias',
       onSelect: () => { open.value = false }
     },
-    {
-      label: t('nav.bible_studies_ts'),
-      icon: 'ph:books',
-      to: '/estudios-typensense',
-      onSelect: () => { open.value = false }
-    },
-    {
-      label: t('nav.conferences_ts'),
-      icon: 'ph:books',
-      to: '/conferencias-typensense',
-      onSelect: () => { open.value = false }
-    },
     {
       label: t('nav.between_the_lines'),
       icon: 'ph:list-magnifying-glass',
@@ -78,9 +65,7 @@ const links = computed(() => {
 </script>
 
 <template>
-  
   <UDashboardGroup unit="rem">
-    
     <UDashboardSidebar
       id="default"
       v-model:open="open"
diff --git a/app/pages/actividades.vue b/app/pages/actividades.vue
deleted file mode 100755
index 7191233..0000000
--- a/app/pages/actividades.vue
+++ /dev/null
@@ -1,261 +0,0 @@
-<script setup lang="ts">
-import { computed, ref, watch, onMounted, onBeforeUnmount } from 'vue'
-import { breakpointsTailwind, useDebounce } from '@vueuse/core'
-import type { SearchHit } from '~/types'
-import InboxActivity from '~/components/inbox/InboxActivity.vue'
-import { useSettingsStore } from '~/stores/settings'
-
-const { $i18n } = useNuxtApp();
-const t = $i18n.t;
-
-const REQUEST_TIMEOUT_MS = 15000
-
-const settings = useSettingsStore()
-
-// ── Restaurar estado desde URL antes de crear los refs ─────────────────────
-const { query: q0, page: p0, scroll: s0, selectedId: sid0 } = useSearchUrlState()
-
-const query = ref(q0)
-const debouncedQuery = useDebounce(query, 150)
-const loading = ref(false)
-const loadingMore = ref(false)
-const errorMsg = ref<string | null>(null)
-
-const meili = useMeiliSearchRef()
-
-const hits = ref<SearchHit[]>([])
-const total = ref(0)
-const activePage = ref(p0)
-
-const totalPages = computed(() => Math.max(1, Math.ceil(total.value / settings.pageSize)))
-
-const hasMore = computed(() =>
-  settings.paginationType === 'infinite_scroll' ? hits.value.length < total.value : false
-)
-
-let searchSeq = 0
-let abortController: AbortController | null = null
-
-async function runSearch(q: string, page = 1, append = false) {
-  abortController?.abort()
-  const ac = new AbortController()
-  abortController = ac
-
-  const seq = ++searchSeq
-  if (append) loadingMore.value = true
-  else loading.value = true
-  errorMsg.value = null
-
-  const timeoutId = setTimeout(() => ac.abort(), REQUEST_TIMEOUT_MS)
-
-  const isInfinite = settings.paginationType === 'infinite_scroll'
-  const offset = isInfinite
-    ? (append ? hits.value.length : 0)
-    : (page - 1) * settings.pageSize
-
-  try {
-    const res = await meili.index(`activities_${$i18n.locale.value.toUpperCase()}`).search(q || '', {
-      attributesToRetrieve: ['*'],
-      showMatchesPosition: true,
-      limit: settings.pageSize,
-      offset,
-      sort: q ? undefined : ['isodate:desc']
-    }, { signal: ac.signal })
-
-    if (seq !== searchSeq) return
-
-    const newHits = (res?.hits ?? []) as SearchHit[]
-    hits.value = append ? hits.value.concat(newHits) : newHits
-    total.value = res?.estimatedTotalHits ?? hits.value.length
-    if (!append) activePage.value = page
-  } catch (err: unknown) {
-    const name = (err as { name?: string })?.name
-    if (name === 'AbortError') return
-    if (seq !== searchSeq) return
-    errorMsg.value = (err as Error)?.message || 'Error al buscar.'
-    if (!append) {
-      hits.value = []
-      total.value = 0
-    }
-  } finally {
-    clearTimeout(timeoutId)
-    if (seq === searchSeq) {
-      loading.value = false
-      loadingMore.value = false
-    }
-  }
-}
-
-function loadMore() {
-  if (settings.paginationType !== 'infinite_scroll') return
-  if (loadingMore.value || loading.value || !hasMore.value) return
-  runSearch(query.value, activePage.value, true)
-}
-
-function goToPage(p: number) {
-  activePage.value = p
-  hits.value = []
-  runSearch(query.value, p, false)
-}
-
-function retry() {
-  runSearch(query.value, activePage.value, false)
-}
-
-// ── Selección ──────────────────────────────────────────────────────────────
-const selectedActivity = ref<SearchHit | null>(null)
-
-const isActivityPanelOpen = computed({
-  get() { return !!selectedActivity.value },
-  set(value: boolean) { if (!value) selectedActivity.value = null }
-})
-
-// ID del item seleccionado para sincronizar con la URL
-const selectedId = computed(() => selectedActivity.value?._id?.toString() ?? null)
-
-// ── Scroll ref expuesto desde InboxList ────────────────────────────────────
-const inboxListRef = ref<{ listEl: HTMLElement | null } | null>(null)
-const listEl = computed(() => inboxListRef.value?.listEl ?? null)
-
-// ── Sincronización con URL ─────────────────────────────────────────────────
-useSearchUrlSync({ query, page: activePage, selectedId, scrollEl: listEl })
-
-// ── Ciclo de vida ──────────────────────────────────────────────────────────
-onMounted(async () => {
-  await runSearch(q0, p0, false)
-
-  // Restaurar scroll
-  restoreScrollPosition(listEl.value, s0)
-
-  // Restaurar item seleccionado
-  if (sid0) {
-    const found = hits.value.find(h => String(h._id) === sid0)
-    if (found) selectedActivity.value = found
-  }
-})
-
-onBeforeUnmount(() => {
-  abortController?.abort()
-})
-
-// Query debounced: solo dispara cuando el usuario cambia la búsqueda,
-// NO en la carga inicial (debouncedQuery ya arranca en q0).
-watch(debouncedQuery, (q) => {
-  hits.value = []
-  total.value = 0
-  activePage.value = 1
-  runSearch(q, 1, false)
-})
-
-watch(hits, () => {
-  if (!selectedActivity.value) return
-  const stillThere = hits.value.find(h => h._id === selectedActivity.value?._id)
-  if (!stillThere) selectedActivity.value = null
-})
-
-const breakpoints = useBreakpoints(breakpointsTailwind)
-const isMobile = breakpoints.smaller('lg')
-
-useDetailHistory(isActivityPanelOpen, isMobile)
-</script>
-
-<template>
-  <UDashboardPanel
-    id="activities-list"
-    :default-size="28"
-    :min-size="22"
-    :max-size="40"
-    resizable
-  >
-    <UDashboardNavbar :title="t('nav.bible_studies')">
-      <template #leading>
-        <UDashboardSidebarCollapse />
-      </template>
-
-      <template #trailing>
-        <UBadge :label="total" variant="subtle" />
-      </template>
-    </UDashboardNavbar>
-
-    <div class="px-4 sm:px-6 py-3 border-b border-default">
-      <UInput
-        v-model="query"
-        icon="i-lucide-search"
-        :placeholder="t('search.placeholder')"
-        :loading="loading"
-        size="md"
-        class="w-full"
-      />
-      <p class="mt-1.5 flex items-center gap-1 text-[11px] text-dimmed">
-        <UIcon name="i-lucide-lightbulb" class="size-3" />
-        <span v-html="t('search.tip')" />
-      </p>
-    </div>
-
-    <UAlert
-      v-if="errorMsg"
-      :title="errorMsg"
-      color="error"
-      variant="subtle"
-      icon="i-lucide-triangle-alert"
-      class="mx-4 my-2"
-      :actions="[{ label: 'Reintentar', color: 'neutral', variant: 'outline', onClick: retry }]"
-    />
-
-    <InboxList
-      ref="inboxListRef"
-      v-model="selectedActivity"
-      :activities="hits"
-      :query="debouncedQuery"
-      :has-more="hasMore"
-      :loading="loading"
-      :loading-more="loadingMore"
-      :show-end-message="settings.paginationType === 'infinite_scroll'"
-      collection="activities"
-      @load-more="loadMore"
-    />
-
-    <div
-      v-if="settings.paginationType === 'numbered' && totalPages > 1 && !loading"
-      class="px-4 py-3 border-t border-default flex justify-center shrink-0"
-    >
-      <UPagination
-        :page="activePage"
-        :total="total"
-        :items-per-page="settings.pageSize"
-        size="sm"
-        @update:page="goToPage"
-      />
-    </div>
-  </UDashboardPanel>
-
-  <InboxActivity
-    v-if="selectedActivity"
-    :activity="selectedActivity"
-    collection="activities"
-    :query="debouncedQuery"
-    @close="selectedActivity = null"
-  />
-  <div v-else class="hidden lg:flex flex-1 items-center justify-center">
-    <div class="flex flex-col items-center gap-2 text-dimmed">
-      <UIcon name="i-lucide-search" class="size-16" />
-      <p class="text-sm">
-        {{ query ? t('search.listselect') : t('search.emptytext') }}
-      </p>
-    </div>
-  </div>
-
-  <ClientOnly>
-    <USlideover v-if="isMobile" v-model:open="isActivityPanelOpen">
-      <template #content>
-        <InboxActivity
-          v-if="selectedActivity"
-          :activity="selectedActivity"
-          collection="activities"
-          :query="debouncedQuery"
-          @close="selectedActivity = null"
-        />
-      </template>
-    </USlideover>
-  </ClientOnly>
-</template>
diff --git a/app/pages/conferencias-typensense.vue b/app/pages/conferencias-typensense.vue
deleted file mode 100644
index 5b04c99..0000000
--- a/app/pages/conferencias-typensense.vue
+++ /dev/null
@@ -1,787 +0,0 @@
-<script setup lang="ts">
-import { computed, ref, watch, onMounted, onBeforeUnmount } from 'vue'
-import { breakpointsTailwind, useDebounce } from '@vueuse/core'
-import EstudiosTypensenseDetail from '~/components/estudiosTypensense/EstudiosTypensenseDetail.vue'
-import { useSettingsStore } from '~/stores/settings'
-
-const PARAGRAPHS_COLLECTION = 'paragraphs'
-const DOCUMENTS_COLLECTION = 'documents'
-const QUERY_BY = 'text'
-const FAVORITES_COLLECTION = 'conferences-ts'
-
-const { $i18n } = useNuxtApp()
-const t = $i18n.t
-const { locale } = useI18n()
-
-const filterBy = computed(() => `locale:=${locale.value} && type:=conferences`)
-const REQUEST_TIMEOUT_MS = 15000
-
-const settings = useSettingsStore()
-
-// ── Restaurar estado desde URL antes de crear los refs ─────────────────────
-const { query: q0, page: p0, scroll: s0, selectedId: sid0 } = useSearchUrlState()
-
-const query = ref(q0)
-const debouncedQuery = useDebounce(query, 150)
-const loading = ref(false)
-const loadingMore = ref(false)
-const errorMsg = ref<string | null>(null)
-
-// ---- Types ----------------------------------------------------------------
-
-interface ParagraphDoc {
-  id?: string
-  document_id: string
-  text: string
-  number: number
-  locale: string
-  type: string
-}
-
-interface DocMeta {
-  id: string
-  title: string
-  date?: string
-  timestamp?: number
-  place?: string
-  city?: string
-  state?: string
-  country?: string
-  type?: string
-  slug?: string
-}
-
-export interface DocumentDoc extends DocMeta {
-  code: string
-  locale: string
-  files?: {
-    youtube?: string
-    video?: string
-    audio?: string
-    booklet?: string
-    simple?: string
-  }
-  body?: string
-  [key: string]: unknown
-}
-
-interface TypesenseHighlight {
-  field?: string
-  snippet?: string
-  value?: string
-  matched_tokens?: string[]
-}
-
-export interface TypesenseParagraphHit {
-  document: ParagraphDoc
-  highlights?: TypesenseHighlight[]
-  highlight?: Record<string, { snippet?: string, value?: string }>
-  text_match?: number
-}
-
-interface TypesenseGroupedHit {
-  group_key: string[]
-  hits: TypesenseParagraphHit[]
-}
-
-interface TypesenseSearchResponse {
-  found: number
-  grouped_hits?: TypesenseGroupedHit[]
-}
-
-interface SearchGroup {
-  docId: string
-  firstHit: TypesenseParagraphHit
-  allHits: TypesenseParagraphHit[]
-}
-
-interface BrowseItem {
-  docId: string
-  meta: DocMeta
-}
-
-interface DisplayGroup {
-  docId: string
-  meta: DocMeta | undefined
-  firstHit: TypesenseParagraphHit | null
-}
-
-// ---- State ----------------------------------------------------------------
-
-// Modo búsqueda (con query): grupos devueltos por Typesense
-const groupedHits = ref<SearchGroup[]>([])
-const total = ref(0)
-const currentPage = ref(1)
-
-const hasMore = computed(() =>
-  settings.paginationType === 'infinite_scroll' ? groupedHits.value.length < total.value : false
-)
-
-// Progressive display (sólo en scroll infinito)
-const visibleGroupCount = ref(10)
-
-const visibleGroups = computed(() =>
-  settings.paginationType === 'infinite_scroll'
-    ? groupedHits.value.slice(0, visibleGroupCount.value)
-    : groupedHits.value
-)
-
-const hasMoreVisible = computed(() =>
-  settings.paginationType === 'infinite_scroll' &&
-  visibleGroupCount.value < groupedHits.value.length
-)
-
-// Modo exploración (sin query): documentos ordenados por fecha
-const browseItems = ref<BrowseItem[]>([])
-const browseTotal = ref(0)
-const browsePage = ref(1)
-
-const hasMoreBrowse = computed(() =>
-  settings.paginationType === 'infinite_scroll'
-    ? browseItems.value.length < browseTotal.value
-    : false
-)
-
-// Grupo unificado para el template
-const displayGroups = computed((): DisplayGroup[] => {
-  if (!debouncedQuery.value.trim()) {
-    return browseItems.value.map(item => ({
-      docId: item.docId,
-      meta: item.meta,
-      firstHit: null
-    }))
-  }
-  return visibleGroups.value.map(g => ({
-    docId: g.docId,
-    meta: docCache.value[g.docId],
-    firstHit: g.firstHit
-  }))
-})
-
-// Paginación activa (compartida entre browse y search)
-const activePage = ref(p0)
-
-const displayTotal = computed(() =>
-  debouncedQuery.value.trim() ? total.value : browseTotal.value
-)
-
-const totalPages = computed(() =>
-  Math.max(1, Math.ceil(displayTotal.value / settings.pageSize))
-)
-
-// Cache de metadatos por document_id (sólo modo búsqueda)
-const docCache = ref<Record<string, DocMeta>>({})
-
-const { documentsApi } = useTypesenseApi()
-
-// ---- Batch fetch de metadatos de documentos -------------------------------
-
-async function fetchDocumentMeta(docIds: string[]) {
-  const unique = docIds.filter(id => id && !(id in docCache.value))
-  console.log('Fetching metadata for documents', unique)
-  try {
-    const res = await documentsApi.multiSearch({
-      multiSearchParameters: {},
-      multiSearchSearchesParameter: {
-        searches: [{
-          collection: DOCUMENTS_COLLECTION,
-          q: '*',
-          queryBy: 'title',
-          filterBy: `id:=[${unique.join(',')}]`,
-          includeFields: 'id,title,date,timestamp,place,city,state,country,type,slug',
-          perPage: unique.length,
-          page: 1
-        }]
-      }
-    })
-    const docHits = (res?.results?.[0] as { hits?: Array<{ document: DocMeta }> })?.hits ?? []
-    for (const hit of docHits) {
-      if (hit.document.id) {
-        docCache.value[hit.document.id] = hit.document
-      }
-    }
-  } catch (err) {
-    console.error('Error fetching document metadata', err)
-  }
-}
-
-// ---- Búsqueda de párrafos (con query) -------------------------------------
-
-let searchSeq = 0
-let timeoutId: ReturnType<typeof setTimeout> | null = null
-
-async function runSearch(q: string, page = 1, append = false) {
-  const seq = ++searchSeq
-  if (append) loadingMore.value = true
-  else loading.value = true
-  errorMsg.value = null
-
-  if (timeoutId) clearTimeout(timeoutId)
-  timeoutId = setTimeout(() => {
-    if (seq === searchSeq) {
-      loading.value = false
-      loadingMore.value = false
-      errorMsg.value = 'La búsqueda tardó demasiado. Inténtalo de nuevo.'
-    }
-  }, REQUEST_TIMEOUT_MS)
-
-  const isInfinite = settings.paginationType === 'infinite_scroll'
-  const typePage = isInfinite ? (append ? currentPage.value + 1 : 1) : page
-
-  try {
-    const multi = await documentsApi.multiSearch({
-      multiSearchParameters: {},
-      multiSearchSearchesParameter: {
-        searches: [{
-          collection: PARAGRAPHS_COLLECTION,
-          q: q || '*',
-          queryBy: QUERY_BY,
-          filterBy: filterBy.value,
-          perPage: settings.pageSize,
-          page: typePage,
-          highlightFullFields: QUERY_BY,
-          highlightFields: QUERY_BY,
-          highlightStartTag: '<mark class="search-match">',
-          highlightEndTag: '</mark>',
-          highlightAffixNumTokens: 30,
-          groupBy: 'document_id'
-        }]
-      }
-    })
-
-    if (seq !== searchSeq) return
-
-    const res = (multi?.results?.[0] ?? {}) as TypesenseSearchResponse
-    const rawGroups = res?.groupedHits ?? []
-
-    console.log('Raw groups', rawGroups)
-    const newGroups: SearchGroup[] = rawGroups.map(g => ({
-      docId: g.groupKey[0]!,
-      firstHit: g.hits[0]!,
-      allHits: g.hits
-    }))
-
-    if (!append) docCache.value = {}
-    const newDocIds = newGroups.map(g => g.docId).filter(Boolean)
-    await fetchDocumentMeta(newDocIds)
-
-    if (seq !== searchSeq) return
-
-    groupedHits.value = append ? groupedHits.value.concat(newGroups) : newGroups
-    total.value = res?.found ?? groupedHits.value.length
-    currentPage.value = typePage
-    if (!append) activePage.value = page
-  } catch (err: unknown) {
-    if (seq !== searchSeq) return
-    console.error('Typesense error', err)
-    errorMsg.value = (err as Error)?.message || 'Error al buscar.'
-    if (!append) {
-      groupedHits.value = []
-      total.value = 0
-    }
-  } finally {
-    if (seq === searchSeq) {
-      if (timeoutId) clearTimeout(timeoutId)
-      loading.value = false
-      loadingMore.value = false
-    }
-  }
-}
-
-// ---- Exploración por fecha (sin query) ------------------------------------
-
-async function runBrowse(page = 1, append = false) {
-  const seq = ++searchSeq
-  if (append) loadingMore.value = true
-  else loading.value = true
-  errorMsg.value = null
-
-  if (timeoutId) clearTimeout(timeoutId)
-  timeoutId = setTimeout(() => {
-    if (seq === searchSeq) {
-      loading.value = false
-      loadingMore.value = false
-      errorMsg.value = 'La búsqueda tardó demasiado. Inténtalo de nuevo.'
-    }
-  }, REQUEST_TIMEOUT_MS)
-
-  const isInfinite = settings.paginationType === 'infinite_scroll'
-  const typePage = isInfinite ? (append ? browsePage.value + 1 : 1) : page
-
-  try {
-    const multi = await documentsApi.multiSearch({
-      multiSearchParameters: {},
-      multiSearchSearchesParameter: {
-        searches: [{
-          collection: DOCUMENTS_COLLECTION,
-          q: '*',
-          queryBy: 'title',
-          filterBy: filterBy.value,
-          sortBy: 'timestamp:desc',
-          perPage: settings.pageSize,
-          page: typePage,
-          includeFields: 'id,title,date,timestamp,place,city,state,country,type,slug'
-        }]
-      }
-    })
-
-    if (seq !== searchSeq) return
-
-    const result = (multi?.results?.[0] as { found?: number, hits?: Array<{ document: DocMeta }> } | undefined)
-    const newItems = (result?.hits ?? []).map(h => ({
-      docId: h.document.id!,
-      meta: h.document
-    }))
-
-    browseItems.value = append ? browseItems.value.concat(newItems) : newItems
-    browseTotal.value = result?.found ?? browseItems.value.length
-    browsePage.value = typePage
-    if (!append) activePage.value = page
-  } catch (err: unknown) {
-    if (seq !== searchSeq) return
-    console.error('Typesense error', err)
-    errorMsg.value = (err as Error)?.message || 'Error al buscar.'
-    if (!append) {
-      browseItems.value = []
-      browseTotal.value = 0
-    }
-  } finally {
-    if (seq === searchSeq) {
-      if (timeoutId) clearTimeout(timeoutId)
-      loading.value = false
-      loadingMore.value = false
-    }
-  }
-}
-
-function loadMore() {
-  if (settings.paginationType !== 'infinite_scroll') return
-  if (loadingMore.value || loading.value || !hasMore.value) return
-  runSearch(query.value, currentPage.value, true)
-}
-
-function goToPage(p: number) {
-  activePage.value = p
-  if (!debouncedQuery.value.trim()) {
-    browseItems.value = []
-    runBrowse(p, false)
-  } else {
-    groupedHits.value = []
-    runSearch(query.value, p, false)
-  }
-}
-
-const listContainer = ref<HTMLElement | null>(null)
-
-function onListScroll() {
-  if (settings.paginationType !== 'infinite_scroll') return
-  const el = listContainer.value
-  if (!el) return
-  if (el.scrollHeight - el.scrollTop - el.clientHeight < 200) {
-    if (!debouncedQuery.value.trim()) {
-      if (hasMoreBrowse.value && !loadingMore.value && !loading.value) {
-        runBrowse(browsePage.value, true)
-      }
-    } else {
-      if (hasMoreVisible.value) {
-        visibleGroupCount.value += 10
-      } else if (hasMore.value && !loadingMore.value && !loading.value) {
-        loadMore()
-      }
-    }
-  }
-}
-
-function retry() {
-  if (!query.value.trim()) {
-    runBrowse(activePage.value, false)
-  } else {
-    runSearch(query.value, activePage.value, false)
-  }
-}
-
-onBeforeUnmount(() => { if (timeoutId) clearTimeout(timeoutId) })
-
-watch(debouncedQuery, (q) => {
-  activePage.value = 1
-  if (!q.trim()) {
-    groupedHits.value = []
-    total.value = 0
-    currentPage.value = 1
-    visibleGroupCount.value = 10
-    browseItems.value = []
-    browseTotal.value = 0
-    browsePage.value = 1
-    runBrowse(1, false)
-  } else {
-    browseItems.value = []
-    browseTotal.value = 0
-    browsePage.value = 1
-    groupedHits.value = []
-    total.value = 0
-    currentPage.value = 1
-    visibleGroupCount.value = 10
-    runSearch(q, 1, false)
-  }
-})
-
-// ---- Selección y carga del detalle ----------------------------------------
-
-const selectedDocId = ref<string | null>(null)
-const selectedDocument = ref<DocumentDoc | null>(null)
-const documentLoading = ref(false)
-const selectedParagraphs = ref<TypesenseParagraphHit[]>([])
-const paragraphsLoading = ref(false)
-
-const selectedHit = ref<TypesenseParagraphHit | null>(null)
-const selectedMatchingHits = ref<TypesenseParagraphHit[]>([])
-
-async function fetchFullDocument(docId: string) {
-  documentLoading.value = true
-  selectedDocument.value = null
-  try {
-    const res = await documentsApi.multiSearch({
-      multiSearchParameters: {},
-      multiSearchSearchesParameter: {
-        searches: [{
-          collection: DOCUMENTS_COLLECTION,
-          q: '*',
-          queryBy: 'title',
-          filterBy: `id:=${docId}`,
-          perPage: 1,
-          page: 1
-        }]
-      }
-    })
-    const docHits = (res?.results?.[0] as { hits?: Array<{ document: DocumentDoc }> })?.hits ?? []
-    selectedDocument.value = docHits[0]?.document ?? null
-  } catch (err) {
-    console.error('Error fetching document', err)
-    selectedDocument.value = null
-  } finally {
-    documentLoading.value = false
-  }
-}
-
-async function fetchDocumentParagraphs(docId: string) {
-  paragraphsLoading.value = true
-  selectedParagraphs.value = []
-  const PER_PAGE = 250
-  let page = 1
-  let totalParagraphs = 0
-  const all: Array<{ document: ParagraphDoc }> = []
-  try {
-    do {
-      const res = await documentsApi.multiSearch({
-        multiSearchParameters: {},
-        multiSearchSearchesParameter: {
-          searches: [{
-            collection: PARAGRAPHS_COLLECTION,
-            q: '*',
-            queryBy: '',
-            filterBy: `document_id:=${docId} && ${filterBy.value}`,
-            perPage: PER_PAGE,
-            page,
-            sortBy: 'number:asc'
-          }]
-        }
-      })
-      const result = (res?.results?.[0] as { found?: number, hits?: Array<{ document: ParagraphDoc }> } | undefined)
-      if (!result) break
-      if (page === 1) totalParagraphs = result.found ?? 0
-      all.push(...(result.hits ?? []))
-      page++
-    } while (all.length < totalParagraphs)
-    selectedParagraphs.value = all.map(h => ({ document: h.document }))
-  } catch (err) {
-    console.error('Error fetching paragraphs', err)
-    selectedParagraphs.value = []
-  } finally {
-    paragraphsLoading.value = false
-  }
-}
-
-async function selectGroup(group: DisplayGroup) {
-  selectedDocId.value = group.docId
-  selectedHit.value = group.firstHit
-  const searchGroup = groupedHits.value.find(g => g.docId === group.docId)
-  selectedMatchingHits.value = searchGroup?.allHits ?? []
-  fetchFullDocument(group.docId)
-  fetchDocumentParagraphs(group.docId)
-}
-
-const isPanelOpen = computed({
-  get() { return !!selectedDocId.value },
-  set(v: boolean) {
-    if (!v) {
-      selectedDocId.value = null
-      selectedDocument.value = null
-      selectedParagraphs.value = []
-      selectedHit.value = null
-      selectedMatchingHits.value = []
-    }
-  }
-})
-
-watch(groupedHits, () => {
-  if (!selectedDocId.value || !debouncedQuery.value.trim()) return
-  const still = groupedHits.value.find(g => g.docId === selectedDocId.value)
-  if (!still) {
-    selectedDocId.value = null
-    selectedDocument.value = null
-    selectedParagraphs.value = []
-    selectedHit.value = null
-    selectedMatchingHits.value = []
-  }
-})
-
-// ID del documento seleccionado para sincronizar con la URL
-const selectedId = computed(() => selectedDocId.value)
-
-// ── Sincronización con URL ─────────────────────────────────────────────────
-useSearchUrlSync({ query, page: activePage, selectedId, scrollEl: listContainer })
-
-// ── Ciclo de vida ──────────────────────────────────────────────────────────
-onMounted(async () => {
-  // Carga inicial: browse si no hay query, search si hay query
-  if (q0.trim()) {
-    await runSearch(q0, p0, false)
-  } else {
-    await runBrowse(p0, false)
-  }
-
-  // Restaurar scroll
-  restoreScrollPosition(listContainer.value, s0)
-
-  // Restaurar documento seleccionado
-  if (sid0) {
-    const group = displayGroups.value.find(g => g.docId === sid0)
-    if (group) {
-      selectGroup(group)
-    } else {
-      selectedDocId.value = sid0
-      fetchFullDocument(sid0)
-      fetchDocumentParagraphs(sid0)
-    }
-  }
-})
-
-const breakpoints = useBreakpoints(breakpointsTailwind)
-const isMobile = breakpoints.smaller('lg')
-
-useDetailHistory(isPanelOpen, isMobile)
-
-// ---- Helpers de presentación ----------------------------------------------
-
-function highlightedFor(hit: TypesenseParagraphHit, field: string): string | null {
-  const fromArr = hit.highlights?.find(h => h.field === field)
-  if (fromArr?.snippet) return fromArr.snippet
-  if (fromArr?.value) return fromArr.value
-  const fromObj = hit.highlight?.[field]
-  if (fromObj?.snippet) return fromObj.snippet
-  if (fromObj?.value) return fromObj.value
-  return null
-}
-
-function metaDate(meta: DocMeta | undefined): string {
-  if (!meta) return ''
-  const ts = meta.timestamp || (meta.date ? Math.floor(new Date(meta.date).getTime() / 1000) : null)
-  if (!ts) return meta.date || ''
-  return formatDate(ts)
-}
-
-function metaLocation(meta: DocMeta | undefined): string {
-  if (!meta) return ''
-  return formatLocation({
-    id: meta.id,
-    date: meta.timestamp ?? 0,
-    slug: meta.slug ?? '',
-    type: meta.type ?? '',
-    place: meta.place ?? '',
-    city: meta.city ?? '',
-    state: meta.state ?? '',
-    country: meta.country ?? '',
-    thumbnail: ''
-  })
-}
-</script>
-
-<template>
-  <UDashboardPanel
-    id="conferencias-ts-list"
-    :default-size="32"
-    :min-size="24"
-    :max-size="45"
-    resizable
-  >
-    <UDashboardNavbar :title="t('nav.conferences_ts')">
-      <template #leading>
-        <UDashboardSidebarCollapse />
-      </template>
-      <template #trailing>
-        <UBadge :label="displayTotal" variant="subtle" />
-      </template>
-    </UDashboardNavbar>
-
-    <div class="px-4 sm:px-6 py-3 border-b border-default">
-      <UInput
-        v-model="query"
-        icon="i-lucide-search"
-        :placeholder="t('search.placeholder')"
-        :loading="loading"
-        size="md"
-        class="w-full"
-      />
-    </div>
-
-    <UAlert
-      v-if="errorMsg"
-      :title="errorMsg"
-      color="error"
-      variant="subtle"
-      icon="i-lucide-triangle-alert"
-      class="mx-4 my-2"
-      :actions="[{ label: 'Reintentar', color: 'neutral', variant: 'outline', onClick: retry }]"
-    />
-
-    <div ref="listContainer" class="overflow-y-auto divide-y divide-default flex-1" @scroll="onListScroll">
-      <div
-        v-if="loading && !displayGroups.length"
-        class="flex items-center justify-center gap-2 py-16 text-sm text-muted"
-      >
-        <UIcon name="i-lucide-loader-circle" class="size-4 animate-spin" />
-        Buscando...
-      </div>
-
-      <div
-        v-else-if="!displayGroups.length"
-        class="flex flex-col items-center justify-center gap-2 py-16 text-dimmed text-sm"
-      >
-        <UIcon name="i-lucide-inbox" class="size-10" />
-        <p>{{ query ? `Sin coincidencias para "${query}"` : 'Sin resultados' }}</p>
-      </div>
-
-      <div
-        v-for="group in displayGroups"
-        :key="group.docId"
-        class="p-4 sm:px-6 text-sm cursor-pointer border-b-2 transition-colors"
-        :class="[
-          selectedDocId === group.docId
-            ? 'border-carpablue bg-carpablue/10'
-            : 'border-gray-200 hover:border-carpablue hover:bg-carpablue/5'
-        ]"
-        @click="selectGroup(group)"
-      >
-        <div class="mb-1">
-          <p class="text-sm font-semibold line-clamp-2 text-highlighted">
-            {{ group.meta?.title || group.docId }}
-          </p>
-        </div>
-
-        <p class="flex flex-col sm:flex-row sm:items-center gap-1 sm:gap-2 text-xs mb-2 text-muted">
-          <span
-            v-if="metaDate(group.meta)"
-            class="flex items-center gap-1"
-          >
-            <UIcon name="ph:calendar" class="size-4 text-carpablue" />
-            {{ metaDate(group.meta) }}
-          </span>
-          <span
-            v-if="metaLocation(group.meta)"
-            class="flex items-center gap-1 truncate"
-          >
-            <UIcon name="ph:map-pin" class="size-4 text-carpablue shrink-0" />
-            <span class="truncate">{{ metaLocation(group.meta) }}</span>
-          </span>
-        </p>
-
-        <!-- Snippet con highlight: solo en modo búsqueda -->
-        <div
-          v-if="group.firstHit"
-          class="snippet-html text-sm text-dimmed"
-          v-html="highlightedFor(group.firstHit, 'text') || group.firstHit.document.text"
-        />
-      </div>
-
-      <!-- Infinite scroll: cargando más -->
-      <div
-        v-if="settings.paginationType === 'infinite_scroll' && loadingMore"
-        class="flex items-center justify-center gap-2 py-4 text-sm text-muted"
-      >
-        <UIcon name="i-lucide-loader-circle" class="size-4 animate-spin" />
-        Cargando más...
-      </div>
-
-      <div
-        v-else-if="settings.paginationType === 'infinite_scroll' && displayGroups.length && !hasMoreBrowse && !hasMoreVisible && !hasMore && !loading"
-        class="py-3 text-center text-xs text-dimmed"
-      >
-        No hay más resultados
-      </div>
-    </div>
-
-    <!-- Paginación numerada -->
-    <div
-      v-if="settings.paginationType === 'numbered' && totalPages > 1 && !loading"
-      class="px-4 py-3 border-t border-default flex justify-center shrink-0"
-    >
-      <UPagination
-        :page="activePage"
-        :total="displayTotal"
-        :items-per-page="settings.pageSize"
-        size="sm"
-        @update:page="goToPage"
-      />
-    </div>
-  </UDashboardPanel>
-
-  <!-- Panel de detalle (escritorio) -->
-  <EstudiosTypensenseDetail
-    v-if="selectedDocId && !isMobile"
-    :document="selectedDocument"
-    :document-loading="documentLoading"
-    :paragraphs="selectedParagraphs"
-    :paragraphs-loading="paragraphsLoading"
-    :collection="FAVORITES_COLLECTION"
-    :query="debouncedQuery"
-    :selected-hit="selectedHit"
-    :selected-matching-hits="selectedMatchingHits"
-    @close="isPanelOpen = false"
-  />
-  <div v-else-if="!isMobile" class="hidden lg:flex flex-1 items-center justify-center">
-    <div class="flex flex-col items-center gap-2 text-dimmed">
-      <UIcon name="i-lucide-search" class="size-16" />
-      <p class="text-sm">Selecciona una conferencia para ver el detalle</p>
-    </div>
-  </div>
-
-  <!-- Panel de detalle (móvil) -->
-  <ClientOnly>
-    <USlideover v-if="isMobile" v-model:open="isPanelOpen">
-      <template #content>
-        <EstudiosTypensenseDetail
-          v-if="selectedDocId"
-          :document="selectedDocument"
-          :document-loading="documentLoading"
-          :paragraphs="selectedParagraphs"
-          :paragraphs-loading="paragraphsLoading"
-          :collection="FAVORITES_COLLECTION"
-          :query="debouncedQuery"
-          :selected-hit="selectedHit"
-          :selected-matching-hits="selectedMatchingHits"
-          @close="isPanelOpen = false"
-        />
-      </template>
-    </USlideover>
-  </ClientOnly>
-</template>
-
-<style scoped>
-.snippet-html :deep(p) {
-  display: inline;
-  margin: 0;
-}
-.snippet-html :deep(br) {
-  display: none;
-}
-</style>
diff --git a/app/pages/conferencias.vue b/app/pages/conferencias.vue
old mode 100755
new mode 100644
index e0c9f4b..5b04c99
--- a/app/pages/conferencias.vue
+++ b/app/pages/conferencias.vue
@@ -1,18 +1,24 @@
 <script setup lang="ts">
 import { computed, ref, watch, onMounted, onBeforeUnmount } from 'vue'
 import { breakpointsTailwind, useDebounce } from '@vueuse/core'
-import type { SearchHit } from '~/types'
-import InboxActivity from '~/components/inbox/InboxActivity.vue'
+import EstudiosTypensenseDetail from '~/components/estudiosTypensense/EstudiosTypensenseDetail.vue'
 import { useSettingsStore } from '~/stores/settings'
 
-const { $i18n } = useNuxtApp();
-const t = $i18n.t;
+const PARAGRAPHS_COLLECTION = 'paragraphs'
+const DOCUMENTS_COLLECTION = 'documents'
+const QUERY_BY = 'text'
+const FAVORITES_COLLECTION = 'conferences-ts'
 
+const { $i18n } = useNuxtApp()
+const t = $i18n.t
+const { locale } = useI18n()
+
+const filterBy = computed(() => `locale:=${locale.value} && type:=conferences`)
 const REQUEST_TIMEOUT_MS = 15000
 
 const settings = useSettingsStore()
 
-// ── Restore state from URL before creating refs ────────────────────────────
+// ── Restaurar estado desde URL antes de crear los refs ─────────────────────
 const { query: q0, page: p0, scroll: s0, selectedId: sid0 } = useSearchUrlState()
 
 const query = ref(q0)
@@ -21,66 +27,327 @@ const loading = ref(false)
 const loadingMore = ref(false)
 const errorMsg = ref<string | null>(null)
 
-const meili = useMeiliSearchRef()
+// ---- Types ----------------------------------------------------------------
 
-const hits = ref<SearchHit[]>([])
+interface ParagraphDoc {
+  id?: string
+  document_id: string
+  text: string
+  number: number
+  locale: string
+  type: string
+}
+
+interface DocMeta {
+  id: string
+  title: string
+  date?: string
+  timestamp?: number
+  place?: string
+  city?: string
+  state?: string
+  country?: string
+  type?: string
+  slug?: string
+}
+
+export interface DocumentDoc extends DocMeta {
+  code: string
+  locale: string
+  files?: {
+    youtube?: string
+    video?: string
+    audio?: string
+    booklet?: string
+    simple?: string
+  }
+  body?: string
+  [key: string]: unknown
+}
+
+interface TypesenseHighlight {
+  field?: string
+  snippet?: string
+  value?: string
+  matched_tokens?: string[]
+}
+
+export interface TypesenseParagraphHit {
+  document: ParagraphDoc
+  highlights?: TypesenseHighlight[]
+  highlight?: Record<string, { snippet?: string, value?: string }>
+  text_match?: number
+}
+
+interface TypesenseGroupedHit {
+  group_key: string[]
+  hits: TypesenseParagraphHit[]
+}
+
+interface TypesenseSearchResponse {
+  found: number
+  grouped_hits?: TypesenseGroupedHit[]
+}
+
+interface SearchGroup {
+  docId: string
+  firstHit: TypesenseParagraphHit
+  allHits: TypesenseParagraphHit[]
+}
+
+interface BrowseItem {
+  docId: string
+  meta: DocMeta
+}
+
+interface DisplayGroup {
+  docId: string
+  meta: DocMeta | undefined
+  firstHit: TypesenseParagraphHit | null
+}
+
+// ---- State ----------------------------------------------------------------
+
+// Modo búsqueda (con query): grupos devueltos por Typesense
+const groupedHits = ref<SearchGroup[]>([])
 const total = ref(0)
-const activePage = ref(p0)
-
-const totalPages = computed(() => Math.max(1, Math.ceil(total.value / settings.pageSize)))
+const currentPage = ref(1)
 
 const hasMore = computed(() =>
-  settings.paginationType === 'infinite_scroll' ? hits.value.length < total.value : false
+  settings.paginationType === 'infinite_scroll' ? groupedHits.value.length < total.value : false
 )
 
+// Progressive display (sólo en scroll infinito)
+const visibleGroupCount = ref(10)
+
+const visibleGroups = computed(() =>
+  settings.paginationType === 'infinite_scroll'
+    ? groupedHits.value.slice(0, visibleGroupCount.value)
+    : groupedHits.value
+)
+
+const hasMoreVisible = computed(() =>
+  settings.paginationType === 'infinite_scroll' &&
+  visibleGroupCount.value < groupedHits.value.length
+)
+
+// Modo exploración (sin query): documentos ordenados por fecha
+const browseItems = ref<BrowseItem[]>([])
+const browseTotal = ref(0)
+const browsePage = ref(1)
+
+const hasMoreBrowse = computed(() =>
+  settings.paginationType === 'infinite_scroll'
+    ? browseItems.value.length < browseTotal.value
+    : false
+)
+
+// Grupo unificado para el template
+const displayGroups = computed((): DisplayGroup[] => {
+  if (!debouncedQuery.value.trim()) {
+    return browseItems.value.map(item => ({
+      docId: item.docId,
+      meta: item.meta,
+      firstHit: null
+    }))
+  }
+  return visibleGroups.value.map(g => ({
+    docId: g.docId,
+    meta: docCache.value[g.docId],
+    firstHit: g.firstHit
+  }))
+})
+
+// Paginación activa (compartida entre browse y search)
+const activePage = ref(p0)
+
+const displayTotal = computed(() =>
+  debouncedQuery.value.trim() ? total.value : browseTotal.value
+)
+
+const totalPages = computed(() =>
+  Math.max(1, Math.ceil(displayTotal.value / settings.pageSize))
+)
+
+// Cache de metadatos por document_id (sólo modo búsqueda)
+const docCache = ref<Record<string, DocMeta>>({})
+
+const { documentsApi } = useTypesenseApi()
+
+// ---- Batch fetch de metadatos de documentos -------------------------------
+
+async function fetchDocumentMeta(docIds: string[]) {
+  const unique = docIds.filter(id => id && !(id in docCache.value))
+  console.log('Fetching metadata for documents', unique)
+  try {
+    const res = await documentsApi.multiSearch({
+      multiSearchParameters: {},
+      multiSearchSearchesParameter: {
+        searches: [{
+          collection: DOCUMENTS_COLLECTION,
+          q: '*',
+          queryBy: 'title',
+          filterBy: `id:=[${unique.join(',')}]`,
+          includeFields: 'id,title,date,timestamp,place,city,state,country,type,slug',
+          perPage: unique.length,
+          page: 1
+        }]
+      }
+    })
+    const docHits = (res?.results?.[0] as { hits?: Array<{ document: DocMeta }> })?.hits ?? []
+    for (const hit of docHits) {
+      if (hit.document.id) {
+        docCache.value[hit.document.id] = hit.document
+      }
+    }
+  } catch (err) {
+    console.error('Error fetching document metadata', err)
+  }
+}
+
+// ---- Búsqueda de párrafos (con query) -------------------------------------
+
 let searchSeq = 0
-let abortController: AbortController | null = null
+let timeoutId: ReturnType<typeof setTimeout> | null = null
 
 async function runSearch(q: string, page = 1, append = false) {
-  abortController?.abort()
-  const ac = new AbortController()
-  abortController = ac
-
   const seq = ++searchSeq
   if (append) loadingMore.value = true
   else loading.value = true
   errorMsg.value = null
 
-  const timeoutId = setTimeout(() => ac.abort(), REQUEST_TIMEOUT_MS)
+  if (timeoutId) clearTimeout(timeoutId)
+  timeoutId = setTimeout(() => {
+    if (seq === searchSeq) {
+      loading.value = false
+      loadingMore.value = false
+      errorMsg.value = 'La búsqueda tardó demasiado. Inténtalo de nuevo.'
+    }
+  }, REQUEST_TIMEOUT_MS)
 
   const isInfinite = settings.paginationType === 'infinite_scroll'
-  const offset = isInfinite
-    ? (append ? hits.value.length : 0)
-    : (page - 1) * settings.pageSize
+  const typePage = isInfinite ? (append ? currentPage.value + 1 : 1) : page
 
   try {
-    const res = await meili.index(`conferences_${$i18n.locale.value.toUpperCase()}`).search(q || '', {
-      attributesToRetrieve: ['*'],
-      showMatchesPosition: true,
-      limit: settings.pageSize,
-      offset,
-      sort: q ? undefined : ['isodate:desc']
-    }, { signal: ac.signal })
+    const multi = await documentsApi.multiSearch({
+      multiSearchParameters: {},
+      multiSearchSearchesParameter: {
+        searches: [{
+          collection: PARAGRAPHS_COLLECTION,
+          q: q || '*',
+          queryBy: QUERY_BY,
+          filterBy: filterBy.value,
+          perPage: settings.pageSize,
+          page: typePage,
+          highlightFullFields: QUERY_BY,
+          highlightFields: QUERY_BY,
+          highlightStartTag: '<mark class="search-match">',
+          highlightEndTag: '</mark>',
+          highlightAffixNumTokens: 30,
+          groupBy: 'document_id'
+        }]
+      }
+    })
 
     if (seq !== searchSeq) return
 
-    const newHits = (res?.hits ?? []) as SearchHit[]
-    hits.value = append ? hits.value.concat(newHits) : newHits
-    total.value = res?.estimatedTotalHits ?? hits.value.length
+    const res = (multi?.results?.[0] ?? {}) as TypesenseSearchResponse
+    const rawGroups = res?.groupedHits ?? []
+
+    console.log('Raw groups', rawGroups)
+    const newGroups: SearchGroup[] = rawGroups.map(g => ({
+      docId: g.groupKey[0]!,
+      firstHit: g.hits[0]!,
+      allHits: g.hits
+    }))
+
+    if (!append) docCache.value = {}
+    const newDocIds = newGroups.map(g => g.docId).filter(Boolean)
+    await fetchDocumentMeta(newDocIds)
+
+    if (seq !== searchSeq) return
+
+    groupedHits.value = append ? groupedHits.value.concat(newGroups) : newGroups
+    total.value = res?.found ?? groupedHits.value.length
+    currentPage.value = typePage
     if (!append) activePage.value = page
   } catch (err: unknown) {
-    const name = (err as { name?: string })?.name
-    if (name === 'AbortError') return
     if (seq !== searchSeq) return
-    console.error('Meilisearch error', err)
+    console.error('Typesense error', err)
     errorMsg.value = (err as Error)?.message || 'Error al buscar.'
     if (!append) {
-      hits.value = []
+      groupedHits.value = []
       total.value = 0
     }
   } finally {
-    clearTimeout(timeoutId)
     if (seq === searchSeq) {
+      if (timeoutId) clearTimeout(timeoutId)
+      loading.value = false
+      loadingMore.value = false
+    }
+  }
+}
+
+// ---- Exploración por fecha (sin query) ------------------------------------
+
+async function runBrowse(page = 1, append = false) {
+  const seq = ++searchSeq
+  if (append) loadingMore.value = true
+  else loading.value = true
+  errorMsg.value = null
+
+  if (timeoutId) clearTimeout(timeoutId)
+  timeoutId = setTimeout(() => {
+    if (seq === searchSeq) {
+      loading.value = false
+      loadingMore.value = false
+      errorMsg.value = 'La búsqueda tardó demasiado. Inténtalo de nuevo.'
+    }
+  }, REQUEST_TIMEOUT_MS)
+
+  const isInfinite = settings.paginationType === 'infinite_scroll'
+  const typePage = isInfinite ? (append ? browsePage.value + 1 : 1) : page
+
+  try {
+    const multi = await documentsApi.multiSearch({
+      multiSearchParameters: {},
+      multiSearchSearchesParameter: {
+        searches: [{
+          collection: DOCUMENTS_COLLECTION,
+          q: '*',
+          queryBy: 'title',
+          filterBy: filterBy.value,
+          sortBy: 'timestamp:desc',
+          perPage: settings.pageSize,
+          page: typePage,
+          includeFields: 'id,title,date,timestamp,place,city,state,country,type,slug'
+        }]
+      }
+    })
+
+    if (seq !== searchSeq) return
+
+    const result = (multi?.results?.[0] as { found?: number, hits?: Array<{ document: DocMeta }> } | undefined)
+    const newItems = (result?.hits ?? []).map(h => ({
+      docId: h.document.id!,
+      meta: h.document
+    }))
+
+    browseItems.value = append ? browseItems.value.concat(newItems) : newItems
+    browseTotal.value = result?.found ?? browseItems.value.length
+    browsePage.value = typePage
+    if (!append) activePage.value = page
+  } catch (err: unknown) {
+    if (seq !== searchSeq) return
+    console.error('Typesense error', err)
+    errorMsg.value = (err as Error)?.message || 'Error al buscar.'
+    if (!append) {
+      browseItems.value = []
+      browseTotal.value = 0
+    }
+  } finally {
+    if (seq === searchSeq) {
+      if (timeoutId) clearTimeout(timeoutId)
       loading.value = false
       loadingMore.value = false
     }
@@ -90,91 +357,269 @@ async function runSearch(q: string, page = 1, append = false) {
 function loadMore() {
   if (settings.paginationType !== 'infinite_scroll') return
   if (loadingMore.value || loading.value || !hasMore.value) return
-  runSearch(query.value, activePage.value, true)
+  runSearch(query.value, currentPage.value, true)
 }
 
 function goToPage(p: number) {
   activePage.value = p
-  hits.value = []
-  runSearch(query.value, p, false)
+  if (!debouncedQuery.value.trim()) {
+    browseItems.value = []
+    runBrowse(p, false)
+  } else {
+    groupedHits.value = []
+    runSearch(query.value, p, false)
+  }
+}
+
+const listContainer = ref<HTMLElement | null>(null)
+
+function onListScroll() {
+  if (settings.paginationType !== 'infinite_scroll') return
+  const el = listContainer.value
+  if (!el) return
+  if (el.scrollHeight - el.scrollTop - el.clientHeight < 200) {
+    if (!debouncedQuery.value.trim()) {
+      if (hasMoreBrowse.value && !loadingMore.value && !loading.value) {
+        runBrowse(browsePage.value, true)
+      }
+    } else {
+      if (hasMoreVisible.value) {
+        visibleGroupCount.value += 10
+      } else if (hasMore.value && !loadingMore.value && !loading.value) {
+        loadMore()
+      }
+    }
+  }
 }
 
 function retry() {
-  runSearch(query.value, activePage.value, false)
+  if (!query.value.trim()) {
+    runBrowse(activePage.value, false)
+  } else {
+    runSearch(query.value, activePage.value, false)
+  }
 }
 
-// ── Selección ──────────────────────────────────────────────────────────────
-const selected = ref<SearchHit | null>(null)
+onBeforeUnmount(() => { if (timeoutId) clearTimeout(timeoutId) })
 
-const isPanelOpen = computed({
-  get() { return !!selected.value },
-  set(value: boolean) { if (!value) selected.value = null }
-})
-
-// ID del item seleccionado para sincronizar con la URL
-const selectedId = computed(() => selected.value?._id?.toString() ?? null)
-
-// ── Scroll ref expuesto desde InboxList ────────────────────────────────────
-const inboxListRef = ref<{ listEl: HTMLElement | null } | null>(null)
-const listEl = computed(() => inboxListRef.value?.listEl ?? null)
-
-// ── Sincronización con URL ─────────────────────────────────────────────────
-useSearchUrlSync({ query, page: activePage, selectedId, scrollEl: listEl })
-
-// ── Ciclo de vida ──────────────────────────────────────────────────────────
-onMounted(async () => {
-  await runSearch(q0, p0, false)
-
-  // Restaurar scroll
-  restoreScrollPosition(listEl.value, s0)
-
-  // Restaurar item seleccionado
-  if (sid0) {
-    const found = hits.value.find(h => String(h._id) === sid0)
-    if (found) selected.value = found
+watch(debouncedQuery, (q) => {
+  activePage.value = 1
+  if (!q.trim()) {
+    groupedHits.value = []
+    total.value = 0
+    currentPage.value = 1
+    visibleGroupCount.value = 10
+    browseItems.value = []
+    browseTotal.value = 0
+    browsePage.value = 1
+    runBrowse(1, false)
+  } else {
+    browseItems.value = []
+    browseTotal.value = 0
+    browsePage.value = 1
+    groupedHits.value = []
+    total.value = 0
+    currentPage.value = 1
+    visibleGroupCount.value = 10
+    runSearch(q, 1, false)
   }
 })
 
-onBeforeUnmount(() => {
-  abortController?.abort()
+// ---- Selección y carga del detalle ----------------------------------------
+
+const selectedDocId = ref<string | null>(null)
+const selectedDocument = ref<DocumentDoc | null>(null)
+const documentLoading = ref(false)
+const selectedParagraphs = ref<TypesenseParagraphHit[]>([])
+const paragraphsLoading = ref(false)
+
+const selectedHit = ref<TypesenseParagraphHit | null>(null)
+const selectedMatchingHits = ref<TypesenseParagraphHit[]>([])
+
+async function fetchFullDocument(docId: string) {
+  documentLoading.value = true
+  selectedDocument.value = null
+  try {
+    const res = await documentsApi.multiSearch({
+      multiSearchParameters: {},
+      multiSearchSearchesParameter: {
+        searches: [{
+          collection: DOCUMENTS_COLLECTION,
+          q: '*',
+          queryBy: 'title',
+          filterBy: `id:=${docId}`,
+          perPage: 1,
+          page: 1
+        }]
+      }
+    })
+    const docHits = (res?.results?.[0] as { hits?: Array<{ document: DocumentDoc }> })?.hits ?? []
+    selectedDocument.value = docHits[0]?.document ?? null
+  } catch (err) {
+    console.error('Error fetching document', err)
+    selectedDocument.value = null
+  } finally {
+    documentLoading.value = false
+  }
+}
+
+async function fetchDocumentParagraphs(docId: string) {
+  paragraphsLoading.value = true
+  selectedParagraphs.value = []
+  const PER_PAGE = 250
+  let page = 1
+  let totalParagraphs = 0
+  const all: Array<{ document: ParagraphDoc }> = []
+  try {
+    do {
+      const res = await documentsApi.multiSearch({
+        multiSearchParameters: {},
+        multiSearchSearchesParameter: {
+          searches: [{
+            collection: PARAGRAPHS_COLLECTION,
+            q: '*',
+            queryBy: '',
+            filterBy: `document_id:=${docId} && ${filterBy.value}`,
+            perPage: PER_PAGE,
+            page,
+            sortBy: 'number:asc'
+          }]
+        }
+      })
+      const result = (res?.results?.[0] as { found?: number, hits?: Array<{ document: ParagraphDoc }> } | undefined)
+      if (!result) break
+      if (page === 1) totalParagraphs = result.found ?? 0
+      all.push(...(result.hits ?? []))
+      page++
+    } while (all.length < totalParagraphs)
+    selectedParagraphs.value = all.map(h => ({ document: h.document }))
+  } catch (err) {
+    console.error('Error fetching paragraphs', err)
+    selectedParagraphs.value = []
+  } finally {
+    paragraphsLoading.value = false
+  }
+}
+
+async function selectGroup(group: DisplayGroup) {
+  selectedDocId.value = group.docId
+  selectedHit.value = group.firstHit
+  const searchGroup = groupedHits.value.find(g => g.docId === group.docId)
+  selectedMatchingHits.value = searchGroup?.allHits ?? []
+  fetchFullDocument(group.docId)
+  fetchDocumentParagraphs(group.docId)
+}
+
+const isPanelOpen = computed({
+  get() { return !!selectedDocId.value },
+  set(v: boolean) {
+    if (!v) {
+      selectedDocId.value = null
+      selectedDocument.value = null
+      selectedParagraphs.value = []
+      selectedHit.value = null
+      selectedMatchingHits.value = []
+    }
+  }
 })
 
-// Query debounced: solo dispara cuando el usuario cambia la búsqueda,
-// NO en la carga inicial (debouncedQuery ya arranca en q0).
-watch(debouncedQuery, (q) => {
-  hits.value = []
-  total.value = 0
-  activePage.value = 1
-  runSearch(q, 1, false)
+watch(groupedHits, () => {
+  if (!selectedDocId.value || !debouncedQuery.value.trim()) return
+  const still = groupedHits.value.find(g => g.docId === selectedDocId.value)
+  if (!still) {
+    selectedDocId.value = null
+    selectedDocument.value = null
+    selectedParagraphs.value = []
+    selectedHit.value = null
+    selectedMatchingHits.value = []
+  }
 })
 
-watch(hits, () => {
-  if (!selected.value) return
-  const stillThere = hits.value.find(h => h._id === selected.value?._id)
-  if (!stillThere) selected.value = null
+// ID del documento seleccionado para sincronizar con la URL
+const selectedId = computed(() => selectedDocId.value)
+
+// ── Sincronización con URL ─────────────────────────────────────────────────
+useSearchUrlSync({ query, page: activePage, selectedId, scrollEl: listContainer })
+
+// ── Ciclo de vida ──────────────────────────────────────────────────────────
+onMounted(async () => {
+  // Carga inicial: browse si no hay query, search si hay query
+  if (q0.trim()) {
+    await runSearch(q0, p0, false)
+  } else {
+    await runBrowse(p0, false)
+  }
+
+  // Restaurar scroll
+  restoreScrollPosition(listContainer.value, s0)
+
+  // Restaurar documento seleccionado
+  if (sid0) {
+    const group = displayGroups.value.find(g => g.docId === sid0)
+    if (group) {
+      selectGroup(group)
+    } else {
+      selectedDocId.value = sid0
+      fetchFullDocument(sid0)
+      fetchDocumentParagraphs(sid0)
+    }
+  }
 })
 
 const breakpoints = useBreakpoints(breakpointsTailwind)
 const isMobile = breakpoints.smaller('lg')
 
 useDetailHistory(isPanelOpen, isMobile)
+
+// ---- Helpers de presentación ----------------------------------------------
+
+function highlightedFor(hit: TypesenseParagraphHit, field: string): string | null {
+  const fromArr = hit.highlights?.find(h => h.field === field)
+  if (fromArr?.snippet) return fromArr.snippet
+  if (fromArr?.value) return fromArr.value
+  const fromObj = hit.highlight?.[field]
+  if (fromObj?.snippet) return fromObj.snippet
+  if (fromObj?.value) return fromObj.value
+  return null
+}
+
+function metaDate(meta: DocMeta | undefined): string {
+  if (!meta) return ''
+  const ts = meta.timestamp || (meta.date ? Math.floor(new Date(meta.date).getTime() / 1000) : null)
+  if (!ts) return meta.date || ''
+  return formatDate(ts)
+}
+
+function metaLocation(meta: DocMeta | undefined): string {
+  if (!meta) return ''
+  return formatLocation({
+    id: meta.id,
+    date: meta.timestamp ?? 0,
+    slug: meta.slug ?? '',
+    type: meta.type ?? '',
+    place: meta.place ?? '',
+    city: meta.city ?? '',
+    state: meta.state ?? '',
+    country: meta.country ?? '',
+    thumbnail: ''
+  })
+}
 </script>
 
 <template>
   <UDashboardPanel
-    id="conferences-list"
-    :default-size="28"
-    :min-size="22"
-    :max-size="40"
+    id="conferencias-ts-list"
+    :default-size="32"
+    :min-size="24"
+    :max-size="45"
     resizable
   >
-    <UDashboardNavbar :title="t('nav.conferences')">
+    <UDashboardNavbar :title="t('nav.conferences_ts')">
       <template #leading>
         <UDashboardSidebarCollapse />
       </template>
-
       <template #trailing>
-        <UBadge :label="total" variant="subtle" />
+        <UBadge :label="displayTotal" variant="subtle" />
       </template>
     </UDashboardNavbar>
 
@@ -182,19 +627,11 @@ useDetailHistory(isPanelOpen, isMobile)
       <UInput
         v-model="query"
         icon="i-lucide-search"
-        placeholder='Buscar conferencias... (usa "comillas" para frase exacta)'
+        :placeholder="t('search.placeholder')"
         :loading="loading"
         size="md"
         class="w-full"
       />
-      <p class="mt-1.5 flex items-center gap-1 text-[11px] text-dimmed">
-        <UIcon name="i-lucide-lightbulb" class="size-3" />
-        <span>
-          Tip: envuelve en
-          <code class="px-1 rounded bg-elevated text-toned font-mono">"comillas"</code>
-          para frase exacta en ese orden.
-        </span>
-      </p>
     </div>
 
     <UAlert
@@ -207,26 +644,90 @@ useDetailHistory(isPanelOpen, isMobile)
       :actions="[{ label: 'Reintentar', color: 'neutral', variant: 'outline', onClick: retry }]"
     />
 
-    <InboxList
-      ref="inboxListRef"
-      v-model="selected"
-      :activities="hits"
-      :query="debouncedQuery"
-      :has-more="hasMore"
-      :loading="loading"
-      :loading-more="loadingMore"
-      :show-end-message="settings.paginationType === 'infinite_scroll'"
-      collection="conferences"
-      @load-more="loadMore"
-    />
+    <div ref="listContainer" class="overflow-y-auto divide-y divide-default flex-1" @scroll="onListScroll">
+      <div
+        v-if="loading && !displayGroups.length"
+        class="flex items-center justify-center gap-2 py-16 text-sm text-muted"
+      >
+        <UIcon name="i-lucide-loader-circle" class="size-4 animate-spin" />
+        Buscando...
+      </div>
 
+      <div
+        v-else-if="!displayGroups.length"
+        class="flex flex-col items-center justify-center gap-2 py-16 text-dimmed text-sm"
+      >
+        <UIcon name="i-lucide-inbox" class="size-10" />
+        <p>{{ query ? `Sin coincidencias para "${query}"` : 'Sin resultados' }}</p>
+      </div>
+
+      <div
+        v-for="group in displayGroups"
+        :key="group.docId"
+        class="p-4 sm:px-6 text-sm cursor-pointer border-b-2 transition-colors"
+        :class="[
+          selectedDocId === group.docId
+            ? 'border-carpablue bg-carpablue/10'
+            : 'border-gray-200 hover:border-carpablue hover:bg-carpablue/5'
+        ]"
+        @click="selectGroup(group)"
+      >
+        <div class="mb-1">
+          <p class="text-sm font-semibold line-clamp-2 text-highlighted">
+            {{ group.meta?.title || group.docId }}
+          </p>
+        </div>
+
+        <p class="flex flex-col sm:flex-row sm:items-center gap-1 sm:gap-2 text-xs mb-2 text-muted">
+          <span
+            v-if="metaDate(group.meta)"
+            class="flex items-center gap-1"
+          >
+            <UIcon name="ph:calendar" class="size-4 text-carpablue" />
+            {{ metaDate(group.meta) }}
+          </span>
+          <span
+            v-if="metaLocation(group.meta)"
+            class="flex items-center gap-1 truncate"
+          >
+            <UIcon name="ph:map-pin" class="size-4 text-carpablue shrink-0" />
+            <span class="truncate">{{ metaLocation(group.meta) }}</span>
+          </span>
+        </p>
+
+        <!-- Snippet con highlight: solo en modo búsqueda -->
+        <div
+          v-if="group.firstHit"
+          class="snippet-html text-sm text-dimmed"
+          v-html="highlightedFor(group.firstHit, 'text') || group.firstHit.document.text"
+        />
+      </div>
+
+      <!-- Infinite scroll: cargando más -->
+      <div
+        v-if="settings.paginationType === 'infinite_scroll' && loadingMore"
+        class="flex items-center justify-center gap-2 py-4 text-sm text-muted"
+      >
+        <UIcon name="i-lucide-loader-circle" class="size-4 animate-spin" />
+        Cargando más...
+      </div>
+
+      <div
+        v-else-if="settings.paginationType === 'infinite_scroll' && displayGroups.length && !hasMoreBrowse && !hasMoreVisible && !hasMore && !loading"
+        class="py-3 text-center text-xs text-dimmed"
+      >
+        No hay más resultados
+      </div>
+    </div>
+
+    <!-- Paginación numerada -->
     <div
       v-if="settings.paginationType === 'numbered' && totalPages > 1 && !loading"
       class="px-4 py-3 border-t border-default flex justify-center shrink-0"
     >
       <UPagination
         :page="activePage"
-        :total="total"
+        :total="displayTotal"
         :items-per-page="settings.pageSize"
         size="sm"
         @update:page="goToPage"
@@ -234,33 +735,53 @@ useDetailHistory(isPanelOpen, isMobile)
     </div>
   </UDashboardPanel>
 
-  <InboxActivity
-    v-if="selected"
-    :activity="selected"
-    collection="conferences"
+  <!-- Panel de detalle (escritorio) -->
+  <EstudiosTypensenseDetail
+    v-if="selectedDocId && !isMobile"
+    :document="selectedDocument"
+    :document-loading="documentLoading"
+    :paragraphs="selectedParagraphs"
+    :paragraphs-loading="paragraphsLoading"
+    :collection="FAVORITES_COLLECTION"
     :query="debouncedQuery"
-    @close="selected = null"
+    :selected-hit="selectedHit"
+    :selected-matching-hits="selectedMatchingHits"
+    @close="isPanelOpen = false"
   />
-  <div v-else class="hidden lg:flex flex-1 items-center justify-center">
+  <div v-else-if="!isMobile" class="hidden lg:flex flex-1 items-center justify-center">
     <div class="flex flex-col items-center gap-2 text-dimmed">
       <UIcon name="i-lucide-search" class="size-16" />
-      <p class="text-sm">
-        {{ query ? 'Selecciona una coincidencia para ver el detalle' : 'Escribe arriba para buscar' }}
-      </p>
+      <p class="text-sm">Selecciona una conferencia para ver el detalle</p>
     </div>
   </div>
 
+  <!-- Panel de detalle (móvil) -->
   <ClientOnly>
     <USlideover v-if="isMobile" v-model:open="isPanelOpen">
       <template #content>
-        <InboxActivity
-          v-if="selected"
-          :activity="selected"
-          collection="conferences"
+        <EstudiosTypensenseDetail
+          v-if="selectedDocId"
+          :document="selectedDocument"
+          :document-loading="documentLoading"
+          :paragraphs="selectedParagraphs"
+          :paragraphs-loading="paragraphsLoading"
+          :collection="FAVORITES_COLLECTION"
           :query="debouncedQuery"
-          @close="selected = null"
+          :selected-hit="selectedHit"
+          :selected-matching-hits="selectedMatchingHits"
+          @close="isPanelOpen = false"
         />
       </template>
     </USlideover>
   </ClientOnly>
 </template>
+
+<style scoped>
+.snippet-html :deep(p) {
+  display: inline;
+  margin: 0;
+}
+.snippet-html :deep(br) {
+  display: none;
+}
+</style>
diff --git a/app/pages/estudios-typensense.vue b/app/pages/estudios-biblicos.vue
similarity index 100%
rename from app/pages/estudios-typensense.vue
rename to app/pages/estudios-biblicos.vue
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 45c1306..47e1179 100755
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 // Home redirects straight to the search experience.
 definePageMeta({
-  middleware: () => navigateTo('/actividades', { redirectCode: 302 })
+  middleware: () => navigateTo('/estudios-biblicos', { redirectCode: 302 })
 })
 </script>
 
diff --git a/app/utils/textUtilities.ts b/app/utils/textUtilities.ts
index dd552d7..d3ae1a2 100644
--- a/app/utils/textUtilities.ts
+++ b/app/utils/textUtilities.ts
@@ -1,7 +1,7 @@
-const toast = useToast()
-
 /* Copy to Clipboard */
 export async function copyToClipboard(textToCopy: string, type: string) {
+  const toast = useToast()
+
   try {
     await navigator.clipboard.writeText(textToCopy)
     toast.add({