From 4757be71a3799bdc704731a405ed0140572386f9 Mon Sep 17 00:00:00 2001
From: MechaCat02 <fabian@diekaulbachs.de>
Date: Fri, 3 Apr 2026 20:08:37 +0200
Subject: [PATCH] feat: role-aware nav icons across feed, host, and admin pages
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Feed: shows star icon (→ /host) for host/admin, shield icon (→ /admin)
for admin only, alongside the existing account icon.
Host: shows shield icon (→ /admin) for admin only next to "Zur Galerie".
Admin: replaces "Host-Dashboard" text link with star icon (→ /host).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/routes/admin/+page.svelte |  6 +++++-
 frontend/src/routes/feed/+page.svelte  | 21 +++++++++++++++++++--
 frontend/src/routes/host/+page.svelte  | 11 ++++++++++-
 3 files changed, 34 insertions(+), 4 deletions(-)

diff --git a/frontend/src/routes/admin/+page.svelte b/frontend/src/routes/admin/+page.svelte
index 2ffcb6d..3e483a1 100644
--- a/frontend/src/routes/admin/+page.svelte
+++ b/frontend/src/routes/admin/+page.svelte
@@ -158,7 +158,11 @@
 		<div class="mx-auto flex max-w-3xl items-center justify-between px-4 py-4">
 			<h1 class="text-xl font-bold text-gray-900">Admin Dashboard</h1>
 			<div class="flex items-center gap-3">
-				<a href="/host" class="text-sm text-blue-600 hover:underline">Host-Dashboard</a>
+				<a href="/host" class="text-gray-400 hover:text-gray-600" aria-label="Host Dashboard">
+					<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
+						<path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z" />
+					</svg>
+				</a>
 				<a href="/feed" class="text-sm text-gray-500 hover:text-gray-700">Galerie</a>
 			</div>
 		</div>
diff --git a/frontend/src/routes/feed/+page.svelte b/frontend/src/routes/feed/+page.svelte
index f5f05da..1f9713a 100644
--- a/frontend/src/routes/feed/+page.svelte
+++ b/frontend/src/routes/feed/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
-	import { getToken } from '$lib/auth';
+	import { getToken, getRole } from '$lib/auth';
 	import { api } from '$lib/api';
 	import { connectSse, disconnectSse, onSseEvent } from '$lib/sse';
 	import { onMount, onDestroy } from 'svelte';
@@ -18,6 +18,7 @@
 	let selectedUpload = $state<FeedUpload | null>(null);
 	let sentinel: HTMLDivElement;
 
+	const role = getRole();
 	let unsubscribers: (() => void)[] = [];
 
 	onMount(async () => {
@@ -168,9 +169,25 @@
 				>
 					Hochladen
 				</a>
+				{#if role === 'host' || role === 'admin'}
+					<a href="/host" class="text-gray-400 hover:text-gray-600" aria-label="Host Dashboard">
+						<!-- star icon -->
+						<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
+							<path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z" />
+						</svg>
+					</a>
+				{/if}
+				{#if role === 'admin'}
+					<a href="/admin" class="text-gray-400 hover:text-gray-600" aria-label="Admin Dashboard">
+						<!-- shield icon -->
+						<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
+							<path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75m-3-7.036A11.959 11.959 0 0 1 3.598 6 11.99 11.99 0 0 0 3 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285Z" />
+						</svg>
+					</a>
+				{/if}
 				<a
 					href="/account"
-					class="text-sm text-gray-500 hover:text-gray-700"
+					class="text-gray-400 hover:text-gray-600"
 					aria-label="Mein Konto"
 				>
 					<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
diff --git a/frontend/src/routes/host/+page.svelte b/frontend/src/routes/host/+page.svelte
index 3d63a6a..d7aaa5f 100644
--- a/frontend/src/routes/host/+page.svelte
+++ b/frontend/src/routes/host/+page.svelte
@@ -202,7 +202,16 @@
 					<p class="text-sm text-gray-500">{event.name}</p>
 				{/if}
 			</div>
-			<a href="/feed" class="text-sm text-blue-600 hover:underline">Zur Galerie</a>
+			<div class="flex items-center gap-3">
+				{#if myRole === 'admin'}
+					<a href="/admin" class="text-gray-400 hover:text-gray-600" aria-label="Admin Dashboard">
+						<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
+							<path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75m-3-7.036A11.959 11.959 0 0 1 3.598 6 11.99 11.99 0 0 0 3 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285Z" />
+						</svg>
+					</a>
+				{/if}
+				<a href="/feed" class="text-sm text-blue-600 hover:underline">Zur Galerie</a>
+			</div>
 		</div>
 	</div>