Add main application component with inventory management panels and connection status

2026-03-21 16:43:44 -04:00
parent cf83e9ef35
commit 31ac11038e
1 changed files with 91 additions and 0 deletions
--- a/web/client/src/App.jsx
+++ b/web/client/src/App.jsx
@@ -0,0 +1,91 @@
+import React, { useEffect, useState } from 'react';
+import InventoryGrid from './components/InventoryGrid';
+import StorageOverview from './components/StorageOverview';
+import SmeltingPanel from './components/SmeltingPanel';
+import CraftingPanel from './components/CraftingPanel';
+import AlertsPanel from './components/AlertsPanel';
+import { useInventoryStore } from './store/inventoryStore';
+import './App.css';
+
+function App() {
+  const connect = useInventoryStore((state) => state.connect);
+  const connected = useInventoryStore((state) => state.connected);
+  const commandResult = useInventoryStore((state) => state.commandResult);
+  const [panelTab, setPanelTab] = useState('inventory');
+
+  useEffect(() => {
+    connect();
+  }, [connect]);
+
+  const renderPanelContent = () => {
+    switch (panelTab) {
+      case 'inventory':
+        return <InventoryGrid />;
+      case 'smelting':
+        return <SmeltingPanel />;
+      case 'crafting':
+        return <CraftingPanel />;
+      case 'alerts':
+        return <AlertsPanel />;
+      default:
+        return <InventoryGrid />;
+    }
+  };
+
+  return (
+    <div className="app">
+      <div className="app-header">
+        <h1>⛏️ Inventory Manager</h1>
+        <div className={`connection-status ${connected ? 'connected' : 'disconnected'}`}>
+          <span className="status-dot"></span>
+          {connected ? 'Connected' : 'Disconnected'}
+        </div>
+      </div>
+
+      {commandResult && (
+        <div className={`command-toast ${commandResult.success ? 'success' : 'error'}`}>
+          {commandResult.message || commandResult.error || (commandResult.success ? 'OK' : 'Failed')}
+        </div>
+      )}
+
+      <div className="app-content">
+        <div className="sidebar">
+          <StorageOverview />
+        </div>
+        <div className="main-panel">
+          <div className="panel-tabs">
+            <button
+              className={panelTab === 'inventory' ? 'active' : ''}
+              onClick={() => setPanelTab('inventory')}
+            >
+              📦 Inventory
+            </button>
+            <button
+              className={panelTab === 'smelting' ? 'active' : ''}
+              onClick={() => setPanelTab('smelting')}
+            >
+              🔥 Smelting
+            </button>
+            <button
+              className={panelTab === 'crafting' ? 'active' : ''}
+              onClick={() => setPanelTab('crafting')}
+            >
+              🔨 Crafting
+            </button>
+            <button
+              className={panelTab === 'alerts' ? 'active' : ''}
+              onClick={() => setPanelTab('alerts')}
+            >
+              🔔 Alerts
+            </button>
+          </div>
+          <div className="panel-content-wrapper">
+            {renderPanelContent()}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default App;