perfil/nuxt4/app/components/auth/ApplicationsList.vue

<template>
  <div class="applications-container">
    <div class="applications-header">
      <div class="flex items-center justify-between mb-4">
        <h2 class="applications-title">
          <UIcon name="i-heroicons-squares-2x2" class="w-6 h-6" />
          Mis Aplicaciones
        </h2>
        <span v-if="filteredApplications.length > 0" class="app-counter">
          {{ filteredApplications.length }}
        </span>
      </div>

      <!-- Campo de búsqueda -->
      <div class="search-section">
        <div class="search-input-wrapper">
          <UIcon name="i-heroicons-magnifying-glass" class="search-icon" />
          <input
            v-model="searchQuery"
            type="text"
            placeholder="Buscar aplicaciones..."
            class="search-input"
          />
          <button
            v-if="searchQuery"
            @click="searchQuery = ''"
            class="search-clear"
            title="Limpiar búsqueda"
          >
            <UIcon name="i-heroicons-x-mark" class="w-4 h-4" />
          </button>
        </div>
      </div>

      <!-- Filtros por grupos -->
      <div v-if="availableGroups.length > 0" class="filter-section">
        <button
          v-for="group in availableGroups"
          :key="group"
          :class="['filter-button', { 'filter-button-active': selectedGroups.includes(group) }]"
          @click="toggleGroup(group)"
        >
          {{ group }}
        </button>
      </div>
    </div>

    <div v-if="pending" class="empty-state">
      <UIcon name="i-heroicons-arrow-path" class="w-12 h-12 animate-spin text-primary" />
      <p class="mt-4 text-gray-600 dark:text-gray-400">Cargando aplicaciones...</p>
    </div>

    <div v-else-if="error" class="empty-state">
      <UIcon name="i-heroicons-exclamation-triangle" class="w-16 h-16 text-error" />
      <p class="mt-4 text-error font-semibold text-lg">Error al cargar aplicaciones</p>
      <p class="text-sm text-gray-500 mt-2">{{ error.message }}</p>
    </div>

    <div v-else-if="applications.length === 0" class="empty-state">
      <UIcon name="i-heroicons-inbox" class="w-16 h-16 text-gray-400" />
      <p class="mt-4 text-gray-600 dark:text-gray-400 text-lg">No tienes aplicaciones disponibles</p>
    </div>

    <div v-else-if="filteredApplications.length === 0" class="empty-state">
      <UIcon name="i-heroicons-funnel" class="w-16 h-16 text-gray-400" />
      <p class="mt-4 text-gray-600 dark:text-gray-400 text-lg">No hay aplicaciones en los grupos seleccionados</p>
    </div>

    <div v-else class="applications-grid">
      <a
        v-for="app in filteredApplications"
        :key="app.pk"
        :href="app.launchUrl"
        :target="app.openInNewTab ? '_blank' : '_self'"
        class="app-card"
      >
        <div class="app-card-content">
          <div class="app-icon">
            <img
              v-if="getAppIconUrl(app)"
              :src="getAppIconUrl(app)"
              :alt="app.name"
              class="w-7 h-7 object-contain"
              @error="handleIconError($event, app)"
            />
            <UIcon
              v-else
              name="i-heroicons-cube"
              class="w-7 h-7"
            />
          </div>

          <div class="app-info">
            <div class="app-header">
              <h4 class="app-name">
                {{ app.name }}
              </h4>
              <UIcon
                v-if="app.openInNewTab"
                name="i-heroicons-arrow-top-right-on-square"
                class="external-icon"
              />
            </div>

            <div v-if="app.group" class="app-groups">
              <UBadge
                v-for="group in app.group.split(',')"
                :key="group"
                size="xs"
                color="neutral"
                variant="soft"
              >
                {{ group.trim() }}
              </UBadge>
            </div>

            <p v-if="app.description" class="app-description">
              {{ app.description }}
            </p>
          </div>
        </div>
      </a>
    </div>
  </div>
