From 99299ed9f2dd1cb58c4eeda93b45a9cb79363b4e Mon Sep 17 00:00:00 2001
From: mikael-lovqvists-claude-agent <mikaels.claude.agent@efforting.tech>
Date: Sat, 21 Mar 2026 00:20:41 +0000
Subject: [PATCH] Show grid cell image in component detail inventory entries

Grid-type inventory entries now display the warped cell image from the
grid as a read-only thumbnail (highlighted with accent border) alongside
any user-uploaded images for that entry.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 public/app.mjs   | 17 +++++++++++++++++
 public/style.css | 15 +++++++++++++++
 2 files changed, 32 insertions(+)

diff --git a/public/app.mjs b/public/app.mjs
index d06a57f..421e66e 100644
--- a/public/app.mjs
+++ b/public/app.mjs
@@ -363,6 +363,23 @@ function build_detail_inv_entry(entry) {
 		const goto_btn = qs(el, '.detail-inv-goto-grid');
 		goto_btn.hidden = false;
 		goto_btn.addEventListener('click', () => navigate(`/grids/viewer/${entry.grid_id}`));
+
+		// Show the grid cell image as a read-only thumbnail
+		const grid = all_grids.find(g => g.id === entry.grid_id);
+		const cell_filename = grid?.cells?.[entry.grid_row]?.[entry.grid_col];
+		if (cell_filename) {
+			const thumb = document.createElement('a');
+			thumb.className = 'thumb-link cell-thumb-link';
+			thumb.href = `/img/${cell_filename}`;
+			thumb.target = '_blank';
+			thumb.rel = 'noopener';
+			const img = document.createElement('img');
+			img.className = 'thumb-img';
+			img.src = `/img/${cell_filename}`;
+			img.alt = 'Grid cell';
+			thumb.appendChild(img);
+			qs(el, '.inv-image-grid').before(thumb);
+		}
 	}
 
 	// Inventory entry images
diff --git a/public/style.css b/public/style.css
index fe95848..60a995e 100644
--- a/public/style.css
+++ b/public/style.css
@@ -370,6 +370,21 @@ nav {
 	gap: 0.4rem;
 }
 
+.cell-thumb-link {
+	display: block;
+	border: 2px solid var(--accent, #5b9cf6);
+	border-radius: 3px;
+	overflow: hidden;
+	flex-shrink: 0;
+}
+
+.cell-thumb-link .thumb-img {
+	display: block;
+	width: 64px;
+	height: 64px;
+	object-fit: cover;
+}
+
 /* ===== SECTION TOOLBAR ===== */
 
 .section-toolbar {