PiCloud/dashboard/src/routes/apps/[slug]/+layout.svelte

<script lang="ts" module>
	import type { AppLookupResponse, AppRole } from '$lib/api';
	import type { Writable } from 'svelte/store';

	export interface AppContext {
		app: Writable<AppLookupResponse | null>;
		myRole: Writable<AppRole | null>;
		canAdmin: Writable<boolean>;
		canWrite: Writable<boolean>;
		unresolvedDeadLetters: Writable<number>;
		reloadApp: () => Promise<void>;
	}

	export const APP_CTX_KEY = Symbol('app-ctx');
</script>

<script lang="ts">
	import { base } from '$app/paths';
	import { goto } from '$app/navigation';
	import { page } from '$app/state';
	import { setContext } from 'svelte';
	import { writable } from 'svelte/store';
	import { api, ApiError } from '$lib/api';
	import { currentUser } from '$lib/auth';
	import { canAdminApp, canWriteApp } from '$lib/capabilities';
	import AppTabBar from '$lib/AppTabBar.svelte';

	let { children } = $props();

	const app = writable<AppLookupResponse | null>(null);
	const myRole = writable<AppRole | null>(null);
	const canAdmin = writable(false);
	const canWrite = writable(false);
	const unresolvedDeadLetters = writable(0);

	let slug = $derived(page.params.slug ?? '');
	let loading = $state(true);
	let error = $state<string | null>(null);
	const me = $derived($currentUser);
	const myRoleSnapshot = $derived($myRole);
	// Keep canAdmin/canWrite reactive to BOTH the user (which loads
	// asynchronously after this layout's first effect runs) and
	// myRole. Setting them inside reloadApp captured a stale snapshot
	// of `me`, which made the Members tab vanish in tests that ran
	// before `$currentUser` hydrated.
	$effect(() => {
		canAdmin.set(canAdminApp(me, myRoleSnapshot));
		canWrite.set(canWriteApp(me, myRoleSnapshot));
	});

	// Map the current URL to a tab id the AppTabBar can highlight.
	// `/apps/[slug]` → reads `?tab=<id>` (default `scripts`);
	// `/apps/[slug]/<route>` → maps the route segment.
	let currentTab = $derived(deriveTab(page.url.pathname, page.url.searchParams.get('tab')));

	function deriveTab(pathname: string, qpTab: string | null): string {
		if (pathname.endsWith(`/apps/${slug}`) || pathname.endsWith(`/apps/${slug}/`)) {
			return qpTab ?? 'scripts';
		}
		// Anchored matches: only the named subtab *exactly* (followed by
		// `/` or end-of-string), so a hypothetical `/apps/<slug>/queues-archived`
		// route doesn't activate the `queues` tab. Audit hardening note.
		const root = `/apps/${slug}/`;
		const after = pathname.startsWith(root) ? pathname.slice(root.length) : '';
		const head = after.split('/', 1)[0];
		switch (head) {
			case 'users':
				return 'users';
			case 'files':
				return 'files';
			case 'queues':
				return 'queues';
			case 'dead-letters':
				return 'dead-letters';
			default:
				return 'scripts';
		}
	}

	async function reloadApp() {
		loading = true;
		error = null;
		try {
			const fetched = await api.apps.get(slug);
			// Mirror the canonical historical-slug redirect — if the URL
			// uses a retired slug, bounce to the canonical one keeping
			// the rest of the path intact.
			if (fetched.redirect_to && fetched.redirect_to !== slug) {
				const rest = page.url.pathname.replace(`/apps/${slug}`, `/apps/${fetched.redirect_to}`);
				await goto(rest + page.url.search, { replaceState: true });
				return;
			}
			app.set(fetched);
			myRole.set(fetched.my_role);
			// Best-effort: only authed admins can read the dl count, so
			// gate on the snapshot we have here. The $effect above keeps
			// canAdmin in sync once `me` hydrates.
			if (canAdminApp(me, fetched.my_role)) {
				void loadDeadLetterCount();
			}
		} catch (e) {
			error = e instanceof ApiError ? e.message : String(e);
		} finally {
			loading = false;
		}
	}

	async function loadDeadLetterCount(): Promise<void> {
		try {
			const r = await api.deadLetters.count(slug);
			unresolvedDeadLetters.set(r.unresolved);
		} catch {
			// Best-effort — a 403 (member without dl-manage) or transient
			// error shouldn't break the tab bar.
			unresolvedDeadLetters.set(0);
		}
	}

	setContext<AppContext>(APP_CTX_KEY, {
		app,
		myRole,
		canAdmin,
		canWrite,
		unresolvedDeadLetters,
		reloadApp
	});

	$effect(() => {
		void slug;
		void reloadApp();
	});
</script>

<header class="page-head">
	<div class="breadcrumb">
		<a href="{base}/apps">Apps</a>
		<span aria-hidden="true">/</span>
		<code>{slug}</code>
	</div>
	{#if $app}
		<h1>{$app.name}</h1>
		{#if $app.description}<p class="muted">{$app.description}</p>{/if}
	{/if}
</header>

<AppTabBar
	{slug}
	canAdmin={$canAdmin}
	{currentTab}
	unresolvedDeadLetters={$unresolvedDeadLetters}
/>

{#if loading && !$app}
	<p class="muted">Loading…</p>
{:else if error && !$app}
	<p class="error">{error}</p>
{:else}
	{@render children?.()}
{/if}

<style>
	.page-head {
		margin-bottom: 1rem;
	}
	.breadcrumb {
		display: flex;
		gap: 0.4rem;
		align-items: baseline;
		font-size: 0.875rem;
		color: var(--text-muted);
	}
	.breadcrumb a {
		color: var(--color-link);
		text-decoration: none;
	}
	.breadcrumb code {
		background: var(--bg-elevated);
		padding: 0.1rem 0.35rem;
		border-radius: var(--radius-sm);
	}
	h1 {
		margin: 0.25rem 0 0.25rem;
		font-size: 1.5rem;
	}
	.muted {
		color: var(--text-muted);
	}
	.error {
		color: var(--color-danger);
	}
</style>