feat: Add package name formatting for Windows packages and update contribution docs

- Format Windows winget package IDs for better display (e.g., "Microsoft.VisualStudioCode" → "Visual Studio Code")
- Extract last segment from dotted package names and convert CamelCase to spaced format
- Add title attribute to package names for full name on hover
- Update README with optional icon addition step in contribution guide
- Document Simple Icons integration process for new package submissions
- Add package icons

src/components/RecommendationCard.tsx

@@ -15,6 +15,21 @@ export function RecommendationCard({ pkg, isSelected, onToggle }: Recommendation
     const { t } = useLocale()
     const [iconError, setIconError] = useState(false)
 
+    // Helper to format package name for display
+    const getDisplayName = (name: string, platformId?: string) => {
+        if (platformId === 'windows' && name.includes('.')) {
+            // Handle winget IDs like "Microsoft.VisualStudioCode" or "Git.Git"
+            const parts = name.split('.')
+            const appName = parts[parts.length - 1] // Take the last part
+            
+            // Add spaces to CamelCase (e.g. "VisualStudioCode" -> "Visual Studio Code")
+            return appName.replace(/([A-Z])/g, ' $1').trim()
+        }
+        return name
+    }
+
+    const displayName = getDisplayName(pkg.name, pkg.platform_id)
+
     return (
         <Card
             className={`relative overflow-hidden transition-all hover:shadow-lg cursor-pointer ${isSelected ? 'ring-2 ring-primary' : ''
@@ -52,7 +67,7 @@ export function RecommendationCard({ pkg, isSelected, onToggle }: Recommendation
                         <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>
+                        <h3 className="font-semibold truncate" title={displayName}>{displayName}</h3>
                         <p className="text-xs text-muted-foreground">{pkg.version}</p>
                     </div>
                 </div>

src/components/RecommendationListItem.tsx

@@ -12,6 +12,21 @@ interface RecommendationListItemProps {
 export function RecommendationListItem({ pkg, isSelected, onToggle }: RecommendationListItemProps) {
     const [iconError, setIconError] = useState(false)
 
+    // Helper to format package name for display
+    const getDisplayName = (name: string, platformId?: string) => {
+        if (platformId === 'windows' && name.includes('.')) {
+            // Handle winget IDs like "Microsoft.VisualStudioCode" or "Git.Git"
+            const parts = name.split('.')
+            const appName = parts[parts.length - 1] // Take the last part
+            
+            // Add spaces to CamelCase (e.g. "VisualStudioCode" -> "Visual Studio Code")
+            return appName.replace(/([A-Z])/g, ' $1').trim()
+        }
+        return name
+    }
+
+    const displayName = getDisplayName(pkg.name, pkg.platform_id)
+
     return (
         <div
             className={`flex items-center gap-3 p-3 rounded-lg border-2 transition-all cursor-pointer hover:shadow-md ${isSelected
@@ -51,7 +66,7 @@ export function RecommendationListItem({ pkg, isSelected, onToggle }: Recommenda
             {/* Package Info */}
             <div className="flex-1 min-w-0">
                 <div className="flex items-center gap-2">
-                    <h4 className="font-semibold text-sm truncate">{pkg.name}</h4>
+                    <h4 className="font-semibold text-sm truncate" title={displayName}>{displayName}</h4>
                     <span className="text-xs text-muted-foreground">{pkg.version}</span>
                 </div>
             </div>