From 1cbe22c6abfe8d1b520fec9c3cc2a9905522e6e5 Mon Sep 17 00:00:00 2001
From: Edwin <moyiedwin8@gmail.com>
Date: Wed, 6 Aug 2025 13:40:08 +0300
Subject: [PATCH 1/3] feat: add recommendation wizard with theme-aware UI

---
 src/components/RecommendationWizard.vue | 261 ++++++++++++++++++++++++
 src/views/HomeView.vue                  |  40 +++-
 2 files changed, 296 insertions(+), 5 deletions(-)
 create mode 100644 src/components/RecommendationWizard.vue

diff --git a/src/components/RecommendationWizard.vue b/src/components/RecommendationWizard.vue
new file mode 100644
index 0000000..1dfb15e
--- /dev/null
+++ b/src/components/RecommendationWizard.vue
@@ -0,0 +1,261 @@
+<!-- <template>
+  <div class="recommendation-wizard space-y-6 p-6 bg-white rounded-xl shadow-md max-w-xl mx-auto">
+    <h2 class="text-2xl font-bold">Find your perfect self-hosted app</h2>
+
+    <div v-if="step === 1">
+      <h3 class="text-lg font-semibold mb-2">1️⃣ What category are you interested in?</h3>
+      <div class="space-y-2">
+        <label v-for="option in categories" :key="option.value" class="flex items-center gap-2">
+          <input type="radio" v-model="answers.category" :value="option.value" />
+          {{ option.label }}
+        </label>
+      </div>
+    </div>
+
+    <div v-else-if="step === 2">
+      <h3 class="text-lg font-semibold mb-2">2️⃣ Should it be beginner friendly?</h3>
+      <div class="space-y-2">
+        <label class="flex items-center gap-2">
+          <input type="radio" v-model="answers.beginnerFriendly" :value="true" />
+          Yes
+        </label>
+        <label class="flex items-center gap-2">
+          <input type="radio" v-model="answers.beginnerFriendly" :value="false" />
+          Nope
+        </label>
+      </div>
+    </div>
+
+    <div v-else-if="step === 3">
+      <h3 class="text-lg font-semibold mb-2">3️⃣ How advanced are you with self-hosting?</h3>
+      <div class="space-y-2">
+        <label class="flex items-center gap-2">
+          <input type="radio" v-model="answers.selfHostingLevel" :value="1" />
+          🟢 Easy
+        </label>
+        <label class="flex items-center gap-2">
+          <input type="radio" v-model="answers.selfHostingLevel" :value="2" />
+          🟡 Intermediate
+        </label>
+        <label class="flex items-center gap-2">
+          <input type="radio" v-model="answers.selfHostingLevel" :value="3" />
+          🔴 Advanced
+        </label>
+      </div>
+    </div>
+
+    <div class="flex justify-between pt-4">
+      <button
+        v-if="step > 1"
+        @click="step--"
+        class="bg-gray-200 text-gray-800 px-4 py-2 rounded hover:bg-gray-300"
+      >
+        ⬅ Back
+      </button>
+      <button
+        v-if="step < 3"
+        @click="step++"
+        :disabled="!isStepValid"
+        class="ml-auto bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 disabled:opacity-50"
+      >
+        Next ➡
+      </button>
+      <button
+        v-else
+        @click="finish"
+        :disabled="!isStepValid"
+        class="ml-auto bg-green-600 text-white px-4 py-2 rounded hover:bg-green-700 disabled:opacity-50"
+      >
+        🎯 Show Recommendations
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import type { CategoryId } from '@/types'
+
+const step = ref(1)
+
+const answers = ref<{
+  category: CategoryId | null
+  beginnerFriendly: boolean | null
+  selfHostingLevel: 1 | 2 | 3 | null
+}>({
+  category: null,
+  beginnerFriendly: null,
+  selfHostingLevel: null,
+})
+
+const emit = defineEmits<{
+  (e: 'recommend', answers: typeof answers.value): void
+}>()
+
+const finish = () => {
+  emit('recommend', answers.value)
+}
+
+// Basic validation per step
+const isStepValid = computed(() => {
+  if (step.value === 1) return answers.value.category !== null
+  if (step.value === 2) return answers.value.beginnerFriendly !== null
+  if (step.value === 3) return answers.value.selfHostingLevel !== null
+  return false
+})
+
+const categories = [
+  { value: 'social', label: 'Social' },
+  { value: 'messaging', label: 'Messaging' },
+  { value: 'tools', label: 'Tools' },
+  { value: 'protocols', label: 'Protocols' },
+  { value: 'all', label: 'All' },
+]
+</script>
+
+<style scoped>
+input[type="radio"] {
+  accent-color: #2563eb;
+}
+</style> -->
+
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const step = ref(0)
+const totalSteps = 3
+
+const answers = ref({
+  category: '',
+  beginnerFriendly: false,
+  selfHostingLevel: 1,
+})
+
+const emit = defineEmits<{
+  (e: 'recommend', answers: typeof answers.value): void
+}>()
+
+const finish = () => {
+  console.log('Collected Answers:', answers.value)
+  emit('recommend', answers.value)
+}
+
+const reset = () => {
+  step.value = 0
+  answers.value = {
+    category: '',
+    beginnerFriendly: false,
+    selfHostingLevel: 1,
+  }
+}
+</script>
+
+<template>
+  <div
+    class="recommendation-wizard max-w-xl mx-auto p-6 space-y-6 rounded-xl shadow-md transition-colors duration-300 ease-in-out"
+    style="background-color: var(--color-card-primary); color: var(--color-text)"
+  >
+    <h2 class="text-xl font-bold">Step {{ step + 1 }} of {{ totalSteps }}</h2>
+
+    <!-- Step 1 -->
+    <div v-if="step === 0">
+      <label class="font-medium mb-2 block">What kind of tool are you looking for?</label>
+      <select
+        v-model="answers.category"
+        class="w-full p-2 rounded border"
+        style="background-color: var(--base-100); color: var(--color-text); border-color: var(--color-muted)"
+      >
+        <option value="" disabled>Select a category</option>
+        <option value="social">Social</option>
+        <option value="productivity">Productivity</option>
+        <option value="media">Media</option>
+        <option value="file-sharing">File Sharing</option>
+      </select>
+    </div>
+
+    <!-- Step 2 -->
+    <div v-else-if="step === 1">
+      <label class="font-medium block mb-4">Is beginner-friendliness important?</label>
+      <div class="flex gap-4">
+        <label class="cursor-pointer flex items-center gap-2">
+          <input
+            type="radio"
+            v-model="answers.beginnerFriendly"
+            :value="true"
+            class="radio"
+          />
+          Yes
+        </label>
+        <label class="cursor-pointer flex items-center gap-2">
+          <input
+            type="radio"
+            v-model="answers.beginnerFriendly"
+            :value="false"
+            class="radio"
+          />
+          Nope
+        </label>
+      </div>
+    </div>
+
+    <!-- Step 3 -->
+    <div v-else-if="step === 2">
+      <label class="font-medium block mb-4">How comfortable are you with self-hosting?</label>
+      <input
+        type="range"
+        min="1"
+        max="5"
+        step="1"
+        v-model.number="answers.selfHostingLevel"
+        class="range"
+        style="accent-color: var(--color-ring)"
+      />
+      <div class="text-sm mt-2 text-muted">
+        {{ ['No experience', 'Beginner', 'Somewhat confident', 'Experienced', 'Pro'][answers.selfHostingLevel - 1] }}
+      </div>
+    </div>
+
+    <!-- Navigation Buttons -->
+    <div class="flex justify-between pt-4">
+      <button
+        v-if="step > 0"
+        @click="step--"
+        class="py-2 px-4 rounded bg-gray-300 hover:bg-gray-400 text-black"
+      >
+        Back
+      </button>
+
+      <div class="flex-1"></div>
+
+      <button
+        v-if="step < totalSteps - 1"
+        @click="step++"
+        :disabled="step === 0 && !answers.category"
+        class="py-2 px-4 rounded text-white"
+        style="background-color: var(--color-brand)"
+      >
+        Next
+      </button>
+
+      <button
+        v-else
+        @click="finish"
+        class="py-2 px-4 rounded text-white"
+        style="background-color: var(--color-brand)"
+      >
+        Show Recommendations
+      </button>
+    </div>
+
+    <!-- Reset -->
+    <div class="text-center pt-4">
+      <button
+        @click="reset"
+        class="text-sm text-muted underline"
+      >
+        Restart Wizard
+      </button>
+    </div>
+  </div>
+</template>
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 2e14707..4845326 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -5,6 +5,7 @@ import AppSearch from '@/components/form/AppSearch.vue';
 import CategorySelector from '@/components/form/CategorySelector.vue';
 import ReshuffleButton from '@/components/form/ReshuffleButton.vue';
 import SurpriseMeButton from '@/components/form/SurpriseMeButton.vue';
