From 472979a91c5f876422c786f326209fc56403b63b Mon Sep 17 00:00:00 2001
From: rene <mail@motocamp.de>
Date: Wed, 20 May 2026 16:51:47 +0200
Subject: [PATCH] =?UTF-8?q?=C3=9Cbersicht:=20Vereins-Header=20mit=20Logo?=
 =?UTF-8?q?=20+=20n=C3=A4chste=20Termine=20statt=20redundanter=20Nav-Chips?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/src/routes/(app)/+page.svelte | 160 ++++++++++++++++++++++--------
 1 file changed, 117 insertions(+), 43 deletions(-)

diff --git a/app/src/routes/(app)/+page.svelte b/app/src/routes/(app)/+page.svelte
index a4bfea6..18d079c 100644
--- a/app/src/routes/(app)/+page.svelte
+++ b/app/src/routes/(app)/+page.svelte
@@ -1,70 +1,144 @@
 <script lang="ts">
 	import { pb } from '$lib/pb';
-	import Icon from '$lib/components/Icon.svelte';
+	import { onMount } from 'svelte';
+	import type { Verein, Termin } from '$lib/types';
 
-	const vereinsname = pb.authStore.record?.name ?? 'Dein Verein';
+	let verein   = $state<Verein | null>(null);
+	let termine  = $state<Termin[]>([]);
+	let loading  = $state(true);
+
+	onMount(async () => {
+		const vid = pb.authStore.record?.verein_id as string;
+		const now = new Date().toISOString();
+		[verein, termine] = await Promise.all([
+			pb.collection('vereine').getOne<Verein>(vid),
+			pb.collection('termine').getList<Termin>(1, 3, {
+				filter: `beginn >= "${now}"`,
+				sort: 'beginn',
+			}).then(r => r.items),
+		]);
+		loading = false;
+	});
+
+	function formatTermin(t: Termin): string {
+		const d = new Date(t.beginn);
+		return d.toLocaleDateString('de-DE', { weekday: 'short', day: '2-digit', month: 'long' })
+			+ ' · ' + d.toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' }) + ' Uhr'
+			+ (t.ort ? ' · ' + t.ort : '');
+	}
 </script>
 
 <svelte:head>
 	<title>Übersicht — vereins.haus</title>
 </svelte:head>
 
-<h1>Willkommen, {vereinsname}</h1>
+{#if !loading && verein}
+	<div class="verein-header">
+		<img src="/favicon.svg" alt="" class="verein-icon" />
+		<div>
+			<h1>{verein.name}</h1>
+			{#if verein.ort}
+				<span class="verein-ort">{verein.ort}</span>
+			{/if}
+		</div>
+	</div>
 
-<div class="cards">
-	<a href="/mitglieder" class="card">
-		<Icon name="users" size={40} />
-		<span class="card-label">Mitglieder</span>
-	</a>
-	<a href="/termine" class="card">
-		<Icon name="calendar" size={40} />
-		<span class="card-label">Termine</span>
-	</a>
-	<a href="/beitraege" class="card">
-		<Icon name="currency-eur" size={40} />
-		<span class="card-label">Beiträge</span>
-	</a>
-	<a href="/nachrichten" class="card">
-		<Icon name="envelope" size={40} />
-		<span class="card-label">Nachrichten</span>
-	</a>
-</div>
+	{#if termine.length > 0}
+		<section>
+			<h2>Nächste Termine</h2>
+			<ul>
+				{#each termine as t (t.id)}
+					<li>
+						<span class="termin-titel">{t.titel}</span>
+						<span class="termin-wann">{formatTermin(t)}</span>
+					</li>
+				{/each}
+			</ul>
+			<a href="/termine" class="alle-link">Alle Termine →</a>
+		</section>
+	{:else}
+		<p class="hint">Noch keine Termine geplant.</p>
+	{/if}
+{/if}
 
 <style>
-	h1 {
-		font-size: 1.4rem;
-		font-weight: 700;
-		color: #1e293b;
+	.verein-header {
+		display: flex;
+		align-items: center;
+		gap: 1rem;
+		padding: 1.25rem;
+		background: #0f172a;
+		border-radius: 14px;
 		margin-bottom: 1.5rem;
 	}
 
-	.cards {
-		display: grid;
-		grid-template-columns: 1fr 1fr;
-		gap: 0.75rem;
+	.verein-icon {
+		width: 52px;
+		height: 52px;
+		border-radius: 12px;
+		flex-shrink: 0;
 	}
 
-	.card {
+	h1 {
+		font-size: 1.15rem;
+		font-weight: 700;
+		color: #fff;
+		margin: 0;
+	}
+
+	.verein-ort {
+		font-size: 0.82rem;
+		color: #94a3b8;
+	}
+
+	section {
 		background: #fff;
-		border: 1.5px solid #e2e8f0;
+		border: 1px solid #e2e8f0;
 		border-radius: 12px;
-		padding: 1.5rem 1rem;
+		overflow: hidden;
+	}
+
+	h2 {
+		font-size: 0.72rem;
+		font-weight: 700;
+		color: #94a3b8;
+		text-transform: uppercase;
+		letter-spacing: 0.06em;
+		padding: 0.85rem 1rem 0.5rem;
+		margin: 0;
+	}
+
+	ul {
+		list-style: none;
+		padding: 0;
+		margin: 0;
+	}
+
+	li {
 		display: flex;
 		flex-direction: column;
-		align-items: center;
-		gap: 0.5rem;
+		gap: 0.15rem;
+		padding: 0.7rem 1rem;
+		border-top: 1px solid #f1f5f9;
+	}
+
+	.termin-titel { font-size: 0.92rem; font-weight: 600; color: #1e293b; }
+	.termin-wann  { font-size: 0.78rem; color: #64748b; }
+
+	.alle-link {
+		display: block;
+		padding: 0.7rem 1rem;
+		border-top: 1px solid #f1f5f9;
+		font-size: 0.85rem;
 		color: #1e40af;
-		transition: border-color .15s, box-shadow .15s;
+		text-decoration: none;
+		font-weight: 500;
 	}
 
-	.card:hover {
-		border-color: #1e40af;
-		box-shadow: 0 2px 8px rgba(30,64,175,.1);
-	}
-
-	.card-label {
+	.hint {
+		color: #94a3b8;
 		font-size: 0.9rem;
-		font-weight: 600;
-		color: #1e293b;
+		text-align: center;
+		margin-top: 2rem;
 	}
 </style>