From 3a2a4ec928c6ffa18ab2e45d61729a0cfbcbabe6 Mon Sep 17 00:00:00 2001
From: Alexander Bocken <alexander@bocken.org>
Date: Mon, 5 Jan 2026 22:54:20 +0100
Subject: [PATCH] feat: consolidate admin features into centralized
 administration page
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Created administration page at /{recipeLang}/administration accessible only to rezepte_users
- Moved alt-text generator from /admin to /{recipeLang}/admin/alt-text-generator
- Added "Administration" link to user profile dropdown for rezepte_users
- Removed "Unübersetzt" link from main navigation (now accessed via administration page)
- Administration page provides card-based UI with links to:
  - Untranslated Recipes management
  - AI Alt-Text Generator
- Both features now integrated into recipe language routing structure
- Added server-side authentication to all admin routes
---
 src/lib/components/UserHeader.svelte          |   5 +-
 .../[recipeLang=recipeLang]/+layout.svelte    |   2 +-
 .../admin/alt-text-generator/+page.server.ts  |  21 +++
 .../admin/alt-text-generator/+page.svelte     |   0
 .../administration/+page.server.ts            |  21 +++
 .../administration/+page.svelte               | 126 ++++++++++++++++++
 src/routes/rezepte/+layout.svelte             |   5 +-
 7 files changed, 174 insertions(+), 6 deletions(-)
 create mode 100644 src/routes/[recipeLang=recipeLang]/admin/alt-text-generator/+page.server.ts
 rename src/routes/{ => [recipeLang=recipeLang]}/admin/alt-text-generator/+page.svelte (100%)
 create mode 100644 src/routes/[recipeLang=recipeLang]/administration/+page.server.ts
 create mode 100644 src/routes/[recipeLang=recipeLang]/administration/+page.svelte

diff --git a/src/lib/components/UserHeader.svelte b/src/lib/components/UserHeader.svelte
index 9d6a633..a6edee3 100644
--- a/src/lib/components/UserHeader.svelte
+++ b/src/lib/components/UserHeader.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { onMount } from "svelte";
 
