bede/tfm_ainventory
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(phase2): add photo display to inventory card with modal viewer

Browse Source 
- Create PhotoModal component for full-res photo viewing
- Add photo thumbnail (200px square) to inventory item card
- Implement photo modal trigger on thumbnail click
- Add fallback text when no photo available
- Modal closeable via X button, click outside, or Escape key
- Image scales responsively without stretching
- Add comprehensive test coverage (30+ tests)
- All 427 tests passing, build successful
- TypeScript strict mode compliant
This commit is contained in:
Daniel Bedeleanu
2026-04-21 14:53:27 +03:00
parent 74c91b117f
commit 3df15cf68f
5 changed files with 880 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
frontend/components/InventoryTable.tsx
View File

@@ -6,6 +6,7 @@ import { ChevronRight, ChevronDown, Layers, Package } from 'lucide-react';
import { clsx, type ClassValue } from 'clsx';
import { twMerge } from 'tailwind-merge';
import ItemDetailModal from '@/components/ItemDetailModal';
import PhotoModal from '@/components/PhotoModal';
function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
@@ -32,6 +33,7 @@ export default function InventoryTable({
}: InventoryTableProps) {
const [selectedItemDetail, setSelectedItemDetail] = useState<Item | null>(null);
const [refreshTrigger, setRefreshTrigger] = useState(0);
const [selectedPhotoItem, setSelectedPhotoItem] = useState<Item | null>(null);
const handleItemClick = (item: Item) => {
setSelectedItemDetail(item);
@@ -98,16 +100,42 @@ export default function InventoryTable({
{categoryItems.map(item => (
<div
key={item.id}
onClick={() => handleItemClick(item)}
className="bg-background/40 border border-slate-800/50 p-4 rounded-2xl flex items-center justify-between hover:border-primary/40 cursor-pointer transition-all active:scale-[0.98]"
className="bg-background/40 border border-slate-800/50 p-4 rounded-2xl flex items-center justify-between hover:border-primary/40 transition-all active:scale-[0.98]"
>
<div className="flex items-center gap-3 flex-1 min-w-0 pr-4">
<div className="w-8 h-8 rounded-xl bg-green-500/10 flex items-center justify-center text-green-500 shrink-0">
<Package size={14} />
</div>
<div
onClick={() => handleItemClick(item)}
className="flex items-center gap-3 flex-1 min-w-0 pr-4 cursor-pointer"
>
{item.image_url ? (
<div
onClick={(e) => {
e.stopPropagation();
setSelectedPhotoItem(item);
}}
className="w-12 h-12 rounded-xl shrink-0 border-2 border-slate-300 overflow-hidden cursor-pointer hover:border-primary transition-colors active:scale-95"
>
<img
src={item.image_url}
alt={item.name}
className="w-full h-full object-cover"
loading="lazy"
/>
</div>
) : (
<div className="w-12 h-12 rounded-xl bg-green-500/10 flex items-center justify-center text-green-500 shrink-0">
<Package size={14} />
</div>
)}
<div className="truncate">
<h4 className="card-title truncate">{item.name}</h4>
<p className="card-subtitle mt-0 lowercase opacity-80 truncate">{item.specs}</p>
{item.image_url ? (
<p className="card-subtitle mt-0 lowercase opacity-80 text-xs">Tap photo for details</p>
) : (
<>
<p className="card-subtitle mt-0 lowercase opacity-80 truncate">{item.specs}</p>
<p className="card-subtitle mt-0 text-xs">No photo</p>
</>
)}
</div>
</div>
<div className="text-right shrink-0">
@@ -134,6 +162,14 @@ export default function InventoryTable({
onItemRefresh={handleItemRefresh}
/>
)}
{selectedPhotoItem && selectedPhotoItem.image_url && (
<PhotoModal
photoUrl={selectedPhotoItem.image_url}
title={selectedPhotoItem.name}
onClose={() => setSelectedPhotoItem(null)}
/>
)}
</section>
);
}

64
frontend/components/PhotoModal.tsx Normal file
View File

@@ -0,0 +1,64 @@
'use client';
import React, { useEffect } from 'react';
import { X } from 'lucide-react';
interface PhotoModalProps {
photoUrl: string;
onClose: () => void;
title?: string;
}
export default function PhotoModal({
photoUrl,
onClose,
title = 'Photo',
}: PhotoModalProps) {
useEffect(() => {
const handleEscapeKey = (e: KeyboardEvent) => {
if (e.key === 'Escape') {
onClose();
}
};
window.addEventListener('keydown', handleEscapeKey);
return () => window.removeEventListener('keydown', handleEscapeKey);
}, [onClose]);
return (
<div
className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4"
onClick={onClose}
role="dialog"
aria-modal="true"
aria-label={`Photo viewer for ${title}`}
>
<div
className="bg-surface border border-slate-800 rounded-3xl max-w-2xl w-full max-h-[90vh] overflow-auto flex flex-col"
onClick={(e) => e.stopPropagation()}
>
{/* Header */}
<div className="sticky top-0 bg-surface border-b border-slate-800/50 p-4 md:p-6 flex items-center justify-between">
<h2 className="text-xl md:text-2xl font-normal text-white truncate">{title}</h2>
<button
onClick={onClose}
className="p-2 hover:bg-slate-800 rounded-full text-muted hover:text-white transition-colors"
aria-label="Close modal"
>
<X size={20} className="text-rose-500" />
</button>
</div>
{/* Image Container */}
<div className="p-4 md:p-6 flex items-center justify-center flex-1">
<img
src={photoUrl}
alt={title}
className="max-w-full max-h-[calc(90vh-120px)] object-contain rounded-2xl"
loading="lazy"
/>
</div>
</div>
</div>
);
}