+
${escapedWord}
@@ -455,7 +455,7 @@ function resetTriggerWordsUIState(section) {
// Restore click-to-copy functionality
tag.removeEventListener('click', startEditTriggerWord);
setupDisplayTriggerWordTag(tag);
- tag.title = translate('modals.model.triggerWords.copyWord');
+ tag.title = translate('modals.model.triggerWords.copyOrEditWord');
// Show copy icon, hide delete button
if (copyIcon) copyIcon.style.display = '';
@@ -503,7 +503,7 @@ function createTriggerWordTag(word, isEditMode = false) {
const tag = document.createElement('div');
tag.className = 'trigger-word-tag';
tag.dataset.word = word;
- tag.title = translate(isEditMode ? 'modals.model.triggerWords.editWord' : 'modals.model.triggerWords.copyWord');
+ tag.title = translate(isEditMode ? 'modals.model.triggerWords.editWord' : 'modals.model.triggerWords.copyOrEditWord');
const escapedWord = escapeHtml(word);
tag.innerHTML = `
@@ -537,7 +537,7 @@ function setupDisplayTriggerWordTag(tag) {
tag.addEventListener('click', handleDisplayTriggerWordClick);
tag.addEventListener('dblclick', handleDisplayTriggerWordDoubleClick);
- tag.title = translate('modals.model.triggerWords.copyWord');
+ tag.title = translate('modals.model.triggerWords.copyOrEditWord');
}
/**
diff --git a/static/js/managers/HelpManager.js b/static/js/managers/HelpManager.js
index 807b3432..bd33dadc 100644
--- a/static/js/managers/HelpManager.js
+++ b/static/js/managers/HelpManager.js
@@ -1,4 +1,5 @@
import { getStorageItem, setStorageItem } from '../utils/storageHelpers.js';
+import { onboardingManager } from './OnboardingManager.js';
/**
* Manages help modal functionality and tutorial update notifications
@@ -55,31 +56,78 @@ export class HelpManager {
const tabButtons = document.querySelectorAll('.help-tabs .tab-btn');
tabButtons.forEach(button => {
button.addEventListener('click', (event) => {
- // 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');
- });
-
- // Add active class to clicked button
- event.currentTarget.classList.add('active');
-
- // Show corresponding tab content
- const tabId = event.currentTarget.getAttribute('data-tab');
- document.getElementById(tabId).classList.add('active');
+ 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() {
+ 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();
diff --git a/static/js/managers/OnboardingManager.js b/static/js/managers/OnboardingManager.js
index f5805dfc..1c3905c9 100644
--- a/static/js/managers/OnboardingManager.js
+++ b/static/js/managers/OnboardingManager.js
@@ -43,7 +43,7 @@ export class OnboardingManager {
{
target: '.controls .action-buttons [data-action="bulk"]',
title: () => translate('onboarding.steps.bulk.title', {}, 'Bulk Operations'),
- content: () => translate('onboarding.steps.bulk.content', {}, 'Enter bulk mode by clicking this button or pressing B. Select multiple models and perform batch operations. Use Ctrl+A to select all visible models.'),
+ content: () => translate('onboarding.steps.bulk.content', {}, 'Enter bulk mode by clicking this button or pressing B to select multiple models and perform batch operations.
• Ctrl/Cmd+A select all visible models, Shift+Click select a range.
• Esc or clicking an empty area exits bulk mode.'),
position: 'bottom'
},
{
@@ -71,10 +71,30 @@ export class OnboardingManager {
position: 'top',
customPosition: { top: '20%', left: '50%' }
},
+ {
+ target: '.card-grid',
+ title: () => translate('onboarding.steps.marqueeSelect.title', {}, 'Drag to Select'),
+ content: () => translate('onboarding.steps.marqueeSelect.content', {}, 'Hold the left mouse button on an empty area of the grid and drag to draw a marquee that selects multiple cards at once.'),
+ position: 'top',
+ customPosition: { top: '20%', left: '50%' }
+ },
+ {
+ target: '#folderSidebar',
+ title: () => translate('onboarding.steps.dragToSidebar.title', {}, 'Organize by Dragging'),
+ content: () => translate('onboarding.steps.dragToSidebar.content', {}, 'Drag a model card onto a folder in the sidebar to move the file there. This also works with multiple selected cards in bulk mode.'),
+ position: 'right'
+ },
{
target: '.card-grid',
title: () => translate('onboarding.steps.contextMenu.title', {}, 'Context Menu'),
- content: () => translate('onboarding.steps.contextMenu.content', {}, 'Right-click any model card for a context menu with additional actions.'),
+ content: () => translate('onboarding.steps.contextMenu.content', {}, 'Right-click any model card for a context menu with card actions like moving, deleting, or editing metadata.'),
+ position: 'top',
+ customPosition: { top: '20%', left: '50%' }
+ },
+ {
+ target: '.card-grid',
+ title: () => translate('onboarding.steps.contextMenus.title', {}, 'More Context Menus'),
+ content: () => translate('onboarding.steps.contextMenus.content', {}, 'In bulk mode, right-click a selected card for bulk actions. Right-click an empty area of the page for global actions like update checks and managing excluded models.'),
position: 'top',
customPosition: { top: '20%', left: '50%' }
}
diff --git a/templates/components/modals/help_modal.html b/templates/components/modals/help_modal.html
index 084c735c..3d9f2e13 100644
--- a/templates/components/modals/help_modal.html
+++ b/templates/components/modals/help_modal.html
@@ -10,6 +10,7 @@
+
@@ -39,6 +40,12 @@
Recipe System: Create, save and share your perfect combinations
+
+
+