makiolaj/GearBox
1
0
Fork 0
Code Issues 8 Pull Requests Actions Packages Projects Releases 10 Wiki Activity

feat(29-02): update ComparisonTable, CatalogSearchOverlay, ImageUpload

Browse Source 
Replace object-cover with GearImage across ComparisonTable,
CatalogSearchOverlay (2 instances), and ImageUpload preview.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Jean-Luc Makiola
2026-04-12 20:00:46 +02:00
parent 05c09182fd
commit 91846b5ca2
3 changed files with 41 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
src/client/components/CatalogSearchOverlay.tsx
View File

@@ -7,6 +7,7 @@ import { useFormatters } from "../hooks/useFormatters";
import { useGlobalItems } from "../hooks/useGlobalItems";
import { useTags } from "../hooks/useTags";
import { useUIStore } from "../stores/uiStore";
import { GearImage } from "./GearImage";
import { ManualEntryForm } from "./ManualEntryForm";
type ViewMode = "grid" | "list";
@@ -626,15 +627,21 @@ function GridCard({ item, onAdd, onCardClick, weight, price }: CardProps) {
className="bg-white rounded-xl border border-gray-100 overflow-hidden cursor-pointer hover:border-gray-200 hover:shadow-sm transition-all"
onClick={onCardClick}
>
<div className="aspect-[4/3] bg-gray-50">
<div
className="aspect-[4/3] overflow-hidden"
style={{
backgroundColor: item.imageUrl
? ((item as Record<string, unknown>).dominantColor as string) || "#f3f4f6"
: undefined,
}}
>
{item.imageUrl ? (
<img
<GearImage
src={item.imageUrl}
alt={`${item.brand} ${item.model}`}
className="w-full h-full object-cover"
/>
) : (
<div className="w-full h-full flex items-center justify-center">
<div className="w-full h-full bg-gray-50 flex items-center justify-center">
<svg
className="w-9 h-9 text-gray-300"
fill="none"
@@ -696,15 +703,21 @@ function ListRow({ item, onAdd, onCardClick, weight, price }: CardProps) {
onClick={onCardClick}
>
{/* Thumbnail */}
<div className="w-12 h-12 rounded-lg bg-gray-50 shrink-0 overflow-hidden">
<div
className="w-12 h-12 rounded-lg shrink-0 overflow-hidden"
style={{
backgroundColor: item.imageUrl
? ((item as Record<string, unknown>).dominantColor as string) || "#f3f4f6"
: undefined,
}}
>
{item.imageUrl ? (
<img
<GearImage
src={item.imageUrl}
alt={`${item.brand} ${item.model}`}
className="w-full h-full object-cover"
/>
) : (
<div className="w-full h-full flex items-center justify-center">
<div className="w-full h-full bg-gray-50 flex items-center justify-center">
<svg
className="w-5 h-5 text-gray-300"
fill="none"