feat: render interactive ashen fields world

apps/web/src/app/layout/context-panel/context-panel.component.html

@@ -1,4 +1,37 @@
 <aside class="context-panel" aria-label="Gebietsinformationen">
-  <span class="context-panel__eyebrow">Gebiet</span>
-  <p class="context-panel__hint">Informationen erscheinen mit der Weltansicht.</p>
+  @if (worldStore.currentLocation(); as location) {
+    <span class="context-panel__eyebrow">GEBIETSINFO</span>
+    <h2>{{ location.name }}</h2>
+
+    @if (worldStore.selectedConnection(); as selected) {
+      <p class="context-panel__selection">Ausgewähltes Ziel: {{ selected.targetLocation.name }}</p>
+    }
+
+    <img
+      class="context-panel__artwork"
+      [src]="location.artworkPath"
+      [alt]="'Ortsansicht: ' + location.name"
+    />
+    <p class="context-panel__description">{{ location.description }}</p>
+
+    <dl class="context-panel__facts">
+      <div>
+        <dt>Empfohlene Stufe</dt>
+        <dd>{{ location.minRecommendedLevel }}–{{ location.maxRecommendedLevel }}</dd>
+      </div>
+      <div>
+        <dt>Sicherheit</dt>
+        <dd [class.context-panel__safe]="location.isSafe">
+          {{ location.isSafe ? 'Sicherer Ort' : 'Gefährliches Gebiet' }}
+        </dd>
+      </div>
+      <div>
+        <dt>Jagd</dt>
+        <dd>{{ location.huntingEnabled ? 'Jagd möglich' : 'Keine Jagd' }}</dd>
+      </div>
+    </dl>
+  } @else {
+    <span class="context-panel__eyebrow">GEBIETSINFO</span>
+    <p class="context-panel__hint">Informationen erscheinen mit der Weltansicht.</p>
+  }
 </aside>