Fixing ui issues

Adding neater copy code

app/components/PublicationDetail.vue

@@ -6,7 +6,7 @@ import { useHistoryStore } from '~/stores/history'
 import { storeToRefs } from 'pinia'
 import { useSettingsStore } from '~/stores/settings'
 import type { SearchHit } from '~/types'
-import { select } from '#build/ui'
+import { pageHeader, select } from '#build/ui'
 
 interface TypesenseHighlight {
   field?: string
@@ -796,7 +796,8 @@ const links = computed(() => {
       icon: 'ph-arrow-square-out',
       to: matchUrl,
       target: '_blank'
-    }
+    },
+    ...formatFiles(props.document?.files)
   ]
 })
 
@@ -958,9 +959,14 @@ const items = computed(() => {
           <UPageHeader
             :title="document?.title"
             :description="formatSignature(document)"
-            :headline="document?.draft ? $t('ui.draft') : ''"
             class="py-0 pb-2"
-          />
+          >
+            <template #headline>
+              <span class="text-carpared font-semibold">
+                <UIcon name="ph-file-dashed" class="mr-1" />{{ document?.draft ? $t('ui.draft') : '' }}
+              </span>
+            </template>
+          </UPageHeader>
           <div v-if="paragraphsLoading" class="flex items-center justify-center gap-2 py-16 text-sm text-muted">
             <UIcon name="i-lucide-loader-circle" class="size-5 animate-spin" />
             Cargando párrafos...
@@ -1054,11 +1060,11 @@ const items = computed(() => {
             <div class="w-px self-stretch bg-white/10" />
             <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"
+              class="cursor-pointer group flex flex-col items-center gap-1 px-4 py-2.5 text-carpared hover:bg-white/10 active:bg-white/20 transition-colors"
               :aria-label="$t('ui.copy')"
-              @click="copyToClipboard(collection)"
+              @click="copyToClipboard(props.document)"
             >
-              <UIcon name="ph-copy" class="size-7" />
+              <UIcon name="ph-clipboard-text" class="size-7" />
               <span class="group-hover:text-black text-xs font-semibold leading-none">{{ $t('ui.copy') }}</span>
             </UButton>
           </div>

app/utils/textUtilities.ts

@@ -1,5 +1,5 @@
 /* Copy to Clipboard */
-export async function copyToClipboard(type: string) {
+export async function copyToClipboard(doc: ItemObject) {
   const toast = useToast()
 
   const selection = window.getSelection()
@@ -8,8 +8,8 @@ export async function copyToClipboard(type: string) {
   const range = selection?.getRangeAt(0)
   container.appendChild(range.cloneContents())
 
-  const htmlOutput = container.innerHTML
+  const htmlOutput = container.innerHTML + '<br/>' + doc.title + '<br/>' + formatSignature(doc)
-  const textOutput = selection?.toString()
+  const textOutput = selection?.toString() + '\n\n' + doc.title + '\n' + formatSignature(doc)
 
   try {
     // Modern Clipboard API requires ClipboardItem
@@ -21,16 +21,22 @@ export async function copyToClipboard(type: string) {
     await navigator.clipboard.write([clipboardItem])
     toast.add({
       title: 'Texto copiado!',
-      description: `${textOutput}`,
+      description: `${truncateAtWord(textOutput, 150)}`,
       icon: 'ph-clipboard-text',
-      color: type == 'activities' ? 'success' : 'info'
+      color: doc.type == 'activities' ? 'success' : 'info'
     })
   } catch (err) {
     console.error('Failed to copy: ', err)
   }
 }
 
-export function debugDocument(json) {
+const truncateAtWord = (str: string, limit: number) => {
+  if (str.length <= limit) return str
+  const subString = str.slice(0, limit)
+  return subString.slice(0, subString.lastIndexOf('')) + '...'
+}
+
+export function debugDocument(json: []) {
   let data = ''
   // Iterate through keys and values
   for (const key in json) {