Major UI overhaul: bigger icons, creative inventory tabs, grouped smelting, alerts popup, analytics, mod icons

- Inventory: Bigger item icons (48px) filling their slots, MC-style hover tooltips
- Creative inventory category tabs (All/Blocks/Tools/Combat/Food/Redstone/Materials/Misc)
- Smelting recipes grouped by output item with collapsible sections
- Alerts moved from full tab to popup overlay triggered from header bell icon
- New Analytics tab with SVG charts (storage over time, top items, item trend lookup)
- Mod icon support for ComputerCraft (CC:Tweaked) via GitHub CDN fallback
- Server: new /api/history-summary endpoint for aggregate storage history
- Store: fetchHistorySummary and fetchItemHistory for analytics data

web/client/src/components/AlertsPanel.css

@@ -1,24 +1,71 @@
-.alerts-panel {
-  height: 100%;
-  overflow-y: auto;
-  padding: 0.75rem;
+/* ===== Alerts Popup Overlay ===== */
+.alerts-overlay {
+  position: fixed;
+  top: 50px;
+  right: 16px;
+  z-index: 1000;
+  animation: alerts-slide-in 0.15s ease;
+}
+
+@keyframes alerts-slide-in {
+  from { opacity: 0; transform: translateY(-8px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.alerts-popup {
+  width: 340px;
+  max-height: 400px;
+  background: #333;
+  border: 3px solid var(--mc-dark);
+  box-shadow:
+    0 8px 24px rgba(0, 0, 0, 0.6),
+    inset 0 2px 0 #555,
+    inset 0 -2px 0 #2a2a2a;
   display: flex;
   flex-direction: column;
-  gap: 0.75rem;
 }
 
-.alerts-header {
+.alerts-popup-header {
   display: flex;
-  justify-content: space-between;
   align-items: center;
-  padding-bottom: 0.5rem;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  background: #3b3b3b;
   border-bottom: 2px solid var(--mc-dark);
+  flex-shrink: 0;
 }
 
-.alerts-header h2 {
-  font-size: 1rem;
+.alerts-popup-header h3 {
+  font-size: 0.75rem;
   color: var(--mc-text-yellow);
-  text-shadow: 2px 2px 0 var(--mc-dark);
+  text-shadow: 1px 1px 0 var(--mc-dark);
+  flex: 1;
+  font-family: 'Silkscreen', 'Courier New', monospace;
+}
+
+.alerts-close {
+  background: none;
+  border: 2px solid #555;
+  color: var(--mc-text-gray);
+  cursor: pointer;
+  font-size: 0.7rem;
+  width: 1.3rem;
+  height: 1.3rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: 'Silkscreen', 'Courier New', monospace;
+}
+
+.alerts-close:hover {
+  color: var(--mc-text-red);
+  border-color: var(--mc-text-red);
+}
+
+.alerts-popup-body {
+  overflow-y: auto;
+  max-height: 330px;
+  padding: 0.5rem;
 }
 
 .alert-count {