Interactive User Guide

[Copilot]

The onboarding wizard's full-screen modal blocked UI interaction, forcing users to close it to follow instructions. Replaced with contextual dialogs positioned near target elements. Extended wizard to guide users through the complete workflow from setup through project creation to STL file generation.

Changes

New Components

• ContextualDialog - Floating dialog with smart positioning relative to target elements via CSS selectors
  • Viewport boundary detection with automatic repositioning
  • Window resize/scroll event handling
  • Arrow pointer connecting to target
  • Falls back to top-right corner when no target specified
• ConfirmDialog - Modal confirmation for wizard dismissal

Updated Components

• OnboardingWizard - Removed backdrop overlay and centered modal card
  • Replaced with ContextualDialog for each step
  • Compact content (~60% smaller)
  • Progress shown as dots instead of full bar
  • Added dismissal confirmation flow
  • Extended to 11 steps (was 7) with complete project workflow guidance
  • Added element highlighting system for non-blocking visual guidance
  • Persistent side panel during search (doesn't disappear)
  • Auto-navigation through Projects pages

Implementation

// Before: Blocking modal
<>
  <div className="fixed inset-0 bg-black/70 backdrop-blur-sm" />
  <div className="fixed top-1/2 left-1/2 modal-card">
    {largeContent}
  </div>
</>

// After: Contextual dialog with highlighting
<ContextualDialog
  position="bottom"
  targetSelector="[href='/settings']"
  onDismiss={handleSkip}
>
  {compactContent}
  <ProgressDots />
</ContextualDialog>

// Highlight system for non-blocking guidance
{currentStepData.highlightTarget && (
  <style>
    {currentStepData.highlightTarget} {
      box-shadow: 0 0 0 3px rgba(0, 217, 255, 0.4);
      animation: pulse-highlight 2s infinite;
    }
  </style>
)}

Positioning logic calculates placement relative to target element with boundary checks:

const updatePosition = () => {
  const targetRect = targetElement.getBoundingClientRect()
  const dialogRect = dialogElement.getBoundingClientRect()
  
  // Calculate position, adjust if would overflow viewport
  if (top + dialogRect.height > window.innerHeight - 12) {
    // Flip to opposite side
  }
  // Apply calculated position
}

Wizard Flow (11 Steps)

The wizard now guides users through the complete workflow:

1. Welcome - Introduction to BrickGen
2. Download LDraw - Library installation with status check
3. LDView Settings - Optional quality settings
4. Create First Project - Project introduction
5. Search for Set - Persistent side wizard with highlighted search input
6. View Set Details - Select a set from results
7. Create Project - Enter project name and create
8. Open Projects Page - Navigate to Projects
9. Select Project - Click on newly created project
10. Generate STL Files - Explain Quick Generate vs Create Job options
11. Complete - Onboarding finished with full checklist

Key Features

• Non-blocking guidance: Users can interact with UI while following instructions
• Persistent visibility: Wizard stays visible during search (doesn't disappear)
• Element highlighting: Search input and other elements highlighted with pulsing border
• Complete workflow: Guides from setup through STL generation
• Auto-navigation: Detects page changes and advances steps automatically
• Smart positioning: Dialogs reposition based on viewport and scroll

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

[scubar]

@copilot THe wizard should also guide the user through creating a project.

Also add a way to reset the wizard and rerun.

[Copilot]

@copilot THe wizard should also guide the user through creating a project.

Also add a way to reset the wizard and rerun.

Done! Added both features in commit c2771cb:

1. Project creation guide (Step 4)

• New wizard step explains how projects work
• Provides 4-step guide from search to STL generation
• Includes pro tip about multiple projects per set
• Option to "Go to Search" or continue to completion

2. Restart wizard functionality

• Added "Onboarding Wizard" section in Settings → General tab
• "Restart Wizard" button resets completion flag
• Confirmation dialog before restarting
• Page reloads to show wizard immediately

The wizard now has 5 steps total (was 4), with the project creation guide as step 4, before the final completion screen.

Visual representation:

┌────────────────────────────────────────┐
│ Create Your First Project          [X] │
│ ▓▓▓▓ ▓▓▓▓ ▓▓▓▓ ▓▓▓▓ ░░░░  (Progress)  │
├────────────────────────────────────────┤
│                                        │
│ Projects let you organize and generate │
│ STL files for LEGO sets.               │
│                                        │
│ How it works:                          │
│ 1. Search for a LEGO set               │
│ 2. Click on a set to view details      │
│ 3. Enter project name and create       │
│ 4. Configure and generate STL files    │
│                                        │
│ 💡 Pro tip: Create multiple projects   │
│    for the same set with different     │
│    settings to compare results.        │
│                                        │
│ [  Go to Search  ] [ Continue ]        │
└────────────────────────────────────────┘

[scubar]

@copilot The wizard needs to stay present through the first project creation as well, it currently bails out early.

[Copilot]

@copilot The wizard needs to stay present through the first project creation as well, it currently bails out early.

Fixed in commit 6ca7adc! The wizard now stays active throughout the entire project creation flow.

Changes:

• Wizard no longer completes when clicking "Let's Get Started"
• Added 3 new interactive steps that guide users through:
  • Step 4: Searching for a set (shows on home page)
  • Step 5: Viewing set details (auto-advances when navigating to set page)
  • Step 6: Creating the project (polls /api/projects to detect creation)
• Wizard auto-advances based on page navigation
• Only marks complete after project is actually created

How it works:

1. User clicks "Let's Get Started!" → navigates to search, wizard stays visible
2. User searches and clicks a set → wizard advances to step 5
3. User on set detail page → wizard shows "Create Your Project" guidance
4. Backend polls for project creation every 2 seconds
5. When project detected → wizard advances to completion step
6. User clicks "Finish Onboarding" → wizard completes

The wizard now has 7 steps total (was 5) and persists across page navigation until the user actually creates a project.

[scubar]

@copilot When entering the search dialog the onboarding wizard disappears too easily, keep the side wizard and just highlight the search input.

Provide more guidance within a project as well.

[Copilot]

@copilot When entering the search dialog the onboarding wizard disappears too easily, keep the side wizard and just highlight the search input.

Provide more guidance within a project as well.

Fixed in commit 02528a3!

Changes made:

1. Wizard stays visible during search

   • Changed from positioning above search input to persistent top-right corner
   • Added pulsing highlight effect on search input instead
   • Wizard remains as side panel throughout search

2. Added project guidance (4 new steps)

   • Step 7: Navigate to Projects page after creating project
   • Step 8: Select your newly created project
   • Step 9: Learn how to generate STL files (Quick Generate vs Create Job)
   • Step 10: Completion

The wizard now has 11 steps total (was 7) and guides users through the complete workflow from search to STL generation.

Visual changes:

• Step 4 (Search): Side wizard visible + search input highlighted with pulsing mint border
• Steps 7-9: Contextual guidance within Projects pages
• Auto-advances when user navigates between pages