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

@@ -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 (
         <Card
@@ -22,8 +24,33 @@ export function RecommendationCard({ pkg, isSelected, onToggle }: Recommendation
 
 
             <CardContent className="p-4">
-                <div className="flex items-start gap-3 mb-3">
-                    <PackageIcon className="h-8 w-8 text-primary flex-shrink-0" />
+                <div className="flex items-center gap-3 mb-3">
+                    {pkg.icon && !iconError ? (
+                        <>
+                            <div 
+                                className="h-8 w-8 flex-shrink-0 bg-foreground"
+                                style={{
+                                    maskImage: `url(https://cdn.jsdelivr.net/npm/simple-icons@latest/icons/${pkg.icon}.svg)`,
+                                    WebkitMaskImage: `url(https://cdn.jsdelivr.net/npm/simple-icons@latest/icons/${pkg.icon}.svg)`,
+                                    maskRepeat: 'no-repeat',
+                                    WebkitMaskRepeat: 'no-repeat',
+                                    maskSize: 'contain',
+                                    WebkitMaskSize: 'contain',
+                                    maskPosition: 'center',
+                                    WebkitMaskPosition: 'center'
+                                }}
+                            />
+                            {/* Hidden image to detect load errors */}
+                            <img 
+                                src={`https://cdn.jsdelivr.net/npm/simple-icons@latest/icons/${pkg.icon}.svg`}
+                                alt=""
+                                className="hidden"
+                                onError={() => setIconError(true)}
+                            />
+                        </>
+                    ) : (
+                        <PackageIcon className="h-8 w-8 text-foreground flex-shrink-0" />
+                    )}
                     <div className="flex-1 min-w-0">
                         <h3 className="font-semibold truncate">{pkg.name}</h3>
                         <p className="text-xs text-muted-foreground">{pkg.version}</p>