From bd2258499e4c1081de141a30dc5343cfbf77a24c Mon Sep 17 00:00:00 2001
From: MechaCat02 <MechaCat02@example.com>
Date: Wed, 27 May 2026 08:00:20 +0200
Subject: [PATCH] feat(dashboard): role-gated Users link and profile chip in
 nav

The header nav now shows a Users link only for owners/admins, and
the username block becomes a profile-link chip rendering the role
pill next to the name. Both react to the currentUser store, so they
update on login without an extra fetch.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 dashboard/src/routes/+layout.svelte | 24 ++++++++++++++++++++++--
 1 file changed, 22 insertions(+), 2 deletions(-)

diff --git a/dashboard/src/routes/+layout.svelte b/dashboard/src/routes/+layout.svelte
index 0b0db6f..61631a6 100644
--- a/dashboard/src/routes/+layout.svelte
+++ b/dashboard/src/routes/+layout.svelte
@@ -5,6 +5,7 @@
 	import { page } from '$app/state';
 	import { api } from '$lib/api';
 	import { currentUser, getToken } from '$lib/auth';
+	import RoleChip from '$lib/RoleChip.svelte';
 
 	let { children } = $props();
 
@@ -46,12 +47,17 @@
 		<a href={base + '/'} class="brand">PiCloud</a>
 		<nav>
 			<a href={base + '/apps'}>Apps</a>
-			<a href={base + '/admins'}>Admins</a>
+			{#if user && user.instance_role !== 'member'}
+				<a href={base + '/users'}>Users</a>
+			{/if}
 		</nav>
 		<div class="spacer"></div>
 		{#if user}
 			<div class="usermenu">
-				<span class="username">{user.username}</span>
+				<a href={base + '/profile'} class="profile-chip" title="View profile">
+					<RoleChip role={user.instance_role} size="sm" />
+					<span class="username">{user.username}</span>
+				</a>
 				<button type="button" class="logout" onclick={handleLogout}>Logout</button>
 			</div>
 		{/if}
@@ -121,6 +127,20 @@
 		font-size: 0.875rem;
 	}
 
+	.profile-chip {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.4rem;
+		padding: 0.25rem 0.55rem;
+		border-radius: 0.375rem;
+		text-decoration: none;
+		border: 1px solid transparent;
+	}
+	.profile-chip:hover {
+		background: #1e293b;
+		border-color: #334155;
+	}
+
 	.username {
 		color: #cbd5e1;
 	}