agent-ui/frontend/src/components/ComponentsDropdown.vue

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import { useComponentsStore } from '../stores/components'

const store = useComponentsStore()
const isOpen = ref(false)

async function handleLoadComponent(comp: any) {
  window.dispatchEvent(new CustomEvent('load-vue-component', {
    detail: {
      id: comp.id,
      name: comp.name,
      template: comp.template,
      setup: comp.setup,
      style: comp.style,
      props: typeof comp.props === 'string' ? JSON.parse(comp.props) : comp.props || [],
      imports: typeof comp.imports === 'string' ? JSON.parse(comp.imports) : comp.imports || []
    }
  }))
  isOpen.value = false
}

async function handleDelete(id: string, e: Event) {
  e.stopPropagation()
  if (!confirm('¿Eliminar este componente?')) return
  await store.deleteComponent(id)
}

function toggleDropdown() {
  isOpen.value = !isOpen.value
  if (isOpen.value) {
    store.fetchComponents()
  }
}

function closeDropdown(e: MouseEvent) {
  const target = e.target as HTMLElement
  if (!target.closest('.dropdown-container')) {
    isOpen.value = false
  }
}

function onComponentRendered(e: Event) {
  store.handleComponentRendered((e as CustomEvent).detail)
}

onMounted(() => {
  document.addEventListener('click', closeDropdown)
  window.addEventListener('vue-component-rendered', onComponentRendered)
})

onUnmounted(() => {
  document.removeEventListener('click', closeDropdown)
  window.removeEventListener('vue-component-rendered', onComponentRendered)
})
</script>

<template>
  <div class="dropdown-container">
    <button class="dropdown-trigger" @click.stop="toggleDropdown" title="Componentes guardados">
      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/>
        <polyline points="3.29 7 12 12 20.71 7"/>
        <line x1="12" y1="22" x2="12" y2="12"/>
      </svg>
      <span>Componentes</span>
      <span v-if="store.hasCurrentComponent" class="badge">1</span>
      <svg class="chevron" :class="{ open: isOpen }" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <polyline points="6 9 12 15 18 9"/>
      </svg>
    </button>

    <div v-if="isOpen" class="dropdown-menu" @click.stop>
      <!-- Componente actual -->
      <div v-if="store.currentComponent" class="section current-section">
        <div class="section-header">
          <span class="section-title">Componente actual</span>
        </div>
        <div class="current-component">
          <div class="item-info">
            <span class="item-name">{{ store.currentComponent.name }}</span>
            <span class="item-id">{{ store.currentComponent.id }}</span>
          </div>
          <div class="item-actions">
            <button
              class="action-btn save-btn"
              @click="store.saveCurrentComponent()"
              :disabled="store.saving"
              title="Guardar componente"
            >
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/>
                <polyline points="17 21 17 13 7 13 7 21"/>
                <polyline points="7 3 7 8 15 8"/>
              </svg>
            </button>
            <button
              class="action-btn delete-btn"
              @click="store.clearCurrentComponent()"
              title="Descartar"
            >
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <line x1="18" y1="6" x2="6" y2="18"/>
                <line x1="6" y1="6" x2="18" y2="18"/>
              </svg>
            </button>
          </div>
        </div>
      </div>

      <!-- Separador -->
      <div v-if="store.currentComponent && store.savedCount > 0" class="divider"></div>

      <!-- Componentes guardados -->
      <div class="section saved-section">
        <div class="section-header">
          <span class="section-title">Guardados</span>
          <span class="section-count">{{ store.savedCount }}</span>
        </div>

        <div v-if="store.loading" class="dropdown-loading">
          Cargando...
        </div>
        <div v-else-if="store.savedCount === 0" class="dropdown-empty">
          No hay componentes guardados
        </div>
        <template v-else>
          <div
            v-for="comp in store.savedComponents"
            :key="comp.id"
            class="dropdown-item"
          >
            <div class="item-info" @click="handleLoadComponent(comp)">
              <span class="item-name">{{ comp.name }}</span>
              <span class="item-id">{{ comp.id }}</span>
            </div>
            <div class="item-actions">
              <button
                class="action-btn load-btn"
                @click="handleLoadComponent(comp)"
                title="Cargar en canvas"
              >
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <polyline points="15 10 20 15 15 20"/>
                  <path d="M4 4v7a4 4 0 0 0 4 4h12"/>
                </svg>
              </button>
              <button
                class="action-btn delete-btn"
                @click="handleDelete(comp.id, $event)"
                title="Eliminar"
              >
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <path d="M3 6h18"/>
                  <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/>
                  <path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/>
                </svg>
              </button>
            </div>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<style scoped>
.dropdown-container {
  position: relative;
}

.dropdown-trigger {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: var(--bg-hover);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--text-secondary);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.dropdown-trigger:hover {
  background: var(--bg-tertiary, rgba(255,255,255,0.1));
  color: var(--text-primary);
  border-color: var(--border-hover, var(--border-color));
}

.badge {
  background: #6366f1;
  color: white;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.125rem 0.375rem;
  border-radius: 9999px;
  min-width: 18px;
  text-align: center;
}

.chevron {
  transition: transform 0.2s ease;
}

.chevron.open {
  transform: rotate(180deg);
}

.dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 300px;
  max-height: 400px;
  overflow-y: auto;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  z-index: 1000;
}

.section {
  padding: 0.5rem;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
}

.section-title {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
}

.section-count {
  font-size: 0.7rem;
  background: var(--bg-hover);
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  color: var(--text-secondary);
}

.divider {
  height: 1px;
  background: var(--border-color);
  margin: 0;
}

.current-section {
  background: rgba(99, 102, 241, 0.1);
  border-radius: 8px;
  margin: 0.5rem;
}

.current-component {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  gap: 1rem;
}

.dropdown-loading,
.dropdown-empty {
  padding: 1rem;
  text-align: center;
  color: var(--text-secondary);
  font-size: 0.875rem;
}

.dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 0.75rem;
  border-radius: 8px;
  margin: 0.25rem 0;
  transition: background 0.15s ease;
}

.dropdown-item:hover {
  background: var(--bg-hover);
}

.item-info {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  cursor: pointer;
  flex: 1;
}

.item-name {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-primary);
}

.item-id {
  font-size: 0.7rem;
  color: var(--text-secondary);
  font-family: monospace;
}

.item-actions {
  display: flex;
  gap: 0.375rem;
}

.action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  background: transparent;
  color: var(--text-secondary);
}

.action-btn:hover {
  transform: scale(1.1);
}

.action-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.save-btn:hover {
  background: rgba(34, 197, 94, 0.2);
  color: #22c55e;
}

.load-btn:hover {
  background: rgba(99, 102, 241, 0.2);
  color: #6366f1;
}

.delete-btn:hover {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}
</style>