From 1eaed39618e8eb8967d51f11f6897cc23b7abf07 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Sat, 28 Feb 2026 20:40:06 +0000
Subject: [PATCH] Add images to top stories and adjust layout

Add thumbnail images to top stories list items and modify the component to include them.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 517dfa7b-26ac-463d-a6e1-a58c6df97188
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 4f1916e6-1fe0-4d1f-b75f-cf8e7f67ece8
Replit-Helium-Checkpoint-Created: true
---
 client/src/pages/home.tsx | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/client/src/pages/home.tsx b/client/src/pages/home.tsx
index cd6cd94..2f5ad3a 100644
--- a/client/src/pages/home.tsx
+++ b/client/src/pages/home.tsx
@@ -188,12 +188,17 @@ function TopStoriesList({ articles }: { articles: Article[] }) {
       <div className="space-y-3">
         {articles.slice(0, 5).map((article) => (
           <Link key={article.id} href={`/article/${article.slug}`}>
-            <div className="group cursor-pointer py-1.5 border-b border-card-border last:border-0" data-testid={`card-top-${article.id}`}>
-              <div className="flex items-center gap-1.5 mb-0.5">
-                <span className="text-[10px] font-medium text-primary">{article.category}</span>
-                <span className="text-muted-foreground text-[10px]">{timeAgo(new Date(article.publishedAt))}</span>
+            <div className="group cursor-pointer flex gap-3 py-1.5 border-b border-card-border last:border-0" data-testid={`card-top-${article.id}`}>
+              <div className="flex-shrink-0 w-20 h-14 rounded overflow-hidden">
+                <img src={thumbUrl(article.coverImage)} alt={article.title} className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105" style={{ objectPosition: "center 25%" }} loading="lazy" />
+              </div>
+              <div className="flex-1 min-w-0">
+                <div className="flex items-center gap-1.5 mb-0.5">
+                  <span className="text-[10px] font-medium text-primary">{article.category}</span>
+                  <span className="text-muted-foreground text-[10px]">{timeAgo(new Date(article.publishedAt))}</span>
+                </div>
+                <h4 className="text-xs font-medium text-card-foreground line-clamp-2 group-hover:text-primary transition-colors leading-snug">{article.title}</h4>
               </div>
-              <h4 className="text-xs font-medium text-card-foreground line-clamp-2 group-hover:text-primary transition-colors leading-snug">{article.title}</h4>
             </div>
           </Link>
         ))}