feat(dashboard): unified design system + persistent per-app tab bar
Addresses two interrelated UX complaints:
1. Browser-default controls leaking through the dark theme
(native <select> chevrons, OS checkbox/radio look, date-picker
icons, <details> triangle marker, number input spinners).
2. Subroute pages dropping the main app's tab bar in favor of a back
link, breaking navigation continuity across users/files/queues/
dead-letters/queues-[name].
Design tokens (dashboard/src/routes/+layout.svelte):
- Token vocabulary expanded with 18 new variables covering
text-strong, accent + accent-fg, danger/success/warning bg/fg/border
triplets, bg-elevated-hover, radii (sm/md/lg/pill), shadow-elev-2,
and z scale (popover/modal/toast). 7 alias tokens (--muted,
--link, --text, --color-error, --color-border, --chip-bg,
--code-bg) absorb the orphan references the F-U-004 remediation
partially renamed.
- Global :global(...) resets for <select>, <input type='checkbox'>,
<input type='radio'>, <input type='number'>, <input type='date'>,
and <details>/<summary> ensure native controls track the dark
palette out of the box. No per-page edits needed.
Tab consistency:
- New dashboard/src/lib/AppTabBar.svelte renders all 11 per-app
tabs (Scripts, Domains, Members, Triggers, Topics, Secrets,
Settings, Users, Files, Queues, Dead letters) as <a> links with
an active highlight derived from the URL. Tabs that switch
in-page panels go to ?tab=<id>; tabs that switch routes go to
the subroute. Admin-only tabs are hidden when canAdmin is false.
- New dashboard/src/routes/apps/[slug]/+layout.svelte loads the
app once, handles the historical-slug redirect, exposes the
shared app + canAdmin + canWrite + dead-letter-count state via
Svelte context, and renders the breadcrumb + AppTabBar above
every per-app page. The 5 subroute pages drop their own "← back"
headers since the layout owns them now.
- apps/[slug]/+page.svelte's local-state activeTab becomes URL-
driven via $page.url.searchParams.get('tab'). Defense-in-depth
redirect for non-admin viewers landing on admin-only tabs uses
goto({replaceState:true}) instead of mutating state.
Light-theme leftovers swept on 5 subroute pages:
- dead-letters: error banner, badge, pre/code blocks all swap to
--color-danger-*, --bg-elevated, --text-primary
- files: button.danger, var(--muted,#666) → token-only
- queues + queues/[name]: bare hex fallbacks removed; .toolbar and
.auto-refresh styled with tokens; data-testid for the queues
empty state (already added by previous commit, reaffirmed here)
- users + users/invitations: badge-ok/badge-pending now use
--color-success-bg/fg and --color-warning-bg/fg; chips use
--bg-elevated + --text-strong; .create-form gets a token-styled
surface; row-action buttons gain explicit dark-theme styling
E2E selector updates:
- members.spec.ts, integration.spec.ts, apps.spec.ts — the tab bar
is now <a> elements (role=link) without a count suffix. Test
selectors swap from getByRole('button', name: /^Scripts \(\d+\)$/)
to getByRole('link', { name: 'Scripts' }), etc.
- New navigation/tabs.spec.ts still passes; existing 60+ tests
unchanged except for the selector swap. Two pre-existing failures
(routing.spec.ts:79, integration.spec.ts:89) untouched.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
MechaCat02
178
dashboard/src/routes/apps/[slug]/+layout.svelte
Normal file
178
dashboard/src/routes/apps/[slug]/+layout.svelte
Normal file
@@ -0,0 +1,178 @@
|
||||
<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';
|
||||
}
|
||||
if (pathname.includes(`/apps/${slug}/users`)) return 'users';
|
||||
if (pathname.includes(`/apps/${slug}/files`)) return 'files';
|
||||
if (pathname.includes(`/apps/${slug}/queues`)) return 'queues';
|
||||
if (pathname.includes(`/apps/${slug}/dead-letters`)) return 'dead-letters';
|
||||
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>
|
||||
Reference in New Issue
Block a user