From 563e920dad8e024fddbe4d862f2005b0cdac0fc5 Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Thu, 16 Oct 2025 23:20:06 -0600
Subject: [PATCH] =?UTF-8?q?Traducci=C3=B3n=20completa=20al=20espa=C3=B1ol?=
 =?UTF-8?q?=20y=20barra=20de=20t=C3=ADtulo=20PWA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Traducir mensajes de API a español
- Configurar idioma español en HTML y manifest (lang="es")
- Actualizar nombres de app: "Perfil Nucleo"
- Crear WindowTitleBar para Window Controls Overlay
- Ajustar padding para acomodar barra de título
- Traducir campos restantes en componentes legacy
---
 nuxt4/app/app.vue                             |  14 ++-
 nuxt4/app/components/WindowTitleBar.vue       | 101 ++++++++++++++++++
 .../app/components/auth/EditProfileButton.vue |   4 +-
 nuxt4/nuxt.config.ts                          |   8 +-
 nuxt4/package.json                            |   2 +-
 nuxt4/server/api/auth/check-group.post.ts     |   2 +-
 6 files changed, 122 insertions(+), 9 deletions(-)
 create mode 100644 nuxt4/app/components/WindowTitleBar.vue

diff --git a/nuxt4/app/app.vue b/nuxt4/app/app.vue
index 1b35262..adae9c7 100644
--- a/nuxt4/app/app.vue
+++ b/nuxt4/app/app.vue
@@ -3,6 +3,9 @@
     <NuxtRouteAnnouncer />
     <UNotifications />
 
+    <!-- Barra de título para Window Controls Overlay (PWA) -->
+    <WindowTitleBar />
+
     <!-- Fondo animado -->
     <AnimatedBackground />
 