-	let { user } = $props();
+	let { user, recipeLang = 'rezepte', lang = 'de' } = $props();
 
 	function toggle_options(){
 		const el = document.querySelector("#options")
@@ -141,6 +141,9 @@ h2 + p{
 			<h2>{user.name}</h2>
 			<p>({user.nickname})</p>
 			<ul>
+				{#if user.groups?.includes('rezepte_users')}
+					<li><a href="/{recipeLang}/administration">Administration</a></li>
+				{/if}
 				<li><a href="https://sso.bocken.org/if/user/#/settings" >Einstellungen</a></li>
 				<li><a href="/logout" >Log Out</a></li>
 			</ul>
diff --git a/src/routes/[recipeLang=recipeLang]/+layout.svelte b/src/routes/[recipeLang=recipeLang]/+layout.svelte
index 59cfcf3..29b43a6 100644
--- a/src/routes/[recipeLang=recipeLang]/+layout.svelte
+++ b/src/routes/[recipeLang=recipeLang]/+layout.svelte
@@ -51,7 +51,7 @@ function isActive(path) {
 	{/snippet}
 
 	{#snippet right_side()}
-		<UserHeader {user}></UserHeader>
+		<UserHeader {user} recipeLang={data.recipeLang} lang={data.lang}></UserHeader>
 	{/snippet}
 
 	{@render children()}
diff --git a/src/routes/[recipeLang=recipeLang]/admin/alt-text-generator/+page.server.ts b/src/routes/[recipeLang=recipeLang]/admin/alt-text-generator/+page.server.ts
new file mode 100644
index 0000000..4f361ae
--- /dev/null
+++ b/src/routes/[recipeLang=recipeLang]/admin/alt-text-generator/+page.server.ts
@@ -0,0 +1,21 @@
+import type { PageServerLoad } from './$types';
+import { redirect, error } from '@sveltejs/kit';
+
+export const load: PageServerLoad = async ({ locals, url }) => {
+	const session = await locals.auth();
+
+	// Redirect to login if not authenticated
+	if (!session?.user?.nickname) {
+		const callbackUrl = encodeURIComponent(url.pathname);
+		throw redirect(302, `/login?callbackUrl=${callbackUrl}`);
+	}
+
+	// Check user group permission
+	if (!session.user.groups?.includes('rezepte_users')) {
+		throw error(403, 'Zugriff verweigert. Du hast keine Berechtigung für diesen Bereich.');
+	}
+
+	return {
+		user: session.user
+	};
+};
diff --git a/src/routes/admin/alt-text-generator/+page.svelte b/src/routes/[recipeLang=recipeLang]/admin/alt-text-generator/+page.svelte
similarity index 100%
rename from src/routes/admin/alt-text-generator/+page.svelte
rename to src/routes/[recipeLang=recipeLang]/admin/alt-text-generator/+page.svelte
diff --git a/src/routes/[recipeLang=recipeLang]/administration/+page.server.ts b/src/routes/[recipeLang=recipeLang]/administration/+page.server.ts
new file mode 100644
index 0000000..9b26628
--- /dev/null
+++ b/src/routes/[recipeLang=recipeLang]/administration/+page.server.ts
@@ -0,0 +1,21 @@
+import type { PageServerLoad } from './$types';
+import { redirect, error } from '@sveltejs/kit';
+
+export const load: PageServerLoad = async ({ locals, params, url }) => {
+	const session = await locals.auth();
+
+	// Redirect to login if not authenticated
+	if (!session?.user?.nickname) {
+		const callbackUrl = encodeURIComponent(url.pathname);
+		throw redirect(302, `/login?callbackUrl=${callbackUrl}`);
+	}
+
+	// Check user group permission
+	if (!session.user.groups?.includes('rezepte_users')) {
+		throw error(403, 'Zugriff verweigert. Du hast keine Berechtigung für diesen Bereich.');
+	}
+
+	return {
+		user: session.user
+	};
+};
diff --git a/src/routes/[recipeLang=recipeLang]/administration/+page.svelte b/src/routes/[recipeLang=recipeLang]/administration/+page.svelte
new file mode 100644
index 0000000..7ae45f5
--- /dev/null
+++ b/src/routes/[recipeLang=recipeLang]/administration/+page.svelte
@@ -0,0 +1,126 @@
+<script lang="ts">
+	import type { PageData } from './$types';
+	import '$lib/css/nordtheme.css';
+
+	let { data }: { data: PageData } = $props();
+
+	const isEnglish = data.lang === 'en';
+	const pageTitle = isEnglish ? 'Administration' : 'Administration';
+	const pageDescription = isEnglish
+		? 'Manage recipes and content'
+		: 'Rezepte und Inhalte verwalten';
+
+	const links = [
+		{
+			title: isEnglish ? 'Untranslated Recipes' : 'Unübersetzte Rezepte',
+			description: isEnglish
+				? 'View and manage recipes that need translation'
+				: 'Rezepte ansehen und verwalten, die übersetzt werden müssen',
+			href: '/rezepte/untranslated',
+			icon: '🌐'
+		},
+		{
+			title: isEnglish ? 'Alt-Text Generator' : 'Alt-Text Generator',
+			description: isEnglish
+				? 'Generate alternative text for recipe images using AI'
+				: 'Alternativtext für Rezeptbilder mit KI generieren',
+			href: `/${data.recipeLang}/admin/alt-text-generator`,
+			icon: '🖼️'
+		}
+	];
+</script>
+
+<style>
+h1 {
+	text-align: center;
+	margin-bottom: 0;
+	font-size: 4rem;
+}
+.subheading {
+	text-align: center;
+	margin-top: 0;
+	font-size: 1.5rem;
+	color: var(--nord3);
+}
+.admin-container {
+	max-width: 1000px;
+	margin: 2rem auto;
+	padding: 1.5rem;
+}
+.admin-grid {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+	gap: 2rem;
+	margin-top: 2rem;
+}
+.admin-card {
+	background: var(--nord1);
+	border-radius: 8px;
+	padding: 2rem;
+	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+	transition: transform 200ms, box-shadow 200ms;
+	text-decoration: none;
+	color: inherit;
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
+}
+.admin-card:hover,
+.admin-card:focus {
+	transform: translateY(-4px);
+	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+	background: hsl(from var(--nord1) h calc(s * 1.1) calc(l * 1.05));
+}
+.admin-card-icon {
+	font-size: 3rem;
+	text-align: center;
+}
+.admin-card-title {
+	font-size: 1.5rem;
+	font-weight: bold;
+	margin: 0;
+	text-align: center;
+}
+.admin-card-description {
+	font-size: 1rem;
+	color: var(--nord4);
+	text-align: center;
+	margin: 0;
+}
+@media(prefers-color-scheme: light) {
+	.admin-card {
+		background: var(--nord6);
+		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+	}
+	.admin-card:hover,
+	.admin-card:focus {
+		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+		background: hsl(from var(--nord6) h calc(s * 1.1) calc(l * 0.98));
+	}
+	.admin-card-description {
+		color: var(--nord2);
+	}
+	.subheading {
+		color: var(--nord2);
+	}
+}
+</style>
+
+<svelte:head>
+	<title>{pageTitle}</title>
+</svelte:head>
+
+<h1>{pageTitle}</h1>
+<p class="subheading">{pageDescription}</p>
+
+<div class="admin-container">
+	<div class="admin-grid">
+		{#each links as link (link.href)}
+			<a href={link.href} class="admin-card">
+				<div class="admin-card-icon">{link.icon}</div>
+				<h2 class="admin-card-title">{link.title}</h2>
+				<p class="admin-card-description">{link.description}</p>
+			</a>
+		{/each}
+	</div>
+</div>
diff --git a/src/routes/rezepte/+layout.svelte b/src/routes/rezepte/+layout.svelte
index acf09e9..dde6a4b 100644
--- a/src/routes/rezepte/+layout.svelte
+++ b/src/routes/rezepte/+layout.svelte
@@ -24,9 +24,6 @@
 			<li><a href="/rezepte/category" class:active={isActive('/rezepte/category')}>Kategorie</a></li>
 			<li><a href="/rezepte/icon" class:active={isActive('/rezepte/icon')}>Icon</a></li>
 			<li><a href="/rezepte/tag" class:active={isActive('/rezepte/tag')}>Tags</a></li>
-			{#if user?.groups?.includes('rezepte_users')}
-				<li><a href="/rezepte/untranslated" class:active={isActive('/rezepte/untranslated')}>Unübersetzt</a></li>
-			{/if}
 		</ul>
 	{/snippet}
 
@@ -39,7 +36,7 @@
 	{/snippet}
 
 	{#snippet right_side()}
-		<UserHeader {user}></UserHeader>
+		<UserHeader {user} recipeLang="rezepte" lang="de"></UserHeader>
 	{/snippet}
 
 	{@render children()}