Add dropper nickname management: implement get and set endpoints

web/client/src/App.jsx

@@ -5,6 +5,7 @@ import SmeltingPanel from './components/SmeltingPanel';
 import CraftingPanel from './components/CraftingPanel';
 import AlertsPanel from './components/AlertsPanel';
 import AnalyticsPanel from './components/AnalyticsPanel';
+import SettingsPanel from './components/SettingsPanel';
 import ErrorBoundary from './components/ErrorBoundary';
 import { useInventoryStore } from './store/inventoryStore';
 import './App.css';
@@ -18,6 +19,7 @@ function App() {
   const alerts = useInventoryStore((state) => state.alerts) || [];
   const [panelTab, setPanelTab] = useState('inventory');
   const [showAlerts, setShowAlerts] = useState(false);
+  const [showSettings, setShowSettings] = useState(false);
   const [, forceRender] = useState(0);
 
   useEffect(() => {
@@ -58,6 +60,14 @@ function App() {
       <div className="app-header">
         <h1>⛏️ Inventory Manager</h1>
         <div className="header-right">
+          {/* Settings gear button */}
+          <button
+            className="settings-gear"
+            onClick={() => setShowSettings(!showSettings)}
+            title="Settings"
+          >
+            ⚙️
+          </button>
           {/* Alerts bell button */}
           <button
             className={`alerts-bell ${triggeredAlerts.length > 0 ? 'has-alerts' : ''}`}
@@ -96,6 +106,9 @@ function App() {
       {/* Alerts popup overlay */}
       <AlertsPanel isOpen={showAlerts} onClose={() => setShowAlerts(false)} />
 
+      {/* Settings overlay */}
+      <SettingsPanel isOpen={showSettings} onClose={() => setShowSettings(false)} />
+
       <div className="app-content">
         <div className="sidebar">
           <ErrorBoundary>

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>
                 )}

web/client/src/components/SettingsPanel.css

@@ -0,0 +1,242 @@
+/* ============================================
+   Settings Panel (overlay modal)
+   ============================================ */
+
+.settings-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  background: rgba(0, 0, 0, 0.7);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  animation: settingsFadeIn 0.15s ease-out;
+}
+
+@keyframes settingsFadeIn {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+
+.settings-panel {
+  background: #2a2a2a;
+  border: 3px solid var(--mc-stone-dark);
+  box-shadow:
+    inset 1px 1px 0 var(--mc-border-highlight),
+    inset -1px -1px 0 var(--mc-border-shadow),
+    0 8px 32px rgba(0, 0, 0, 0.6);
+  width: 90%;
+  max-width: 520px;
+  max-height: 80vh;
+  display: flex;
+  flex-direction: column;
+  animation: settingsSlideIn 0.15s ease-out;
+}
+
+@keyframes settingsSlideIn {
+  from { transform: translateY(-12px); opacity: 0; }
+  to   { transform: translateY(0); opacity: 1; }
+}
+
+.settings-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.75rem 1rem;
+  background: var(--mc-oak-dark);
+  border-bottom: 2px solid var(--mc-dark);
+  box-shadow:
+    inset 0 2px 0 var(--mc-oak-light),
+    inset 0 -1px 0 var(--mc-dirt-dark);
+}
+
+.settings-header h2 {
+  font-size: 0.9rem;
+  color: var(--mc-text-yellow);
+  text-shadow: 2px 2px 0 var(--mc-dark);
+}
+
+.settings-close {
+  background: none;
+  border: 2px solid transparent;
+  color: var(--mc-text-gray);
+  font-family: 'Silkscreen', monospace;
+  font-size: 0.9rem;
+  cursor: pointer;
+  padding: 0.15rem 0.4rem;
+  transition: color 0.15s, border-color 0.15s;
+}
+
+.settings-close:hover {
+  color: var(--mc-text-red);
+  border-color: var(--mc-text-red);
+}
+
+.settings-body {
+  padding: 1rem;
+  overflow-y: auto;
+  flex: 1;
+}
+
+.settings-section h3 {
+  font-size: 0.8rem;
+  color: var(--mc-text-gold);
+  text-shadow: 1px 1px 0 #000;
+  margin-bottom: 0.4rem;
+}
+
+.settings-hint {
+  font-size: 0.6rem;
+  color: var(--mc-text-gray);
+  margin-bottom: 0.75rem;
+  line-height: 1.4;
+}
+
+.settings-empty {
+  font-size: 0.65rem;
+  color: var(--mc-text-gray);
+  font-style: italic;
+  text-align: center;
+  padding: 1.5rem 0;
+}
+
+/* === Dropper nickname list === */
+
+.dropper-nickname-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+}
+
+.dropper-nickname-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  padding: 0.5rem 0.625rem;
+  background: #222;
+  border: 2px solid #3a3a3a;
+  transition: border-color 0.15s;
+}
+
+.dropper-nickname-row:hover {
+  border-color: #555;
+}
+
+.dropper-nickname-info {
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
+  min-width: 0;
+  flex: 1;
+}
+
+.dropper-raw-name {
+  font-size: 0.65rem;
+  color: var(--mc-text-white);
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+  flex-wrap: wrap;
+}
+
+.dropper-badge {
+  font-size: 0.5rem;
+  padding: 0.1rem 0.3rem;
+  border-radius: 0;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.dropper-badge.default {
+  background: var(--mc-grass-dark);
+  color: var(--mc-text-green);
+  border: 1px solid var(--mc-grass);
+}
+
+.dropper-badge.client {
+  background: #2a2854;
+  color: var(--mc-text-aqua);
+  border: 1px solid #4a48a4;
+}
+
+.dropper-current-nick {
+  font-size: 0.6rem;
+  color: var(--mc-text-gold);
+  font-style: italic;
+}
+
+.dropper-nickname-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  flex-shrink: 0;
+}
+
+.nickname-input {
+  background: #1a1a1a;
+  border: 2px solid #444;
+  color: var(--mc-text-white);
+  font-family: 'Silkscreen', monospace;
+  font-size: 0.6rem;
+  padding: 0.3rem 0.4rem;
+  outline: none;
+  width: 120px;
+  transition: border-color 0.15s;
+}
+
+.nickname-input:focus {
+  border-color: var(--mc-text-green);
+}
+
+.nickname-input::placeholder {
+  color: #555;
+}
+
+.nick-btn {
+  padding: 0.25rem 0.4rem !important;
+  font-size: 0.65rem !important;
+  min-width: unset !important;
+  line-height: 1;
+}
+
+/* === Settings gear button (in header) === */
+
+.settings-gear {
+  background: none;
+  border: 2px solid transparent;
+  cursor: pointer;
+  font-size: 1.15rem;
+  padding: 0.2rem 0.35rem;
+  transition: border-color 0.15s, transform 0.3s;
+  color: var(--mc-text-gray);
+}
+
+.settings-gear:hover {
+  border-color: var(--mc-text-gold);
+  transform: rotate(45deg);
+  color: var(--mc-text-gold);
+}
+
+/* === Responsive === */
+
+@media (max-width: 480px) {
+  .settings-panel {
+    width: 96%;
+    max-height: 90vh;
+  }
+
+  .nickname-input {
+    width: 80px;
+  }
+
+  .dropper-nickname-row {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .dropper-nickname-actions {
+    width: 100%;
+    justify-content: flex-end;
+  }
+}

web/client/src/components/SettingsPanel.jsx

@@ -0,0 +1,145 @@
+import React, { useState, useCallback } from 'react';
+import { useInventoryStore } from '../store/inventoryStore';
+import './SettingsPanel.css';
+
+function SettingsPanel({ isOpen, onClose }) {
+  const droppers = useInventoryStore((state) => state.inventory.droppers) || [];
+  const dropperNicknames = useInventoryStore((state) => state.dropperNicknames) || {};
+  const setDropperNickname = useInventoryStore((state) => state.setDropperNickname);
+
+  const [editingDropper, setEditingDropper] = useState(null);
+  const [editValue, setEditValue] = useState('');
+  const [saving, setSaving] = useState(false);
+
+  const startEditing = useCallback((dropperName) => {
+    setEditingDropper(dropperName);
+    setEditValue(dropperNicknames[dropperName] || '');
+  }, [dropperNicknames]);
+
+  const saveNickname = useCallback(async () => {
+    if (!editingDropper) return;
+    setSaving(true);
+    await setDropperNickname(editingDropper, editValue);
+    setSaving(false);
+    setEditingDropper(null);
+    setEditValue('');
+  }, [editingDropper, editValue, setDropperNickname]);
+
+  const removeNickname = useCallback(async (dropperName) => {
+    setSaving(true);
+    await setDropperNickname(dropperName, '');
+    setSaving(false);
+  }, [setDropperNickname]);
+
+  const handleKeyDown = useCallback((e) => {
+    if (e.key === 'Enter') saveNickname();
+    if (e.key === 'Escape') {
+      setEditingDropper(null);
+      setEditValue('');
+    }
+  }, [saveNickname]);
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="settings-overlay" onClick={onClose}>
+      <div className="settings-panel" onClick={(e) => e.stopPropagation()}>
+        <div className="settings-header">
+          <h2>⚙️ Settings</h2>
+          <button className="settings-close" onClick={onClose}>✕</button>
+        </div>
+
+        <div className="settings-body">
+          <div className="settings-section">
+            <h3>🏷️ Dropper Nicknames</h3>
+            <p className="settings-hint">
+              Give your dispensers friendly names so they're easier to identify.
+            </p>
+
+            {droppers.length === 0 ? (
+              <div className="settings-empty">
+                No droppers detected. Connect the bridge to discover droppers.
+              </div>
+            ) : (
+              <div className="dropper-nickname-list">
+                {droppers.map((d) => {
+                  const nickname = dropperNicknames[d.name];
+                  const isEditing = editingDropper === d.name;
+                  const shortName = d.name.replace(/^minecraft:/, '');
+
+                  return (
+                    <div key={d.name} className="dropper-nickname-row">
+                      <div className="dropper-nickname-info">
+                        <span className="dropper-raw-name">
+                          {shortName}
+                          {d.isDefault && <span className="dropper-badge default">default</span>}
+                          {d.clientId && <span className="dropper-badge client">client {d.clientId}</span>}
+                        </span>
+                        {nickname && !isEditing && (
+                          <span className="dropper-current-nick">"{nickname}"</span>
+                        )}
+                      </div>
+                      <div className="dropper-nickname-actions">
+                        {isEditing ? (
+                          <>
+                            <input
+                              type="text"
+                              className="nickname-input"
+                              value={editValue}
+                              onChange={(e) => setEditValue(e.target.value)}
+                              onKeyDown={handleKeyDown}
+                              placeholder="Enter nickname..."
+                              maxLength={32}
+                              autoFocus
+                              disabled={saving}
+                            />
+                            <button
+                              className="mc-btn green nick-btn"
+                              onClick={saveNickname}
+                              disabled={saving}
+                            >
+                              ✓
+                            </button>
+                            <button
+                              className="mc-btn nick-btn"
+                              onClick={() => { setEditingDropper(null); setEditValue(''); }}
+                              disabled={saving}
+                            >
+                              ✕
+                            </button>
+                          </>
+                        ) : (
+                          <>
+                            <button
+                              className="mc-btn nick-btn"
+                              onClick={() => startEditing(d.name)}
+                              title="Edit nickname"
+                            >
+                              ✏️
+                            </button>
+                            {nickname && (
+                              <button
+                                className="mc-btn red nick-btn"
+                                onClick={() => removeNickname(d.name)}
+                                title="Remove nickname"
+                                disabled={saving}
+                              >
+                                🗑️
+                              </button>
+                            )}
+                          </>
+                        )}
+                      </div>
+                    </div>
+                  );
+                })}
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default SettingsPanel;

web/client/src/store/inventoryStore.js

@@ -27,6 +27,7 @@ function _applyStateData(data, current) {
     craftable: data.craftable || current.craftable,
     craftTurtleOk: data.craftTurtleOk !== undefined ? data.craftTurtleOk : current.craftTurtleOk,
     bridgeConnected: data.bridgeConnected !== undefined ? data.bridgeConnected : current.bridgeConnected,
+    dropperNicknames: data.dropperNicknames || current.dropperNicknames,
     lastUpdate: data.lastUpdate || Date.now(),
   };
 }
@@ -55,6 +56,7 @@ export const useInventoryStore = create((set, get) => ({
   craftable: [],
   craftTurtleOk: false,
   bridgeConnected: false,
+  dropperNicknames: {},
   connected: false,
   ws: null,
   lastUpdate: 0,
@@ -268,6 +270,36 @@ export const useInventoryStore = create((set, get) => ({
     }
   },
 
+  // Dropper nicknames
+  setDropperNickname: async (dropperName, nickname) => {
+    try {
+      const response = await fetch(`${API_URL}/dropper-nicknames`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ dropperName, nickname }),
+      });
+      const result = await response.json();
+      if (result.nicknames) {
+        set({ dropperNicknames: result.nicknames });
+      }
+      return result;
+    } catch (error) {
+      console.error('❌ Error setting dropper nickname:', error);
+      return { success: false, error: error.message };
+    }
+  },
+
+  fetchDropperNicknames: async () => {
+    try {
+      const response = await fetch(`${API_URL}/dropper-nicknames`);
+      if (!response.ok) return;
+      const data = await response.json();
+      set({ dropperNicknames: data.nicknames || {} });
+    } catch (error) {
+      console.error('❌ Error fetching dropper nicknames:', error);
+    }
+  },
+
   // Analytics - fetch aggregate storage history
   fetchHistorySummary: async () => {
     try {

web/server/server.js

@@ -7,7 +7,7 @@ import path from 'path';
 import { fileURLToPath } from 'url';
 import {
   loadFullState, saveFullState, recordItemHistory,
-  saveItems, saveFurnaces, saveAlerts, saveState,
+  saveItems, saveFurnaces, saveAlerts, saveState, loadState,
   getHistory, getHistorySummary, closeDb, flushPendingSave,
 } from './db.js';
 
@@ -38,6 +38,7 @@ let smeltableRecipes = persisted.smeltableRecipes;
 let craftableRecipes = persisted.craftableRecipes;
 let craftTurtleOk = persisted.craftTurtleOk;
 let lastUpdate = persisted.lastUpdate;
+let dropperNicknames = loadState('dropperNicknames', {});
 
 if (lastUpdate > 0) {
   const ago = Math.round((Date.now() - lastUpdate) / 1000);
@@ -210,6 +211,7 @@ app.get('/api/inventory', (req, res) => {
     craftTurtleOk,
     lastUpdate,
     bridgeConnected: bridgeClients.size > 0,
+    dropperNicknames,
   });
 });
 
@@ -281,6 +283,33 @@ app.post('/api/order', (req, res) => {
   }
 });
 
+// ========== Dropper Nicknames ==========
+
+// Get all dropper nicknames
+app.get('/api/dropper-nicknames', (req, res) => {
+  res.json({ nicknames: dropperNicknames });
+});
+
+// Set a single dropper nickname
+app.post('/api/dropper-nicknames', (req, res) => {
+  try {
+    const { dropperName, nickname } = req.body;
+    if (!dropperName) return res.status(400).json({ error: 'Missing dropperName' });
+    
+    if (nickname && nickname.trim()) {
+      dropperNicknames[dropperName] = nickname.trim();
+    } else {
+      delete dropperNicknames[dropperName];
+    }
+    
+    saveState('dropperNicknames', dropperNicknames);
+    console.log(`🏷️ Dropper nickname: ${dropperName} → ${nickname || '(removed)'}`);
+    res.json({ success: true, nicknames: dropperNicknames });
+  } catch (error) {
+    res.status(500).json({ error: error.message });
+  }
+});
+
 // Request inventory scan
 app.post('/api/scan', (req, res) => {
   try {
@@ -630,6 +659,7 @@ wss.on('connection', (ws, req) => {
     craftTurtleOk,
     lastUpdate,
     bridgeConnected: bridgeClients.size > 0,
+    dropperNicknames,
   }));
   
   ws.on('pong', () => { ws.isAlive = true; });