From 210cf505782cd294e92598a38572058d9c4c6a01 Mon Sep 17 00:00:00 2001
From: Jurgis Sakalauskas <jurgis.sakalauskas@cec.valantic.com>
Date: Thu, 16 Oct 2025 10:22:50 +0300
Subject: [PATCH] show default image

---
 .../project-items-desktop-table.tsx           | 19 ++--
 .../project-items-mobile-list.tsx             | 91 ++++++++++---------
 server/src/db/items-repository.ts             | 14 +++
 shared/models/item.d.ts                       |  1 +
 4 files changed, 77 insertions(+), 48 deletions(-)

diff --git a/client/src/pages/project-detail/project-items-desktop-table.tsx b/client/src/pages/project-detail/project-items-desktop-table.tsx
index 120b7bb..19ef675 100644
--- a/client/src/pages/project-detail/project-items-desktop-table.tsx
+++ b/client/src/pages/project-detail/project-items-desktop-table.tsx
@@ -3,6 +3,7 @@ import { ExternalLink } from 'lucide-react';
 import type { Item } from '@shared/models/item';
 import { ItemPricesPanel } from './item-prices-panel';
 import { formatAttributeValue, getPriceSummaryDisplay } from './project-items-utils';
+import { ItemThumbnail } from './item-thumbnail';
 
 interface ProjectItemsDesktopTableProps {
   items: Item[];
@@ -49,13 +50,18 @@ export function ProjectItemsDesktopTable({
               const priceDisplay = getPriceSummaryDisplay(item.priceSummary);
               const isExpanded = expandedItemId === item.id;
               const panelId = `item-${item.id}-prices-desktop`;
+              const displayName = item.manufacturer
+                ? `${item.manufacturer} ${item.model}`
+                : item.model;
 
               return (
                 <Fragment key={item.id}>
                   <tr className={`hover:bg-slate-50 ${isExpanded ? 'bg-slate-50' : ''}`}>
                     <td className="px-4 py-3 align-top">
-                      <div className="flex flex-col gap-1">
-                        <div className="flex items-center gap-2">
+                      <div className="flex items-start gap-3">
+                        <ItemThumbnail url={item.defaultImageUrl} alt={displayName} size="sm" />
+                        <div className="flex flex-1 flex-col gap-1">
+                          <div className="flex items-center gap-2">
                           <button
                             type="button"
                             onClick={() => onEditItem(item)}
@@ -69,7 +75,7 @@ export function ProjectItemsDesktopTable({
                               }`}
                             />
                             <span className="font-semibold group-hover:underline">
-                              {item.manufacturer ? `${item.manufacturer} ${item.model}` : item.model}
+                              {displayName}
                             </span>
                           </button>
                           {item.sourceUrl ? (
@@ -85,9 +91,10 @@ export function ProjectItemsDesktopTable({
                             </a>
                           ) : null}
                         </div>
-                        {item.note ? (
-                          <span className="text-xs text-slate-500">{item.note}</span>
-                        ) : null}
+                          {item.note ? (
+                            <span className="text-xs text-slate-500">{item.note}</span>
+                          ) : null}
+                        </div>
                       </div>
                     </td>
                     {visibleAttributes.map((attribute) => (
diff --git a/client/src/pages/project-detail/project-items-mobile-list.tsx b/client/src/pages/project-detail/project-items-mobile-list.tsx
index 32e3547..8a8473a 100644
--- a/client/src/pages/project-detail/project-items-mobile-list.tsx
+++ b/client/src/pages/project-detail/project-items-mobile-list.tsx
@@ -2,6 +2,7 @@ import { ExternalLink } from 'lucide-react';
 import type { Item } from '@shared/models/item';
 import { ItemPricesPanel } from './item-prices-panel';
 import { formatAttributeValue, getPriceSummaryDisplay } from './project-items-utils';
+import { ItemThumbnail } from './item-thumbnail';
 
 interface ProjectItemsMobileListProps {
   items: Item[];
@@ -27,53 +28,59 @@ export function ProjectItemsMobileList({
         const priceDisplay = getPriceSummaryDisplay(item.priceSummary);
         const isExpanded = expandedItemId === item.id;
         const panelId = `item-${item.id}-prices-mobile`;
+        const displayName = item.manufacturer ? `${item.manufacturer} ${item.model}` : item.model;
 
         return (
           <div key={item.id} className="rounded-xl border border-slate-200 p-4 shadow-sm">
-            <div className="flex items-start gap-3">
-              <button
-                type="button"
-                onClick={() => onEditItem(item)}
-                className="group flex flex-1 items-center gap-2 text-left text-slate-900 transition hover:text-blue-600 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 focus-visible:ring-offset-white"
-                title="Edit item details"
-              >
-                <span
-                  aria-hidden
-                  className={`inline-block h-2.5 w-2.5 rounded-full ${
-                    item.status === 'active' ? 'bg-emerald-500' : 'bg-slate-300'
-                  }`}
-                />
-                <span className="font-semibold group-hover:underline">
-                  {item.manufacturer ? `${item.manufacturer} ${item.model}` : item.model}
-                </span>
-              </button>
-              {item.sourceUrl ? (
-                <a
-                  href={item.sourceUrl}
-                  target="_blank"
-                  rel="noreferrer"
-                  className="inline-flex h-9 w-9 items-center justify-center rounded-md text-blue-600 transition focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 focus-visible:ring-offset-white"
-                  title="Open source link"
-                >
-                  <ExternalLink aria-hidden className="h-5 w-5" />
-                  <span className="sr-only">Open source link</span>
-                </a>
-              ) : null}
-            </div>
-
-            {item.note ? <p className="mt-1 text-sm text-slate-600">Note: {item.note}</p> : null}
-
-            <div className="mt-3 space-y-2">
-              {visibleAttributes.map((attribute) => (
-                <div key={attribute} className="flex justify-between text-xs text-slate-600">
-                  <span className="font-semibold uppercase tracking-wide text-slate-500">
-                    {attribute}
-                  </span>
-                  <span className="text-right">{formatAttributeValue(attributes[attribute])}</span>
+            <div className="flex items-start gap-4">
+              <ItemThumbnail url={item.defaultImageUrl} alt={displayName} size="md" />
+              <div className="flex flex-1 flex-col gap-2">
+                <div className="flex items-start gap-2">
+                  <button
+                    type="button"
+                    onClick={() => onEditItem(item)}
+                    className="group flex flex-1 items-center gap-2 text-left text-slate-900 transition hover:text-blue-600 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 focus-visible:ring-offset-white"
+                    title="Edit item details"
+                  >
+                    <span
+                      aria-hidden
+                      className={`inline-block h-2.5 w-2.5 rounded-full ${
+                        item.status === 'active' ? 'bg-emerald-500' : 'bg-slate-300'
+                      }`}
+                    />
+                    <span className="font-semibold group-hover:underline">{displayName}</span>
+                  </button>
+                  {item.sourceUrl ? (
+                    <a
+                      href={item.sourceUrl}
+                      target="_blank"
+                      rel="noreferrer"
+                      className="inline-flex h-9 w-9 items-center justify-center rounded-md text-blue-600 transition focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 focus-visible:ring-offset-white"
+                      title="Open source link"
+                    >
+                      <ExternalLink aria-hidden className="h-5 w-5" />
+                      <span className="sr-only">Open source link</span>
+                    </a>
+                  ) : null}
                 </div>
-              ))}
+
+                {item.note ? <p className="text-sm text-slate-600">Note: {item.note}</p> : null}
+
+                <div className="space-y-2">
+                  {visibleAttributes.map((attribute) => (
+                    <div key={attribute} className="flex justify-between text-xs text-slate-600">
+                      <span className="font-semibold uppercase tracking-wide text-slate-500">
+                        {attribute}
+                      </span>
+                      <span className="text-right">
+                        {formatAttributeValue(attributes[attribute])}
+                      </span>
+                    </div>
+                  ))}
+                </div>
+              </div>
             </div>
-            <div className="mt-3 flex flex-col gap-0.5 text-xs">
+            <div className="mt-4 flex flex-col gap-0.5 text-xs">
               <button
                 type="button"
                 onClick={() => onTogglePrices(item.id)}
diff --git a/server/src/db/items-repository.ts b/server/src/db/items-repository.ts
index 9ee921e..097932e 100644
--- a/server/src/db/items-repository.ts
+++ b/server/src/db/items-repository.ts
@@ -10,6 +10,7 @@ const itemColumns = `
   i.model,
   i.source_url_id,
   i.default_image_id,
+  default_image.url AS default_image_url,
   i.status,
   i.note,
   i.attributes,
@@ -38,6 +39,7 @@ export interface ItemRow {
   model: string;
   source_url_id: string | null;
   default_image_id: string | null;
+  default_image_url: string | null;
   status: ItemStatus;
   note: string | null;
   attributes: Record<string, unknown>;
@@ -84,6 +86,15 @@ const mapItemRow = (row: ItemRow, images?: ItemImage[]): ItemRecord => {
         }
       : null;
 
+  let defaultImageUrl = row.default_image_url ?? null;
+
+  if (!defaultImageUrl && row.default_image_id && images) {
+    const defaultImage = images.find((image) => image.id === row.default_image_id);
+    if (defaultImage) {
+      defaultImageUrl = defaultImage.url;
+    }
+  }
+
   return {
     id: row.id,
     projectId: row.project_id,
@@ -91,6 +102,7 @@ const mapItemRow = (row: ItemRow, images?: ItemImage[]): ItemRecord => {
     model: row.model,
     sourceUrlId: row.source_url_id,
     defaultImageId: row.default_image_id,
+    defaultImageUrl,
     sourceUrl: row.source_url,
     status: row.status,
     note: row.note,
@@ -128,6 +140,7 @@ export const listItems = async (options: ListItemsOptions): Promise<ItemRecord[]
       SELECT ${itemColumns}
       FROM items i
       LEFT JOIN urls u ON u.id = i.source_url_id
+      LEFT JOIN images default_image ON default_image.id = i.default_image_id
       LEFT JOIN LATERAL (
         SELECT
           MIN(ip.amount) AS min_amount,
@@ -215,6 +228,7 @@ export const getItemById = async (id: string): Promise<ItemRecord | null> => {
       SELECT ${itemColumns}
       FROM items i
       LEFT JOIN urls u ON u.id = i.source_url_id
+      LEFT JOIN images default_image ON default_image.id = i.default_image_id
       LEFT JOIN LATERAL (
         SELECT
           MIN(ip.amount) AS min_amount,
diff --git a/shared/models/item.d.ts b/shared/models/item.d.ts
index 547b559..a9cfb5f 100644
--- a/shared/models/item.d.ts
+++ b/shared/models/item.d.ts
@@ -26,6 +26,7 @@ export interface Item {
   sourceUrlId: string | null;
   sourceUrl: string | null;
   defaultImageId: string | null;
+  defaultImageUrl: string | null;
   status: ItemStatus;
   note: string | null;
   attributes: Record<string, unknown>;