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/InventoryGrid.css

@@ -70,6 +70,72 @@
   white-space: nowrap;
 }
 
+/* ===== Creative Inventory Category Tabs ===== */
+.category-tabs {
+  display: flex;
+  gap: 2px;
+  padding: 0 0.5rem;
+  background: #2c2c2c;
+  border-bottom: 3px solid var(--mc-inv-slot-border);
+  flex-shrink: 0;
+  overflow-x: auto;
+}
+
+.category-tab {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 6px 10px;
+  background: #4a4a4a;
+  border: 2px solid transparent;
+  border-bottom: none;
+  border-radius: 0;
+  cursor: pointer;
+  font-family: 'Silkscreen', 'Courier New', monospace;
+  font-size: 0.6rem;
+  color: var(--mc-text-gray);
+  font-weight: 700;
+  text-shadow: 1px 1px 0 var(--mc-dark);
+  transition: background 0.05s;
+  white-space: nowrap;
+  position: relative;
+  top: 3px;
+}
+
+.category-tab:hover {
+  background: #5a5a5a;
+  color: var(--mc-text-white);
+}
+
+.category-tab.active {
+  background: var(--mc-inv-bg);
+  color: var(--mc-text-dark);
+  border-color: var(--mc-inv-slot-border);
+  text-shadow: none;
+  z-index: 1;
+}
+
+.category-label {
+  display: none;
+}
+
+.category-count {
+  font-size: 0.5rem;
+  color: var(--mc-text-gray);
+  opacity: 0.7;
+}
+
+.category-tab.active .category-count {
+  color: var(--mc-text-dark);
+  opacity: 0.6;
+}
+
+@media (min-width: 900px) {
+  .category-label {
+    display: inline;
+  }
+}
+
 /* Body */
 .inventory-body {
   flex: 1;
@@ -86,9 +152,9 @@
 
 .item-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
-  gap: 3px;
-  padding: 8px;
+  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
+  gap: 2px;
+  padding: 6px;
   background: var(--mc-inv-bg);
   border: 3px solid var(--mc-dark);
   box-shadow:
@@ -100,7 +166,6 @@
 .item-slot {
   aspect-ratio: 1;
   display: flex;
-  flex-direction: column;
   align-items: center;
   justify-content: center;
   background: var(--mc-inv-slot);
@@ -108,24 +173,33 @@
   border-color: var(--mc-inv-slot-border) var(--mc-inv-slot-light) var(--mc-inv-slot-light) var(--mc-inv-slot-border);
   cursor: pointer;
   position: relative;
-  overflow: hidden;
-  padding: 4px;
+  overflow: visible;
+  padding: 2px;
   transition: background 0.05s;
 }
 
 .item-slot:hover {
   background: #aaa;
+  z-index: 10;
 }
 
 .item-slot.selected {
   background: #b8d4f0;
   box-shadow: 0 0 0 2px var(--mc-text-aqua);
+  z-index: 10;
+}
+
+.item-slot .item-icon-img,
+.item-slot .item-icon-emoji {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
 }
 
 .item-slot-count {
   position: absolute;
-  bottom: 2px;
-  right: 3px;
+  bottom: 1px;
+  right: 2px;
   color: white;
   font-size: 0.55rem;
   font-weight: 700;
@@ -135,21 +209,56 @@
     -1px 0 0 var(--mc-dark),
     0 1px 0 var(--mc-dark),
     0 -1px 0 var(--mc-dark);
+  pointer-events: none;
+  z-index: 2;
 }
 
-.item-slot-name {
+/* ===== Minecraft-Style Tooltip ===== */
+.mc-tooltip {
+  visibility: hidden;
+  opacity: 0;
   position: absolute;
-  top: 1px;
-  left: 2px;
-  right: 2px;
-  font-size: 0.35rem;
-  color: var(--mc-text-dark);
-  font-weight: 700;
-  text-align: center;
-  line-height: 1.1;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  bottom: calc(100% + 6px);
+  left: 50%;
+  transform: translateX(-50%);
+  background: #100010f0;
+  padding: 5px 8px;
+  pointer-events: none;
+  z-index: 100;
   white-space: nowrap;
+  border: 1px solid #100010;
+  box-shadow:
+    inset 0 1px 0 0 #5000ff50,
+    inset 1px 0 0 0 #5000ff50,
+    inset -1px 0 0 0 #28007f50,
+    inset 0 -1px 0 0 #28007f50,
+    0 0 0 1px #100010;
+  transition: opacity 0.1s;
+}
+
+.item-slot:hover .mc-tooltip {
+  visibility: visible;
+  opacity: 1;
+}
+
+.mc-tooltip-name {
+  color: #fff;
+  font-size: 0.65rem;
+  font-weight: 700;
+  text-shadow: 1px 1px 0 #3e3e3e;
+  font-family: 'Silkscreen', 'Courier New', monospace;
+}
+
+.mc-tooltip-count {
+  color: #aaa;
+  font-size: 0.55rem;
+  font-family: 'Silkscreen', 'Courier New', monospace;
+}
+
+.mc-tooltip-id {
+  color: #555;
+  font-size: 0.45rem;
+  font-family: 'Silkscreen', 'Courier New', monospace;
 }
 
 .empty-grid {
@@ -311,14 +420,22 @@
   }
 
   .item-grid {
-    grid-template-columns: repeat(auto-fill, minmax(65px, 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
   }
 }
 
 @media (max-width: 480px) {
   .item-grid {
-    grid-template-columns: repeat(auto-fill, minmax(55px, 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
     gap: 2px;
     padding: 4px;
   }
+
+  .category-tabs {
+    padding: 0 0.25rem;
+  }
+
+  .category-tab {
+    padding: 4px 6px;
+  }
 }