From 32b415a97f9430d27673da87611a26c426458ab2 Mon Sep 17 00:00:00 2001
From: ersaayan <ersaayan@gmail.com>
Date: Sat, 22 Nov 2025 18:10:16 +0300
Subject: [PATCH] feat: smart package recommendations with UX improvements

- Added smart recommendations section with category-based filtering
- Implemented onboarding flow with 3-step wizard (categories, OS, experience level)
- Added 'Select All/Deselect All' for recommendations
- Added 'Preferences' button in header to reopen onboarding
- Fixed script generation for recommendation-based packages (auto-detect platform)
- Fixed onboarding completion bug (removed duplicate save)
- Added comprehensive debug logging
- Enhanced ScriptPreview to work with auto-generated platform info
- Optimized recommendation API with proper validation and error handling
- Added localStorage profile management with version control
---
 src/app/api/recommendations/route.ts      |  3 +-
 src/components/Header.tsx                 | 21 +++++-
 src/components/OnboardingModal.tsx        | 27 ++++---
 src/components/RecommendationsSection.tsx | 35 ++++++++-
 src/components/RepoHubApp.tsx             | 87 +++++++++++++++++++++--
 src/contexts/LocaleContext.tsx            | 14 ++--
 src/hooks/useRecommendationProfile.ts     | 16 ++++-
 src/services/recommendationService.ts     |  8 ++-
 8 files changed, 182 insertions(+), 29 deletions(-)

diff --git a/src/app/api/recommendations/route.ts b/src/app/api/recommendations/route.ts
index d42d807..8892b71 100644
--- a/src/app/api/recommendations/route.ts
+++ b/src/app/api/recommendations/route.ts
@@ -71,7 +71,8 @@ export async function POST(request: NextRequest) {
         { status: 400 }
       );
     }
