feat(web): add inventory item detail/comparison panel

apps/web/src/app/features/inventory/inventory-detail-panel.component.html

@@ -0,0 +1,60 @@
+@if (item(); as item) {
+  <article class="inventory-detail" aria-label="Gegenstandsdetails">
+    <div class="inventory-detail__header">
+      <img class="inventory-detail__icon" [src]="item.item.iconPath" [alt]="item.item.name" />
+      <div>
+        <h2 class="inventory-detail__name" data-detail-name>{{ item.item.name }}</h2>
+        <p class="inventory-detail__rarity" data-detail-rarity>{{ rarityLabel() }}</p>
+        @if (slotLabel(); as slot) {
+          <p class="inventory-detail__meta">{{ slot }} · Stufe {{ item.item.requiredLevel }}</p>
+        }
+      </div>
+    </div>
+
+    @if (statRows().length) {
+      <dl class="inventory-detail__stats" data-detail-stats>
+        @for (row of statRows(); track row.label) {
+          <div class="inventory-detail__stat">
+            <dt>{{ row.label }}</dt>
+            <dd>
+              {{ row.value }}
+              @if (row.diff !== null && row.diff !== 0) {
+                <span
+                  class="inventory-detail__diff"
+                  [class.inventory-detail__diff--positive]="row.diff > 0"
+                  [class.inventory-detail__diff--negative]="row.diff < 0"
+                >
+                  ({{ row.diff > 0 ? '+' : '' }}{{ row.diff }})
+                </span>
+              }
+            </dd>
+          </div>
+        }
+      </dl>
+    }
+
+    <div class="inventory-detail__actions">
+      @if (item.equipped) {
+        <span class="inventory-detail__equipped" data-detail-equipped>Ausgerüstet</span>
+      } @else if (!isEquippable()) {
+        <span class="inventory-detail__note">Nicht ausrüstbar</span>
+      } @else if (!meetsLevelRequirement()) {
+        <button type="button" class="inventory-detail__equip" data-detail-equip disabled>
+          Benötigt Stufe {{ item.item.requiredLevel }}
+        </button>
+      } @else {
+        <button
+          type="button"
+          class="inventory-detail__equip"
+          data-detail-equip
+          [disabled]="busy()"
+          (click)="onEquip()"
+        >
+          Ausrüsten
+        </button>
+      }
+    </div>
+  </article>
+} @else {
+  <p class="inventory-detail__empty" data-detail-empty>Wähle einen Gegenstand aus deinem Inventar.</p>
+}