From f3c5068e74e0d269e47f43302ea3bbc8250c83a4 Mon Sep 17 00:00:00 2001
From: Naiyuan Qing <145280634+NevilleQingNY@users.noreply.github.com>
Date: Wed, 11 Feb 2026 13:46:47 +0800
Subject: [PATCH] refactor(desktop): simplify onboarding routing structure

- Replace nested routes with single OnboardingPage component
- Simplify Stepper to use numeric index instead of StepId

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 apps/desktop/src/renderer/src/App.tsx         | 14 ++---------
 .../src/components/onboarding/stepper.tsx     | 25 +++++++------------
 2 files changed, 11 insertions(+), 28 deletions(-)

diff --git a/apps/desktop/src/renderer/src/App.tsx b/apps/desktop/src/renderer/src/App.tsx
index 7865bbbe..a1c70e85 100644
--- a/apps/desktop/src/renderer/src/App.tsx
+++ b/apps/desktop/src/renderer/src/App.tsx
@@ -7,11 +7,7 @@ import ToolsPage from './pages/tools'
 import SkillsPage from './pages/skills'
 import ChannelsPage from './pages/channels'
 import CronsPage from './pages/crons'
-import OnboardingLayout from './pages/onboarding/layout'
-import PermissionsStep from './pages/onboarding/permissions'
-import SetupStep from './pages/onboarding/setup'
-import TryItStep from './pages/onboarding/try-it'
-import ConnectStep from './pages/onboarding/connect'
+import OnboardingPage from './pages/onboarding'
 import { useOnboardingStore } from './stores/onboarding'
 
 function OnboardingGuard({ children }: { children: React.ReactNode }) {
@@ -24,13 +20,7 @@ function OnboardingGuard({ children }: { children: React.ReactNode }) {
 const router = createHashRouter([
   {
     path: '/onboarding',
-    element: <OnboardingLayout />,
-    children: [
-      { index: true, element: <PermissionsStep /> },
-      { path: 'setup', element: <SetupStep /> },
-      { path: 'connect', element: <ConnectStep /> },
-      { path: 'try-it', element: <TryItStep /> },
-    ],
+    element: <OnboardingPage />,
   },
   {
     path: '/',
diff --git a/apps/desktop/src/renderer/src/components/onboarding/stepper.tsx b/apps/desktop/src/renderer/src/components/onboarding/stepper.tsx
index fa8d3f2a..c860d244 100644
--- a/apps/desktop/src/renderer/src/components/onboarding/stepper.tsx
+++ b/apps/desktop/src/renderer/src/components/onboarding/stepper.tsx
@@ -2,26 +2,19 @@ import { cn } from '@multica/ui/lib/utils'
 import { HugeiconsIcon } from '@hugeicons/react'
 import { Tick02Icon } from '@hugeicons/core-free-icons'
 
-export type StepId = 'permissions' | 'setup' | 'connect' | 'try-it'
-
-interface Step {
-  id: StepId
-  label: string
-}
-
-const steps: Step[] = [
-  { id: 'permissions', label: 'Permissions' },
-  { id: 'setup', label: 'Provider' },
-  { id: 'connect', label: 'Connect' },
-  { id: 'try-it', label: 'Try it' },
+const steps = [
+  { label: 'Permissions' },
+  { label: 'Provider' },
+  { label: 'Connect' },
+  { label: 'Try it' },
 ]
 
 interface StepperProps {
-  currentStep: StepId
+  currentStep: number // 1-based index
 }
 
 export function Stepper({ currentStep }: StepperProps) {
-  const currentIndex = steps.findIndex((s) => s.id === currentStep)
+  const currentIndex = currentStep - 1 // Convert to 0-based
   // Progress: 0% at step 0, 50% at step 1, 100% at step 2
   const progress = (currentIndex / (steps.length - 1)) * 100
 
@@ -31,10 +24,10 @@ export function Stepper({ currentStep }: StepperProps) {
       <nav className="flex items-center justify-center gap-3">
         {steps.map((step, index) => {
           const isCompleted = index < currentIndex
-          const isCurrent = step.id === currentStep
+          const isCurrent = index === currentIndex
 
           return (
-            <div key={step.id} className="flex items-center gap-3">
+            <div key={step.label} className="flex items-center gap-3">
               {index > 0 && (
                 <span
                   className={cn(