63 - Swap feed and channel steps in onboarding wizard

app/Livewire/Onboarding.php

@@ -17,7 +17,7 @@
 
 class Onboarding extends Component
 {
-    // Step tracking (1-6: welcome, platform, feed, channel, route, complete)
+    // Step tracking (1-6: welcome, platform, channel, feed, route, complete)
     public int $step = 1;
 
     // Platform form

resources/views/livewire/onboarding.blade.php

@@ -16,11 +16,11 @@
                     </div>
                     <div class="flex items-center text-sm text-gray-600">
                         <div class="w-6 h-6 bg-gray-300 text-gray-600 rounded-full flex items-center justify-center mr-3 text-xs font-semibold">2</div>
-                        <span>Add your first feed</span>
+                        <span>Configure a channel</span>
                     </div>
                     <div class="flex items-center text-sm text-gray-600">
                         <div class="w-6 h-6 bg-gray-300 text-gray-600 rounded-full flex items-center justify-center mr-3 text-xs font-semibold">3</div>
-                        <span>Configure a channel</span>
+                        <span>Add your first feed</span>
                     </div>
                     <div class="flex items-center text-sm text-gray-600">
                         <div class="w-6 h-6 bg-gray-300 text-gray-600 rounded-full flex items-center justify-center mr-3 text-xs font-semibold">4</div>
@@ -173,112 +173,8 @@ class="bg-blue-600 text-white py-2 px-6 rounded-md hover:bg-blue-700 transition
             </div>
         @endif
 
-        {{-- Step 3: Feed --}}
+        {{-- Step 3: Channel --}}
         @if ($step === 3)
-            <div class="text-center mb-8">
-                <h1 class="text-2xl font-bold text-gray-900 mb-2">Add Your First Feed</h1>
-                <p class="text-gray-600">
-                    Choose from our supported news providers to monitor for new articles
-                </p>
-
-                {{-- Progress indicator --}}
-                <div class="flex justify-center mt-6 space-x-2">
-                    <div class="w-6 h-6 bg-green-500 text-white rounded-full flex items-center justify-center text-xs font-semibold">✓</div>
-                    <div class="w-6 h-6 bg-blue-500 text-white rounded-full flex items-center justify-center text-xs font-semibold">2</div>
-                    <div class="w-6 h-6 bg-gray-300 text-gray-600 rounded-full flex items-center justify-center text-xs font-semibold">3</div>
-                    <div class="w-6 h-6 bg-gray-300 text-gray-600 rounded-full flex items-center justify-center text-xs font-semibold">4</div>
-                </div>
-
-                <form wire:submit="createFeed" class="space-y-6 mt-8 text-left">
-                    @if (!empty($formErrors['general']))
-                        <div class="p-3 bg-red-50 border border-red-200 rounded-md">
-                            <p class="text-red-600 text-sm">{{ $formErrors['general'] }}</p>
-                        </div>
-                    @endif
-
-                    <div>
-                        <label for="feedName" class="block text-sm font-medium text-gray-700 mb-2">
-                            Feed Name
-                        </label>
-                        <input
-                            type="text"
-                            id="feedName"
-                            wire:model="feedName"
-                            placeholder="My News Feed"
-                            class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
-                            required
-                        >
-                        @error('feedName') <p class="text-red-600 text-sm mt-1">{{ $message }}</p> @enderror
-                    </div>
-
-                    <div>
-                        <label for="feedProvider" class="block text-sm font-medium text-gray-700 mb-2">
-                            News Provider
-                        </label>
-                        <select
-                            id="feedProvider"
-                            wire:model="feedProvider"
-                            class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
-                            required
-                        >
-                            <option value="">Select news provider</option>
-                            @foreach ($feedProviders as $provider)
-                                <option value="{{ $provider['code'] }}">{{ $provider['name'] }}</option>
-                            @endforeach
-                        </select>
-                        @error('feedProvider') <p class="text-red-600 text-sm mt-1">{{ $message }}</p> @enderror
-                    </div>
-
-                    <div>
-                        <label for="feedLanguageId" class="block text-sm font-medium text-gray-700 mb-2">
-                            Language
-                        </label>
-                        <select
-                            id="feedLanguageId"
-                            wire:model="feedLanguageId"
-                            class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
-                            required
-                        >
-                            <option value="">Select language</option>
-                            @foreach ($languages as $language)
-                                <option value="{{ $language->id }}">{{ $language->name }}</option>
-                            @endforeach
-                        </select>
-                        @error('feedLanguageId') <p class="text-red-600 text-sm mt-1">{{ $message }}</p> @enderror
-                    </div>
-
-                    <div>
-                        <label for="feedDescription" class="block text-sm font-medium text-gray-700 mb-2">
-                            Description (Optional)
-                        </label>
-                        <textarea
-                            id="feedDescription"
-                            wire:model="feedDescription"
-                            rows="3"
-                            placeholder="Brief description of this feed"
-                            class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
-                        ></textarea>
-                        @error('feedDescription') <p class="text-red-600 text-sm mt-1">{{ $message }}</p> @enderror
-                    </div>
-
-                    <div class="flex justify-between">
-                        <button type="button" wire:click="previousStep" class="px-4 py-2 text-gray-600 hover:text-gray-800 transition duration-200">
-                            ← Back
-                        </button>
-                        <button
-                            type="submit"
-                            @disabled($isLoading)
-                            class="bg-blue-600 text-white py-2 px-6 rounded-md hover:bg-blue-700 transition duration-200 disabled:opacity-50"
-                        >
-                            {{ $isLoading ? 'Creating...' : 'Continue' }}
-                        </button>
-                    </div>
-                </form>
-            </div>
-        @endif
-
-        {{-- Step 4: Channel --}}
-        @if ($step === 4)
             <div class="text-center mb-8">
                 <h1 class="text-2xl font-bold text-gray-900 mb-2">Configure Your Channel</h1>
                 <p class="text-gray-600">
@@ -288,8 +184,8 @@ class="bg-blue-600 text-white py-2 px-6 rounded-md hover:bg-blue-700 transition
                 {{-- Progress indicator --}}
                 <div class="flex justify-center mt-6 space-x-2">
                     <div class="w-6 h-6 bg-green-500 text-white rounded-full flex items-center justify-center text-xs font-semibold">✓</div>
-                    <div class="w-6 h-6 bg-green-500 text-white rounded-full flex items-center justify-center text-xs font-semibold">✓</div>
+                    <div class="w-6 h-6 bg-blue-500 text-white rounded-full flex items-center justify-center text-xs font-semibold">2</div>
-                    <div class="w-6 h-6 bg-blue-500 text-white rounded-full flex items-center justify-center text-xs font-semibold">3</div>
+                    <div class="w-6 h-6 bg-gray-300 text-gray-600 rounded-full flex items-center justify-center text-xs font-semibold">3</div>
                     <div class="w-6 h-6 bg-gray-300 text-gray-600 rounded-full flex items-center justify-center text-xs font-semibold">4</div>
                 </div>
 
@@ -382,6 +278,110 @@ class="bg-blue-600 text-white py-2 px-6 rounded-md hover:bg-blue-700 transition
             </div>
         @endif
 
+        {{-- Step 4: Feed --}}
+        @if ($step === 4)
+            <div class="text-center mb-8">
+                <h1 class="text-2xl font-bold text-gray-900 mb-2">Add Your First Feed</h1>
+                <p class="text-gray-600">
+                    Choose from our supported news providers to monitor for new articles
+                </p>
+
+                {{-- Progress indicator --}}
+                <div class="flex justify-center mt-6 space-x-2">
+                    <div class="w-6 h-6 bg-green-500 text-white rounded-full flex items-center justify-center text-xs font-semibold">✓</div>
+                    <div class="w-6 h-6 bg-green-500 text-white rounded-full flex items-center justify-center text-xs font-semibold">✓</div>
+                    <div class="w-6 h-6 bg-blue-500 text-white rounded-full flex items-center justify-center text-xs font-semibold">3</div>
+                    <div class="w-6 h-6 bg-gray-300 text-gray-600 rounded-full flex items-center justify-center text-xs font-semibold">4</div>
+                </div>
+
+                <form wire:submit="createFeed" class="space-y-6 mt-8 text-left">
+                    @if (!empty($formErrors['general']))
+                        <div class="p-3 bg-red-50 border border-red-200 rounded-md">
+                            <p class="text-red-600 text-sm">{{ $formErrors['general'] }}</p>
+                        </div>
+                    @endif
+
+                    <div>
+                        <label for="feedName" class="block text-sm font-medium text-gray-700 mb-2">
+                            Feed Name
+                        </label>
+                        <input
+                            type="text"
+                            id="feedName"
+                            wire:model="feedName"
+                            placeholder="My News Feed"
+                            class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+                            required
+                        >
+                        @error('feedName') <p class="text-red-600 text-sm mt-1">{{ $message }}</p> @enderror
+                    </div>
+
+                    <div>
+                        <label for="feedProvider" class="block text-sm font-medium text-gray-700 mb-2">
+                            News Provider
+                        </label>
+                        <select
+                            id="feedProvider"
+                            wire:model="feedProvider"
+                            class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+                            required
+                        >
+                            <option value="">Select news provider</option>
+                            @foreach ($feedProviders as $provider)
+                                <option value="{{ $provider['code'] }}">{{ $provider['name'] }}</option>
+                            @endforeach
+                        </select>
+                        @error('feedProvider') <p class="text-red-600 text-sm mt-1">{{ $message }}</p> @enderror
+                    </div>
+
+                    <div>
+                        <label for="feedLanguageId" class="block text-sm font-medium text-gray-700 mb-2">
+                            Language
+                        </label>
+                        <select
+                            id="feedLanguageId"
+                            wire:model="feedLanguageId"
+                            class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+                            required
+                        >
+                            <option value="">Select language</option>
+                            @foreach ($languages as $language)
+                                <option value="{{ $language->id }}">{{ $language->name }}</option>
+                            @endforeach
+                        </select>
+                        @error('feedLanguageId') <p class="text-red-600 text-sm mt-1">{{ $message }}</p> @enderror
+                    </div>
+
+                    <div>
+                        <label for="feedDescription" class="block text-sm font-medium text-gray-700 mb-2">
+                            Description (Optional)
+                        </label>
+                        <textarea
+                            id="feedDescription"
+                            wire:model="feedDescription"
+                            rows="3"
+                            placeholder="Brief description of this feed"
+                            class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+                        ></textarea>
+                        @error('feedDescription') <p class="text-red-600 text-sm mt-1">{{ $message }}</p> @enderror
+                    </div>
+
+                    <div class="flex justify-between">
+                        <button type="button" wire:click="previousStep" class="px-4 py-2 text-gray-600 hover:text-gray-800 transition duration-200">
+                            ← Back
+                        </button>
+                        <button
+                            type="submit"
+                            @disabled($isLoading)
+                            class="bg-blue-600 text-white py-2 px-6 rounded-md hover:bg-blue-700 transition duration-200 disabled:opacity-50"
+                        >
+                            {{ $isLoading ? 'Creating...' : 'Continue' }}
+                        </button>
+                    </div>
+                </form>
+            </div>
+        @endif
+
         {{-- Step 5: Route --}}
         @if ($step === 5)
             <div class="text-center mb-8">