Adding ui fixes

Fixed translations strings

app/components/PublicationDetail.vue

@@ -802,10 +802,7 @@ const links = computed(() => {
 
 const items = computed(() => {
   return [
-    {
-      label: 'Debug',
-      content: debugDocument(props.document)
-    }
+    
   ]
 })
 </script>
@@ -961,8 +958,7 @@ const items = computed(() => {
           <UPageHeader
             :title="document?.title"
             :description="formatSignature(document)"
-            :headline="document?.draft ? 'Borrador' : ''"
-            :links="links"
+            :headline="document?.draft ? $t('ui.draft') : ''"
             class="py-0 pb-2"
           />
           <div v-if="paragraphsLoading" class="flex items-center justify-center gap-2 py-16 text-sm text-muted">
@@ -1005,6 +1001,21 @@ const items = computed(() => {
             </p>
           </div>
         </UPageBody>
+
+        <template #right>
+          <UPageAside
+            class="py-0 my-0"
+          >
+
+            <UPageAnchors :links="links" />
+
+            <UAccordion :items="items">
+              <template #body="{ item }">
+                <pre>{{ item.content }}</pre>
+              </template>
+            </UAccordion>
+          </UPageAside>
+        </template>
       </UPage>
     </div>
 
@@ -1044,11 +1055,11 @@ const items = computed(() => {
             <UButton
               variant="soft"
               class="group flex flex-col items-center gap-1 px-4 py-2.5 text-amber-300 hover:bg-white/10 active:bg-white/20 transition-colors"
-              aria-label="Copiar texto"
+              :aria-label="$t('ui.copy')"
               @click="copyToClipboard(collection)"
             >
-              <UIcon name="ph-copy" class="size-5" />
-              <span class="group-hover:text-black text-[9px] font-semibold leading-none">Copiar</span>
+              <UIcon name="ph-copy" class="size-7" />
+              <span class="group-hover:text-black text-xs font-semibold leading-none">{{ $t('ui.copy') }}</span>
             </UButton>
           </div>
         </Transition>

app/pages/conferencias.vue

@@ -7,6 +7,6 @@
     panel-id="conferencias-ts-list"
     nav-title-key="nav.conferences_ts"
     accent-color="blue"
-    empty-detail-text="Selecciona una conferencia para ver el detalle"
+    :empty-detail-text="$t('ui.empty_conferences')"
   />
 </template>

app/pages/estudios-biblicos.vue

@@ -7,7 +7,7 @@
     panel-id="estudios-ts-list"
     nav-title-key="nav.bible_studies_ts"
     accent-color="green"
-    empty-detail-text="Selecciona una actividad para ver el detalle"
+    :empty-detail-text="$t('ui.empty_bible_studies')"
     :show-draft="true"
   />
 </template>

app/utils/itemUtilities.ts

@@ -1,78 +1,100 @@
-import dayjs from "dayjs";
+import dayjs from 'dayjs'
 
 export interface ItemObject {
-  id: string;
-  date: number;
-  slug: string;
-  type: string;
-  place: string;
-  city: string;
-  state: string;
-  country: string;
-  thumbnail: string;
+  id: string
+  date: number
+  timestamp: number
+  slug: string
+  type: string
+  place: string
+  city: string
+  state: string
+  country: string
+  thumbnail: string
 }
 
 export interface FilesObject {
-  youtube?: string;
-  video?: string;
-  audio?: string;
-  booklet?: string;
-  simple?: string;
+  youtube?: string
+  video?: string
+  audio?: string
+  booklet?: string
+  simple?: string
 }
 
 export function formatFiles(files: FilesObject) {
-  const { $i18n } = useNuxtApp();
-  const t = $i18n.t;
+  const { $i18n } = useNuxtApp()
+  const t = $i18n.t
 
-  let items = [];
+  const items = []
   if (files) {
     if (files.youtube) {
       items.push({
         to: files.youtube,
-        target: "_blank",
-        label: "Youtube",
-        icon: "ph:youtube-logo-thin",
-        labelClass: "text-xs",
-      });
+        target: '_blank',
+        label: 'Youtube',
+        icon: 'ph:youtube-logo-thin',
+        labelClass: 'text-xs'
+      })
     }
     if (files.video) {
       items.push({
         to: files.video,
-        target: "_blank",
-        label: t("Activities.video"),
-        icon: "ph:file-video-thin",
-        labelClass: "text-xs",
-      });
+        target: '_blank',
+        label: t('downloads.video'),
+        icon: 'ph:file-video-thin',
+        labelClass: 'text-xs'
+      })
     }
     if (files.audio) {
+      let fileUrl = ''
+      if (files.audio.startsWith('http')) {
+        fileUrl = files.audio
+      } else {
+        fileUrl = `https://actividadeswp.carpa.com/wp-content/uploads/${files.audio}`
+      }
+
       items.push({
-        to: `https://actividadeswp.carpa.com/wp-content/uploads/${files.audio}`,
-        target: "_blank",
-        label: t("Activities.audio"),
-        icon: "ph:file-audio-thin",
-        labelClass: "text-xs",
-      });
+        to: fileUrl,
+        target: '_blank',
+        label: t('downloads.audio'),
+        icon: 'ph:file-audio-thin',
+        labelClass: 'text-xs'
+      })
     }
     if (files.booklet) {
+      let fileUrl = ''
+      if (files.booklet.startsWith('http')) {
+        fileUrl = files.booklet
+      } else {
+        fileUrl = `https://actividadeswp.carpa.com/wp-content/uploads/${files.booklet}`
+      }
+
       items.push({
-        to: files.booklet,
-        target: "_blank",
-        label: t("Activities.book"),
-        icon: "ph:notebook-thin",
-        labelClass: "text-xs",
-      });
+        to: fileUrl,
+        target: '_blank',
+        label: t('downloads.book'),
+        icon: 'ph:notebook-thin',
+        labelClass: 'text-xs'
+      })
     }
     if (files.simple) {
+      let fileUrl = ''
+      if (files.simple.startsWith('http')) {
+        fileUrl = files.simple
+      } else {
+        fileUrl = `https://actividadeswp.carpa.com/wp-content/uploads/${files.simple}`
+      }
+
       items.push({
-        to: files.simple,
-        target: "_blank",
-        label: t("Activities.simple"),
-        icon: "ph:note-thin",
-        labelClass: "text-xs",
-      });
+        to: fileUrl,
+        target: '_blank',
+        label: t('downloads.simple'),
+        icon: 'ph:note-thin',
+        labelClass: 'text-xs'
+      })
     }
   }
