show default image

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,12 +50,17 @@ 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-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"
@@ -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 ? (
@@ -89,6 +95,7 @@ export function ProjectItemsDesktopTable({
                             <span className="text-xs text-slate-500">{item.note}</span>
                           ) : null}
                         </div>
+                      </div>
                     </td>
                     {visibleAttributes.map((attribute) => (
                       <td key={attribute} className="px-4 py-3 align-top text-xs text-slate-600">

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,10 +28,14 @@ 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">
+            <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)}
@@ -43,9 +48,7 @@ export function ProjectItemsMobileList({
                         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>
+                    <span className="font-semibold group-hover:underline">{displayName}</span>
                   </button>
                   {item.sourceUrl ? (
                     <a
@@ -61,19 +64,23 @@ export function ProjectItemsMobileList({
                   ) : null}
                 </div>
 
-            {item.note ? <p className="mt-1 text-sm text-slate-600">Note: {item.note}</p> : null}
+                {item.note ? <p className="text-sm text-slate-600">Note: {item.note}</p> : null}
 
-            <div className="mt-3 space-y-2">
+                <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>
+                      <span className="text-right">
+                        {formatAttributeValue(attributes[attribute])}
+                      </span>
                     </div>
                   ))}
                 </div>
-            <div className="mt-3 flex flex-col gap-0.5 text-xs">
+              </div>
+            </div>
+            <div className="mt-4 flex flex-col gap-0.5 text-xs">
               <button
                 type="button"
                 onClick={() => onTogglePrices(item.id)}

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,

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>;