feat(app): LanguageAvailability-komponente in PostView eingebunden

app/src/lib/components/LanguageAvailability.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+  import type { NostrEvent, TranslationInfo } from '$lib/nostr/loaders';
+  import { loadTranslations } from '$lib/nostr/loaders';
+  import { displayLanguage } from '$lib/nostr/languageNames';
+
+  interface Props {
+    event: NostrEvent;
+  }
+  let { event }: Props = $props();
+
+  let translations: TranslationInfo[] = $state([]);
+  let loading = $state(true);
+
+  $effect(() => {
+    const currentId = event.id;
+    loading = true;
+    translations = [];
+    loadTranslations(event)
+      .then((infos) => {
+        if (event.id !== currentId) return;
+        translations = infos;
+      })
+      .finally(() => {
+        if (event.id === currentId) loading = false;
+      });
+  });
+</script>
+
+{#if !loading && translations.length > 0}
+  <p class="availability">
+    Auch verfügbar in:
+    {#each translations as t, i}
+      <a href="/{t.slug}/" title={t.title}>{displayLanguage(t.lang)}</a>{#if i < translations.length - 1}, {/if}
+    {/each}
+  </p>
+{/if}
+
+<style>
+  .availability {
+    font-size: 0.88rem;
+    color: var(--muted);
+    margin: 0.25rem 0 1rem;
+  }
+  .availability a {
+    color: var(--accent);
+    text-decoration: none;
+  }
+  .availability a:hover {
+    text-decoration: underline;
+  }
+</style>

app/src/lib/components/PostView.svelte

@@ -6,6 +6,7 @@
 	import ReplyList from './ReplyList.svelte';
 	import ReplyComposer from './ReplyComposer.svelte';
 	import ExternalClientLinks from './ExternalClientLinks.svelte';
+	import LanguageAvailability from './LanguageAvailability.svelte';
 
 	interface Props {
 		event: NostrEvent;
@@ -60,6 +61,8 @@
 	{/if}
 </div>
 
+<LanguageAvailability {event} />
+
 {#if image}
 	<p class="cover"><img src={image} alt="Cover-Bild" /></p>
 {/if}