From e1c517c023ebdbd7aa49214c91d1207f1530dfca Mon Sep 17 00:00:00 2001
From: mikael-lovqvists-claude-agent <mikaels.claude.agent@efforting.tech>
Date: Sun, 22 Mar 2026 01:22:05 +0000
Subject: [PATCH] Grid viewer: improve cell labels and add green inventory
 count badge

Labels now overlay image with gradient background and visible colour.
Green badge top-right shows number of inventory entries for that cell.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 public/app.mjs   | 12 ++++++++++++
 public/style.css | 25 ++++++++++++++++++++++++-
 2 files changed, 36 insertions(+), 1 deletion(-)

diff --git a/public/app.mjs b/public/app.mjs
index 1f23f4a..31f3863 100644
--- a/public/app.mjs
+++ b/public/app.mjs
@@ -1294,6 +1294,18 @@ function render_grid_viewer() {
 			cell.classList.add('empty');
 		}
 		set_text(cell, '.grid-cell-label', `R${row + 1}C${col + 1}`);
+
+		const count = all_inventory.filter(inv =>
+			inv.location_type === 'grid' && inv.grid_id === grid.id &&
+			inv.grid_row === row && inv.grid_col === col
+		).length;
+		if (count > 0) {
+			const badge = document.createElement('span');
+			badge.className = 'grid-cell-count';
+			badge.textContent = count;
+			qs(cell, '.grid-cell-img-wrap').appendChild(badge);
+		}
+
 		cell.addEventListener('click', (e) => open_cell_inventory(grid, row, col, e));
 		return cell;
 	});
diff --git a/public/style.css b/public/style.css
index fa65e15..c5b1758 100644
--- a/public/style.css
+++ b/public/style.css
@@ -1483,10 +1483,33 @@ nav {
 }
 
 .grid-cell-label {
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	right: 0;
 	font-size: 0.65rem;
-	color: var(--text-faint);
+	color: #ccc;
 	text-align: center;
 	font-family: var(--font-mono);
+	background: linear-gradient(transparent, rgba(0,0,0,0.7));
+	border-radius: 0 0 3px 3px;
+	padding: 6px 2px 2px;
+	pointer-events: none;
+}
+
+.grid-cell-count {
+	position: absolute;
+	top: 3px;
+	right: 3px;
+	background: #2e7d4f;
+	color: #fff;
+	font-size: 0.6rem;
+	font-weight: 700;
+	font-family: var(--font-mono);
+	padding: 1px 5px;
+	border-radius: 8px;
+	pointer-events: none;
+	line-height: 1.5;
 }
 
 /* ===== GRID TYPE PILL ===== */