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

README.md

@@ -10,6 +10,7 @@ RepoHub provides a unified interface for package discovery and installation acro
 
 -   **Cross-Platform Support**: Works on Linux (Debian, Ubuntu, Arch, Fedora), Windows, and macOS.
 -   **Official Repositories**: Access software strictly from trusted, official sources.
+-   **Package Icons**: Visual icons for popular packages for easy recognition.
 -   **Script Generation**: Generate idempotent installation scripts for your selected platform.
 -   **Smart Filtering**: efficiently browse and filter packages.
 
@@ -200,7 +201,24 @@ windows: {
 }
 ```
 
-#### 5. Test Your Changes
+#### 5. Add an Icon (Optional)
+
+To make the package look better in recommendations, add an icon mapping in `PACKAGE_ICONS`:
+
+1.  Find the package slug on [Simple Icons](https://simpleicons.org/)
+2.  Add it to the `PACKAGE_ICONS` object in `src/data/recommendationPresets.ts`:
+
+```typescript
+export const PACKAGE_ICONS: Record<string, string> = {
+  // ...
+  "Docker.DockerDesktop": "docker", // Key matches package name, Value is Simple Icons slug
+  // ...
+};
+```
+
+If no icon is added, a default package icon will be used.
+
+#### 6. Test Your Changes
 
 1. Run validation:
    ```bash

README.tr.md

@@ -12,6 +12,7 @@ RepoHub, farklı işletim sistemlerinde paket keşfi ve kurulumu için birleşik
 -   **Resmi Depolar**: Yazılımlara yalnızca güvenilir, resmi kaynaklardan erişin.
 -   **Script Oluşturma**: Seçtiğiniz platform için idempotent kurulum scriptleri oluşturun.
 -   **Akıllı Filtreleme**: Paketleri verimli bir şekilde bulun ve filtreleyin.
+-   **Paket İkonları**: Popüler paketler için görsel ikonlar ile kolay tanıma.
 
 ## 🛠️ Teknoloji Yığını
 
@@ -200,7 +201,24 @@ windows: {
 }
 ```
 
-#### 5. Değişikliklerinizi Test Edin
+#### 5. İkon Ekleyin (İsteğe Bağlı)
+
+Paketin önerilerde daha iyi görünmesi için `PACKAGE_ICONS` içine bir ikon eşlemesi ekleyin:
+
+1.  [Simple Icons](https://simpleicons.org/)'da paket slug'ını bulun
+2.  `src/data/recommendationPresets.ts` dosyasındaki `PACKAGE_ICONS` nesnesine ekleyin:
+
+```typescript
+export const PACKAGE_ICONS: Record<string, string> = {
+  // ...
+  "Docker.DockerDesktop": "docker", // Anahtar paket adıyla eşleşmeli, Değer Simple Icons slug'ı olmalı
+  // ...
+};
+```
+
+İkon eklenmezse, varsayılan paket ikonu kullanılacaktır.
+
+#### 6. Değişikliklerinizi Test Edin
 
 1. Doğrulamayı çalıştırın:
    ```bash

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>