fabi/PiCloud
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(dashboard): unified design system + persistent per-app tab bar

Browse Source 
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
2026-06-09 20:55:22 +02:00
parent a1b7569d05
commit bce44769dd
13 changed files with 744 additions and 322 deletions
Download Patch File Download Diff File Expand all files Collapse all files

201
dashboard/src/routes/apps/[slug]/+page.svelte
View File

@@ -58,7 +58,23 @@
/// build webhook URLs the operator shares with external systems so
/// they don't accidentally inherit the admin's LAN address.
let publicBaseUrl = $state<string | null>(null);
let activeTab = $state<Tab>('scripts');
// Tab is URL-driven so the layout's <AppTabBar> can link directly to
// `?tab=<id>` and the in-page panel switches accordingly. The legacy
// state-based switching was incompatible with cross-route tab
// continuity (the user complained that subroute pages dropped the
// tab bar — now the layout owns it everywhere).
const isValidTab = (s: string | null): s is Tab =>
s === 'scripts' ||
s === 'domains' ||
s === 'members' ||
s === 'settings' ||
s === 'triggers' ||
s === 'topics' ||
s === 'secrets';
let activeTab = $derived.by<Tab>(() => {
const qp = page.url.searchParams.get('tab');
return isValidTab(qp) ? qp : 'scripts';
});
let scripts = $state<Script[]>([]);
let domains = $state<AppDomain[]>([]);
@@ -907,10 +923,10 @@
void loadApp();
});
// Defense-in-depth: a viewer / editor following a stale link to
// the Settings or Members tab gets bounced back to Scripts. The
// backend still 403s the underlying calls, but no point showing an
// empty tab.
// Defense-in-depth: a viewer / editor following a stale link to an
// admin-only tab (?tab=settings, etc.) gets bounced back to Scripts.
// The backend still 403s the underlying calls, but no point showing
// an empty tab. activeTab is URL-driven now so we update the URL.
$effect(() => {
if (
!canAdmin &&
@@ -920,101 +936,12 @@
activeTab === 'topics' ||
activeTab === 'secrets')
) {
activeTab = 'scripts';
void goto(`${base}/apps/${slug}?tab=scripts`, { replaceState: true });
}
});
</script>
{#if loading && !app}
<p class="muted">Loading…</p>
{:else if loadError && !app}
<div class="error">
<strong>Could not load app.</strong>
<p>{loadError}</p>
<a href="{base}/apps">Back to apps</a>
</div>
{:else if app}
<header class="page-header">
<div>
<div class="breadcrumb">
<a href="{base}/apps">Apps</a> / <code>{app.slug}</code>
</div>
<h1>{app.name}</h1>
{#if app.description}<p class="muted">{app.description}</p>{/if}
</div>
</header>
<nav class="tabs">
<button
type="button"
class:active={activeTab === 'scripts'}
onclick={() => (activeTab = 'scripts')}>Scripts ({scripts.length})</button
>
<button
type="button"
class:active={activeTab === 'domains'}
onclick={() => (activeTab = 'domains')}>Domains ({domains.length})</button
>
{#if canAdmin}
<button
type="button"
class:active={activeTab === 'members'}
onclick={() => (activeTab = 'members')}>Members ({members.length})</button
>
<button
type="button"
class:active={activeTab === 'triggers'}
onclick={() => (activeTab = 'triggers')}>Triggers ({triggers.length})</button
>
<button
type="button"
class:active={activeTab === 'topics'}
onclick={() => (activeTab = 'topics')}>Topics ({topics.length})</button
>
<button
type="button"
class:active={activeTab === 'secrets'}
onclick={() => (activeTab = 'secrets')}>Secrets ({secrets.length})</button
>
<button
type="button"
class:active={activeTab === 'settings'}
onclick={() => (activeTab = 'settings')}>Settings</button
>
<a
class="tab-link"
href="{base}/apps/{slug}/users"
title="Users — per-app end users managed by the users::* SDK"
>
Users
</a>
<a
class="tab-link"
href="{base}/apps/{slug}/files"
title="Files — browse and delete stored blobs by collection"
>
Files
</a>
<a
class="tab-link"
href="{base}/apps/{slug}/queues"
title="Queues — depth of per-app durable queues (v1.1.9, read-only)"
>
Queues
</a>
<a
class="tab-link"
href="{base}/apps/{slug}/dead-letters"
title="Dead letters — replay or resolve events that exhausted their retry policy"
>
Dead letters
{#if unresolvedDeadLetters > 0}
<span class="dl-badge">{unresolvedDeadLetters}</span>
{/if}
</a>
{/if}
</nav>
{#if app}
{#if activeTab === 'scripts'}
<section>
<div class="row">
@@ -2104,36 +2031,6 @@
{/if}
<style>
.page-header {
margin-bottom: 1rem;
}
.breadcrumb {
font-size: 0.875rem;
color: #64748b;
margin-bottom: 0.25rem;
}
.breadcrumb a {
color: #94a3b8;
text-decoration: none;
}
.breadcrumb a:hover {
color: #e2e8f0;
}
.breadcrumb code {
background: #1e293b;
padding: 0.1rem 0.3rem;
border-radius: 0.25rem;
}
h1 {
margin: 0;
font-size: 1.5rem;
}
h2 {
font-size: 1.125rem;
margin: 0 0 1rem;
@@ -2144,58 +2041,6 @@
margin: 0 0 0.5rem;
}
.tabs {
display: flex;
gap: 0.25rem;
border-bottom: 1px solid #1e293b;
margin-bottom: 1.25rem;
}
.tabs button {
background: transparent;
color: #94a3b8;
border: none;
padding: 0.6rem 1rem;
font: inherit;
cursor: pointer;
border-bottom: 2px solid transparent;
}
.tabs button:hover {
color: #e2e8f0;
}
.tabs button.active {
color: #38bdf8;
border-bottom-color: #38bdf8;
}
.tabs .tab-link {
display: inline-flex;
align-items: center;
gap: 0.4rem;
color: #94a3b8;
text-decoration: none;
padding: 0.6rem 1rem;
margin-left: auto;
border-bottom: 2px solid transparent;
font: inherit;
}
.tabs .tab-link:hover {
color: #e2e8f0;
}
.dl-badge {
display: inline-block;
min-width: 1.25rem;
padding: 0.1rem 0.4rem;
background: #ef4444;
color: #fff;
border-radius: 999px;
font-size: 0.75rem;
font-weight: 600;
text-align: center;
}
button {
background: #38bdf8;
color: #0b1220;