+import RecommendationWizard from '@/components/RecommendationWizard.vue';
 import { useSEO } from '@/composables/useSEO';
 import { apps } from '@/data/apps';
 import { categories } from '@/data/categories';
@@ -35,15 +36,24 @@ const suggestions = apps.flatMap((app) => app.alternatives || []);
 const orderedApps = computed(() => {
   // Access shuffleTrigger to ensure re-computation on each shuffle
   globalStore.shuffleTrigger;
-  return globalStore.isReshuffled 
-    ? shuffleAppsPurely(apps) 
+  return globalStore.isReshuffled
+    ? shuffleAppsPurely(apps)
     : sortAppsByLinksThenRandom(apps);
 });
 
+const selectedHostingLevel = ref<1 | 2 | 3 | null>(null);
+
 const filteredApps = computed(() => {
-  return filterApps(orderedApps.value, selectedCategory.value, searchQuery.value);
+  let result = filterApps(orderedApps.value, selectedCategory.value, searchQuery.value);
+
+  if (selectedHostingLevel.value !== null) {
+    result = result.filter(app => app.selfHostingLevel === selectedHostingLevel.value);
+  }
+
+  return result;
 });
 
+
 const title = computed(() => t('app.title'));
 const subtitleBase = computed(() => {
   const isMobile = window.innerWidth <= 600;
@@ -101,6 +111,22 @@ function handleAbrirModal(app: App) {
   });
 }
 
