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,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) => (

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)}