Separated copy to clipboard function into a new utilities class

Added corrected colors for old content
Added paragraph click to copy function
Fixed visual styling for paragraph display

app/assets/css/main.css

@@ -15,6 +15,21 @@
   --color-green-800: #016538;
   --color-green-900: #0A5331;
   --color-green-950: #052E16;
+
+  --color-carpablue: #2C4EA2;
+  --color-carpagreen: #6B8E23;
+  --color-carpared: #ff0000;
+}
+
+/* Colors for Typesense rich text */
+.red {
+  color: #C00000 !important;
+}
+.purple {
+  color: #7030A0 !important;
+}
+.blue {
+  color: #0070C0 !important;
 }
 
 /* Search match highlighting --------------------------------------------- */

app/components/estudiosTypensense/EstudiosTypensenseDetail.vue

@@ -830,18 +830,25 @@ function highlightTextNodes(root: HTMLElement, terms: string[]): number {
 
       <!-- Todos los párrafos -->
       <div v-else-if="paragraphs.length" ref="paragraphsContainer" class="p-1 sm:p-4 max-w-4xl m-4 sm:mx-auto sm:my-6">
-        <div class="bg-white rounded-lg shadow-md p-4 mb-4 last:mb-0">
+        <div class="bg-white rounded-lg shadow-md p-4 sm:p-8 mb-4 last:mb-0">
           <div v-for="(hit, idx) in paragraphs" :key="idx" :data-paragraph-number="hit.document.number">
-            <div class="flex items-start gap-2 mb-2">
+            <div class="grid grid-cols-[32px_1fr] items-start gap-4 mb-2">
-              <div v-if="showParagraphNumbers" class="w-4 mr-2">
+              <div v-if="showParagraphNumbers" class="w-10 select-none cursor-pointer flex justify-end">
-                <UBadge v-if="hit.document.number" :label="`#${hit.document.number}`" size="xs" variant="outline"
+                <UBadge
-                  color="info" />
+                  v-if="hit.document.number"
+                  :label="`${hit.document.number}`"
+                  size="md"
+                  variant="ghost"
+                  @click="copyToClipboard(hit.document.text, hit.document.type)"
+                  class="text-gray-400 hover:text-white"
+                  :class="(hit.document.type=='activities'?'hover:bg-carpagreen':'hover:bg-carpablue')"
+                />
               </div>
               <div class="">
                 <div
-                    class="paragraph-html text-sm leading-relaxed text-gray-800 dark:text-gray-200"
+                  class="paragraph-html text-sm leading-relaxed text-gray-800 dark:text-gray-200"
-                    v-html="hit.document.raw"
+                  v-html="hit.document.raw"
-                  />
+                />
               </div>
             </div>
           </div>

app/components/inbox/InboxActivity.vue

@@ -305,7 +305,15 @@ async function renderBody() {
   const el = bodyContainer.value
   if (!el) return
 
-  const raw = props.activity?.body
+  // const raw = props.activity?.body
+  let raw = props.activity?.body || ''
+  if (raw) {
+    raw = raw
+      .replaceAll('#00ccff', '#0070C0')
+      .replaceAll('#FF0000', '#C00000')
+      .replaceAll('#333399', '#7030A0')
+  }
+
   el.innerHTML = raw ? ((fixLink(raw) as string) || '') : ''
 
   if (scrollContainer.value) scrollContainer.value.scrollTop = 0

app/layouts/default.vue

@@ -36,13 +36,13 @@ const links = computed(() => {
     },
     {
       label: t("nav.bible_studies_ts"),
-      icon: 'i-lucide-database',
+      icon: 'ph:books',
       to: '/estudios-typensense',
       onSelect: () => { open.value = false }
     },
     {
       label: t("nav.conferences_ts"),
-      icon: 'i-lucide-database',
+      icon: 'ph:books',
       to: '/conferencias-typensense',
       onSelect: () => { open.value = false }
     },

app/pages/actividades.vue

@@ -72,7 +72,6 @@ async function runSearch(q: string, page = 1, append = false) {
     const name = (err as { name?: string })?.name
     if (name === 'AbortError') return
     if (seq !== searchSeq) return
-    console.error('Meilisearch error', err)
     errorMsg.value = (err as Error)?.message || 'Error al buscar.'
     if (!append) {
       hits.value = []

app/utils/textUtilities.ts

@@ -0,0 +1,16 @@
+const toast = useToast()
+
+/* Copy to Clipboard */
+export async function copyToClipboard(textToCopy: string, type: string) {
+  try {
+    await navigator.clipboard.writeText(textToCopy)
+    toast.add({
+      title: 'Texto copiado!',
+      description: `${textToCopy}`,
+      icon: 'ph-clipboard-text',
+      color: type == 'activities' ? 'success' : 'info'
+    })
+  } catch (err) {
+    console.error('Failed to copy: ', err)
+  }
+}