From b0ba6ab39e3a385fc5796198b04dcf7f82ce7506 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Mon, 20 Apr 2026 22:56:09 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Add=20visual=20resour?=
 =?UTF-8?q?ce=20icons=20to=20UnitPanel=20cargo=20inventory?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Import ResourceIcon in UnitPanel
- Update cargo list to include resource icons for better recognition
- Improve resource name formatting (handle underscores)
- Ensure robust layout with Tailwind classes (truncate, gap, flex)

Co-authored-by: b0x1 <21123655+b0x1@users.noreply.github.com>
---
 .Jules/palette.md    | 4 ++++
 src/ui/UnitPanel.tsx | 8 ++++++--
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/.Jules/palette.md b/.Jules/palette.md
index 1b20d64..393c762 100644
--- a/.Jules/palette.md
+++ b/.Jules/palette.md
@@ -5,3 +5,7 @@
 ## 2026-04-13 - [Keyboard Accessibility in Interactive Modals]
 **Learning:** Many game UI elements rely solely on hover/click states. Adding `focus-visible:ring-2` and `aria-label` to selection buttons ensures that keyboard-only users can navigate and understand the interface.
 **Action:** Always include focus indicators and descriptive ARIA labels for icon-heavy or list-based interactive elements.
+
+## 2026-04-20 - [Visual Context in Cargo Inventories]
+**Learning:** Text-only inventory lists are slow to parse mentally. Adding 16px resource icons provides immediate visual recognition of cargo contents, aligning with the "recognition over recall" usability heuristic.
+**Action:** Use `ResourceIcon` in all inventory contexts (Units, Settlements, Trade) to ensure consistent visual language for goods.
diff --git a/src/ui/UnitPanel.tsx b/src/ui/UnitPanel.tsx
index 5a19981..c8030ce 100644
--- a/src/ui/UnitPanel.tsx
+++ b/src/ui/UnitPanel.tsx
@@ -13,6 +13,7 @@ import {
 import { useUIStore } from '../game/state/uiStore';
 import { UnitType } from '../game/entities/types';
 import { UnitSelector } from './UnitPanel/components/UnitSelector';
+import { ResourceIcon } from './ResourceIcon';
 import { distance } from '../game/entities/Position';
 import type { Unit } from '../game/entities/Unit';
 
@@ -145,8 +146,11 @@ export const UnitPanel: React.FC = () => {
         ) : (
           <ul className="space-y-1">
             {Array.from(unit.cargo.entries()).map(([good, amount]) => (
-              <li key={good} className="flex justify-between items-center border-b border-white/5 pb-1 last:border-0">
-                <span className="capitalize text-slate-300 font-medium">{good.toLowerCase()}</span>
+              <li key={good} className="flex justify-between items-center border-b border-white/5 pb-1 last:border-0 gap-2">
+                <div className="flex items-center gap-2 min-w-0">
+                  <ResourceIcon good={good} size={16} className="shrink-0" />
+                  <span className="capitalize text-slate-300 font-medium truncate">{good.replace('_', ' ').toLowerCase()}</span>
+                </div>
                 <span className="font-mono font-bold text-blue-300">{amount}</span>
               </li>
             ))}