</template>

<script setup lang="ts">
interface Application {
  pk: string
  name: string
  slug: string
  launchUrl: string
  description?: string
  icon?: string
  publisher?: string
  group?: string
  openInNewTab: boolean
}

const { data: applicationsRaw, pending, error, refresh } = await useFetch<Application[]>('/api/authentik/applications', {
  default: () => []
})

// Filtrar esta app (perfil) de la lista de manera hardcodeada
const applications = computed(() => {
  return applicationsRaw.value.filter(app => {
    // Filtrar por slug o nombre que contenga "perfil"
    const isPerfil = app.slug === 'perfil' ||
                     app.slug === 'perfil-nucleo' ||
                     app.name.toLowerCase().includes('perfil nucleo')
    return !isPerfil
  })
})

// Cookie para persistir filtros seleccionados
const filtersCookie = useCookie<string[]>('app-filters', {
  maxAge: 60 * 60 * 24 * 365, // 1 año
  sameSite: 'lax',
  default: () => []
})

// Cookie para persistir búsqueda
const searchCookie = useCookie<string>('app-search', {
  maxAge: 60 * 60 * 24 * 7, // 1 semana
  sameSite: 'lax',
  default: () => ''
})

// Estado de filtros (inicializado desde cookie)
const selectedGroups = ref<string[]>(filtersCookie.value || [])

// Estado de búsqueda (inicializado desde cookie)
const searchQuery = ref<string>(searchCookie.value || '')

// Estado para iconos fallidos (para no intentar cargarlos de nuevo)
const failedIcons = ref<Set<string>>(new Set())

// Función para obtener la URL del icono de una app
const getAppIconUrl = (app: Application): string | null => {
  // Si el icono ya falló, no intentar de nuevo
  if (failedIcons.value.has(app.pk)) {
    return null
  }

  // Si tiene meta_icon de Authentik, usarlo
  if (app.icon) {
    // Si es una URL completa
    if (app.icon.startsWith('http://') || app.icon.startsWith('https://')) {
      return app.icon
    }
    // Si es una ruta relativa, usar el dominio de la app
    try {
      const url = new URL(app.launchUrl)
      return `${url.origin}${app.icon.startsWith('/') ? '' : '/'}${app.icon}`
    } catch {
      return null
    }
  }

  // Intentar obtener el favicon de la URL
  try {
    const url = new URL(app.launchUrl)
    // Intentar primero apple-touch-icon (suele ser de mejor calidad)
    return `${url.origin}/apple-touch-icon.png`
  } catch {
    return null
  }
}

// Manejar error al cargar icono
const handleIconError = (event: Event, app: Application) => {
  const imgElement = event.target as HTMLImageElement
  const currentSrc = imgElement.src

  // Marcar como fallido
  failedIcons.value.add(app.pk)

  // Si estábamos intentando apple-touch-icon, intentar favicon.ico
  if (currentSrc.includes('apple-touch-icon')) {
    try {
      const url = new URL(app.launchUrl)
      imgElement.src = `${url.origin}/favicon.ico`
      failedIcons.value.delete(app.pk) // Dar otra oportunidad
      return
    } catch {
      // Si falla, el v-else mostrará el icono por defecto
    }
  }

  // Ocultar la imagen para que se muestre el icono por defecto
  imgElement.style.display = 'none'
}

// Extraer todos los grupos únicos de las aplicaciones
const availableGroups = computed(() => {
  const groups = new Set<string>()
  applications.value.forEach(app => {
    if (app.group) {
      app.group.split(',').forEach(group => {
        groups.add(group.trim())
      })
    }
  })
  return Array.from(groups).sort()
})

