PiCloud/dashboard/src/lib/AppTabBar.svelte

<script lang="ts">
	import { base } from '$app/paths';

	interface Props {
		slug: string;
		canAdmin: boolean;
		/// One of: 'scripts' | 'domains' | 'members' | 'triggers' | 'topics' |
		/// 'secrets' | 'settings' | 'users' | 'files' | 'queues' | 'dead-letters'
		currentTab: string;
		unresolvedDeadLetters?: number;
	}

	let { slug, canAdmin, currentTab, unresolvedDeadLetters = 0 }: Props = $props();

	// Each tab is a link. In-page tabs (handled by the main app page's
	// $page query-param logic) go to `?tab=<id>`; route tabs go to their
	// own subpath. Layout puts this bar above every per-app page so
	// navigation never disappears mid-flow.
	interface Tab {
		id: string;
		label: string;
		href: string;
		adminOnly: boolean;
	}

	const tabs: Tab[] = $derived([
		{ id: 'scripts', label: 'Scripts', href: `${base}/apps/${slug}?tab=scripts`, adminOnly: false },
		{ id: 'domains', label: 'Domains', href: `${base}/apps/${slug}?tab=domains`, adminOnly: false },
		{ id: 'members', label: 'Members', href: `${base}/apps/${slug}?tab=members`, adminOnly: true },
		{ id: 'triggers', label: 'Triggers', href: `${base}/apps/${slug}?tab=triggers`, adminOnly: true },
		{ id: 'topics', label: 'Topics', href: `${base}/apps/${slug}?tab=topics`, adminOnly: true },
		{ id: 'secrets', label: 'Secrets', href: `${base}/apps/${slug}?tab=secrets`, adminOnly: true },
		{ id: 'users', label: 'Users', href: `${base}/apps/${slug}/users`, adminOnly: true },
		{ id: 'files', label: 'Files', href: `${base}/apps/${slug}/files`, adminOnly: true },
		{ id: 'queues', label: 'Queues', href: `${base}/apps/${slug}/queues`, adminOnly: true },
		{
			id: 'dead-letters',
			label: 'Dead letters',
			href: `${base}/apps/${slug}/dead-letters`,
			adminOnly: true
		},
		{ id: 'settings', label: 'Settings', href: `${base}/apps/${slug}?tab=settings`, adminOnly: true }
	]);
</script>

<nav class="tabs" aria-label="App sections">
	{#each tabs as tab (tab.id)}
		{#if !tab.adminOnly || canAdmin}
			<a
				href={tab.href}
				class:active={tab.id === currentTab}
				aria-current={tab.id === currentTab ? 'page' : undefined}
			>
				{tab.label}
				{#if tab.id === 'dead-letters' && unresolvedDeadLetters > 0}
					<span class="dl-badge" aria-label="{unresolvedDeadLetters} unresolved">
						{unresolvedDeadLetters}
					</span>
				{/if}
			</a>
		{/if}
	{/each}
</nav>

<style>
	.tabs {
		display: flex;
		flex-wrap: wrap;
		gap: 0.25rem;
		border-bottom: 1px solid var(--border);
		margin: 0 0 1.5rem 0;
	}
	a {
		display: inline-flex;
		align-items: center;
		gap: 0.4rem;
		padding: 0.55rem 0.85rem;
		border: none;
		background: transparent;
		color: var(--text-muted);
		font-size: 0.875rem;
		font-family: inherit;
		text-decoration: none;
		border-bottom: 2px solid transparent;
		margin-bottom: -1px;
		transition: color 120ms ease, border-color 120ms ease;
	}
	a:hover {
		color: var(--text-primary);
	}
	a.active {
		color: var(--color-link);
		border-bottom-color: var(--color-link);
	}
	.dl-badge {
		background: var(--color-danger-bg);
		color: var(--color-danger-fg);
		border-radius: var(--radius-pill);
		padding: 0.05rem 0.4rem;
		font-size: 0.7rem;
		font-weight: 600;
		line-height: 1.2;
	}
	a:focus-visible {
		outline: 2px solid var(--color-link);
		outline-offset: -2px;
		border-radius: var(--radius-sm);
	}
</style>