From 55e9e3b97d606682fc35fdc79ca1d17148d73239 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Yusuf=20=C4=B0pek?= Date: Sun, 23 Nov 2025 14:38:39 +0300 Subject: [PATCH] feat: Add package icons using Simple Icons and remove sorting functionality - Integrate Simple Icons via CDN with SVG mask technique for theme-aware icons - Add icon mapping for 150+ packages across all categories (development, design, multimedia, system tools, gaming, productivity, education) - Implement fallback to default PackageIcon when icon unavailable or fails to load - Add icon error handling with hidden img element to detect load failures - Update RecommendationCard and RecommendationListItem to display --- src/components/RecommendationCard.tsx | 31 +++- src/components/RecommendationListItem.tsx | 30 +++- src/components/RecommendationsSection.tsx | 69 +------- src/data/recommendationPresets.ts | 185 ++++++++++++++++++++++ src/services/recommendationService.ts | 29 +++- src/types/recommendations.ts | 1 + 6 files changed, 274 insertions(+), 71 deletions(-) diff --git a/src/components/RecommendationCard.tsx b/src/components/RecommendationCard.tsx index 1a3974c..3e72a92 100644 --- a/src/components/RecommendationCard.tsx +++ b/src/components/RecommendationCard.tsx @@ -1,3 +1,4 @@ +import { useState } from 'react' import { Package as PackageIcon } from 'lucide-react' import { Button } from '@/components/ui/button' import { Card, CardContent } from '@/components/ui/card' @@ -12,6 +13,7 @@ interface RecommendationCardProps { export function RecommendationCard({ pkg, isSelected, onToggle }: RecommendationCardProps) { const { t } = useLocale() + const [iconError, setIconError] = useState(false) return ( -
- +
+ {pkg.icon && !iconError ? ( + <> +
+ {/* Hidden image to detect load errors */} + setIconError(true)} + /> + + ) : ( + + )}

{pkg.name}

{pkg.version}

diff --git a/src/components/RecommendationListItem.tsx b/src/components/RecommendationListItem.tsx index 211a229..d9430fa 100644 --- a/src/components/RecommendationListItem.tsx +++ b/src/components/RecommendationListItem.tsx @@ -1,3 +1,4 @@ +import { useState } from 'react' import { Package as PackageIcon } from 'lucide-react' import { Button } from '@/components/ui/button' import { RecommendedPackage } from '@/types/recommendations' @@ -9,6 +10,8 @@ interface RecommendationListItemProps { } export function RecommendationListItem({ pkg, isSelected, onToggle }: RecommendationListItemProps) { + const [iconError, setIconError] = useState(false) + return (
onToggle(pkg)} > {/* Package Icon */} - + {pkg.icon && !iconError ? ( + <> +
+ {/* Hidden image to detect load errors */} + setIconError(true)} + /> + + ) : ( + + )} {/* Package Info */}
diff --git a/src/components/RecommendationsSection.tsx b/src/components/RecommendationsSection.tsx index c5a413f..c7e03a4 100644 --- a/src/components/RecommendationsSection.tsx +++ b/src/components/RecommendationsSection.tsx @@ -41,7 +41,6 @@ export function RecommendationsSection({ const [loading, setLoading] = useState(false) const [error, setError] = useState(null) const [viewMode, setViewMode] = useState('grid') - const [sortMode, setSortMode] = useState('recommended') const [filterCategory, setFilterCategory] = useState('all') const [isExpanded, setIsExpanded] = useState(false) @@ -116,8 +115,8 @@ export function RecommendationsSection({ return recommendations.filter(pkg => pkg.matchedCategory === category).length } - // Filter and sort recommendations - const filteredAndSortedRecommendations = useMemo(() => { + // Filter recommendations + const filteredRecommendations = useMemo(() => { let result = [...recommendations] // Filter by category @@ -125,26 +124,8 @@ export function RecommendationsSection({ result = result.filter(pkg => pkg.matchedCategory === filterCategory) } - // Sort - switch (sortMode) { - case 'popularity': - result.sort((a, b) => (b.popularity || 0) - (a.popularity || 0)) - break - case 'preset': - result.sort((a, b) => { - if (a.presetMatch && !b.presetMatch) return -1 - if (!a.presetMatch && b.presetMatch) return 1 - return b.recommendationScore - a.recommendationScore - }) - break - case 'recommended': - default: - result.sort((a, b) => b.recommendationScore - a.recommendationScore) - break - } - return result - }, [recommendations, filterCategory, sortMode]) + }, [recommendations, filterCategory]) if (!isProfileComplete()) { return null @@ -294,46 +275,6 @@ export function RecommendationsSection({
- {/* Sort Dropdown */} -
- - - -
- {/* View Mode Toggle */}