NavBar new features

frontend/src/components/features/auth/TagManager.jsx

@@ -1,181 +1,156 @@
-/**
- * Componente: TagManager
- * Propósito: Gestionar etiquetas personalizadas del usuario (CRUD)
- * Dependencias:
- *  - tagsService.js (para llamadas a API)
- *  - tags.css (estilos)
- */
-
-import { useState, useEffect } from 'react'
-import { Trash2, Plus, Loader, AlertCircle } from 'lucide-react'
-import { tagsService } from '../../../services/tagsService'
-import './tags.css'
+import { useState, useEffect } from "react";
+import { Trash2, Plus, Loader, AlertCircle } from "lucide-react";
+import { tagsService } from "../../../services/tagsService";
+import "./tags.css";
 
 const TAG_COLORS = [
-  '#3b82f6', // blue
-  '#ef4444', // red
-  '#10b981', // green
-  '#f59e0b', // amber
-  '#8b5cf6', // purple
-  '#ec4899', // pink
-  '#14b8a6', // teal
-  '#f97316', // orange
-]
+  "#3b82f6",
+  "#ef4444",
+  "#10b981",
+  "#f59e0b",
+  "#8b5cf6",
+  "#ec4899",
+  "#14b8a6",
+  "#f97316",
+];
 
 function TagManager() {
-  const [tags, setTags] = useState([])
-  const [loading, setLoading] = useState(false)
-  const [error, setError] = useState(null)
-  const [success, setSuccess] = useState(null)
+  const [tags, setTags] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const [success, setSuccess] = useState(null);
 
-  // Form state
-  const [newTagName, setNewTagName] = useState('')
-  const [newTagColor, setNewTagColor] = useState(TAG_COLORS[0])
-  const [editingId, setEditingId] = useState(null)
-  const [editName, setEditName] = useState('')
-  const [editColor, setEditColor] = useState('')
+  const [newTagName, setNewTagName] = useState("");
+  const [newTagColor, setNewTagColor] = useState(TAG_COLORS[0]);
+  const [editingId, setEditingId] = useState(null);
+  const [editName, setEditName] = useState("");
+  const [editColor, setEditColor] = useState("");
 
-  // Cargar etiquetas al montar
   useEffect(() => {
-    const token = localStorage.getItem('access_token')
-    if (token) {
-      loadTags()
-    } else {
-      setError('No estás autenticado. Por favor, inicia sesión.')
-    }
-  }, [])
+    const token = localStorage.getItem("access_token");
+    if (token) loadTags();
+    else setError("No estás autenticado. Por favor, inicia sesión.");
+  }, []);
 
-  /**
-   * Cargar etiquetas del backend
-   */
   const loadTags = async () => {
-    setLoading(true)
-    setError(null)
+    setLoading(true);
+    setError(null);
     try {
-      const data = await tagsService.getTags()
-      setTags(Array.isArray(data) ? data : [])
+      const data = await tagsService.getTags();
+      setTags(Array.isArray(data) ? data : []);
     } catch (err) {
-      setError(err.message || 'Error al cargar etiquetas')
+      setError(err.message || "Error al cargar etiquetas");
     } finally {
-      setLoading(false)
+      setLoading(false);
     }
-  }
+  };
 
-  /**
-   * Crear nueva etiqueta
-   */
   const handleCreateTag = async (e) => {
-    e.preventDefault()
-
+    e.preventDefault();
     if (!newTagName.trim()) {
-      setError('El nombre de la etiqueta no puede estar vacío')
-      return
+      setError("El nombre de la etiqueta no puede estar vacío");
+      return;
     }
-
-    setLoading(true)
-    setError(null)
+    setLoading(true);
+    setError(null);
     try {
-      await tagsService.createTag(newTagName.trim(), newTagColor)
-      setSuccess('Etiqueta creada exitosamente')
-      setNewTagName('')
-      setNewTagColor(TAG_COLORS[0])
-      await loadTags()
-      setTimeout(() => setSuccess(null), 3000)
+      await tagsService.createTag(newTagName.trim(), newTagColor);
+      setSuccess("Etiqueta creada exitosamente");
+      setNewTagName("");
+      setNewTagColor(TAG_COLORS[0]);
+      await loadTags();
+      setTimeout(() => setSuccess(null), 3000);
     } catch (err) {
-      setError(err.message)
+      setError(err.message);
     } finally {
-      setLoading(false)
+      setLoading(false);
     }
-  }
+  };
 
-  /**
-   * Iniciar edición de etiqueta
-   */
   const handleStartEdit = (tag) => {
-    setEditingId(tag.id)
-    setEditName(tag.name)
-    setEditColor(tag.color)
-  }
+    setEditingId(tag.id);
+    setEditName(tag.name);
+    setEditColor(tag.color);
+  };
 
-  /**
-   * Guardar cambios de etiqueta
-   */
   const handleSaveEdit = async (tagId) => {
     if (!editName.trim()) {
-      setError('El nombre de la etiqueta no puede estar vacío')
-      return
+      setError("El nombre de la etiqueta no puede estar vacío");
+      return;
     }
-
-    setLoading(true)
-    setError(null)
+    setLoading(true);
+    setError(null);
     try {
-      await tagsService.updateTag(tagId, editName.trim(), editColor)
-      setSuccess('Etiqueta actualizada exitosamente')
-      setEditingId(null)
-      await loadTags()
-      setTimeout(() => setSuccess(null), 3000)
+      await tagsService.updateTag(tagId, editName.trim(), editColor);
+      setSuccess("Etiqueta actualizada exitosamente");
+      setEditingId(null);
+      await loadTags();
+      setTimeout(() => setSuccess(null), 3000);
     } catch (err) {
-      setError(err.message)
+      setError(err.message);
     } finally {
-      setLoading(false)
+      setLoading(false);
     }
-  }
+  };
 