-    const limit = body.limit && body.limit > 0 && body.limit <= 50 ? body.limit : 20;
+    const limit =
+      body.limit && body.limit > 0 && body.limit <= 50 ? body.limit : 20;
 
     // Generate recommendations
     const recommendations = await RecommendationService.generateRecommendations(
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 659ce93..c56bbef 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -5,14 +5,16 @@ import { Button } from '@/components/ui/button'
 import { useTheme } from '@/hooks/useTheme'
 import { useLocale } from '@/contexts/LocaleContext'
 import { SupportModal } from '@/components/SupportModal'
-import { Sun, Moon, Monitor, Globe, Heart, Github } from 'lucide-react'
+import { Sun, Moon, Monitor, Globe, Heart, Github, Settings } from 'lucide-react'
 import Image from 'next/image'
 
 export interface HeaderProps {
   cryptomusEnabled: boolean
+  onResetPreferences?: () => void
+  hasProfile?: boolean
 }
 
-export function Header({ cryptomusEnabled }: HeaderProps) {
+export function Header({ cryptomusEnabled, onResetPreferences, hasProfile }: HeaderProps) {
   const { theme, isDark, toggleTheme } = useTheme()
   const { locale, toggleLocale, t } = useLocale()
   const [isSupportModalOpen, setIsSupportModalOpen] = useState(false)
@@ -58,6 +60,21 @@ export function Header({ cryptomusEnabled }: HeaderProps) {
           </div>
 
           <div className="flex items-center space-x-2">
+            {/* Preferences Button - Show when profile exists */}
+            {hasProfile && onResetPreferences && (
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={onResetPreferences}
+                className="w-full justify-start"
+              >
+                <Settings className="h-4 w-4" />
+                <span className="ml-2 hidden sm:inline">
+                  {locale === 'tr' ? 'Tercihler' : 'Preferences'}
+                </span>
+              </Button>
+            )}
+
             {/* Support Button - Only show when Cryptomus is enabled */}
             {cryptomusEnabled && (
               <Button
diff --git a/src/components/OnboardingModal.tsx b/src/components/OnboardingModal.tsx
index 2e20c55..a4057c5 100644
--- a/src/components/OnboardingModal.tsx
+++ b/src/components/OnboardingModal.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import { useState } from 'react'
+import { useState, useEffect } from 'react'
 import { Button } from '@/components/ui/button'
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
@@ -44,6 +44,15 @@ export function OnboardingModal({
     )
     const [experienceLevel, setExperienceLevel] = useState<ExperienceLevel>('beginner')
 
+    // Reset state when modal opens
+    useEffect(() => {
+        if (isOpen) {
+            setStep(1)
+            // Keep current OS selection or use detected
+            setSelectedOS(detectedOS !== 'unknown' ? detectedOS : 'ubuntu')
+        }
+    }, [isOpen, detectedOS])
+
     if (!isOpen) return null
 
     const handleCategoryToggle = (category: UserCategory) => {
@@ -78,9 +87,11 @@ export function OnboardingModal({
 
         onComplete({
             categories: selectedCategories,
-            selectedOS: selectedOS !== detectedOS ? selectedOS : undefined,
+            selectedOS: selectedOS,
             experienceLevel
         })
+
+        // Close modal
         onClose()
     }
 
@@ -142,8 +153,8 @@ export function OnboardingModal({
                                         key={preset.category}
                                         onClick={() => handleCategoryToggle(preset.category)}
                                         className={`p-4 rounded-lg border-2 text-left transition-all hover:scale-105 ${selectedCategories.includes(preset.category)
-                                                ? 'border-primary bg-primary/10'
-                                                : 'border-border hover:border-primary/50'
+                                            ? 'border-primary bg-primary/10'
+                                            : 'border-border hover:border-primary/50'
                                             }`}
                                     >
                                         <div className="flex items-start gap-3">
@@ -192,8 +203,8 @@ export function OnboardingModal({
                                         key={platform.id}
                                         onClick={() => setSelectedOS(platform.id)}
                                         className={`p-4 rounded-lg border-2 text-center transition-all hover:scale-105 ${selectedOS === platform.id
-                                                ? 'border-primary bg-primary/10'
-                                                : 'border-border hover:border-primary/50'
+                                            ? 'border-primary bg-primary/10'
+                                            : 'border-border hover:border-primary/50'
                                             }`}
                                     >
                                         <div className="text-4xl mb-2">{platform.icon}</div>
@@ -222,8 +233,8 @@ export function OnboardingModal({
                                         key={level}
                                         onClick={() => setExperienceLevel(level)}
                                         className={`w-full p-4 rounded-lg border-2 text-left transition-all hover:scale-[1.02] ${experienceLevel === level
-                                                ? 'border-primary bg-primary/10'
-                                                : 'border-border hover:border-primary/50'
+                                            ? 'border-primary bg-primary/10'
+                                            : 'border-border hover:border-primary/50'
                                             }`}
                                     >
                                         <h4 className="font-semibold capitalize mb-1">
diff --git a/src/components/RecommendationsSection.tsx b/src/components/RecommendationsSection.tsx
index 7e55b33..07a95ed 100644
--- a/src/components/RecommendationsSection.tsx
+++ b/src/components/RecommendationsSection.tsx
@@ -50,7 +50,7 @@ export function RecommendationsSection({
 
             if (!response.ok) {
                 const errorData = await response.json().catch(() => ({}))
-                
+
                 if (response.status === 400) {
                     throw new Error(errorData.error || 'Invalid request parameters')
                 } else if (response.status === 500) {
@@ -66,7 +66,7 @@ export function RecommendationsSection({
             setRecommendations(data.recommendations || [])
         } catch (err) {
             console.error('Error fetching recommendations:', err)
-            
+
             // User-friendly error messages
             if (err instanceof TypeError && err.message.includes('fetch')) {
                 setError('Network error. Please check your internet connection.')
@@ -109,6 +109,37 @@ export function RecommendationsSection({
                         </div>
                     </div>
                     <div className="flex gap-2">
+                        <Button
+                            variant="outline"
+                            size="sm"
+                            onClick={() => {
+                                // Toggle: if all recommendations are selected, deselect them, otherwise select all
+                                const allSelected = recommendations.every(rec =>
+                                    selectedPackages.some(sel => sel.id === rec.id)
+                                )
+
+                                if (allSelected) {
+                                    // Deselect all recommendations
+                                    recommendations.forEach(rec => {
+                                        if (isPackageSelected(rec)) {
+                                            onPackageToggle(rec)
+                                        }
+                                    })
+                                } else {
+                                    // Select all recommendations
+                                    recommendations.forEach(rec => {
+                                        if (!isPackageSelected(rec)) {
+                                            onPackageToggle(rec)
+                                        }
+                                    })
+                                }
+                            }}
+                            disabled={loading || recommendations.length === 0}
+                        >
+                            {recommendations.every(rec => selectedPackages.some(sel => sel.id === rec.id))
+                                ? (t('common.deselect_all') || 'Deselect All')
+                                : (t('common.select_all') || 'Select All')}
+                        </Button>
                         <Button
                             variant="outline"
                             size="sm"
diff --git a/src/components/RepoHubApp.tsx b/src/components/RepoHubApp.tsx
index 85b9fa3..350ff3b 100644
--- a/src/components/RepoHubApp.tsx
+++ b/src/components/RepoHubApp.tsx
@@ -26,7 +26,6 @@ function RepoHubAppContent({ cryptomusEnabled }: { cryptomusEnabled: boolean })
     profile,
     isLoading: isProfileLoading,
     hasCompletedOnboarding,
-    completeOnboarding,
     saveProfile,
     detectedOS
   } = useRecommendationProfile()
@@ -49,13 +48,22 @@ function RepoHubAppContent({ cryptomusEnabled }: { cryptomusEnabled: boolean })
     selectedOS?: string
     experienceLevel: ExperienceLevel
   }) => {
-    saveProfile({
+    console.log('🎯 Onboarding completed with data:', data)
+
+    const success = saveProfile({
       categories: data.categories,
       selectedOS: data.selectedOS,
       experienceLevel: data.experienceLevel,
       hasCompletedOnboarding: true
     })
-    completeOnboarding()
+
+    console.log('💾 Profile save result:', success)
+
+    // Don't call completeOnboarding() - it causes a second save with empty state!
+    // completeOnboarding()
+
+    // Force close modal
+    setShowOnboarding(false)
   }
 
   const handleCustomizePreferences = () => {
@@ -89,9 +97,64 @@ function RepoHubAppContent({ cryptomusEnabled }: { cryptomusEnabled: boolean })
   }
 
   const handleGenerateScript = () => {
-    if (selectedPlatform && selectedPackages.length > 0) {
-      const script = generateScript(selectedPackages, selectedPlatform)
+    console.log('🔧 handleGenerateScript called')
+    console.log('📦 selectedPackages:', selectedPackages)
+    console.log('🖥️ selectedPlatform:', selectedPlatform)
+    console.log('✅ hasCompletedOnboarding:', hasCompletedOnboarding)
+
+    if (selectedPackages.length === 0) {
+      console.log('❌ No packages selected')
+      return
+    }
+
+    // Use selected platform, or if not selected, use the platform from recommendations profile
+    let platformToUse = selectedPlatform
+
+    if (!platformToUse && hasCompletedOnboarding) {
+      // Get effective OS from profile and find matching platform
+      const effectiveOS = profile.selectedOS || detectedOS
+      console.log('🔍 effectiveOS:', effectiveOS)
+
+      // We need to fetch the platform data - for now, create a mock platform
+      // This should ideally come from the platforms list
+      if (effectiveOS) {
+        platformToUse = {
+          id: effectiveOS,
+          name: effectiveOS.charAt(0).toUpperCase() + effectiveOS.slice(1),
+          description: '',
+          icon: '',
+          packageManager: getPackageManagerForOS(effectiveOS)
+        }
+        console.log('🎯 Created platform:', platformToUse)
+      }
+    }
+
+    if (platformToUse) {
+      console.log('✨ Generating script for platform:', platformToUse)
+      const script = generateScript(selectedPackages, platformToUse)
+      console.log('📝 Script generated:', script)
       setGeneratedScript(script)
+    } else {
+      console.log('❌ No platform available')
+    }
+  }
+
+  // Helper function to get package manager for OS
+  const getPackageManagerForOS = (os: string): string => {
+    switch (os.toLowerCase()) {
+      case 'windows':
+        return 'winget'
+      case 'macos':
+        return 'brew'
+      case 'ubuntu':
+      case 'debian':
+        return 'apt'
+      case 'fedora':
+        return 'dnf'
+      case 'arch':
+        return 'pacman'
+      default:
+        return 'unknown'
     }
   }
 
@@ -106,7 +169,11 @@ function RepoHubAppContent({ cryptomusEnabled }: { cryptomusEnabled: boolean })
 
   return (
     <div key={locale} className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-gray-900 dark:to-gray-800">
-      <Header cryptomusEnabled={cryptomusEnabled} />
+      <Header
+        cryptomusEnabled={cryptomusEnabled}
+        onResetPreferences={handleCustomizePreferences}
+        hasProfile={hasCompletedOnboarding}
+      />
 
       <div className="container mx-auto px-4 py-8">
         {/* Header */}
@@ -161,7 +228,13 @@ function RepoHubAppContent({ cryptomusEnabled }: { cryptomusEnabled: boolean })
           <ScriptPreview
             generatedScript={generatedScript}
             selectedPackages={selectedPackages}
-            selectedPlatform={selectedPlatform}
+            selectedPlatform={selectedPlatform || {
+              id: generatedScript.platform,
+              name: generatedScript.platform.charAt(0).toUpperCase() + generatedScript.platform.slice(1),
+              description: '',
+              icon: '',
+              packageManager: getPackageManagerForOS(generatedScript.platform)
+            }}
             onClose={handleCloseScriptPreview}
           />
         )}
diff --git a/src/contexts/LocaleContext.tsx b/src/contexts/LocaleContext.tsx
index 937a6ba..116ddbc 100644
--- a/src/contexts/LocaleContext.tsx
+++ b/src/contexts/LocaleContext.tsx
@@ -12,7 +12,9 @@ const translations = {
       description: "Simplify software installation across Linux, Windows, and macOS with official repositories",
       close: "Close",
       next: "Next",
-      back: "Back"
+      back: "Back",
+      select_all: "Select All",
+      deselect_all: "Deselect All"
     },
     platform: {
       select: "Select Your Platform",
@@ -116,7 +118,8 @@ const translations = {
       step1: {
         title: "What do you want to use your computer for?",
         description: "Select up to 3 categories that match your needs",
-        selected: "{count} selected (max 3)"
+        selected: "{count} selected (max 3)",
+        all_selected: "All {count} categories selected"
       },
       step2: {
         title: "Select your operating system",
@@ -194,7 +197,9 @@ const translations = {
       description: "Linux, Windows ve macOS'te resmi depoları kullanarak yazılım kurulumunu basitleştirin",
       close: "Kapat",
       next: "İleri",
-      back: "Geri"
+      back: "Geri",
+      select_all: "Tümünü Seç",
+      deselect_all: "Seçimi Kaldır"
     },
     platform: {
       select: "Platformunuzu Seçin",
@@ -298,7 +303,8 @@ const translations = {
       step1: {
         title: "Bilgisayarınızı ne için kullanmak istiyorsunuz?",
         description: "İhtiyaçlarınıza uygun en fazla 3 kategori seçin",
-        selected: "{count} seçildi (max 3)"
+        selected: "{count} seçildi (max 3)",
+        all_selected: "Tüm {count} kategori seçildi"
       },
       step2: {
         title: "İşletim sisteminizi seçin",
diff --git a/src/hooks/useRecommendationProfile.ts b/src/hooks/useRecommendationProfile.ts
index 2c99152..52a1f1d 100644
--- a/src/hooks/useRecommendationProfile.ts
+++ b/src/hooks/useRecommendationProfile.ts
@@ -91,7 +91,12 @@ export function useRecommendationProfile() {
 
         // Handle version migration
         if (!parsed.version || parsed.version < CURRENT_PROFILE_VERSION) {
-          console.log("Migrating profile from version", parsed.version || 0, "to", CURRENT_PROFILE_VERSION);
+          console.log(
+            "Migrating profile from version",
+            parsed.version || 0,
+            "to",
+            CURRENT_PROFILE_VERSION
+          );
           // Add migration logic here when schema changes in the future
           parsed.version = CURRENT_PROFILE_VERSION;
         }
@@ -125,13 +130,20 @@ export function useRecommendationProfile() {
         const updated: UserProfile = {
           ...profile,
           ...newProfile,
+          version: CURRENT_PROFILE_VERSION,
           lastUpdated: new Date().toISOString(),
         };
+
+        console.log("💾 Saving profile:", updated);
+
         setProfile(updated);
         localStorage.setItem(STORAGE_KEY, JSON.stringify(updated));
+
+        console.log("✅ Profile saved successfully to localStorage");
+
         return true;
       } catch (error) {
-        console.error("Error saving user profile:", error);
+        console.error("❌ Error saving user profile:", error);
         return false;
       }
     },
diff --git a/src/services/recommendationService.ts b/src/services/recommendationService.ts
index c78c79a..7b19895 100644
--- a/src/services/recommendationService.ts
+++ b/src/services/recommendationService.ts
@@ -88,7 +88,7 @@ export class RecommendationService {
     try {
       // Fetch all preset packages in one query
       const packages: Package[] = [];
-      
+
       // Search for each package name (case-insensitive)
       // Note: Current API doesn't support bulk name filtering,
       // so we optimize by fetching larger batches and filtering
@@ -105,7 +105,7 @@ export class RecommendationService {
         const exactMatch = result.packages.find(
           (pkg) => pkg.name.toLowerCase() === name.toLowerCase()
         );
-        
+
         if (exactMatch) {
           packages.push(exactMatch);
         } else if (result.packages.length > 0) {
@@ -155,7 +155,9 @@ export class RecommendationService {
           // This is a workaround until we add category name filtering to API
           const result = await PackageService.getMany({
             platform_id: platformId,
-            limit: Math.ceil(limit / (categories.length * dbCategoryNames.length)),
+            limit: Math.ceil(
+              limit / (categories.length * dbCategoryNames.length)
+            ),
             sort_by: "popularity_score",
             sort_order: "desc",
           });