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>
This commit is contained in:
@@ -5,6 +5,7 @@
|
|||||||
import { page } from '$app/state';
|
import { page } from '$app/state';
|
||||||
import { api } from '$lib/api';
|
import { api } from '$lib/api';
|
||||||
import { currentUser, getToken } from '$lib/auth';
|
import { currentUser, getToken } from '$lib/auth';
|
||||||
|
import RoleChip from '$lib/RoleChip.svelte';
|
||||||
|
|
||||||
let { children } = $props();
|
let { children } = $props();
|
||||||
|
|
||||||
@@ -46,12 +47,17 @@
|
|||||||
<a href={base + '/'} class="brand">PiCloud</a>
|
<a href={base + '/'} class="brand">PiCloud</a>
|
||||||
<nav>
|
<nav>
|
||||||
<a href={base + '/apps'}>Apps</a>
|
<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>
|
</nav>
|
||||||
<div class="spacer"></div>
|
<div class="spacer"></div>
|
||||||
{#if user}
|
{#if user}
|
||||||
<div class="usermenu">
|
<div class="usermenu">
|
||||||
|
<a href={base + '/profile'} class="profile-chip" title="View profile">
|
||||||
|
<RoleChip role={user.instance_role} size="sm" />
|
||||||
<span class="username">{user.username}</span>
|
<span class="username">{user.username}</span>
|
||||||
|
</a>
|
||||||
<button type="button" class="logout" onclick={handleLogout}>Logout</button>
|
<button type="button" class="logout" onclick={handleLogout}>Logout</button>
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
@@ -121,6 +127,20 @@
|
|||||||
font-size: 0.875rem;
|
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 {
|
.username {
|
||||||
color: #cbd5e1;
|
color: #cbd5e1;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user