feat: role-aware nav icons across feed, host, and admin pages

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>
This commit is contained in:
MechaCat02
2026-04-03 20:08:37 +02:00
parent d0a199e9b5
commit 4757be71a3
3 changed files with 34 additions and 4 deletions

View File

@@ -158,7 +158,11 @@
<div class="mx-auto flex max-w-3xl items-center justify-between px-4 py-4"> <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> <h1 class="text-xl font-bold text-gray-900">Admin Dashboard</h1>
<div class="flex items-center gap-3"> <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> <a href="/feed" class="text-sm text-gray-500 hover:text-gray-700">Galerie</a>
</div> </div>
</div> </div>

View File

@@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
import { goto } from '$app/navigation'; import { goto } from '$app/navigation';
import { getToken } from '$lib/auth'; import { getToken, getRole } from '$lib/auth';
import { api } from '$lib/api'; import { api } from '$lib/api';
import { connectSse, disconnectSse, onSseEvent } from '$lib/sse'; import { connectSse, disconnectSse, onSseEvent } from '$lib/sse';
import { onMount, onDestroy } from 'svelte'; import { onMount, onDestroy } from 'svelte';
@@ -18,6 +18,7 @@
let selectedUpload = $state<FeedUpload | null>(null); let selectedUpload = $state<FeedUpload | null>(null);
let sentinel: HTMLDivElement; let sentinel: HTMLDivElement;
const role = getRole();
let unsubscribers: (() => void)[] = []; let unsubscribers: (() => void)[] = [];
onMount(async () => { onMount(async () => {
@@ -168,9 +169,25 @@
> >
Hochladen Hochladen
</a> </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 <a
href="/account" href="/account"
class="text-sm text-gray-500 hover:text-gray-700" class="text-gray-400 hover:text-gray-600"
aria-label="Mein Konto" 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"> <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">

View File

@@ -202,7 +202,16 @@
<p class="text-sm text-gray-500">{event.name}</p> <p class="text-sm text-gray-500">{event.name}</p>
{/if} {/if}
</div> </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>
</div> </div>