From c089d9e42966f7bbd8e84a4a6d75602ff310f746 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=B6rg=20Lohrer?= <info.empeiria@gmail.com>
Date: Wed, 15 Apr 2026 17:44:02 +0200
Subject: [PATCH] spa(phase 4, tasks 23-25): tag-navigation
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- loadPostsByTag(tagName): client-seitige Filterung der Post-Liste
  (case-insensitive). #t-Filter wird nicht von allen Relays zuverlässig
  unterstützt — wir laden alles und filtern lokal.
- /tag/[name]/+page.ts+svelte: neue Tag-Route, Breadcrumb zurück zur
  Übersicht, #tagName als H1, dieselbe PostCard-Darstellung wie Home.
- Tag-Chips in PostView sind bereits klickbar (aus Task 21).

npm run check: 0 errors. Deploy live auf svelte.joerg-lohrer.de.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 app/src/lib/nostr/loaders.ts           | 13 ++++++
 app/src/routes/tag/[name]/+page.svelte | 59 ++++++++++++++++++++++++++
 app/src/routes/tag/[name]/+page.ts     |  5 +++
 3 files changed, 77 insertions(+)
 create mode 100644 app/src/routes/tag/[name]/+page.svelte
 create mode 100644 app/src/routes/tag/[name]/+page.ts

diff --git a/app/src/lib/nostr/loaders.ts b/app/src/lib/nostr/loaders.ts
index c77f446..19cbb67 100644
--- a/app/src/lib/nostr/loaders.ts
+++ b/app/src/lib/nostr/loaders.ts
@@ -145,6 +145,19 @@ export async function loadReplies(
   return events.sort((a, b) => a.created_at - b.created_at);
 }
 
+/**
+ * Filtert Post-Liste clientseitig nach Tag-Name.
+ * (Relay-seitige #t-Filter werden nicht von allen Relays unterstützt — safer
+ * ist es, die ganze Liste zu laden und lokal zu filtern.)
+ */
+export async function loadPostsByTag(tagName: string): Promise<NostrEvent[]> {
+  const all = await loadPostList();
+  const norm = tagName.toLowerCase();
+  return all.filter((ev) =>
+    ev.tags.some((t) => t[0] === 't' && t[1]?.toLowerCase() === norm)
+  );
+}
+
 export interface ReactionSummary {
   /** Emoji oder "+"/"-" */
   content: string;
diff --git a/app/src/routes/tag/[name]/+page.svelte b/app/src/routes/tag/[name]/+page.svelte
new file mode 100644
index 0000000..c327d88
--- /dev/null
+++ b/app/src/routes/tag/[name]/+page.svelte
@@ -0,0 +1,59 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import type { NostrEvent } from '$lib/nostr/loaders';
+	import { loadPostsByTag } from '$lib/nostr/loaders';
+	import PostCard from '$lib/components/PostCard.svelte';
+	import LoadingOrError from '$lib/components/LoadingOrError.svelte';
+
+	let { data } = $props();
+	const tagName = $derived(data.tagName);
+
+	let posts: NostrEvent[] = $state([]);
+	let loading = $state(true);
+	let error: string | null = $state(null);
+
+	onMount(async () => {
+		try {
+			posts = await loadPostsByTag(tagName);
+			loading = false;
+			if (posts.length === 0) {
+				error = `Keine Posts mit Tag "${tagName}" gefunden.`;
+			}
+		} catch (e) {
+			loading = false;
+			error = e instanceof Error ? e.message : 'Unbekannter Fehler';
+		}
+	});
+
+	$effect(() => {
+		document.title = `#${tagName} – Jörg Lohrer`;
+	});
+</script>
+
+<nav class="breadcrumb"><a href="/">← Zurück zur Übersicht</a></nav>
+
+<h1 class="tag-title">#{tagName}</h1>
+
+<LoadingOrError {loading} {error} />
+
+{#each posts as post (post.id)}
+	<PostCard event={post} />
+{/each}
+
+<style>
+	.breadcrumb {
+		font-size: 0.9rem;
+		margin-bottom: 1rem;
+	}
+	.breadcrumb a {
+		color: var(--accent);
+		text-decoration: none;
+	}
+	.breadcrumb a:hover {
+		text-decoration: underline;
+	}
+	.tag-title {
+		margin: 0 0 1.5rem;
+		font-size: 1.6rem;
+	}
+</style>
diff --git a/app/src/routes/tag/[name]/+page.ts b/app/src/routes/tag/[name]/+page.ts
new file mode 100644
index 0000000..0f2397e
--- /dev/null
+++ b/app/src/routes/tag/[name]/+page.ts
@@ -0,0 +1,5 @@
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = async ({ params }) => {
+	return { tagName: decodeURIComponent(params.name) };
+};