feat: Enhance guided tour functionality with step navigation and visual indicators

Author: fabriziosalmi

data/secure_proxy.db

@@ -46,11 +46,42 @@ function startGuidedTour() {
     // Show the tour indicator
     $('#tour-indicator').fadeIn();
 
-    // Handle exit tour button click
-    $('#end-tour-btn').off('click').on('click', function() {
-        endTour();
-        showToast('Tour ended. You can restart it anytime from the Help menu.', 'info');
-    });
+    // Add CSS for step dots if not already added
+    if (!$('#tour-dot-styles').length) {
+        $('head').append(`
+            <style id="tour-dot-styles">
+                .step-counter-container {
+                    display: flex;
+                    align-items: center;
+                    gap: 5px;
+                }
+                
+                .step-dot {
+                    width: 8px;
+                    height: 8px;
+                    border-radius: 50%;
+                    background-color: rgba(0, 0, 0, 0.2);
+                    cursor: pointer;
+                    transition: all 0.2s ease;
+                    display: inline-block;
+                }
+                
+                [data-bs-theme="dark"] .step-dot {
+                    background-color: rgba(255, 255, 255, 0.2);
+                }
+                
+                .step-dot.active {
+                    background-color: var(--primary-color, #3a86ff);
+                    transform: scale(1.3);
+                }
+                
+                .step-dot:hover {
+                    transform: scale(1.2);
+                    background-color: var(--primary-hover, #2667cc);
+                }
+            </style>
+        `);
+    }
 
     // Define tour steps
     const tourSteps = [
@@ -97,7 +128,7 @@ function startGuidedTour() {
         let currentStep = 0;
         showTourStep(currentStep, tourSteps);
 
-        // Handle "Next" button click
+        // Handle "Next" button click from popover
         $(document).on('click', '.tour-next', function() {
             currentStep++;
             if (currentStep < tourSteps.length) {
@@ -108,19 +139,44 @@ function startGuidedTour() {
             }
         });
 
-        // Handle "Previous" button click
+        // Handle "Previous" button click from popover
         $(document).on('click', '.tour-prev', function() {
             if (currentStep > 0) {
                 currentStep--;
                 showTourStep(currentStep, tourSteps);
             }
         });
 
-        // Handle "Skip" button click
+        // Handle "Skip" button click from popover
         $(document).on('click', '.tour-skip', function() {
             endTour();
             showToast('Tour skipped. You can access help anytime from the menu.', 'info');
         });
+        
+        // Handle next button click from tour indicator
+        $('#next-tour-step').off('click').on('click', function() {
+            currentStep++;
+            if (currentStep < tourSteps.length) {
+                showTourStep(currentStep, tourSteps);
+            } else {
+                endTour();
+                showToast('Tour completed! Explore the interface at your own pace.', 'success');
+            }
+        });
+        
+        // Handle previous button click from tour indicator
+        $('#prev-tour-step').off('click').on('click', function() {
+            if (currentStep > 0) {
+                currentStep--;
+                showTourStep(currentStep, tourSteps);
+            }
+        });
+        
+        // Handle exit tour button click
+        $('#end-tour-btn').off('click').on('click', function() {
+            endTour();
+            showToast('Tour ended. You can restart it anytime from the Help menu.', 'info');
+        });
     } else {
         showToast('Tour functionality not available. Please upgrade your browser.', 'warning');
     }
@@ -160,8 +216,12 @@ function showTourStep(stepIndex, steps) {
                     ${prevButton}
                     <button class="btn btn-sm btn-link text-muted tour-skip">Skip Tour</button>
                 </div>
-                <div>
-                    <span class="badge bg-light text-dark me-2">${stepIndex + 1}/${steps.length}</span>
+                <div class="d-flex align-items-center">
+                    <div class="step-counter-container me-2">
+                        ${Array.from({length: steps.length}, (_, i) => 
+                            `<span class="step-dot ${i === stepIndex ? 'active' : ''}" data-step="${i}"></span>`
+                        ).join('')}
+                    </div>
                     ${nextButton}
                 </div>
             </div>
@@ -181,6 +241,12 @@ function showTourStep(stepIndex, steps) {
         });
 
         popover.show();
+        
+        // Add click handlers for the step dots
+        $('.step-dot').click(function() {
+            const targetStep = parseInt($(this).data('step'));
+            showTourStep(targetStep, steps);
+        });
     } catch (e) {
         console.error('Error showing popover:', e);
         // Fallback method

ui/static/js/user-guidance.js

@@ -730,7 +730,11 @@
         <div class="d-flex align-items-center">
             <i class="fas fa-map-signs me-2"></i>
             <span>Guided Tour</span>
-            <button id="end-tour-btn" class="btn btn-sm btn-light ms-3 py-0 px-2">Exit</button>
+            <div class="ms-3 d-flex">
+                <button id="prev-tour-step" class="btn btn-sm btn-light me-1" title="Previous Step"><i class="fas fa-chevron-left"></i></button>
+                <button id="next-tour-step" class="btn btn-sm btn-light me-1" title="Next Step"><i class="fas fa-chevron-right"></i></button>
+                <button id="end-tour-btn" class="btn btn-sm btn-light" title="Exit Tour"><i class="fas fa-times"></i></button>
+            </div>
         </div>
     </div>