feat(web): add inventory page with grid, detail panel, and equipment overview

apps/web/src/app/features/inventory/inventory-page.component.ts

@@ -0,0 +1,69 @@
+import { Component, OnInit, computed, inject } from '@angular/core';
+import type { EquipmentSlot } from '../../core/api/game-api.models';
+import { ItemCardComponent } from '../../shared/item-card/item-card.component';
+import { WorldStore } from '../world/world.store';
+import { InventoryDetailPanelComponent } from './inventory-detail-panel.component';
+import { InventoryStore } from './inventory.store';
+
+const SLOT_ORDER: readonly EquipmentSlot[] = [
+  'WEAPON',
+  'HEAD',
+  'CHEST',
+  'HANDS',
+  'LEGS',
+  'FEET',
+  'AMULET',
+];
+
+const SLOT_LABELS: Readonly<Record<EquipmentSlot, string>> = {
+  WEAPON: 'Waffe',
+  HEAD: 'Kopf',
+  CHEST: 'Brust',
+  HANDS: 'Handschuhe',
+  LEGS: 'Beine',
+  FEET: 'Stiefel',
+  AMULET: 'Amulett',
+};
+
+@Component({
+  selector: 'app-inventory-page',
+  imports: [ItemCardComponent, InventoryDetailPanelComponent],
+  templateUrl: './inventory-page.component.html',
+  styleUrl: './inventory-page.component.scss',
+})
+export class InventoryPageComponent implements OnInit {
+  protected readonly inventoryStore = inject(InventoryStore);
+  private readonly worldStore = inject(WorldStore);
+  protected readonly slotOrder = SLOT_ORDER;
+  protected readonly slotLabels = SLOT_LABELS;
+
+  protected readonly characterLevel = computed(() => this.worldStore.character()?.level ?? 1);
+
+  protected readonly equippedItemInSelectedSlot = computed(() => {
+    const selected = this.inventoryStore.selectedItem();
+    if (!selected?.item.equipmentSlot) {
+      return null;
+    }
+    return (
+      this.inventoryStore.inventory()?.items.find(
+        (item) => item.equipped && item.item.equipmentSlot === selected.item.equipmentSlot,
+      ) ?? null
+    );
+  });
+
+  ngOnInit(): void {
+    void this.inventoryStore.load();
+  }
+
+  protected selectItem(itemId: string): void {
+    this.inventoryStore.selectItem(itemId);
+  }
+
+  protected async equipSelected(characterItemId: string): Promise<void> {
+    await this.inventoryStore.equip(characterItemId);
+  }
+
+  protected retry(): void {
+    void this.inventoryStore.load();
+  }
+}