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

- 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

frontend/components/PhotoModal.tsx

@@ -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>
+  );
+}