// Filtrar aplicaciones según grupos seleccionados y búsqueda
const filteredApplications = computed(() => {
  let filtered = applications.value

  // Filtrar por grupos si hay grupos seleccionados
  if (selectedGroups.value.length > 0) {
    filtered = filtered.filter(app => {
      if (!app.group) return false
      const appGroups = app.group.split(',').map(g => g.trim())
      return selectedGroups.value.some(selectedGroup =>
        appGroups.includes(selectedGroup)
      )
    })
  }

  // Filtrar por búsqueda si hay término de búsqueda
  if (searchQuery.value.trim()) {
    const search = searchQuery.value.toLowerCase().trim()
    filtered = filtered.filter(app => {
      // Buscar en nombre
      const nameMatch = app.name.toLowerCase().includes(search)
      // Buscar en URL
      const urlMatch = app.launchUrl.toLowerCase().includes(search)
      // Buscar en descripción
      const descriptionMatch = app.description?.toLowerCase().includes(search) || false

      return nameMatch || urlMatch || descriptionMatch
    })
  }

  return filtered
})

// Toggle de selección de grupos
const toggleGroup = (group: string) => {
  const index = selectedGroups.value.indexOf(group)
  if (index === -1) {
    selectedGroups.value.push(group)
  } else {
    selectedGroups.value.splice(index, 1)
  }
  // Guardar en cookie
  filtersCookie.value = selectedGroups.value
}

// Sincronizar con cookie cuando cambian los filtros
watch(selectedGroups, (newFilters) => {
  filtersCookie.value = newFilters
})

// Sincronizar con cookie cuando cambia la búsqueda
watch(searchQuery, (newSearch) => {
  searchCookie.value = newSearch
})

// Refrescar automáticamente cada 5 minutos
const refreshInterval = setInterval(() => {
  refresh()
}, 5 * 60 * 1000)

// Limpiar interval cuando el componente se desmonte
onUnmounted(() => {
  clearInterval(refreshInterval)
})
</script>

<style scoped>
/* Estilos de modo oscuro deben estar fuera de scoped para .dark */
.applications-container {
  background: rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(20px) saturate(180%);
  border-radius: 1.5rem;
  padding: 2rem;
  box-shadow:
    0 8px 32px 0 rgba(31, 38, 135, 0.15),
    inset 0 1px 1px 0 rgba(255, 255, 255, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.18);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.applications-header {
  margin-bottom: 2rem;
}

.applications-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-gray-900);
  margin: 0;
}

.app-counter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 0.75rem;
  font-size: 1.125rem;
  font-weight: 700;
  border-radius: 0.875rem;
  background: rgba(var(--color-primary-500), 0.15);
  backdrop-filter: blur(10px) saturate(150%);
  border: 1px solid rgba(var(--color-primary-500), 0.3);
  color: rgb(var(--color-primary-500));
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow:
    0 2px 8px 0 rgba(var(--color-primary-500), 0.2),
    inset 0 1px 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 2px 0 rgba(var(--color-primary-500), 0.1);
}

.search-section {
  margin-bottom: 1.5rem;
}

.search-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 500px;
}

.search-icon {
  position: absolute;
  left: 1rem;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--color-gray-400);
  pointer-events: none;
  z-index: 1;
}

.search-input {
  width: 100%;
  padding: 0.75rem 3rem 0.75rem 3rem;
  font-size: 0.9375rem;
  font-weight: 500;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px) saturate(150%);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: var(--color-gray-800);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow:
    0 2px 6px 0 rgba(31, 38, 135, 0.08),
    inset 0 1px 1px 0 rgba(255, 255, 255, 0.3);
  outline: none;
}

.search-input::placeholder {
  color: var(--color-gray-400);
}

.search-input:focus {
  background: rgba(255, 255, 255, 0.4);
  border-color: rgba(var(--color-primary-500), 0.3);
  box-shadow:
    0 4px 12px 0 rgba(var(--color-primary-500), 0.15),
    0 0 0 3px rgba(var(--color-primary-500), 0.1),
    inset 0 1px 1px 0 rgba(255, 255, 255, 0.4);
}

