ComfyUI-Lora-Manager/static/js/managers/HelpManager.js

import { getStorageItem, setStorageItem } from '../utils/storageHelpers.js';
import { onboardingManager } from './OnboardingManager.js';

/**
 * Manages help modal functionality and tutorial update notifications
 */
export class HelpManager {
    constructor() {
        this.lastViewedTimestamp = getStorageItem('help_last_viewed', 0);
        this.latestContentTimestamp = new Date('2025-10-11').getTime(); // Will be updated from server or config
        this.isInitialized = false;
        
        // Default latest content data - could be fetched from server
        this.latestVideoData = {
            timestamp: new Date('2024-06-09').getTime(), // Default timestamp
            walkthrough: {
                id: 'hvKw31YpE-U',
                title: 'Getting Started with LoRA Manager'
            },
            playlistUpdated: true
        };
    }

    /**
     * Initialize the help manager
     */
    initialize() {
        if (this.isInitialized) return;
        
        console.log('HelpManager: Initializing...');
        
        // Set up event handlers
        this.setupEventListeners();
        
        // Check if we need to show the badge
        this.updateHelpBadge();
        
        // Fetch latest video data (could be implemented to fetch from remote source)
        this.fetchLatestVideoData();
        
        this.isInitialized = true;
        return this;
    }
    
    /**
     * Set up event listeners for help modal
     */
    setupEventListeners() {
        // Help toggle button
        const helpToggleBtn = document.getElementById('helpToggleBtn');
        if (helpToggleBtn) {
            helpToggleBtn.addEventListener('click', () => this.openHelpModal());
        }
        
        // Help modal tab functionality
        const tabButtons = document.querySelectorAll('.help-tabs .tab-btn');
        tabButtons.forEach(button => {
            button.addEventListener('click', (event) => {
                this.activateHelpTab(event.currentTarget.getAttribute('data-tab'));
            });
        });

        // Replay tutorial button in the Getting Started tab
        const replayTutorialBtn = document.getElementById('replayTutorialBtn');
        if (replayTutorialBtn) {
            replayTutorialBtn.addEventListener('click', () => {
                // Close the help modal, then restart the onboarding tutorial
                if (window.modalManager) {
                    window.modalManager.closeModal('helpModal');
                }
                onboardingManager.reset();
                onboardingManager.startTutorial();
            });
        }

        // Global "?" shortcut opens the help modal on the Shortcuts tab
        document.addEventListener('keydown', (event) => {
            if (event.key !== '?') return;
            if (this.isTypingContext(event.target)) return;
            if (window.modalManager?.isAnyModalOpen()) return;

            event.preventDefault();
            this.openHelpModal('shortcuts');
        });
    }

    /**
     * Check if the event target is a text entry context where "?" is literal input
     */
    isTypingContext(target) {
        if (!(target instanceof Element)) return false;

        const tagName = target.tagName?.toLowerCase();
        return target.isContentEditable || tagName === 'input' || tagName === 'textarea' || tagName === 'select';
    }

    /**
     * Activate a specific help modal tab by its data-tab id
     * @param {string} tabId - The tab id (matches data-tab and pane element id)
     */
    activateHelpTab(tabId) {
        const tabButton = document.querySelector(`.help-tabs .tab-btn[data-tab="${tabId}"]`);
        const tabPane = document.getElementById(tabId);
        if (!tabButton || !tabPane) return;

        // Remove active class from all buttons and panes
        document.querySelectorAll('.help-tabs .tab-btn').forEach(btn => {
            btn.classList.remove('active');
        });
        document.querySelectorAll('.help-content .tab-pane').forEach(pane => {
            pane.classList.remove('active');
        });

        // Activate the requested tab
        tabButton.classList.add('active');
        tabPane.classList.add('active');
    }
    
    /**
     * Open the help modal
     * @param {string} [tabId] - Optional tab id to activate after opening
     */
    openHelpModal(tabId) {
        // Use modalManager to open the help modal
        if (window.modalManager) {
            window.modalManager.toggleModal('helpModal');

            if (tabId) {
                this.activateHelpTab(tabId);
            }
            
            // Add visual indicator to Documentation tab if there's new content
            this.updateDocumentationTabIndicator();
            
            // Update the last viewed timestamp
            this.markContentAsViewed();
            
            // Hide the badge
            this.hideHelpBadge();
        }
    }

    /**
     * Add visual indicator to Documentation tab for new content
     */
    updateDocumentationTabIndicator() {
        const docTab = document.querySelector('.tab-btn[data-tab="documentation"]');
        if (docTab && this.hasNewContent()) {
            docTab.classList.add('has-new-content');
        }
    }
    
    /**
     * Mark content as viewed by saving current timestamp
     */
    markContentAsViewed() {
        this.lastViewedTimestamp = Date.now();
        setStorageItem('help_last_viewed', this.lastViewedTimestamp);
    }
    
    /**
     * Fetch latest video data (could be implemented to actually fetch from a remote source)
     */
    fetchLatestVideoData() {
        // In a real implementation, you'd fetch this from your server
        // For now, we'll just use the hardcoded data from constructor
        
        // Update the timestamp with the latest data
        this.latestContentTimestamp = Math.max(this.latestContentTimestamp, this.latestVideoData.timestamp);
        
        // Check again if we need to show the badge with this new data
        this.updateHelpBadge();
    }
    
    /**
     * Update help badge visibility based on timestamps
     */
    updateHelpBadge() {
        if (this.hasNewContent()) {
            this.showHelpBadge();
        } else {
            this.hideHelpBadge();
        }
    }
    
    /**
     * Check if there's new content the user hasn't seen
     */
    hasNewContent() {
        // If user has never viewed the help, or the content is newer than last viewed
        return this.lastViewedTimestamp === 0 || this.latestContentTimestamp > this.lastViewedTimestamp;
    }
    
    /**
     * Show the help badge
     */
    showHelpBadge() {
        const helpBadge = document.querySelector('#helpToggleBtn .update-badge');
        if (helpBadge) {
            helpBadge.classList.add('visible');
        }
    }
    
    /**
     * Hide the help badge
     */
    hideHelpBadge() {
        const helpBadge = document.querySelector('#helpToggleBtn .update-badge');
        if (helpBadge) {
            helpBadge.classList.remove('visible');
        }
    }
}

// Create singleton instance
export const helpManager = new HelpManager();