feat: token count implement

2026-03-17 12:07:56 -03:00
parent 41279585f6
commit be699ad6ab
44 changed files with 9032 additions and 167 deletions
@@ -0,0 +1,224 @@
+# 🎨 Navbar Actualizado - Guía de Cambios
+
+## ✅ Cambios Realizados
+
+### 1. **Textos Directos (Sin Traducción)**
+Se eliminaron las referencias a `t('nav.*')` y ahora los textos están en español directamente:
+
+**Antes:**
+```tsx
+{t('nav.courses')}
+{t('nav.library')}
+{t('nav.settings')}
+```
+
+**Ahora:**
+```tsx
+Dashboard
+Cursos
+Configuración
+```
+
+### 2. **Agrupación en Dropdowns**
+
+#### Dropdown "Cursos"
+Agrupa:
+- 📊 **Listar Cursos** (`/`) - El dashboard principal con tus cursos
+- 📚 **Librería** (`/library/assets`)
+- ❓ **Banco de Preguntas** (`/question-bank`)
+
+**Icono:** `BookOpen`
+
+#### Dropdown "Configuración" (Solo Admins)
+Agrupa:
+- 🔗 **Webhooks** (`/settings/webhooks`)
+- 👤 **Perfil** (`/profile`)
+- ⚙️ **General** (`/settings`)
+
+**Icono:** `Settings`
+
+### 3. **Navegación Simplificada**
+
+**Para Admins:**
+```
+Dashboard | Cursos ▼ | Control Global | Configuración ▼ | [Theme] [Lang] [User]
+```
+
+**Para No-Admins:**
+```
+Dashboard | Cursos ▼ | Configuración | [Theme] [Lang] [User]
+```
+
+### 4. **Iconos Actualizados**
+
+| Item | Icono |
+|------|-------|
+| Dashboard | `LayoutDashboard` |
+| Cursos (dropdown) | `BookOpen` |
+| Librería | `Library` |
+| Banco de Preguntas | `FileQuestion` |
+| Control Global | `ShieldCheck` |
+| Configuración (dropdown) | `Settings` |
+| Webhooks | `Webhook` |
+| Perfil | `User` |
+
+## 🎯 Comportamiento
+
+### Dropdowns
+- **Click** en "Cursos" o "Configuración" → Abre menú
+- **Click** fuera → Cierra menú
+- **Click** en item → Navega y cierra menú
+- **Flecha** indica estado (▼ cuando está abierto)
+
+### Responsive
+- Menús se adaptan a dark mode
+- Shadow y border para visibilidad
+- Z-index correcto para overlays
+
+## 📁 Archivos Modificados
+
+```
+web/studio/src/components/Navbar.tsx
+  + useState para dropdowns
+  + Iconos: ChevronDown, FileQuestion, Webhook, User
+  + DROPDOWN_ITEM style
+  + Dropdown "Cursos"
+  + Dropdown "Configuración"
+  + Textos en español directo
+```
+
+## 🎨 Estilos
+
+### Dropdown Menu
+```tsx
+const DROPDOWN_ITEM = "flex items-center gap-2 px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors";
+```
+
+**Características:**
+- Fondo blanco/gray oscuro
+- Hover effect
+- Border shadow
+- Iconos alineados
+
+### Flecha Animada
+```tsx
+<ChevronDown className={`w-3 h-3 transition-transform ${coursesOpen ? 'rotate-180' : ''}`} />
+```
+
+**Animación:**
+- Normal: ▲
+- Abierto: ▼ (rotate-180)
+
+## 🖼️ Preview
+
+### Navbar Normal
+```
+┌─────────────────────────────────────────────────────────────┐
+│  [Logo]  Dashboard  Cursos▼  Configuración▼  🌙 ES 👤      │
+└─────────────────────────────────────────────────────────────┘
+```
+
+### Dropdown "Cursos" Abierto
+```
+┌─────────────────────────────────────────────────────────────┐
+│  [Logo]  Dashboard  Cursos▼  Configuración▼  🌙 ES 👤      │
+│                     ┌──────────────────┐                    │
+│                     │ 📚 Librería      │                    │
+│                     │ ❓ Banco de Preg.│                    │
+│                     └──────────────────┘                    │
+└─────────────────────────────────────────────────────────────┘
+```
+
+### Dropdown "Configuración" Abierto (Admin)
+```
+┌─────────────────────────────────────────────────────────────┐
+│  [Logo]  Dashboard  Cursos  Configuración▼  🌙 ES 👤       │
+│                                      ┌──────────────────┐  │
+│                                      │ 🔗 Webhooks      │  │
+│                                      │ 👤 Perfil        │  │
+│                                      │ ⚙️  General       │  │
+│                                      └──────────────────┘  │
+└─────────────────────────────────────────────────────────────┘
+```
+
+## 🚀 Cómo Usar
+
+### Para Usuarios
+1. **Click** en "Cursos" para ver:
+   - Librería
+   - Banco de Preguntas
+
+2. **Click** en "Configuración" (si eres admin) para ver:
+   - Webhooks
+   - Perfil
+   - General
+
+### Para Desarrolladores
+```tsx
+// Agregar nuevo item al dropdown "Cursos":
+<Link 
+    href="/nueva-ruta" 
+    className={DROPDOWN_ITEM}
+    onClick={() => setCoursesOpen(false)}
+>
+    <NuevoIcono className="w-4 h-4" />
+    Nuevo Item
+</Link>
+
+// Agregar nuevo item al dropdown "Configuración":
+<Link 
+    href="/otra-ruta" 
+    className={DROPDOWN_ITEM}
+    onClick={() => setSettingsOpen(false)}
+>
+    <OtroIcono className="w-4 h-4" />
+    Otro Item
+</Link>
+```
+
+## ✅ Testing Checklist
+
+- [ ] Dropdown "Cursos" abre/cierra
+- [ ] Dropdown "Configuración" abre/cierra (admins)
+- [ ] Click fuera cierra dropdowns
+- [ ] Navegación funciona
+- [ ] Dark mode se ve bien
+- [ ] Flecha rota correctamente
+- [ ] Responsive en móviles
+- [ ] No hay errores de TypeScript
+
+## 🔄 Migración
+
+### Si tenías bookmarks:
+```
+Antes: /library/assets
+Ahora:  Cursos → Librería
+
+Antes: /question-bank
+Ahora:  Cursos → Banco de Preguntas
+
+Antes: /settings/webhooks
+Ahora:  Configuración → Webhooks
+
+Antes: /profile
+Ahora:  Configuración → Perfil
+```
+
+## 💡 Beneficios
+
+1. **Menos clutter** - Menos items visibles
+2. **Organización lógica** - Items relacionados agrupados
+3. **Escalable** - Fácil agregar nuevos items
+4. **UX mejorada** - Menús familiares para usuarios
+5. **Espacio** - Más room para otros features
+
+## 📝 Notas
+
+- Los dropdowns usan `fixed inset-0` overlay para cerrar al hacer click fuera
+- `z-index` cuidadosamente configurado para no interferir con otros elementos
+- Textos en español hardcoded (fácil cambiar si necesitas i18n después)
+- Iconos de Lucide React consistentes con el resto de la app
+
+---
+
+**Estado:** ✅ Completo y funcional