-  return items;
+  return items
 }
 
 export function formatDate(d: number) {
@@ -129,70 +151,69 @@ export function formatSignature(i: ItemObject) {
 }
 
 export function getDay(d: number) {
-  const { $i18n } = useNuxtApp();
-  const locale = $i18n.locale;
-  let date = new Date(d * 1000);
+  const { $i18n } = useNuxtApp()
+  const locale = $i18n.locale
+  const date = new Date(d * 1000)
 
   return date.toLocaleString(locale.value, {
-    weekday: "long",
-    timeZone: "utc",
-  });
+    weekday: 'long',
+    timeZone: 'utc'
+  })
 }
 
 export function getDayDate(d: number) {
-  const { $i18n } = useNuxtApp();
-  const locale = $i18n.locale;
-  let date = new Date(d * 1000);
+  const { $i18n } = useNuxtApp()
+  const locale = $i18n.locale
+  const date = new Date(d * 1000)
 
-  return date.toLocaleString(locale.value, { day: "numeric", timeZone: "utc" });
+  return date.toLocaleString(locale.value, { day: 'numeric', timeZone: 'utc' })
 }
 
 export function getMonth(d: number) {
-  const { $i18n } = useNuxtApp();
-  const locale = $i18n.locale;
-  let date = new Date(d * 1000);
+  const { $i18n } = useNuxtApp()
+  const locale = $i18n.locale
+  const date = new Date(d * 1000)
 
-  return date.toLocaleString(locale.value, { month: "long", timeZone: "utc" });
+  return date.toLocaleString(locale.value, { month: 'long', timeZone: 'utc' })
 }
 
 export function setUrl(item: ItemObject, isSearch: boolean) {
-  const { $i18n } = useNuxtApp();
-  const locale = $i18n.locale;
-  const date = dayjs(item.date * 1000);
-  const month = (date.month() + 1).toString();
-  const slug = item.slug || item.slug === "undefined" ? item.slug : item.id;
+  const { $i18n } = useNuxtApp()
+  const locale = $i18n.locale
+  const date = dayjs(item.date * 1000)
+  const month = (date.month() + 1).toString()
+  const slug = item.slug || item.slug === 'undefined' ? item.slug : item.id
 
   if (isSearch) {
-    return false;
+    return false
   } else {
-    return `/${locale.value}/${item.type}/${date.year()}/${month.padStart(2, "0")}/${slug}`;
+    return `/${locale.value}/${item.type}/${date.year()}/${month.padStart(2, '0')}/${slug}`
   }
 }
 
 export function getThumbnail(item: ItemObject) {
-  console.log("ITEM", item);
-  let path = item.thumbnail;
+  const path = item.thumbnail
   if (!path) {
-    return "https://images.carpa.com/tr:w-900,f-auto/youtube_thumbnail_46396.png";
+    return 'https://images.carpa.com/tr:w-900,f-auto/youtube_thumbnail_46396.png'
   } else {
-    return `https://images.carpa.com/${item.type}/${path}?tr=w-900`;
+    return `https://images.carpa.com/${item.type}/${path}?tr=w-900`
   }
 }
 
 export function getAuthor(type: string) {
-  let author = "";
+  let author = ''
   switch (type) {
-    case "activities":
-      author = "Dr. José Benjamín Pérez Matos";
-      break;
-    case "conferences":
-      author = "Dr. William Soto Santiago";
-      break;
-    case "sermons":
-      author = "William Marrion Branham";
-      break;
+    case 'activities':
+      author = 'Dr. José Benjamín Pérez Matos'
+      break
+    case 'conferences':
+      author = 'Dr. William Soto Santiago'
+      break
+    case 'sermons':
+      author = 'William Marrion Branham'
+      break
   }
-  return author;
+  return author
 }
 
 // removed: openItem relied on a Pinia store that is not installed in this app.

