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>
        <UBadge v-if="filteredApplications.length > 0" color="primary" variant="soft" size="lg">
          {{ filteredApplications.length }}
        </UBadge>
      </div>

      <!-- Filtros por grupos -->
      <div v-if="availableGroups.length > 0" class="filter-section">
        <UButton
          v-for="group in availableGroups"
          :key="group"
          size="sm"
          :color="selectedGroups.includes(group) ? 'primary' : 'neutral'"
          :variant="selectedGroups.includes(group) ? 'soft' : 'ghost'"
          @click="toggleGroup(group)"
        >
          {{ group }}
        </UButton>
      </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">
            <UIcon
              v-if="app.icon"
              :name="app.icon"
              class="w-7 h-7"
            />
            <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: applications, pending, error, refresh } = await useFetch<Application[]>('/api/authentik/applications', {
  default: () => []
})

// Estado de filtros
const selectedGroups = ref<string[]>([])

// 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
const filteredApplications = computed(() => {
  // Si no hay grupos seleccionados, mostrar todas
  if (selectedGroups.value.length === 0) {
    return applications.value
  }

  // Filtrar apps que contengan al menos uno de los grupos seleccionados
  return applications.value.filter(app => {
    if (!app.group) return false
    const appGroups = app.group.split(',').map(g => g.trim())
    return selectedGroups.value.some(selectedGroup =>
      appGroups.includes(selectedGroup)
    )
  })
})

// 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)
  }
}

// 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>
.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);
}

:global(.dark) .applications-container {
  background: rgba(0, 0, 0, 0.15);
  box-shadow:
    0 8px 32px 0 rgba(0, 0, 0, 0.5),
    inset 0 1px 1px 0 rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.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;
}

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

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

.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;
}

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

.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);
}

:global(.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);
}

.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;
}

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

.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;
}

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

/* 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>