From 4a06213d0339662fafc1369f5e95ece62ac01cbf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=B6rg=20Lohrer?= <info.empeiria@gmail.com>
Date: Tue, 21 Apr 2026 12:49:59 +0200
Subject: [PATCH] feat(app): LanguageAvailability-komponente in PostView
 eingebunden

---
 .../components/LanguageAvailability.svelte    | 51 +++++++++++++++++++
 app/src/lib/components/PostView.svelte        |  3 ++
 2 files changed, 54 insertions(+)
 create mode 100644 app/src/lib/components/LanguageAvailability.svelte

diff --git a/app/src/lib/components/LanguageAvailability.svelte b/app/src/lib/components/LanguageAvailability.svelte
new file mode 100644
index 0000000..ee21ccb
--- /dev/null
+++ b/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>
diff --git a/app/src/lib/components/PostView.svelte b/app/src/lib/components/PostView.svelte
index b28918b..4ec2be3 100644
--- a/app/src/lib/components/PostView.svelte
+++ b/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}