@@ -54,6 +57,9 @@ const showProfileForm = ref(false)
 
 // Configurar meta tags para PWA
 useHead({
+  htmlAttrs: {
+    lang: 'es'
+  },
   link: [
     { rel: 'manifest', href: '/manifest.webmanifest' },
     { rel: 'icon', type: 'image/svg+xml', href: '/icon.svg' },
@@ -63,7 +69,9 @@ useHead({
     { name: 'theme-color', content: '#00DC82' },
     { name: 'mobile-web-app-capable', content: 'yes' },
     { name: 'apple-mobile-web-app-capable', content: 'yes' },
-    { name: 'apple-mobile-web-app-status-bar-style', content: 'default' }
+    { name: 'apple-mobile-web-app-status-bar-style', content: 'default' },
+    { name: 'language', content: 'es' },
+    { property: 'og:locale', content: 'es_ES' }
   ]
 })
 </script>
@@ -73,7 +81,9 @@ useHead({
   position: relative;
   z-index: 1;
   min-height: 100vh;
-  padding-top: 2rem;
+  /* Ajustar padding cuando Window Controls Overlay está activo */
+  padding-top: max(2rem, env(titlebar-area-height, 0px));
+  padding-top: max(2rem, calc(env(titlebar-area-height, 0px) + 1rem));
 }
 
 .quick-actions {
diff --git a/nuxt4/app/components/WindowTitleBar.vue b/nuxt4/app/components/WindowTitleBar.vue
new file mode 100644
index 0000000..43de07c
--- /dev/null
+++ b/nuxt4/app/components/WindowTitleBar.vue
@@ -0,0 +1,101 @@
+<template>
+  <div
+    v-if="isWindowControlsOverlay"
+    class="window-titlebar"
+    :style="{ height: titlebarHeight }"
+  >
+    <div class="titlebar-content">
+      <span class="app-title">Perfil Nucleo</span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const isWindowControlsOverlay = ref(false)
+const titlebarHeight = ref('40px')
+
+onMounted(() => {
+  // Detectar si Window Controls Overlay está activo
+  if ('windowControlsOverlay' in navigator) {
+    const wco = (navigator as any).windowControlsOverlay
+    isWindowControlsOverlay.value = wco.visible
+
+    // Obtener la geometría del overlay si está disponible
+    if (wco.getTitlebarAreaRect) {
+      const rect = wco.getTitlebarAreaRect()
+      titlebarHeight.value = `${rect.height}px`
+    }
+
+    // Escuchar cambios en el overlay
+    wco.addEventListener('geometrychange', (event: any) => {
+      isWindowControlsOverlay.value = event.visible
+      if (event.titlebarAreaRect) {
+        titlebarHeight.value = `${event.titlebarAreaRect.height}px`
+      }
+    })
+  }
+})
+</script>
+
+<style scoped>
+.window-titlebar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 9999;
+  background: rgba(255, 255, 255, 0.8);
+  backdrop-filter: blur(20px) saturate(180%);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  /* Esta propiedad permite arrastrar la ventana */
+  -webkit-app-region: drag;
+  app-region: drag;
+  display: flex;
+  align-items: center;
+  padding: 0 1rem;
+  user-select: none;
+  transition: all 0.3s ease;
+}
+
+.titlebar-content {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}
+
+.app-title {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--color-gray-700);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Permitir que los botones dentro de la barra sean clickeables */
+.window-titlebar button,
+.window-titlebar a,
+.window-titlebar input {
+  -webkit-app-region: no-drag;
+  app-region: no-drag;
+}
+
+/* Modo oscuro */
+</style>
+
+<style>
+.dark .window-titlebar {
+  background: rgba(0, 0, 0, 0.8) !important;
+  border-bottom-color: rgba(255, 255, 255, 0.1) !important;
+}
+
+.dark .app-title {
+  color: var(--color-gray-200) !important;
+}
+
+/* Ajustar el padding del contenido principal cuando la barra está visible */
+.window-titlebar ~ * {
+  padding-top: env(titlebar-area-height, 0px);
+}
+</style>
diff --git a/nuxt4/app/components/auth/EditProfileButton.vue b/nuxt4/app/components/auth/EditProfileButton.vue
index d1ffc8a..bb7314e 100644
--- a/nuxt4/app/components/auth/EditProfileButton.vue
+++ b/nuxt4/app/components/auth/EditProfileButton.vue
@@ -21,7 +21,7 @@
             />
           </UFormGroup>
 
-          <UFormGroup label="Email" name="email">
+          <UFormGroup label="Correo electrónico" name="email">
             <UInput
               v-model="formData.email"
               type="email"
@@ -30,7 +30,7 @@
             />
           </UFormGroup>
 
-          <UFormGroup label="Username" name="username">
+          <UFormGroup label="Nombre de usuario" name="username">
             <UInput
               v-model="formData.username"
               disabled
diff --git a/nuxt4/nuxt.config.ts b/nuxt4/nuxt.config.ts
index c20a2ce..4a41d8c 100644
--- a/nuxt4/nuxt.config.ts
+++ b/nuxt4/nuxt.config.ts
@@ -29,9 +29,11 @@ export default defineNuxtConfig({
     registerType: 'autoUpdate',
     includeAssets: ['favicon.ico', 'apple-touch-icon.png', 'icon.svg', 'offline.html'],
     manifest: {
-      name: 'Plantilla Nuxt + Authentik',
-      short_name: 'NuxtAuth',
-      description: 'Plantilla de aplicación Nuxt 4 con autenticación mediante Authentik Proxy Outpost',
+      name: 'Perfil Nucleo',
+      short_name: 'Perfil',
+      description: 'Gestiona tu perfil de usuario y accede a tus aplicaciones de Nucleo',
+      lang: 'es',
+      dir: 'ltr',
       theme_color: '#00DC82',
       background_color: '#ffffff',
       display: 'standalone',
diff --git a/nuxt4/package.json b/nuxt4/package.json
index b716f39..68ee55d 100644
--- a/nuxt4/package.json
+++ b/nuxt4/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "nuxt4",
+  "name": "perfil-nucleo",
   "type": "module",
   "private": true,
   "scripts": {
diff --git a/nuxt4/server/api/auth/check-group.post.ts b/nuxt4/server/api/auth/check-group.post.ts
index 5ac1ac4..0042fc4 100644
--- a/nuxt4/server/api/auth/check-group.post.ts
+++ b/nuxt4/server/api/auth/check-group.post.ts
@@ -10,7 +10,7 @@ export default defineEventHandler(async (event) => {
   if (!groupName || typeof groupName !== 'string') {
     throw createError({
       statusCode: 400,
-      statusMessage: 'Group name is required'
+      statusMessage: 'El nombre del grupo es requerido'
     })
   }