From 40b0610ad92fa097afc77599799f986bd262b5d6 Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Fri, 17 Oct 2025 16:45:51 -0600
Subject: [PATCH] Fix: Actualizar sintaxis de componentes Nuxt UI v4 y corregir
 errores de TypeScript
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Actualizar UModal para usar v-model:open en lugar de v-model
- Envolver contenido de UModal en slot #content según nueva sintaxis
- Corregir tipos en CameraCapture: agregar verificación de objeto antes de spread
- Cambiar tipo de retorno de getAppIconUrl de null a undefined
- Comentar capture_links en manifest PWA (propiedad experimental no soportada en tipos)
- Resolver todos los errores de TypeScript y warnings de hidratación

Errores corregidos:
- TS2353: width no existe en tipo ui de UModal
- TS2698: Spread types solo de tipos objeto
- TS18048: camera posiblemente undefined
- TS2322: null no asignable a undefined
- TS2353: capture_links no existe en ManifestOptions
---
 nuxt4/app/components/CameraCapture.vue        | 12 ++++----
 nuxt4/app/components/UserProfileForm.vue      | 30 ++++++++++---------
 .../app/components/auth/ApplicationsList.vue  |  8 ++---
 nuxt4/nuxt.config.ts                          |  3 +-
 4 files changed, 29 insertions(+), 24 deletions(-)

diff --git a/nuxt4/app/components/CameraCapture.vue b/nuxt4/app/components/CameraCapture.vue
index 8f066aa..ca08337 100644
--- a/nuxt4/app/components/CameraCapture.vue
+++ b/nuxt4/app/components/CameraCapture.vue
@@ -212,11 +212,13 @@ const startCamera = async () => {
 
   // Si tenemos un deviceId específico, úsalo
   if (cameras.value.length > 0 && cameras.value[currentCameraIndex.value]) {
-    const camera = cameras.value[currentCameraIndex.value]
-    constraints.video = {
-      ...constraints.video,
-      deviceId: { exact: camera.deviceId }
-    } as MediaTrackConstraints
+    const camera = cameras.value[currentCameraIndex.value]!
+    if (typeof constraints.video === 'object' && constraints.video !== null) {
+      constraints.video = {
+        ...constraints.video,
+        deviceId: { exact: camera.deviceId }
+      } as MediaTrackConstraints
+    }
   }
 
   try {
diff --git a/nuxt4/app/components/UserProfileForm.vue b/nuxt4/app/components/UserProfileForm.vue
index 67df3af..90f25b8 100644
--- a/nuxt4/app/components/UserProfileForm.vue
+++ b/nuxt4/app/components/UserProfileForm.vue
@@ -287,22 +287,24 @@
     </form>
 
     <!-- Modal de cámara -->
-    <UModal v-model="showCamera" :ui="{ width: 'max-w-3xl' }">
-      <div class="camera-modal">
-        <div class="modal-header">
-          <h3 class="modal-title">
-            <UIcon name="i-heroicons-camera" class="w-6 h-6" />
-            Tomar foto de perfil
-          </h3>
-        </div>
+    <UModal v-model:open="showCamera">
+      <template #content>
+        <div class="camera-modal max-w-3xl mx-auto">
+          <div class="modal-header">
+            <h3 class="modal-title">
+              <UIcon name="i-heroicons-camera" class="w-6 h-6" />
+              Tomar foto de perfil
+            </h3>
+          </div>
 
-        <div class="modal-content">
-          <CameraCapture
-            @capture="handleAvatarCapture"
-            @cancel="showCamera = false"
-          />
+          <div class="modal-content">
+            <CameraCapture
+              @capture="handleAvatarCapture"
+              @cancel="showCamera = false"
+            />
+          </div>
         </div>
-      </div>
+      </template>
     </UModal>
   </div>
 </template>
diff --git a/nuxt4/app/components/auth/ApplicationsList.vue b/nuxt4/app/components/auth/ApplicationsList.vue
index 3fc666a..cfb2463 100644
--- a/nuxt4/app/components/auth/ApplicationsList.vue
+++ b/nuxt4/app/components/auth/ApplicationsList.vue
@@ -180,10 +180,10 @@ const searchQuery = ref<string>(searchCookie.value || '')
 const failedIcons = ref<Set<string>>(new Set())
 
 // Función para obtener la URL del icono de una app
-const getAppIconUrl = (app: Application): string | null => {
+const getAppIconUrl = (app: Application): string | undefined => {
   // Si el icono ya falló, no intentar de nuevo
   if (failedIcons.value.has(app.pk)) {
-    return null
+    return undefined
   }
 
   // Intentar primero ícono local basado en slug
@@ -204,7 +204,7 @@ const getAppIconUrl = (app: Application): string | null => {
       const url = new URL(app.launchUrl)
       return `${url.origin}${app.icon.startsWith('/') ? '' : '/'}${app.icon}`
     } catch {
-      return null
+      return undefined
     }
   }
 
@@ -214,7 +214,7 @@ const getAppIconUrl = (app: Application): string | null => {
     // Intentar primero apple-touch-icon (suele ser de mejor calidad)
     return `${url.origin}/apple-touch-icon.png`
   } catch {
-    return null
+    return undefined
   }
 }
 
diff --git a/nuxt4/nuxt.config.ts b/nuxt4/nuxt.config.ts
index 48d8881..50afc6d 100644
--- a/nuxt4/nuxt.config.ts
+++ b/nuxt4/nuxt.config.ts
@@ -47,7 +47,8 @@ export default defineNuxtConfig({
         client_mode: 'navigate-existing'
       },
       // Capturar todos los enlaces que apunten a esta app
-      capture_links: 'existing-client-navigate',
+      // NOTA: capture_links es experimental y no está en los tipos de ManifestOptions
+      // capture_links: 'existing-client-navigate',
       // Extender scope a otros subdominios de Nucleo V3
       scope_extensions: [
         {