From ac1812aadf5c5d97c18eb4dad6b2ba854ee2ccc6 Mon Sep 17 00:00:00 2001
From: jedarden <github@jedarden.com>
Date: Mon, 13 Apr 2026 21:38:41 -0400
Subject: [PATCH] feat(simple): add node onboarding wizard to simple view

Add "+ Add Node" button to bottom nav and load onboard.js with wizard
CSS. Also fix broken init that still referenced removed SpaxelAuth.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 dashboard/simple.html | 74 ++++++++++++++++++++++++++++---------------
 1 file changed, 49 insertions(+), 25 deletions(-)

diff --git a/dashboard/simple.html b/dashboard/simple.html
index 22435b3..cf701ea 100644
--- a/dashboard/simple.html
+++ b/dashboard/simple.html
@@ -6,6 +6,44 @@
     <title>Spaxel - Simple Mode</title>
     <link rel="stylesheet" href="css/simple.css">
     <link rel="stylesheet" href="css/notifications.css">
+    <style>
+        #wizard-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.85);display:flex;align-items:center;justify-content:center;z-index:1000}
+        #wizard-card{background:#1e1e3a;border-radius:12px;padding:28px 32px 20px;max-width:560px;width:92%;max-height:90vh;overflow-y:auto;box-shadow:0 8px 32px rgba(0,0,0,.5)}
+        #wizard-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
+        #wizard-header h1{font-size:20px;font-weight:600;color:#eee}
+        .wizard-close{background:none;border:none;color:#888;font-size:24px;cursor:pointer;padding:0 4px;line-height:1}
+        .wizard-close:hover{color:#eee}
+        #wizard-steps{display:flex;align-items:center;justify-content:center;margin-bottom:24px;gap:0}
+        .wizard-step-dot{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;background:#333;color:#666;transition:all .3s;flex-shrink:0}
+        .wizard-step-dot.active{background:#4fc3f7;color:#fff;box-shadow:0 0 12px rgba(79,195,247,.5)}
+        .wizard-step-dot.completed{background:#4caf50;color:#fff}
+        .wizard-step-line{width:20px;height:2px;background:#333;flex-shrink:0}
+        .wizard-step-line.completed{background:#4caf50}
+        #wizard-content{min-height:180px}
+        .wizard-step-content{text-align:center}
+        .wizard-step-content h2{font-size:18px;margin-bottom:8px;color:#eee}
+        .wizard-step-content p{color:#bbb;font-size:14px;line-height:1.5;margin-bottom:12px}
+        .wizard-muted{color:#777!important;font-size:13px!important}
+        .wizard-center-msg{padding:24px 0;text-align:center}
+        .wizard-center-msg p{color:#888;margin-top:12px}
+        .wizard-error{color:#ef5350;font-size:13px;padding:10px;background:rgba(239,83,80,.1);border-radius:4px;text-align:left;margin-top:8px}
+        .wizard-success{color:#66bb6a;font-size:14px;font-weight:500}
+        .wizard-icon-large{font-size:48px;margin-bottom:12px}
+        .wizard-list{text-align:left;color:#bbb;font-size:13px;line-height:1.8;margin:12px 0;padding-left:20px}
+        .spinner{display:inline-block;width:32px;height:32px;border:3px solid rgba(79,195,247,.2);border-top-color:#4fc3f7;border-radius:50%;animation:wizard-spin .8s linear infinite}
+        @keyframes wizard-spin{to{transform:rotate(360deg)}}
+        .wizard-progress{margin:16px 0}
+        .progress-bar{width:100%;height:8px;background:#333;border-radius:4px;overflow:hidden}
+        .progress-fill{height:100%;background:linear-gradient(90deg,#4fc3f7,#29b6f6);border-radius:4px;transition:width .3s;width:0%}
+        .wizard-progress p{font-size:12px;color:#888;margin-top:6px;text-align:center}
+        .wizard-btn{padding:10px 24px;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;border:none;transition:background .2s,opacity .2s}
+        .wizard-btn:disabled{opacity:.5;cursor:not-allowed}
+        .wizard-btn-primary{background:#4fc3f7;color:#1a1a2e}
+        .wizard-btn-primary:hover:not(:disabled){background:#29b6f6}
+        .wizard-btn-secondary{background:rgba(255,255,255,.1);color:#ccc;border:1px solid rgba(255,255,255,.2)}
+        .wizard-btn-secondary:hover:not(:disabled){background:rgba(255,255,255,.15)}
+        #wizard-nav{display:flex;justify-content:space-between;margin-top:20px;gap:12px}
+    </style>
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
     <meta name="theme-color" content="#f5f5f7">
@@ -45,6 +83,10 @@
                 <span class="action-label">Alerts</span>
                 <span class="action-badge hidden" id="alert-badge">0</span>
             </button>
+            <button class="quick-action-btn" data-action="add-node" onclick="window.SpaxelOnboard && window.SpaxelOnboard.start()">
+                <span class="action-icon">&#x2795;</span>
+                <span class="action-label">Add Node</span>
+            </button>
             <button class="quick-action-btn" data-action="settings" data-tab="settings">
                 <span class="action-icon">&#x2699;</span>
                 <span class="action-label">Settings</span>
@@ -84,36 +126,18 @@
     <script src="js/simple.js"></script>
     <!-- Notifications -->
     <script src="js/notifications.js"></script>
+    <!-- Node Onboarding Wizard -->
+    <script src="js/onboard.js"></script>
 
     <script>
-        // Initialize simple mode when DOM is ready and auth is complete
         (function() {
             'use strict';
-
             document.addEventListener('DOMContentLoaded', function() {
-                // Check authentication first
-                if (window.SpaxelAuth) {
-                    SpaxelAuth.checkStatus().then(function(isAuthenticated) {
-                        if (isAuthenticated) {
-                            // Initialize simple mode
-                            if (window.SpaxelSimpleMode) {
-                                window.SpaxelSimpleMode.init();
-                            }
-                            // Initialize simple mode detection
-                            if (window.SpaxelSimpleModeDetection) {
-                                window.SpaxelSimpleModeDetection.init();
-                            }
-                        } else {
-                            // Redirect to main dashboard for authentication
-                            window.location.href = '/';
-                        }
-                    }).catch(function() {
-                        // On auth error, redirect to main dashboard
-                        window.location.href = '/';
-                    });
-                } else {
-                    // Auth module not loaded, redirect
-                    window.location.href = '/';
+                if (window.SpaxelSimpleMode) {
+                    window.SpaxelSimpleMode.init();
+                }
+                if (window.SpaxelSimpleModeDetection) {
+                    window.SpaxelSimpleModeDetection.init();
                 }
             });
         })();