.search-clear {
  position: absolute;
  right: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.5rem;
  background: rgba(0, 0, 0, 0.05);
  border: none;
  color: var(--color-gray-500);
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 1;
}

.search-clear:hover {
  background: rgba(0, 0, 0, 0.1);
  color: var(--color-gray-700);
  transform: scale(1.1);
}

.filter-section {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.filter-button {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(10px) saturate(150%);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: var(--color-gray-700);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow:
    0 2px 6px 0 rgba(31, 38, 135, 0.08),
    inset 0 1px 1px 0 rgba(255, 255, 255, 0.3);
}

.filter-button:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.35);
  box-shadow:
    0 4px 12px 0 rgba(31, 38, 135, 0.12),
    inset 0 1px 1px 0 rgba(255, 255, 255, 0.4);
}

.filter-button-active {
  background: rgba(var(--color-primary-500), 0.15);
  border-color: rgba(var(--color-primary-500), 0.3);
  color: rgb(var(--color-primary-500));
  font-weight: 600;
  box-shadow:
    0 2px 8px 0 rgba(var(--color-primary-500), 0.2),
    inset 0 1px 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 2px 0 rgba(var(--color-primary-500), 0.1);
}

.filter-button-active:hover {
  background: rgba(var(--color-primary-500), 0.2);
  border-color: rgba(var(--color-primary-500), 0.4);
  box-shadow:
    0 4px 12px 0 rgba(var(--color-primary-500), 0.3),
    inset 0 1px 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 2px 0 rgba(var(--color-primary-500), 0.15);
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  text-align: center;
}

.applications-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