lang/en.json

@@ -46,5 +46,16 @@
     "numbered_desc": "Navigate between pages with pagination controls.",
     "paragraph_numbers_title": "Paragraph numbers",
     "paragraph_numbers_desc": "Show the paragraph number next to each paragraph in the document detail."
+  },
+    "downloads": {
+        "audio": "Audio",
+        "book": "Book",
+        "simple": "Simple"
+    },
+    "ui": {
+        "copy": "Copy", 
+        "draft": "Draft",
+        "empty_bible_studies": "Choose a Bible Study to see the detail",
+        "empty_conferences": "Choose a Conference to see the detail"
     }
 }

lang/es.json

@@ -51,5 +51,16 @@
         "numbered_desc": "Navega entre páginas con controles de paginación.",
         "paragraph_numbers_title": "Números de párrafo",
         "paragraph_numbers_desc": "Muestra el número de párrafo al lado de cada párrafo en el detalle del documento."
+    },
+    "downloads": {
+        "audio": "Audio",
+        "book": "Libro",
+        "simple": "Sencillo",
+    },
+    "ui": {
+        "copy": "Copiar",
+        "draft": "Borrador",
+        "empty_bible_studies": "Selecciona un Estudio Bíblico para ver el detalle",
+        "empty_conferences": "Selecciona una Conferencia para ver el detalle"
     }
 }

lang/fr.json

@@ -34,5 +34,15 @@
         "numbered_desc": "Naviguez entre les pages avec des contrôles de pagination.",
         "paragraph_numbers_title": "Numéros de paragraphe",
         "paragraph_numbers_desc": "Affiche le numéro de paragraphe à côté de chaque paragraphe dans le détail du document."
+    },
+    "downloads": {
+        "audio": "Audio",
+        "book": "Libre",
+        "simple": "Simple"
+    },
+    "ui": {
+        "copy": "Copie",
+        "draft": "Brouillon"
+        
     }
 }

lang/pt.json

@@ -44,5 +44,14 @@
         "numbered_desc": "Navegue entre páginas com controles de paginação.",
         "paragraph_numbers_title": "Números de parágrafo",
         "paragraph_numbers_desc": "Exibe o número do parágrafo ao lado de cada parágrafo no detalhe do documento."
+    },
+    "downloads": {
+        "audio": "Áudio",
+        "book": "Livro",
+        "simple": "Simples"
+    },
+    "ui": {
+        "copy": "Cópia",
+        "draft": "Rascunho"
     }
 }