routes updated

public/components/users-crud.js

@@ -1,5 +1,6 @@
 import { api } from "../lib/api.js";
-import { emit } from "../lib/bus.js";
+import { emit, on } from "../lib/bus.js";
+import { navigateToItem } from "../lib/router.js";
 
 class UsersCrud extends HTMLElement {
   constructor() {
@@ -108,9 +109,20 @@ class UsersCrud extends HTMLElement {
       this.updateStatStyles();
     };
 
+    // Escuchar cambios de ruta para deep-linking
+    this._unsubRouter = on("router:viewChanged", ({ view, params }) => {
+      if (view === "users" && params.id) {
+        this.selectUserById(params.id);
+      }
+    });
+
     this.load();
   }
 
+  disconnectedCallback() {
+    this._unsubRouter?.();
+  }
+
   updateStatStyles() {
     const statTotal = this.shadowRoot.getElementById("statTotal");
     const statWoo = this.shadowRoot.getElementById("statWoo");
@@ -128,6 +140,15 @@ class UsersCrud extends HTMLElement {
       this.loading = false;
       this.renderList();
       this.renderStats();
+      
+      // Si hay un usuario pendiente de selección (deep-link), seleccionarlo
+      if (this._pendingUserId) {
+        const user = this.items.find(u => u.chat_id === this._pendingUserId);
+        if (user) {
+          this.selectUser(user, { updateUrl: false });
+        }
+        this._pendingUserId = null;
+      }
     } catch (e) {
       console.error("Error loading users:", e);
       this.items = [];
@@ -178,15 +199,40 @@ class UsersCrud extends HTMLElement {
       `;
 
       el.onclick = () => {
-        this.selected = item;
-        this.renderList();
-        this.renderDetail();
+        this.selectUser(item);
       };
 
       list.appendChild(el);
     }
   }
 
+  selectUser(user, { updateUrl = true } = {}) {
+    this.selected = user;
+    this.renderList();
+    this.renderDetail();
+    
+    // Actualizar URL (usar chat_id codificado)
+    if (updateUrl && user) {
+      navigateToItem("users", user.chat_id);
+    }
+  }
+
+  selectUserById(chatId) {
+    if (!chatId) return;
+    
+    // Decodificar el chat_id de la URL
+    const decodedId = decodeURIComponent(chatId);
+    
+    // Buscar en los items cargados
+    const user = this.items.find(u => u.chat_id === decodedId);
+    if (user) {
+      this.selectUser(user, { updateUrl: false });
+    } else {
+      // Guardar el ID pendiente para seleccionar después de cargar
+      this._pendingUserId = decodedId;
+    }
+  }
+
   renderDetail() {
     const detail = this.shadowRoot.getElementById("detail");
     const title = this.shadowRoot.getElementById("detailTitle");