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
109
dashboard/src/lib/AppTabBar.svelte
Normal file
109
dashboard/src/lib/AppTabBar.svelte
Normal file
@@ -0,0 +1,109 @@
|
||||
<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>
|
||||
@@ -81,7 +81,9 @@
|
||||
--bg-primary: #0f172a;
|
||||
--bg-secondary: #0b1220;
|
||||
--bg-elevated: #1e293b;
|
||||
--bg-elevated-hover: #283549;
|
||||
--text-primary: #e2e8f0;
|
||||
--text-strong: #cbd5e1;
|
||||
--text-muted: #94a3b8;
|
||||
--text-subtle: #64748b;
|
||||
--border: #334155;
|
||||
@@ -90,8 +92,154 @@
|
||||
--color-muted: #94a3b8;
|
||||
--color-danger: #f87171;
|
||||
--color-danger-bg: #7f1d1d;
|
||||
--color-danger-fg: #fecaca;
|
||||
--color-danger-border: #b91c1c;
|
||||
--color-success: #34d399;
|
||||
--color-success-bg: #14532d;
|
||||
--color-success-fg: #6ee7b7;
|
||||
--color-warning: #fbbf24;
|
||||
--color-warning-bg: #3f2e07;
|
||||
--color-warning-fg: #fde68a;
|
||||
--color-warning-border: #ca8a04;
|
||||
--accent: #38bdf8;
|
||||
--accent-fg: #0b1220;
|
||||
|
||||
/* Aliases for orphan references that several pages adopted before
|
||||
the token block was canonicalised (F-U-004). Removing these
|
||||
requires sweeping ~30 call sites; until then the alias keeps
|
||||
the visuals consistent. */
|
||||
--muted: var(--text-muted);
|
||||
--link: var(--color-link);
|
||||
--text: var(--text-primary);
|
||||
--color-error: var(--color-danger);
|
||||
--color-border: var(--border);
|
||||
--chip-bg: var(--bg-elevated);
|
||||
--code-bg: var(--bg-secondary);
|
||||
|
||||
/* Radii, shadows, z scale. */
|
||||
--radius-sm: 0.25rem;
|
||||
--radius-md: 0.375rem;
|
||||
--radius-lg: 0.5rem;
|
||||
--radius-pill: 999px;
|
||||
--shadow-elev-2: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
|
||||
--z-popover: 50;
|
||||
--z-modal: 100;
|
||||
--z-toast: 200;
|
||||
}
|
||||
|
||||
/* Global form-control resets — these stop macOS / Linux native
|
||||
controls (selects with OS chevrons, blue-tick checkboxes, raised
|
||||
default buttons, light-rendered date pickers) from breaking the
|
||||
dark theme. Per-page styles still win because of specificity. */
|
||||
:global(button) {
|
||||
font-family: inherit;
|
||||
}
|
||||
:global(select) {
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
background-color: var(--bg-secondary);
|
||||
color: var(--text-primary);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 0.45rem 2rem 0.45rem 0.75rem;
|
||||
font: inherit;
|
||||
/* Inline-SVG chevron so the dropdown indicator matches the
|
||||
slate-400 muted text colour regardless of OS. */
|
||||
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='none' stroke='%2394a3b8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1l4 4 4-4'/></svg>");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 0.6rem center;
|
||||
cursor: pointer;
|
||||
}
|
||||
:global(select:focus) {
|
||||
outline: none;
|
||||
border-color: var(--color-link);
|
||||
}
|
||||
:global(input[type='checkbox']),
|
||||
:global(input[type='radio']) {
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin: 0;
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border);
|
||||
flex-shrink: 0;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
}
|
||||
:global(input[type='checkbox']) {
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
:global(input[type='radio']) {
|
||||
border-radius: var(--radius-pill);
|
||||
}
|
||||
:global(input[type='checkbox']:checked),
|
||||
:global(input[type='radio']:checked) {
|
||||
background: var(--color-link);
|
||||
border-color: var(--color-link);
|
||||
}
|
||||
:global(input[type='checkbox']:checked::after) {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 3px;
|
||||
top: 0;
|
||||
width: 4px;
|
||||
height: 8px;
|
||||
border: solid var(--accent-fg);
|
||||
border-width: 0 2px 2px 0;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
:global(input[type='radio']:checked::after) {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 3px;
|
||||
top: 3px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: var(--radius-pill);
|
||||
background: var(--accent-fg);
|
||||
}
|
||||
:global(input[type='checkbox']:focus-visible),
|
||||
:global(input[type='radio']:focus-visible) {
|
||||
outline: 2px solid var(--color-link);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
/* Number input spinners — hidden so the dark theme doesn't ship
|
||||
OS-blue stepper arrows on inputs like timeout/visibility knobs. */
|
||||
:global(input[type='number']) {
|
||||
-moz-appearance: textfield;
|
||||
appearance: textfield;
|
||||
}
|
||||
:global(input[type='number']::-webkit-outer-spin-button),
|
||||
:global(input[type='number']::-webkit-inner-spin-button) {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
/* Date picker icon — recoloured to match muted text. */
|
||||
:global(input[type='date']::-webkit-calendar-picker-indicator) {
|
||||
filter: invert(0.7);
|
||||
cursor: pointer;
|
||||
}
|
||||
/* <details> default triangle replaced with a slate chevron so the
|
||||
disclosure widget tracks the rest of the dark theme. */
|
||||
:global(details > summary) {
|
||||
list-style: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
:global(details > summary::-webkit-details-marker) {
|
||||
display: none;
|
||||
}
|
||||
:global(details > summary::before) {
|
||||
content: '▸';
|
||||
display: inline-block;
|
||||
margin-right: 0.4rem;
|
||||
color: var(--text-muted);
|
||||
transition: transform 120ms ease;
|
||||
}
|
||||
:global(details[open] > summary::before) {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
:global(html, body) {
|
||||
|
||||
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>
|
||||
@@ -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;
|
||||
|
||||
@@ -77,11 +77,10 @@
|
||||
<title>Dead letters · {slug} · PiCloud</title>
|
||||
</svelte:head>
|
||||
|
||||
<div class="container">
|
||||
<header>
|
||||
<div class="panel">
|
||||
<header class="panel-head">
|
||||
<div>
|
||||
<a href="{base}/apps/{slug}" class="back">← back to {app?.name ?? slug}</a>
|
||||
<h1>Dead letters</h1>
|
||||
<h2>Dead letters</h2>
|
||||
<p class="subtitle">
|
||||
{#if unresolved > 0}
|
||||
<strong class="badge">{unresolved}</strong> unresolved
|
||||
@@ -95,7 +94,7 @@
|
||||
<input type="checkbox" bind:checked={unresolvedOnly} />
|
||||
Show unresolved only
|
||||
</label>
|
||||
<button onclick={load} disabled={loading}>Refresh</button>
|
||||
<button class="secondary" onclick={load} disabled={loading}>Refresh</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
@@ -178,40 +177,28 @@
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
}
|
||||
header {
|
||||
.panel-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 1rem;
|
||||
gap: 1rem;
|
||||
}
|
||||
.back {
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-muted, #666);
|
||||
text-decoration: none;
|
||||
}
|
||||
.back:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
h1 {
|
||||
h2 {
|
||||
margin: 0.25rem 0;
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
.subtitle {
|
||||
color: var(--text-muted, #666);
|
||||
color: var(--text-muted);
|
||||
margin: 0;
|
||||
}
|
||||
.badge {
|
||||
display: inline-block;
|
||||
min-width: 1.5rem;
|
||||
padding: 0.1rem 0.4rem;
|
||||
background: #c00;
|
||||
color: #fff;
|
||||
border-radius: 999px;
|
||||
background: var(--color-danger-bg);
|
||||
color: var(--color-danger-fg);
|
||||
border-radius: var(--radius-pill);
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
}
|
||||
@@ -220,16 +207,23 @@
|
||||
gap: 0.75rem;
|
||||
align-items: center;
|
||||
}
|
||||
.controls label {
|
||||
display: inline-flex;
|
||||
gap: 0.4rem;
|
||||
align-items: center;
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
.error {
|
||||
background: #fee;
|
||||
border: 1px solid #fbb;
|
||||
color: #900;
|
||||
background: var(--color-danger-bg);
|
||||
border: 1px solid var(--color-danger-border);
|
||||
color: var(--color-danger-fg);
|
||||
padding: 0.75rem 1rem;
|
||||
border-radius: 4px;
|
||||
border-radius: var(--radius-md);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.empty {
|
||||
color: var(--text-muted, #666);
|
||||
color: var(--text-muted);
|
||||
text-align: center;
|
||||
padding: 2rem;
|
||||
}
|
||||
@@ -242,11 +236,11 @@
|
||||
td {
|
||||
text-align: left;
|
||||
padding: 0.5rem 0.75rem;
|
||||
border-bottom: 1px solid var(--border, #e0e0e0);
|
||||
border-bottom: 1px solid var(--border);
|
||||
vertical-align: top;
|
||||
}
|
||||
th {
|
||||
background: var(--bg-secondary, #f5f5f5);
|
||||
background: var(--bg-secondary);
|
||||
font-weight: 600;
|
||||
}
|
||||
tr.resolved {
|
||||
@@ -259,7 +253,7 @@
|
||||
.err button.link {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--link, #06c);
|
||||
color: var(--color-link);
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
@@ -272,18 +266,30 @@
|
||||
display: flex;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
.actions button.secondary {
|
||||
button.secondary {
|
||||
background: transparent;
|
||||
color: var(--text, #333);
|
||||
border: 1px solid var(--border, #ccc);
|
||||
color: var(--text-muted);
|
||||
border: 1px solid var(--border);
|
||||
padding: 0.35rem 0.75rem;
|
||||
border-radius: var(--radius-md);
|
||||
cursor: pointer;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
button.secondary:hover:not(:disabled) {
|
||||
background: var(--bg-elevated);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
button.secondary:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.resolution {
|
||||
font-style: italic;
|
||||
color: var(--text-muted, #666);
|
||||
color: var(--text-muted);
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
tr.detail td {
|
||||
background: var(--bg-secondary, #fafafa);
|
||||
background: var(--bg-secondary);
|
||||
padding: 0;
|
||||
}
|
||||
.detail-grid {
|
||||
@@ -296,20 +302,21 @@
|
||||
margin: 0 0 0.5rem 0;
|
||||
font-size: 0.85rem;
|
||||
text-transform: uppercase;
|
||||
color: var(--text-muted, #666);
|
||||
color: var(--text-muted);
|
||||
}
|
||||
.detail-grid pre {
|
||||
background: #fff;
|
||||
border: 1px solid var(--border, #e0e0e0);
|
||||
background: var(--bg-elevated);
|
||||
color: var(--text-primary);
|
||||
border: 1px solid var(--border);
|
||||
padding: 0.75rem;
|
||||
border-radius: 4px;
|
||||
border-radius: var(--radius-md);
|
||||
font-size: 0.8rem;
|
||||
overflow: auto;
|
||||
max-height: 300px;
|
||||
margin: 0;
|
||||
}
|
||||
code {
|
||||
font-family: monospace;
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -114,11 +114,10 @@
|
||||
<title>Files · {slug} · PiCloud</title>
|
||||
</svelte:head>
|
||||
|
||||
<div class="container">
|
||||
<header>
|
||||
<div class="panel">
|
||||
<header class="panel-head">
|
||||
<div>
|
||||
<a href="{base}/apps/{slug}" class="back">← back to {app?.name ?? slug}</a>
|
||||
<h1>Files</h1>
|
||||
<h2>Files</h2>
|
||||
<p class="subtitle">
|
||||
Browse and delete stored blobs by collection. Uploads happen from scripts via
|
||||
<code>files::collection(c).create(…)</code>.
|
||||
@@ -246,19 +245,15 @@
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.container {
|
||||
max-width: 60rem;
|
||||
margin: 0 auto;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
header {
|
||||
.panel-head {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.back {
|
||||
font-size: 0.85rem;
|
||||
.panel-head h2 {
|
||||
margin: 0.25rem 0;
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
.subtitle {
|
||||
color: var(--muted, #666);
|
||||
color: var(--text-muted);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.collection-form {
|
||||
@@ -282,7 +277,7 @@
|
||||
td {
|
||||
text-align: left;
|
||||
padding: 0.4rem 0.6rem;
|
||||
border-bottom: 1px solid var(--border, #e2e2e2);
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
.mono {
|
||||
font-family: monospace;
|
||||
@@ -316,6 +311,8 @@
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
button.danger {
|
||||
color: #b00020;
|
||||
background: var(--color-danger-bg);
|
||||
color: var(--color-danger-fg);
|
||||
border: 1px solid var(--color-danger-border);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -72,16 +72,15 @@
|
||||
<title>Queues — {app?.name ?? slug} — PiCloud</title>
|
||||
</svelte:head>
|
||||
|
||||
<header>
|
||||
<a class="back" href="{base}/apps/{slug}">← Back to {app?.name ?? slug}</a>
|
||||
<h1>Queues</h1>
|
||||
<header class="panel-head">
|
||||
<h2>Queues</h2>
|
||||
<p class="subtle">
|
||||
Per-app durable queues. Producers call <code>queue::enqueue(name, msg)</code>;
|
||||
consumers register a <code>queue:receive</code> trigger. v1.1.9.
|
||||
</p>
|
||||
<!-- F-U-013: refresh + auto-refresh toggle. -->
|
||||
<div class="toolbar">
|
||||
<button type="button" onclick={() => loadQueues()} disabled={loading}>
|
||||
<button type="button" class="secondary" onclick={() => loadQueues()} disabled={loading}>
|
||||
{loading ? 'Refreshing…' : 'Refresh'}
|
||||
</button>
|
||||
<label class="auto-refresh">
|
||||
@@ -137,25 +136,52 @@
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
header {
|
||||
.panel-head {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.back {
|
||||
font-size: 0.875rem;
|
||||
color: var(--color-link);
|
||||
}
|
||||
h1 {
|
||||
h2 {
|
||||
margin: 0.25rem 0;
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
.subtle {
|
||||
color: var(--color-muted);
|
||||
color: var(--text-muted);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
.toolbar {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
align-items: center;
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
.auto-refresh {
|
||||
display: inline-flex;
|
||||
gap: 0.4rem;
|
||||
align-items: center;
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
button.secondary {
|
||||
background: transparent;
|
||||
color: var(--text-muted);
|
||||
border: 1px solid var(--border);
|
||||
padding: 0.4rem 0.85rem;
|
||||
border-radius: var(--radius-md);
|
||||
cursor: pointer;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
button.secondary:hover:not(:disabled) {
|
||||
background: var(--bg-elevated);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
button.secondary:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.error {
|
||||
color: var(--color-error, #c00);
|
||||
color: var(--color-danger);
|
||||
}
|
||||
.muted {
|
||||
color: var(--color-muted);
|
||||
color: var(--text-muted);
|
||||
}
|
||||
table.queues {
|
||||
width: 100%;
|
||||
@@ -165,7 +191,7 @@
|
||||
table.queues td {
|
||||
text-align: left;
|
||||
padding: 0.5rem;
|
||||
border-bottom: 1px solid var(--color-border, #eee);
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
.num {
|
||||
text-align: right;
|
||||
|
||||
@@ -47,9 +47,9 @@
|
||||
<title>{name} — Queues — {app?.name ?? slug} — PiCloud</title>
|
||||
</svelte:head>
|
||||
|
||||
<header>
|
||||
<a class="back" href="{base}/apps/{slug}/queues">← Back to Queues</a>
|
||||
<h1>Queue: <code>{name}</code></h1>
|
||||
<header class="panel-head">
|
||||
<a class="back" href="{base}/apps/{slug}/queues">← All queues</a>
|
||||
<h2>Queue: <code>{name}</code></h2>
|
||||
</header>
|
||||
|
||||
{#if error}
|
||||
@@ -99,15 +99,20 @@
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
header {
|
||||
.panel-head {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.back {
|
||||
font-size: 0.875rem;
|
||||
color: var(--color-link);
|
||||
text-decoration: none;
|
||||
}
|
||||
h1 {
|
||||
.back:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
h2 {
|
||||
margin: 0.25rem 0;
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
section {
|
||||
margin: 1rem 0;
|
||||
@@ -118,13 +123,13 @@
|
||||
gap: 0.25rem 1rem;
|
||||
}
|
||||
dt {
|
||||
color: var(--color-muted);
|
||||
color: var(--text-muted);
|
||||
}
|
||||
dd {
|
||||
margin: 0;
|
||||
}
|
||||
.error {
|
||||
color: var(--color-error, #c00);
|
||||
color: var(--color-danger);
|
||||
}
|
||||
.muted {
|
||||
color: var(--color-muted);
|
||||
|
||||
@@ -169,19 +169,18 @@
|
||||
<title>Users · {slug} · PiCloud</title>
|
||||
</svelte:head>
|
||||
|
||||
<div class="container">
|
||||
<header>
|
||||
<div class="panel">
|
||||
<header class="panel-head">
|
||||
<div>
|
||||
<a href="{base}/apps/{slug}" class="back">← back to {app?.name ?? slug}</a>
|
||||
<h1>Users</h1>
|
||||
<h2>Users</h2>
|
||||
<p class="subtitle">
|
||||
End-users of this app, managed by the <code>users::*</code> SDK. Distinct
|
||||
from instance operators (Admins tab).
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<a class="tab-link" href="{base}/apps/{slug}/users/invitations">Invitations</a>
|
||||
<button type="button" onclick={() => (showCreate = !showCreate)}>
|
||||
<div class="panel-actions">
|
||||
<a class="sublink" href="{base}/apps/{slug}/users/invitations">Invitations →</a>
|
||||
<button class="primary" type="button" onclick={() => (showCreate = !showCreate)}>
|
||||
{showCreate ? 'Cancel' : 'New user'}
|
||||
</button>
|
||||
</div>
|
||||
@@ -362,27 +361,50 @@
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.container {
|
||||
max-width: 70rem;
|
||||
margin: 0 auto;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
header {
|
||||
.panel-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.back {
|
||||
font-size: 0.85rem;
|
||||
.panel-head h2 {
|
||||
margin: 0.25rem 0;
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
.subtitle {
|
||||
color: var(--muted, #666);
|
||||
color: var(--text-muted);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.tab-link {
|
||||
margin-right: 0.5rem;
|
||||
.panel-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
.sublink {
|
||||
color: var(--color-link);
|
||||
font-size: 0.875rem;
|
||||
text-decoration: none;
|
||||
}
|
||||
.sublink:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
button.primary {
|
||||
background: var(--accent);
|
||||
color: var(--accent-fg);
|
||||
border: none;
|
||||
padding: 0.45rem 0.9rem;
|
||||
border-radius: var(--radius-md);
|
||||
cursor: pointer;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
button.primary:hover:not(:disabled) {
|
||||
filter: brightness(1.05);
|
||||
}
|
||||
button.primary:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.create-form {
|
||||
display: grid;
|
||||
@@ -390,12 +412,28 @@
|
||||
gap: 0.75rem;
|
||||
align-items: end;
|
||||
margin-bottom: 1rem;
|
||||
padding: 1rem;
|
||||
background: var(--bg-elevated);
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
.create-form label {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
.create-form input {
|
||||
background: var(--bg-secondary);
|
||||
color: var(--text-primary);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 0.45rem 0.6rem;
|
||||
font: inherit;
|
||||
}
|
||||
.create-form input:focus {
|
||||
outline: none;
|
||||
border-color: var(--color-link);
|
||||
}
|
||||
.modal-label {
|
||||
display: flex;
|
||||
@@ -413,7 +451,11 @@
|
||||
td {
|
||||
text-align: left;
|
||||
padding: 0.4rem 0.6rem;
|
||||
border-bottom: 1px solid var(--border, #e2e2e2);
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
th {
|
||||
color: var(--text-muted);
|
||||
font-weight: 600;
|
||||
}
|
||||
.row-actions {
|
||||
display: flex;
|
||||
@@ -423,44 +465,59 @@
|
||||
.row-actions button {
|
||||
font-size: 0.78rem;
|
||||
padding: 0.2rem 0.5rem;
|
||||
background: transparent;
|
||||
color: var(--text-muted);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
cursor: pointer;
|
||||
}
|
||||
.row-actions button:hover {
|
||||
background: var(--bg-elevated);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
.muted {
|
||||
color: var(--muted, #666);
|
||||
color: var(--text-muted);
|
||||
}
|
||||
.error {
|
||||
color: #b00020;
|
||||
color: var(--color-danger);
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
button.danger {
|
||||
color: #b00020;
|
||||
.row-actions button.danger {
|
||||
color: var(--color-danger-fg);
|
||||
background: var(--color-danger-bg);
|
||||
border-color: var(--color-danger-border);
|
||||
}
|
||||
.chip {
|
||||
display: inline-block;
|
||||
padding: 0.1rem 0.4rem;
|
||||
border-radius: 0.3rem;
|
||||
background: var(--chip-bg, #eef);
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--bg-elevated);
|
||||
color: var(--text-strong);
|
||||
font-size: 0.75rem;
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
.badge {
|
||||
display: inline-block;
|
||||
padding: 0.1rem 0.4rem;
|
||||
border-radius: 0.3rem;
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 0.72rem;
|
||||
}
|
||||
.badge-ok {
|
||||
background: #d8f5d8;
|
||||
color: #2a6a2a;
|
||||
background: var(--color-success-bg);
|
||||
color: var(--color-success-fg);
|
||||
}
|
||||
.badge-pending {
|
||||
background: #fff3cd;
|
||||
color: #856404;
|
||||
background: var(--color-warning-bg);
|
||||
color: var(--color-warning-fg);
|
||||
}
|
||||
.token {
|
||||
background: var(--code-bg, #f5f5f7);
|
||||
background: var(--bg-secondary);
|
||||
color: var(--text-primary);
|
||||
padding: 0.5rem;
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 0.85rem;
|
||||
overflow-wrap: anywhere;
|
||||
white-space: pre-wrap;
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -110,18 +110,18 @@
|
||||
<title>Invitations · {slug} · PiCloud</title>
|
||||
</svelte:head>
|
||||
|
||||
<div class="container">
|
||||
<header>
|
||||
<div class="panel">
|
||||
<header class="panel-head">
|
||||
<div>
|
||||
<a href="{base}/apps/{slug}/users" class="back">← back to Users</a>
|
||||
<h1>Invitations</h1>
|
||||
<a href="{base}/apps/{slug}/users" class="back">← Users</a>
|
||||
<h2>Invitations</h2>
|
||||
<p class="subtitle">
|
||||
Pending invitations. Accepting an invitation creates the user and signs them in
|
||||
with a fresh session token; pre-staged roles are applied atomically.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<button type="button" onclick={() => (showCreate = !showCreate)}>
|
||||
<button class="primary" type="button" onclick={() => (showCreate = !showCreate)}>
|
||||
{showCreate ? 'Cancel' : 'New invitation'}
|
||||
</button>
|
||||
</div>
|
||||
@@ -252,37 +252,76 @@
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.container {
|
||||
max-width: 70rem;
|
||||
margin: 0 auto;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
header {
|
||||
.panel-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.panel-head h2 {
|
||||
margin: 0.25rem 0;
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
.back {
|
||||
font-size: 0.85rem;
|
||||
font-size: 0.8rem;
|
||||
color: var(--color-link);
|
||||
text-decoration: none;
|
||||
}
|
||||
.back:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.subtitle {
|
||||
color: var(--muted, #666);
|
||||
color: var(--text-muted);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
button.primary {
|
||||
background: var(--accent);
|
||||
color: var(--accent-fg);
|
||||
border: none;
|
||||
padding: 0.45rem 0.9rem;
|
||||
border-radius: var(--radius-md);
|
||||
cursor: pointer;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
button.primary:hover:not(:disabled) {
|
||||
filter: brightness(1.05);
|
||||
}
|
||||
button.primary:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.create-form {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 0.75rem;
|
||||
align-items: end;
|
||||
margin-bottom: 1rem;
|
||||
padding: 1rem;
|
||||
background: var(--bg-elevated);
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
.create-form label {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
.create-form input,
|
||||
.create-form textarea {
|
||||
background: var(--bg-secondary);
|
||||
color: var(--text-primary);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 0.45rem 0.6rem;
|
||||
font: inherit;
|
||||
}
|
||||
.create-form input:focus,
|
||||
.create-form textarea:focus {
|
||||
outline: none;
|
||||
border-color: var(--color-link);
|
||||
}
|
||||
.create-form .full-row {
|
||||
grid-column: span 2;
|
||||
@@ -302,23 +341,34 @@
|
||||
td {
|
||||
text-align: left;
|
||||
padding: 0.4rem 0.6rem;
|
||||
border-bottom: 1px solid var(--border, #e2e2e2);
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
th {
|
||||
color: var(--text-muted);
|
||||
font-weight: 600;
|
||||
}
|
||||
.muted {
|
||||
color: var(--muted, #666);
|
||||
color: var(--text-muted);
|
||||
}
|
||||
.error {
|
||||
color: #b00020;
|
||||
color: var(--color-danger);
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
button.danger {
|
||||
color: #b00020;
|
||||
background: var(--color-danger-bg);
|
||||
color: var(--color-danger-fg);
|
||||
border: 1px solid var(--color-danger-border);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 0.2rem 0.5rem;
|
||||
font-size: 0.78rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
.chip {
|
||||
display: inline-block;
|
||||
padding: 0.1rem 0.4rem;
|
||||
border-radius: 0.3rem;
|
||||
background: var(--chip-bg, #eef);
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--bg-elevated);
|
||||
color: var(--text-strong);
|
||||
font-size: 0.75rem;
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
|
||||
@@ -99,7 +99,7 @@ test.describe('B2 apps lifecycle', () => {
|
||||
|
||||
await page.getByRole('link', { name: new RegExp(slug) }).click();
|
||||
await expect(page).toHaveURL(new RegExp(`/admin/apps/${slug}$`));
|
||||
await page.getByRole('button', { name: 'Settings' }).click();
|
||||
await page.getByRole('link', { name: 'Settings' }).click();
|
||||
|
||||
const newName = `${slug} renamed`;
|
||||
const newDesc = 'updated description';
|
||||
@@ -111,7 +111,7 @@ test.describe('B2 apps lifecycle', () => {
|
||||
await expect(page.getByRole('button', { name: 'Save changes' })).toBeEnabled();
|
||||
|
||||
await page.reload();
|
||||
await page.getByRole('button', { name: 'Settings' }).click();
|
||||
await page.getByRole('link', { name: 'Settings' }).click();
|
||||
await expect(page.getByLabel('Name')).toHaveValue(newName);
|
||||
await expect(page.getByLabel('Description')).toHaveValue(newDesc);
|
||||
});
|
||||
@@ -125,7 +125,7 @@ test.describe('B2 apps lifecycle', () => {
|
||||
cleanup.app(slug); // belt-and-braces; cleanup is best-effort
|
||||
|
||||
await page.getByRole('link', { name: new RegExp(slug) }).click();
|
||||
await page.getByRole('button', { name: 'Settings' }).click();
|
||||
await page.getByRole('link', { name: 'Settings' }).click();
|
||||
await page.getByRole('button', { name: 'Delete app' }).click();
|
||||
|
||||
const dialog = page.getByRole('dialog');
|
||||
@@ -251,7 +251,7 @@ test.describe('B2 apps adversarial', () => {
|
||||
cleanup.app(slug);
|
||||
await expect(page.getByRole('link', { name: new RegExp(slug) })).toBeVisible();
|
||||
await page.goto(`/admin/apps/${slug}`);
|
||||
await expect(page.getByRole('button', { name: 'Settings' })).toBeVisible();
|
||||
await expect(page.getByRole('link', { name: 'Settings' })).toBeVisible();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -296,12 +296,12 @@ test.describe('B2 apps role shadowing', () => {
|
||||
try {
|
||||
await page.goto(`/admin/apps/${slug}`);
|
||||
await expect(
|
||||
page.getByRole('button', { name: /^Scripts \(\d+\)$/ })
|
||||
page.getByRole('link', { name: 'Scripts' })
|
||||
).toBeVisible();
|
||||
// Settings tab is absent.
|
||||
await expect(page.getByRole('button', { name: /^Settings$/ })).toHaveCount(0);
|
||||
await expect(page.getByRole('link', { name: 'Settings' })).toHaveCount(0);
|
||||
// Domains tab still listable, but no Add-domain submit.
|
||||
await page.getByRole('button', { name: /^Domains \(\d+\)$/ }).click();
|
||||
await page.getByRole('link', { name: 'Domains' }).click();
|
||||
await expect(page.getByRole('button', { name: /^Add domain$/ })).toHaveCount(0);
|
||||
} finally {
|
||||
await page.context().close();
|
||||
@@ -324,9 +324,9 @@ test.describe('B2 apps role shadowing', () => {
|
||||
try {
|
||||
await page.goto(`/admin/apps/${slug}`);
|
||||
await expect(page.getByRole('button', { name: /^New script$/ })).toBeVisible();
|
||||
await expect(page.getByRole('button', { name: /^Settings$/ })).toHaveCount(0);
|
||||
await expect(page.getByRole('link', { name: 'Settings' })).toHaveCount(0);
|
||||
await expect(
|
||||
page.getByRole('button', { name: /^Members \(\d+\)$/ })
|
||||
page.getByRole('link', { name: 'Members' })
|
||||
).toHaveCount(0);
|
||||
} finally {
|
||||
await page.context().close();
|
||||
|
||||
@@ -47,14 +47,14 @@ test('end-to-end: app + domain + script + route via dashboard → invoke via pub
|
||||
// 2. Open the app and claim the domain on the Domains tab.
|
||||
await page.getByRole('link', { name: new RegExp(slug) }).click();
|
||||
await expect(page).toHaveURL(new RegExp(`/admin/apps/${slug}$`));
|
||||
await page.getByRole('button', { name: /^Domains \(\d+\)$/ }).click();
|
||||
await page.getByRole('link', { name: 'Domains' }).click();
|
||||
const domainForm = page.locator('form.create-form.inline');
|
||||
await domainForm.getByPlaceholder(/app\.example\.com/).fill(domain);
|
||||
await domainForm.getByRole('button', { name: /^Add domain$/ }).click();
|
||||
await expect(page.locator('.domain-row')).toContainText(domain);
|
||||
|
||||
// 3. Create the script on the Scripts tab.
|
||||
await page.getByRole('button', { name: /^Scripts \(\d+\)$/ }).click();
|
||||
await page.getByRole('link', { name: 'Scripts' }).click();
|
||||
await page.getByRole('button', { name: /^New script$/ }).click();
|
||||
await page.getByLabel('Name').fill(scriptName);
|
||||
await fillCodeMirror(page, '.cm-content', scriptSource);
|
||||
|
||||
@@ -47,7 +47,7 @@ test.describe('B5 app members', () => {
|
||||
cleanup.adminUser(userId);
|
||||
|
||||
await page.goto(`/admin/apps/${slug}`);
|
||||
await page.getByRole('button', { name: /^Members \(\d+\)$/ }).click();
|
||||
await page.getByRole('link', { name: 'Members' }).click();
|
||||
|
||||
// Invite. Both selects sit in `form.create-form`; locate them
|
||||
// by position to avoid getByLabel ambiguity (the Svelte
|
||||
@@ -92,7 +92,7 @@ test.describe('B5 app members', () => {
|
||||
}
|
||||
|
||||
await page.goto(`/admin/apps/${slug}`);
|
||||
await page.getByRole('button', { name: /^Members \(\d+\)$/ }).click();
|
||||
await page.getByRole('link', { name: 'Members' }).click();
|
||||
await page.getByRole('button', { name: new RegExp(`Member actions for ${username}`) }).click();
|
||||
await page.getByRole('menuitem', { name: /^Make editor$/ }).click();
|
||||
|
||||
@@ -131,11 +131,11 @@ test.describe('B5 app members', () => {
|
||||
await viewerPage.goto(`/admin/apps/${slug}`);
|
||||
// Scripts tab loads — that's what a viewer sees.
|
||||
await expect(
|
||||
viewerPage.getByRole('button', { name: /^Scripts \(\d+\)$/ })
|
||||
viewerPage.getByRole('link', { name: 'Scripts' })
|
||||
).toBeVisible();
|
||||
// Members tab button is absent for non-app-admins.
|
||||
await expect(
|
||||
viewerPage.getByRole('button', { name: /^Members \(\d+\)$/ })
|
||||
viewerPage.getByRole('link', { name: 'Members' })
|
||||
).toHaveCount(0);
|
||||
} finally {
|
||||
await viewerPage.context().close();
|
||||
@@ -157,7 +157,7 @@ test.describe('B5 app members adversarial', () => {
|
||||
cleanup.adminUser(userId);
|
||||
|
||||
await page.goto(`/admin/apps/${slug}`);
|
||||
await page.getByRole('button', { name: /^Members \(\d+\)$/ }).click();
|
||||
await page.getByRole('link', { name: 'Members' }).click();
|
||||
const form = page.locator('form.create-form');
|
||||
const roleSelect = form.locator('select').nth(1);
|
||||
const optionValues = await roleSelect.evaluate((el: HTMLSelectElement) =>
|
||||
|
||||
Reference in New Issue
Block a user