yusufipek/RepoHub
1
0
Fork 0
mirror of https://github.com/yusufipk/RepoHub.git synced 2026-09-12 02:56:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: smart package recommendations with UX improvements

Browse Source 
- 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
This commit is contained in:
ersaayan
2025-11-22 18:10:16 +03:00
parent a893ec6837
commit 32b415a97f
8 changed files with 182 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Header.tsx
+19 -2
View File
@@ -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
src/components/OnboardingModal.tsx
+19 -8
View File
@@ -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">
src/components/RecommendationsSection.tsx
+33 -2
View File
@@ -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"
src/components/RepoHubApp.tsx
+80 -7
View File
@@ -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}
/>
)}