Add placeholder screenshots and boost super like recommendations

Add screenshot functionality to desktop environment cards, specify a directory for screenshots, and significantly increase the recommendation weight for "super liked" desktop environments.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: c4fc7b07-53a2-4929-bc12-f392104bb085
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 936a3981-c2af-4a9b-b975-bbce46d12e05
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/55e426a8-5a2b-421b-8bd4-30481ae0063b/c4fc7b07-53a2-4929-bc12-f392104bb085/OOak6Ts
Replit-Helium-Checkpoint-Created: true

client/src/components/DECard.tsx

@@ -10,6 +10,7 @@ interface DECardProps {
     resourceUsage: string;
     customization: string;
     colorPalette: string[];
+    screenshot?: string;
   };
   onSwipe: (direction: 'left' | 'right' | 'super') => void;
   isTop: boolean;
@@ -113,52 +114,73 @@ export default function DECard({ de, onSwipe, isTop }: DECardProps) {
           GEÇ
         </motion.div>
 
-        <div className="relative z-10 flex flex-col items-center justify-center p-12 text-center">
-          <div 
-            className="mb-6 flex h-24 w-24 items-center justify-center rounded-2xl"
-            style={{
-              background: `linear-gradient(135deg, ${primaryColor}, ${secondaryColor})`,
-              boxShadow: `0 10px 40px ${primaryColor}50`,
-            }}
-          >
-            <StyleIcon className="h-12 w-12 text-white" />
-          </div>
-
-          <h2 
-            className="mb-3 font-['Space_Grotesk'] text-4xl font-bold"
-            style={{ color: primaryColor }}
-          >
-            {de.name}
-          </h2>
-
-          <p className="mb-8 max-w-md text-lg text-gray-300">
-            {de.description}
-          </p>
-
-          <div className="flex flex-wrap justify-center gap-3">
-            <span 
-              className="rounded-full px-4 py-2 text-sm font-medium"
-              style={{ 
-                backgroundColor: `${primaryColor}30`,
-                color: primaryColor,
+        <div className="relative z-10 flex flex-row items-stretch">
+          {de.screenshot && (
+            <div className="w-[320px] flex-shrink-0 overflow-hidden rounded-l-3xl">
+              <img
+                src={`/de_screenshots/${de.screenshot}`}
+                alt={`${de.name} screenshot`}
+                className="h-full w-full object-cover"
+                onError={(e) => {
+                  e.currentTarget.style.display = 'none';
+                }}
+              />
+              <div 
+                className="absolute inset-0 w-[320px]"
+                style={{
+                  background: `linear-gradient(90deg, transparent 60%, ${primaryColor}40 100%)`,
+                }}
+              />
+            </div>
+          )}
+          
+          <div className="flex flex-1 flex-col items-center justify-center p-8 text-center">
+            <div 
+              className="mb-4 flex h-16 w-16 items-center justify-center rounded-xl"
+              style={{
+                background: `linear-gradient(135deg, ${primaryColor}, ${secondaryColor})`,
+                boxShadow: `0 8px 30px ${primaryColor}50`,
               }}
             >
-              {styleLabels[de.style] || de.style}
-            </span>
-            <span 
-              className="rounded-full px-4 py-2 text-sm font-medium"
-              style={{ 
-                backgroundColor: `${secondaryColor}30`,
-                color: secondaryColor,
-              }}
+              <StyleIcon className="h-8 w-8 text-white" />
+            </div>
+
+            <h2 
+              className="mb-2 font-['Space_Grotesk'] text-3xl font-bold"
+              style={{ color: primaryColor }}
             >
-              {resourceLabels[de.resourceUsage] || de.resourceUsage}
-            </span>
-            <span 
-              className="rounded-full px-4 py-2 text-sm font-medium bg-white/10 text-gray-300"
-            >
-              Özelleştirme: {de.customization}
-            </span>
+              {de.name}
+            </h2>
+
+            <p className="mb-6 max-w-sm text-base text-gray-300">
+              {de.description}
+            </p>
+
+            <div className="flex flex-wrap justify-center gap-2">
+              <span 
+                className="rounded-full px-3 py-1.5 text-xs font-medium"
+                style={{ 
+                  backgroundColor: `${primaryColor}30`,
+                  color: primaryColor,
+                }}
+              >
+                {styleLabels[de.style] || de.style}
+              </span>
+              <span 
+                className="rounded-full px-3 py-1.5 text-xs font-medium"
+                style={{ 
+                  backgroundColor: `${secondaryColor}30`,
+                  color: secondaryColor,
+                }}
+              >
+                {resourceLabels[de.resourceUsage] || de.resourceUsage}
+              </span>
+              <span 
+                className="rounded-full px-3 py-1.5 text-xs font-medium bg-white/10 text-gray-300"
+              >
+                Özelleştirme: {de.customization}
+              </span>
+            </div>
           </div>
         </div>
       </div>

client/src/components/DistroMatch.tsx

@@ -39,7 +39,6 @@ export default function DistroMatch() {
       setLikedDEs(prev => [...prev, currentDE.name]);
     } else if (direction === 'super') {
       setSuperLikedDEs(prev => [...prev, currentDE.name]);
-      setLikedDEs(prev => [...prev, currentDE.name]);
     } else {
       setDislikedDEs(prev => [...prev, currentDE.name]);
     }

client/src/data/distros.json

@@ -636,7 +636,8 @@
       "style": "modern",
       "resourceUsage": "medium-high",
       "customization": "extreme",
-      "colorPalette": ["#1D99F3", "#3DAEE9", "#0D5A8F"]
+      "colorPalette": ["#1D99F3", "#3DAEE9", "#0D5A8F"],
+      "screenshot": "kde.png"
     },
     {
       "id": "gnome",
@@ -645,7 +646,8 @@
       "style": "minimalist",
       "resourceUsage": "medium-high",
       "customization": "limited",
-      "colorPalette": ["#4A86CF", "#3584E4", "#1C71D8"]
+      "colorPalette": ["#4A86CF", "#3584E4", "#1C71D8"],
+      "screenshot": "gnome.png"
     },
     {
       "id": "xfce",
@@ -654,7 +656,8 @@
       "style": "traditional",
       "resourceUsage": "low",
       "customization": "moderate",
-      "colorPalette": ["#2EB8E6", "#00AAD4", "#007EA8"]
+      "colorPalette": ["#2EB8E6", "#00AAD4", "#007EA8"],
+      "screenshot": "xfce.png"
     },
     {
       "id": "cinnamon",
@@ -663,7 +666,8 @@
       "style": "traditional",
       "resourceUsage": "medium",
       "customization": "good",
-      "colorPalette": ["#87CF3E", "#6BBD2B", "#4E9A1A"]
+      "colorPalette": ["#87CF3E", "#6BBD2B", "#4E9A1A"],
+      "screenshot": "cinnamon.png"
     },
     {
       "id": "mate",
@@ -672,7 +676,8 @@
       "style": "traditional",
       "resourceUsage": "low-medium",
       "customization": "good",
-      "colorPalette": ["#6CAD54", "#4E8A3A", "#356425"]
+      "colorPalette": ["#6CAD54", "#4E8A3A", "#356425"],
+      "screenshot": "mate.png"
     },
     {
       "id": "lxqt",
@@ -681,7 +686,8 @@
       "style": "minimal",
       "resourceUsage": "very-low",
       "customization": "moderate",
-      "colorPalette": ["#0099CC", "#0077AA", "#005588"]
+      "colorPalette": ["#0099CC", "#0077AA", "#005588"],
+      "screenshot": "lxqt.png"
     },
     {
       "id": "budgie",
@@ -690,7 +696,8 @@
       "style": "modern",
       "resourceUsage": "medium",
       "customization": "moderate",
-      "colorPalette": ["#6BCA81", "#4CAF50", "#388E3C"]
+      "colorPalette": ["#6BCA81", "#4CAF50", "#388E3C"],
+      "screenshot": "budgie.png"
     },
     {
       "id": "pantheon",
@@ -699,7 +706,8 @@
       "style": "mac-like",
       "resourceUsage": "medium",
       "customization": "very-limited",
-      "colorPalette": ["#64BAFF", "#3689E6", "#0D52BF"]
+      "colorPalette": ["#64BAFF", "#3689E6", "#0D52BF"],
+      "screenshot": "pantheon.png"
     },
     {
       "id": "cosmic",
@@ -708,7 +716,8 @@
       "style": "modern",
       "resourceUsage": "medium",
       "customization": "good",
-      "colorPalette": ["#FAA41A", "#48B9C7", "#574F4A"]
+      "colorPalette": ["#FAA41A", "#48B9C7", "#574F4A"],
+      "screenshot": "cosmic.png"
     },
     {
       "id": "dde",
@@ -717,7 +726,8 @@
       "style": "beautiful",
       "resourceUsage": "medium-high",
       "customization": "moderate",
-      "colorPalette": ["#0082FC", "#006DD9", "#0052A3"]
+      "colorPalette": ["#0082FC", "#006DD9", "#0052A3"],
+      "screenshot": "dde.png"
     },
     {
       "id": "i3",
@@ -726,7 +736,8 @@
       "style": "minimal-tiling",
       "resourceUsage": "very-low",
       "customization": "extreme",
-      "colorPalette": ["#285577", "#1C3D5A", "#122A40"]
+      "colorPalette": ["#285577", "#1C3D5A", "#122A40"],
+      "screenshot": "i3.png"
     },
     {
       "id": "hyprland",
@@ -735,7 +746,8 @@
       "style": "minimal-tiling",
       "resourceUsage": "low",
       "customization": "extreme",
-      "colorPalette": ["#00D4AA", "#00B894", "#009874"]
+      "colorPalette": ["#00D4AA", "#00B894", "#009874"],
+      "screenshot": "hyprland.png"
     }
   ],
   "criticalQuestions": [

client/src/lib/scoring.ts

@@ -57,20 +57,21 @@ export function calculateDistroScores(preferences: UserPreferences): ScoredDistr
   });
 
   preferences.superLikedDEs.forEach(de => {
-    const deKey = de.toLowerCase().replace(/\s+/g, '').replace('plasma', '');
-    const matchingDistros = DE_SCORES[deKey] || [];
+    const deKey = de.toLowerCase().replace(/\s+/g, '').replace('plasma', '').replace('/', '');
+    const matchingDistros = DE_SCORES[deKey] || DE_SCORES[de.toLowerCase()] || [];
     matchingDistros.forEach(distroId => {
-      scores[distroId] = (scores[distroId] || 0) + 15;
+      scores[distroId] = (scores[distroId] || 0) + 50;
       if (!matchReasons[distroId]) matchReasons[distroId] = [];
-      matchReasons[distroId].push(`${de} masaüstü ortamını çok beğendin`);
+      matchReasons[distroId].push(`${de} masaüstü ortamını bayıldın!`);
     });
   });
 
   preferences.likedDEs.forEach(de => {
-    const deKey = de.toLowerCase().replace(/\s+/g, '').replace('plasma', '');
-    const matchingDistros = DE_SCORES[deKey] || [];
+    if (preferences.superLikedDEs.includes(de)) return;
+    const deKey = de.toLowerCase().replace(/\s+/g, '').replace('plasma', '').replace('/', '');
+    const matchingDistros = DE_SCORES[deKey] || DE_SCORES[de.toLowerCase()] || [];
     matchingDistros.forEach(distroId => {
-      scores[distroId] = (scores[distroId] || 0) + 8;
+      scores[distroId] = (scores[distroId] || 0) + 10;
       if (!matchReasons[distroId]?.some(r => r.includes(de))) {
         matchReasons[distroId]?.push(`${de} desteği mevcut`);
       }
@@ -78,10 +79,10 @@ export function calculateDistroScores(preferences: UserPreferences): ScoredDistr
   });
 
   preferences.dislikedDEs.forEach(de => {
-    const deKey = de.toLowerCase().replace(/\s+/g, '').replace('plasma', '');
-    const matchingDistros = DE_SCORES[deKey] || [];
+    const deKey = de.toLowerCase().replace(/\s+/g, '').replace('plasma', '').replace('/', '');
+    const matchingDistros = DE_SCORES[deKey] || DE_SCORES[de.toLowerCase()] || [];
     matchingDistros.forEach(distroId => {
-      scores[distroId] = (scores[distroId] || 0) - 5;
+      scores[distroId] = (scores[distroId] || 0) - 15;
     });
   });