+function handleWizardResults(answers: {
+  category: CategoryId | null;
+  beginnerFriendly: boolean | null;
+  selfHostingLevel: 1 | 2 | 3 | null;
+}) {
+  if (answers.category) selectedCategory.value = answers.category;
+  if (answers.beginnerFriendly !== null) {
+    searchQuery.value = answers.beginnerFriendly ? 'beginner' : '';
+  }
+  if (answers.selfHostingLevel !== null) {
+    selectedHostingLevel.value = answers.selfHostingLevel;
+  }
+
+  showFilters.value = true;
+}
+
 function handleSurpriseMe(app: App) {
   // Reuse existing modal logic
   handleAbrirModal(app);
@@ -199,6 +225,10 @@ watch([searchQuery, selectedCategory], ([query, category]) => {
 
   <section class="w-full space-y-5">
     <CategorySelector v-if="showFilters" v-model="selectedCategory" :categories="categories" />
+    <section class="mb-8">
+  <RecommendationWizard @recommend="handleWizardResults" />
+</section>
+
     <div class="mb-8 flex gap-2 items-start w-full">
       <div class="flex-1 min-w-0">
         <AppSearch
@@ -210,8 +240,8 @@ watch([searchQuery, selectedCategory], ([query, category]) => {
         />
       </div>
       <div class="flex-shrink-0 flex gap-2">
-        <SurpriseMeButton 
-          :apps="orderedApps" 
+        <SurpriseMeButton
+          :apps="orderedApps"
           @surprise="handleSurpriseMe"
         />
         <ReshuffleButton />

From 839f560315de07a410c04a0bc9d4ab707d9e7843 Mon Sep 17 00:00:00 2001
From: Edwin <moyiedwin8@gmail.com>
Date: Wed, 6 Aug 2025 14:25:03 +0300
Subject: [PATCH 2/3] feat: add recommendation wizard with theme-aware UI

---
 src/components/RecommendationWizard.vue | 209 ++++++------------------
 src/views/HomeView.vue                  |  35 +++-
 2 files changed, 77 insertions(+), 167 deletions(-)

diff --git a/src/components/RecommendationWizard.vue b/src/components/RecommendationWizard.vue
index 1dfb15e..194c861 100644
--- a/src/components/RecommendationWizard.vue
+++ b/src/components/RecommendationWizard.vue
@@ -1,146 +1,30 @@
-<!-- <template>
-  <div class="recommendation-wizard space-y-6 p-6 bg-white rounded-xl shadow-md max-w-xl mx-auto">
-    <h2 class="text-2xl font-bold">Find your perfect self-hosted app</h2>
-
-    <div v-if="step === 1">
-      <h3 class="text-lg font-semibold mb-2">1️⃣ What category are you interested in?</h3>
-      <div class="space-y-2">
-        <label v-for="option in categories" :key="option.value" class="flex items-center gap-2">
-          <input type="radio" v-model="answers.category" :value="option.value" />
-          {{ option.label }}
-        </label>
-      </div>
-    </div>
-
-    <div v-else-if="step === 2">
-      <h3 class="text-lg font-semibold mb-2">2️⃣ Should it be beginner friendly?</h3>
-      <div class="space-y-2">
-        <label class="flex items-center gap-2">
-          <input type="radio" v-model="answers.beginnerFriendly" :value="true" />
-          Yes
-        </label>
-        <label class="flex items-center gap-2">
-          <input type="radio" v-model="answers.beginnerFriendly" :value="false" />
-          Nope
-        </label>
-      </div>
-    </div>
-
-    <div v-else-if="step === 3">
-      <h3 class="text-lg font-semibold mb-2">3️⃣ How advanced are you with self-hosting?</h3>
-      <div class="space-y-2">
-        <label class="flex items-center gap-2">
-          <input type="radio" v-model="answers.selfHostingLevel" :value="1" />
-          🟢 Easy
-        </label>
-        <label class="flex items-center gap-2">
-          <input type="radio" v-model="answers.selfHostingLevel" :value="2" />
-          🟡 Intermediate
-        </label>
-        <label class="flex items-center gap-2">
-          <input type="radio" v-model="answers.selfHostingLevel" :value="3" />
-          🔴 Advanced
-        </label>
-      </div>
-    </div>
-
-    <div class="flex justify-between pt-4">
-      <button
-        v-if="step > 1"
-        @click="step--"
-        class="bg-gray-200 text-gray-800 px-4 py-2 rounded hover:bg-gray-300"
-      >
-        ⬅ Back
-      </button>
-      <button
-        v-if="step < 3"
-        @click="step++"
-        :disabled="!isStepValid"
-        class="ml-auto bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 disabled:opacity-50"
-      >
-        Next ➡
-      </button>
-      <button
-        v-else
-        @click="finish"
-        :disabled="!isStepValid"
-        class="ml-auto bg-green-600 text-white px-4 py-2 rounded hover:bg-green-700 disabled:opacity-50"
-      >
-        🎯 Show Recommendations
-      </button>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, computed } from 'vue'
-import type { CategoryId } from '@/types'
-
-const step = ref(1)
-
-const answers = ref<{
-  category: CategoryId | null
-  beginnerFriendly: boolean | null
-  selfHostingLevel: 1 | 2 | 3 | null
-}>({
-  category: null,
-  beginnerFriendly: null,
-  selfHostingLevel: null,
-})
-
-const emit = defineEmits<{
-  (e: 'recommend', answers: typeof answers.value): void
-}>()
-
-const finish = () => {
-  emit('recommend', answers.value)
-}
-
-// Basic validation per step
-const isStepValid = computed(() => {
-  if (step.value === 1) return answers.value.category !== null
-  if (step.value === 2) return answers.value.beginnerFriendly !== null
-  if (step.value === 3) return answers.value.selfHostingLevel !== null
-  return false
-})
-
-const categories = [
-  { value: 'social', label: 'Social' },
-  { value: 'messaging', label: 'Messaging' },
-  { value: 'tools', label: 'Tools' },
-  { value: 'protocols', label: 'Protocols' },
-  { value: 'all', label: 'All' },
-]
-</script>
-
-<style scoped>
-input[type="radio"] {
-  accent-color: #2563eb;
-}
-</style> -->
-
-
 <script setup lang="ts">
+// 🔁 Reactive state from Vue
 import { ref } from 'vue'
 
+// 🧮 Step counter for the wizard (starts at 0)
 const step = ref(0)
 const totalSteps = 3
 
+// 📝 Answers collected from the user across steps
 const answers = ref({
-  category: '',
-  beginnerFriendly: false,
-  selfHostingLevel: 1,
+  category: '',              // Step 1: What category the user wants
+  beginnerFriendly: false,   // Step 2: Is beginner-friendliness a factor?
+  selfHostingLevel: 1,       // Step 3: Comfort with self-hosting (1–5 scale)
 })
 
+// 📡 Emit an event to the parent component with user answers
 const emit = defineEmits<{
   (e: 'recommend', answers: typeof answers.value): void
 }>()
 
+// ✅ Called when the wizard finishes (Step 3 -> emit)
 const finish = () => {
   console.log('Collected Answers:', answers.value)
   emit('recommend', answers.value)
 }
 
+// 🔄 Reset the wizard to initial state (also used by restart button)
 const reset = () => {
   step.value = 0
   answers.value = {
@@ -152,54 +36,51 @@ const reset = () => {
 </script>
 
 <template>
+  <!-- 🌟 Main Container: Centered, responsive, styled box -->
   <div
-    class="recommendation-wizard max-w-xl mx-auto p-6 space-y-6 rounded-xl shadow-md transition-colors duration-300 ease-in-out"
+    class="recommendation-wizard w-full max-w-xl mx-auto p-4 sm:p-6 space-y-6 rounded-xl shadow-md transition-colors duration-300 ease-in-out"
     style="background-color: var(--color-card-primary); color: var(--color-text)"
   >
-    <h2 class="text-xl font-bold">Step {{ step + 1 }} of {{ totalSteps }}</h2>
+    <!-- 🔢 Step indicator -->
+    <h2 class="text-lg sm:text-xl font-bold text-center sm:text-left">
+      Step {{ step + 1 }} of {{ totalSteps }}
+    </h2>
 
-    <!-- Step 1 -->
+    <!-- 🥇 Step 1: Select a category -->
     <div v-if="step === 0">
       <label class="font-medium mb-2 block">What kind of tool are you looking for?</label>
       <select
         v-model="answers.category"
-        class="w-full p-2 rounded border"
+        class="w-full p-2 rounded border text-sm sm:text-base"
         style="background-color: var(--base-100); color: var(--color-text); border-color: var(--color-muted)"
       >
         <option value="" disabled>Select a category</option>
         <option value="social">Social</option>
-        <option value="productivity">Productivity</option>
-        <option value="media">Media</option>
-        <option value="file-sharing">File Sharing</option>
+        <option value="messaging">Messaging</option>
+        <option value="tools">Tools</option>
+        <option value="protocols">Protocols</option>
+        <option value="all">All</option>
       </select>
     </div>
 
-    <!-- Step 2 -->
+    <!-- 🥈 Step 2: Beginner-friendliness -->
     <div v-else-if="step === 1">
       <label class="font-medium block mb-4">Is beginner-friendliness important?</label>
-      <div class="flex gap-4">
+      <div class="flex flex-col sm:flex-row gap-4">
+        <!-- ✅ Yes option -->
         <label class="cursor-pointer flex items-center gap-2">
-          <input
-            type="radio"
-            v-model="answers.beginnerFriendly"
-            :value="true"
-            class="radio"
-          />
+          <input type="radio" v-model="answers.beginnerFriendly" :value="true" />
           Yes
         </label>
+        <!-- ❌ No option -->
         <label class="cursor-pointer flex items-center gap-2">
-          <input
-            type="radio"
-            v-model="answers.beginnerFriendly"
-            :value="false"
-            class="radio"
-          />
+          <input type="radio" v-model="answers.beginnerFriendly" :value="false" />
           Nope
         </label>
       </div>
     </div>
 
-    <!-- Step 3 -->
+    <!-- 🥉 Step 3: Self-hosting level -->
     <div v-else-if="step === 2">
       <label class="font-medium block mb-4">How comfortable are you with self-hosting?</label>
       <input
@@ -208,54 +89,58 @@ const reset = () => {
         max="5"
         step="1"
         v-model.number="answers.selfHostingLevel"
-        class="range"
+        class="w-full"
         style="accent-color: var(--color-ring)"
       />
       <div class="text-sm mt-2 text-muted">
-        {{ ['No experience', 'Beginner', 'Somewhat confident', 'Experienced', 'Pro'][answers.selfHostingLevel - 1] }}
+        {{
+          ['No experience', 'Beginner', 'Somewhat confident', 'Experienced', 'Pro'][
+            answers.selfHostingLevel - 1
+          ]
+        }}
       </div>
     </div>
 
-    <!-- Navigation Buttons -->
-    <div class="flex justify-between pt-4">
+    <!-- 🧭 Navigation buttons: Back / Next / Finish -->
+    <div class="flex flex-col sm:flex-row justify-between items-stretch sm:items-center gap-2 sm:gap-4 pt-4">
+      <!-- 🔙 Back button -->
       <button
         v-if="step > 0"
         @click="step--"
-        class="py-2 px-4 rounded bg-gray-300 hover:bg-gray-400 text-black"
+        class="w-full sm:w-auto py-2 px-4 rounded bg-gray-300 hover:bg-gray-400 text-black"
       >
         Back
       </button>
 
-      <div class="flex-1"></div>
+      <!-- 📏 Spacer for alignment -->
+      <div class="flex-1 hidden sm:block"></div>
 
+      <!-- ⏭️ Next button: disabled if category isn't selected yet -->
       <button
         v-if="step < totalSteps - 1"
         @click="step++"
         :disabled="step === 0 && !answers.category"
-        class="py-2 px-4 rounded text-white"
+        class="w-full sm:w-auto py-2 px-4 rounded text-white"
         style="background-color: var(--color-brand)"
       >
         Next
       </button>
 
+      <!-- 🎉 Final submit button -->
       <button
         v-else
         @click="finish"
-        class="py-2 px-4 rounded text-white"
+        class="w-full sm:w-auto py-2 px-4 rounded text-white cursor-pointer"
         style="background-color: var(--color-brand)"
       >
         Show Recommendations
       </button>
     </div>
 
-    <!-- Reset -->
+    <!-- 🔁 Optional restart link -->
     <div class="text-center pt-4">
-      <button
-        @click="reset"
-        class="text-sm text-muted underline"
-      >
-        Restart Wizard
-      </button>
+      <button @click="reset" class="text-sm text-muted underline">Restart Wizard</button>
     </div>
   </div>
 </template>
+
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 4845326..af2d970 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -250,10 +250,35 @@ watch([searchQuery, selectedCategory], ([query, category]) => {
   </section>
 
   <section
-    class="grid grid-cols-1 w-full max-w-full md:grid-cols-2 lg:grid-cols-3 gap-3 sm:gap-12 mt-2"
-  >
-    <AppCard v-for="app in filteredApps" :key="app.name" :app="app" @abrir="handleAbrirModal" />
+  class="grid grid-cols-1 w-full max-w-full md:grid-cols-2 lg:grid-cols-3 gap-3 sm:gap-12 mt-2"
+>
+  <template v-if="filteredApps.length">
+    <AppCard
+      v-for="app in filteredApps"
+      :key="app.name"
+      :app="app"
+      @abrir="handleAbrirModal"
+    />
+  </template>
+
+  <template v-else>
+    <p class="col-span-full text-center text-muted text-base mt-4">
+      😕 No apps found for this category.<br />
+      Try a different option or
+      <button
+        @click="() => { selectedCategory = 'all'; searchQuery = ''; selectedHostingLevel = null; }"
+        class="underline text-color hover:text-brand transition"
+      >
+        restart the wizard
+      </button>.
+    </p>
+  </template>
+
+  <AppModal
+    :abrir="mostrarModal"
+    :app="modalData"
+    @atualizarAbrir="handleFecharModal"
+  />
+</section>
 
-    <AppModal :abrir="mostrarModal" :app="modalData" @atualizarAbrir="handleFecharModal" />
-  </section>
 </template>

From d01b766364203ed3055347d0315add32bdb4489f Mon Sep 17 00:00:00 2001
From: Edwin <moyiedwin8@gmail.com>
Date: Wed, 6 Aug 2025 14:26:22 +0300
Subject: [PATCH 3/3] feat: add detailed comments

---
 src/components/RecommendationWizard.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/RecommendationWizard.vue b/src/components/RecommendationWizard.vue
index 194c861..895c30f 100644
--- a/src/components/RecommendationWizard.vue
+++ b/src/components/RecommendationWizard.vue
@@ -143,4 +143,3 @@ const reset = () => {
     </div>
   </div>
 </template>
-