-  /**
-   * Cancelar edición
-   */
   const handleCancelEdit = () => {
-    setEditingId(null)
-    setEditName('')
-    setEditColor('')
-  }
+    setEditingId(null);
+    setEditName("");
+    setEditColor("");
+  };
 
-  /**
-   * Eliminar etiqueta
-   */
   const handleDeleteTag = async (tagId) => {
-    if (!confirm('¿Estás seguro de que deseas eliminar esta etiqueta?')) {
-      return
-    }
-
-    setLoading(true)
-    setError(null)
+    if (!confirm("¿Estás seguro de que deseas eliminar esta etiqueta?")) return;
+    setLoading(true);
+    setError(null);
     try {
-      await tagsService.deleteTag(tagId)
-      setSuccess('Etiqueta eliminada exitosamente')
-      await loadTags()
-      setTimeout(() => setSuccess(null), 3000)
+      await tagsService.deleteTag(tagId);
+      setSuccess("Etiqueta eliminada exitosamente");
+      await loadTags();
+      setTimeout(() => setSuccess(null), 3000);
     } catch (err) {
-      setError(err.message)
+      setError(err.message);
     } finally {
-      setLoading(false)
+      setLoading(false);
     }
-  }
+  };
 
   return (
     <div className="tag-manager-container">
       <div className="tag-manager-header">
         <h2>Mis Etiquetas</h2>
-        <p className="tag-manager-subtitle">Gestiona tus etiquetas personalizadas</p>
+        <p className="tag-manager-subtitle">
+          Gestiona tus etiquetas personalizadas
+        </p>
       </div>
 
-      {/* Mensajes de estado */}
+      {/* Mensajes */}
       {error && (
-        <div className="tag-manager-alert tag-manager-alert-error" role="alert">
+        <div className="tag-manager-alert tag-manager-alert-error">
           <AlertCircle size={20} />
           <span>{error}</span>
-          <button onClick={() => setError(null)} className="tag-manager-alert-close">×</button>
+          <button
+            onClick={() => setError(null)}
+            className="tag-manager-alert-close"
+          >
+            ×
+          </button>
         </div>
       )}
 
       {success && (
-        <div className="tag-manager-alert tag-manager-alert-success" role="alert">
+        <div className="tag-manager-alert tag-manager-alert-success">
           <span>✓ {success}</span>
-          <button onClick={() => setSuccess(null)} className="tag-manager-alert-close">×</button>
+          <button
+            onClick={() => setSuccess(null)}
+            className="tag-manager-alert-close"
+          >
+            ×
+          </button>
         </div>
       )}
 
-      {/* Formulario crear etiqueta */}
+      {/* Form */}
       <form className="tag-manager-form" onSubmit={handleCreateTag}>
         <div className="tag-manager-form-group">
           <label className="tag-manager-label">Nombre de la etiqueta</label>
@@ -197,10 +172,11 @@ function TagManager() {
               <button
                 key={color}
                 type="button"
-                className={`tag-manager-color-option ${newTagColor === color ? 'selected' : ''}`}
+                className={`tag-manager-color-option ${
+                  newTagColor === color ? "selected" : ""
+                }`}
                 style={{ backgroundColor: color }}
                 onClick={() => setNewTagColor(color)}
-                title={`Seleccionar color ${color}`}
               />
             ))}
           </div>
@@ -213,19 +189,17 @@ function TagManager() {
         >
           {loading ? (
             <>
-              <Loader size={18} className="tag-manager-spinner" />
-              Creando...
+              <Loader size={18} className="tag-manager-spinner" /> Creando...
             </>
           ) : (
             <>
-              <Plus size={18} />
-              Crear Etiqueta
+              <Plus size={18} /> Crear Etiqueta
             </>
           )}
         </button>
       </form>
 
-      {/* Lista de etiquetas */}
+      {/* Lista */}
       <div className="tag-manager-list">
         {loading && !tags.length ? (
           <div className="tag-manager-loading">
@@ -241,7 +215,6 @@ function TagManager() {
             {tags.map((tag) => (
               <div key={tag.id} className="tag-manager-item">
                 {editingId === tag.id ? (
-                  // Modo edición
                   <div className="tag-manager-edit-form">
                     <input
                       type="text"
@@ -255,7 +228,9 @@ function TagManager() {
                         <button
                           key={color}
                           type="button"
-                          className={`tag-manager-color-option-small ${editColor === color ? 'selected' : ''}`}
+                          className={`tag-manager-color-option-small ${
+                            editColor === color ? "selected" : ""
+                          }`}
                           style={{ backgroundColor: color }}
                           onClick={() => setEditColor(color)}
                         />
@@ -279,7 +254,6 @@ function TagManager() {
                     </div>
                   </div>
                 ) : (
-                  // Modo visualización
                   <>
                     <div className="tag-manager-tag-display">
                       <span
@@ -313,7 +287,7 @@ function TagManager() {
         )}
       </div>
     </div>
-  )
+  );
 }
 
-export default TagManager
+export default TagManager;

frontend/src/components/features/auth/tags.css

@@ -1,5 +1,6 @@
 /* ================================
    TagManager Styles
+   Compatible con HamburgerMenu
    ================================ */
 
 .tag-manager-container {
@@ -11,6 +12,8 @@
   background: rgba(15, 23, 42, 0.5);
   border: 1px solid rgba(255, 255, 255, 0.08);
   backdrop-filter: blur(10px);
+  position: relative; /* importante para z-index */
+  z-index: 1;
 }
 
 /* Header */