@media (min-width: 640px) {
  .applications-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .applications-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.app-card {
  display: block;
  padding: 1.25rem;
  border-radius: 1.25rem;
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(15px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow:
    0 4px 16px 0 rgba(31, 38, 135, 0.1),
    inset 0 1px 1px 0 rgba(255, 255, 255, 0.4);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  text-decoration: none;
}

.app-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow:
    0 12px 32px 0 rgba(var(--color-primary-500), 0.25),
    0 0 0 1px rgba(var(--color-primary-500), 0.5),
    inset 0 1px 1px 0 rgba(255, 255, 255, 0.5);
  border-color: rgba(var(--color-primary-500), 0.6);
}

.app-card-content {
  display: flex;
  gap: 1rem;
  align-items: start;
}

.app-icon {
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  border-radius: 0.75rem;
  background: rgba(var(--color-primary-500), 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(var(--color-primary-500));
  transition: all 0.3s ease;
}

.app-card:hover .app-icon {
  background: rgba(var(--color-primary-500), 0.2);
  transform: scale(1.1);
}

.app-info {
  flex: 1;
  min-width: 0;
}

.app-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.app-name {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-gray-900);
  margin: 0;
  transition: color 0.3s ease;
  line-height: 1.3;
}

.app-card:hover .app-name {
  color: rgb(var(--color-primary-500));
}

.external-icon {
  width: 1rem;
  height: 1rem;
  color: var(--color-gray-400);
  flex-shrink: 0;
  margin-top: 0.125rem;
}

.app-groups {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-bottom: 0.5rem;
}

.app-description {
  font-size: 0.8125rem;
  color: var(--color-gray-600);
  line-height: 1.4;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Responsive */
@media (max-width: 640px) {
  .applications-container {
    padding: 1.5rem;
  }

  .applications-title {
    font-size: 1.5rem;
  }

  .applications-grid {
    gap: 0.75rem;
    grid-template-columns: 1fr;
  }

  .app-card {
    padding: 1rem;
  }

  .app-card-content {
    gap: 0.75rem;
  }

  .app-icon {
    width: 2.5rem;
    height: 2.5rem;
  }
}
</style>

<style>
/* Estilos de modo oscuro (sin scoped para que .dark funcione correctamente) */
.dark .applications-container {
  background: rgba(0, 0, 0, 0.15) !important;
  box-shadow:
    0 8px 32px 0 rgba(0, 0, 0, 0.5),
    inset 0 1px 1px 0 rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.dark .applications-title {
  color: var(--color-gray-100) !important;
}

.dark .app-counter {
  background: rgba(var(--color-primary-500), 0.25) !important;
  border-color: rgba(var(--color-primary-500), 0.5) !important;
  color: rgb(var(--color-primary-400)) !important;
  box-shadow:
    0 2px 8px 0 rgba(var(--color-primary-500), 0.4),
    0 0 0 1px rgba(var(--color-primary-500), 0.3),
    inset 0 1px 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 2px 0 rgba(var(--color-primary-500), 0.2) !important;
}

.dark .app-card {
  background: rgba(0, 0, 0, 0.65) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow:
    0 4px 16px 0 rgba(0, 0, 0, 0.4),
    inset 0 1px 1px 0 rgba(255, 255, 255, 0.05) !important;
}

.dark .app-card:hover {
  box-shadow:
    0 12px 32px 0 rgba(var(--color-primary-500), 0.4),
    0 0 0 1px rgba(var(--color-primary-500), 0.7),
    inset 0 1px 1px 0 rgba(255, 255, 255, 0.1) !important;
}

.dark .app-name {
  color: var(--color-gray-100) !important;
}

.dark .app-description {
  color: var(--color-gray-400) !important;
}

.dark .filter-button {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: var(--color-gray-300) !important;
  box-shadow:
    0 2px 6px 0 rgba(0, 0, 0, 0.3),
    inset 0 1px 1px 0 rgba(255, 255, 255, 0.05) !important;
}

.dark .filter-button:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  box-shadow:
    0 4px 12px 0 rgba(0, 0, 0, 0.4),
    inset 0 1px 1px 0 rgba(255, 255, 255, 0.08) !important;
}

.dark .filter-button-active {
  background: rgba(var(--color-primary-500), 0.25) !important;
  border-color: rgba(var(--color-primary-500), 0.5) !important;
  color: rgb(var(--color-primary-400)) !important;
  box-shadow:
    0 2px 8px 0 rgba(var(--color-primary-500), 0.4),
    0 0 0 1px rgba(var(--color-primary-500), 0.3),
    inset 0 1px 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 2px 0 rgba(var(--color-primary-500), 0.2) !important;
}

.dark .filter-button-active:hover {
  background: rgba(var(--color-primary-500), 0.3) !important;
  border-color: rgba(var(--color-primary-500), 0.6) !important;
  box-shadow:
    0 4px 12px 0 rgba(var(--color-primary-500), 0.5),
    0 0 0 1px rgba(var(--color-primary-500), 0.4),
    inset 0 1px 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 2px 0 rgba(var(--color-primary-500), 0.25) !important;
}

.dark .search-input {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: var(--color-gray-200) !important;
  box-shadow:
    0 2px 6px 0 rgba(0, 0, 0, 0.3),
    inset 0 1px 1px 0 rgba(255, 255, 255, 0.05) !important;
}

.dark .search-input::placeholder {
  color: var(--color-gray-500) !important;
}

.dark .search-input:focus {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(var(--color-primary-500), 0.5) !important;
  box-shadow:
    0 4px 12px 0 rgba(var(--color-primary-500), 0.3),
    0 0 0 3px rgba(var(--color-primary-500), 0.15),
    inset 0 1px 1px 0 rgba(255, 255, 255, 0.08) !important;
}

.dark .search-icon {
  color: var(--color-gray-500) !important;
}

.dark .search-clear {
  background: rgba(255, 255, 255, 0.05) !important;
  color: var(--color-gray-400) !important;
}

.dark .search-clear:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  color: var(--color-gray-200) !important;
}
</style>