From 580b53ed6bcec10ba4426d452739d05bdfd408e5 Mon Sep 17 00:00:00 2001
From: MayaTheShy <MayaTheShy@gmail.com>
Date: Sat, 21 Mar 2026 20:54:49 -0400
Subject: [PATCH] Update dropper selection display: include nicknames for
 better identification

---
 web/client/src/components/InventoryGrid.jsx | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/web/client/src/components/InventoryGrid.jsx b/web/client/src/components/InventoryGrid.jsx
index e2994eb..2dcd3ea 100644
--- a/web/client/src/components/InventoryGrid.jsx
+++ b/web/client/src/components/InventoryGrid.jsx
@@ -10,6 +10,7 @@ function InventoryGrid() {
   const setSearchQuery = useInventoryStore((state) => state.setSearchQuery);
   const getFilteredItems = useInventoryStore((state) => state.getFilteredItems);
   const orderItem = useInventoryStore((state) => state.orderItem);
+  const dropperNicknames = useInventoryStore((state) => state.dropperNicknames) || {};
 
   const [selectedItemName, setSelectedItemName] = useState(null);
   const [orderAmount, setOrderAmount] = useState(1);
@@ -180,11 +181,18 @@ function InventoryGrid() {
                       value={selectedDropper}
                       onChange={(e) => setSelectedDropper(e.target.value)}
                     >
-                      {droppers.map((d) => (
-                        <option key={d.name} value={d.name}>
-                          {d.name.replace(/^minecraft:/, '')}{d.isDefault ? ' (default)' : d.clientId ? ` (client ${d.clientId})` : ''}
-                        </option>
-                      ))}
+                      {droppers.map((d) => {
+                        const nick = dropperNicknames[d.name];
+                        const shortName = d.name.replace(/^minecraft:/, '');
+                        const label = nick
+                          ? `${nick} (${shortName})`
+                          : `${shortName}${d.isDefault ? ' (default)' : d.clientId ? ` (client ${d.clientId})` : ''}`;
+                        return (
+                          <option key={d.name} value={d.name}>
+                            {label}
+                          </option>
+                        );
+                      })}
                     </select>
                   </div>
                 )}