CreaRack-SL

Componente Alpine helpWidget — Panel de Ayuda Global

Vista limpiaEditar
Entidadactivecreado Mon May 11#core#frontend#ux#alpine#htmx#django#help-panel#tutor-mode

Componente Alpine helpWidget — Panel de Ayuda Global

Descripción

helpWidget es el componente Alpine.js registrado globalmente en static/js/alpine-components.js que gestiona el panel de ayuda lateral presente en todas las páginas de CreaRack Pro (a través de base.html). Ofrece dos modos de operación:

  • Modo Help (por defecto): panel flotante superpuesto a la app, accesible con un botón flotante.
  • Modo Tutor IT: panel fijo de 600 px a la derecha con split-view —la app se comprime a la izquierda y el usuario puede interactuar con ambos simultáneamente.

Registro del componente

// static/js/alpine-components.js
Alpine.data('helpWidget', () => ({ … }));

El componente se instancia en base.html mediante el atributo x-data="helpWidget".

Estado interno

PropiedadTipoPersistenciaDescripción
openbooleanlocalStorage('helpOpen') en modo TutorSi el panel está visible
tutorModebooleanlocalStorage('helpTutorMode')Modo Tutor IT activo
tabstring—Pestaña activa: 'buscar' / 'wiki' / 'ia'
questionstring—Pregunta en curso al asistente IA
answerstring|null—Respuesta del asistente IA
totalnumber—Total de artículos wiki cargados

Métodos públicos

MétodoDescripción
init()Hook Alpine: aplica clase body y carga wiki si el panel se restauró
toggle()Abre/cierra el panel; carga wiki si primer uso
close()Cierra el panel explícitamente
toggleTutor()Alterna modo Tutor IT; limpia answer anterior
loadWiki()Llama al endpoint core_api_help_help_wiki
clearAsk()Limpia question y answer
clearSearch()Limpia el filtro de búsqueda en wiki

Métodos privados (prefijo _)

MétodoDescripción
_persistOpen()Guarda/borra helpOpen en localStorage según estado actual; solo activo cuando tutorMode=true
_applyTutorBodyClass()Añade/quita la clase CSS help-tutor-active al <body> para activar el layout split-view

Persistencia y ciclo de vida ante re-renders HTMX

El principal problema que resolvió el commit fd5172d (s55, fix #4) fue que las navegaciones HTMX reinician Alpine, destruyendo el estado del componente. La solución adoptada:

  1. open se inicializa con una IIFE que lee localStorage solo si helpTutorMode == 'true'.
  2. Al inicializar (init()), si open === true, se aplica la clase body y se carga la wiki automáticamente.
  3. _persistOpen() se llama tras cada acción que cambia open o tutorMode.
open: (function () {
    try {
        const tutor = localStorage.getItem('helpTutorMode') === 'true';
        return tutor && localStorage.getItem('helpOpen') === 'true';
    } catch (_) { return false; }
})(),

Claves localStorage

ClaveValoresLectura en
helpTutorMode'true' / 'false'toggleTutor()
helpOpen'true' / ausenteInicialización de open; _persistOpen()

Endpoints consumidos

OperaciónURL
core_api_help_help_wiki/api/help/wiki/
core_api_help_help_ask/api/help/ask/
core_api_help_help_article/api/help/article/

CSS asociada

Archivo: static/css/pages/help.css

  • .help-panel — posición fija, ancho 600 px, right: 0.
  • .help-overlay — overlay transparente, pointer-events: none cuando Tutor activo.
  • body.help-tutor-active — padding-right: 600px; transition: 0.25s ease (split-view, s55).

Historial de cambios relevantes

CommitDescripción
(anterior, s55 fix #3)Fix HTML root mal formado; overlay pinned transparente con pointer-events:none
fd5172d (s55 fix #4)Split-view persistente: _persistOpen(), _applyTutorBodyClass(), init(), body.help-tutor-active

Véase también

  • [[feature—help—tutor-split-view]]

Referenciado desde

Inicio
Yo