feat: Implementar nuevas mejoras en Amayo Bot Editor

- Agregar selector de directorio multi-OS con validación y persistencia - Implementar preview en tiempo real del código generado en CommandCreator y EventCreator - Activar TypeScript strict mode y añadir snippets nativos para mejorar la experiencia de desarrollo - Crear documentación detallada sobre las nuevas funcionalidades y cambios realizados - Actualizar README con instrucciones de uso y solución de problemas comunes - Modificar archivos clave para integrar las nuevas características y mejorar la usabilidad
2025-11-04 03:14:03 -06:00
parent 954e0ba333
commit 38046e4df8
13 changed files with 25 additions and 33 deletions
--- a/README/DOCUMENTACION_COMPLETA.md
+++ b/README/DOCUMENTACION_COMPLETA.md
@@ -0,0 +1,598 @@
+# 🚀 Guía Completa - Amayo Bot Editor
+
+## 📋 Resumen del Proyecto
+
+He creado una **aplicación desktop completa** con Tauri, TypeScript y Vue que funciona como un **editor estilo VS Code** específicamente diseñado para gestionar tu bot de Discord "Amayo".
+
+## ✨ Funcionalidades Implementadas
+
+### 1. ✅ Creación de Comandos via GUI
+
+La aplicación permite crear tanto **comandos de mensaje** (prefix-based) como **comandos slash** con una interfaz gráfica intuitiva:
+
+#### Características:
+- **Formulario visual** para metadatos:
+  - Nombre del comando
+  - Descripción
+  - Tipo (message/slash)
+  - Categoría
+  - Cooldown
+  - Aliases (para comandos de mensaje)
+  - Uso/sintaxis
+
+- **Editor Monaco integrado** con:
+  - Sintaxis highlighting para TypeScript
+  - Autocompletado
+  - Snippets predefinidos para Discord.js
+  - Shortcuts de teclado (Ctrl+S)
+
+- **Sistema de rutas automático**:
+  - Sugerencia inteligente de ruta basada en categoría y tipo
+  - Guardado en las carpetas correctas del proyecto
+
+#### Tipos de Comandos Soportados:
+
+**Comandos de Mensaje:**
+```typescript
+{
+  name: "ping",
+  type: 'message',
+  description: "Comando de latencia",
+  aliases: ["p", "latencia"],
+  category: "Utilidad",
+  cooldown: 5,
+  usage: "!ping"
+}
+```
+
+**Comandos Slash:**
+```typescript
+{
+  name: "userinfo",
+  type: 'slash',
+  description: "Información del usuario",
+  cooldown: 10
+}
+```
+
+### 2. ✅ Creación de Eventos via GUI
+
+Soporte completo para crear y editar eventos de Discord.js:
+
+#### Tipos de Eventos:
+
+**A) Eventos Estándar:**
+- ready
+- messageCreate
+- interactionCreate
+- guildCreate/guildDelete
+- guildMemberAdd/guildMemberRemove
+- messageDelete/messageUpdate
+- channelCreate/channelDelete
+- Y más...
+
+**B) Eventos Custom/Extras:**
+Los eventos extras son funciones que detecta la aplicación en `src/events/extras/`. Estos son ejecutados desde eventos principales (como `messageCreate`).
+
+Ejemplo detectado: `alliance.ts` - Función custom que maneja las alianzas del servidor.
+
+#### Características:
+- **Selector de eventos** de Discord.js
+- **Editor Monaco** con snippets específicos
+- **Detección automática** de eventos extras existentes
+- **Validación** de nombres y rutas
+
+### 3. ✅ Editor de Código con Monaco
+
+El mismo editor usado en VS Code, con:
+
+- **Tema oscuro personalizado** estilo VS Code
+- **Autocompletado** de TypeScript
+- **Detección de cambios** con indicador visual
+- **Guardado rápido** con Ctrl+S
+- **Minimap** y números de línea
+- **Sintaxis highlighting** completo
+
+### 4. ✅ Dashboard con Estadísticas
+
+Panel lateral que muestra en tiempo real:
+
+```
+📝 Comandos Mensaje: X
+⚡ Comandos Slash: Y
+🎯 Eventos Estándar: Z
+✨ Eventos Custom: W
+━━━━━━━━━━━━━━━━━━
+Total Comandos: X+Y
+Total Eventos: Z+W
+```
+
+La aplicación **escanea automáticamente** tu proyecto y cuenta:
+- Comandos por mensaje
+- Comandos slash
+- Eventos estándar (archivos .ts en `src/events/`)
+- Eventos custom (archivos en `src/events/extras/`)
+
+### 5. ✅ Explorador de Archivos
+
+Navegación visual por todos los comandos y eventos:
+
+**Comandos:**
+- Icono 📝 para comandos de mensaje
+- Icono ⚡ para comandos slash
+- Organizado por categorías
+
+**Eventos:**
+- Icono 🎯 para eventos estándar
+- Icono ✨ para eventos custom
+- Lista alfabética
+
+## 🏗️ Arquitectura de la Aplicación
+
+### Frontend (Vue + TypeScript)
+
+```
+src/
+├── components/
+│   ├── Sidebar.vue           # Panel lateral con stats y navegación
+│   ├── MonacoEditor.vue      # Editor de código principal
+│   ├── CommandCreator.vue    # Creador de comandos
+│   └── EventCreator.vue      # Creador de eventos
+├── types/
+│   └── bot.ts                # Tipos TypeScript del bot
+├── App.vue                   # Componente principal
+└── main.ts                   # Entry point
+```
+
+### Backend (Rust + Tauri)
+
+```
+src-tauri/src/
+└── lib.rs                    # Comandos Rust expuestos a Vue
+```
+
+#### Comandos Tauri Implementados:
+
+1. **`get_project_root()`**
+   - Obtiene la ruta raíz del proyecto Amayo
+   - Navega desde AEditor hacia arriba un nivel
+
+2. **`scan_commands(projectRoot: String)`**
+   - Escanea recursivamente `src/commands/`
+   - Detecta comandos de mensaje y slash
+   - Retorna lista de archivos con metadatos
+
+3. **`scan_events(projectRoot: String)`**
+   - Escanea `src/events/` (eventos estándar)
+   - Escanea `src/events/extras/` (eventos custom)
+   - Diferencia entre ambos tipos
+
+4. **`get_project_stats(projectRoot: String)`**
+   - Analiza todos los archivos
+   - Cuenta comandos por tipo
+   - Cuenta eventos por tipo
+   - Lee contenido para determinar tipo exacto
+
+5. **`read_file_content(filePath: String)`**
+   - Lee archivos .ts del proyecto
+   - Permite edición en el editor
+
+6. **`write_file_content(filePath: String, content: String)`**
+   - Guarda archivos modificados
+   - Crea directorios si no existen
+   - Mantiene estructura del proyecto
+
+## 🎨 Interfaz de Usuario
+
+### Diseño Estilo VS Code
+
+La aplicación replica el look & feel de Visual Studio Code:
+
+**Colores:**
+- Background principal: `#1e1e1e`
+- Paneles: `#252526`, `#2d2d30`
+- Bordes: `#3e3e42`
+- Texto: `#cccccc`, `#ffffff`
+- Acentos: `#0e639c` (azul VS Code)
+- Success: `#4ec9b0` (verde teal)
+
+**Componentes:**
+- Sidebar fijo a la izquierda
+- Área principal responsive
+- Headers con acciones
+- Botones con hover effects
+- Scrollbars personalizados
+
+### Pantalla de Bienvenida
+
+Cuando no hay archivo seleccionado:
+```
+🤖 Amayo Bot Editor
+Editor estilo VS Code para tu bot de Discord
+
+[Estadísticas grandes]
+X Comandos Totales | Y Eventos Totales
+
+[➕ Crear Comando] [➕ Crear Evento]
+
+💡 Tip: Selecciona un archivo del panel izquierdo
+```
+
+## 📝 Flujo de Trabajo
+
+### Crear un Comando Nuevo
+
+1. Click en **"➕ Nuevo Comando"**
+2. Se abre `CommandCreator.vue`
+3. Completa el formulario:
+   - Selecciona tipo (message/slash)
+   - Ingresa nombre y descripción
+   - Configura metadatos opcionales
+4. Escribe código en Monaco Editor
+5. Usa botón "📝 Insertar Snippet" si necesitas código común
+6. Click en "➕ Crear Comando"
+7. El archivo se guarda en la ruta correcta
+8. Las estadísticas se actualizan automáticamente
+
+### Editar un Comando Existente
+
+1. Navega al comando en el sidebar
+2. Click en el archivo
+3. Se carga en `MonacoEditor.vue`
+4. Edita el código
+5. Guarda con Ctrl+S o botón "💾 Guardar"
+6. Indicador "●" muestra cambios no guardados
+
+### Crear un Evento Nuevo
+
+1. Click en **"➕ Nuevo Evento"**
+2. Se abre `EventCreator.vue`
+3. Selecciona tipo (estándar/custom)
+4. Si es estándar: elige el evento de Discord
+5. Ingresa nombre de archivo
+6. Escribe la lógica
+7. Click en "➕ Crear Evento"
+8. Se guarda en `src/events/` o `src/events/extras/`
+
+### Editar un Evento Existente
+
+Similar a editar comandos, pero con eventos del sidebar.
+
+## 🔧 Integración con el Bot
+
+### Estructura de Comandos Generados
+
+**Comando de Mensaje:**
+```typescript
+import type { Message } from "discord.js";
+import type Amayo from "../../core/client";
+
+export default {
+  name: "ejemplo",
+  description: "Comando de ejemplo",
+  type: 'message' as const,
+  category: "Utilidad",
+  aliases: ["ej", "test"],
+  cooldown: 5,
+  async run(message: Message, args: string[], client: Amayo) {
+    // Código generado aquí
+    await message.reply("¡Ejemplo!");
+  }
+}
+```
+
+**Comando Slash:**
+```typescript
+import type { ChatInputCommandInteraction } from "discord.js";
+import type Amayo from "../../core/client";
+
+export default {
+  name: "ejemplo",
+  description: "Comando slash de ejemplo",
+  type: 'slash' as const,
+  cooldown: 5,
+  async run(interaction: ChatInputCommandInteraction, client: Amayo) {
+    // Código generado aquí
+    await interaction.reply({
+      content: "¡Ejemplo!",
+      ephemeral: true
+    });
+  }
+}
+```
+
+### Estructura de Eventos Generados
+
+**Evento Estándar:**
+```typescript
+import { bot } from "../main";
+import { Events } from "discord.js";
+import logger from "../core/lib/logger";
+
+bot.on(Events.MessageCreate, async (message) => {
+  if (message.author.bot) return;
+  
+  // Tu código aquí
+  logger.info(`Mensaje de ${message.author.tag}`);
+});
+```
+
+**Evento Custom:**
+```typescript
+import { Message } from "discord.js";
+import logger from "../../core/lib/logger";
+
+export async function myCustomHandler(message: Message) {
+  try {
+    // Tu lógica custom
+  } catch (error) {
+    logger.error({ err: error }, "Error en handler custom");
+  }
+}
+```
+
+## 📦 Snippets Disponibles
+
+### Para Comandos de Mensaje:
+
+- **Basic Reply**: `await message.reply("respuesta");`
+- **Embed**: Estructura completa de embed
+- **Error Handling**: Try-catch con reply de error
+
+### Para Comandos Slash:
+
+- **Basic Reply**: Con ephemeral
+- **Embed Reply**: Embed en interacción
+- **Defer Reply**: Para comandos que tardan
+
+### Para Eventos:
+
+- **Logger**: Mensajes de log
+- **Try-Catch**: Error handling
+- **Message Checks**: Validaciones comunes
+- **Guild Checks**: Verificar guild
+- **Prisma**: Ejemplo de uso de base de datos
+
+## 🚀 Instalación y Ejecución
+
+### Requisitos Previos
+
+```bash
+# Node.js 18+
+node --version
+
+# Rust (para Tauri)
+rustc --version
+
+# npm o yarn
+npm --version
+```
+
+### Instalación
+
+```bash
+cd AEditor
+npm install
+```
+
+### Desarrollo
+
+```bash
+# Iniciar en modo desarrollo
+npm run dev
+
+# En otra terminal (si Tauri no inicia automáticamente)
+npm run tauri dev
+```
+
+### Compilación
+
+```bash
+# Compilar aplicación desktop
+npm run tauri build
+
+# El ejecutable estará en:
+# src-tauri/target/release/aeditor.exe (Windows)
+```
+
+## 🎯 Características Técnicas
+
+### Monaco Editor
+
+- **Versión**: Latest
+- **Lenguaje**: TypeScript configurado
+- **Tema**: Custom dark theme (basado en VS Code)
+- **Features**:
+  - IntelliSense
+  - Error checking
+  - Auto-formatting
+  - Multi-cursor
+  - Find/Replace
+  - Command palette
+
+### Tauri
+
+- **Versión**: 2.x
+- **Características usadas**:
+  - Invoke commands (comunicación Rust ↔ Vue)
+  - File system access
+  - Path manipulation
+  - Recursive directory scanning
+
+### Vue 3
+
+- **Composition API** con `<script setup>`
+- **TypeScript** strict mode
+- **Reactive state** con `ref()`
+- **Lifecycle hooks** (onMounted, onUnmounted)
+- **Props & Emits** tipados
+
+## 🔍 Detección de Comandos y Eventos
+
+### Cómo Detecta los Comandos
+
+1. Escanea recursivamente `src/commands/messages/**` y `src/commands/splashcmd/**`
+2. Busca archivos `.ts`
+3. Lee el contenido
+4. Detecta el tipo buscando `type: 'message'` o `type: 'slash'`
+5. Extrae metadatos del código
+
+### Cómo Detecta los Eventos
+
+1. **Eventos Estándar**:
+   - Busca archivos `.ts` directamente en `src/events/`
+   - Excluye carpeta `extras/`
+   - Cada archivo es un evento estándar
+
+2. **Eventos Custom**:
+   - Busca archivos `.ts` en `src/events/extras/`
+   - Detecta funciones exportadas
+   - Marca como evento custom
+
+## 🎨 Personalización
+
+### Cambiar Colores
+
+Edita las variables CSS en `App.vue`:
+
+```css
+--bg-primary: #1e1e1e;
+--bg-secondary: #252526;
+--border-color: #3e3e42;
+--text-primary: #cccccc;
+--accent-color: #0e639c;
+```
+
+### Agregar Más Snippets
+
+En `CommandCreator.vue` o `EventCreator.vue`, edita el objeto `snippets`:
+
+```typescript
+const snippets = {
+  mySnippet: `// Tu código aquí`,
+};
+```
+
+### Agregar Más Eventos de Discord
+
+En `EventCreator.vue`, agrega opciones al select:
+
+```html
+<option value="voiceStateUpdate">voiceStateUpdate</option>
+```
+
+## 🐛 Solución de Problemas
+
+### "No se encontró el directorio de comandos"
+
+**Causa**: La aplicación no encuentra `src/commands/`
+
+**Solución**: 
+1. Verifica que ejecutas desde `AEditor/`
+2. Confirma que existe `../src/commands/` relativo a AEditor
+3. Revisa la ruta en `get_project_root()` en `lib.rs`
+
+### Monaco Editor no carga
+
+**Causa**: Dependencias no instaladas
+
+**Solución**:
+```bash
+npm install monaco-editor @vueuse/core
+```
+
+### Errores de compilación de Rust
+
+**Causa**: Rust no está instalado o desactualizado
+
+**Solución**:
+```bash
+# Instalar Rust
+curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
+
+# Actualizar Rust
+rustup update
+```
+
+### No se guardan los archivos
+
+**Causa**: Permisos de escritura
+
+**Solución**:
+1. Ejecuta la app con permisos adecuados
+2. Verifica que no hay archivos bloqueados
+3. Confirma que las rutas son correctas
+
+## 📚 Recursos Adicionales
+
+### Discord.js
+- [Documentación oficial](https://discord.js.org/)
+- [Guía de Discord.js](https://discordjs.guide/)
+
+### Tauri
+- [Documentación de Tauri](https://tauri.app/)
+- [API Reference](https://tauri.app/reference/)
+
+### Monaco Editor
+- [Monaco Editor API](https://microsoft.github.io/monaco-editor/docs.html)
+- [Playground](https://microsoft.github.io/monaco-editor/playground.html)
+
+### Vue 3
+- [Documentación oficial](https://vuejs.org/)
+- [Composition API](https://vuejs.org/guide/extras/composition-api-faq.html)
+
+## 🤝 Próximas Mejoras Sugeridas
+
+1. **Validación de código**:
+   - Lint en tiempo real
+   - Verificación de sintaxis antes de guardar
+
+2. **Git Integration**:
+   - Ver cambios
+   - Commit desde la app
+   - Historial de versiones
+
+3. **Testing**:
+   - Ejecutar comandos en sandbox
+   - Ver output en tiempo real
+
+4. **Temas personalizables**:
+   - Light theme
+   - Más variantes de dark theme
+
+5. **Multi-tab**:
+   - Abrir múltiples archivos
+   - Tabs estilo VS Code
+
+6. **Search & Replace**:
+   - Buscar en todos los archivos
+   - Reemplazar en batch
+
+7. **Terminal integrado**:
+   - Ejecutar npm/node commands
+   - Ver logs del bot
+
+8. **Autocompletado mejorado**:
+   - Sugerencias de Discord.js
+   - IntelliSense de tu bot (client, prisma, etc.)
+
+## 📄 Licencia
+
+Este proyecto forma parte de Amayo Bot. Consulta la licencia del proyecto principal.
+
+---
+
+## 🎉 ¡Listo para Usar!
+
+Tu editor está completamente funcional con todas las características solicitadas:
+
+✅ Creación de comandos con GUI + Editor  
+✅ Creación de eventos con GUI + Editor  
+✅ Detección de eventos extras customizados  
+✅ Contador de comandos mensaje/slash  
+✅ Contador de eventos estándar/custom  
+✅ Editor Monaco con snippets  
+✅ Interfaz estilo VS Code  
+✅ Sistema de guardado completo  
+
+**¡Disfruta de tu nuevo editor visual para Amayo Bot! 🚀**