Redesign UI with new token system, primitives, and motion
Restraint-first design language: neutral gray surfaces + one blue accent (cyan/amber/red reserved for state), 8pt spacing, softer radii, one ambient + one raised shadow, standardized motion tokens. Alfa Slab One demoted to BrandMark only; Inter carries all page copy. New primitives (Button, Card, Badge, Stat, SectionHeader, Skeleton, EmptyState, Tabs, Breadcrumbs, StatusPip, Field, Input, Select, Textarea) plus motion utilities (tweenNumber, viewTransition) and a global toast system. All eight route surfaces rewritten on top: Fleet gains an overview hero, Server detail restructures into tabs, Deployments gets a collapsible drift summary + per-server pipeline visual, and the scripts/configs/plugins/betas flows adopt the new form primitives. Sticky translucent nav with backdrop blur, view-transition cross-fades between routes, staggered card entrance on Fleet, breathing status pip halo, tabular-numeric player counts. Gmail-style g-key nav shortcuts. Mobile stacks below 720px; prefers-reduced-motion neutralizes durations. Legacy tokens preserved as aliases so any un-migrated code still renders.
This commit is contained in:
@@ -1,39 +1,38 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { onMount, onDestroy } from 'svelte';
|
import { onMount, onDestroy } from 'svelte';
|
||||||
import { goto } from '$app/navigation';
|
import { goto } from '$app/navigation';
|
||||||
|
import Card from './primitives/Card.svelte';
|
||||||
|
import Badge from './primitives/Badge.svelte';
|
||||||
|
import Button from './primitives/Button.svelte';
|
||||||
|
import SectionHeader from './primitives/SectionHeader.svelte';
|
||||||
|
import Breadcrumbs from './primitives/Breadcrumbs.svelte';
|
||||||
|
import EmptyState from './primitives/EmptyState.svelte';
|
||||||
|
import Field from './primitives/Field.svelte';
|
||||||
|
import Input from './primitives/Input.svelte';
|
||||||
|
import Select from './primitives/Select.svelte';
|
||||||
|
|
||||||
type Family = 'script' | 'config' | 'plugin';
|
type Family = 'script' | 'config' | 'plugin';
|
||||||
|
|
||||||
interface Props {
|
interface Props { id: number; family: Family; }
|
||||||
id: number;
|
|
||||||
family: Family;
|
|
||||||
}
|
|
||||||
let { id, family }: Props = $props();
|
let { id, family }: Props = $props();
|
||||||
|
|
||||||
const basePath = $derived(`/${family}s`);
|
const basePath = $derived(`/${family}s`);
|
||||||
const backLabel = $derived(`← all ${family}s`);
|
const crumbLabel = $derived(family.charAt(0).toUpperCase() + family.slice(1) + 's');
|
||||||
|
|
||||||
interface Artifact {
|
interface Artifact {
|
||||||
id: number;
|
id: number; name: string; target_rel_path: string;
|
||||||
name: string;
|
scope_type: 'game' | 'map' | null; scope_value: string | null;
|
||||||
target_rel_path: string;
|
|
||||||
scope_type: 'game' | 'map' | null;
|
|
||||||
scope_value: string | null;
|
|
||||||
current_version_id: number | null;
|
current_version_id: number | null;
|
||||||
kind: 'script' | 'config' | 'plugin' | 'baseline';
|
kind: 'script' | 'config' | 'plugin' | 'baseline';
|
||||||
created_at: string;
|
created_at: string;
|
||||||
}
|
}
|
||||||
interface Version {
|
interface Version {
|
||||||
id: number;
|
id: number; version: number; sha256: string; size: number;
|
||||||
version: number;
|
notes: string | null; state: 'untested' | 'tested' | 'test-failed';
|
||||||
sha256: string;
|
|
||||||
size: number;
|
|
||||||
notes: string | null;
|
|
||||||
state: 'untested' | 'tested' | 'test-failed';
|
|
||||||
uploaded_at: string;
|
uploaded_at: string;
|
||||||
}
|
}
|
||||||
interface ServerRow { name: string; game: string | null; map: string | null }
|
interface ServerRow { name: string; game: string | null; map: string | null; }
|
||||||
interface ScopeOptions { games: string[]; mapsByGame: Record<string, string[]> }
|
interface ScopeOptions { games: string[]; mapsByGame: Record<string, string[]>; }
|
||||||
|
|
||||||
let artifact = $state<Artifact | null>(null);
|
let artifact = $state<Artifact | null>(null);
|
||||||
let versions = $state<Version[]>([]);
|
let versions = $state<Version[]>([]);
|
||||||
@@ -42,7 +41,6 @@
|
|||||||
let loading = $state(true);
|
let loading = $state(true);
|
||||||
let flash = $state<string | null>(null);
|
let flash = $state<string | null>(null);
|
||||||
|
|
||||||
// Modal-form state (only used while the corresponding dialog is open).
|
|
||||||
let scopeType = $state<'none' | 'game' | 'map'>('none');
|
let scopeType = $state<'none' | 'game' | 'map'>('none');
|
||||||
let scopeGame = $state('');
|
let scopeGame = $state('');
|
||||||
let scopeMap = $state('');
|
let scopeMap = $state('');
|
||||||
@@ -55,11 +53,8 @@
|
|||||||
|
|
||||||
let scopeDialog = $state<HTMLDialogElement | null>(null);
|
let scopeDialog = $state<HTMLDialogElement | null>(null);
|
||||||
let uploadDialog = $state<HTMLDialogElement | null>(null);
|
let uploadDialog = $state<HTMLDialogElement | null>(null);
|
||||||
// Kept around so we can reseed scopeGame after servers load (map→game backfill).
|
|
||||||
let fleetServers: ServerRow[] = [];
|
let fleetServers: ServerRow[] = [];
|
||||||
|
|
||||||
// Polling handle for auto-refresh of server-owned state (artifact, versions,
|
|
||||||
// matched servers, runningBetaId). Form state is never reseeded from polling.
|
|
||||||
let poll: ReturnType<typeof setInterval> | null = null;
|
let poll: ReturnType<typeof setInterval> | null = null;
|
||||||
|
|
||||||
const editedScopeValue = $derived.by(() => {
|
const editedScopeValue = $derived.by(() => {
|
||||||
@@ -80,10 +75,12 @@
|
|||||||
|
|
||||||
function scopeLabel(s: Artifact): string {
|
function scopeLabel(s: Artifact): string {
|
||||||
if (!s.scope_type) return 'unscoped';
|
if (!s.scope_type) return 'unscoped';
|
||||||
return `${s.scope_type}=${s.scope_value ?? '?'}`;
|
return `${s.scope_type} · ${s.scope_value ?? '?'}`;
|
||||||
}
|
}
|
||||||
function stateClass(state: Version['state']): string {
|
function stateVariant(s: Version['state']): 'online' | 'danger' | 'neutral' {
|
||||||
return `tag state-${state}`;
|
return s === 'tested' ? 'online' :
|
||||||
|
s === 'test-failed' ? 'danger' :
|
||||||
|
'neutral';
|
||||||
}
|
}
|
||||||
|
|
||||||
async function load({ seedForm = true }: { seedForm?: boolean } = {}): Promise<void> {
|
async function load({ seedForm = true }: { seedForm?: boolean } = {}): Promise<void> {
|
||||||
@@ -94,10 +91,8 @@
|
|||||||
]);
|
]);
|
||||||
if (!detailRes.ok) { loading = false; return; }
|
if (!detailRes.ok) { loading = false; return; }
|
||||||
const body = (await detailRes.json()) as {
|
const body = (await detailRes.json()) as {
|
||||||
script: Artifact;
|
script: Artifact; versions: Version[];
|
||||||
versions: Version[];
|
matchedServers: string[]; runningBetaId: number | null;
|
||||||
matchedServers: string[];
|
|
||||||
runningBetaId: number | null;
|
|
||||||
};
|
};
|
||||||
artifact = body.script;
|
artifact = body.script;
|
||||||
versions = body.versions;
|
versions = body.versions;
|
||||||
@@ -126,8 +121,7 @@
|
|||||||
const owner = fleetServers.find((sv) => sv.map === scopeMap);
|
const owner = fleetServers.find((sv) => sv.map === scopeMap);
|
||||||
scopeGame = owner?.game ?? '';
|
scopeGame = owner?.game ?? '';
|
||||||
} else {
|
} else {
|
||||||
scopeGame = '';
|
scopeGame = ''; scopeMap = '';
|
||||||
scopeMap = '';
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -135,9 +129,7 @@
|
|||||||
load();
|
load();
|
||||||
poll = setInterval(() => load({ seedForm: false }), 5000);
|
poll = setInterval(() => load({ seedForm: false }), 5000);
|
||||||
});
|
});
|
||||||
onDestroy(() => {
|
onDestroy(() => { if (poll) clearInterval(poll); });
|
||||||
if (poll) clearInterval(poll);
|
|
||||||
});
|
|
||||||
|
|
||||||
function openScopeModal(): void {
|
function openScopeModal(): void {
|
||||||
if (runningBetaId !== null) return;
|
if (runningBetaId !== null) return;
|
||||||
@@ -174,8 +166,7 @@
|
|||||||
async function uploadVersion(e: Event): Promise<void> {
|
async function uploadVersion(e: Event): Promise<void> {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
if (!versionFile || uploadingVersion) return;
|
if (!versionFile || uploadingVersion) return;
|
||||||
uploadingVersion = true;
|
uploadingVersion = true; flash = null;
|
||||||
flash = null;
|
|
||||||
const form = new FormData();
|
const form = new FormData();
|
||||||
form.append('content', versionFile);
|
form.append('content', versionFile);
|
||||||
if (versionNotes.trim()) form.append('notes', versionNotes.trim());
|
if (versionNotes.trim()) form.append('notes', versionNotes.trim());
|
||||||
@@ -186,8 +177,7 @@
|
|||||||
flash = body.error ?? `HTTP ${res.status}`;
|
flash = body.error ?? `HTTP ${res.status}`;
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
versionFile = null;
|
versionFile = null; versionNotes = '';
|
||||||
versionNotes = '';
|
|
||||||
uploadDialog?.close();
|
uploadDialog?.close();
|
||||||
await load();
|
await load();
|
||||||
} finally {
|
} finally {
|
||||||
@@ -199,11 +189,10 @@
|
|||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
if (updatingScope) return;
|
if (updatingScope) return;
|
||||||
if (scopeType !== 'none' && !editedScopeValue) {
|
if (scopeType !== 'none' && !editedScopeValue) {
|
||||||
flash = `pick a ${scopeType}`;
|
flash = `Pick a ${scopeType}`;
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
updatingScope = true;
|
updatingScope = true; flash = null;
|
||||||
flash = null;
|
|
||||||
try {
|
try {
|
||||||
const res = await fetch(`/api/scripts/${id}/scope`, {
|
const res = await fetch(`/api/scripts/${id}/scope`, {
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
@@ -229,322 +218,344 @@
|
|||||||
if (!confirm(`Delete this ${family}?`)) return;
|
if (!confirm(`Delete this ${family}?`)) return;
|
||||||
const res = await fetch(`/api/scripts/${id}`, { method: 'DELETE' });
|
const res = await fetch(`/api/scripts/${id}`, { method: 'DELETE' });
|
||||||
const body = (await res.json()) as { ok: boolean; error?: string };
|
const body = (await res.json()) as { ok: boolean; error?: string };
|
||||||
if (!body.ok) { flash = body.error ?? 'delete failed'; return; }
|
if (!body.ok) { flash = body.error ?? 'Delete failed'; return; }
|
||||||
goto(basePath);
|
goto(basePath);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
let gameOptions = $derived([
|
||||||
|
{ value: '', label: '— Pick a game —', disabled: true },
|
||||||
|
...scopeOptions.games.map((g) => ({ value: g, label: g }))
|
||||||
|
]);
|
||||||
|
let mapOptions = $derived([
|
||||||
|
{ value: '', label: '— Pick a map —', disabled: true },
|
||||||
|
...(scopeOptions.mapsByGame[scopeGame] ?? []).map((m) => ({ value: m, label: m }))
|
||||||
|
]);
|
||||||
|
let scopeTypeOptions = [
|
||||||
|
{ value: 'none', label: 'Unscoped' },
|
||||||
|
{ value: 'game', label: 'Game' },
|
||||||
|
{ value: 'map', label: 'Map' }
|
||||||
|
];
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
{#if loading}
|
{#if loading}
|
||||||
<p class="empty">loading…</p>
|
<div class="loading">Loading…</div>
|
||||||
{:else if !artifact}
|
{:else if !artifact}
|
||||||
<p class="empty">{family} not found</p>
|
<EmptyState title="Not found" description="This {family} may have been deleted." />
|
||||||
{:else}
|
{:else}
|
||||||
<a class="back" href={basePath}>{backLabel}</a>
|
{@const a = artifact}
|
||||||
<h1>{artifact.name}</h1>
|
<div class="page">
|
||||||
<div class="sub mono">{artifact.target_rel_path}</div>
|
<SectionHeader title={a.name} subtitle={a.target_rel_path}>
|
||||||
|
{#snippet crumbs()}
|
||||||
|
<Breadcrumbs items={[{ label: crumbLabel, href: basePath }, { label: a.name }]} />
|
||||||
|
{/snippet}
|
||||||
|
</SectionHeader>
|
||||||
|
|
||||||
{#if runningBetaId}
|
{#if runningBetaId}
|
||||||
<section class="panel banner">
|
<div class="warn-banner">
|
||||||
<p>
|
Beta <a href="/betas/{runningBetaId}"><strong>#{runningBetaId}</strong></a> is running for this {family}.
|
||||||
Beta <a href="/betas/{runningBetaId}"><strong>#{runningBetaId}</strong></a> is currently running for this {family}.
|
|
||||||
Rollback or promote it before making changes.
|
Rollback or promote it before making changes.
|
||||||
</p>
|
</div>
|
||||||
</section>
|
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
<section class="panel">
|
<Card padding="lg">
|
||||||
|
<div class="panel-head">
|
||||||
<h2>Details</h2>
|
<h2>Details</h2>
|
||||||
<div class="stats">
|
<div class="head-actions">
|
||||||
<div class="stat">
|
<Button variant="secondary" size="sm" onclick={openScopeModal} disabled={runningBetaId !== null}>
|
||||||
<div class="k">target file</div>
|
Edit scope
|
||||||
<div class="v mono">{artifact.target_rel_path}</div>
|
</Button>
|
||||||
|
<Button variant="secondary" size="sm" onclick={openUploadModal} disabled={runningBetaId !== null}>
|
||||||
|
Upload new version
|
||||||
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
<div class="stat">
|
|
||||||
<div class="k">scope</div>
|
|
||||||
<div class="v mono">{scopeLabel(artifact)}</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="stat">
|
|
||||||
<div class="k">applies to</div>
|
<div class="kv-grid">
|
||||||
<div class="v mono">
|
<div class="kv">
|
||||||
{#if !artifact.scope_type}
|
<span class="k">Target file</span>
|
||||||
<span class="dim">unscoped — deploy from a beta</span>
|
<span class="v mono">{a.target_rel_path}</span>
|
||||||
|
</div>
|
||||||
|
<div class="kv">
|
||||||
|
<span class="k">Scope</span>
|
||||||
|
<span class="v">
|
||||||
|
<Badge
|
||||||
|
variant={a.scope_type === 'game' ? 'info' : a.scope_type === 'map' ? 'warning' : 'neutral'}
|
||||||
|
size="sm"
|
||||||
|
>
|
||||||
|
{scopeLabel(a)}
|
||||||
|
</Badge>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="kv">
|
||||||
|
<span class="k">Applies to</span>
|
||||||
|
<span class="v mono">
|
||||||
|
{#if !a.scope_type}
|
||||||
|
<span class="dim">Unscoped — deploy from a beta</span>
|
||||||
{:else if matchedServers.length === 0}
|
{:else if matchedServers.length === 0}
|
||||||
<span class="warn">no matching servers</span>
|
<span class="warn">No matching servers</span>
|
||||||
{:else}
|
{:else}
|
||||||
{matchedServers.join(', ')}
|
{matchedServers.join(', ')}
|
||||||
{/if}
|
{/if}
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="kv">
|
||||||
<div class="stat">
|
<span class="k">Current version</span>
|
||||||
<div class="k">current version</div>
|
<span class="v mono">
|
||||||
<div class="v mono">
|
|
||||||
{#if currentVersion}
|
{#if currentVersion}
|
||||||
v{currentVersion.version} · {currentVersion.sha256.slice(0, 8)} <span class="tag cur">promoted</span>
|
v{currentVersion.version} · {currentVersion.sha256.slice(0, 8)}
|
||||||
|
<Badge variant="online" size="sm">Promoted</Badge>
|
||||||
{:else}
|
{:else}
|
||||||
<span class="dim">— never promoted (open a beta from <a href="/betas">/betas</a>)</span>
|
<span class="dim">Never promoted — open a <a href="/betas">beta</a></span>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
{#if showLatestSeparately && latestVersion}
|
{#if showLatestSeparately && latestVersion}
|
||||||
<div class="stat">
|
<div class="kv">
|
||||||
<div class="k">latest version</div>
|
<span class="k">Latest version</span>
|
||||||
<div class="v mono">
|
<span class="v mono">
|
||||||
v{latestVersion.version} · {latestVersion.sha256.slice(0, 8)}
|
v{latestVersion.version} · {latestVersion.sha256.slice(0, 8)}
|
||||||
<span class={stateClass(latestVersion.state)}>{latestVersion.state}</span>
|
<Badge variant={stateVariant(latestVersion.state)} size="sm">{latestVersion.state}</Badge>
|
||||||
</div>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
<div class="actions">
|
</Card>
|
||||||
<button
|
|
||||||
class="secondary"
|
|
||||||
onclick={openScopeModal}
|
|
||||||
disabled={runningBetaId !== null}
|
|
||||||
title={runningBetaId !== null ? 'a beta is currently running' : ''}
|
|
||||||
>
|
|
||||||
edit scope
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
class="secondary"
|
|
||||||
onclick={openUploadModal}
|
|
||||||
disabled={runningBetaId !== null}
|
|
||||||
title={runningBetaId !== null ? 'a beta is currently running' : ''}
|
|
||||||
>
|
|
||||||
upload new version
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="panel">
|
<Card padding="lg">
|
||||||
|
<div class="panel-head">
|
||||||
<h2>Version history</h2>
|
<h2>Version history</h2>
|
||||||
|
<Badge variant="neutral" size="sm">{versions.length}</Badge>
|
||||||
|
</div>
|
||||||
{#if versions.length === 0}
|
{#if versions.length === 0}
|
||||||
<p class="empty">none</p>
|
<EmptyState title="No versions yet" description="Upload a first version to get started." />
|
||||||
{:else}
|
{:else}
|
||||||
<div class="versions">
|
<div class="version-list">
|
||||||
{#each versions as v (v.id)}
|
{#each versions as v (v.id)}
|
||||||
<div class="version {artifact.current_version_id === v.id ? 'current' : ''}">
|
<div class="version-row" class:current={a.current_version_id === v.id}>
|
||||||
<span class="v-num mono">v{v.version}</span>
|
<span class="v-num">v{v.version}</span>
|
||||||
<span class="v-sha mono">{v.sha256.slice(0, 12)}</span>
|
<span class="v-sha">{v.sha256.slice(0, 12)}</span>
|
||||||
<span class="v-size mono">{v.size}B</span>
|
<span class="v-size">{v.size} B</span>
|
||||||
<span class="v-notes">{v.notes ?? ''}</span>
|
<span class="v-notes">{v.notes ?? ''}</span>
|
||||||
<span class="v-when mono">{v.uploaded_at}</span>
|
<span class="v-when">{v.uploaded_at}</span>
|
||||||
{#if artifact.current_version_id === v.id}
|
{#if a.current_version_id === v.id}
|
||||||
<span class="tag cur">promoted</span>
|
<Badge variant="online" size="sm">Promoted</Badge>
|
||||||
{:else if v.state === 'tested'}
|
|
||||||
<span class="tag state-tested">tested</span>
|
|
||||||
{:else if v.state === 'test-failed'}
|
|
||||||
<span class="tag state-test-failed">test-failed</span>
|
|
||||||
{:else}
|
{:else}
|
||||||
<span class="tag state-untested">untested</span>
|
<Badge variant={stateVariant(v.state)} size="sm">{v.state.replace('-', ' ')}</Badge>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
{/each}
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
</section>
|
</Card>
|
||||||
|
|
||||||
<section class="panel">
|
<Card padding="lg">
|
||||||
<h2>Danger</h2>
|
<div class="panel-head"><h2>Danger zone</h2></div>
|
||||||
<button class="danger" onclick={deleteArtifact}>delete {family}</button>
|
<Button variant="danger" onclick={deleteArtifact}>Delete {family}</Button>
|
||||||
</section>
|
</Card>
|
||||||
|
|
||||||
{#if flash}<p class="flash">{flash}</p>{/if}
|
{#if flash}<div class="alert">{flash}</div>{/if}
|
||||||
|
|
||||||
|
<!-- Scope dialog -->
|
||||||
<dialog bind:this={scopeDialog} onclick={(e) => onDialogClick(scopeDialog, e)}>
|
<dialog bind:this={scopeDialog} onclick={(e) => onDialogClick(scopeDialog, e)}>
|
||||||
<form class="dlg" onsubmit={saveScope}>
|
<form class="dlg" onsubmit={saveScope}>
|
||||||
|
<header class="dlg-head">
|
||||||
<h3>Edit scope</h3>
|
<h3>Edit scope</h3>
|
||||||
<div class="scope-form">
|
<button type="button" class="close" onclick={cancelScopeModal} aria-label="Close">×</button>
|
||||||
<select bind:value={scopeType} disabled={updatingScope}>
|
</header>
|
||||||
<option value="none">unscoped</option>
|
<Field label="Scope">
|
||||||
<option value="game">game</option>
|
<div class="scope-row">
|
||||||
<option value="map">map</option>
|
<Select bind:value={scopeType} options={scopeTypeOptions} disabled={updatingScope} />
|
||||||
</select>
|
{#if scopeType === 'game' || scopeType === 'map'}
|
||||||
{#if scopeType === 'game'}
|
<Select bind:value={scopeGame} options={gameOptions} disabled={updatingScope} />
|
||||||
<select bind:value={scopeGame} disabled={updatingScope}>
|
{/if}
|
||||||
<option value="">— pick a game —</option>
|
{#if scopeType === 'map'}
|
||||||
{#each scopeOptions.games as g (g)}
|
<Select bind:value={scopeMap} options={mapOptions} disabled={updatingScope || !scopeGame} />
|
||||||
<option value={g}>{g}</option>
|
|
||||||
{/each}
|
|
||||||
</select>
|
|
||||||
{:else if scopeType === 'map'}
|
|
||||||
<select bind:value={scopeGame} disabled={updatingScope}>
|
|
||||||
<option value="">— pick a game —</option>
|
|
||||||
{#each scopeOptions.games as g (g)}
|
|
||||||
<option value={g}>{g}</option>
|
|
||||||
{/each}
|
|
||||||
</select>
|
|
||||||
<select bind:value={scopeMap} disabled={updatingScope || !scopeGame}>
|
|
||||||
<option value="">— pick a map —</option>
|
|
||||||
{#each (scopeOptions.mapsByGame[scopeGame] ?? []) as m (m)}
|
|
||||||
<option value={m}>{m}</option>
|
|
||||||
{/each}
|
|
||||||
</select>
|
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
|
</Field>
|
||||||
<div class="dlg-actions">
|
<div class="dlg-actions">
|
||||||
<button type="button" class="secondary" onclick={cancelScopeModal} disabled={updatingScope}>cancel</button>
|
<Button variant="ghost" onclick={cancelScopeModal} disabled={updatingScope}>Cancel</Button>
|
||||||
<button type="submit" class="primary" disabled={updatingScope}>
|
<Button type="submit" variant="primary" disabled={updatingScope} loading={updatingScope}>
|
||||||
{updatingScope ? 'saving…' : 'save scope'}
|
Save scope
|
||||||
</button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
{#if flash}<p class="flash">{flash}</p>{/if}
|
{#if flash}<div class="alert alert-danger">{flash}</div>{/if}
|
||||||
</form>
|
</form>
|
||||||
</dialog>
|
</dialog>
|
||||||
|
|
||||||
|
<!-- Upload dialog -->
|
||||||
<dialog bind:this={uploadDialog} onclick={(e) => onDialogClick(uploadDialog, e)}>
|
<dialog bind:this={uploadDialog} onclick={(e) => onDialogClick(uploadDialog, e)}>
|
||||||
<form class="dlg" onsubmit={uploadVersion}>
|
<form class="dlg" onsubmit={uploadVersion}>
|
||||||
|
<header class="dlg-head">
|
||||||
<h3>Upload new version</h3>
|
<h3>Upload new version</h3>
|
||||||
<div class="version-form">
|
<button type="button" class="close" onclick={cancelUploadModal} aria-label="Close">×</button>
|
||||||
<input type="file" onchange={pickVersionFile} disabled={uploadingVersion} />
|
</header>
|
||||||
<input type="text" bind:value={versionNotes} placeholder="notes (optional)" disabled={uploadingVersion} />
|
<Field label="File">
|
||||||
</div>
|
<Input type="file" onchange={pickVersionFile} disabled={uploadingVersion} />
|
||||||
|
</Field>
|
||||||
|
<Field label="Notes" hint="Optional. What changed since the previous version.">
|
||||||
|
<Input bind:value={versionNotes} placeholder="what changed" disabled={uploadingVersion} />
|
||||||
|
</Field>
|
||||||
<div class="dlg-actions">
|
<div class="dlg-actions">
|
||||||
<button type="button" class="secondary" onclick={cancelUploadModal} disabled={uploadingVersion}>cancel</button>
|
<Button variant="ghost" onclick={cancelUploadModal} disabled={uploadingVersion}>Cancel</Button>
|
||||||
<button type="submit" class="primary" disabled={uploadingVersion || !versionFile}>
|
<Button
|
||||||
{uploadingVersion ? 'uploading…' : 'upload version'}
|
type="submit"
|
||||||
</button>
|
variant="primary"
|
||||||
|
disabled={uploadingVersion || !versionFile}
|
||||||
|
loading={uploadingVersion}
|
||||||
|
>
|
||||||
|
Upload version
|
||||||
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
{#if flash}<p class="flash">{flash}</p>{/if}
|
{#if flash}<div class="alert alert-danger">{flash}</div>{/if}
|
||||||
</form>
|
</form>
|
||||||
</dialog>
|
</dialog>
|
||||||
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.back { color: var(--ink-500); font-family: var(--font-mono); font-size: var(--text-mono-sm); text-decoration: none; }
|
.page { display: flex; flex-direction: column; gap: var(--space-6); }
|
||||||
.back:hover { color: var(--ink-100); }
|
.loading { text-align: center; padding: var(--space-16); color: var(--text-tertiary); }
|
||||||
h1 { color: var(--cream); font-family: var(--font-display); font-size: var(--text-2xl); letter-spacing: 1.5px; margin: 12px 0 4px; }
|
|
||||||
.sub { color: var(--ink-500); font-size: var(--text-mono); margin-bottom: 24px; }
|
|
||||||
.empty { color: var(--ink-500); font-family: var(--font-mono); font-size: var(--text-mono); margin: 0; }
|
|
||||||
|
|
||||||
.panel { background: var(--bg-nav); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--pad-panel); margin-bottom: 20px; }
|
.warn-banner {
|
||||||
.banner { background: rgba(255, 176, 32, 0.08); border-color: rgba(255, 176, 32, 0.3); }
|
padding: var(--space-3) var(--space-4);
|
||||||
.banner p { margin: 0; color: var(--cream-dim); font-family: var(--font-body); font-size: var(--text-sm); }
|
background: rgba(255, 176, 32, 0.06);
|
||||||
.banner a { color: var(--amber-500); }
|
border: 1px solid rgba(255, 176, 32, 0.28);
|
||||||
h2 { margin: 0 0 14px; font-family: var(--font-body); font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--ink-300); }
|
border-radius: var(--radius-md);
|
||||||
|
color: var(--text-primary);
|
||||||
|
font-size: var(--text-sm);
|
||||||
|
}
|
||||||
|
.warn-banner a { color: var(--state-warning); text-decoration: underline; }
|
||||||
|
|
||||||
.stats {
|
.panel-head {
|
||||||
|
display: flex; align-items: center; justify-content: space-between;
|
||||||
|
gap: var(--space-3); margin-bottom: var(--space-4);
|
||||||
|
}
|
||||||
|
.panel-head h2 {
|
||||||
|
margin: 0;
|
||||||
|
font-family: var(--font-body);
|
||||||
|
font-size: var(--text-md);
|
||||||
|
font-weight: var(--weight-semibold);
|
||||||
|
color: var(--text-primary);
|
||||||
|
}
|
||||||
|
.head-actions { display: flex; gap: var(--space-2); }
|
||||||
|
|
||||||
|
.kv-grid {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
|
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
||||||
gap: 12px;
|
gap: var(--space-3);
|
||||||
}
|
}
|
||||||
.stat {
|
.kv {
|
||||||
background: var(--bg-card);
|
display: flex; flex-direction: column; gap: 4px;
|
||||||
border: 1px solid var(--border);
|
padding: var(--space-3) var(--space-4);
|
||||||
border-radius: var(--r-sm);
|
background: var(--surface-sunken);
|
||||||
padding: 12px 14px;
|
border: 1px solid var(--border-subtle);
|
||||||
|
border-radius: var(--radius-md);
|
||||||
}
|
}
|
||||||
.stat .k {
|
.k {
|
||||||
color: var(--ink-500);
|
|
||||||
font-size: var(--text-xs);
|
font-size: var(--text-xs);
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
letter-spacing: 1px;
|
letter-spacing: var(--tracking-label);
|
||||||
|
color: var(--text-tertiary);
|
||||||
|
font-weight: var(--weight-semibold);
|
||||||
}
|
}
|
||||||
.stat .v {
|
.v {
|
||||||
color: var(--ink-100);
|
|
||||||
margin-top: 6px;
|
|
||||||
font-size: var(--text-base);
|
|
||||||
word-break: break-word;
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
.dim { color: var(--ink-500); }
|
|
||||||
.warn { color: var(--amber-500); }
|
|
||||||
|
|
||||||
.actions { display: flex; gap: 10px; margin-top: 18px; }
|
|
||||||
button.secondary {
|
|
||||||
background: var(--bg-card);
|
|
||||||
color: var(--ink-100);
|
|
||||||
border: 1px solid var(--border);
|
|
||||||
border-radius: var(--r-sm);
|
|
||||||
padding: 10px 16px;
|
|
||||||
font-family: var(--font-body);
|
|
||||||
font-size: var(--text-sm);
|
font-size: var(--text-sm);
|
||||||
cursor: pointer;
|
color: var(--text-primary);
|
||||||
|
display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
|
||||||
|
word-break: break-word;
|
||||||
}
|
}
|
||||||
button.secondary:hover:not(:disabled) { border-color: var(--accent); box-shadow: var(--accent-glow); }
|
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
|
||||||
button.secondary:disabled { opacity: 0.4; cursor: default; }
|
.dim { color: var(--text-tertiary); }
|
||||||
|
.warn { color: var(--state-warning); }
|
||||||
|
.v a { color: var(--accent-primary-hover); }
|
||||||
|
|
||||||
.scope-form { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
|
.version-list { display: flex; flex-direction: column; gap: var(--space-1); }
|
||||||
.scope-form select, .version-form input {
|
.version-row {
|
||||||
background: var(--bg-page);
|
|
||||||
color: var(--ink-100);
|
|
||||||
border: 1px solid var(--border);
|
|
||||||
border-radius: var(--r-sm);
|
|
||||||
padding: 10px 12px;
|
|
||||||
font-family: var(--font-mono);
|
|
||||||
font-size: var(--text-mono);
|
|
||||||
}
|
|
||||||
|
|
||||||
.version-form { display: flex; gap: 10px; align-items: center; }
|
|
||||||
.version-form input[type=text] { flex: 1; }
|
|
||||||
|
|
||||||
.versions { display: flex; flex-direction: column; gap: 6px; }
|
|
||||||
.version {
|
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 80px 130px 90px 1fr 200px auto;
|
grid-template-columns: 60px 130px 80px 1fr 220px auto;
|
||||||
gap: 14px;
|
gap: var(--space-3);
|
||||||
padding: 10px 14px;
|
|
||||||
background: var(--bg-card);
|
|
||||||
border: 1px solid var(--border);
|
|
||||||
border-radius: var(--r-sm);
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
font-size: var(--text-mono);
|
padding: var(--space-2) var(--space-3);
|
||||||
|
background: color-mix(in oklab, var(--surface) 88%, transparent);
|
||||||
|
border: 1px solid var(--border-subtle);
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
font-family: var(--font-mono);
|
||||||
|
font-size: var(--text-xs);
|
||||||
}
|
}
|
||||||
.version.current { border-color: var(--spark-500); box-shadow: 0 0 0 1px var(--spark-500); }
|
.version-row.current {
|
||||||
.v-num { color: var(--cream); font-weight: 600; }
|
border-color: rgba(124, 212, 255, 0.35);
|
||||||
.v-sha, .v-size, .v-when { color: var(--ink-500); }
|
background: rgba(124, 212, 255, 0.04);
|
||||||
.v-notes { color: var(--ink-300); font-family: var(--font-body); font-size: var(--text-sm); }
|
|
||||||
.tag { padding: 2px 8px; border-radius: var(--r-sm); font-family: var(--font-mono); font-size: var(--text-xs); border: 1px solid transparent; }
|
|
||||||
.tag.cur { background: rgba(124, 212, 255, 0.15); border-color: rgba(124, 212, 255, 0.4); color: var(--spark-500); }
|
|
||||||
.tag.state-untested { background: var(--bg-nav); border-color: var(--border); color: var(--ink-300); }
|
|
||||||
.tag.state-tested { background: rgba(124, 212, 255, 0.10); border-color: rgba(124, 212, 255, 0.3); color: var(--spark-500); }
|
|
||||||
.tag.state-test-failed { background: rgba(255, 92, 92, 0.10); border-color: rgba(255, 92, 92, 0.4); color: var(--danger-500); }
|
|
||||||
|
|
||||||
.danger {
|
|
||||||
background: var(--bg-nav);
|
|
||||||
border: 1px solid rgba(255, 48, 80, 0.4);
|
|
||||||
color: var(--danger-500);
|
|
||||||
border-radius: var(--r-sm);
|
|
||||||
padding: 10px 16px;
|
|
||||||
font-family: var(--font-body);
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
}
|
||||||
|
.v-num { color: var(--text-primary); font-weight: var(--weight-semibold); }
|
||||||
|
.v-sha, .v-size, .v-when { color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
|
||||||
|
.v-notes { color: var(--text-secondary); font-family: var(--font-body); font-size: var(--text-sm); }
|
||||||
|
|
||||||
.flash { color: var(--danger-500); font-family: var(--font-mono); font-size: var(--text-mono); margin-top: 12px; }
|
.alert {
|
||||||
.mono { font-family: var(--font-mono); }
|
padding: var(--space-3) var(--space-4);
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
color: var(--state-danger);
|
||||||
|
background: rgba(255, 86, 112, 0.06);
|
||||||
|
border: 1px solid rgba(255, 86, 112, 0.28);
|
||||||
|
font-family: var(--font-mono);
|
||||||
|
font-size: var(--text-xs);
|
||||||
|
}
|
||||||
|
.alert-danger { background: rgba(255, 86, 112, 0.08); }
|
||||||
|
|
||||||
|
/* Dialogs */
|
||||||
dialog {
|
dialog {
|
||||||
background: var(--bg-nav);
|
background: var(--surface);
|
||||||
color: var(--ink-100);
|
color: var(--text-primary);
|
||||||
border: 1px solid var(--border);
|
border: 1px solid var(--border-strong);
|
||||||
border-radius: var(--r-md);
|
border-radius: var(--radius-lg);
|
||||||
padding: 0;
|
padding: 0;
|
||||||
max-width: 560px;
|
max-width: 560px;
|
||||||
width: calc(100vw - 40px);
|
width: calc(100vw - 40px);
|
||||||
|
box-shadow: var(--shadow-raised);
|
||||||
|
}
|
||||||
|
dialog[open] { animation: dlg-in var(--dur-base) var(--ease-standard); }
|
||||||
|
@keyframes dlg-in {
|
||||||
|
from { opacity: 0; transform: translateY(6px) scale(0.98); }
|
||||||
|
to { opacity: 1; transform: translateY(0) scale(1); }
|
||||||
|
}
|
||||||
|
dialog::backdrop {
|
||||||
|
background: rgba(0, 0, 0, 0.55);
|
||||||
|
backdrop-filter: blur(6px);
|
||||||
|
-webkit-backdrop-filter: blur(6px);
|
||||||
|
}
|
||||||
|
.dlg {
|
||||||
|
display: flex; flex-direction: column; gap: var(--space-4);
|
||||||
|
padding: var(--space-6);
|
||||||
|
}
|
||||||
|
.dlg-head {
|
||||||
|
display: flex; align-items: center; justify-content: space-between;
|
||||||
}
|
}
|
||||||
dialog::backdrop { background: rgba(0, 0, 0, 0.6); }
|
|
||||||
.dlg { display: flex; flex-direction: column; gap: 14px; padding: var(--pad-panel); }
|
|
||||||
.dlg h3 {
|
.dlg h3 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-family: var(--font-body);
|
font-family: var(--font-body);
|
||||||
font-size: var(--text-xs);
|
font-size: var(--text-md);
|
||||||
font-weight: 700;
|
font-weight: var(--weight-semibold);
|
||||||
text-transform: uppercase;
|
color: var(--text-primary);
|
||||||
letter-spacing: 1.5px;
|
|
||||||
color: var(--ink-300);
|
|
||||||
}
|
}
|
||||||
.dlg-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 6px; }
|
.close {
|
||||||
button.primary {
|
appearance: none;
|
||||||
background: linear-gradient(180deg, var(--blue-500), var(--blue-600));
|
background: transparent;
|
||||||
border: 1px solid var(--blue-400);
|
border: none;
|
||||||
color: var(--cream);
|
color: var(--text-tertiary);
|
||||||
border-radius: var(--r-sm);
|
font-size: var(--text-xl);
|
||||||
padding: 10px 16px;
|
line-height: 1;
|
||||||
font-family: var(--font-body);
|
|
||||||
font-weight: 600;
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
padding: 4px 8px;
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
|
}
|
||||||
|
.close:hover { color: var(--text-primary); background: var(--surface-raised); }
|
||||||
|
|
||||||
|
.scope-row { display: flex; gap: var(--space-2); flex-wrap: wrap; }
|
||||||
|
.scope-row :global(.wrap) { flex: 1 1 140px; min-width: 140px; }
|
||||||
|
|
||||||
|
.dlg-actions { display: flex; gap: var(--space-2); justify-content: flex-end; }
|
||||||
|
|
||||||
|
@media (max-width: 720px) {
|
||||||
|
.version-row { grid-template-columns: 1fr; }
|
||||||
}
|
}
|
||||||
button.primary:disabled { opacity: 0.4; cursor: default; }
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,4 +1,8 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
|
// Alfa Slab One is imported *here*, not globally, so the rest of the
|
||||||
|
// product doesn't pay for a display face it never uses.
|
||||||
|
import '@fontsource/alfa-slab-one/400.css';
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
size?: 'sm' | 'md' | 'lg';
|
size?: 'sm' | 'md' | 'lg';
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,6 +1,10 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { onMount } from 'svelte';
|
import { onMount } from 'svelte';
|
||||||
import { goto } from '$app/navigation';
|
import { goto } from '$app/navigation';
|
||||||
|
import Button from './primitives/Button.svelte';
|
||||||
|
import Field from './primitives/Field.svelte';
|
||||||
|
import Input from './primitives/Input.svelte';
|
||||||
|
import Select from './primitives/Select.svelte';
|
||||||
|
|
||||||
interface T5MapEntry {
|
interface T5MapEntry {
|
||||||
friendly: string;
|
friendly: string;
|
||||||
@@ -34,8 +38,6 @@
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
// Track prior open value manually — using $effect with `open` triggers on
|
|
||||||
// every render and repeatedly re-shows the modal.
|
|
||||||
let wasOpen = $state(false);
|
let wasOpen = $state(false);
|
||||||
$effect(() => {
|
$effect(() => {
|
||||||
if (!dialog) return;
|
if (!dialog) return;
|
||||||
@@ -54,35 +56,23 @@
|
|||||||
deploying = false;
|
deploying = false;
|
||||||
if (maps.length > 0 && !maps.some((m) => m.slug === mapSlug)) mapSlug = maps[0].slug;
|
if (maps.length > 0 && !maps.some((m) => m.slug === mapSlug)) mapSlug = maps[0].slug;
|
||||||
}
|
}
|
||||||
|
function close(): void { open = false; }
|
||||||
|
|
||||||
function close(): void {
|
|
||||||
open = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Click-outside-to-close (native <dialog> only supports Esc). Only treat
|
|
||||||
// clicks whose target is the dialog element itself (the backdrop) as
|
|
||||||
// outside — a bounding-rect check catches native <select> dropdown
|
|
||||||
// options that render below the modal and closes the whole thing.
|
|
||||||
function onDialogClick(e: MouseEvent): void {
|
function onDialogClick(e: MouseEvent): void {
|
||||||
if (e.target === dialog) close();
|
if (e.target === dialog) close();
|
||||||
}
|
}
|
||||||
|
|
||||||
let selectedMap = $derived(maps.find((m) => m.slug === mapSlug));
|
let selectedMap = $derived(maps.find((m) => m.slug === mapSlug));
|
||||||
let previewName = $derived(
|
let previewName = $derived(selectedMap ? `t5_${gameMode}_${selectedMap.slug}_?` : '');
|
||||||
selectedMap ? `t5_${gameMode}_${selectedMap.slug}_?` : ''
|
|
||||||
);
|
let modeOptions = [{ value: 'zombie', label: 'Zombies' }];
|
||||||
|
let mapOptions = $derived(maps.map((m) => ({ value: m.slug, label: m.friendly })));
|
||||||
|
|
||||||
async function submit(e: SubmitEvent): Promise<void> {
|
async function submit(e: SubmitEvent): Promise<void> {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
if (deploying) return;
|
if (deploying) return;
|
||||||
if (!selectedMap) {
|
if (!selectedMap) { flash = 'Pick a map'; return; }
|
||||||
flash = 'pick a map';
|
if (plutoKey.trim().length === 0) { flash = 'Pluto server key is required'; return; }
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (plutoKey.trim().length === 0) {
|
|
||||||
flash = 'pluto server key is required';
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
deploying = true;
|
deploying = true;
|
||||||
flash = null;
|
flash = null;
|
||||||
try {
|
try {
|
||||||
@@ -91,15 +81,9 @@
|
|||||||
headers: { 'Content-Type': 'application/json' },
|
headers: { 'Content-Type': 'application/json' },
|
||||||
body: JSON.stringify({ gameMode, mapSlug: selectedMap.slug, plutoKey })
|
body: JSON.stringify({ gameMode, mapSlug: selectedMap.slug, plutoKey })
|
||||||
});
|
});
|
||||||
const body = (await res.json()) as {
|
const body = (await res.json()) as { ok: boolean; name?: string; port?: number; error?: string; kind?: string };
|
||||||
ok: boolean;
|
|
||||||
name?: string;
|
|
||||||
port?: number;
|
|
||||||
error?: string;
|
|
||||||
kind?: string;
|
|
||||||
};
|
|
||||||
if (!body.ok || !body.name) {
|
if (!body.ok || !body.name) {
|
||||||
flash = body.error ?? 'deploy failed';
|
flash = body.error ?? 'Deploy failed';
|
||||||
deploying = false;
|
deploying = false;
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
@@ -114,167 +98,191 @@
|
|||||||
|
|
||||||
<dialog bind:this={dialog} onclick={onDialogClick} onclose={() => (open = false)}>
|
<dialog bind:this={dialog} onclick={onDialogClick} onclose={() => (open = false)}>
|
||||||
<form class="dlg" onsubmit={submit}>
|
<form class="dlg" onsubmit={submit}>
|
||||||
|
<header class="dlg-head">
|
||||||
<h3>Deploy new server</h3>
|
<h3>Deploy new server</h3>
|
||||||
|
<button type="button" class="close" onclick={close} aria-label="Close">×</button>
|
||||||
|
</header>
|
||||||
|
|
||||||
{#if mapsError}
|
{#if mapsError}
|
||||||
<p class="flash">failed to load map catalog: {mapsError}</p>
|
<div class="alert alert-danger">Failed to load map catalog: {mapsError}</div>
|
||||||
{:else if !mapsLoaded}
|
{:else if !mapsLoaded}
|
||||||
<p class="hint">loading map catalog…</p>
|
<div class="hint">Loading map catalog…</div>
|
||||||
{:else}
|
{:else}
|
||||||
<div class="row">
|
<div class="fields">
|
||||||
<span class="row-label">Game</span>
|
<Field label="Game">
|
||||||
<div class="readonly mono">Black Ops 1 (t5)</div>
|
<div class="readonly">Black Ops 1 (t5)</div>
|
||||||
</div>
|
</Field>
|
||||||
|
|
||||||
<div class="row">
|
<Field label="Mode">
|
||||||
<label for="mode">Mode</label>
|
<Select bind:value={gameMode} options={modeOptions} disabled={deploying} />
|
||||||
<select id="mode" bind:value={gameMode} disabled={deploying}>
|
</Field>
|
||||||
<option value="zombie">Zombies</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="row">
|
<Field label="Map">
|
||||||
<label for="map">Map</label>
|
<Select bind:value={mapSlug} options={mapOptions} disabled={deploying} />
|
||||||
<select id="map" bind:value={mapSlug} disabled={deploying}>
|
</Field>
|
||||||
{#each maps as m (m.slug)}
|
|
||||||
<option value={m.slug}>{m.friendly}</option>
|
|
||||||
{/each}
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="row">
|
<Field label="Pluto server key" hint="Paste each deploy — not stored anywhere.">
|
||||||
<label for="key">Pluto server key</label>
|
<Input
|
||||||
<input
|
|
||||||
id="key"
|
|
||||||
type="password"
|
type="password"
|
||||||
bind:value={plutoKey}
|
bind:value={plutoKey}
|
||||||
placeholder="paste each deploy — not stored"
|
placeholder="paste key"
|
||||||
autocomplete="off"
|
autocomplete="off"
|
||||||
disabled={deploying}
|
disabled={deploying}
|
||||||
/>
|
/>
|
||||||
|
</Field>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="preview">
|
<div class="preview">
|
||||||
<span class="k">will create</span>
|
<span class="preview-k">Will create</span>
|
||||||
<span class="v mono">{previewName || '—'}</span>
|
<span class="preview-v">{previewName || '—'}</span>
|
||||||
<span class="sub">(lobby number + port auto-assigned)</span>
|
<span class="preview-sub">(lobby number + port auto-assigned)</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="dlg-actions">
|
<div class="actions">
|
||||||
<button type="button" class="secondary" onclick={close} disabled={deploying}>cancel</button>
|
<Button variant="ghost" onclick={close} disabled={deploying}>Cancel</Button>
|
||||||
<button type="submit" class="primary" disabled={deploying || !selectedMap}>
|
<Button
|
||||||
{deploying ? 'deploying…' : 'deploy server'}
|
type="submit"
|
||||||
</button>
|
variant="primary"
|
||||||
|
disabled={deploying || !selectedMap}
|
||||||
|
loading={deploying}
|
||||||
|
>
|
||||||
|
Deploy server
|
||||||
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
{#if flash}<p class="flash">{flash}</p>{/if}
|
{#if flash}<div class="alert alert-danger">{flash}</div>{/if}
|
||||||
</form>
|
</form>
|
||||||
</dialog>
|
</dialog>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
dialog {
|
dialog {
|
||||||
background: var(--bg-nav);
|
background: var(--surface);
|
||||||
color: var(--ink-100);
|
color: var(--text-primary);
|
||||||
border: 1px solid var(--border);
|
border: 1px solid var(--border-strong);
|
||||||
border-radius: var(--r-md);
|
border-radius: var(--radius-lg);
|
||||||
padding: 0;
|
padding: 0;
|
||||||
max-width: 520px;
|
max-width: 540px;
|
||||||
width: calc(100vw - 40px);
|
width: calc(100vw - 40px);
|
||||||
|
box-shadow: var(--shadow-raised);
|
||||||
}
|
}
|
||||||
dialog::backdrop { background: rgba(0, 0, 0, 0.6); }
|
dialog[open] { animation: dlg-in var(--dur-base) var(--ease-standard); }
|
||||||
.dlg { display: flex; flex-direction: column; gap: 14px; padding: var(--pad-panel); }
|
@keyframes dlg-in {
|
||||||
h3 {
|
from { opacity: 0; transform: translateY(6px) scale(0.98); }
|
||||||
|
to { opacity: 1; transform: translateY(0) scale(1); }
|
||||||
|
}
|
||||||
|
dialog::backdrop {
|
||||||
|
background: rgba(0, 0, 0, 0.55);
|
||||||
|
backdrop-filter: blur(6px);
|
||||||
|
-webkit-backdrop-filter: blur(6px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dlg {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: var(--space-5);
|
||||||
|
padding: var(--space-6);
|
||||||
|
}
|
||||||
|
.dlg-head {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
.dlg h3 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-family: var(--font-body);
|
font-family: var(--font-body);
|
||||||
font-size: var(--text-xs);
|
font-size: var(--text-md);
|
||||||
font-weight: 700;
|
font-weight: var(--weight-semibold);
|
||||||
text-transform: uppercase;
|
color: var(--text-primary);
|
||||||
letter-spacing: 1.5px;
|
letter-spacing: var(--tracking-tight);
|
||||||
color: var(--ink-300);
|
|
||||||
}
|
}
|
||||||
.row {
|
.close {
|
||||||
|
appearance: none;
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
color: var(--text-tertiary);
|
||||||
|
font-size: var(--text-xl);
|
||||||
|
line-height: 1;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 4px 8px;
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
|
transition: color var(--dur-fast) var(--ease-standard), background-color var(--dur-fast) var(--ease-standard);
|
||||||
|
}
|
||||||
|
.close:hover { color: var(--text-primary); background: var(--surface-raised); }
|
||||||
|
.close:focus-visible { outline: none; box-shadow: var(--focus-ring); }
|
||||||
|
|
||||||
|
.fields {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 130px 1fr;
|
grid-template-columns: 1fr 1fr;
|
||||||
gap: 12px;
|
gap: var(--space-4);
|
||||||
align-items: center;
|
|
||||||
}
|
}
|
||||||
.row label, .row-label {
|
.fields :global(.field):nth-child(1),
|
||||||
color: var(--ink-500);
|
.fields :global(.field):nth-child(4) {
|
||||||
font-family: var(--font-body);
|
grid-column: 1 / -1;
|
||||||
font-size: var(--text-xs);
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 1px;
|
|
||||||
}
|
|
||||||
.row select, .row input {
|
|
||||||
background: var(--bg-page);
|
|
||||||
color: var(--ink-100);
|
|
||||||
border: 1px solid var(--border);
|
|
||||||
border-radius: var(--r-sm);
|
|
||||||
padding: 10px 12px;
|
|
||||||
font-family: var(--font-mono);
|
|
||||||
font-size: var(--text-mono);
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
.row input:focus, .row select:focus {
|
|
||||||
outline: none;
|
|
||||||
border-color: var(--accent);
|
|
||||||
box-shadow: var(--accent-glow);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.readonly {
|
.readonly {
|
||||||
color: var(--ink-300);
|
padding: 9px 12px;
|
||||||
padding: 10px 0;
|
color: var(--text-secondary);
|
||||||
|
font-family: var(--font-body);
|
||||||
|
font-size: var(--text-sm);
|
||||||
|
background: var(--surface-sunken);
|
||||||
|
border: 1px solid var(--border-subtle);
|
||||||
|
border-radius: var(--radius-md);
|
||||||
}
|
}
|
||||||
|
|
||||||
.preview {
|
.preview {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
align-items: baseline;
|
align-items: baseline;
|
||||||
gap: 10px;
|
gap: var(--space-2);
|
||||||
padding: 12px 14px;
|
padding: var(--space-3) var(--space-4);
|
||||||
background: var(--bg-card);
|
background: var(--surface-sunken);
|
||||||
border: 1px solid var(--border);
|
border: 1px solid var(--border-subtle);
|
||||||
border-left: 3px solid var(--accent);
|
border-left: 2px solid var(--accent-primary);
|
||||||
border-radius: var(--r-sm);
|
border-radius: var(--radius-md);
|
||||||
font-size: var(--text-mono);
|
|
||||||
}
|
}
|
||||||
.preview .k {
|
.preview-k {
|
||||||
color: var(--ink-500);
|
|
||||||
font-family: var(--font-body);
|
|
||||||
font-size: var(--text-xs);
|
font-size: var(--text-xs);
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
letter-spacing: 1px;
|
letter-spacing: var(--tracking-label);
|
||||||
|
color: var(--text-tertiary);
|
||||||
|
font-weight: var(--weight-semibold);
|
||||||
}
|
}
|
||||||
.preview .v { color: var(--cream); }
|
.preview-v {
|
||||||
.preview .sub {
|
font-family: var(--font-mono);
|
||||||
color: var(--ink-500);
|
font-size: var(--text-sm);
|
||||||
font-family: var(--font-body);
|
color: var(--text-primary);
|
||||||
|
}
|
||||||
|
.preview-sub {
|
||||||
|
font-size: var(--text-xs);
|
||||||
|
color: var(--text-tertiary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.actions {
|
||||||
|
display: flex;
|
||||||
|
gap: var(--space-2);
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
.alert {
|
||||||
|
margin: 0;
|
||||||
|
padding: var(--space-3) var(--space-4);
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
border: 1px solid transparent;
|
||||||
|
font-size: var(--text-sm);
|
||||||
|
}
|
||||||
|
.alert-danger {
|
||||||
|
background: rgba(255, 86, 112, 0.08);
|
||||||
|
border-color: rgba(255, 86, 112, 0.28);
|
||||||
|
color: var(--state-danger);
|
||||||
|
}
|
||||||
|
.hint {
|
||||||
|
color: var(--text-tertiary);
|
||||||
|
font-family: var(--font-mono);
|
||||||
font-size: var(--text-xs);
|
font-size: var(--text-xs);
|
||||||
}
|
}
|
||||||
.mono { font-family: var(--font-mono); }
|
|
||||||
.dlg-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 6px; }
|
@media (max-width: 480px) {
|
||||||
button.primary {
|
.fields { grid-template-columns: 1fr; }
|
||||||
background: linear-gradient(180deg, var(--blue-500), var(--blue-600));
|
|
||||||
border: 1px solid var(--blue-400);
|
|
||||||
color: var(--cream);
|
|
||||||
border-radius: var(--r-sm);
|
|
||||||
padding: 10px 16px;
|
|
||||||
font-family: var(--font-body);
|
|
||||||
font-weight: 600;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
}
|
||||||
button.primary:disabled { opacity: 0.4; cursor: default; }
|
|
||||||
button.secondary {
|
|
||||||
background: var(--bg-card);
|
|
||||||
color: var(--ink-100);
|
|
||||||
border: 1px solid var(--border);
|
|
||||||
border-radius: var(--r-sm);
|
|
||||||
padding: 10px 16px;
|
|
||||||
font-family: var(--font-body);
|
|
||||||
font-size: var(--text-sm);
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
button.secondary:hover:not(:disabled) { border-color: var(--accent); box-shadow: var(--accent-glow); }
|
|
||||||
button.secondary:disabled { opacity: 0.4; cursor: default; }
|
|
||||||
.flash { color: var(--danger-500); font-family: var(--font-mono); font-size: var(--text-mono); margin: 0; }
|
|
||||||
.hint { color: var(--ink-500); font-family: var(--font-mono); font-size: var(--text-mono); margin: 0; }
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,9 +1,12 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import StatusDot from './StatusDot.svelte';
|
|
||||||
import type { RosterPlayer, Health } from '$ui/stores/servers.js';
|
import type { RosterPlayer, Health } from '$ui/stores/servers.js';
|
||||||
import { uiNow } from '$ui/stores/servers.js';
|
import { uiNow } from '$ui/stores/servers.js';
|
||||||
import { gametypeLabel } from '$ui/gametype.js';
|
import { gametypeLabel } from '$ui/gametype.js';
|
||||||
import { elapsedSince } from '$ui/duration.js';
|
import { elapsedSince } from '$ui/duration.js';
|
||||||
|
import Card from './primitives/Card.svelte';
|
||||||
|
import Badge from './primitives/Badge.svelte';
|
||||||
|
import Stat from './primitives/Stat.svelte';
|
||||||
|
import StatusPip from './primitives/StatusPip.svelte';
|
||||||
|
|
||||||
interface Held {
|
interface Held {
|
||||||
target: string;
|
target: string;
|
||||||
@@ -63,38 +66,54 @@
|
|||||||
let mapLabel = $derived(map ?? '—');
|
let mapLabel = $derived(map ?? '—');
|
||||||
let gtLabel = $derived(gametypeLabel(gametype));
|
let gtLabel = $derived(gametypeLabel(gametype));
|
||||||
|
|
||||||
// Live-ticking occupancy + match timers. Anchored to server-issued
|
|
||||||
// ISO timestamps and re-derived from a shared 1s ticker.
|
|
||||||
let activeElapsed = $derived(activeSince ? elapsedSince(activeSince, $uiNow) : null);
|
let activeElapsed = $derived(activeSince ? elapsedSince(activeSince, $uiNow) : null);
|
||||||
let inactiveElapsed = $derived(inactiveSince ? elapsedSince(inactiveSince, $uiNow) : null);
|
let inactiveElapsed = $derived(inactiveSince ? elapsedSince(inactiveSince, $uiNow) : null);
|
||||||
// Game timer only runs while the server is active. Belt-and-suspenders for
|
|
||||||
// the server-side clear on inactive transition.
|
|
||||||
let gameInProgress = $derived(!!gameStartedAt && !gameEndedAt && !!activeSince);
|
let gameInProgress = $derived(!!gameStartedAt && !gameEndedAt && !!activeSince);
|
||||||
let gameElapsed = $derived(gameInProgress ? elapsedSince(gameStartedAt, $uiNow) : null);
|
let gameElapsed = $derived(gameInProgress ? elapsedSince(gameStartedAt, $uiNow) : null);
|
||||||
let showTiming = $derived(
|
let showTiming = $derived(
|
||||||
health !== 'offline' && (activeElapsed !== null || inactiveElapsed !== null || gameElapsed !== null)
|
health !== 'offline' && (activeElapsed !== null || inactiveElapsed !== null || gameElapsed !== null)
|
||||||
);
|
);
|
||||||
|
|
||||||
|
// Shared-element transition to /servers/{name} — Chromium only, others
|
||||||
|
// fall through to a plain nav.
|
||||||
|
let cardStyle = $derived(`view-transition-name: server-${name.replace(/[^a-z0-9_-]/gi, '-')};`);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<a class="card" href="/servers/{name}" class:restarting class:offline={health === 'offline'}>
|
<Card
|
||||||
|
href="/servers/{name}"
|
||||||
|
elevation="interactive"
|
||||||
|
padding="md"
|
||||||
|
class={restarting ? 'restarting' : health === 'offline' ? 'offline' : ''}
|
||||||
|
ariaLabel="Server {name}, {health}"
|
||||||
|
style={cardStyle}
|
||||||
|
>
|
||||||
|
{#if restarting}
|
||||||
|
<span class="restart-bar" aria-hidden="true"></span>
|
||||||
|
{/if}
|
||||||
|
|
||||||
<div class="head">
|
<div class="head">
|
||||||
<div class="name-row">
|
<div class="name-row">
|
||||||
<StatusDot {health} />
|
<StatusPip {health} />
|
||||||
<strong class="name">{name}</strong>
|
<strong class="name">{name}</strong>
|
||||||
</div>
|
</div>
|
||||||
{#if health !== 'offline'}
|
{#if health === 'offline'}
|
||||||
<span class="players" class:has-players={players !== null && players > 0}>
|
<Badge variant="danger" uppercase>offline</Badge>
|
||||||
{players ?? '—'}
|
|
||||||
</span>
|
|
||||||
{:else}
|
{:else}
|
||||||
<span class="players offline-badge">offline</span>
|
<div class="players" aria-live="polite">
|
||||||
|
<Stat
|
||||||
|
value={players ?? 0}
|
||||||
|
size="md"
|
||||||
|
tone={players !== null && players > 0 ? 'online' : 'primary'}
|
||||||
|
tween
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="meta">
|
<div class="meta">
|
||||||
<span class="map">{mapLabel}</span>
|
<span class="map">{mapLabel}</span>
|
||||||
{#if gtLabel}
|
{#if gtLabel}
|
||||||
<span class="dot-sep">·</span>
|
<span class="dot" aria-hidden="true">·</span>
|
||||||
<span class="gt">{gtLabel}</span>
|
<span class="gt">{gtLabel}</span>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
@@ -102,21 +121,21 @@
|
|||||||
{#if showTiming}
|
{#if showTiming}
|
||||||
<div class="timing">
|
<div class="timing">
|
||||||
{#if activeElapsed}
|
{#if activeElapsed}
|
||||||
<span class="timing-item active">
|
<div class="metric">
|
||||||
<span class="label">Active</span>
|
<span class="metric-label">Active</span>
|
||||||
<span class="value">{activeElapsed}</span>
|
<span class="metric-value">{activeElapsed}</span>
|
||||||
</span>
|
</div>
|
||||||
{:else if inactiveElapsed}
|
{:else if inactiveElapsed}
|
||||||
<span class="timing-item inactive">
|
<div class="metric">
|
||||||
<span class="label">Inactive</span>
|
<span class="metric-label">Inactive</span>
|
||||||
<span class="value">{inactiveElapsed}</span>
|
<span class="metric-value">{inactiveElapsed}</span>
|
||||||
</span>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
{#if gameElapsed}
|
{#if gameElapsed}
|
||||||
<span class="timing-item game">
|
<div class="metric">
|
||||||
<span class="label">Game</span>
|
<span class="metric-label">Match</span>
|
||||||
<span class="value">{gameElapsed}</span>
|
<span class="metric-value">{gameElapsed}</span>
|
||||||
</span>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
@@ -132,15 +151,15 @@
|
|||||||
</li>
|
</li>
|
||||||
{/each}
|
{/each}
|
||||||
</ul>
|
</ul>
|
||||||
{:else if health !== 'offline'}
|
{:else}
|
||||||
<div class="lobby-empty">lobby is empty</div>
|
<div class="lobby-empty">Lobby is empty</div>
|
||||||
{/if}
|
{/if}
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
{#if held.length > 0}
|
{#if held.length > 0}
|
||||||
<div class="held">
|
<div class="held">
|
||||||
{#each held as h (h.target)}
|
{#each held as h (h.target)}
|
||||||
<span class="chip" title="held by beta {h.betaId}">β {h.target}</span>
|
<Badge variant="info" size="sm" title="held by beta {h.betaId}">β {h.target}</Badge>
|
||||||
{/each}
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
@@ -149,203 +168,160 @@
|
|||||||
{#if health === 'offline' && lastError}
|
{#if health === 'offline' && lastError}
|
||||||
<span class="err">{lastError}</span>
|
<span class="err">{lastError}</span>
|
||||||
{:else if lastSeenAt}
|
{:else if lastSeenAt}
|
||||||
<span>last seen {ago(lastSeenAt)}</span>
|
<span>Last seen {ago(lastSeenAt)}</span>
|
||||||
{:else if lastRestartedAt}
|
{:else if lastRestartedAt}
|
||||||
<span>restart {ago(lastRestartedAt)}</span>
|
<span>Restart {ago(lastRestartedAt)}</span>
|
||||||
{:else}
|
{:else}
|
||||||
<span class="dim">no data</span>
|
<span class="dim">No data</span>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
|
</Card>
|
||||||
{#if restarting}
|
|
||||||
<div class="restarting-bar" aria-label="restarting"></div>
|
|
||||||
{/if}
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.card {
|
/* Global tweaks scoped through :global() since Card is a child component. */
|
||||||
display: flex;
|
:global(.card.restarting) {
|
||||||
flex-direction: column;
|
outline: 1px solid rgba(255, 176, 32, 0.28);
|
||||||
gap: 14px;
|
|
||||||
background:
|
|
||||||
linear-gradient(180deg, var(--bg-card) 0%, var(--bg-nav) 100%);
|
|
||||||
border: 1px solid var(--border);
|
|
||||||
border-radius: var(--r-md);
|
|
||||||
padding: var(--pad-card);
|
|
||||||
color: var(--ink-100);
|
|
||||||
text-decoration: none;
|
|
||||||
transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
|
|
||||||
box-shadow: var(--shadow-card);
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
}
|
||||||
.card::before {
|
:global(.card.offline) {
|
||||||
content: '';
|
opacity: 0.62;
|
||||||
|
}
|
||||||
|
|
||||||
|
.restart-bar {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
inset: 0 0 auto 0;
|
top: 0; left: 0; right: 0;
|
||||||
height: 2px;
|
height: 2px;
|
||||||
background: linear-gradient(90deg, transparent, var(--accent), transparent);
|
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
|
||||||
opacity: 0.55;
|
background: linear-gradient(
|
||||||
|
90deg,
|
||||||
|
transparent,
|
||||||
|
var(--state-warning),
|
||||||
|
var(--state-online),
|
||||||
|
transparent
|
||||||
|
);
|
||||||
|
background-size: 200% 100%;
|
||||||
|
animation: spark-slide 1.6s var(--ease-linear) infinite;
|
||||||
|
opacity: 0.9;
|
||||||
}
|
}
|
||||||
.card:hover {
|
|
||||||
border-color: var(--accent);
|
|
||||||
box-shadow: var(--accent-glow), var(--shadow-card);
|
|
||||||
transform: translateY(-1px);
|
|
||||||
}
|
|
||||||
.card.restarting { border-color: var(--amber-500); box-shadow: var(--amber-glow); }
|
|
||||||
.card.offline { opacity: 0.75; }
|
|
||||||
|
|
||||||
.head {
|
.head {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 12px;
|
gap: var(--space-3);
|
||||||
|
}
|
||||||
|
.name-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--space-3);
|
||||||
|
min-width: 0;
|
||||||
}
|
}
|
||||||
.name-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
|
|
||||||
.name {
|
.name {
|
||||||
font-family: var(--font-body);
|
font-family: var(--font-body);
|
||||||
font-size: var(--text-md);
|
font-size: var(--text-md);
|
||||||
font-weight: 600;
|
font-weight: var(--weight-semibold);
|
||||||
letter-spacing: 0.3px;
|
color: var(--text-primary);
|
||||||
color: var(--cream);
|
letter-spacing: var(--tracking-tight);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
.players {
|
.players { flex-shrink: 0; }
|
||||||
background: var(--bg-nav);
|
|
||||||
border: 1px solid var(--border);
|
|
||||||
padding: 4px 12px;
|
|
||||||
border-radius: 999px;
|
|
||||||
font-family: var(--font-mono);
|
|
||||||
font-size: var(--text-mono);
|
|
||||||
font-weight: 500;
|
|
||||||
color: var(--ink-500);
|
|
||||||
min-width: 38px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.players.has-players {
|
|
||||||
color: var(--spark-500);
|
|
||||||
border-color: var(--spark-500);
|
|
||||||
box-shadow: var(--spark-glow);
|
|
||||||
}
|
|
||||||
.players.offline-badge {
|
|
||||||
color: var(--danger-500);
|
|
||||||
border-color: rgba(255, 48, 80, 0.4);
|
|
||||||
font-family: var(--font-body);
|
|
||||||
font-size: var(--text-xs);
|
|
||||||
letter-spacing: var(--tracking-label);
|
|
||||||
text-transform: uppercase;
|
|
||||||
}
|
|
||||||
|
|
||||||
.meta {
|
.meta {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 8px;
|
gap: var(--space-2);
|
||||||
font-family: var(--font-mono);
|
margin-top: var(--space-1);
|
||||||
font-size: var(--text-mono);
|
|
||||||
color: var(--ink-300);
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
.map { color: var(--cream-dim); }
|
|
||||||
.gt { color: var(--ink-300); }
|
|
||||||
.dot-sep { color: var(--ink-500); }
|
|
||||||
|
|
||||||
.roster {
|
|
||||||
list-style: none;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 4px;
|
|
||||||
}
|
|
||||||
.roster li {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr auto auto;
|
|
||||||
gap: 12px;
|
|
||||||
align-items: center;
|
|
||||||
padding: 3px 0;
|
|
||||||
font-size: var(--text-sm);
|
font-size: var(--text-sm);
|
||||||
}
|
color: var(--text-secondary);
|
||||||
.pname {
|
white-space: nowrap;
|
||||||
color: var(--cream);
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
.pscore {
|
|
||||||
font-family: var(--font-mono);
|
|
||||||
color: var(--spark-500);
|
|
||||||
font-size: var(--text-mono-sm);
|
|
||||||
}
|
|
||||||
.pping {
|
|
||||||
font-family: var(--font-mono);
|
|
||||||
color: var(--ink-300);
|
|
||||||
font-size: var(--text-mono-sm);
|
|
||||||
min-width: 48px;
|
|
||||||
text-align: right;
|
|
||||||
}
|
}
|
||||||
|
.map { color: var(--text-secondary); font-weight: var(--weight-medium); }
|
||||||
|
.gt { color: var(--text-tertiary); }
|
||||||
|
.dot { color: var(--text-quaternary); }
|
||||||
|
|
||||||
.timing {
|
.timing {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
gap: 14px;
|
gap: var(--space-5);
|
||||||
font-family: var(--font-mono);
|
margin-top: var(--space-2);
|
||||||
font-size: var(--text-mono-sm);
|
|
||||||
}
|
}
|
||||||
.timing-item {
|
.metric {
|
||||||
display: inline-flex;
|
display: flex;
|
||||||
align-items: baseline;
|
flex-direction: column;
|
||||||
gap: 6px;
|
gap: 2px;
|
||||||
}
|
}
|
||||||
.timing-item .label {
|
.metric-label {
|
||||||
color: var(--ink-500);
|
font-size: 10px;
|
||||||
|
font-weight: var(--weight-semibold);
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
letter-spacing: var(--tracking-label);
|
letter-spacing: var(--tracking-label);
|
||||||
font-size: var(--text-xs);
|
color: var(--text-tertiary);
|
||||||
}
|
}
|
||||||
.timing-item .value { color: var(--cream); }
|
.metric-value {
|
||||||
.timing-item.active .value { color: var(--spark-500); }
|
font-family: var(--font-mono);
|
||||||
.timing-item.inactive .value { color: var(--ink-300); }
|
font-size: var(--text-sm);
|
||||||
.timing-item.game .value { color: var(--accent, var(--spark-500)); }
|
color: var(--text-primary);
|
||||||
|
font-variant-numeric: tabular-nums;
|
||||||
|
}
|
||||||
|
|
||||||
|
.roster {
|
||||||
|
list-style: none;
|
||||||
|
padding: var(--space-3) 0 0;
|
||||||
|
margin: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: var(--space-1);
|
||||||
|
border-top: 1px solid var(--border-subtle);
|
||||||
|
}
|
||||||
|
.roster li {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr auto auto;
|
||||||
|
gap: var(--space-3);
|
||||||
|
align-items: center;
|
||||||
|
padding: 2px 0;
|
||||||
|
font-size: var(--text-sm);
|
||||||
|
}
|
||||||
|
.pname {
|
||||||
|
color: var(--text-primary);
|
||||||
|
font-weight: var(--weight-regular);
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.pscore,
|
||||||
|
.pping {
|
||||||
|
font-family: var(--font-mono);
|
||||||
|
font-size: var(--text-xs);
|
||||||
|
color: var(--text-tertiary);
|
||||||
|
font-variant-numeric: tabular-nums;
|
||||||
|
}
|
||||||
|
.pping { min-width: 44px; text-align: right; }
|
||||||
|
|
||||||
.lobby-empty {
|
.lobby-empty {
|
||||||
font-family: var(--font-mono);
|
padding-top: var(--space-3);
|
||||||
font-size: var(--text-mono-sm);
|
border-top: 1px solid var(--border-subtle);
|
||||||
color: var(--ink-500);
|
font-size: var(--text-sm);
|
||||||
padding: 4px 0;
|
color: var(--text-tertiary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.held { display: flex; flex-wrap: wrap; gap: 6px; }
|
.held {
|
||||||
.chip {
|
display: flex;
|
||||||
background: rgba(124, 192, 245, 0.10);
|
flex-wrap: wrap;
|
||||||
color: var(--cream);
|
gap: var(--space-1);
|
||||||
border: 1px solid rgba(124, 192, 245, 0.28);
|
|
||||||
border-radius: var(--r-sm);
|
|
||||||
padding: 2px 8px;
|
|
||||||
font-size: var(--text-mono-sm);
|
|
||||||
font-family: var(--font-mono);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.foot {
|
.foot {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
font-family: var(--font-mono);
|
align-items: center;
|
||||||
font-size: var(--text-mono-sm);
|
|
||||||
color: var(--ink-500);
|
|
||||||
letter-spacing: 0.3px;
|
|
||||||
margin-top: auto;
|
margin-top: auto;
|
||||||
padding-top: 6px;
|
padding-top: var(--space-2);
|
||||||
}
|
font-size: var(--text-xs);
|
||||||
.err { color: var(--danger-500); }
|
color: var(--text-tertiary);
|
||||||
.dim { color: var(--ink-700); }
|
|
||||||
|
|
||||||
.restarting-bar {
|
|
||||||
height: 2px;
|
|
||||||
background: linear-gradient(90deg, transparent, var(--amber-500), var(--spark-500), transparent);
|
|
||||||
background-size: 200% 100%;
|
|
||||||
animation: spark-slide 1.2s infinite linear;
|
|
||||||
}
|
}
|
||||||
|
.err { color: var(--state-danger); }
|
||||||
|
.dim { color: var(--text-quaternary); }
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -0,0 +1,83 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { fly, fade } from 'svelte/transition';
|
||||||
|
import { cubicOut } from 'svelte/easing';
|
||||||
|
import { toasts, dismiss } from '$ui/toast.js';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="toaster" role="region" aria-label="Notifications">
|
||||||
|
{#each $toasts as t (t.id)}
|
||||||
|
<div
|
||||||
|
class="toast v-{t.variant}"
|
||||||
|
in:fly={{ y: 16, duration: 240, easing: cubicOut }}
|
||||||
|
out:fade={{ duration: 160 }}
|
||||||
|
>
|
||||||
|
<span class="dot" aria-hidden="true"></span>
|
||||||
|
<span class="msg">{t.message}</span>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="close"
|
||||||
|
onclick={() => dismiss(t.id)}
|
||||||
|
aria-label="Dismiss notification"
|
||||||
|
>×</button>
|
||||||
|
</div>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.toaster {
|
||||||
|
position: fixed;
|
||||||
|
bottom: var(--space-6);
|
||||||
|
right: var(--space-6);
|
||||||
|
z-index: 200;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: var(--space-2);
|
||||||
|
pointer-events: none;
|
||||||
|
max-width: min(420px, calc(100vw - 2 * var(--space-6)));
|
||||||
|
}
|
||||||
|
.toast {
|
||||||
|
pointer-events: auto;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--space-3);
|
||||||
|
padding: var(--space-3) var(--space-4);
|
||||||
|
background: color-mix(in oklab, var(--surface-raised) 92%, transparent);
|
||||||
|
color: var(--text-primary);
|
||||||
|
border: 1px solid var(--border-strong);
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
box-shadow: var(--shadow-raised);
|
||||||
|
font-size: var(--text-sm);
|
||||||
|
}
|
||||||
|
@supports (backdrop-filter: blur(4px)) {
|
||||||
|
.toast {
|
||||||
|
backdrop-filter: blur(12px) saturate(1.4);
|
||||||
|
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
||||||
|
background: color-mix(in oklab, var(--surface-raised) 78%, transparent);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.dot {
|
||||||
|
width: 8px; height: 8px;
|
||||||
|
border-radius: 50%;
|
||||||
|
flex-shrink: 0;
|
||||||
|
background: var(--text-tertiary);
|
||||||
|
}
|
||||||
|
.v-success .dot { background: var(--state-online); box-shadow: 0 0 4px rgba(124, 212, 255, 0.5); }
|
||||||
|
.v-warning .dot { background: var(--state-warning); }
|
||||||
|
.v-danger .dot { background: var(--state-danger); }
|
||||||
|
.v-info .dot { background: var(--accent-primary); }
|
||||||
|
.msg { flex: 1; }
|
||||||
|
.close {
|
||||||
|
appearance: none;
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
color: var(--text-tertiary);
|
||||||
|
font-size: var(--text-lg);
|
||||||
|
line-height: 1;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 0 var(--space-1);
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
|
transition: color var(--dur-fast) var(--ease-standard);
|
||||||
|
}
|
||||||
|
.close:hover { color: var(--text-primary); }
|
||||||
|
.close:focus-visible { outline: none; box-shadow: var(--focus-ring); }
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,89 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import type { Snippet } from 'svelte';
|
||||||
|
|
||||||
|
type Variant = 'neutral' | 'online' | 'warning' | 'danger' | 'info' | 'accent';
|
||||||
|
type Size = 'sm' | 'md';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
variant?: Variant;
|
||||||
|
size?: Size;
|
||||||
|
uppercase?: boolean;
|
||||||
|
mono?: boolean;
|
||||||
|
title?: string;
|
||||||
|
children?: Snippet;
|
||||||
|
}
|
||||||
|
|
||||||
|
let {
|
||||||
|
variant = 'neutral',
|
||||||
|
size = 'sm',
|
||||||
|
uppercase = false,
|
||||||
|
mono = false,
|
||||||
|
title,
|
||||||
|
children
|
||||||
|
}: Props = $props();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<span
|
||||||
|
class="badge v-{variant} s-{size}"
|
||||||
|
class:uppercase
|
||||||
|
class:mono
|
||||||
|
{title}
|
||||||
|
>
|
||||||
|
{@render children?.()}
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.badge {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--space-1);
|
||||||
|
border-radius: var(--radius-pill);
|
||||||
|
font-family: var(--font-body);
|
||||||
|
font-weight: var(--weight-medium);
|
||||||
|
line-height: 1;
|
||||||
|
white-space: nowrap;
|
||||||
|
font-variant-numeric: tabular-nums;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
}
|
||||||
|
.uppercase {
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: var(--tracking-label);
|
||||||
|
font-weight: var(--weight-semibold);
|
||||||
|
}
|
||||||
|
.mono {
|
||||||
|
font-family: var(--font-mono);
|
||||||
|
}
|
||||||
|
|
||||||
|
.s-sm { padding: 3px 8px; font-size: var(--text-xs); }
|
||||||
|
.s-md { padding: 5px 12px; font-size: var(--text-sm); }
|
||||||
|
|
||||||
|
.v-neutral {
|
||||||
|
background: var(--surface-raised);
|
||||||
|
color: var(--text-secondary);
|
||||||
|
border-color: var(--border-subtle);
|
||||||
|
}
|
||||||
|
.v-online {
|
||||||
|
background: rgba(124, 212, 255, 0.10);
|
||||||
|
color: var(--state-online);
|
||||||
|
border-color: rgba(124, 212, 255, 0.25);
|
||||||
|
}
|
||||||
|
.v-warning {
|
||||||
|
background: rgba(255, 176, 32, 0.10);
|
||||||
|
color: var(--state-warning);
|
||||||
|
border-color: rgba(255, 176, 32, 0.28);
|
||||||
|
}
|
||||||
|
.v-danger {
|
||||||
|
background: rgba(255, 86, 112, 0.10);
|
||||||
|
color: var(--state-danger);
|
||||||
|
border-color: rgba(255, 86, 112, 0.28);
|
||||||
|
}
|
||||||
|
.v-info {
|
||||||
|
background: rgba(124, 192, 245, 0.10);
|
||||||
|
color: var(--blue-300);
|
||||||
|
border-color: rgba(124, 192, 245, 0.28);
|
||||||
|
}
|
||||||
|
.v-accent {
|
||||||
|
background: var(--accent-primary);
|
||||||
|
color: var(--text-on-accent);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,55 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
interface Crumb {
|
||||||
|
label: string;
|
||||||
|
href?: string | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
items: Crumb[];
|
||||||
|
}
|
||||||
|
|
||||||
|
let { items }: Props = $props();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<nav class="crumbs" aria-label="Breadcrumb">
|
||||||
|
<ol>
|
||||||
|
{#each items as c, i (i + c.label)}
|
||||||
|
<li>
|
||||||
|
{#if c.href && i < items.length - 1}
|
||||||
|
<a href={c.href}>{c.label}</a>
|
||||||
|
{:else}
|
||||||
|
<span aria-current={i === items.length - 1 ? 'page' : undefined}>{c.label}</span>
|
||||||
|
{/if}
|
||||||
|
{#if i < items.length - 1}<span class="sep" aria-hidden="true">›</span>{/if}
|
||||||
|
</li>
|
||||||
|
{/each}
|
||||||
|
</ol>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.crumbs ol {
|
||||||
|
list-style: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--space-2);
|
||||||
|
font-size: var(--text-xs);
|
||||||
|
color: var(--text-tertiary);
|
||||||
|
}
|
||||||
|
.crumbs li {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--space-2);
|
||||||
|
}
|
||||||
|
.crumbs a {
|
||||||
|
color: var(--text-tertiary);
|
||||||
|
text-decoration: none;
|
||||||
|
transition: color var(--dur-fast) var(--ease-standard);
|
||||||
|
}
|
||||||
|
.crumbs a:hover { color: var(--text-primary); }
|
||||||
|
.crumbs a:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
|
||||||
|
.crumbs [aria-current='page'] { color: var(--text-primary); }
|
||||||
|
.sep { color: var(--text-quaternary); }
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,162 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import type { Snippet } from 'svelte';
|
||||||
|
|
||||||
|
type Variant = 'primary' | 'secondary' | 'ghost' | 'danger';
|
||||||
|
type Size = 'sm' | 'md' | 'lg';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
variant?: Variant;
|
||||||
|
size?: Size;
|
||||||
|
type?: 'button' | 'submit' | 'reset';
|
||||||
|
disabled?: boolean;
|
||||||
|
loading?: boolean;
|
||||||
|
href?: string | null;
|
||||||
|
title?: string;
|
||||||
|
ariaLabel?: string;
|
||||||
|
onclick?: (e: MouseEvent) => void;
|
||||||
|
children?: Snippet;
|
||||||
|
leading?: Snippet;
|
||||||
|
trailing?: Snippet;
|
||||||
|
}
|
||||||
|
|
||||||
|
let {
|
||||||
|
variant = 'secondary',
|
||||||
|
size = 'md',
|
||||||
|
type = 'button',
|
||||||
|
disabled = false,
|
||||||
|
loading = false,
|
||||||
|
href = null,
|
||||||
|
title,
|
||||||
|
ariaLabel,
|
||||||
|
onclick,
|
||||||
|
children,
|
||||||
|
leading,
|
||||||
|
trailing
|
||||||
|
}: Props = $props();
|
||||||
|
|
||||||
|
let isLink = $derived(href !== null && href !== undefined);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{#if isLink}
|
||||||
|
<a
|
||||||
|
class="btn v-{variant} s-{size}"
|
||||||
|
class:is-loading={loading}
|
||||||
|
aria-disabled={disabled || loading}
|
||||||
|
aria-label={ariaLabel}
|
||||||
|
{title}
|
||||||
|
href={disabled || loading ? undefined : href}
|
||||||
|
role="button"
|
||||||
|
tabindex="0"
|
||||||
|
>
|
||||||
|
{#if leading}<span class="slot slot-leading">{@render leading()}</span>{/if}
|
||||||
|
<span class="label">{@render children?.()}</span>
|
||||||
|
{#if trailing}<span class="slot slot-trailing">{@render trailing()}</span>{/if}
|
||||||
|
{#if loading}<span class="spinner" aria-hidden="true"></span>{/if}
|
||||||
|
</a>
|
||||||
|
{:else}
|
||||||
|
<button
|
||||||
|
class="btn v-{variant} s-{size}"
|
||||||
|
class:is-loading={loading}
|
||||||
|
{type}
|
||||||
|
{title}
|
||||||
|
aria-label={ariaLabel}
|
||||||
|
disabled={disabled || loading}
|
||||||
|
{onclick}
|
||||||
|
>
|
||||||
|
{#if leading}<span class="slot slot-leading">{@render leading()}</span>{/if}
|
||||||
|
<span class="label">{@render children?.()}</span>
|
||||||
|
{#if trailing}<span class="slot slot-trailing">{@render trailing()}</span>{/if}
|
||||||
|
{#if loading}<span class="spinner" aria-hidden="true"></span>{/if}
|
||||||
|
</button>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.btn {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: var(--space-2);
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
font-family: var(--font-body);
|
||||||
|
font-weight: var(--weight-semibold);
|
||||||
|
letter-spacing: var(--tracking-normal);
|
||||||
|
line-height: 1;
|
||||||
|
cursor: pointer;
|
||||||
|
text-decoration: none;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
transition:
|
||||||
|
background-color var(--dur-fast) var(--ease-standard),
|
||||||
|
border-color var(--dur-fast) var(--ease-standard),
|
||||||
|
color var(--dur-fast) var(--ease-standard),
|
||||||
|
transform var(--dur-fast) var(--ease-standard),
|
||||||
|
box-shadow var(--dur-fast) var(--ease-standard);
|
||||||
|
white-space: nowrap;
|
||||||
|
user-select: none;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.btn:focus { outline: none; }
|
||||||
|
.btn:focus-visible { box-shadow: var(--focus-ring); }
|
||||||
|
.btn:disabled,
|
||||||
|
.btn[aria-disabled='true'] {
|
||||||
|
opacity: 0.5;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
.btn:active:not(:disabled):not([aria-disabled='true']) { transform: translateY(0.5px); }
|
||||||
|
|
||||||
|
/* Sizes */
|
||||||
|
.s-sm { padding: 6px 12px; font-size: var(--text-xs); border-radius: var(--radius-sm); }
|
||||||
|
.s-md { padding: 9px 16px; font-size: var(--text-sm); }
|
||||||
|
.s-lg { padding: 12px 22px; font-size: var(--text-base); }
|
||||||
|
|
||||||
|
/* Variants */
|
||||||
|
.v-primary {
|
||||||
|
background: var(--accent-primary);
|
||||||
|
color: var(--text-on-accent);
|
||||||
|
}
|
||||||
|
.v-primary:hover:not(:disabled):not([aria-disabled='true']) {
|
||||||
|
background: var(--accent-primary-hover);
|
||||||
|
color: var(--gray-950);
|
||||||
|
}
|
||||||
|
|
||||||
|
.v-secondary {
|
||||||
|
background: var(--surface-raised);
|
||||||
|
color: var(--text-primary);
|
||||||
|
border-color: var(--border-subtle);
|
||||||
|
}
|
||||||
|
.v-secondary:hover:not(:disabled):not([aria-disabled='true']) {
|
||||||
|
background: var(--surface-overlay);
|
||||||
|
border-color: var(--border-strong);
|
||||||
|
}
|
||||||
|
|
||||||
|
.v-ghost {
|
||||||
|
background: transparent;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
}
|
||||||
|
.v-ghost:hover:not(:disabled):not([aria-disabled='true']) {
|
||||||
|
background: var(--surface-raised);
|
||||||
|
color: var(--text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.v-danger {
|
||||||
|
background: transparent;
|
||||||
|
color: var(--state-danger);
|
||||||
|
border-color: rgba(255, 86, 112, 0.32);
|
||||||
|
}
|
||||||
|
.v-danger:hover:not(:disabled):not([aria-disabled='true']) {
|
||||||
|
background: rgba(255, 86, 112, 0.12);
|
||||||
|
border-color: var(--state-danger);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Loading */
|
||||||
|
.is-loading .label,
|
||||||
|
.is-loading .slot { visibility: hidden; }
|
||||||
|
.spinner {
|
||||||
|
position: absolute;
|
||||||
|
width: 14px; height: 14px;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 2px solid currentColor;
|
||||||
|
border-top-color: transparent;
|
||||||
|
animation: spin 0.7s linear infinite;
|
||||||
|
}
|
||||||
|
@keyframes spin { to { transform: rotate(360deg); } }
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,110 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import type { Snippet } from 'svelte';
|
||||||
|
|
||||||
|
type Padding = 'none' | 'sm' | 'md' | 'lg';
|
||||||
|
type Elevation = 'flat' | 'raised' | 'interactive';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
padding?: Padding;
|
||||||
|
elevation?: Elevation;
|
||||||
|
href?: string | null;
|
||||||
|
as?: 'div' | 'section' | 'article' | 'a';
|
||||||
|
ariaLabel?: string;
|
||||||
|
class?: string;
|
||||||
|
style?: string;
|
||||||
|
children?: Snippet;
|
||||||
|
onclick?: (e: MouseEvent) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
let {
|
||||||
|
padding = 'md',
|
||||||
|
elevation = 'flat',
|
||||||
|
href = null,
|
||||||
|
as = 'div',
|
||||||
|
ariaLabel,
|
||||||
|
class: klass = '',
|
||||||
|
style,
|
||||||
|
children,
|
||||||
|
onclick
|
||||||
|
}: Props = $props();
|
||||||
|
|
||||||
|
let isLink = $derived(href !== null && href !== undefined);
|
||||||
|
let tag = $derived(isLink ? 'a' : as);
|
||||||
|
// When the container isn't a link but does have a click handler, assign
|
||||||
|
// a role so screen readers announce it as interactive (a11y_no_static).
|
||||||
|
let role = $derived(!isLink && onclick ? 'button' : undefined);
|
||||||
|
let tabindex = $derived(!isLink && onclick ? 0 : undefined);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<svelte:element
|
||||||
|
this={tag}
|
||||||
|
class="card p-{padding} e-{elevation} {klass}"
|
||||||
|
href={isLink ? href : undefined}
|
||||||
|
aria-label={ariaLabel}
|
||||||
|
{role}
|
||||||
|
{tabindex}
|
||||||
|
{style}
|
||||||
|
{onclick}
|
||||||
|
>
|
||||||
|
{@render children?.()}
|
||||||
|
</svelte:element>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.card {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
border-radius: var(--radius-lg);
|
||||||
|
background: color-mix(in oklab, var(--surface) 90%, transparent);
|
||||||
|
color: var(--text-primary);
|
||||||
|
text-decoration: none;
|
||||||
|
transition:
|
||||||
|
transform var(--dur-fast) var(--ease-standard),
|
||||||
|
box-shadow var(--dur-base) var(--ease-standard),
|
||||||
|
background-color var(--dur-fast) var(--ease-standard);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Inner highlight — a single hairline of light at the top edge. */
|
||||||
|
.card::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
border-radius: inherit;
|
||||||
|
pointer-events: none;
|
||||||
|
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Backdrop blur only where the browser supports it — some rendering
|
||||||
|
backends downgrade poorly, and we don't want blurred noise. */
|
||||||
|
@supports (backdrop-filter: blur(4px)) {
|
||||||
|
.card {
|
||||||
|
backdrop-filter: blur(10px) saturate(1.2);
|
||||||
|
-webkit-backdrop-filter: blur(10px) saturate(1.2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Padding scale */
|
||||||
|
.p-none { padding: 0; }
|
||||||
|
.p-sm { padding: var(--space-4); }
|
||||||
|
.p-md { padding: var(--space-5); }
|
||||||
|
.p-lg { padding: var(--space-6); }
|
||||||
|
|
||||||
|
/* Elevation */
|
||||||
|
.e-flat { box-shadow: var(--shadow-ambient); }
|
||||||
|
.e-raised { box-shadow: var(--shadow-raised); }
|
||||||
|
|
||||||
|
.e-interactive {
|
||||||
|
box-shadow: var(--shadow-ambient);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.e-interactive:hover {
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: var(--shadow-raised);
|
||||||
|
background: color-mix(in oklab, var(--surface-raised) 92%, transparent);
|
||||||
|
}
|
||||||
|
.e-interactive:focus-visible {
|
||||||
|
outline: none;
|
||||||
|
box-shadow: var(--focus-ring), var(--shadow-raised);
|
||||||
|
}
|
||||||
|
.e-interactive:active { transform: translateY(-1px); }
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,62 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import type { Snippet } from 'svelte';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
title: string;
|
||||||
|
description?: string | null;
|
||||||
|
icon?: Snippet;
|
||||||
|
actions?: Snippet;
|
||||||
|
}
|
||||||
|
|
||||||
|
let { title, description = null, icon, actions }: Props = $props();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="empty" role="status">
|
||||||
|
{#if icon}
|
||||||
|
<div class="icon">{@render icon()}</div>
|
||||||
|
{:else}
|
||||||
|
<div class="icon default">
|
||||||
|
<svg viewBox="0 0 24 24" width="28" height="28" aria-hidden="true">
|
||||||
|
<circle cx="12" cy="12" r="9" fill="none" stroke="currentColor" stroke-width="1.5" stroke-dasharray="3 4" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
<h3 class="title">{title}</h3>
|
||||||
|
{#if description}<p class="desc">{description}</p>{/if}
|
||||||
|
{#if actions}<div class="actions">{@render actions()}</div>{/if}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.empty {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
padding: var(--space-16) var(--space-6);
|
||||||
|
gap: var(--space-3);
|
||||||
|
color: var(--text-secondary);
|
||||||
|
border-radius: var(--radius-lg);
|
||||||
|
background: color-mix(in oklab, var(--surface) 60%, transparent);
|
||||||
|
}
|
||||||
|
.icon {
|
||||||
|
color: var(--text-tertiary);
|
||||||
|
margin-bottom: var(--space-2);
|
||||||
|
}
|
||||||
|
.title {
|
||||||
|
margin: 0;
|
||||||
|
font-size: var(--text-md);
|
||||||
|
font-weight: var(--weight-semibold);
|
||||||
|
color: var(--text-primary);
|
||||||
|
}
|
||||||
|
.desc {
|
||||||
|
margin: 0;
|
||||||
|
font-size: var(--text-sm);
|
||||||
|
color: var(--text-tertiary);
|
||||||
|
max-width: 44ch;
|
||||||
|
}
|
||||||
|
.actions {
|
||||||
|
margin-top: var(--space-4);
|
||||||
|
display: flex;
|
||||||
|
gap: var(--space-2);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,54 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import type { Snippet } from 'svelte';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
label?: string;
|
||||||
|
hint?: string | null;
|
||||||
|
error?: string | null;
|
||||||
|
required?: boolean;
|
||||||
|
forId?: string;
|
||||||
|
children?: Snippet;
|
||||||
|
}
|
||||||
|
|
||||||
|
let { label, hint = null, error = null, required = false, forId, children }: Props = $props();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="field">
|
||||||
|
{#if label}
|
||||||
|
<label class="label" for={forId}>
|
||||||
|
{label}
|
||||||
|
{#if required}<span class="req" aria-hidden="true">*</span>{/if}
|
||||||
|
</label>
|
||||||
|
{/if}
|
||||||
|
<div class="control" class:has-error={!!error}>
|
||||||
|
{@render children?.()}
|
||||||
|
</div>
|
||||||
|
{#if error}
|
||||||
|
<div class="msg msg-error" role="alert">{error}</div>
|
||||||
|
{:else if hint}
|
||||||
|
<div class="msg msg-hint">{hint}</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.field {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: var(--space-2);
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
.label {
|
||||||
|
font-size: var(--text-xs);
|
||||||
|
font-weight: var(--weight-semibold);
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: var(--tracking-label);
|
||||||
|
color: var(--text-tertiary);
|
||||||
|
}
|
||||||
|
.req { color: var(--state-danger); margin-left: 3px; }
|
||||||
|
.control { display: flex; flex-direction: column; }
|
||||||
|
.msg {
|
||||||
|
font-size: var(--text-xs);
|
||||||
|
}
|
||||||
|
.msg-hint { color: var(--text-tertiary); }
|
||||||
|
.msg-error { color: var(--state-danger); }
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,102 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
interface Props {
|
||||||
|
value?: string;
|
||||||
|
type?: 'text' | 'search' | 'email' | 'number' | 'url' | 'password' | 'file';
|
||||||
|
placeholder?: string;
|
||||||
|
id?: string;
|
||||||
|
name?: string;
|
||||||
|
required?: boolean;
|
||||||
|
disabled?: boolean;
|
||||||
|
readonly?: boolean;
|
||||||
|
autocomplete?: import('svelte/elements').FullAutoFill;
|
||||||
|
mono?: boolean;
|
||||||
|
onchange?: (e: Event) => void;
|
||||||
|
oninput?: (e: Event) => void;
|
||||||
|
accept?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
let {
|
||||||
|
value = $bindable(''),
|
||||||
|
type = 'text',
|
||||||
|
placeholder,
|
||||||
|
id,
|
||||||
|
name,
|
||||||
|
required = false,
|
||||||
|
disabled = false,
|
||||||
|
readonly = false,
|
||||||
|
autocomplete,
|
||||||
|
mono = false,
|
||||||
|
onchange,
|
||||||
|
oninput,
|
||||||
|
accept
|
||||||
|
}: Props = $props();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<input
|
||||||
|
class="input"
|
||||||
|
class:mono
|
||||||
|
{type}
|
||||||
|
{id}
|
||||||
|
{name}
|
||||||
|
{placeholder}
|
||||||
|
{required}
|
||||||
|
{disabled}
|
||||||
|
{readonly}
|
||||||
|
{autocomplete}
|
||||||
|
{accept}
|
||||||
|
bind:value
|
||||||
|
{onchange}
|
||||||
|
{oninput}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.input {
|
||||||
|
width: 100%;
|
||||||
|
padding: 9px 12px;
|
||||||
|
background: var(--surface-sunken);
|
||||||
|
border: 1px solid var(--border-subtle);
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
color: var(--text-primary);
|
||||||
|
font-family: var(--font-body);
|
||||||
|
font-size: var(--text-sm);
|
||||||
|
line-height: 1.4;
|
||||||
|
transition:
|
||||||
|
border-color var(--dur-fast) var(--ease-standard),
|
||||||
|
background-color var(--dur-fast) var(--ease-standard),
|
||||||
|
box-shadow var(--dur-fast) var(--ease-standard);
|
||||||
|
}
|
||||||
|
.input.mono { font-family: var(--font-mono); }
|
||||||
|
.input::placeholder { color: var(--text-quaternary); }
|
||||||
|
|
||||||
|
.input:hover { border-color: var(--border-strong); }
|
||||||
|
.input:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: var(--accent-primary);
|
||||||
|
background: var(--surface);
|
||||||
|
box-shadow: 0 0 0 3px rgba(46, 134, 209, 0.15);
|
||||||
|
}
|
||||||
|
.input:disabled {
|
||||||
|
opacity: 0.5;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
.input[type='file'] {
|
||||||
|
padding: 6px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.input[type='file']::file-selector-button {
|
||||||
|
margin-right: var(--space-3);
|
||||||
|
padding: 6px 12px;
|
||||||
|
background: var(--surface-raised);
|
||||||
|
color: var(--text-primary);
|
||||||
|
border: 1px solid var(--border-subtle);
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
|
cursor: pointer;
|
||||||
|
font-family: var(--font-body);
|
||||||
|
font-size: var(--text-xs);
|
||||||
|
font-weight: var(--weight-medium);
|
||||||
|
transition: background-color var(--dur-fast) var(--ease-standard);
|
||||||
|
}
|
||||||
|
.input[type='file']::file-selector-button:hover {
|
||||||
|
background: var(--surface-overlay);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,86 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import type { Snippet } from 'svelte';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
title: string;
|
||||||
|
subtitle?: string | null;
|
||||||
|
eyebrow?: string | null;
|
||||||
|
size?: 'md' | 'lg';
|
||||||
|
crumbs?: Snippet;
|
||||||
|
actions?: Snippet;
|
||||||
|
}
|
||||||
|
|
||||||
|
let {
|
||||||
|
title,
|
||||||
|
subtitle = null,
|
||||||
|
eyebrow = null,
|
||||||
|
size = 'md',
|
||||||
|
crumbs,
|
||||||
|
actions
|
||||||
|
}: Props = $props();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<header class="section-header s-{size}">
|
||||||
|
{#if crumbs}<div class="crumbs">{@render crumbs()}</div>{/if}
|
||||||
|
<div class="row">
|
||||||
|
<div class="titles">
|
||||||
|
{#if eyebrow}<div class="eyebrow">{eyebrow}</div>{/if}
|
||||||
|
<h1 class="title">{title}</h1>
|
||||||
|
{#if subtitle}<p class="subtitle">{subtitle}</p>{/if}
|
||||||
|
</div>
|
||||||
|
{#if actions}<div class="actions">{@render actions()}</div>{/if}
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.section-header {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: var(--space-3);
|
||||||
|
margin-bottom: var(--space-8);
|
||||||
|
}
|
||||||
|
.crumbs {
|
||||||
|
font-size: var(--text-xs);
|
||||||
|
color: var(--text-tertiary);
|
||||||
|
}
|
||||||
|
.row {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-end;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: var(--space-6);
|
||||||
|
}
|
||||||
|
.titles { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
|
||||||
|
.eyebrow {
|
||||||
|
font-size: var(--text-xs);
|
||||||
|
font-weight: var(--weight-semibold);
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: var(--tracking-label);
|
||||||
|
color: var(--accent-primary);
|
||||||
|
}
|
||||||
|
.title {
|
||||||
|
margin: 0;
|
||||||
|
font-family: var(--font-body);
|
||||||
|
font-weight: var(--weight-bold);
|
||||||
|
color: var(--text-primary);
|
||||||
|
letter-spacing: var(--tracking-tight);
|
||||||
|
line-height: var(--leading-tight);
|
||||||
|
}
|
||||||
|
.s-md .title { font-size: var(--text-2xl); }
|
||||||
|
.s-lg .title { font-size: var(--text-3xl); }
|
||||||
|
.subtitle {
|
||||||
|
margin: 0;
|
||||||
|
font-size: var(--text-sm);
|
||||||
|
color: var(--text-tertiary);
|
||||||
|
}
|
||||||
|
.actions {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--space-2);
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 640px) {
|
||||||
|
.row { flex-direction: column; align-items: flex-start; gap: var(--space-4); }
|
||||||
|
.actions { width: 100%; }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,90 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
interface Option {
|
||||||
|
value: string;
|
||||||
|
label: string;
|
||||||
|
disabled?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
value?: string;
|
||||||
|
options: Option[];
|
||||||
|
id?: string;
|
||||||
|
name?: string;
|
||||||
|
required?: boolean;
|
||||||
|
disabled?: boolean;
|
||||||
|
placeholder?: string;
|
||||||
|
onchange?: (e: Event) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
let {
|
||||||
|
value = $bindable(''),
|
||||||
|
options,
|
||||||
|
id,
|
||||||
|
name,
|
||||||
|
required = false,
|
||||||
|
disabled = false,
|
||||||
|
placeholder,
|
||||||
|
onchange
|
||||||
|
}: Props = $props();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="wrap">
|
||||||
|
<select
|
||||||
|
class="select"
|
||||||
|
{id}
|
||||||
|
{name}
|
||||||
|
{required}
|
||||||
|
{disabled}
|
||||||
|
bind:value
|
||||||
|
{onchange}
|
||||||
|
>
|
||||||
|
{#if placeholder}
|
||||||
|
<option value="" disabled>{placeholder}</option>
|
||||||
|
{/if}
|
||||||
|
{#each options as o (o.value)}
|
||||||
|
<option value={o.value} disabled={o.disabled}>{o.label}</option>
|
||||||
|
{/each}
|
||||||
|
</select>
|
||||||
|
<span class="chev" aria-hidden="true">▾</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.wrap {
|
||||||
|
position: relative;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.select {
|
||||||
|
width: 100%;
|
||||||
|
appearance: none;
|
||||||
|
padding: 9px 32px 9px 12px;
|
||||||
|
background: var(--surface-sunken);
|
||||||
|
border: 1px solid var(--border-subtle);
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
color: var(--text-primary);
|
||||||
|
font-family: var(--font-body);
|
||||||
|
font-size: var(--text-sm);
|
||||||
|
line-height: 1.4;
|
||||||
|
cursor: pointer;
|
||||||
|
transition:
|
||||||
|
border-color var(--dur-fast) var(--ease-standard),
|
||||||
|
background-color var(--dur-fast) var(--ease-standard),
|
||||||
|
box-shadow var(--dur-fast) var(--ease-standard);
|
||||||
|
}
|
||||||
|
.select:hover { border-color: var(--border-strong); }
|
||||||
|
.select:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: var(--accent-primary);
|
||||||
|
background: var(--surface);
|
||||||
|
box-shadow: 0 0 0 3px rgba(46, 134, 209, 0.15);
|
||||||
|
}
|
||||||
|
.select:disabled { opacity: 0.5; cursor: not-allowed; }
|
||||||
|
.chev {
|
||||||
|
position: absolute;
|
||||||
|
right: var(--space-3);
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
color: var(--text-tertiary);
|
||||||
|
pointer-events: none;
|
||||||
|
font-size: var(--text-xs);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,39 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
interface Props {
|
||||||
|
width?: string;
|
||||||
|
height?: string;
|
||||||
|
radius?: 'sm' | 'md' | 'lg' | 'pill';
|
||||||
|
block?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
let {
|
||||||
|
width = '100%',
|
||||||
|
height = '1em',
|
||||||
|
radius = 'sm',
|
||||||
|
block = false
|
||||||
|
}: Props = $props();
|
||||||
|
|
||||||
|
let style = $derived(`width:${width};height:${height};`);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<span class="sk r-{radius}" class:block {style}></span>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.sk {
|
||||||
|
display: inline-block;
|
||||||
|
background:
|
||||||
|
linear-gradient(
|
||||||
|
90deg,
|
||||||
|
var(--surface-raised) 0%,
|
||||||
|
var(--surface-overlay) 50%,
|
||||||
|
var(--surface-raised) 100%
|
||||||
|
);
|
||||||
|
background-size: 200% 100%;
|
||||||
|
animation: shimmer 1.6s var(--ease-linear) infinite;
|
||||||
|
}
|
||||||
|
.block { display: block; }
|
||||||
|
.r-sm { border-radius: var(--radius-sm); }
|
||||||
|
.r-md { border-radius: var(--radius-md); }
|
||||||
|
.r-lg { border-radius: var(--radius-lg); }
|
||||||
|
.r-pill { border-radius: var(--radius-pill); }
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,102 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { tweenedNumber } from '$ui/motion/tweenNumber.js';
|
||||||
|
import type { Snippet } from 'svelte';
|
||||||
|
|
||||||
|
type Size = 'sm' | 'md' | 'lg' | 'xl';
|
||||||
|
type Tone = 'primary' | 'accent' | 'online' | 'warning' | 'danger';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
label?: string;
|
||||||
|
value: number | string | null | undefined;
|
||||||
|
unit?: string;
|
||||||
|
size?: Size;
|
||||||
|
tone?: Tone;
|
||||||
|
tween?: boolean;
|
||||||
|
format?: (n: number) => string;
|
||||||
|
trailing?: Snippet;
|
||||||
|
}
|
||||||
|
|
||||||
|
let {
|
||||||
|
label,
|
||||||
|
value,
|
||||||
|
unit,
|
||||||
|
size = 'md',
|
||||||
|
tone = 'primary',
|
||||||
|
tween = true,
|
||||||
|
format,
|
||||||
|
trailing
|
||||||
|
}: Props = $props();
|
||||||
|
|
||||||
|
// Only numeric values can be tweened. Strings/nulls render as-is.
|
||||||
|
let numeric = $derived(typeof value === 'number' ? value : null);
|
||||||
|
// Start at 0 — the $effect below jumps to the real initial value on
|
||||||
|
// first paint, which is the intended entrance animation.
|
||||||
|
let tweened = tweenedNumber(0);
|
||||||
|
|
||||||
|
$effect(() => {
|
||||||
|
if (numeric !== null) tweened.set(numeric);
|
||||||
|
});
|
||||||
|
|
||||||
|
let displayValue = $derived.by(() => {
|
||||||
|
if (value === null || value === undefined) return '—';
|
||||||
|
if (typeof value === 'string') return value;
|
||||||
|
const n = tween ? $tweened : value;
|
||||||
|
return format ? format(n) : Math.round(n).toString();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="stat s-{size} t-{tone}">
|
||||||
|
{#if label}
|
||||||
|
<div class="label">{label}</div>
|
||||||
|
{/if}
|
||||||
|
<div class="value-row">
|
||||||
|
<span class="value">{displayValue}</span>
|
||||||
|
{#if unit}<span class="unit">{unit}</span>{/if}
|
||||||
|
{#if trailing}<span class="trailing">{@render trailing()}</span>{/if}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.stat {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: var(--space-1);
|
||||||
|
}
|
||||||
|
.label {
|
||||||
|
font-family: var(--font-body);
|
||||||
|
font-size: var(--text-xs);
|
||||||
|
font-weight: var(--weight-medium);
|
||||||
|
color: var(--text-tertiary);
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: var(--tracking-label);
|
||||||
|
}
|
||||||
|
.value-row {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: baseline;
|
||||||
|
gap: var(--space-2);
|
||||||
|
}
|
||||||
|
.value {
|
||||||
|
font-family: var(--font-numeric);
|
||||||
|
font-variant-numeric: tabular-nums;
|
||||||
|
font-weight: var(--weight-semibold);
|
||||||
|
letter-spacing: var(--tracking-tight);
|
||||||
|
line-height: var(--leading-tight);
|
||||||
|
}
|
||||||
|
.unit {
|
||||||
|
font-size: var(--text-sm);
|
||||||
|
color: var(--text-tertiary);
|
||||||
|
font-weight: var(--weight-medium);
|
||||||
|
}
|
||||||
|
.trailing { display: inline-flex; }
|
||||||
|
|
||||||
|
.s-sm .value { font-size: var(--text-md); }
|
||||||
|
.s-md .value { font-size: var(--text-xl); }
|
||||||
|
.s-lg .value { font-size: var(--text-2xl); }
|
||||||
|
.s-xl .value { font-size: var(--text-3xl); }
|
||||||
|
|
||||||
|
.t-primary .value { color: var(--text-primary); }
|
||||||
|
.t-accent .value { color: var(--accent-primary); }
|
||||||
|
.t-online .value { color: var(--state-online); }
|
||||||
|
.t-warning .value { color: var(--state-warning); }
|
||||||
|
.t-danger .value { color: var(--state-danger); }
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,64 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import type { Health } from '$ui/stores/servers.js';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
health?: Health;
|
||||||
|
size?: 'sm' | 'md';
|
||||||
|
label?: string | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
let { health = 'offline', size = 'md', label = null }: Props = $props();
|
||||||
|
|
||||||
|
let toneClass = $derived(
|
||||||
|
health === 'online' ? 't-online' :
|
||||||
|
health === 'stale' ? 't-warning' :
|
||||||
|
't-danger'
|
||||||
|
);
|
||||||
|
|
||||||
|
let announceLabel = $derived(
|
||||||
|
label ?? (
|
||||||
|
health === 'online' ? 'online' :
|
||||||
|
health === 'stale' ? 'stale' :
|
||||||
|
'offline'
|
||||||
|
)
|
||||||
|
);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<span class="pip s-{size} {toneClass}" role="status" aria-label={announceLabel}>
|
||||||
|
<span class="halo" aria-hidden="true"></span>
|
||||||
|
<span class="dot" aria-hidden="true"></span>
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.pip {
|
||||||
|
position: relative;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
.s-sm { width: 8px; height: 8px; }
|
||||||
|
.s-md { width: 10px; height: 10px; }
|
||||||
|
|
||||||
|
.dot {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Halo — opacity+scale only, GPU-cheap, no box-shadow ring. */
|
||||||
|
.halo {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
border-radius: 50%;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.t-online .dot { background: var(--state-online); box-shadow: 0 0 4px rgba(124, 212, 255, 0.55); }
|
||||||
|
.t-online .halo { background: var(--state-online); animation: pip-breathe 2.4s var(--ease-standard) infinite; }
|
||||||
|
|
||||||
|
.t-warning .dot { background: var(--state-warning); }
|
||||||
|
.t-danger .dot { background: var(--state-danger); opacity: 0.7; }
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,101 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
interface Tab {
|
||||||
|
id: string;
|
||||||
|
label: string;
|
||||||
|
badge?: string | number | null;
|
||||||
|
disabled?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
tabs: Tab[];
|
||||||
|
value: string;
|
||||||
|
onchange?: (id: string) => void;
|
||||||
|
ariaLabel?: string;
|
||||||
|
size?: 'sm' | 'md';
|
||||||
|
}
|
||||||
|
|
||||||
|
let { tabs, value = $bindable(), onchange, ariaLabel, size = 'md' }: Props = $props();
|
||||||
|
|
||||||
|
function select(id: string, disabled: boolean | undefined) {
|
||||||
|
if (disabled) return;
|
||||||
|
value = id;
|
||||||
|
onchange?.(id);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="tabs s-{size}" role="tablist" aria-label={ariaLabel}>
|
||||||
|
{#each tabs as t (t.id)}
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="tab"
|
||||||
|
class:active={value === t.id}
|
||||||
|
role="tab"
|
||||||
|
aria-selected={value === t.id}
|
||||||
|
disabled={t.disabled}
|
||||||
|
onclick={() => select(t.id, t.disabled)}
|
||||||
|
>
|
||||||
|
<span class="lbl">{t.label}</span>
|
||||||
|
{#if t.badge !== undefined && t.badge !== null && t.badge !== ''}
|
||||||
|
<span class="badge">{t.badge}</span>
|
||||||
|
{/if}
|
||||||
|
</button>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.tabs {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 2px;
|
||||||
|
padding: 4px;
|
||||||
|
background: color-mix(in oklab, var(--surface) 80%, transparent);
|
||||||
|
border-radius: var(--radius-pill);
|
||||||
|
border: 1px solid var(--border-subtle);
|
||||||
|
}
|
||||||
|
.tab {
|
||||||
|
appearance: none;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--space-2);
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
color: var(--text-tertiary);
|
||||||
|
font-family: var(--font-body);
|
||||||
|
font-weight: var(--weight-medium);
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: var(--radius-pill);
|
||||||
|
transition:
|
||||||
|
color var(--dur-fast) var(--ease-standard),
|
||||||
|
background-color var(--dur-fast) var(--ease-standard);
|
||||||
|
}
|
||||||
|
.s-sm .tab { padding: 6px 12px; font-size: var(--text-xs); }
|
||||||
|
.s-md .tab { padding: 8px 16px; font-size: var(--text-sm); }
|
||||||
|
|
||||||
|
.tab:hover:not(:disabled):not(.active) { color: var(--text-primary); }
|
||||||
|
.tab:focus-visible { outline: none; box-shadow: var(--focus-ring); }
|
||||||
|
.tab:disabled { opacity: 0.4; cursor: not-allowed; }
|
||||||
|
|
||||||
|
.tab.active {
|
||||||
|
background: var(--surface-raised);
|
||||||
|
color: var(--text-primary);
|
||||||
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
min-width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
padding: 0 5px;
|
||||||
|
border-radius: var(--radius-pill);
|
||||||
|
background: var(--surface-overlay);
|
||||||
|
color: var(--text-secondary);
|
||||||
|
font-family: var(--font-mono);
|
||||||
|
font-size: 10px;
|
||||||
|
}
|
||||||
|
.tab.active .badge {
|
||||||
|
background: var(--accent-primary);
|
||||||
|
color: var(--text-on-accent);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,70 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
interface Props {
|
||||||
|
value?: string;
|
||||||
|
placeholder?: string;
|
||||||
|
id?: string;
|
||||||
|
name?: string;
|
||||||
|
rows?: number;
|
||||||
|
required?: boolean;
|
||||||
|
disabled?: boolean;
|
||||||
|
readonly?: boolean;
|
||||||
|
mono?: boolean;
|
||||||
|
oninput?: (e: Event) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
let {
|
||||||
|
value = $bindable(''),
|
||||||
|
placeholder,
|
||||||
|
id,
|
||||||
|
name,
|
||||||
|
rows = 4,
|
||||||
|
required = false,
|
||||||
|
disabled = false,
|
||||||
|
readonly = false,
|
||||||
|
mono = false,
|
||||||
|
oninput
|
||||||
|
}: Props = $props();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<textarea
|
||||||
|
class="textarea"
|
||||||
|
class:mono
|
||||||
|
{id}
|
||||||
|
{name}
|
||||||
|
{placeholder}
|
||||||
|
{rows}
|
||||||
|
{required}
|
||||||
|
{disabled}
|
||||||
|
{readonly}
|
||||||
|
bind:value
|
||||||
|
{oninput}
|
||||||
|
></textarea>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.textarea {
|
||||||
|
width: 100%;
|
||||||
|
padding: var(--space-3) var(--space-3);
|
||||||
|
background: var(--surface-sunken);
|
||||||
|
border: 1px solid var(--border-subtle);
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
color: var(--text-primary);
|
||||||
|
font-family: var(--font-body);
|
||||||
|
font-size: var(--text-sm);
|
||||||
|
line-height: var(--leading-body);
|
||||||
|
resize: vertical;
|
||||||
|
transition:
|
||||||
|
border-color var(--dur-fast) var(--ease-standard),
|
||||||
|
background-color var(--dur-fast) var(--ease-standard),
|
||||||
|
box-shadow var(--dur-fast) var(--ease-standard);
|
||||||
|
}
|
||||||
|
.textarea.mono { font-family: var(--font-mono); font-size: var(--text-xs); line-height: var(--leading-mono); }
|
||||||
|
.textarea::placeholder { color: var(--text-quaternary); }
|
||||||
|
.textarea:hover { border-color: var(--border-strong); }
|
||||||
|
.textarea:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: var(--accent-primary);
|
||||||
|
background: var(--surface);
|
||||||
|
box-shadow: 0 0 0 3px rgba(46, 134, 209, 0.15);
|
||||||
|
}
|
||||||
|
.textarea:disabled { opacity: 0.5; cursor: not-allowed; }
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,23 @@
|
|||||||
|
import { tweened, type Tweened } from 'svelte/motion';
|
||||||
|
import { cubicOut } from 'svelte/easing';
|
||||||
|
|
||||||
|
// Svelte's `tweened` store, pre-configured for our design system so number
|
||||||
|
// changes feel like Apple's counter animations: fast, expressive out-quart,
|
||||||
|
// tabular-numeric-friendly.
|
||||||
|
//
|
||||||
|
// Respects prefers-reduced-motion at construction time — reduced-motion users
|
||||||
|
// get instant updates instead of interpolation.
|
||||||
|
|
||||||
|
const REDUCED_MOTION =
|
||||||
|
typeof window !== 'undefined' &&
|
||||||
|
window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
|
||||||
|
|
||||||
|
export function tweenedNumber(
|
||||||
|
initial = 0,
|
||||||
|
opts: { duration?: number } = {}
|
||||||
|
): Tweened<number> {
|
||||||
|
return tweened(initial, {
|
||||||
|
duration: REDUCED_MOTION ? 0 : (opts.duration ?? 360),
|
||||||
|
easing: cubicOut
|
||||||
|
});
|
||||||
|
}
|
||||||
@@ -0,0 +1,27 @@
|
|||||||
|
// SvelteKit `onNavigate` helper — wraps client-side navigation in the
|
||||||
|
// browser's View Transitions API so route changes cross-fade cleanly and
|
||||||
|
// shared-element transitions (Fleet card → Server detail hero) morph.
|
||||||
|
//
|
||||||
|
// Chromium ships the API today; Firefox and Safari fall through to a plain
|
||||||
|
// navigation — same behavior as before, just without the transition.
|
||||||
|
|
||||||
|
// Structural type — accepts whatever SvelteKit passes to onNavigate without
|
||||||
|
// coupling to a specific @sveltejs/kit version's type name.
|
||||||
|
type NavigationLike = { complete: Promise<unknown> };
|
||||||
|
|
||||||
|
export function enableViewTransitions(navigation: NavigationLike): Promise<void> | void {
|
||||||
|
// Feature-detect without a custom Document extension — the DOM lib type
|
||||||
|
// varies between TS versions, and any narrowing has to survive both.
|
||||||
|
const start = (document as unknown as {
|
||||||
|
startViewTransition?: (cb: () => void | Promise<void>) => unknown;
|
||||||
|
}).startViewTransition;
|
||||||
|
|
||||||
|
if (typeof start !== 'function') return;
|
||||||
|
|
||||||
|
return new Promise<void>((resolve) => {
|
||||||
|
start.call(document, async () => {
|
||||||
|
resolve();
|
||||||
|
await navigation.complete;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
@@ -6,8 +6,14 @@
|
|||||||
// assets. Importing the CSS from JS puts it on the module graph, which
|
// assets. Importing the CSS from JS puts it on the module graph, which
|
||||||
// Vite *does* walk, so the font binaries end up in
|
// Vite *does* walk, so the font binaries end up in
|
||||||
// build/client/_app/immutable/assets/files/.
|
// build/client/_app/immutable/assets/files/.
|
||||||
|
//
|
||||||
|
// Global set:
|
||||||
|
// - Inter (400/500/600/700) — everything.
|
||||||
|
// - JetBrains Mono (400/500) — data cells (timestamps, scores, IDs).
|
||||||
|
//
|
||||||
|
// Alfa Slab One is NOT loaded here — it's used only in BrandMark, which
|
||||||
|
// imports its own weight so the rest of the product doesn't pay for it.
|
||||||
|
|
||||||
import '@fontsource/alfa-slab-one/400.css';
|
|
||||||
import '@fontsource/inter/400.css';
|
import '@fontsource/inter/400.css';
|
||||||
import '@fontsource/inter/500.css';
|
import '@fontsource/inter/500.css';
|
||||||
import '@fontsource/inter/600.css';
|
import '@fontsource/inter/600.css';
|
||||||
|
|||||||
+227
-86
@@ -1,121 +1,262 @@
|
|||||||
/* Electric Cherry — design tokens.
|
/* Electric Cherry — design tokens.
|
||||||
Blue-primary theme: bright saturated mid-blue from the brand mark,
|
|
||||||
with cherry red demoted to accent + danger. Cool-tinted dark surfaces,
|
|
||||||
larger typography, more generous spacing.
|
|
||||||
|
|
||||||
Font @import chains live in src/lib/ui/styles/fonts.ts and are pulled
|
This file is the single source of truth for color, type, spacing, motion,
|
||||||
in by +layout.svelte via JS import — Vite's CSS `@import` inlines the
|
and elevation. It's organized in three layers:
|
||||||
text but doesn't emit the url()-referenced woff files as assets, so
|
|
||||||
we need the JS module graph to see them. */
|
1. RAW RAMPS — the actual color/type/space values. Never referenced
|
||||||
|
directly by components.
|
||||||
|
2. SEMANTIC ALIASES — what components should reference (--surface,
|
||||||
|
--text-primary, --state-online, --space-4, etc.). Swapping the palette
|
||||||
|
or spacing rhythm later is a single-file edit.
|
||||||
|
3. LEGACY ALIASES — old names (--bg-page, --accent, --ink-300, --pad-card…)
|
||||||
|
mapped onto new semantic values. Kept alive so existing components render
|
||||||
|
during the phased redesign; each page rewrite removes its usage, and
|
||||||
|
this block shrinks over time.
|
||||||
|
|
||||||
|
Design principles this file encodes:
|
||||||
|
· One accent (blue). Cyan/amber/red/green mean state only.
|
||||||
|
· Depth by light, not lines. One ambient shadow + subtle translucency.
|
||||||
|
· One typeface (Inter). Mono for data. Display face lives inside BrandMark.
|
||||||
|
· Motion tokens standardize easings + durations across the product. */
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
/* Blue — surfaces + primary (matches logo circle) */
|
/* ---------- 1. RAW RAMPS ---------- */
|
||||||
--blue-975: #060b16;
|
|
||||||
--blue-925: #0a1428;
|
/* Blue — one hue, five stops. Brand primary + focus/link. */
|
||||||
--blue-875: #12203a;
|
--blue-950: #060b16;
|
||||||
--blue-825: #182b4d;
|
--blue-900: #0d1826;
|
||||||
--blue-700: #1e3260;
|
--blue-700: #1c3d6b;
|
||||||
--blue-600: #2560a8;
|
|
||||||
--blue-500: #2e86d1;
|
--blue-500: #2e86d1;
|
||||||
--blue-400: #4ea3e8;
|
|
||||||
--blue-300: #7cc0f5;
|
--blue-300: #7cc0f5;
|
||||||
|
|
||||||
/* Spark — soft cyan accent */
|
/* Neutral gray — cool-tinted, distinct from the blue ramp so surfaces
|
||||||
--spark-500: #7cd4ff;
|
stop being tinted-blue on tinted-blue. */
|
||||||
--spark-400: #a8e5ff;
|
--gray-975: #08090c;
|
||||||
--spark-glow: 0 0 8px rgba(124, 212, 255, 0.55);
|
--gray-950: #0d0f14;
|
||||||
--spark-glow-lg: 0 0 14px rgba(124, 212, 255, 0.45);
|
--gray-925: #12151c;
|
||||||
|
--gray-900: #171b24;
|
||||||
|
--gray-850: #1f242f;
|
||||||
|
--gray-800: #262c39;
|
||||||
|
--gray-700: #363d4d;
|
||||||
|
--gray-500: #6b7488;
|
||||||
|
--gray-400: #8892a5;
|
||||||
|
--gray-300: #a8b2c4;
|
||||||
|
--gray-200: #c5cddc;
|
||||||
|
--gray-100: #dfe4ee;
|
||||||
|
--gray-050: #eef2f8;
|
||||||
|
|
||||||
/* Cherry — retained for danger + brand-cherry accent only */
|
/* State — reserved for actual state, never decoration. */
|
||||||
--cherry-500: #c8102e;
|
--state-online: #7cd4ff;
|
||||||
--cherry-400: #e93656;
|
--state-warning: #ffb020;
|
||||||
--cherry-300: #ff7a92;
|
--state-danger: #ff5670;
|
||||||
|
--state-restarting: #7cc0f5;
|
||||||
|
|
||||||
/* Neutrals — cool blue-white */
|
/* ---------- 2. SEMANTIC ALIASES ---------- */
|
||||||
--cream: #eef4fb;
|
|
||||||
--cream-dim: #b8c8dc;
|
|
||||||
--ink-100: #eaf1fb;
|
|
||||||
--ink-300: #94a8c4;
|
|
||||||
--ink-500: #5a6d8a;
|
|
||||||
--ink-700: #2a3a55;
|
|
||||||
|
|
||||||
/* State */
|
/* Surfaces — three tiers of depth, all near-black cool gray. */
|
||||||
--amber-500: #ffb020;
|
--surface-sunken: var(--gray-975);
|
||||||
--amber-glow: 0 0 8px rgba(255, 176, 32, 0.4);
|
--surface: var(--gray-925);
|
||||||
--danger-500: var(--cherry-500);
|
--surface-raised: var(--gray-850);
|
||||||
--success-500: #4ade80;
|
--surface-overlay: var(--gray-800);
|
||||||
|
|
||||||
/* Semantic aliases — components should reference THESE, not the raw ramps.
|
/* Text — four steps of hierarchy on dark. */
|
||||||
Swapping palette later is then a single-file edit. */
|
--text-primary: var(--gray-050);
|
||||||
--bg-page: var(--blue-975);
|
--text-secondary: var(--gray-300);
|
||||||
--bg-nav: var(--blue-925);
|
--text-tertiary: var(--gray-500);
|
||||||
--bg-card: var(--blue-875);
|
--text-quaternary: var(--gray-700);
|
||||||
--bg-card-hi: var(--blue-825);
|
--text-on-accent: #ffffff;
|
||||||
--border: var(--blue-700);
|
|
||||||
--border-hi: var(--blue-600);
|
|
||||||
--accent: var(--blue-500);
|
|
||||||
--accent-hi: var(--blue-400);
|
|
||||||
--accent-glow: 0 0 8px rgba(46, 134, 209, 0.5);
|
|
||||||
--accent-glow-lg: 0 0 14px rgba(46, 134, 209, 0.4);
|
|
||||||
|
|
||||||
/* Typography */
|
/* Border — hairlines, no more. */
|
||||||
--font-display: 'Alfa Slab One', 'Georgia', serif;
|
--border-subtle: rgba(255, 255, 255, 0.06);
|
||||||
|
--border-strong: rgba(255, 255, 255, 0.12);
|
||||||
|
--border-focus: var(--blue-500);
|
||||||
|
|
||||||
|
/* Accent — one color, one voice. */
|
||||||
|
--accent-primary: var(--blue-500);
|
||||||
|
--accent-primary-hover: var(--blue-300);
|
||||||
|
--accent-primary-active: #256cae;
|
||||||
|
|
||||||
|
/* Typography — Inter everywhere, mono for data.
|
||||||
|
Display face lives inside BrandMark; no global --font-display token. */
|
||||||
--font-body: 'Inter', system-ui, -apple-system, sans-serif;
|
--font-body: 'Inter', system-ui, -apple-system, sans-serif;
|
||||||
|
--font-numeric: 'Inter', system-ui, -apple-system, sans-serif;
|
||||||
--font-mono: 'JetBrains Mono', ui-monospace, monospace;
|
--font-mono: 'JetBrains Mono', ui-monospace, monospace;
|
||||||
|
|
||||||
/* Type scale — substantial bump */
|
/* Type scale — cleaner ramp anchored at 15px body. */
|
||||||
--text-xs: 11px;
|
--text-xs: 12px;
|
||||||
--text-sm: 13px;
|
--text-sm: 13px;
|
||||||
--text-base: 15px;
|
--text-base: 15px;
|
||||||
--text-md: 17px;
|
--text-md: 17px;
|
||||||
--text-lg: 20px;
|
--text-lg: 20px;
|
||||||
--text-xl: 24px;
|
--text-xl: 24px;
|
||||||
--text-2xl: 30px;
|
--text-2xl: 32px;
|
||||||
--text-3xl: 40px;
|
--text-3xl: 44px;
|
||||||
|
|
||||||
|
--leading-tight: 1.15;
|
||||||
|
--leading-body: 1.55;
|
||||||
|
--leading-mono: 1.5;
|
||||||
|
|
||||||
|
--tracking-tight: -0.01em;
|
||||||
|
--tracking-normal: 0;
|
||||||
|
--tracking-wide: 0.02em;
|
||||||
|
--tracking-label: 0.08em;
|
||||||
|
|
||||||
|
/* Weight scale — one variable at each rung so intent is legible. */
|
||||||
|
--weight-regular: 400;
|
||||||
|
--weight-medium: 500;
|
||||||
|
--weight-semibold: 600;
|
||||||
|
--weight-bold: 700;
|
||||||
|
|
||||||
|
/* Spacing — strict 8pt grid (with 4pt half-step). */
|
||||||
|
--space-1: 4px;
|
||||||
|
--space-2: 8px;
|
||||||
|
--space-3: 12px;
|
||||||
|
--space-4: 16px;
|
||||||
|
--space-5: 20px;
|
||||||
|
--space-6: 24px;
|
||||||
|
--space-8: 32px;
|
||||||
|
--space-10: 40px;
|
||||||
|
--space-12: 48px;
|
||||||
|
--space-16: 64px;
|
||||||
|
--space-24: 96px;
|
||||||
|
|
||||||
|
/* Radii — three steps + pill. Softer than the old 4/8/12. */
|
||||||
|
--radius-sm: 6px;
|
||||||
|
--radius-md: 10px;
|
||||||
|
--radius-lg: 16px;
|
||||||
|
--radius-pill: 999px;
|
||||||
|
|
||||||
|
/* Elevation — two shadows only, ambient + raised. No glow rings. */
|
||||||
|
--shadow-ambient:
|
||||||
|
0 1px 2px rgba(0, 0, 0, 0.35),
|
||||||
|
0 4px 12px rgba(0, 0, 0, 0.22);
|
||||||
|
--shadow-raised:
|
||||||
|
0 2px 4px rgba(0, 0, 0, 0.4),
|
||||||
|
0 12px 28px rgba(0, 0, 0, 0.32);
|
||||||
|
|
||||||
|
/* Motion — standardized easings + durations. Apple-esque out-quart. */
|
||||||
|
--ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
|
||||||
|
--ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1);
|
||||||
|
--ease-linear: linear;
|
||||||
|
--dur-instant: 80ms;
|
||||||
|
--dur-fast: 160ms;
|
||||||
|
--dur-base: 240ms;
|
||||||
|
--dur-slow: 360ms;
|
||||||
|
--dur-slower: 560ms;
|
||||||
|
|
||||||
|
/* Focus ring — 2px accent, 2px offset, everywhere. */
|
||||||
|
--focus-ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent-primary);
|
||||||
|
|
||||||
|
/* ---------- 3. LEGACY ALIASES ----------
|
||||||
|
Old token names, mapped onto new semantic values so components that
|
||||||
|
haven't been rewritten yet keep rendering. Delete entries as pages
|
||||||
|
migrate; the block should be empty at the end of Phase 8. */
|
||||||
|
|
||||||
|
/* Old blue ramp names */
|
||||||
|
--blue-975: var(--gray-975);
|
||||||
|
--blue-925: var(--gray-950);
|
||||||
|
--blue-875: var(--gray-925);
|
||||||
|
--blue-825: var(--gray-850);
|
||||||
|
--blue-600: #256cae;
|
||||||
|
--blue-400: var(--blue-300);
|
||||||
|
|
||||||
|
/* Old spark/cherry/amber names */
|
||||||
|
--spark-500: var(--state-online);
|
||||||
|
--spark-400: #a8e5ff;
|
||||||
|
--spark-glow: 0 0 8px rgba(124, 212, 255, 0.45);
|
||||||
|
--spark-glow-lg: 0 0 14px rgba(124, 212, 255, 0.35);
|
||||||
|
--cherry-500: var(--state-danger);
|
||||||
|
--cherry-400: #ff7590;
|
||||||
|
--cherry-300: #ff9db0;
|
||||||
|
--amber-500: var(--state-warning);
|
||||||
|
--amber-glow: 0 0 8px rgba(255, 176, 32, 0.32);
|
||||||
|
--danger-500: var(--state-danger);
|
||||||
|
--success-500: #4ade80;
|
||||||
|
|
||||||
|
/* Old neutral names */
|
||||||
|
--cream: var(--text-primary);
|
||||||
|
--cream-dim: var(--gray-200);
|
||||||
|
--ink-100: var(--text-primary);
|
||||||
|
--ink-300: var(--text-secondary);
|
||||||
|
--ink-500: var(--text-tertiary);
|
||||||
|
--ink-700: var(--text-quaternary);
|
||||||
|
|
||||||
|
/* Old surface/border/accent aliases */
|
||||||
|
--bg-page: var(--surface-sunken);
|
||||||
|
--bg-nav: var(--surface);
|
||||||
|
--bg-card: var(--surface);
|
||||||
|
--bg-card-hi: var(--surface-raised);
|
||||||
|
--border: var(--border-subtle);
|
||||||
|
--border-hi: var(--border-strong);
|
||||||
|
--accent: var(--accent-primary);
|
||||||
|
--accent-hi: var(--accent-primary-hover);
|
||||||
|
--accent-glow: 0 0 0 1px rgba(46, 134, 209, 0.35);
|
||||||
|
--accent-glow-lg: 0 0 0 1px rgba(46, 134, 209, 0.28);
|
||||||
|
|
||||||
|
/* Old typography names */
|
||||||
|
--font-display: 'Alfa Slab One', 'Georgia', serif;
|
||||||
--text-mono: 13px;
|
--text-mono: 13px;
|
||||||
--text-mono-sm: 12px;
|
--text-mono-sm: 12px;
|
||||||
|
--tracking-display: 0.12em;
|
||||||
|
--tracking-nav: 0.03em;
|
||||||
|
|
||||||
--leading-tight: 1.2;
|
/* Old spacing/radii names */
|
||||||
--leading-body: 1.6;
|
--pad-card: var(--space-5);
|
||||||
--leading-mono: 1.55;
|
--pad-panel: var(--space-6);
|
||||||
|
--pad-nav-y: var(--space-4);
|
||||||
--tracking-display: 2px;
|
--pad-nav-x: var(--space-8);
|
||||||
--tracking-nav: 0.4px;
|
--gap-section: var(--space-8);
|
||||||
--tracking-label: 1px;
|
--gap-cards: var(--space-4);
|
||||||
|
--r-sm: var(--radius-sm);
|
||||||
/* Spacing */
|
--r-md: var(--radius-md);
|
||||||
--pad-card: 20px;
|
--r-lg: var(--radius-lg);
|
||||||
--pad-panel: 24px;
|
--shadow-card: var(--shadow-ambient);
|
||||||
--pad-nav-y: 16px;
|
--shadow-panel: var(--shadow-raised);
|
||||||
--pad-nav-x: 32px;
|
|
||||||
--gap-section: 32px;
|
|
||||||
--gap-cards: 18px;
|
|
||||||
|
|
||||||
/* Radii */
|
|
||||||
--r-sm: 4px;
|
|
||||||
--r-md: 8px;
|
|
||||||
--r-lg: 12px;
|
|
||||||
|
|
||||||
/* Shadows */
|
|
||||||
--shadow-card: 0 2px 12px rgba(6, 11, 22, 0.5);
|
|
||||||
--shadow-panel: 0 4px 24px rgba(6, 11, 22, 0.4);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Keyframes — pared down.
|
||||||
|
Legacy names kept so existing components animate; the new StatusPip
|
||||||
|
uses `pip-breathe` (opacity-only, GPU-cheap). */
|
||||||
|
|
||||||
|
@keyframes pip-breathe {
|
||||||
|
0%, 100% { opacity: 0.35; transform: scale(1); }
|
||||||
|
50% { opacity: 0.9; transform: scale(1.4); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes shimmer {
|
||||||
|
from { background-position: -200% 0; }
|
||||||
|
to { background-position: 200% 0; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Legacy — retained until ServerCard/BrandMark/StatusDot are replaced. */
|
||||||
@keyframes electric-pulse {
|
@keyframes electric-pulse {
|
||||||
0%, 100% {
|
0%, 100% { box-shadow: 0 0 0 0 rgba(124, 212, 255, 0.5); }
|
||||||
box-shadow: 0 0 0 0 rgba(124, 212, 255, 0.55), var(--spark-glow);
|
50% { box-shadow: 0 0 0 5px rgba(124, 212, 255, 0); }
|
||||||
}
|
|
||||||
50% {
|
|
||||||
box-shadow: 0 0 0 6px rgba(124, 212, 255, 0), var(--spark-glow-lg);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes cherry-fizz {
|
@keyframes cherry-fizz {
|
||||||
0%, 100% { transform: translateY(0); }
|
0%, 100% { transform: translateY(0); }
|
||||||
50% { transform: translateY(-1px); }
|
50% { transform: translateY(-1px); }
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes spark-slide {
|
@keyframes spark-slide {
|
||||||
from { background-position: -100% 0; }
|
from { background-position: -100% 0; }
|
||||||
to { background-position: 200% 0; }
|
to { background-position: 200% 0; }
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Reduced motion — neutralize all animation. Components that respect this
|
||||||
|
token get calm behavior for free; the media query below handles the
|
||||||
|
ones that don't. */
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
:root {
|
||||||
|
--dur-instant: 0.01ms;
|
||||||
|
--dur-fast: 0.01ms;
|
||||||
|
--dur-base: 0.01ms;
|
||||||
|
--dur-slow: 0.01ms;
|
||||||
|
--dur-slower: 0.01ms;
|
||||||
|
}
|
||||||
|
*, *::before, *::after {
|
||||||
|
animation-duration: 0.01ms !important;
|
||||||
|
animation-iteration-count: 1 !important;
|
||||||
|
transition-duration: 0.01ms !important;
|
||||||
|
scroll-behavior: auto !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@@ -0,0 +1,41 @@
|
|||||||
|
import { writable } from 'svelte/store';
|
||||||
|
|
||||||
|
// Small global toast queue.
|
||||||
|
//
|
||||||
|
// Any part of the UI can drop a message and it appears in the corner for a
|
||||||
|
// couple of seconds, then quietly dismisses. Replaces the ad-hoc "flash"
|
||||||
|
// strings scattered across pages when the message doesn't need to live inline
|
||||||
|
// with a form.
|
||||||
|
|
||||||
|
export type ToastVariant = 'info' | 'success' | 'warning' | 'danger';
|
||||||
|
|
||||||
|
export interface Toast {
|
||||||
|
id: number;
|
||||||
|
message: string;
|
||||||
|
variant: ToastVariant;
|
||||||
|
ttl: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const toasts = writable<Toast[]>([]);
|
||||||
|
|
||||||
|
let nextId = 1;
|
||||||
|
|
||||||
|
export function toast(
|
||||||
|
message: string,
|
||||||
|
opts: { variant?: ToastVariant; ttl?: number } = {}
|
||||||
|
): void {
|
||||||
|
const t: Toast = {
|
||||||
|
id: nextId++,
|
||||||
|
message,
|
||||||
|
variant: opts.variant ?? 'info',
|
||||||
|
ttl: opts.ttl ?? 3500
|
||||||
|
};
|
||||||
|
toasts.update((arr) => [...arr, t]);
|
||||||
|
if (t.ttl > 0) {
|
||||||
|
setTimeout(() => dismiss(t.id), t.ttl);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export function dismiss(id: number): void {
|
||||||
|
toasts.update((arr) => arr.filter((t) => t.id !== id));
|
||||||
|
}
|
||||||
+157
-46
@@ -1,9 +1,12 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { onMount } from 'svelte';
|
import { onMount } from 'svelte';
|
||||||
|
import { onNavigate, goto } from '$app/navigation';
|
||||||
import { startPipelineStream } from '$ui/stores/pipeline.js';
|
import { startPipelineStream } from '$ui/stores/pipeline.js';
|
||||||
import { startServerStream } from '$ui/stores/servers.js';
|
import { startServerStream } from '$ui/stores/servers.js';
|
||||||
import { page } from '$app/stores';
|
import { page } from '$app/stores';
|
||||||
import BrandMark from '$ui/components/BrandMark.svelte';
|
import BrandMark from '$ui/components/BrandMark.svelte';
|
||||||
|
import Toaster from '$ui/components/Toaster.svelte';
|
||||||
|
import { enableViewTransitions } from '$ui/motion/viewTransition.js';
|
||||||
// Side-effect import — puts @fontsource CSS on Vite's module graph so
|
// Side-effect import — puts @fontsource CSS on Vite's module graph so
|
||||||
// the referenced woff/woff2 files get emitted into the build.
|
// the referenced woff/woff2 files get emitted into the build.
|
||||||
import '$ui/styles/fonts.js';
|
import '$ui/styles/fonts.js';
|
||||||
@@ -14,27 +17,83 @@
|
|||||||
onMount(() => {
|
onMount(() => {
|
||||||
startPipelineStream();
|
startPipelineStream();
|
||||||
startServerStream();
|
startServerStream();
|
||||||
|
|
||||||
|
// Two-key nav shortcuts (Gmail-style): `g f` fleet, `g d` deployments,
|
||||||
|
// `g b` betas, `g s` scripts. Ignored while typing in inputs.
|
||||||
|
const shortcuts: Record<string, string> = {
|
||||||
|
f: '/', d: '/deployments', b: '/betas',
|
||||||
|
s: '/scripts', c: '/configs', p: '/plugins'
|
||||||
|
};
|
||||||
|
let armed = false;
|
||||||
|
let armTimer: ReturnType<typeof setTimeout> | null = null;
|
||||||
|
|
||||||
|
const onKey = (e: KeyboardEvent) => {
|
||||||
|
const target = e.target as HTMLElement;
|
||||||
|
if (target && (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable)) return;
|
||||||
|
if (e.metaKey || e.ctrlKey || e.altKey) return;
|
||||||
|
|
||||||
|
if (!armed && e.key === 'g') {
|
||||||
|
armed = true;
|
||||||
|
if (armTimer) clearTimeout(armTimer);
|
||||||
|
armTimer = setTimeout(() => { armed = false; }, 1000);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (armed) {
|
||||||
|
armed = false;
|
||||||
|
if (armTimer) { clearTimeout(armTimer); armTimer = null; }
|
||||||
|
const dest = shortcuts[e.key];
|
||||||
|
if (dest) {
|
||||||
|
e.preventDefault();
|
||||||
|
goto(dest);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
window.addEventListener('keydown', onKey);
|
||||||
|
return () => {
|
||||||
|
window.removeEventListener('keydown', onKey);
|
||||||
|
if (armTimer) clearTimeout(armTimer);
|
||||||
|
};
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Route changes cross-fade via the browser's View Transitions API.
|
||||||
|
// Non-Chromium browsers fall through to plain navigation.
|
||||||
|
onNavigate(enableViewTransitions);
|
||||||
|
|
||||||
|
const tabs = [
|
||||||
|
{ href: '/', label: 'Fleet', match: (p: string) => p === '/' },
|
||||||
|
{ href: '/scripts', label: 'Scripts', match: (p: string) => p.startsWith('/scripts') },
|
||||||
|
{ href: '/configs', label: 'Configs', match: (p: string) => p.startsWith('/configs') },
|
||||||
|
{ href: '/plugins', label: 'Plugins', match: (p: string) => p.startsWith('/plugins') },
|
||||||
|
{ href: '/deployments', label: 'Deployments', match: (p: string) => p.startsWith('/deployments') },
|
||||||
|
{ href: '/betas', label: 'Betas', match: (p: string) => p.startsWith('/betas') }
|
||||||
|
];
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="shell">
|
<div class="shell">
|
||||||
<nav>
|
<nav aria-label="Primary">
|
||||||
<a class="brand-link" href="/" aria-label="Electric Cherry home">
|
<a class="brand-link" href="/" aria-label="Electric Cherry home">
|
||||||
<BrandMark size="md" />
|
<BrandMark size="sm" />
|
||||||
</a>
|
</a>
|
||||||
<div class="tabs">
|
<div class="tabs" role="tablist">
|
||||||
<a href="/" class:on={$page.url.pathname === '/'}>Fleet</a>
|
{#each tabs as t (t.href)}
|
||||||
<a href="/scripts" class:on={$page.url.pathname.startsWith('/scripts')}>Scripts</a>
|
{@const on = t.match($page.url.pathname)}
|
||||||
<a href="/configs" class:on={$page.url.pathname.startsWith('/configs')}>Configs</a>
|
<a
|
||||||
<a href="/plugins" class:on={$page.url.pathname.startsWith('/plugins')}>Plugins</a>
|
href={t.href}
|
||||||
<a href="/deployments" class:on={$page.url.pathname.startsWith('/deployments')}>Deployments</a>
|
class:on
|
||||||
<a href="/betas" class:on={$page.url.pathname.startsWith('/betas')}>Betas</a>
|
role="tab"
|
||||||
|
aria-selected={on}
|
||||||
|
aria-current={on ? 'page' : undefined}
|
||||||
|
>
|
||||||
|
<span class="lbl">{t.label}</span>
|
||||||
|
</a>
|
||||||
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
<div class="strut" aria-hidden="true"></div>
|
<div class="strut" aria-hidden="true"></div>
|
||||||
</nav>
|
</nav>
|
||||||
<main>
|
<main>
|
||||||
{@render children()}
|
{@render children()}
|
||||||
</main>
|
</main>
|
||||||
|
<Toaster />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
@@ -42,76 +101,128 @@
|
|||||||
|
|
||||||
:global(html, body) {
|
:global(html, body) {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
background: var(--bg-page);
|
background: var(--surface-sunken);
|
||||||
color: var(--ink-100);
|
color: var(--text-primary);
|
||||||
font-family: var(--font-body);
|
font-family: var(--font-body);
|
||||||
font-size: var(--text-base);
|
font-size: var(--text-base);
|
||||||
line-height: var(--leading-body);
|
line-height: var(--leading-body);
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
}
|
}
|
||||||
:global(*) { box-sizing: border-box; }
|
:global(*) { box-sizing: border-box; }
|
||||||
:global(a) { color: var(--accent-hi); }
|
:global(a) { color: var(--accent-primary-hover); }
|
||||||
:global(::selection) {
|
:global(::selection) {
|
||||||
background: var(--accent);
|
background: var(--accent-primary);
|
||||||
color: var(--cream);
|
color: var(--text-on-accent);
|
||||||
|
}
|
||||||
|
:global(:focus-visible) {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Ambient background — a faint radial gradient hints at depth without
|
||||||
|
any lines. Fixed to the viewport so scrolling stays quiet. */
|
||||||
|
:global(body::before) {
|
||||||
|
content: '';
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
background:
|
||||||
|
radial-gradient(1200px 700px at 20% -10%, rgba(46, 134, 209, 0.10), transparent 60%),
|
||||||
|
radial-gradient(900px 600px at 90% 100%, rgba(124, 192, 245, 0.05), transparent 60%);
|
||||||
|
z-index: -1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.shell { min-height: 100vh; }
|
.shell { min-height: 100vh; }
|
||||||
|
|
||||||
nav {
|
nav {
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
z-index: 20;
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 24px;
|
|
||||||
padding: var(--pad-nav-y) var(--pad-nav-x);
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
background:
|
gap: var(--space-6);
|
||||||
linear-gradient(180deg, rgba(46, 134, 209, 0.18) 0%, transparent 100%),
|
height: 60px;
|
||||||
var(--bg-nav);
|
padding: 0 var(--space-8);
|
||||||
border-bottom: 1px solid var(--border);
|
background: color-mix(in oklab, var(--surface) 75%, transparent);
|
||||||
box-shadow: 0 1px 0 0 rgba(46, 134, 209, 0.25);
|
border-bottom: 1px solid var(--border-subtle);
|
||||||
}
|
}
|
||||||
|
@supports (backdrop-filter: blur(4px)) {
|
||||||
|
nav {
|
||||||
|
backdrop-filter: blur(20px) saturate(1.4);
|
||||||
|
-webkit-backdrop-filter: blur(20px) saturate(1.4);
|
||||||
|
background: color-mix(in oklab, var(--surface) 62%, transparent);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.brand-link {
|
.brand-link {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
border-radius: var(--radius-md);
|
||||||
}
|
}
|
||||||
|
.brand-link:focus-visible { box-shadow: var(--focus-ring); }
|
||||||
|
|
||||||
.tabs {
|
.tabs {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 6px;
|
align-items: center;
|
||||||
margin-left: 20px;
|
gap: 2px;
|
||||||
|
margin-left: var(--space-4);
|
||||||
}
|
}
|
||||||
.tabs a {
|
.tabs a {
|
||||||
color: var(--ink-300);
|
|
||||||
text-decoration: none;
|
|
||||||
padding: 10px 18px;
|
|
||||||
border-radius: var(--r-sm);
|
|
||||||
font-size: var(--text-sm);
|
|
||||||
font-weight: 500;
|
|
||||||
letter-spacing: var(--tracking-nav);
|
|
||||||
position: relative;
|
position: relative;
|
||||||
transition: color 0.15s;
|
color: var(--text-tertiary);
|
||||||
|
text-decoration: none;
|
||||||
|
padding: 8px 14px;
|
||||||
|
border-radius: var(--radius-pill);
|
||||||
|
font-size: var(--text-sm);
|
||||||
|
font-weight: var(--weight-medium);
|
||||||
|
letter-spacing: var(--tracking-normal);
|
||||||
|
transition:
|
||||||
|
color var(--dur-fast) var(--ease-standard),
|
||||||
|
background-color var(--dur-fast) var(--ease-standard);
|
||||||
}
|
}
|
||||||
.tabs a:hover { color: var(--ink-100); }
|
.tabs a:hover { color: var(--text-primary); }
|
||||||
|
.tabs a:focus-visible { box-shadow: var(--focus-ring); }
|
||||||
.tabs a.on {
|
.tabs a.on {
|
||||||
color: var(--cream);
|
color: var(--text-primary);
|
||||||
}
|
background: var(--surface-raised);
|
||||||
.tabs a.on::after {
|
/* Shared-element transition — pill slides smoothly between tabs
|
||||||
content: '';
|
when navigating. Chromium only; falls back to instant swap. */
|
||||||
position: absolute;
|
view-transition-name: nav-active;
|
||||||
left: 16px;
|
|
||||||
right: 16px;
|
|
||||||
bottom: -2px;
|
|
||||||
height: 2px;
|
|
||||||
background: var(--accent);
|
|
||||||
box-shadow: var(--accent-glow);
|
|
||||||
border-radius: 2px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.strut { margin-left: auto; }
|
.strut { margin-left: auto; }
|
||||||
|
|
||||||
main {
|
main {
|
||||||
padding: 40px 32px 64px;
|
padding: var(--space-10) var(--space-10) var(--space-24);
|
||||||
max-width: 1400px;
|
max-width: 1440px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
|
view-transition-name: main;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Mobile — collapse nav to a bottom-anchored, thumb-reachable bar.
|
||||||
|
(Fully realized in Phase 8; this is the graceful base.) */
|
||||||
|
@media (max-width: 720px) {
|
||||||
|
nav {
|
||||||
|
gap: var(--space-3);
|
||||||
|
padding: 0 var(--space-4);
|
||||||
|
overflow-x: auto;
|
||||||
|
}
|
||||||
|
.tabs { margin-left: var(--space-2); }
|
||||||
|
main { padding: var(--space-6) var(--space-4) var(--space-16); }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* View-transition tuning — cross-fade routes, ease the shared nav pill. */
|
||||||
|
:global(::view-transition-old(root)),
|
||||||
|
:global(::view-transition-new(root)) {
|
||||||
|
animation-duration: var(--dur-base);
|
||||||
|
animation-timing-function: var(--ease-standard);
|
||||||
|
}
|
||||||
|
:global(::view-transition-old(main)),
|
||||||
|
:global(::view-transition-new(main)) {
|
||||||
|
animation-duration: var(--dur-base);
|
||||||
|
animation-timing-function: var(--ease-standard);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
+142
-52
@@ -1,9 +1,17 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { onMount } from 'svelte';
|
import { onMount } from 'svelte';
|
||||||
|
import { fly } from 'svelte/transition';
|
||||||
|
import { cubicOut } from 'svelte/easing';
|
||||||
import ServerCard from '$ui/components/ServerCard.svelte';
|
import ServerCard from '$ui/components/ServerCard.svelte';
|
||||||
import DeployServerDialog from '$ui/components/DeployServerDialog.svelte';
|
import DeployServerDialog from '$ui/components/DeployServerDialog.svelte';
|
||||||
import { statusByServer } from '$ui/stores/servers.js';
|
import { statusByServer } from '$ui/stores/servers.js';
|
||||||
|
import { deployments } from '$ui/stores/pipeline.js';
|
||||||
import type { RosterPlayer, Health } from '$ui/stores/servers.js';
|
import type { RosterPlayer, Health } from '$ui/stores/servers.js';
|
||||||
|
import Button from '$ui/components/primitives/Button.svelte';
|
||||||
|
import Stat from '$ui/components/primitives/Stat.svelte';
|
||||||
|
import SectionHeader from '$ui/components/primitives/SectionHeader.svelte';
|
||||||
|
import EmptyState from '$ui/components/primitives/EmptyState.svelte';
|
||||||
|
import Card from '$ui/components/primitives/Card.svelte';
|
||||||
|
|
||||||
interface HeldRow { target: string; betaId: number; }
|
interface HeldRow { target: string; betaId: number; }
|
||||||
interface ServerRow {
|
interface ServerRow {
|
||||||
@@ -40,7 +48,6 @@
|
|||||||
refresh();
|
refresh();
|
||||||
});
|
});
|
||||||
|
|
||||||
// Live server view — merge SSE data over the initial GET
|
|
||||||
function liveFor(name: string, fallback: ServerRow) {
|
function liveFor(name: string, fallback: ServerRow) {
|
||||||
const live = $statusByServer.get(name);
|
const live = $statusByServer.get(name);
|
||||||
if (!live) {
|
if (!live) {
|
||||||
@@ -72,27 +79,92 @@
|
|||||||
gameEndedAt: live.gameEndedAt
|
gameEndedAt: live.gameEndedAt
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Aggregate fleet metrics — pulled from the same SSE store cards use, so
|
||||||
|
// the hero and grid stay perfectly consistent.
|
||||||
|
let liveViews = $derived(servers.map((s) => liveFor(s.name, s)));
|
||||||
|
let totalPlayers = $derived(
|
||||||
|
liveViews.reduce((sum, v) => sum + (v.players ?? 0), 0)
|
||||||
|
);
|
||||||
|
let activeCount = $derived(
|
||||||
|
liveViews.filter((v) => v.health === 'online').length
|
||||||
|
);
|
||||||
|
let totalCount = $derived(servers.length);
|
||||||
|
let inFlightDeployments = $derived(
|
||||||
|
Array.from($deployments.values()).filter((d) => {
|
||||||
|
for (const s of d.servers.values()) if (s.state === 'pending') return true;
|
||||||
|
return false;
|
||||||
|
}).length
|
||||||
|
);
|
||||||
|
let activeRatio = $derived(totalCount > 0 ? activeCount / totalCount : 0);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<section class="left">
|
<section class="page">
|
||||||
<header class="hdr">
|
<!-- Fleet Overview — the first thing the eye lands on: three big numbers
|
||||||
<div class="title-block">
|
that tell the operator the state of the world in under half a second. -->
|
||||||
<h1>Fleet</h1>
|
<div class="hero">
|
||||||
<span class="count">{servers.length} server{servers.length === 1 ? '' : 's'}</span>
|
<Card padding="lg" elevation="flat">
|
||||||
|
<div class="hero-grid">
|
||||||
|
<div class="hero-cell">
|
||||||
|
<Stat
|
||||||
|
label="Players online"
|
||||||
|
value={totalPlayers}
|
||||||
|
size="xl"
|
||||||
|
tone={totalPlayers > 0 ? 'online' : 'primary'}
|
||||||
|
tween
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="hdr-actions">
|
<div class="hero-cell">
|
||||||
<button class="deploy" onclick={() => (deployOpen = true)}>Deploy new server</button>
|
<Stat
|
||||||
|
label="Active servers"
|
||||||
|
value={`${activeCount}/${totalCount}`}
|
||||||
|
size="xl"
|
||||||
|
tone="primary"
|
||||||
|
tween={false}
|
||||||
|
/>
|
||||||
|
<div class="ratio-bar" aria-hidden="true">
|
||||||
|
<div class="ratio-fill" style="width: {activeRatio * 100}%;"></div>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</div>
|
||||||
|
<div class="hero-cell">
|
||||||
|
<a class="deploy-link" href="/deployments">
|
||||||
|
<Stat
|
||||||
|
label="Deployments in flight"
|
||||||
|
value={inFlightDeployments}
|
||||||
|
size="xl"
|
||||||
|
tone={inFlightDeployments > 0 ? 'accent' : 'primary'}
|
||||||
|
tween
|
||||||
|
/>
|
||||||
|
<span class="link-hint">View →</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<SectionHeader
|
||||||
|
title="Fleet"
|
||||||
|
subtitle={totalCount === 1 ? '1 server' : `${totalCount} servers`}
|
||||||
|
>
|
||||||
|
{#snippet actions()}
|
||||||
|
<Button variant="primary" size="md" onclick={() => (deployOpen = true)}>
|
||||||
|
Deploy new server
|
||||||
|
</Button>
|
||||||
|
{/snippet}
|
||||||
|
</SectionHeader>
|
||||||
|
|
||||||
<DeployServerDialog bind:open={deployOpen} />
|
<DeployServerDialog bind:open={deployOpen} />
|
||||||
|
|
||||||
{#if servers.length === 0}
|
{#if servers.length === 0}
|
||||||
<p class="empty">no servers registered yet — check SERVERS_ROOT</p>
|
<EmptyState
|
||||||
|
title="No servers registered yet"
|
||||||
|
description="Point SERVERS_ROOT at your fleet directory and refresh to hydrate the dashboard."
|
||||||
|
/>
|
||||||
{:else}
|
{:else}
|
||||||
<div class="cards">
|
<div class="cards">
|
||||||
{#each servers as s (s.name)}
|
{#each servers as s, i (s.name)}
|
||||||
{@const live = liveFor(s.name, s)}
|
{@const live = liveFor(s.name, s)}
|
||||||
|
<div in:fly={{ y: 12, duration: 320, delay: Math.min(i * 40, 320), easing: cubicOut }}>
|
||||||
<ServerCard
|
<ServerCard
|
||||||
name={s.name}
|
name={s.name}
|
||||||
players={live.players}
|
players={live.players}
|
||||||
@@ -108,60 +180,78 @@
|
|||||||
gameStartedAt={live.gameStartedAt}
|
gameStartedAt={live.gameStartedAt}
|
||||||
gameEndedAt={live.gameEndedAt}
|
gameEndedAt={live.gameEndedAt}
|
||||||
/>
|
/>
|
||||||
|
</div>
|
||||||
{/each}
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.hdr {
|
.page {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: var(--space-10);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
gap: var(--space-8);
|
||||||
|
}
|
||||||
|
.hero-cell {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: var(--space-3);
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ratio-bar {
|
||||||
|
height: 3px;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 220px;
|
||||||
|
background: var(--surface-overlay);
|
||||||
|
border-radius: var(--radius-pill);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.ratio-fill {
|
||||||
|
height: 100%;
|
||||||
|
background: var(--accent-primary);
|
||||||
|
transition: width var(--dur-slow) var(--ease-standard);
|
||||||
|
}
|
||||||
|
|
||||||
|
.deploy-link {
|
||||||
|
display: flex;
|
||||||
|
align-items: baseline;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: flex-end;
|
gap: var(--space-3);
|
||||||
margin-bottom: 28px;
|
text-decoration: none;
|
||||||
padding-bottom: 18px;
|
color: inherit;
|
||||||
border-bottom: 1px solid var(--border);
|
border-radius: var(--radius-md);
|
||||||
|
transition: opacity var(--dur-fast) var(--ease-standard);
|
||||||
}
|
}
|
||||||
.title-block { display: flex; align-items: baseline; gap: 18px; }
|
.deploy-link:hover { opacity: 0.85; }
|
||||||
h1 {
|
.deploy-link:focus-visible { outline: none; box-shadow: var(--focus-ring); }
|
||||||
margin: 0;
|
.link-hint {
|
||||||
font-family: var(--font-display);
|
font-size: var(--text-xs);
|
||||||
font-size: var(--text-3xl);
|
color: var(--text-tertiary);
|
||||||
color: var(--cream);
|
letter-spacing: var(--tracking-wide);
|
||||||
letter-spacing: var(--tracking-display);
|
|
||||||
line-height: var(--leading-tight);
|
|
||||||
}
|
|
||||||
.count {
|
|
||||||
font-family: var(--font-mono);
|
|
||||||
font-size: var(--text-sm);
|
|
||||||
color: var(--ink-500);
|
|
||||||
letter-spacing: 0.5px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.cards {
|
.cards {
|
||||||
display: grid;
|
display: grid;
|
||||||
gap: var(--gap-cards);
|
gap: var(--space-4);
|
||||||
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
|
||||||
}
|
}
|
||||||
.empty {
|
.cards > div { display: flex; flex-direction: column; }
|
||||||
color: var(--ink-500);
|
.cards > div > :global(*) { flex: 1; }
|
||||||
font-family: var(--font-mono);
|
|
||||||
font-size: var(--text-base);
|
@media (max-width: 900px) {
|
||||||
padding: 48px;
|
.hero-grid {
|
||||||
text-align: center;
|
grid-template-columns: 1fr;
|
||||||
border: 1px dashed var(--border);
|
gap: var(--space-5);
|
||||||
border-radius: var(--r-md);
|
|
||||||
}
|
}
|
||||||
.hdr-actions { display: flex; gap: 10px; }
|
|
||||||
.deploy {
|
|
||||||
background: linear-gradient(180deg, var(--blue-500), var(--blue-600));
|
|
||||||
border: 1px solid var(--blue-400);
|
|
||||||
color: var(--cream);
|
|
||||||
border-radius: var(--r-sm);
|
|
||||||
padding: 10px 18px;
|
|
||||||
font-family: var(--font-body);
|
|
||||||
font-weight: 600;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: box-shadow 0.15s;
|
|
||||||
}
|
}
|
||||||
.deploy:hover { box-shadow: var(--accent-glow); }
|
@media (max-width: 640px) {
|
||||||
|
.cards { grid-template-columns: 1fr; }
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
+217
-190
@@ -1,6 +1,12 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { onMount, onDestroy } from 'svelte';
|
import { onMount, onDestroy } from 'svelte';
|
||||||
import { goto } from '$app/navigation';
|
import { goto } from '$app/navigation';
|
||||||
|
import Card from '$ui/components/primitives/Card.svelte';
|
||||||
|
import Badge from '$ui/components/primitives/Badge.svelte';
|
||||||
|
import Button from '$ui/components/primitives/Button.svelte';
|
||||||
|
import SectionHeader from '$ui/components/primitives/SectionHeader.svelte';
|
||||||
|
import EmptyState from '$ui/components/primitives/EmptyState.svelte';
|
||||||
|
import Field from '$ui/components/primitives/Field.svelte';
|
||||||
|
|
||||||
type ArtifactKind = 'script' | 'config' | 'plugin' | 'baseline';
|
type ArtifactKind = 'script' | 'config' | 'plugin' | 'baseline';
|
||||||
interface BetaListRow {
|
interface BetaListRow {
|
||||||
@@ -11,62 +17,31 @@
|
|||||||
opened_at: string;
|
opened_at: string;
|
||||||
closed_at: string | null;
|
closed_at: string | null;
|
||||||
scripts: Array<{
|
scripts: Array<{
|
||||||
id: number;
|
id: number; name: string; target_rel_path: string; kind: ArtifactKind;
|
||||||
name: string;
|
|
||||||
target_rel_path: string;
|
|
||||||
kind: ArtifactKind;
|
|
||||||
version: { id: number; version: number; sha256: string } | null;
|
version: { id: number; version: number; sha256: string } | null;
|
||||||
}>;
|
}>;
|
||||||
servers: Array<{ server: string; stage: string; error: string | null }>;
|
servers: Array<{ server: string; stage: string; error: string | null }>;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface ScriptListRow {
|
interface ScriptListRow {
|
||||||
id: number;
|
id: number; name: string; target_rel_path: string;
|
||||||
name: string;
|
scope_type: 'game' | 'map' | null; scope_value: string | null;
|
||||||
target_rel_path: string;
|
current_version_id: number | null; kind: ArtifactKind;
|
||||||
scope_type: 'game' | 'map' | null;
|
|
||||||
scope_value: string | null;
|
|
||||||
current_version_id: number | null;
|
|
||||||
kind: ArtifactKind;
|
|
||||||
latestVersion: {
|
latestVersion: {
|
||||||
id: number;
|
id: number; version: number; sha256: string;
|
||||||
version: number;
|
|
||||||
sha256: string;
|
|
||||||
state: 'untested' | 'tested' | 'test-failed';
|
state: 'untested' | 'tested' | 'test-failed';
|
||||||
} | null;
|
} | null;
|
||||||
runningBetaId: number | null;
|
runningBetaId: number | null;
|
||||||
}
|
}
|
||||||
interface Version {
|
interface Version { id: number; version: number; sha256: string; size: number; state: 'untested' | 'tested' | 'test-failed'; }
|
||||||
id: number;
|
interface ServerRow { name: string; game: string | null; map: string | null; }
|
||||||
version: number;
|
interface ScriptDetail { script: ScriptListRow; versions: Version[]; matchedServers: string[]; }
|
||||||
sha256: string;
|
interface Pick { key: number; scriptId: number | null; versionId: number | null; }
|
||||||
size: number;
|
|
||||||
state: 'untested' | 'tested' | 'test-failed';
|
|
||||||
}
|
|
||||||
interface ServerRow { name: string; game: string | null; map: string | null }
|
|
||||||
|
|
||||||
interface ScriptDetail {
|
|
||||||
script: ScriptListRow;
|
|
||||||
versions: Version[];
|
|
||||||
matchedServers: string[];
|
|
||||||
}
|
|
||||||
|
|
||||||
// One row in the multi-script picker.
|
|
||||||
interface Pick {
|
|
||||||
key: number; // stable key for keyed each block
|
|
||||||
scriptId: number | null;
|
|
||||||
versionId: number | null;
|
|
||||||
}
|
|
||||||
|
|
||||||
let betas = $state<BetaListRow[]>([]);
|
let betas = $state<BetaListRow[]>([]);
|
||||||
let loading = $state(true);
|
let loading = $state(true);
|
||||||
|
|
||||||
let scripts = $state<ScriptListRow[]>([]);
|
let scripts = $state<ScriptListRow[]>([]);
|
||||||
let fleetServers = $state<ServerRow[]>([]);
|
let fleetServers = $state<ServerRow[]>([]);
|
||||||
// Cache script detail (versions + matched servers) per picked scriptId so
|
|
||||||
// switching versions doesn't refetch.
|
|
||||||
let detailById = $state<Record<number, ScriptDetail>>({});
|
let detailById = $state<Record<number, ScriptDetail>>({});
|
||||||
|
|
||||||
let nextKey = 0;
|
let nextKey = 0;
|
||||||
let picks = $state<Pick[]>([{ key: nextKey++, scriptId: null, versionId: null }]);
|
let picks = $state<Pick[]>([{ key: nextKey++, scriptId: null, versionId: null }]);
|
||||||
let pickedServers = $state<Set<string>>(new Set());
|
let pickedServers = $state<Set<string>>(new Set());
|
||||||
@@ -109,25 +84,15 @@
|
|||||||
if (poll) clearInterval(poll);
|
if (poll) clearInterval(poll);
|
||||||
});
|
});
|
||||||
|
|
||||||
// Scripts eligible for a new beta: has an unpromoted version and isn't in
|
|
||||||
// a running beta already.
|
|
||||||
const eligibleScripts = $derived(
|
const eligibleScripts = $derived(
|
||||||
scripts.filter(
|
scripts.filter(
|
||||||
(s) =>
|
(s) => s.runningBetaId === null && s.latestVersion !== null && s.latestVersion.id !== s.current_version_id
|
||||||
s.runningBetaId === null &&
|
|
||||||
s.latestVersion !== null &&
|
|
||||||
s.latestVersion.id !== s.current_version_id
|
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
|
|
||||||
// Scripts eligible for a specific picker row: eligible AND not already
|
|
||||||
// chosen in a different row. Keeps the dropdown from letting you double-
|
|
||||||
// add the same script.
|
|
||||||
function eligibleForRow(rowIdx: number): ScriptListRow[] {
|
function eligibleForRow(rowIdx: number): ScriptListRow[] {
|
||||||
const takenIds = new Set(
|
const takenIds = new Set(
|
||||||
picks
|
picks.map((p, i) => (i === rowIdx ? null : p.scriptId)).filter((id): id is number => id !== null)
|
||||||
.map((p, i) => (i === rowIdx ? null : p.scriptId))
|
|
||||||
.filter((id): id is number => id !== null)
|
|
||||||
);
|
);
|
||||||
return eligibleScripts.filter((s) => !takenIds.has(s.id));
|
return eligibleScripts.filter((s) => !takenIds.has(s.id));
|
||||||
}
|
}
|
||||||
@@ -140,16 +105,14 @@
|
|||||||
if (pick.scriptId === null) return;
|
if (pick.scriptId === null) return;
|
||||||
if (!detailById[pick.scriptId]) {
|
if (!detailById[pick.scriptId]) {
|
||||||
const res = await fetch(`/api/scripts/${pick.scriptId}`);
|
const res = await fetch(`/api/scripts/${pick.scriptId}`);
|
||||||
if (!res.ok) { flash = 'failed to load script detail'; return; }
|
if (!res.ok) { flash = 'Failed to load script detail'; return; }
|
||||||
const body = (await res.json()) as ScriptDetail;
|
const body = (await res.json()) as ScriptDetail;
|
||||||
detailById = { ...detailById, [pick.scriptId]: body };
|
detailById = { ...detailById, [pick.scriptId]: body };
|
||||||
}
|
}
|
||||||
// Default: latest non-current version.
|
|
||||||
const detail = detailById[pick.scriptId];
|
const detail = detailById[pick.scriptId];
|
||||||
const eligibleVersions = detail.versions.filter((v) => v.id !== detail.script.current_version_id);
|
const eligibleVersions = detail.versions.filter((v) => v.id !== detail.script.current_version_id);
|
||||||
pick.versionId = eligibleVersions[0]?.id ?? null;
|
pick.versionId = eligibleVersions[0]?.id ?? null;
|
||||||
picks = [...picks];
|
picks = [...picks];
|
||||||
// Reset server selection to the recomputed candidate set.
|
|
||||||
pickedServers = new Set(candidateServers);
|
pickedServers = new Set(candidateServers);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -166,32 +129,23 @@
|
|||||||
else next.add(name);
|
else next.add(name);
|
||||||
pickedServers = next;
|
pickedServers = next;
|
||||||
}
|
}
|
||||||
|
|
||||||
function versionsForRow(row: Pick): Version[] {
|
function versionsForRow(row: Pick): Version[] {
|
||||||
if (row.scriptId === null) return [];
|
if (row.scriptId === null) return [];
|
||||||
const detail = detailById[row.scriptId];
|
const detail = detailById[row.scriptId];
|
||||||
if (!detail) return [];
|
if (!detail) return [];
|
||||||
return detail.versions.filter((v) => v.id !== detail.script.current_version_id);
|
return detail.versions.filter((v) => v.id !== detail.script.current_version_id);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Servers each pick would land on if promoted alone. Scoped scripts →
|
|
||||||
// matched servers; unscoped scripts → whole fleet.
|
|
||||||
function candidatesFor(row: Pick): string[] | null {
|
function candidatesFor(row: Pick): string[] | null {
|
||||||
if (row.scriptId === null) return null;
|
if (row.scriptId === null) return null;
|
||||||
const detail = detailById[row.scriptId];
|
const detail = detailById[row.scriptId];
|
||||||
if (!detail) return null;
|
if (!detail) return null;
|
||||||
return detail.script.scope_type
|
return detail.script.scope_type ? detail.matchedServers : fleetServers.map((s) => s.name);
|
||||||
? detail.matchedServers
|
|
||||||
: fleetServers.map((s) => s.name);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Intersection of every picked script's candidate set. A beta with two
|
|
||||||
// scripts must run on servers that are in-scope for BOTH.
|
|
||||||
const candidateServers = $derived.by(() => {
|
const candidateServers = $derived.by(() => {
|
||||||
const perPick: string[][] = [];
|
const perPick: string[][] = [];
|
||||||
for (const p of picks) {
|
for (const p of picks) {
|
||||||
const c = candidatesFor(p);
|
const c = candidatesFor(p);
|
||||||
if (c === null) continue; // row not yet picked — don't constrain
|
if (c === null) continue;
|
||||||
perPick.push(c);
|
perPick.push(c);
|
||||||
}
|
}
|
||||||
if (perPick.length === 0) return [] as string[];
|
if (perPick.length === 0) return [] as string[];
|
||||||
@@ -199,8 +153,6 @@
|
|||||||
return first.filter((name) => rest.every((set) => set.includes(name)));
|
return first.filter((name) => rest.every((set) => set.includes(name)));
|
||||||
});
|
});
|
||||||
|
|
||||||
// Ready to submit when every row has a script + version and at least one
|
|
||||||
// server is picked from the intersection.
|
|
||||||
const canSubmit = $derived(
|
const canSubmit = $derived(
|
||||||
!openingBeta &&
|
!openingBeta &&
|
||||||
picks.length > 0 &&
|
picks.length > 0 &&
|
||||||
@@ -225,11 +177,7 @@
|
|||||||
waitForMatch
|
waitForMatch
|
||||||
})
|
})
|
||||||
});
|
});
|
||||||
const body = (await res.json()) as {
|
const body = (await res.json()) as { ok: boolean; error?: string; result?: { betaId: number } };
|
||||||
ok: boolean;
|
|
||||||
error?: string;
|
|
||||||
result?: { betaId: number };
|
|
||||||
};
|
|
||||||
if (!res.ok || !body.ok) {
|
if (!res.ok || !body.ok) {
|
||||||
flash = body.error ?? `HTTP ${res.status}`;
|
flash = body.error ?? `HTTP ${res.status}`;
|
||||||
return;
|
return;
|
||||||
@@ -255,32 +203,56 @@
|
|||||||
for (const s of b.scripts) byKind[s.kind] = (byKind[s.kind] ?? 0) + 1;
|
for (const s of b.scripts) byKind[s.kind] = (byKind[s.kind] ?? 0) + 1;
|
||||||
return Object.entries(byKind).map(([k, n]) => `${n} ${k}${n === 1 ? '' : 's'}`).join(', ');
|
return Object.entries(byKind).map(([k, n]) => `${n} ${k}${n === 1 ? '' : 's'}`).join(', ');
|
||||||
}
|
}
|
||||||
|
function betaStateVariant(s: string): 'online' | 'warning' | 'info' | 'neutral' {
|
||||||
|
return s === 'ready-promote' ? 'online' :
|
||||||
|
s === 'running' ? 'warning' :
|
||||||
|
s === 'promoted' ? 'info' :
|
||||||
|
'neutral';
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<h1>Betas</h1>
|
<div class="page">
|
||||||
|
<SectionHeader
|
||||||
|
title="Betas"
|
||||||
|
subtitle="Test unpromoted versions on selected servers before rolling them out."
|
||||||
|
/>
|
||||||
|
|
||||||
{#if loading}
|
{#if loading}
|
||||||
<p class="empty">loading…</p>
|
<div class="loading">Loading…</div>
|
||||||
{:else}
|
|
||||||
<section class="panel">
|
|
||||||
<h2>Open a beta</h2>
|
|
||||||
{#if eligibleScripts.length === 0}
|
|
||||||
<p class="empty">no artifacts with untested versions — upload a new version from a scripts / configs / plugins page</p>
|
|
||||||
{:else}
|
{:else}
|
||||||
<form onsubmit={openNewBeta} class="new-beta-form">
|
<Card padding="lg">
|
||||||
|
<h2 class="panel-title">Open a beta</h2>
|
||||||
|
|
||||||
|
{#if eligibleScripts.length === 0}
|
||||||
|
<EmptyState
|
||||||
|
title="No artifacts with untested versions"
|
||||||
|
description="Upload a new version from scripts / configs / plugins to open a beta."
|
||||||
|
/>
|
||||||
|
{:else}
|
||||||
|
<form onsubmit={openNewBeta} class="beta-form">
|
||||||
|
<Field label="Artifacts">
|
||||||
<div class="picks">
|
<div class="picks">
|
||||||
{#each picks as row, idx (row.key)}
|
{#each picks as row, idx (row.key)}
|
||||||
<div class="pick-row">
|
<div class="pick-row">
|
||||||
|
<div class="pick-select">
|
||||||
<select
|
<select
|
||||||
|
class="native-select"
|
||||||
bind:value={row.scriptId}
|
bind:value={row.scriptId}
|
||||||
onchange={() => onPickScript(idx)}
|
onchange={() => onPickScript(idx)}
|
||||||
>
|
>
|
||||||
<option value={null}>— pick an artifact —</option>
|
<option value={null}>— Pick an artifact —</option>
|
||||||
{#each eligibleForRow(idx) as s (s.id)}
|
{#each eligibleForRow(idx) as s (s.id)}
|
||||||
<option value={s.id}>[{s.kind}] {s.name}</option>
|
<option value={s.id}>[{s.kind}] {s.name}</option>
|
||||||
{/each}
|
{/each}
|
||||||
</select>
|
</select>
|
||||||
<select bind:value={row.versionId} disabled={row.scriptId === null}>
|
<span class="chev">▾</span>
|
||||||
|
</div>
|
||||||
|
<div class="pick-select">
|
||||||
|
<select
|
||||||
|
class="native-select"
|
||||||
|
bind:value={row.versionId}
|
||||||
|
disabled={row.scriptId === null}
|
||||||
|
>
|
||||||
{#if row.scriptId === null}
|
{#if row.scriptId === null}
|
||||||
<option value={null}>—</option>
|
<option value={null}>—</option>
|
||||||
{:else}
|
{:else}
|
||||||
@@ -289,23 +261,26 @@
|
|||||||
{/each}
|
{/each}
|
||||||
{/if}
|
{/if}
|
||||||
</select>
|
</select>
|
||||||
|
<span class="chev">▾</span>
|
||||||
|
</div>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
class="row-x"
|
class="row-x"
|
||||||
onclick={() => removeRow(idx)}
|
onclick={() => removeRow(idx)}
|
||||||
disabled={picks.length === 1}
|
disabled={picks.length === 1}
|
||||||
title={picks.length === 1 ? 'need at least one script' : 'remove this script'}
|
title={picks.length === 1 ? 'Need at least one script' : 'Remove this script'}
|
||||||
|
aria-label="Remove artifact"
|
||||||
>×</button>
|
>×</button>
|
||||||
</div>
|
</div>
|
||||||
{/each}
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
<button type="button" class="add-row" onclick={addRow}>+ add artifact</button>
|
<button type="button" class="add-row" onclick={addRow}>+ Add artifact</button>
|
||||||
|
</Field>
|
||||||
|
|
||||||
<label>
|
<Field label="Test servers" hint="Intersection of scopes across all picked artifacts.">
|
||||||
<span class="k">test servers</span>
|
|
||||||
<div class="server-picker">
|
<div class="server-picker">
|
||||||
{#if candidateServers.length === 0}
|
{#if candidateServers.length === 0}
|
||||||
<span class="empty">no server satisfies all selected scopes — pick different scripts</span>
|
<span class="picker-empty">No server satisfies all selected scopes — pick different scripts.</span>
|
||||||
{:else}
|
{:else}
|
||||||
{#each candidateServers as name (name)}
|
{#each candidateServers as name (name)}
|
||||||
<label class="chk">
|
<label class="chk">
|
||||||
@@ -314,46 +289,58 @@
|
|||||||
checked={pickedServers.has(name)}
|
checked={pickedServers.has(name)}
|
||||||
onchange={() => toggleServer(name)}
|
onchange={() => toggleServer(name)}
|
||||||
/>
|
/>
|
||||||
{name}
|
<span>{name}</span>
|
||||||
</label>
|
</label>
|
||||||
{/each}
|
{/each}
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
</label>
|
</Field>
|
||||||
|
|
||||||
|
<Field label="Options">
|
||||||
<div class="opts">
|
<div class="opts">
|
||||||
<label class="chk">
|
<label class="chk">
|
||||||
<input type="checkbox" bind:checked={waitForHealth} />
|
<input type="checkbox" bind:checked={waitForHealth} />
|
||||||
wait for server start healthy
|
<span>Wait for server start healthy</span>
|
||||||
</label>
|
</label>
|
||||||
<label class="chk">
|
<label class="chk">
|
||||||
<input type="checkbox" bind:checked={waitForMatch} />
|
<input type="checkbox" bind:checked={waitForMatch} />
|
||||||
wait for server match
|
<span>Wait for server match</span>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
|
</Field>
|
||||||
|
|
||||||
<button type="submit" class="primary" disabled={!canSubmit}>
|
<div class="form-actions">
|
||||||
{openingBeta ? 'opening…' : 'open beta'}
|
<Button
|
||||||
</button>
|
type="submit"
|
||||||
|
variant="primary"
|
||||||
|
disabled={!canSubmit}
|
||||||
|
loading={openingBeta}
|
||||||
|
>
|
||||||
|
Open beta
|
||||||
|
</Button>
|
||||||
|
{#if flash}<span class="flash">{flash}</span>{/if}
|
||||||
|
</div>
|
||||||
</form>
|
</form>
|
||||||
{#if flash}<p class="flash">{flash}</p>{/if}
|
|
||||||
{/if}
|
{/if}
|
||||||
</section>
|
</Card>
|
||||||
|
|
||||||
{#if betas.length === 0}
|
{#if betas.length === 0}
|
||||||
<p class="empty">no betas yet — open one above</p>
|
<EmptyState title="No betas yet" description="Open one above once you have unpromoted versions." />
|
||||||
{:else}
|
{:else}
|
||||||
{#each grouped as g (g.state)}
|
{#each grouped as g (g.state)}
|
||||||
{#if g.rows.length > 0}
|
{#if g.rows.length > 0}
|
||||||
<section class="panel">
|
<section class="section">
|
||||||
<h2>{g.state.replace('-', ' ')} · {g.rows.length}</h2>
|
<div class="section-head">
|
||||||
<div class="rows">
|
<h2 class="capitalize">{g.state.replace('-', ' ')}</h2>
|
||||||
|
<Badge variant="neutral" size="sm">{g.rows.length}</Badge>
|
||||||
|
</div>
|
||||||
|
<div class="beta-rows">
|
||||||
{#each g.rows as b (b.id)}
|
{#each g.rows as b (b.id)}
|
||||||
<a class="row" href="/betas/{b.id}">
|
<a class="beta-row" href="/betas/{b.id}">
|
||||||
<span class="id">#{b.id}</span>
|
<span class="beta-id">#{b.id}</span>
|
||||||
<span class="script">{summarizeScripts(b)}</span>
|
<span class="beta-script">{summarizeScripts(b)}</span>
|
||||||
<span class="tag state-{b.state}">{b.state}</span>
|
<Badge variant={betaStateVariant(b.state)} size="sm" uppercase>{b.state}</Badge>
|
||||||
<span class="servers mono">{b.servers.length} server{b.servers.length === 1 ? '' : 's'}</span>
|
<span class="beta-servers">{b.servers.length} server{b.servers.length === 1 ? '' : 's'}</span>
|
||||||
</a>
|
</a>
|
||||||
{/each}
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
@@ -361,108 +348,148 @@
|
|||||||
{/if}
|
{/if}
|
||||||
{/each}
|
{/each}
|
||||||
{/if}
|
{/if}
|
||||||
{/if}
|
{/if}
|
||||||
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
h1 { color: var(--cream); font-family: var(--font-display); font-size: var(--text-3xl); letter-spacing: var(--tracking-display); margin: 0 0 28px; }
|
.page { display: flex; flex-direction: column; gap: var(--space-6); }
|
||||||
.empty { color: var(--ink-500); font-family: var(--font-mono); font-size: var(--text-base); margin: 0; }
|
.loading { text-align: center; padding: var(--space-12); color: var(--text-tertiary); }
|
||||||
.panel { background: var(--bg-nav); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--pad-panel); margin-bottom: 20px; }
|
|
||||||
h2 { margin: 0 0 14px; font-family: var(--font-body); font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--ink-300); }
|
|
||||||
|
|
||||||
.new-beta-form { display: flex; flex-direction: column; gap: 14px; }
|
.panel-title {
|
||||||
.new-beta-form label { display: flex; flex-direction: column; gap: 6px; font-size: var(--text-xs); }
|
margin: 0 0 var(--space-4);
|
||||||
.new-beta-form .k { color: var(--ink-500); text-transform: uppercase; letter-spacing: 1px; }
|
font-family: var(--font-body);
|
||||||
|
|
||||||
.picks { display: flex; flex-direction: column; gap: 8px; }
|
|
||||||
.pick-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; }
|
|
||||||
.pick-row select {
|
|
||||||
background: var(--bg-page);
|
|
||||||
color: var(--ink-100);
|
|
||||||
border: 1px solid var(--border);
|
|
||||||
border-radius: var(--r-sm);
|
|
||||||
padding: 10px 12px;
|
|
||||||
font-family: var(--font-mono);
|
|
||||||
font-size: var(--text-mono);
|
|
||||||
}
|
|
||||||
.row-x {
|
|
||||||
background: var(--bg-card);
|
|
||||||
color: var(--ink-500);
|
|
||||||
border: 1px solid var(--border);
|
|
||||||
border-radius: var(--r-sm);
|
|
||||||
padding: 0 14px;
|
|
||||||
font-size: var(--text-md);
|
font-size: var(--text-md);
|
||||||
cursor: pointer;
|
font-weight: var(--weight-semibold);
|
||||||
|
color: var(--text-primary);
|
||||||
}
|
}
|
||||||
.row-x:hover:not(:disabled) { color: var(--danger-500); border-color: rgba(255, 48, 80, 0.4); }
|
|
||||||
.row-x:disabled { opacity: 0.4; cursor: default; }
|
.beta-form { display: flex; flex-direction: column; gap: var(--space-5); }
|
||||||
.add-row {
|
|
||||||
align-self: flex-start;
|
.picks { display: flex; flex-direction: column; gap: var(--space-2); }
|
||||||
background: transparent;
|
.pick-row {
|
||||||
color: var(--ink-300);
|
display: grid;
|
||||||
border: 1px dashed var(--border);
|
grid-template-columns: 1fr 1fr auto;
|
||||||
border-radius: var(--r-sm);
|
gap: var(--space-2);
|
||||||
padding: 8px 14px;
|
align-items: center;
|
||||||
|
}
|
||||||
|
.pick-select { position: relative; }
|
||||||
|
.native-select {
|
||||||
|
appearance: none;
|
||||||
|
width: 100%;
|
||||||
|
padding: 9px 32px 9px 12px;
|
||||||
|
background: var(--surface-sunken);
|
||||||
|
border: 1px solid var(--border-subtle);
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
color: var(--text-primary);
|
||||||
font-family: var(--font-body);
|
font-family: var(--font-body);
|
||||||
font-size: var(--text-sm);
|
font-size: var(--text-sm);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
transition: border-color var(--dur-fast) var(--ease-standard);
|
||||||
}
|
}
|
||||||
.add-row:hover { color: var(--cream); border-color: var(--accent); }
|
.native-select:hover { border-color: var(--border-strong); }
|
||||||
|
.native-select:focus { outline: none; border-color: var(--accent-primary); box-shadow: 0 0 0 3px rgba(46, 134, 209, 0.15); }
|
||||||
|
.native-select:disabled { opacity: 0.5; cursor: not-allowed; }
|
||||||
|
.chev {
|
||||||
|
position: absolute;
|
||||||
|
right: var(--space-3);
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
color: var(--text-tertiary);
|
||||||
|
pointer-events: none;
|
||||||
|
font-size: var(--text-xs);
|
||||||
|
}
|
||||||
|
.row-x {
|
||||||
|
background: transparent;
|
||||||
|
color: var(--text-tertiary);
|
||||||
|
border: 1px solid var(--border-subtle);
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
padding: 0 14px;
|
||||||
|
height: 38px;
|
||||||
|
font-size: var(--text-lg);
|
||||||
|
cursor: pointer;
|
||||||
|
transition: color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
|
||||||
|
}
|
||||||
|
.row-x:hover:not(:disabled) { color: var(--state-danger); border-color: rgba(255, 86, 112, 0.4); }
|
||||||
|
.row-x:disabled { opacity: 0.3; cursor: default; }
|
||||||
|
|
||||||
|
.add-row {
|
||||||
|
align-self: flex-start;
|
||||||
|
background: transparent;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
border: 1px dashed var(--border-strong);
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
padding: 8px 14px;
|
||||||
|
margin-top: var(--space-2);
|
||||||
|
font-family: var(--font-body);
|
||||||
|
font-size: var(--text-sm);
|
||||||
|
cursor: pointer;
|
||||||
|
transition: color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
|
||||||
|
}
|
||||||
|
.add-row:hover { color: var(--text-primary); border-color: var(--accent-primary); }
|
||||||
|
|
||||||
.server-picker {
|
.server-picker {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
gap: 10px;
|
gap: var(--space-3);
|
||||||
padding: 12px;
|
padding: var(--space-3);
|
||||||
background: var(--bg-page);
|
background: var(--surface-sunken);
|
||||||
border: 1px solid var(--border);
|
border: 1px solid var(--border-subtle);
|
||||||
border-radius: var(--r-sm);
|
border-radius: var(--radius-md);
|
||||||
|
}
|
||||||
|
.picker-empty {
|
||||||
|
color: var(--text-tertiary);
|
||||||
|
font-family: var(--font-mono);
|
||||||
|
font-size: var(--text-xs);
|
||||||
}
|
}
|
||||||
.chk {
|
.chk {
|
||||||
color: var(--ink-100);
|
display: inline-flex;
|
||||||
font-family: var(--font-mono);
|
|
||||||
font-size: var(--text-mono);
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 6px;
|
gap: var(--space-2);
|
||||||
cursor: pointer;
|
color: var(--text-primary);
|
||||||
}
|
|
||||||
.opts { display: flex; gap: 24px; }
|
|
||||||
.primary {
|
|
||||||
background: linear-gradient(180deg, var(--blue-500), var(--blue-600));
|
|
||||||
border: 1px solid var(--blue-400);
|
|
||||||
color: var(--cream);
|
|
||||||
border-radius: var(--r-sm);
|
|
||||||
padding: 12px 20px;
|
|
||||||
font-family: var(--font-body);
|
font-family: var(--font-body);
|
||||||
font-weight: 600;
|
font-size: var(--text-sm);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
align-self: flex-start;
|
user-select: none;
|
||||||
}
|
}
|
||||||
.primary:disabled { opacity: 0.4; cursor: default; }
|
.chk input { accent-color: var(--accent-primary); cursor: pointer; }
|
||||||
.flash { color: var(--danger-500); font-family: var(--font-mono); font-size: var(--text-mono); margin: 12px 0 0; }
|
|
||||||
|
|
||||||
.rows { display: flex; flex-direction: column; gap: 6px; }
|
.opts { display: flex; flex-wrap: wrap; gap: var(--space-6); }
|
||||||
.row {
|
|
||||||
display: grid;
|
.form-actions { display: flex; align-items: center; gap: var(--space-4); }
|
||||||
grid-template-columns: 60px 1fr 130px 120px;
|
.flash { color: var(--state-danger); font-family: var(--font-mono); font-size: var(--text-xs); }
|
||||||
gap: 14px;
|
|
||||||
padding: 12px 16px;
|
.section { display: flex; flex-direction: column; gap: var(--space-3); }
|
||||||
background: var(--bg-card);
|
.section-head { display: flex; align-items: center; gap: var(--space-3); }
|
||||||
border: 1px solid var(--border);
|
.section-head h2 {
|
||||||
border-radius: var(--r-sm);
|
margin: 0;
|
||||||
color: var(--ink-100);
|
font-family: var(--font-body);
|
||||||
text-decoration: none;
|
font-size: var(--text-md);
|
||||||
font-size: var(--text-mono);
|
font-weight: var(--weight-semibold);
|
||||||
align-items: center;
|
color: var(--text-primary);
|
||||||
|
}
|
||||||
|
.capitalize { text-transform: capitalize; }
|
||||||
|
|
||||||
|
.beta-rows { display: flex; flex-direction: column; gap: var(--space-2); }
|
||||||
|
.beta-row {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 56px 1fr auto auto;
|
||||||
|
gap: var(--space-4);
|
||||||
|
align-items: center;
|
||||||
|
padding: var(--space-3) var(--space-4);
|
||||||
|
background: color-mix(in oklab, var(--surface) 88%, transparent);
|
||||||
|
border: 1px solid var(--border-subtle);
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
text-decoration: none;
|
||||||
|
color: var(--text-primary);
|
||||||
|
transition: background-color var(--dur-fast) var(--ease-standard);
|
||||||
|
}
|
||||||
|
.beta-row:hover { background: var(--surface-raised); }
|
||||||
|
.beta-row:focus-visible { outline: none; box-shadow: var(--focus-ring); }
|
||||||
|
.beta-id { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-tertiary); }
|
||||||
|
.beta-script { font-size: var(--text-sm); color: var(--text-primary); font-weight: var(--weight-medium); }
|
||||||
|
.beta-servers { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-tertiary); }
|
||||||
|
|
||||||
|
@media (max-width: 720px) {
|
||||||
|
.beta-row { grid-template-columns: 1fr; gap: var(--space-2); }
|
||||||
}
|
}
|
||||||
.row:hover { border-color: var(--accent); box-shadow: var(--accent-glow); }
|
|
||||||
.id { color: var(--ink-500); font-family: var(--font-mono); }
|
|
||||||
.script { color: var(--cream); font-weight: 600; font-family: var(--font-body); }
|
|
||||||
.servers { color: var(--ink-500); }
|
|
||||||
.tag { padding: 3px 10px; border-radius: var(--r-sm); font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 1px; border: 1px solid transparent; text-align: center; }
|
|
||||||
.state-running { background: rgba(255, 176, 32, 0.15); border-color: rgba(255, 176, 32, 0.4); color: var(--amber-500); }
|
|
||||||
.state-ready-promote { background: rgba(124, 212, 255, 0.15); border-color: rgba(124, 212, 255, 0.4); color: var(--spark-500); }
|
|
||||||
.state-promoted { background: rgba(124, 212, 255, 0.10); border-color: rgba(124, 212, 255, 0.28); color: var(--cream); }
|
|
||||||
.state-rolled-back { background: var(--bg-nav); border-color: var(--border); color: var(--ink-500); }
|
|
||||||
.mono { font-family: var(--font-mono); }
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
+235
-147
@@ -1,37 +1,29 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { onMount, onDestroy } from 'svelte';
|
import { onMount, onDestroy } from 'svelte';
|
||||||
import { page } from '$app/stores';
|
import { page } from '$app/stores';
|
||||||
import { goto } from '$app/navigation';
|
import Card from '$ui/components/primitives/Card.svelte';
|
||||||
|
import Badge from '$ui/components/primitives/Badge.svelte';
|
||||||
|
import Button from '$ui/components/primitives/Button.svelte';
|
||||||
|
import SectionHeader from '$ui/components/primitives/SectionHeader.svelte';
|
||||||
|
import Breadcrumbs from '$ui/components/primitives/Breadcrumbs.svelte';
|
||||||
|
import EmptyState from '$ui/components/primitives/EmptyState.svelte';
|
||||||
|
|
||||||
interface BetaRow {
|
interface BetaRow {
|
||||||
id: number;
|
id: number; script_id: number; script_version_id: number;
|
||||||
script_id: number;
|
trigger_kind: string; wait_for_health: number; wait_for_match: number;
|
||||||
script_version_id: number;
|
|
||||||
trigger_kind: string;
|
|
||||||
wait_for_health: number;
|
|
||||||
wait_for_match: number;
|
|
||||||
state: 'running' | 'ready-promote' | 'promoted' | 'rolled-back';
|
state: 'running' | 'ready-promote' | 'promoted' | 'rolled-back';
|
||||||
opened_at: string;
|
opened_at: string; closed_at: string | null; notes: string | null;
|
||||||
closed_at: string | null;
|
|
||||||
notes: string | null;
|
|
||||||
}
|
}
|
||||||
interface BetaServerRow {
|
interface BetaServerRow {
|
||||||
beta_id: number;
|
beta_id: number; server: string;
|
||||||
server: string;
|
had_original: number; prior_version_id: number | null;
|
||||||
had_original: number;
|
stage: string; error: string | null;
|
||||||
prior_version_id: number | null;
|
deployed_at: string | null; restarted_at: string | null;
|
||||||
stage: string;
|
healthy_at: string | null; match_seen_at: string | null;
|
||||||
error: string | null;
|
|
||||||
deployed_at: string | null;
|
|
||||||
restarted_at: string | null;
|
|
||||||
healthy_at: string | null;
|
|
||||||
match_seen_at: string | null;
|
|
||||||
updated_at: string;
|
updated_at: string;
|
||||||
}
|
}
|
||||||
interface BetaScript {
|
interface BetaScript {
|
||||||
id: number;
|
id: number; name: string; target_rel_path: string;
|
||||||
name: string;
|
|
||||||
target_rel_path: string;
|
|
||||||
kind: 'script' | 'config' | 'plugin' | 'baseline';
|
kind: 'script' | 'config' | 'plugin' | 'baseline';
|
||||||
version: { id: number; version: number; sha256: string } | null;
|
version: { id: number; version: number; sha256: string } | null;
|
||||||
}
|
}
|
||||||
@@ -48,11 +40,7 @@
|
|||||||
async function load(): Promise<void> {
|
async function load(): Promise<void> {
|
||||||
const res = await fetch(`/api/betas/${id}`);
|
const res = await fetch(`/api/betas/${id}`);
|
||||||
if (!res.ok) { loading = false; return; }
|
if (!res.ok) { loading = false; return; }
|
||||||
const body = (await res.json()) as {
|
const body = (await res.json()) as { beta: BetaRow; scripts: BetaScript[]; servers: BetaServerRow[]; };
|
||||||
beta: BetaRow;
|
|
||||||
scripts: BetaScript[];
|
|
||||||
servers: BetaServerRow[];
|
|
||||||
};
|
|
||||||
beta = body.beta;
|
beta = body.beta;
|
||||||
scripts = body.scripts;
|
scripts = body.scripts;
|
||||||
servers = body.servers;
|
servers = body.servers;
|
||||||
@@ -67,12 +55,11 @@
|
|||||||
onDestroy(() => { if (poll) clearInterval(poll); });
|
onDestroy(() => { if (poll) clearInterval(poll); });
|
||||||
|
|
||||||
async function promote(): Promise<void> {
|
async function promote(): Promise<void> {
|
||||||
acting = 'promote';
|
acting = 'promote'; flash = null;
|
||||||
flash = null;
|
|
||||||
try {
|
try {
|
||||||
const res = await fetch(`/api/betas/${id}/promote`, { method: 'POST' });
|
const res = await fetch(`/api/betas/${id}/promote`, { method: 'POST' });
|
||||||
const body = (await res.json()) as { ok: boolean; error?: string };
|
const body = (await res.json()) as { ok: boolean; error?: string };
|
||||||
if (!body.ok) { flash = body.error ?? 'promote failed'; return; }
|
if (!body.ok) { flash = body.error ?? 'Promote failed'; return; }
|
||||||
await load();
|
await load();
|
||||||
} finally { acting = null; }
|
} finally { acting = null; }
|
||||||
}
|
}
|
||||||
@@ -82,18 +69,16 @@
|
|||||||
? `Reject beta #${id}? This restores original files on every beta server and marks the version as test-failed.`
|
? `Reject beta #${id}? This restores original files on every beta server and marks the version as test-failed.`
|
||||||
: `Rollback beta #${id}? This restores original files on every beta server.`;
|
: `Rollback beta #${id}? This restores original files on every beta server.`;
|
||||||
if (!confirm(prompt)) return;
|
if (!confirm(prompt)) return;
|
||||||
acting = 'rollback';
|
acting = 'rollback'; flash = null;
|
||||||
flash = null;
|
|
||||||
try {
|
try {
|
||||||
const res = await fetch(`/api/betas/${id}/rollback`, { method: 'POST' });
|
const res = await fetch(`/api/betas/${id}/rollback`, { method: 'POST' });
|
||||||
const body = (await res.json()) as { ok: boolean; error?: string };
|
const body = (await res.json()) as { ok: boolean; error?: string };
|
||||||
if (!body.ok) { flash = body.error ?? 'rollback failed'; return; }
|
if (!body.ok) { flash = body.error ?? 'Rollback failed'; return; }
|
||||||
await load();
|
await load();
|
||||||
} finally { acting = null; }
|
} finally { acting = null; }
|
||||||
}
|
}
|
||||||
async function retry(server: string): Promise<void> {
|
async function retry(server: string): Promise<void> {
|
||||||
acting = `retry:${server}`;
|
acting = `retry:${server}`; flash = null;
|
||||||
flash = null;
|
|
||||||
try {
|
try {
|
||||||
const res = await fetch(`/api/betas/${id}/retry`, {
|
const res = await fetch(`/api/betas/${id}/retry`, {
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
@@ -101,168 +86,271 @@
|
|||||||
body: JSON.stringify({ server })
|
body: JSON.stringify({ server })
|
||||||
});
|
});
|
||||||
const body = (await res.json()) as { ok: boolean; error?: string };
|
const body = (await res.json()) as { ok: boolean; error?: string };
|
||||||
if (!body.ok) { flash = body.error ?? 'retry failed'; return; }
|
if (!body.ok) { flash = body.error ?? 'Retry failed'; return; }
|
||||||
await load();
|
await load();
|
||||||
} finally { acting = null; }
|
} finally { acting = null; }
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function betaStateVariant(s: string): 'online' | 'warning' | 'info' | 'neutral' {
|
||||||
|
return s === 'ready-promote' ? 'online' :
|
||||||
|
s === 'running' ? 'warning' :
|
||||||
|
s === 'promoted' ? 'info' :
|
||||||
|
'neutral';
|
||||||
|
}
|
||||||
|
function stageVariant(s: string): 'online' | 'warning' | 'danger' | 'neutral' {
|
||||||
|
return s === 'ready' ? 'online' :
|
||||||
|
s === 'failed' ? 'danger' :
|
||||||
|
s === 'awaiting-empty' || s === 'restarting' || s === 'awaiting-health' || s === 'awaiting-match' || s === 'deploying'
|
||||||
|
? 'warning' :
|
||||||
|
'neutral';
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
{#if loading}
|
{#if loading}
|
||||||
<p class="empty">loading…</p>
|
<div class="loading">Loading…</div>
|
||||||
{:else if !beta}
|
{:else if !beta}
|
||||||
<p class="empty">beta not found</p>
|
<EmptyState title="Beta not found" description="This beta may have been archived." />
|
||||||
{:else}
|
{:else}
|
||||||
<a class="back" href="/betas">← all betas</a>
|
{@const b = beta}
|
||||||
<div class="head-row">
|
<div class="page">
|
||||||
<h1>Beta #{beta.id}</h1>
|
<SectionHeader title="Beta #{b.id}">
|
||||||
<span class="tag state-{beta.state}">{beta.state}</span>
|
{#snippet crumbs()}
|
||||||
</div>
|
<Breadcrumbs items={[{ label: 'Betas', href: '/betas' }, { label: `#${b.id}` }]} />
|
||||||
|
{/snippet}
|
||||||
|
{#snippet actions()}
|
||||||
|
<Badge variant={betaStateVariant(b.state)} size="md" uppercase>{b.state}</Badge>
|
||||||
|
{/snippet}
|
||||||
|
</SectionHeader>
|
||||||
|
|
||||||
<section class="panel">
|
<!-- Artifacts -->
|
||||||
<h2>Artifacts · {scripts.length}</h2>
|
<Card padding="lg">
|
||||||
|
<div class="panel-head">
|
||||||
|
<h2>Artifacts</h2>
|
||||||
|
<Badge variant="neutral" size="sm">{scripts.length}</Badge>
|
||||||
|
</div>
|
||||||
{#if scripts.length === 0}
|
{#if scripts.length === 0}
|
||||||
<p class="empty">no artifacts bundled in this beta</p>
|
<EmptyState title="No artifacts bundled" description="This beta has no scripts, configs, or plugins." />
|
||||||
{:else}
|
{:else}
|
||||||
<div class="script-list">
|
<div class="script-list">
|
||||||
{#each scripts as s (s.id)}
|
{#each scripts as s (s.id)}
|
||||||
<div class="script-row">
|
<div class="script-row">
|
||||||
<span class="s-kind mono">[{s.kind}]</span>
|
<Badge variant="neutral" size="sm" uppercase>{s.kind}</Badge>
|
||||||
<a class="s-name" href="/scripts/{s.id}">{s.name}</a>
|
<a class="s-name" href="/scripts/{s.id}">{s.name}</a>
|
||||||
<span class="s-target mono">{s.target_rel_path}</span>
|
<span class="s-target">{s.target_rel_path}</span>
|
||||||
<span class="s-ver mono">v{s.version?.version ?? '?'}</span>
|
<span class="s-ver">v{s.version?.version ?? '?'}</span>
|
||||||
<span class="s-sha mono">{s.version?.sha256.slice(0, 8) ?? ''}</span>
|
<span class="s-sha">{s.version?.sha256.slice(0, 8) ?? ''}</span>
|
||||||
</div>
|
</div>
|
||||||
{/each}
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
</section>
|
</Card>
|
||||||
|
|
||||||
<section class="panel">
|
<!-- Options -->
|
||||||
<h2>Options</h2>
|
<Card padding="lg">
|
||||||
<div class="opts mono">
|
<div class="panel-head"><h2>Options</h2></div>
|
||||||
<span>wait for health: <strong>{beta.wait_for_health ? 'yes' : 'no'}</strong></span>
|
<div class="opts">
|
||||||
<span>wait for match: <strong>{beta.wait_for_match ? 'yes' : 'no'}</strong></span>
|
<div class="opt">
|
||||||
|
<span class="opt-k">Wait for health</span>
|
||||||
|
<span class="opt-v">{b.wait_for_health ? 'Yes' : 'No'}</span>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
<div class="opt">
|
||||||
|
<span class="opt-k">Wait for match</span>
|
||||||
|
<span class="opt-v">{b.wait_for_match ? 'Yes' : 'No'}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
|
||||||
<section class="panel">
|
<!-- Server progress -->
|
||||||
|
<Card padding="lg">
|
||||||
|
<div class="panel-head">
|
||||||
<h2>Server progress</h2>
|
<h2>Server progress</h2>
|
||||||
<div class="rows">
|
<Badge variant="neutral" size="sm">{servers.length}</Badge>
|
||||||
|
</div>
|
||||||
|
<div class="srv-list">
|
||||||
{#each servers as bs (bs.server)}
|
{#each servers as bs (bs.server)}
|
||||||
<div class="srv-row srv-{bs.stage}">
|
<div class="srv-row">
|
||||||
<span class="srv-name mono">{bs.server}</span>
|
<a class="srv-name" href="/servers/{bs.server}">{bs.server}</a>
|
||||||
<span class="tag stage-{bs.stage}">{bs.stage}</span>
|
<Badge variant={stageVariant(bs.stage)} size="sm" uppercase>{bs.stage}</Badge>
|
||||||
<div class="ticks mono">
|
<div class="ticks" aria-label="pipeline progress">
|
||||||
<span class:on={bs.deployed_at}>deploy</span>
|
<span class:on={bs.deployed_at}>Deploy</span>
|
||||||
<span class:on={bs.stage !== 'awaiting-empty' && bs.stage !== 'deploying'}>empty</span>
|
<span class:on={bs.stage !== 'awaiting-empty' && bs.stage !== 'deploying'}>Empty</span>
|
||||||
<span class:on={bs.restarted_at}>restart</span>
|
<span class:on={bs.restarted_at}>Restart</span>
|
||||||
<span class:on={bs.healthy_at}>healthy</span>
|
<span class:on={bs.healthy_at}>Healthy</span>
|
||||||
{#if beta.wait_for_match}
|
{#if b.wait_for_match}
|
||||||
<span class:on={bs.match_seen_at}>match</span>
|
<span class:on={bs.match_seen_at}>Match</span>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
{#if bs.error}
|
{#if bs.error}
|
||||||
<span class="err mono">{bs.error}</span>
|
<span class="err">{bs.error}</span>
|
||||||
{/if}
|
{/if}
|
||||||
{#if bs.stage === 'failed'}
|
{#if bs.stage === 'failed'}
|
||||||
<button class="mini" onclick={() => retry(bs.server)} disabled={acting === `retry:${bs.server}`}>
|
<Button
|
||||||
{acting === `retry:${bs.server}` ? 'retrying…' : 'retry'}
|
variant="secondary"
|
||||||
</button>
|
size="sm"
|
||||||
|
onclick={() => retry(bs.server)}
|
||||||
|
disabled={acting === `retry:${bs.server}`}
|
||||||
|
loading={acting === `retry:${bs.server}`}
|
||||||
|
>
|
||||||
|
Retry
|
||||||
|
</Button>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
{/each}
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</Card>
|
||||||
|
|
||||||
<section class="panel">
|
<!-- Actions -->
|
||||||
<h2>Actions</h2>
|
<Card padding="lg">
|
||||||
|
<div class="panel-head"><h2>Actions</h2></div>
|
||||||
<div class="action-row">
|
<div class="action-row">
|
||||||
<button
|
<Button
|
||||||
class="primary"
|
variant="primary"
|
||||||
onclick={promote}
|
onclick={promote}
|
||||||
disabled={beta.state !== 'ready-promote' || acting !== null}
|
disabled={b.state !== 'ready-promote' || acting !== null}
|
||||||
title={beta.state !== 'ready-promote' ? 'all servers must reach ready first' : ''}
|
loading={acting === 'promote'}
|
||||||
|
title={b.state !== 'ready-promote' ? 'All servers must reach ready first' : ''}
|
||||||
>
|
>
|
||||||
{acting === 'promote' ? 'promoting…' : 'promote'}
|
Promote
|
||||||
</button>
|
</Button>
|
||||||
<button
|
<Button
|
||||||
class="danger"
|
variant="danger"
|
||||||
onclick={rollback}
|
onclick={rollback}
|
||||||
disabled={beta.state === 'promoted' || beta.state === 'rolled-back' || acting !== null}
|
disabled={b.state === 'promoted' || b.state === 'rolled-back' || acting !== null}
|
||||||
|
loading={acting === 'rollback'}
|
||||||
>
|
>
|
||||||
{#if acting === 'rollback'}
|
{b.state === 'ready-promote' ? 'Reject' : 'Rollback'}
|
||||||
{beta.state === 'ready-promote' ? 'rejecting…' : 'rolling back…'}
|
</Button>
|
||||||
{:else if beta.state === 'ready-promote'}
|
</div>
|
||||||
reject
|
{#if flash}<div class="flash">{flash}</div>{/if}
|
||||||
{:else}
|
</Card>
|
||||||
rollback
|
|
||||||
{/if}
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
|
||||||
|
|
||||||
{#if flash}<p class="flash">{flash}</p>{/if}
|
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.back { color: var(--ink-500); font-family: var(--font-mono); font-size: var(--text-mono-sm); text-decoration: none; }
|
.page { display: flex; flex-direction: column; gap: var(--space-6); }
|
||||||
.back:hover { color: var(--ink-100); }
|
.loading { text-align: center; padding: var(--space-16); color: var(--text-tertiary); }
|
||||||
.head-row { display: flex; align-items: center; gap: 12px; margin: 12px 0 4px; }
|
|
||||||
h1 { color: var(--cream); font-family: var(--font-display); font-size: var(--text-2xl); letter-spacing: 1.5px; margin: 0; }
|
|
||||||
.empty { color: var(--ink-500); font-family: var(--font-mono); font-size: var(--text-mono); }
|
|
||||||
|
|
||||||
.script-list { display: flex; flex-direction: column; gap: 6px; }
|
.panel-head {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: var(--space-3);
|
||||||
|
margin-bottom: var(--space-4);
|
||||||
|
}
|
||||||
|
.panel-head h2 {
|
||||||
|
margin: 0;
|
||||||
|
font-family: var(--font-body);
|
||||||
|
font-size: var(--text-md);
|
||||||
|
font-weight: var(--weight-semibold);
|
||||||
|
color: var(--text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Artifacts */
|
||||||
|
.script-list { display: flex; flex-direction: column; gap: var(--space-1); }
|
||||||
.script-row {
|
.script-row {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 220px 1fr 80px 100px;
|
grid-template-columns: auto minmax(160px, 220px) 1fr 80px 100px;
|
||||||
gap: 14px;
|
gap: var(--space-3);
|
||||||
padding: 10px 14px;
|
|
||||||
background: var(--bg-card);
|
|
||||||
border: 1px solid var(--border);
|
|
||||||
border-radius: var(--r-sm);
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
font-size: var(--text-mono);
|
padding: var(--space-3) var(--space-4);
|
||||||
|
background: var(--surface-sunken);
|
||||||
|
border: 1px solid var(--border-subtle);
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
font-size: var(--text-sm);
|
||||||
}
|
}
|
||||||
.s-name { color: var(--spark-500); text-decoration: none; font-weight: 600; font-family: var(--font-body); }
|
.s-name { color: var(--text-primary); text-decoration: none; font-weight: var(--weight-semibold); }
|
||||||
.s-name:hover { text-decoration: underline; }
|
.s-name:hover { color: var(--accent-primary-hover); text-decoration: underline; }
|
||||||
.s-target { color: var(--ink-300); word-break: break-all; }
|
.s-target { color: var(--text-secondary); font-family: var(--font-mono); font-size: var(--text-xs); word-break: break-all; }
|
||||||
.s-ver, .s-sha { color: var(--ink-500); }
|
.s-ver, .s-sha { color: var(--text-tertiary); font-family: var(--font-mono); font-size: var(--text-xs); }
|
||||||
|
|
||||||
.panel { background: var(--bg-nav); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--pad-panel); margin-bottom: 20px; }
|
/* Options */
|
||||||
h2 { margin: 0 0 14px; font-family: var(--font-body); font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--ink-300); }
|
.opts { display: flex; gap: var(--space-6); flex-wrap: wrap; }
|
||||||
|
.opt {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 2px;
|
||||||
|
padding: var(--space-3) var(--space-4);
|
||||||
|
background: var(--surface-sunken);
|
||||||
|
border: 1px solid var(--border-subtle);
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
min-width: 200px;
|
||||||
|
}
|
||||||
|
.opt-k {
|
||||||
|
font-size: var(--text-xs);
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: var(--tracking-label);
|
||||||
|
color: var(--text-tertiary);
|
||||||
|
font-weight: var(--weight-semibold);
|
||||||
|
}
|
||||||
|
.opt-v { font-size: var(--text-md); color: var(--text-primary); font-weight: var(--weight-semibold); }
|
||||||
|
|
||||||
.tag { padding: 3px 10px; border-radius: var(--r-sm); font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 1px; border: 1px solid transparent; }
|
/* Server progress */
|
||||||
.state-running { background: rgba(255, 176, 32, 0.15); border-color: rgba(255, 176, 32, 0.4); color: var(--amber-500); }
|
.srv-list { display: flex; flex-direction: column; gap: var(--space-2); }
|
||||||
.state-ready-promote { background: rgba(124, 212, 255, 0.15); border-color: rgba(124, 212, 255, 0.4); color: var(--spark-500); }
|
.srv-row {
|
||||||
.state-promoted { background: rgba(124, 212, 255, 0.10); border-color: rgba(124, 212, 255, 0.28); color: var(--cream); }
|
display: grid;
|
||||||
.state-rolled-back { background: var(--bg-card); border-color: var(--border); color: var(--ink-500); }
|
grid-template-columns: minmax(160px, 220px) auto 1fr auto auto;
|
||||||
|
gap: var(--space-3);
|
||||||
|
align-items: center;
|
||||||
|
padding: var(--space-3) var(--space-4);
|
||||||
|
background: color-mix(in oklab, var(--surface) 88%, transparent);
|
||||||
|
border: 1px solid var(--border-subtle);
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
}
|
||||||
|
.srv-name { color: var(--text-primary); text-decoration: none; font-size: var(--text-sm); font-weight: var(--weight-medium); }
|
||||||
|
.srv-name:hover { color: var(--accent-primary-hover); }
|
||||||
|
|
||||||
.opts { display: flex; flex-direction: column; gap: 6px; color: var(--ink-100); font-size: var(--text-mono); }
|
/* Pipeline ticks */
|
||||||
.opts strong { color: var(--cream); }
|
.ticks {
|
||||||
|
display: flex;
|
||||||
.rows { display: flex; flex-direction: column; gap: 8px; }
|
gap: var(--space-4);
|
||||||
.srv-row { display: grid; grid-template-columns: 220px 130px 1fr auto auto; gap: 14px; padding: 12px 16px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-sm); align-items: center; }
|
font-family: var(--font-mono);
|
||||||
.srv-ready { border-left: 3px solid var(--spark-500); }
|
font-size: var(--text-xs);
|
||||||
.srv-failed { border-left: 3px solid var(--danger-500); }
|
color: var(--text-tertiary);
|
||||||
.srv-awaiting-empty, .srv-restarting, .srv-awaiting-health, .srv-awaiting-match, .srv-deploying { border-left: 3px solid var(--amber-500); }
|
}
|
||||||
|
|
||||||
.srv-name { color: var(--cream); font-size: var(--text-md); }
|
|
||||||
.stage-deploying, .stage-awaiting-empty, .stage-restarting, .stage-awaiting-health, .stage-awaiting-match { background: rgba(255, 176, 32, 0.10); border-color: rgba(255, 176, 32, 0.3); color: var(--amber-500); }
|
|
||||||
.stage-ready { background: rgba(124, 212, 255, 0.15); border-color: rgba(124, 212, 255, 0.4); color: var(--spark-500); }
|
|
||||||
.stage-failed { background: rgba(255, 48, 80, 0.15); border-color: rgba(255, 48, 80, 0.4); color: var(--danger-500); }
|
|
||||||
.ticks { display: flex; gap: 14px; font-size: var(--text-mono-sm); color: var(--ink-500); }
|
|
||||||
.ticks span { position: relative; padding-left: 14px; }
|
.ticks span { position: relative; padding-left: 14px; }
|
||||||
.ticks span::before { content: '○'; position: absolute; left: 0; color: var(--ink-500); }
|
.ticks span::before {
|
||||||
.ticks span.on { color: var(--cream); }
|
content: '';
|
||||||
.ticks span.on::before { content: '●'; color: var(--spark-500); }
|
position: absolute;
|
||||||
.err { color: var(--danger-500); font-size: var(--text-mono-sm); word-break: break-word; }
|
left: 0;
|
||||||
.mini { background: var(--bg-nav); color: var(--cream); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 6px 12px; font-family: var(--font-body); font-size: var(--text-xs); cursor: pointer; }
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 1px solid var(--text-quaternary);
|
||||||
|
background: transparent;
|
||||||
|
transition: background-color var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard);
|
||||||
|
}
|
||||||
|
.ticks span.on { color: var(--text-primary); }
|
||||||
|
.ticks span.on::before {
|
||||||
|
background: var(--state-online);
|
||||||
|
border-color: var(--state-online);
|
||||||
|
box-shadow: 0 0 5px rgba(124, 212, 255, 0.45);
|
||||||
|
}
|
||||||
|
.err {
|
||||||
|
color: var(--state-danger);
|
||||||
|
font-family: var(--font-mono);
|
||||||
|
font-size: var(--text-xs);
|
||||||
|
word-break: break-word;
|
||||||
|
}
|
||||||
|
|
||||||
.action-row { display: flex; gap: 12px; }
|
/* Actions */
|
||||||
.primary { background: linear-gradient(180deg, var(--blue-500), var(--blue-600)); border: 1px solid var(--blue-400); color: var(--cream); border-radius: var(--r-sm); padding: 12px 20px; font-family: var(--font-body); font-weight: 600; cursor: pointer; }
|
.action-row { display: flex; gap: var(--space-2); flex-wrap: wrap; }
|
||||||
.primary:disabled { opacity: 0.4; cursor: default; }
|
.flash {
|
||||||
.danger { background: var(--bg-nav); border: 1px solid rgba(255, 48, 80, 0.4); color: var(--danger-500); border-radius: var(--r-sm); padding: 12px 20px; font-family: var(--font-body); cursor: pointer; }
|
margin-top: var(--space-3);
|
||||||
.danger:disabled { opacity: 0.4; cursor: default; }
|
padding: var(--space-3) var(--space-4);
|
||||||
.flash { color: var(--danger-500); font-family: var(--font-mono); font-size: var(--text-mono); margin-top: 12px; }
|
background: rgba(255, 86, 112, 0.06);
|
||||||
.mono { font-family: var(--font-mono); }
|
border: 1px solid rgba(255, 86, 112, 0.28);
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
color: var(--state-danger);
|
||||||
|
font-family: var(--font-mono);
|
||||||
|
font-size: var(--text-xs);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 720px) {
|
||||||
|
.script-row, .srv-row {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
gap: var(--space-2);
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
+232
-221
@@ -1,35 +1,30 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { onMount } from 'svelte';
|
import { onMount } from 'svelte';
|
||||||
|
import Card from '$ui/components/primitives/Card.svelte';
|
||||||
|
import Badge from '$ui/components/primitives/Badge.svelte';
|
||||||
|
import Button from '$ui/components/primitives/Button.svelte';
|
||||||
|
import SectionHeader from '$ui/components/primitives/SectionHeader.svelte';
|
||||||
|
import EmptyState from '$ui/components/primitives/EmptyState.svelte';
|
||||||
|
import Field from '$ui/components/primitives/Field.svelte';
|
||||||
|
import Input from '$ui/components/primitives/Input.svelte';
|
||||||
|
import Select from '$ui/components/primitives/Select.svelte';
|
||||||
|
import Textarea from '$ui/components/primitives/Textarea.svelte';
|
||||||
|
|
||||||
type ArtifactKind = 'script' | 'config' | 'plugin' | 'baseline';
|
type ArtifactKind = 'script' | 'config' | 'plugin' | 'baseline';
|
||||||
|
|
||||||
interface ArtifactRow {
|
interface ArtifactRow {
|
||||||
id: number;
|
id: number; name: string; target_rel_path: string;
|
||||||
name: string;
|
scope_type: 'game' | 'map' | null; scope_value: string | null;
|
||||||
target_rel_path: string;
|
current_version_id: number | null; kind: ArtifactKind;
|
||||||
scope_type: 'game' | 'map' | null;
|
|
||||||
scope_value: string | null;
|
|
||||||
current_version_id: number | null;
|
|
||||||
kind: ArtifactKind;
|
|
||||||
latestVersion: {
|
latestVersion: {
|
||||||
id: number;
|
id: number; version: number; sha256: string; size: number;
|
||||||
version: number;
|
state: 'untested' | 'tested' | 'test-failed'; uploaded_at: string;
|
||||||
sha256: string;
|
|
||||||
size: number;
|
|
||||||
state: 'untested' | 'tested' | 'test-failed';
|
|
||||||
uploaded_at: string;
|
|
||||||
} | null;
|
} | null;
|
||||||
versionCount: number;
|
versionCount: number;
|
||||||
servers: string[];
|
servers: string[];
|
||||||
runningBetaId: number | null;
|
runningBetaId: number | null;
|
||||||
}
|
}
|
||||||
|
interface ScopeOptions { games: string[]; mapsByGame: Record<string, string[]>; }
|
||||||
|
|
||||||
interface ScopeOptions {
|
|
||||||
games: string[];
|
|
||||||
mapsByGame: Record<string, string[]>;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Two lists: baselines (kind='baseline') and overlays (kind='config').
|
|
||||||
let baselines = $state<ArtifactRow[]>([]);
|
let baselines = $state<ArtifactRow[]>([]);
|
||||||
let overlays = $state<ArtifactRow[]>([]);
|
let overlays = $state<ArtifactRow[]>([]);
|
||||||
let loading = $state(true);
|
let loading = $state(true);
|
||||||
@@ -38,7 +33,6 @@
|
|||||||
let scopeOptions = $state<ScopeOptions>({ games: [], mapsByGame: {} });
|
let scopeOptions = $state<ScopeOptions>({ games: [], mapsByGame: {} });
|
||||||
let successBanner = $state<{ name: string; artifactId: number; version: number; kind: string } | null>(null);
|
let successBanner = $state<{ name: string; artifactId: number; version: number; kind: string } | null>(null);
|
||||||
|
|
||||||
// Overlay form state
|
|
||||||
let overlayName = $state('');
|
let overlayName = $state('');
|
||||||
let overlayScopeType = $state<'game' | 'map'>('game');
|
let overlayScopeType = $state<'game' | 'map'>('game');
|
||||||
let overlayScopeGame = $state('');
|
let overlayScopeGame = $state('');
|
||||||
@@ -46,7 +40,6 @@
|
|||||||
let overlayText = $state('');
|
let overlayText = $state('');
|
||||||
let overlayNotes = $state('');
|
let overlayNotes = $state('');
|
||||||
|
|
||||||
// Baseline form state
|
|
||||||
let baselineName = $state('');
|
let baselineName = $state('');
|
||||||
let baselineScopeGame = $state('');
|
let baselineScopeGame = $state('');
|
||||||
let baselineFile = $state<File | null>(null);
|
let baselineFile = $state<File | null>(null);
|
||||||
@@ -65,9 +58,8 @@
|
|||||||
fetch('/api/scope-options')
|
fetch('/api/scope-options')
|
||||||
]);
|
]);
|
||||||
if (!baselineRes.ok || !overlayRes.ok) {
|
if (!baselineRes.ok || !overlayRes.ok) {
|
||||||
flash = `configs API returned ${baselineRes.status}/${overlayRes.status}. If this is a dev environment, restart the server so the DB migration runs.`;
|
flash = `Configs API returned ${baselineRes.status}/${overlayRes.status}. If dev, restart to run DB migrations.`;
|
||||||
baselines = [];
|
baselines = []; overlays = [];
|
||||||
overlays = [];
|
|
||||||
} else {
|
} else {
|
||||||
baselines = ((await baselineRes.json()) as { scripts?: ArtifactRow[] }).scripts ?? [];
|
baselines = ((await baselineRes.json()) as { scripts?: ArtifactRow[] }).scripts ?? [];
|
||||||
overlays = ((await overlayRes.json()) as { scripts?: ArtifactRow[] }).scripts ?? [];
|
overlays = ((await overlayRes.json()) as { scripts?: ArtifactRow[] }).scripts ?? [];
|
||||||
@@ -76,25 +68,23 @@
|
|||||||
scopeOptions = ((await scopeRes.json()) as ScopeOptions | undefined) ?? { games: [], mapsByGame: {} };
|
scopeOptions = ((await scopeRes.json()) as ScopeOptions | undefined) ?? { games: [], mapsByGame: {} };
|
||||||
}
|
}
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
flash = `failed to load configs: ${(err as Error).message}`;
|
flash = `Failed to load configs: ${(err as Error).message}`;
|
||||||
} finally {
|
} finally {
|
||||||
loading = false;
|
loading = false;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
onMount(load);
|
onMount(load);
|
||||||
|
|
||||||
async function createOverlay(e: Event): Promise<void> {
|
async function createOverlay(e: Event): Promise<void> {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
if (uploading) return;
|
if (uploading) return;
|
||||||
if (!overlayName.trim()) { flash = 'name is required'; return; }
|
if (!overlayName.trim()) { flash = 'Name is required'; return; }
|
||||||
if (!overlayScopeValue) { flash = `pick a ${overlayScopeType}`; return; }
|
if (!overlayScopeValue) { flash = `Pick a ${overlayScopeType}`; return; }
|
||||||
if (!/^\s*set\s+\S+\s+/m.test(overlayText)) {
|
if (!/^\s*set\s+\S+\s+/m.test(overlayText)) {
|
||||||
flash = 'overlay must contain at least one `set KEY VALUE` line';
|
flash = 'Overlay must contain at least one `set KEY VALUE` line';
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
uploading = true;
|
uploading = true; flash = null;
|
||||||
flash = null;
|
|
||||||
const form = new FormData();
|
const form = new FormData();
|
||||||
form.append('name', overlayName.trim());
|
form.append('name', overlayName.trim());
|
||||||
form.append('kind', 'config');
|
form.append('kind', 'config');
|
||||||
@@ -126,11 +116,10 @@
|
|||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
if (uploading) return;
|
if (uploading) return;
|
||||||
if (!baselineName.trim() || !baselineFile || !baselineScopeGame) {
|
if (!baselineName.trim() || !baselineFile || !baselineScopeGame) {
|
||||||
flash = 'name, game, and cfg file are required';
|
flash = 'Name, game, and cfg file are required';
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
uploading = true;
|
uploading = true; flash = null;
|
||||||
flash = null;
|
|
||||||
const form = new FormData();
|
const form = new FormData();
|
||||||
form.append('name', baselineName.trim());
|
form.append('name', baselineName.trim());
|
||||||
form.append('kind', 'baseline');
|
form.append('kind', 'baseline');
|
||||||
@@ -154,233 +143,255 @@
|
|||||||
|
|
||||||
function scopeLabel(a: ArtifactRow): string {
|
function scopeLabel(a: ArtifactRow): string {
|
||||||
if (!a.scope_type) return 'unscoped';
|
if (!a.scope_type) return 'unscoped';
|
||||||
return `${a.scope_type}=${a.scope_value ?? '?'}`;
|
return `${a.scope_type} · ${a.scope_value ?? '?'}`;
|
||||||
}
|
}
|
||||||
|
function stateVariantFor(a: ArtifactRow): 'online' | 'warning' | 'danger' | 'neutral' | null {
|
||||||
function stateTag(a: ArtifactRow): { label: string; cls: string } | null {
|
|
||||||
if (!a.latestVersion) return null;
|
if (!a.latestVersion) return null;
|
||||||
if (a.current_version_id === null) return { label: 'untested', cls: 'state-untested' };
|
if (a.current_version_id === null) return 'neutral';
|
||||||
if (a.latestVersion.id !== a.current_version_id) {
|
if (a.latestVersion.id !== a.current_version_id) {
|
||||||
return { label: `v${a.latestVersion.version} ${a.latestVersion.state}`, cls: `state-${a.latestVersion.state}` };
|
if (a.latestVersion.state === 'untested') return 'neutral';
|
||||||
|
if (a.latestVersion.state === 'tested') return 'online';
|
||||||
|
if (a.latestVersion.state === 'test-failed') return 'danger';
|
||||||
}
|
}
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
function stateLabel(a: ArtifactRow): string {
|
||||||
|
if (!a.latestVersion) return '';
|
||||||
|
if (a.current_version_id === null) return 'untested';
|
||||||
|
if (a.latestVersion.id !== a.current_version_id) {
|
||||||
|
return `v${a.latestVersion.version} ${a.latestVersion.state.replace('-', ' ')}`;
|
||||||
|
}
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
|
||||||
|
let gameOptions = $derived([
|
||||||
|
{ value: '', label: '— Pick a game —', disabled: true },
|
||||||
|
...scopeOptions.games.map((g) => ({ value: g, label: g }))
|
||||||
|
]);
|
||||||
|
let mapOptions = $derived([
|
||||||
|
{ value: '', label: '— Pick a map —', disabled: true },
|
||||||
|
...(scopeOptions.mapsByGame[overlayScopeGame] ?? []).map((m) => ({ value: m, label: m }))
|
||||||
|
]);
|
||||||
|
let scopeTypeOptions = [
|
||||||
|
{ value: 'game', label: 'Game' },
|
||||||
|
{ value: 'map', label: 'Map' }
|
||||||
|
];
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<h1>Configs</h1>
|
<div class="page">
|
||||||
|
<SectionHeader
|
||||||
|
title="Configs"
|
||||||
|
subtitle="One baseline per game, plus scoped overlays that patch it."
|
||||||
|
/>
|
||||||
|
|
||||||
<section class="panel">
|
|
||||||
<h2>Upload a baseline (one per game)</h2>
|
|
||||||
{#if successBanner}
|
{#if successBanner}
|
||||||
<div class="banner banner-info">
|
<div class="banner">
|
||||||
<strong>v{successBanner.version} of "{successBanner.name}" ({successBanner.kind}) uploaded — untested.</strong>
|
<strong>v{successBanner.version} of "{successBanner.name}" ({successBanner.kind}) uploaded — untested.</strong>
|
||||||
<span>Open a beta on <a href="/betas">the betas page</a> to test it before it can be promoted.</span>
|
<span>Open a beta on <a href="/betas">the betas page</a> to test it before promotion.</span>
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
<form onsubmit={createBaseline} class="upload-form">
|
|
||||||
<label>
|
|
||||||
<span class="k">name</span>
|
|
||||||
<input type="text" bind:value={baselineName} placeholder="t5 baseline" disabled={uploading} />
|
|
||||||
</label>
|
|
||||||
<label>
|
|
||||||
<span class="k">game</span>
|
|
||||||
<select bind:value={baselineScopeGame} disabled={uploading}>
|
|
||||||
<option value="">— pick a game —</option>
|
|
||||||
{#each scopeOptions.games as g (g)}
|
|
||||||
<option value={g}>{g}</option>
|
|
||||||
{/each}
|
|
||||||
</select>
|
|
||||||
</label>
|
|
||||||
<label>
|
|
||||||
<span class="k">notes (optional)</span>
|
|
||||||
<input type="text" bind:value={baselineNotes} placeholder="dedicated_sp.cfg baseline" disabled={uploading} />
|
|
||||||
</label>
|
|
||||||
<label>
|
|
||||||
<span class="k">cfg file (dedicated_sp.cfg)</span>
|
|
||||||
<input type="file" accept=".cfg,text/plain" onchange={pickBaselineFile} disabled={uploading} />
|
|
||||||
</label>
|
|
||||||
<button type="submit" class="primary" disabled={uploading || !baselineFile || !baselineName || !baselineScopeGame}>
|
|
||||||
{uploading ? 'uploading…' : 'upload baseline'}
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="panel">
|
<!-- Baseline upload -->
|
||||||
<h2>Create a config overlay</h2>
|
<Card padding="lg">
|
||||||
|
<h2 class="panel-title">Upload a baseline <span class="dim">(one per game)</span></h2>
|
||||||
|
<form onsubmit={createBaseline} class="upload-form">
|
||||||
|
<Field label="Name">
|
||||||
|
<Input bind:value={baselineName} placeholder="t5 baseline" disabled={uploading} />
|
||||||
|
</Field>
|
||||||
|
<Field label="Game">
|
||||||
|
<Select bind:value={baselineScopeGame} options={gameOptions} disabled={uploading} />
|
||||||
|
</Field>
|
||||||
|
<Field label="Notes" hint="Optional. Describe what this baseline covers.">
|
||||||
|
<Input bind:value={baselineNotes} placeholder="dedicated_sp.cfg baseline" disabled={uploading} />
|
||||||
|
</Field>
|
||||||
|
<Field label="Cfg file (dedicated_sp.cfg)">
|
||||||
|
<Input type="file" accept=".cfg,text/plain" onchange={pickBaselineFile} disabled={uploading} />
|
||||||
|
</Field>
|
||||||
|
<div class="form-actions">
|
||||||
|
<Button
|
||||||
|
type="submit"
|
||||||
|
variant="primary"
|
||||||
|
disabled={uploading || !baselineFile || !baselineName || !baselineScopeGame}
|
||||||
|
loading={uploading}
|
||||||
|
>
|
||||||
|
Upload baseline
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<!-- Overlay creation -->
|
||||||
|
<Card padding="lg">
|
||||||
|
<h2 class="panel-title">Create a config overlay</h2>
|
||||||
<form onsubmit={createOverlay} class="upload-form">
|
<form onsubmit={createOverlay} class="upload-form">
|
||||||
<label>
|
<Field label="Name">
|
||||||
<span class="k">name</span>
|
<Input bind:value={overlayName} placeholder="disable AFK" disabled={uploading} />
|
||||||
<input type="text" bind:value={overlayName} placeholder="disable AFK" disabled={uploading} />
|
</Field>
|
||||||
</label>
|
<Field label="Scope">
|
||||||
<label>
|
|
||||||
<span class="k">scope</span>
|
|
||||||
<div class="scope-row">
|
<div class="scope-row">
|
||||||
<select bind:value={overlayScopeType} disabled={uploading}>
|
<Select bind:value={overlayScopeType} options={scopeTypeOptions} disabled={uploading} />
|
||||||
<option value="game">game</option>
|
<Select bind:value={overlayScopeGame} options={gameOptions} disabled={uploading} />
|
||||||
<option value="map">map</option>
|
{#if overlayScopeType === 'map'}
|
||||||
</select>
|
<Select bind:value={overlayScopeMap} options={mapOptions} disabled={uploading || !overlayScopeGame} />
|
||||||
{#if overlayScopeType === 'game'}
|
|
||||||
<select bind:value={overlayScopeGame} disabled={uploading}>
|
|
||||||
<option value="">— pick a game —</option>
|
|
||||||
{#each scopeOptions.games as g (g)}
|
|
||||||
<option value={g}>{g}</option>
|
|
||||||
{/each}
|
|
||||||
</select>
|
|
||||||
{:else}
|
|
||||||
<select bind:value={overlayScopeGame} disabled={uploading}>
|
|
||||||
<option value="">— pick a game —</option>
|
|
||||||
{#each scopeOptions.games as g (g)}
|
|
||||||
<option value={g}>{g}</option>
|
|
||||||
{/each}
|
|
||||||
</select>
|
|
||||||
<select bind:value={overlayScopeMap} disabled={uploading || !overlayScopeGame}>
|
|
||||||
<option value="">— pick a map —</option>
|
|
||||||
{#each (scopeOptions.mapsByGame[overlayScopeGame] ?? []) as m (m)}
|
|
||||||
<option value={m}>{m}</option>
|
|
||||||
{/each}
|
|
||||||
</select>
|
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
</label>
|
</Field>
|
||||||
<label class="full">
|
<div class="full">
|
||||||
<span class="k">overlay lines</span>
|
<Field label="Overlay lines" hint="One or more `set KEY "VALUE"` lines. Replaces baseline lines with the same KEY.">
|
||||||
<textarea
|
<Textarea
|
||||||
bind:value={overlayText}
|
bind:value={overlayText}
|
||||||
rows="4"
|
rows={4}
|
||||||
|
mono
|
||||||
placeholder={'set g_inactivity "0"'}
|
placeholder={'set g_inactivity "0"'}
|
||||||
disabled={uploading}
|
disabled={uploading}
|
||||||
></textarea>
|
/>
|
||||||
<span class="hint">one or more `set KEY "VALUE"` lines. Replaces baseline lines with the same KEY.</span>
|
</Field>
|
||||||
</label>
|
</div>
|
||||||
<label>
|
<Field label="Notes" hint="Optional. Explain the reason for this overlay.">
|
||||||
<span class="k">notes (optional)</span>
|
<Input bind:value={overlayNotes} placeholder="why this change" disabled={uploading} />
|
||||||
<input type="text" bind:value={overlayNotes} placeholder="why this change" disabled={uploading} />
|
</Field>
|
||||||
</label>
|
<div class="form-actions">
|
||||||
<button type="submit" class="primary" disabled={uploading || !overlayName || !overlayText || !overlayScopeValue}>
|
<Button
|
||||||
{uploading ? 'uploading…' : 'create overlay'}
|
type="submit"
|
||||||
</button>
|
variant="primary"
|
||||||
|
disabled={uploading || !overlayName || !overlayText || !overlayScopeValue}
|
||||||
|
loading={uploading}
|
||||||
|
>
|
||||||
|
Create overlay
|
||||||
|
</Button>
|
||||||
|
{#if flash}<span class="flash">{flash}</span>{/if}
|
||||||
|
</div>
|
||||||
</form>
|
</form>
|
||||||
{#if flash}<p class="flash">{flash}</p>{/if}
|
</Card>
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="panel">
|
<!-- Baselines list -->
|
||||||
<h2>Baselines · {baselines.length}</h2>
|
<section class="section">
|
||||||
|
<div class="section-head">
|
||||||
|
<h2>Baselines</h2>
|
||||||
|
<Badge variant="neutral" size="sm">{baselines.length}</Badge>
|
||||||
|
</div>
|
||||||
{#if loading}
|
{#if loading}
|
||||||
<p class="empty">loading…</p>
|
<div class="loading">Loading…</div>
|
||||||
{:else if baselines.length === 0}
|
{:else if baselines.length === 0}
|
||||||
<p class="empty">no baseline yet — upload one above</p>
|
<EmptyState title="No baseline yet" description="Upload a per-game baseline above." />
|
||||||
{:else}
|
{:else}
|
||||||
<div class="artifacts">
|
<div class="rows">
|
||||||
{#each baselines as a (a.id)}
|
{#each baselines as a (a.id)}
|
||||||
<a class="artifact-row" href="/configs/{a.id}">
|
{@render artifactRow(a)}
|
||||||
<div class="row-top">
|
|
||||||
<span class="artifact-name">{a.name}</span>
|
|
||||||
<span class="scope tag scope-{a.scope_type ?? 'none'}">{scopeLabel(a)}</span>
|
|
||||||
{#if stateTag(a)}
|
|
||||||
{@const t = stateTag(a)!}
|
|
||||||
<span class="tag {t.cls}">{t.label}</span>
|
|
||||||
{/if}
|
|
||||||
{#if a.runningBetaId}
|
|
||||||
<span class="tag beta">beta {a.runningBetaId} running</span>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
<div class="row-meta mono">
|
|
||||||
<span>{a.target_rel_path}</span>
|
|
||||||
<span>v{a.latestVersion?.version ?? '—'} · {a.versionCount} version{a.versionCount === 1 ? '' : 's'}</span>
|
|
||||||
<span>{a.servers.length ? `${a.servers.length} matching server${a.servers.length === 1 ? '' : 's'}` : ''}</span>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
{/each}
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="panel">
|
<!-- Overlays list -->
|
||||||
<h2>Overlays · {overlays.length}</h2>
|
<section class="section">
|
||||||
|
<div class="section-head">
|
||||||
|
<h2>Overlays</h2>
|
||||||
|
<Badge variant="neutral" size="sm">{overlays.length}</Badge>
|
||||||
|
</div>
|
||||||
{#if loading}
|
{#if loading}
|
||||||
<p class="empty">loading…</p>
|
<div class="loading">Loading…</div>
|
||||||
{:else if overlays.length === 0}
|
{:else if overlays.length === 0}
|
||||||
<p class="empty">no overlays yet — create one above</p>
|
<EmptyState title="No overlays yet" description="Create a scoped overlay above." />
|
||||||
{:else}
|
{:else}
|
||||||
<div class="artifacts">
|
<div class="rows">
|
||||||
{#each overlays as a (a.id)}
|
{#each overlays as a (a.id)}
|
||||||
<a class="artifact-row" href="/configs/{a.id}">
|
{@render artifactRow(a)}
|
||||||
<div class="row-top">
|
|
||||||
<span class="artifact-name">{a.name}</span>
|
|
||||||
<span class="scope tag scope-{a.scope_type ?? 'none'}">{scopeLabel(a)}</span>
|
|
||||||
{#if stateTag(a)}
|
|
||||||
{@const t = stateTag(a)!}
|
|
||||||
<span class="tag {t.cls}">{t.label}</span>
|
|
||||||
{/if}
|
|
||||||
{#if a.runningBetaId}
|
|
||||||
<span class="tag beta">beta {a.runningBetaId} running</span>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
<div class="row-meta mono">
|
|
||||||
<span>v{a.latestVersion?.version ?? '—'} · {a.versionCount} version{a.versionCount === 1 ? '' : 's'}</span>
|
|
||||||
<span>{a.servers.length ? `${a.servers.length} matching server${a.servers.length === 1 ? '' : 's'}` : ''}</span>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
{/each}
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
</section>
|
</section>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{#snippet artifactRow(a: ArtifactRow)}
|
||||||
|
<a class="row" href="/configs/{a.id}">
|
||||||
|
<div class="row-top">
|
||||||
|
<span class="name">{a.name}</span>
|
||||||
|
<Badge
|
||||||
|
variant={a.scope_type === 'game' ? 'info' : a.scope_type === 'map' ? 'warning' : 'neutral'}
|
||||||
|
size="sm"
|
||||||
|
>
|
||||||
|
{scopeLabel(a)}
|
||||||
|
</Badge>
|
||||||
|
{#if stateVariantFor(a)}
|
||||||
|
{@const v = stateVariantFor(a)!}
|
||||||
|
<Badge variant={v} size="sm">{stateLabel(a)}</Badge>
|
||||||
|
{/if}
|
||||||
|
{#if a.runningBetaId}
|
||||||
|
<Badge variant="warning" size="sm">β{a.runningBetaId} running</Badge>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
<div class="row-meta">
|
||||||
|
<span class="path">{a.target_rel_path}</span>
|
||||||
|
<span>v{a.latestVersion?.version ?? '—'} · {a.versionCount} version{a.versionCount === 1 ? '' : 's'}</span>
|
||||||
|
{#if a.servers.length}
|
||||||
|
<span>{a.servers.length} matching server{a.servers.length === 1 ? '' : 's'}</span>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
{/snippet}
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
h1 { color: var(--cream); font-family: var(--font-display); font-size: var(--text-3xl); letter-spacing: var(--tracking-display); line-height: var(--leading-tight); margin: 0 0 28px; }
|
.page { display: flex; flex-direction: column; gap: var(--space-6); }
|
||||||
.panel { background: var(--bg-nav); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--pad-panel); margin-bottom: 20px; }
|
.loading { text-align: center; padding: var(--space-12); color: var(--text-tertiary); }
|
||||||
h2 { margin: 0 0 14px; font-family: var(--font-body); font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--ink-300); }
|
|
||||||
.empty { color: var(--ink-500); font-family: var(--font-mono); font-size: var(--text-mono); margin: 0; }
|
.banner {
|
||||||
.upload-form { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
|
display: flex; flex-direction: column; gap: 4px;
|
||||||
.upload-form label { display: flex; flex-direction: column; gap: 6px; font-size: var(--text-xs); }
|
padding: var(--space-3) var(--space-4);
|
||||||
.upload-form label.full { grid-column: 1 / -1; }
|
background: rgba(124, 212, 255, 0.06);
|
||||||
.upload-form label .k { color: var(--ink-500); text-transform: uppercase; letter-spacing: 1px; }
|
border: 1px solid rgba(124, 212, 255, 0.22);
|
||||||
.upload-form .hint { color: var(--ink-500); font-family: var(--font-mono); font-size: var(--text-mono-sm); }
|
border-radius: var(--radius-md);
|
||||||
.upload-form input[type=text], .upload-form select, .upload-form input[type=file], .upload-form textarea {
|
font-size: var(--text-sm);
|
||||||
background: var(--bg-page);
|
|
||||||
color: var(--ink-100);
|
|
||||||
border: 1px solid var(--border);
|
|
||||||
border-radius: var(--r-sm);
|
|
||||||
padding: 10px 12px;
|
|
||||||
font-family: var(--font-mono);
|
|
||||||
font-size: var(--text-mono);
|
|
||||||
}
|
}
|
||||||
.upload-form textarea { min-height: 100px; resize: vertical; }
|
.banner a { color: var(--state-online); text-decoration: underline; }
|
||||||
.upload-form input[type=text]:focus, .upload-form select:focus, .upload-form textarea:focus {
|
|
||||||
outline: none; border-color: var(--accent); box-shadow: var(--accent-glow);
|
.panel-title {
|
||||||
}
|
margin: 0 0 var(--space-4);
|
||||||
.scope-row { display: flex; gap: 8px; flex-wrap: wrap; }
|
|
||||||
.scope-row select:nth-of-type(1) { flex: 0 0 120px; }
|
|
||||||
.scope-row select:nth-of-type(2), .scope-row select:nth-of-type(3) { flex: 1; }
|
|
||||||
.primary {
|
|
||||||
grid-column: 1 / -1;
|
|
||||||
background: linear-gradient(180deg, var(--blue-500), var(--blue-600));
|
|
||||||
border: 1px solid var(--blue-400);
|
|
||||||
border-radius: var(--r-sm);
|
|
||||||
padding: 12px 18px;
|
|
||||||
color: var(--cream);
|
|
||||||
font-family: var(--font-body);
|
font-family: var(--font-body);
|
||||||
font-weight: 600;
|
font-size: var(--text-md);
|
||||||
cursor: pointer;
|
font-weight: var(--weight-semibold);
|
||||||
|
color: var(--text-primary);
|
||||||
}
|
}
|
||||||
.primary:disabled { opacity: 0.4; cursor: default; }
|
.panel-title .dim {
|
||||||
.flash { color: var(--danger-500); font-family: var(--font-mono); font-size: var(--text-mono); margin-top: 12px; }
|
color: var(--text-tertiary);
|
||||||
.artifacts { display: flex; flex-direction: column; gap: 8px; }
|
font-weight: var(--weight-regular);
|
||||||
.artifact-row { display: flex; flex-direction: column; gap: 6px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 14px 16px; text-decoration: none; color: var(--ink-100); }
|
font-size: var(--text-sm);
|
||||||
.artifact-row:hover { border-color: var(--accent); box-shadow: var(--accent-glow); }
|
}
|
||||||
.row-top { display: flex; gap: 12px; align-items: center; }
|
|
||||||
.artifact-name { color: var(--cream); font-weight: 600; font-size: var(--text-md); }
|
.upload-form { display: grid; gap: var(--space-4); grid-template-columns: 1fr 1fr; }
|
||||||
.row-meta { display: flex; gap: 24px; color: var(--ink-500); font-size: var(--text-mono-sm); }
|
.upload-form .full { grid-column: 1 / -1; }
|
||||||
.mono { font-family: var(--font-mono); }
|
.scope-row { display: flex; gap: var(--space-2); flex-wrap: wrap; }
|
||||||
.tag { font-family: var(--font-mono); font-size: var(--text-xs); padding: 3px 9px; border-radius: var(--r-sm); border: 1px solid transparent; }
|
.scope-row :global(.wrap) { flex: 1 1 140px; min-width: 140px; }
|
||||||
.scope-none { background: var(--bg-nav); border-color: var(--border); color: var(--ink-500); }
|
.form-actions { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--space-4); }
|
||||||
.scope-game { background: rgba(124, 212, 255, 0.10); border-color: rgba(124, 212, 255, 0.3); color: var(--spark-500); }
|
.flash { color: var(--state-danger); font-family: var(--font-mono); font-size: var(--text-xs); }
|
||||||
.scope-map { background: rgba(255, 176, 32, 0.10); border-color: rgba(255, 176, 32, 0.35); color: var(--amber-500); }
|
|
||||||
.beta { background: rgba(255, 176, 32, 0.10); border-color: rgba(255, 176, 32, 0.3); color: var(--amber-500); }
|
.section { display: flex; flex-direction: column; gap: var(--space-3); }
|
||||||
.state-untested { background: var(--bg-nav); border-color: var(--border); color: var(--ink-300); }
|
.section-head { display: flex; align-items: center; gap: var(--space-3); }
|
||||||
.state-tested { background: rgba(124, 212, 255, 0.10); border-color: rgba(124, 212, 255, 0.3); color: var(--spark-500); }
|
.section-head h2 {
|
||||||
.state-test-failed { background: rgba(255, 92, 92, 0.10); border-color: rgba(255, 92, 92, 0.4); color: var(--danger-500); }
|
margin: 0;
|
||||||
.banner { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 4px; border-radius: var(--r-sm); padding: 12px 14px; margin-bottom: 12px; font-size: var(--text-mono); }
|
font-family: var(--font-body);
|
||||||
.banner-info { background: rgba(124, 212, 255, 0.08); border: 1px solid rgba(124, 212, 255, 0.28); color: var(--ink-100); }
|
font-size: var(--text-md);
|
||||||
.banner-info a { color: var(--spark-500); text-decoration: underline; }
|
font-weight: var(--weight-semibold);
|
||||||
|
color: var(--text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.rows { display: flex; flex-direction: column; gap: var(--space-2); }
|
||||||
|
.row {
|
||||||
|
display: flex; flex-direction: column; gap: var(--space-2);
|
||||||
|
padding: var(--space-4) var(--space-5);
|
||||||
|
background: color-mix(in oklab, var(--surface) 88%, transparent);
|
||||||
|
border: 1px solid var(--border-subtle);
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
color: var(--text-primary);
|
||||||
|
text-decoration: none;
|
||||||
|
transition: background-color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
|
||||||
|
}
|
||||||
|
.row:hover { background: var(--surface-raised); border-color: var(--border-strong); }
|
||||||
|
.row:focus-visible { outline: none; box-shadow: var(--focus-ring); }
|
||||||
|
.row-top { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
|
||||||
|
.name { font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--text-primary); letter-spacing: var(--tracking-tight); }
|
||||||
|
.row-meta { display: flex; gap: var(--space-5); color: var(--text-tertiary); font-family: var(--font-mono); font-size: var(--text-xs); flex-wrap: wrap; }
|
||||||
|
.path { color: var(--text-secondary); }
|
||||||
|
|
||||||
|
@media (max-width: 720px) { .upload-form { grid-template-columns: 1fr; } }
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
+448
-204
@@ -1,5 +1,10 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { onMount, onDestroy } from 'svelte';
|
import { onMount, onDestroy } from 'svelte';
|
||||||
|
import Card from '$ui/components/primitives/Card.svelte';
|
||||||
|
import Badge from '$ui/components/primitives/Badge.svelte';
|
||||||
|
import Button from '$ui/components/primitives/Button.svelte';
|
||||||
|
import SectionHeader from '$ui/components/primitives/SectionHeader.svelte';
|
||||||
|
import EmptyState from '$ui/components/primitives/EmptyState.svelte';
|
||||||
|
|
||||||
interface ServerRow {
|
interface ServerRow {
|
||||||
server: string;
|
server: string;
|
||||||
@@ -32,7 +37,6 @@
|
|||||||
prior_version: number | null;
|
prior_version: number | null;
|
||||||
scripts: DepScript[];
|
scripts: DepScript[];
|
||||||
}
|
}
|
||||||
|
|
||||||
interface DriftFile {
|
interface DriftFile {
|
||||||
relPath: string;
|
relPath: string;
|
||||||
size: number;
|
size: number;
|
||||||
@@ -50,13 +54,15 @@
|
|||||||
let running = $state(false);
|
let running = $state(false);
|
||||||
let rollingBack = $state<string | null>(null);
|
let rollingBack = $state<string | null>(null);
|
||||||
let flash = $state<string | null>(null);
|
let flash = $state<string | null>(null);
|
||||||
|
// Drift panel opens automatically when there's a problem; collapses when clean.
|
||||||
|
let driftOpen = $state(false);
|
||||||
|
let driftFilter = $state('');
|
||||||
|
|
||||||
async function loadDeployments(): Promise<void> {
|
async function loadDeployments(): Promise<void> {
|
||||||
const res = await fetch('/api/deployments');
|
const res = await fetch('/api/deployments');
|
||||||
const body = (await res.json()) as { deployments: Deployment[] };
|
const body = (await res.json()) as { deployments: Deployment[] };
|
||||||
deployments = body.deployments;
|
deployments = body.deployments;
|
||||||
}
|
}
|
||||||
|
|
||||||
async function scanDrift(): Promise<void> {
|
async function scanDrift(): Promise<void> {
|
||||||
scanning = true;
|
scanning = true;
|
||||||
try {
|
try {
|
||||||
@@ -76,14 +82,22 @@
|
|||||||
return { untracked: u, missing: m };
|
return { untracked: u, missing: m };
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Auto-open on first scan if there's drift; leave user's toggle alone after.
|
||||||
|
let firstScan = $state(true);
|
||||||
|
$effect(() => {
|
||||||
|
if (drift && firstScan) {
|
||||||
|
firstScan = false;
|
||||||
|
if (drift.totalDrift > 0) driftOpen = true;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
async function runDrift(): Promise<void> {
|
async function runDrift(): Promise<void> {
|
||||||
if (!drift || drift.totalDrift === 0) return;
|
if (!drift || drift.totalDrift === 0) return;
|
||||||
const parts: string[] = [];
|
const parts: string[] = [];
|
||||||
if (driftCounts.untracked > 0) parts.push(`delete ${driftCounts.untracked} untracked file(s)`);
|
if (driftCounts.untracked > 0) parts.push(`delete ${driftCounts.untracked} untracked file(s)`);
|
||||||
if (driftCounts.missing > 0) parts.push(`restore ${driftCounts.missing} missing artifact(s)`);
|
if (driftCounts.missing > 0) parts.push(`restore ${driftCounts.missing} missing artifact(s)`);
|
||||||
if (!confirm(`Reconcile drift on ${drift.servers.length} server(s)? Will ${parts.join(' and ')}.`)) return;
|
if (!confirm(`Reconcile drift on ${drift.servers.length} server(s)? Will ${parts.join(' and ')}.`)) return;
|
||||||
running = true;
|
running = true; flash = null;
|
||||||
flash = null;
|
|
||||||
try {
|
try {
|
||||||
const res = await fetch('/api/drift', {
|
const res = await fetch('/api/drift', {
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
@@ -91,14 +105,8 @@
|
|||||||
body: JSON.stringify({})
|
body: JSON.stringify({})
|
||||||
});
|
});
|
||||||
const body = (await res.json()) as {
|
const body = (await res.json()) as {
|
||||||
ok: boolean;
|
ok: boolean; error?: string;
|
||||||
error?: string;
|
result?: { deploymentId: string | null; totalRemoved: number; totalRestored?: number; totalServers: number };
|
||||||
result?: {
|
|
||||||
deploymentId: string | null;
|
|
||||||
totalRemoved: number;
|
|
||||||
totalRestored?: number;
|
|
||||||
totalServers: number;
|
|
||||||
};
|
|
||||||
};
|
};
|
||||||
if (!body.ok) { flash = body.error ?? 'drift run failed'; return; }
|
if (!body.ok) { flash = body.error ?? 'drift run failed'; return; }
|
||||||
const removed = body.result?.totalRemoved ?? 0;
|
const removed = body.result?.totalRemoved ?? 0;
|
||||||
@@ -126,11 +134,6 @@
|
|||||||
function isActive(d: Deployment): boolean {
|
function isActive(d: Deployment): boolean {
|
||||||
return d.servers.some((s) => s.restart_state === 'pending' || s.restart_state === 'failed');
|
return d.servers.some((s) => s.restart_state === 'pending' || s.restart_state === 'failed');
|
||||||
}
|
}
|
||||||
|
|
||||||
function chipClass(state: string): string {
|
|
||||||
return `chip chip-${state}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
function ago(iso: string): string {
|
function ago(iso: string): string {
|
||||||
const d = Date.now() - new Date(iso).getTime();
|
const d = Date.now() - new Date(iso).getTime();
|
||||||
if (d < 60_000) return 'just now';
|
if (d < 60_000) return 'just now';
|
||||||
@@ -138,6 +141,13 @@
|
|||||||
if (d < 86_400_000) return `${Math.floor(d / 3_600_000)}h ago`;
|
if (d < 86_400_000) return `${Math.floor(d / 3_600_000)}h ago`;
|
||||||
return `${Math.floor(d / 86_400_000)}d ago`;
|
return `${Math.floor(d / 86_400_000)}d ago`;
|
||||||
}
|
}
|
||||||
|
function stateBadgeVariant(s: string): 'online' | 'danger' | 'warning' | 'info' | 'neutral' {
|
||||||
|
return s === 'done' ? 'online' :
|
||||||
|
s === 'failed' ? 'danger' :
|
||||||
|
s === 'pending' ? 'warning' :
|
||||||
|
s === 'held' ? 'info' :
|
||||||
|
'neutral';
|
||||||
|
}
|
||||||
|
|
||||||
let active = $derived(deployments.filter(isActive));
|
let active = $derived(deployments.filter(isActive));
|
||||||
let history = $derived(deployments.filter((d) => !isActive(d)));
|
let history = $derived(deployments.filter((d) => !isActive(d)));
|
||||||
@@ -150,7 +160,6 @@
|
|||||||
}
|
}
|
||||||
return `${d.scripts.length} scripts`;
|
return `${d.scripts.length} scripts`;
|
||||||
}
|
}
|
||||||
// Legacy fallback: pre-multi-script rows still use the top-level cols.
|
|
||||||
if (d.script_name) return `${d.script_name} v${d.script_version ?? '?'}`;
|
if (d.script_name) return `${d.script_name} v${d.script_version ?? '?'}`;
|
||||||
return '';
|
return '';
|
||||||
}
|
}
|
||||||
@@ -159,261 +168,496 @@
|
|||||||
ev.preventDefault();
|
ev.preventDefault();
|
||||||
ev.stopPropagation();
|
ev.stopPropagation();
|
||||||
const summary = scriptSummary(d) || 'this promote';
|
const summary = scriptSummary(d) || 'this promote';
|
||||||
const msg = `Rollback ${summary} on ${d.servers.length} server(s)?`;
|
if (!confirm(`Rollback ${summary} on ${d.servers.length} server(s)?`)) return;
|
||||||
if (!confirm(msg)) return;
|
|
||||||
rollingBack = d.id;
|
rollingBack = d.id;
|
||||||
flash = null;
|
flash = null;
|
||||||
try {
|
try {
|
||||||
const res = await fetch(`/api/deployments/${d.id}/rollback`, { method: 'POST' });
|
const res = await fetch(`/api/deployments/${d.id}/rollback`, { method: 'POST' });
|
||||||
const body = (await res.json()) as { ok: boolean; error?: string };
|
const body = (await res.json()) as { ok: boolean; error?: string };
|
||||||
if (!body.ok) { flash = body.error ?? 'rollback failed'; return; }
|
if (!body.ok) { flash = body.error ?? 'rollback failed'; return; }
|
||||||
flash = `rollback deployment opened`;
|
flash = 'Rollback deployment opened';
|
||||||
await loadDeployments();
|
await loadDeployments();
|
||||||
} finally {
|
} finally {
|
||||||
rollingBack = null;
|
rollingBack = null;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// History grouped by day for a nice timeline read.
|
||||||
|
let historyByDay = $derived.by(() => {
|
||||||
|
const groups = new Map<string, Deployment[]>();
|
||||||
|
for (const d of history) {
|
||||||
|
const key = new Date(d.started_at).toDateString();
|
||||||
|
if (!groups.has(key)) groups.set(key, []);
|
||||||
|
groups.get(key)!.push(d);
|
||||||
|
}
|
||||||
|
return Array.from(groups.entries());
|
||||||
|
});
|
||||||
|
|
||||||
|
// Drift filtering — spare the operator's eyes on huge fleets.
|
||||||
|
let filteredDriftServers = $derived(
|
||||||
|
drift?.servers.filter((s) =>
|
||||||
|
!driftFilter || s.server.toLowerCase().includes(driftFilter.toLowerCase())
|
||||||
|
) ?? []
|
||||||
|
);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<h1>Deployments</h1>
|
<div class="page">
|
||||||
|
<SectionHeader
|
||||||
|
title="Deployments"
|
||||||
|
subtitle="Fleet-wide script deploys, drift reconciliation, and rollbacks."
|
||||||
|
/>
|
||||||
|
|
||||||
{#if loading}
|
{#if loading}
|
||||||
<p class="empty">loading…</p>
|
<div class="loading">Loading…</div>
|
||||||
{:else}
|
|
||||||
<section class="drift-panel">
|
|
||||||
<div class="drift-head">
|
|
||||||
<h2>Drift{drift ? ` · ${driftCounts.untracked} untracked, ${driftCounts.missing} missing` : ''}</h2>
|
|
||||||
<div class="drift-actions">
|
|
||||||
<button onclick={scanDrift} disabled={scanning || running}>{scanning ? 'scanning…' : 'rescan'}</button>
|
|
||||||
<button class="primary" onclick={runDrift} disabled={running || scanning || !drift || drift.totalDrift === 0}>
|
|
||||||
{running ? 'reconciling…' : 'reconcile drift'}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{#if drift === null}
|
|
||||||
<p class="empty">scan hasn't run yet</p>
|
|
||||||
{:else if drift.totalDrift === 0}
|
|
||||||
<p class="empty">inventory matches disk — no drift</p>
|
|
||||||
{:else}
|
{:else}
|
||||||
{#each drift.servers as s (s.server)}
|
<!-- Drift summary — collapsed by default when there's no problem. -->
|
||||||
|
<Card padding="lg">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="drift-summary"
|
||||||
|
aria-expanded={driftOpen}
|
||||||
|
onclick={() => (driftOpen = !driftOpen)}
|
||||||
|
>
|
||||||
|
<div class="drift-summary-l">
|
||||||
|
<span class="chev" class:open={driftOpen} aria-hidden="true">›</span>
|
||||||
|
<span class="drift-title">Drift</span>
|
||||||
|
{#if drift === null}
|
||||||
|
<Badge variant="neutral" size="sm">Not scanned</Badge>
|
||||||
|
{:else if drift.totalDrift === 0}
|
||||||
|
<Badge variant="online" size="sm">In sync</Badge>
|
||||||
|
{:else}
|
||||||
|
{#if driftCounts.untracked > 0}
|
||||||
|
<Badge variant="danger" size="sm">{driftCounts.untracked} untracked</Badge>
|
||||||
|
{/if}
|
||||||
|
{#if driftCounts.missing > 0}
|
||||||
|
<Badge variant="warning" size="sm">{driftCounts.missing} missing</Badge>
|
||||||
|
{/if}
|
||||||
|
<span class="drift-servers">
|
||||||
|
across {drift.servers.length} server{drift.servers.length === 1 ? '' : 's'}
|
||||||
|
</span>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
<div class="drift-summary-r" onclick={(e) => e.stopPropagation()} role="none">
|
||||||
|
<Button variant="ghost" size="sm" onclick={scanDrift} disabled={scanning || running} loading={scanning}>
|
||||||
|
Rescan
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="danger"
|
||||||
|
size="sm"
|
||||||
|
onclick={runDrift}
|
||||||
|
disabled={running || scanning || !drift || drift.totalDrift === 0}
|
||||||
|
loading={running}
|
||||||
|
>
|
||||||
|
Reconcile
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{#if driftOpen}
|
||||||
|
<div class="drift-body">
|
||||||
|
{#if drift && drift.totalDrift > 0}
|
||||||
|
<input
|
||||||
|
class="drift-filter"
|
||||||
|
type="search"
|
||||||
|
placeholder="Filter by server name…"
|
||||||
|
bind:value={driftFilter}
|
||||||
|
/>
|
||||||
|
{#each filteredDriftServers as s (s.server)}
|
||||||
<div class="drift-server">
|
<div class="drift-server">
|
||||||
<div class="drift-server-head mono">{s.server} · {s.files.length} entr{s.files.length === 1 ? 'y' : 'ies'}</div>
|
<div class="drift-server-head">
|
||||||
|
<span class="server-name">{s.server}</span>
|
||||||
|
<span class="server-count">{s.files.length} entr{s.files.length === 1 ? 'y' : 'ies'}</span>
|
||||||
|
</div>
|
||||||
<div class="drift-files">
|
<div class="drift-files">
|
||||||
{#each s.files as f (f.driftKind + ':' + f.kind + ':' + f.relPath)}
|
{#each s.files as f (f.driftKind + ':' + f.kind + ':' + f.relPath)}
|
||||||
<span
|
<Badge
|
||||||
class="drift-file mono {f.driftKind}"
|
variant={f.driftKind === 'untracked' ? 'danger' : 'warning'}
|
||||||
|
size="sm"
|
||||||
|
mono
|
||||||
title="[{f.kind}] {f.driftKind} · {f.size}B · {f.sha256.slice(0, 12)}"
|
title="[{f.kind}] {f.driftKind} · {f.size}B · {f.sha256.slice(0, 12)}"
|
||||||
>[{f.driftKind === 'missing' ? '+' : '−'} {f.kind}] {f.relPath}</span>
|
>
|
||||||
|
[{f.driftKind === 'missing' ? '+' : '−'} {f.kind}] {f.relPath}
|
||||||
|
</Badge>
|
||||||
{/each}
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{/each}
|
{/each}
|
||||||
{/if}
|
{:else if drift?.totalDrift === 0}
|
||||||
{#if flash}<p class="flash">{flash}</p>{/if}
|
<EmptyState title="Inventory matches disk" description="Nothing to reconcile." />
|
||||||
</section>
|
|
||||||
|
|
||||||
<section>
|
|
||||||
<h2>Active</h2>
|
|
||||||
{#if active.length === 0}
|
|
||||||
<p class="empty">nothing active</p>
|
|
||||||
{:else}
|
{:else}
|
||||||
|
<EmptyState title="Scan hasn't run yet" description="Click Rescan to look for drift." />
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
{#if flash}
|
||||||
|
<div class="flash">{flash}</div>
|
||||||
|
{/if}
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<!-- Active pipelines -->
|
||||||
|
<section class="section">
|
||||||
|
<div class="section-head">
|
||||||
|
<h2>Active</h2>
|
||||||
|
<Badge variant="neutral" size="sm">{active.length}</Badge>
|
||||||
|
</div>
|
||||||
|
{#if active.length === 0}
|
||||||
|
<EmptyState
|
||||||
|
title="Nothing in flight"
|
||||||
|
description="Push scripts or open a beta to see deployments here."
|
||||||
|
/>
|
||||||
|
{:else}
|
||||||
|
<div class="deploy-list">
|
||||||
{#each active as d (d.id)}
|
{#each active as d (d.id)}
|
||||||
{@render deployRow(d)}
|
{@render deployRow(d)}
|
||||||
{/each}
|
{/each}
|
||||||
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section>
|
<!-- History timeline -->
|
||||||
<h2>History (7 days)</h2>
|
<section class="section">
|
||||||
|
<div class="section-head">
|
||||||
|
<h2>History</h2>
|
||||||
|
<Badge variant="neutral" size="sm">{history.length}</Badge>
|
||||||
|
</div>
|
||||||
{#if history.length === 0}
|
{#if history.length === 0}
|
||||||
<p class="empty">no completed deployments in the retention window</p>
|
<EmptyState
|
||||||
|
title="No completed deployments in the retention window"
|
||||||
|
description="Retention is 7 days by default."
|
||||||
|
/>
|
||||||
{:else}
|
{:else}
|
||||||
{#each history as d (d.id)}
|
{#each historyByDay as [day, rows] (day)}
|
||||||
|
<div class="day-group">
|
||||||
|
<div class="day-label">{day}</div>
|
||||||
|
<div class="deploy-list">
|
||||||
|
{#each rows as d (d.id)}
|
||||||
{@render deployRow(d)}
|
{@render deployRow(d)}
|
||||||
{/each}
|
{/each}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/each}
|
||||||
{/if}
|
{/if}
|
||||||
</section>
|
</section>
|
||||||
{/if}
|
{/if}
|
||||||
|
</div>
|
||||||
|
|
||||||
{#snippet deployRow(d: Deployment)}
|
{#snippet deployRow(d: Deployment)}
|
||||||
<a class="row" href="/deployments/{d.id}">
|
<a class="deploy-row" href="/deployments/{d.id}">
|
||||||
<div class="head">
|
<div class="row-head">
|
||||||
<div class="head-l">
|
<div class="row-head-l">
|
||||||
<span class="action">{d.action}</span>
|
<span class="action">{d.action}</span>
|
||||||
{#if d.action === 'promote' || d.action === 'rollback'}
|
{#if d.action === 'promote' || d.action === 'rollback'}
|
||||||
<span class="target mono">{scriptSummary(d)}</span>
|
<span class="target">{scriptSummary(d)}</span>
|
||||||
{/if}
|
{/if}
|
||||||
{#if d.rolled_back_by}
|
{#if d.rolled_back_by}
|
||||||
<span class="tag rb">rolled back</span>
|
<Badge variant="neutral" size="sm">Rolled back</Badge>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
<div class="head-r">
|
<div class="row-head-r">
|
||||||
{#if d.action === 'promote' && !d.rolled_back_by}
|
{#if d.action === 'promote' && !d.rolled_back_by}
|
||||||
<button class="rb-btn" onclick={(e) => rollbackPromote(d, e)} disabled={rollingBack === d.id}>
|
<Button
|
||||||
{rollingBack === d.id ? 'rolling back…' : 'rollback'}
|
variant="danger"
|
||||||
</button>
|
size="sm"
|
||||||
|
onclick={(e) => rollbackPromote(d, e)}
|
||||||
|
disabled={rollingBack === d.id}
|
||||||
|
loading={rollingBack === d.id}
|
||||||
|
>
|
||||||
|
Rollback
|
||||||
|
</Button>
|
||||||
{/if}
|
{/if}
|
||||||
<span class="when">{ago(d.started_at)}</span>
|
<span class="when">{ago(d.started_at)}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="chips">
|
<!-- Mini pipeline visual: one dot per server, colored by state. -->
|
||||||
|
<div class="pipeline" aria-label="Server progress">
|
||||||
{#each d.servers as s (s.server)}
|
{#each d.servers as s (s.server)}
|
||||||
<span class={chipClass(s.restart_state)} title={s.error ?? ''}>
|
<span
|
||||||
{s.server}{s.players !== null && s.players > 0 ? ` (${s.players}p)` : ''}
|
class="node n-{s.restart_state}"
|
||||||
|
title="{s.server}: {s.restart_state}{s.error ? ' — ' + s.error : ''}"
|
||||||
|
>
|
||||||
|
<span class="dot"></span>
|
||||||
|
<span class="node-label">{s.server}{s.players !== null && s.players > 0 ? ` (${s.players}p)` : ''}</span>
|
||||||
</span>
|
</span>
|
||||||
{/each}
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
<div class="id">{d.id}</div>
|
<div class="row-foot">
|
||||||
|
<span class="id">{d.id}</span>
|
||||||
|
<div class="counts">
|
||||||
|
{#each ['done','pending','failed','held','manual'] as state}
|
||||||
|
{@const n = d.servers.filter((s) => s.restart_state === state).length}
|
||||||
|
{#if n > 0}
|
||||||
|
<Badge variant={stateBadgeVariant(state)} size="sm">{n} {state}</Badge>
|
||||||
|
{/if}
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</a>
|
</a>
|
||||||
{/snippet}
|
{/snippet}
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
h1 {
|
.page {
|
||||||
color: var(--cream);
|
display: flex;
|
||||||
font-family: var(--font-display);
|
flex-direction: column;
|
||||||
font-size: var(--text-3xl);
|
gap: var(--space-8);
|
||||||
letter-spacing: var(--tracking-display);
|
|
||||||
line-height: var(--leading-tight);
|
|
||||||
margin: 0 0 28px;
|
|
||||||
}
|
}
|
||||||
h2 {
|
.loading {
|
||||||
margin: var(--gap-section) 0 16px;
|
text-align: center;
|
||||||
font-family: var(--font-body);
|
padding: var(--space-16);
|
||||||
font-size: var(--text-xs);
|
color: var(--text-tertiary);
|
||||||
font-weight: 700;
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 1.5px;
|
|
||||||
color: var(--ink-300);
|
|
||||||
}
|
|
||||||
.row {
|
|
||||||
display: block;
|
|
||||||
background: var(--bg-nav);
|
|
||||||
border: 1px solid var(--border);
|
|
||||||
border-radius: var(--r-md);
|
|
||||||
padding: 18px 20px;
|
|
||||||
margin-bottom: 12px;
|
|
||||||
color: var(--ink-100);
|
|
||||||
text-decoration: none;
|
|
||||||
transition: border-color 0.15s, box-shadow 0.15s;
|
|
||||||
}
|
|
||||||
.row:hover { border-color: var(--accent); box-shadow: var(--accent-glow); }
|
|
||||||
.head { display: flex; justify-content: space-between; margin-bottom: 10px; align-items: center; gap: 12px; }
|
|
||||||
.head-l { display: flex; gap: 10px; align-items: baseline; }
|
|
||||||
.head-r { display: flex; gap: 10px; align-items: center; }
|
|
||||||
.action { font-family: var(--font-mono); font-size: var(--text-md); color: var(--cream); }
|
|
||||||
.target { color: var(--spark-500); font-size: var(--text-mono); }
|
|
||||||
.when { color: var(--ink-500); font-size: var(--text-mono); font-family: var(--font-mono); }
|
|
||||||
.tag { padding: 2px 8px; border-radius: var(--r-sm); font-family: var(--font-mono); font-size: var(--text-xs); border: 1px solid transparent; }
|
|
||||||
.tag.rb { background: var(--bg-card); border-color: var(--border); color: var(--ink-500); }
|
|
||||||
.rb-btn {
|
|
||||||
background: var(--bg-nav);
|
|
||||||
border: 1px solid rgba(255, 48, 80, 0.4);
|
|
||||||
color: var(--danger-500);
|
|
||||||
border-radius: var(--r-sm);
|
|
||||||
padding: 6px 12px;
|
|
||||||
font-family: var(--font-body);
|
|
||||||
font-size: var(--text-xs);
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.rb-btn:hover:not(:disabled) { border-color: var(--danger-500); }
|
|
||||||
.rb-btn:disabled { opacity: 0.5; cursor: default; }
|
|
||||||
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
|
|
||||||
.chip {
|
|
||||||
padding: 3px 9px;
|
|
||||||
border-radius: var(--r-sm);
|
|
||||||
font-size: var(--text-mono-sm);
|
|
||||||
font-family: var(--font-mono);
|
|
||||||
border: 1px solid transparent;
|
|
||||||
}
|
|
||||||
.chip-done {
|
|
||||||
background: rgba(124, 212, 255, 0.10);
|
|
||||||
border-color: rgba(124, 212, 255, 0.3);
|
|
||||||
color: var(--spark-500);
|
|
||||||
}
|
|
||||||
.chip-failed {
|
|
||||||
background: rgba(255, 48, 80, 0.1);
|
|
||||||
border-color: rgba(255, 48, 80, 0.3);
|
|
||||||
color: var(--danger-500);
|
|
||||||
}
|
|
||||||
.chip-pending {
|
|
||||||
background: rgba(255, 176, 32, 0.1);
|
|
||||||
border-color: rgba(255, 176, 32, 0.3);
|
|
||||||
color: var(--amber-500);
|
|
||||||
}
|
|
||||||
.chip-held {
|
|
||||||
background: rgba(124, 192, 245, 0.10);
|
|
||||||
border-color: rgba(124, 192, 245, 0.28);
|
|
||||||
color: var(--cream);
|
|
||||||
}
|
|
||||||
.chip-manual {
|
|
||||||
background: var(--bg-nav);
|
|
||||||
border-color: var(--border);
|
|
||||||
color: var(--ink-500);
|
|
||||||
}
|
|
||||||
.id {
|
|
||||||
color: var(--ink-700);
|
|
||||||
font-family: var(--font-mono);
|
|
||||||
font-size: var(--text-mono-sm);
|
|
||||||
}
|
|
||||||
.empty {
|
|
||||||
color: var(--ink-500);
|
|
||||||
font-family: var(--font-mono);
|
|
||||||
font-size: var(--text-base);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.drift-panel {
|
/* Drift summary bar */
|
||||||
background: var(--bg-nav);
|
.drift-summary {
|
||||||
border: 1px solid var(--border);
|
display: flex;
|
||||||
border-radius: var(--r-md);
|
align-items: center;
|
||||||
padding: var(--pad-panel);
|
justify-content: space-between;
|
||||||
margin-bottom: var(--gap-section);
|
gap: var(--space-3);
|
||||||
|
width: 100%;
|
||||||
|
padding: 0;
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
color: inherit;
|
||||||
|
text-align: left;
|
||||||
|
font: inherit;
|
||||||
}
|
}
|
||||||
.drift-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; }
|
.drift-summary:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-md); }
|
||||||
.drift-head h2 { margin: 0; }
|
.drift-summary-l {
|
||||||
.drift-actions { display: flex; gap: 8px; }
|
display: flex;
|
||||||
.drift-actions button {
|
align-items: center;
|
||||||
background: var(--bg-card);
|
gap: var(--space-3);
|
||||||
color: var(--ink-100);
|
min-width: 0;
|
||||||
border: 1px solid var(--border);
|
flex-wrap: wrap;
|
||||||
border-radius: var(--r-sm);
|
}
|
||||||
padding: 8px 16px;
|
.drift-summary-r {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--space-2);
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
.drift-title {
|
||||||
|
font-size: var(--text-md);
|
||||||
|
font-weight: var(--weight-semibold);
|
||||||
|
color: var(--text-primary);
|
||||||
|
}
|
||||||
|
.drift-servers {
|
||||||
|
font-size: var(--text-sm);
|
||||||
|
color: var(--text-tertiary);
|
||||||
|
}
|
||||||
|
.chev {
|
||||||
|
color: var(--text-tertiary);
|
||||||
|
font-size: var(--text-lg);
|
||||||
|
line-height: 1;
|
||||||
|
transition: transform var(--dur-base) var(--ease-standard);
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
.chev.open { transform: rotate(90deg); }
|
||||||
|
|
||||||
|
.drift-body {
|
||||||
|
margin-top: var(--space-5);
|
||||||
|
padding-top: var(--space-5);
|
||||||
|
border-top: 1px solid var(--border-subtle);
|
||||||
|
}
|
||||||
|
.drift-filter {
|
||||||
|
width: 100%;
|
||||||
|
padding: var(--space-3) var(--space-4);
|
||||||
|
margin-bottom: var(--space-4);
|
||||||
|
background: var(--surface-sunken);
|
||||||
|
border: 1px solid var(--border-subtle);
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
color: var(--text-primary);
|
||||||
font-family: var(--font-body);
|
font-family: var(--font-body);
|
||||||
font-size: var(--text-sm);
|
font-size: var(--text-sm);
|
||||||
cursor: pointer;
|
transition: border-color var(--dur-fast) var(--ease-standard);
|
||||||
}
|
}
|
||||||
.drift-actions button:hover:not(:disabled) { border-color: var(--accent); box-shadow: var(--accent-glow); }
|
.drift-filter:focus {
|
||||||
.drift-actions button.primary {
|
outline: none;
|
||||||
background: linear-gradient(180deg, var(--danger-500), #a01e39);
|
border-color: var(--accent-primary);
|
||||||
border-color: rgba(255, 48, 80, 0.6);
|
|
||||||
color: var(--cream);
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
}
|
||||||
.drift-actions button:disabled { opacity: 0.4; cursor: default; }
|
|
||||||
.drift-server {
|
.drift-server {
|
||||||
background: var(--bg-card);
|
padding: var(--space-3) var(--space-4);
|
||||||
border: 1px solid var(--border);
|
margin: var(--space-2) 0;
|
||||||
border-radius: var(--r-sm);
|
background: var(--surface-sunken);
|
||||||
padding: 10px 14px;
|
border: 1px solid var(--border-subtle);
|
||||||
margin: 8px 0;
|
border-radius: var(--radius-md);
|
||||||
}
|
}
|
||||||
.drift-server-head { color: var(--cream); font-size: var(--text-mono); margin-bottom: 6px; }
|
.drift-server-head {
|
||||||
.drift-files { display: flex; flex-wrap: wrap; gap: 6px; }
|
display: flex;
|
||||||
.drift-file {
|
justify-content: space-between;
|
||||||
|
align-items: baseline;
|
||||||
|
margin-bottom: var(--space-2);
|
||||||
|
font-family: var(--font-mono);
|
||||||
|
font-size: var(--text-sm);
|
||||||
|
}
|
||||||
|
.server-name { color: var(--text-primary); }
|
||||||
|
.server-count { color: var(--text-tertiary); font-size: var(--text-xs); }
|
||||||
|
.drift-files {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: var(--space-1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.flash {
|
||||||
|
margin-top: var(--space-3);
|
||||||
|
padding: var(--space-3) var(--space-4);
|
||||||
|
background: rgba(124, 212, 255, 0.06);
|
||||||
|
border: 1px solid rgba(124, 212, 255, 0.22);
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
color: var(--state-online);
|
||||||
|
font-size: var(--text-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Sections */
|
||||||
|
.section {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: var(--space-3);
|
||||||
|
}
|
||||||
|
.section-head {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--space-3);
|
||||||
|
}
|
||||||
|
.section-head h2 {
|
||||||
|
margin: 0;
|
||||||
|
font-family: var(--font-body);
|
||||||
|
font-size: var(--text-md);
|
||||||
|
font-weight: var(--weight-semibold);
|
||||||
|
color: var(--text-primary);
|
||||||
|
letter-spacing: var(--tracking-tight);
|
||||||
|
}
|
||||||
|
|
||||||
|
.day-group {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: var(--space-2);
|
||||||
|
margin-top: var(--space-4);
|
||||||
|
}
|
||||||
|
.day-label {
|
||||||
|
font-size: var(--text-xs);
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: var(--tracking-label);
|
||||||
|
color: var(--text-tertiary);
|
||||||
|
font-weight: var(--weight-semibold);
|
||||||
|
}
|
||||||
|
|
||||||
|
.deploy-list {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: var(--space-2);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Deployment rows */
|
||||||
|
.deploy-row {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: var(--space-3);
|
||||||
|
padding: var(--space-4) var(--space-5);
|
||||||
|
background: color-mix(in oklab, var(--surface) 88%, transparent);
|
||||||
|
border: 1px solid var(--border-subtle);
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
color: var(--text-primary);
|
||||||
|
text-decoration: none;
|
||||||
|
transition:
|
||||||
|
background-color var(--dur-fast) var(--ease-standard),
|
||||||
|
border-color var(--dur-fast) var(--ease-standard);
|
||||||
|
}
|
||||||
|
.deploy-row:hover {
|
||||||
|
background: var(--surface-raised);
|
||||||
|
border-color: var(--border-strong);
|
||||||
|
}
|
||||||
|
.deploy-row:focus-visible { outline: none; box-shadow: var(--focus-ring); }
|
||||||
|
|
||||||
|
.row-head {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--space-3);
|
||||||
|
}
|
||||||
|
.row-head-l {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--space-3);
|
||||||
|
flex-wrap: wrap;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
.row-head-r {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--space-3);
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
.action {
|
||||||
|
font-family: var(--font-body);
|
||||||
|
font-size: var(--text-md);
|
||||||
|
font-weight: var(--weight-semibold);
|
||||||
|
color: var(--text-primary);
|
||||||
|
}
|
||||||
|
.target {
|
||||||
|
font-family: var(--font-mono);
|
||||||
|
font-size: var(--text-sm);
|
||||||
|
color: var(--text-secondary);
|
||||||
|
}
|
||||||
|
.when {
|
||||||
|
font-family: var(--font-mono);
|
||||||
|
font-size: var(--text-xs);
|
||||||
|
color: var(--text-tertiary);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Pipeline visual */
|
||||||
|
.pipeline {
|
||||||
|
display: flex;
|
||||||
|
gap: var(--space-2);
|
||||||
|
flex-wrap: wrap;
|
||||||
|
padding: var(--space-2) 0;
|
||||||
|
}
|
||||||
|
.node {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--space-1);
|
||||||
padding: 3px 8px;
|
padding: 3px 8px;
|
||||||
border-radius: var(--r-sm);
|
border-radius: var(--radius-pill);
|
||||||
font-size: var(--text-mono-sm);
|
font-family: var(--font-mono);
|
||||||
border: 1px solid transparent;
|
font-size: var(--text-xs);
|
||||||
|
color: var(--text-secondary);
|
||||||
|
background: var(--surface-sunken);
|
||||||
}
|
}
|
||||||
.drift-file.untracked {
|
.node .dot {
|
||||||
background: rgba(255, 48, 80, 0.08);
|
width: 6px;
|
||||||
border-color: rgba(255, 48, 80, 0.25);
|
height: 6px;
|
||||||
color: var(--danger-500);
|
border-radius: 50%;
|
||||||
|
background: var(--text-quaternary);
|
||||||
}
|
}
|
||||||
.drift-file.missing {
|
.n-done .dot { background: var(--state-online); }
|
||||||
background: rgba(255, 176, 32, 0.08);
|
.n-pending .dot { background: var(--state-warning); }
|
||||||
border-color: rgba(255, 176, 32, 0.3);
|
.n-failed .dot { background: var(--state-danger); }
|
||||||
color: var(--amber-500);
|
.n-held .dot { background: var(--blue-300); }
|
||||||
|
.n-manual .dot { background: var(--text-tertiary); }
|
||||||
|
.node-label { color: var(--text-secondary); }
|
||||||
|
|
||||||
|
.row-foot {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--space-3);
|
||||||
|
padding-top: var(--space-2);
|
||||||
|
border-top: 1px solid var(--border-subtle);
|
||||||
|
}
|
||||||
|
.id {
|
||||||
|
font-family: var(--font-mono);
|
||||||
|
font-size: var(--text-xs);
|
||||||
|
color: var(--text-quaternary);
|
||||||
|
}
|
||||||
|
.counts {
|
||||||
|
display: flex;
|
||||||
|
gap: var(--space-1);
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 640px) {
|
||||||
|
.row-head, .row-foot { flex-direction: column; align-items: flex-start; }
|
||||||
|
.drift-summary { flex-direction: column; align-items: flex-start; }
|
||||||
|
.drift-summary-r { width: 100%; justify-content: flex-end; }
|
||||||
}
|
}
|
||||||
.flash { color: var(--spark-400); font-family: var(--font-mono); font-size: var(--text-mono); margin-top: 12px; }
|
|
||||||
.mono { font-family: var(--font-mono); }
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -2,35 +2,28 @@
|
|||||||
import { onMount, onDestroy } from 'svelte';
|
import { onMount, onDestroy } from 'svelte';
|
||||||
import { page } from '$app/stores';
|
import { page } from '$app/stores';
|
||||||
import DiffViewer from '$ui/components/DiffViewer.svelte';
|
import DiffViewer from '$ui/components/DiffViewer.svelte';
|
||||||
|
import Card from '$ui/components/primitives/Card.svelte';
|
||||||
|
import Badge from '$ui/components/primitives/Badge.svelte';
|
||||||
|
import Button from '$ui/components/primitives/Button.svelte';
|
||||||
|
import SectionHeader from '$ui/components/primitives/SectionHeader.svelte';
|
||||||
|
import Breadcrumbs from '$ui/components/primitives/Breadcrumbs.svelte';
|
||||||
|
import EmptyState from '$ui/components/primitives/EmptyState.svelte';
|
||||||
|
|
||||||
interface FileRow {
|
interface FileRow {
|
||||||
id: number;
|
id: number; server: string; verb: string; rel_path: string;
|
||||||
server: string;
|
sha256_before: string | null; sha256_after: string | null;
|
||||||
verb: string;
|
size_before: number | null; size_after: number | null;
|
||||||
rel_path: string;
|
|
||||||
sha256_before: string | null;
|
|
||||||
sha256_after: string | null;
|
|
||||||
size_before: number | null;
|
|
||||||
size_after: number | null;
|
|
||||||
}
|
}
|
||||||
interface ServerRow {
|
interface ServerRow {
|
||||||
deployment_id: string;
|
deployment_id: string; server: string; files_changed: number;
|
||||||
server: string;
|
restart_state: string; players: number | null;
|
||||||
files_changed: number;
|
checked_at: string | null; restarted_at: string | null;
|
||||||
restart_state: string;
|
attempts: number; error: string | null;
|
||||||
players: number | null;
|
|
||||||
checked_at: string | null;
|
|
||||||
restarted_at: string | null;
|
|
||||||
attempts: number;
|
|
||||||
error: string | null;
|
|
||||||
}
|
}
|
||||||
interface Detail {
|
interface Detail {
|
||||||
deployment: {
|
deployment: {
|
||||||
id: string;
|
id: string; action: string; started_at: string;
|
||||||
action: string;
|
finished_at: string | null; triggered_by: string | null;
|
||||||
started_at: string;
|
|
||||||
finished_at: string | null;
|
|
||||||
triggered_by: string | null;
|
|
||||||
};
|
};
|
||||||
servers: ServerRow[];
|
servers: ServerRow[];
|
||||||
files: FileRow[];
|
files: FileRow[];
|
||||||
@@ -60,8 +53,7 @@
|
|||||||
openFile = { id: f.id, ...body };
|
openFile = { id: f.id, ...body };
|
||||||
}
|
}
|
||||||
|
|
||||||
// Group files by server for the layout
|
let byServer = $derived.by(() => {
|
||||||
let byServer = $derived(() => {
|
|
||||||
if (!detail) return new Map<string, FileRow[]>();
|
if (!detail) return new Map<string, FileRow[]>();
|
||||||
const m = new Map<string, FileRow[]>();
|
const m = new Map<string, FileRow[]>();
|
||||||
for (const f of detail.files) {
|
for (const f of detail.files) {
|
||||||
@@ -70,203 +62,295 @@
|
|||||||
}
|
}
|
||||||
return m;
|
return m;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
function stateVariant(s: string): 'online' | 'danger' | 'warning' | 'info' | 'neutral' {
|
||||||
|
return s === 'done' ? 'online' :
|
||||||
|
s === 'failed' ? 'danger' :
|
||||||
|
s === 'pending' ? 'warning' :
|
||||||
|
s === 'held' ? 'info' :
|
||||||
|
'neutral';
|
||||||
|
}
|
||||||
|
function verbVariant(v: string): 'online' | 'info' | 'danger' | 'warning' | 'neutral' {
|
||||||
|
return v === 'added' ? 'online' :
|
||||||
|
v === 'updated' ? 'info' :
|
||||||
|
v === 'removed' ? 'danger' :
|
||||||
|
v === 'held' ? 'warning' :
|
||||||
|
'neutral';
|
||||||
|
}
|
||||||
|
function fmt(iso: string | null): string {
|
||||||
|
if (!iso) return '—';
|
||||||
|
const d = new Date(iso);
|
||||||
|
return d.toLocaleString(undefined, {
|
||||||
|
month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit', second: '2-digit'
|
||||||
|
});
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
{#if detail}
|
{#if detail}
|
||||||
<h1>{detail.deployment.action}</h1>
|
{@const action = detail.deployment.action}
|
||||||
<p class="meta">
|
<div class="page">
|
||||||
started {detail.deployment.started_at}
|
<SectionHeader title={action} subtitle={detail.deployment.id}>
|
||||||
{#if detail.deployment.finished_at} · finished {detail.deployment.finished_at}{/if}
|
{#snippet crumbs()}
|
||||||
· <code>{detail.deployment.id}</code>
|
<Breadcrumbs items={[
|
||||||
</p>
|
{ label: 'Deployments', href: '/deployments' },
|
||||||
|
{ label: action }
|
||||||
|
]} />
|
||||||
|
{/snippet}
|
||||||
|
</SectionHeader>
|
||||||
|
|
||||||
|
<Card padding="lg">
|
||||||
|
<div class="meta-grid">
|
||||||
|
<div class="kv"><span class="k">Started</span><span class="v mono">{fmt(detail.deployment.started_at)}</span></div>
|
||||||
|
<div class="kv"><span class="k">Finished</span><span class="v mono">{fmt(detail.deployment.finished_at)}</span></div>
|
||||||
|
<div class="kv"><span class="k">Triggered by</span><span class="v mono">{detail.deployment.triggered_by ?? '—'}</span></div>
|
||||||
|
<div class="kv"><span class="k">Servers</span><span class="v mono">{detail.servers.length}</span></div>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<section class="section">
|
||||||
|
<div class="section-head">
|
||||||
<h2>Servers</h2>
|
<h2>Servers</h2>
|
||||||
<div class="server-grid">
|
<Badge variant="neutral" size="sm">{detail.servers.length}</Badge>
|
||||||
|
</div>
|
||||||
|
<div class="server-list">
|
||||||
{#each detail.servers as s (s.server)}
|
{#each detail.servers as s (s.server)}
|
||||||
<div class="srv srv-{s.restart_state}">
|
<div class="srv-row">
|
||||||
<div class="name">{s.server}</div>
|
<div class="srv-l">
|
||||||
<div class="line">state: {s.restart_state}</div>
|
<a class="srv-name" href="/servers/{s.server}">{s.server}</a>
|
||||||
{#if s.players !== null}<div class="line">players: {s.players}</div>{/if}
|
{#if s.error}
|
||||||
{#if s.error}<div class="line err">{s.error}</div>{/if}
|
<span class="err">{s.error}</span>
|
||||||
{#if s.restarted_at}<div class="line dim">restarted {s.restarted_at}</div>{/if}
|
{/if}
|
||||||
<div class="line dim">attempts: {s.attempts}</div>
|
</div>
|
||||||
|
<div class="srv-r">
|
||||||
|
<Badge variant={stateVariant(s.restart_state)} size="sm" uppercase>{s.restart_state}</Badge>
|
||||||
|
{#if s.players !== null && s.players > 0}
|
||||||
|
<span class="players">{s.players}p</span>
|
||||||
|
{/if}
|
||||||
|
<span class="attempts">{s.attempts} attempt{s.attempts === 1 ? '' : 's'}</span>
|
||||||
|
{#if s.restarted_at}
|
||||||
|
<span class="when">restarted {fmt(s.restarted_at)}</span>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{/each}
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="section">
|
||||||
|
<div class="section-head">
|
||||||
<h2>Files</h2>
|
<h2>Files</h2>
|
||||||
{#each [...byServer().entries()] as [srv, files] (srv)}
|
<Badge variant="neutral" size="sm">{detail.files.length}</Badge>
|
||||||
|
</div>
|
||||||
|
{#if detail.files.length === 0}
|
||||||
|
<EmptyState title="No file changes recorded" description="This deployment didn't touch any tracked artifacts." />
|
||||||
|
{:else}
|
||||||
|
{#each [...byServer.entries()] as [srv, files] (srv)}
|
||||||
<div class="file-group">
|
<div class="file-group">
|
||||||
<h3>{srv}</h3>
|
<h3>{srv}</h3>
|
||||||
|
<div class="file-rows">
|
||||||
{#each files as f (f.id)}
|
{#each files as f (f.id)}
|
||||||
<button class="file-row" onclick={() => loadDiff(f)}>
|
<button class="file-row" onclick={() => loadDiff(f)}>
|
||||||
<span class="verb verb-{f.verb}">{f.verb}</span>
|
<Badge variant={verbVariant(f.verb)} size="sm" uppercase>{f.verb}</Badge>
|
||||||
<code>{f.rel_path}</code>
|
<span class="path">{f.rel_path}</span>
|
||||||
<span class="sizes">
|
<span class="sizes">
|
||||||
{#if f.size_before !== null}{f.size_before}b{/if}
|
{#if f.size_before !== null}{f.size_before} B{/if}
|
||||||
{#if f.size_before !== null && f.size_after !== null} → {/if}
|
{#if f.size_before !== null && f.size_after !== null} → {/if}
|
||||||
{#if f.size_after !== null}{f.size_after}b{/if}
|
{#if f.size_after !== null}{f.size_after} B{/if}
|
||||||
</span>
|
</span>
|
||||||
</button>
|
</button>
|
||||||
{/each}
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
{/each}
|
{/each}
|
||||||
|
{/if}
|
||||||
|
</section>
|
||||||
|
|
||||||
{#if openFile}
|
{#if openFile}
|
||||||
<div class="diff-scrim" onclick={() => (openFile = null)} onkeydown={(e) => { if (e.key === 'Escape') openFile = null; }} role="button" tabindex="-1">
|
<div
|
||||||
|
class="diff-scrim"
|
||||||
|
onclick={() => (openFile = null)}
|
||||||
|
onkeydown={(e) => { if (e.key === 'Escape') openFile = null; }}
|
||||||
|
role="button"
|
||||||
|
tabindex="-1"
|
||||||
|
aria-label="Close diff"
|
||||||
|
>
|
||||||
<div class="diff-modal" onclick={(e) => e.stopPropagation()} role="none">
|
<div class="diff-modal" onclick={(e) => e.stopPropagation()} role="none">
|
||||||
<button class="close" onclick={() => (openFile = null)}>close</button>
|
<div class="diff-head">
|
||||||
<DiffViewer before={openFile.before} after={openFile.after} verb={openFile.verb} relPath={openFile.relPath} />
|
<span class="diff-title">{openFile.relPath}</span>
|
||||||
|
<Button variant="ghost" size="sm" onclick={() => (openFile = null)}>Close</Button>
|
||||||
|
</div>
|
||||||
|
<DiffViewer
|
||||||
|
before={openFile.before}
|
||||||
|
after={openFile.after}
|
||||||
|
verb={openFile.verb}
|
||||||
|
relPath={openFile.relPath}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
</div>
|
||||||
{:else}
|
{:else}
|
||||||
<p class="empty">loading…</p>
|
<div class="loading">Loading…</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
h1 {
|
.page {
|
||||||
color: var(--cream);
|
display: flex;
|
||||||
font-family: var(--font-display);
|
flex-direction: column;
|
||||||
font-size: var(--text-2xl);
|
gap: var(--space-8);
|
||||||
letter-spacing: 1.5px;
|
|
||||||
line-height: var(--leading-tight);
|
|
||||||
margin: 0 0 8px;
|
|
||||||
}
|
}
|
||||||
h2 {
|
.loading {
|
||||||
margin: var(--gap-section) 0 14px;
|
text-align: center;
|
||||||
font-family: var(--font-body);
|
padding: var(--space-16);
|
||||||
font-size: var(--text-xs);
|
color: var(--text-tertiary);
|
||||||
font-weight: 700;
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 1.5px;
|
|
||||||
color: var(--ink-300);
|
|
||||||
}
|
}
|
||||||
h3 {
|
|
||||||
margin: 18px 0 8px;
|
.meta-grid {
|
||||||
font-size: var(--text-md);
|
|
||||||
color: var(--cream);
|
|
||||||
font-family: var(--font-mono);
|
|
||||||
}
|
|
||||||
.meta {
|
|
||||||
color: var(--ink-500);
|
|
||||||
font-size: var(--text-mono);
|
|
||||||
margin: 0 0 28px;
|
|
||||||
font-family: var(--font-mono);
|
|
||||||
}
|
|
||||||
.server-grid {
|
|
||||||
display: grid;
|
display: grid;
|
||||||
gap: 14px;
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||||
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
|
gap: var(--space-2);
|
||||||
}
|
}
|
||||||
.srv {
|
.kv {
|
||||||
background: var(--bg-nav);
|
display: flex;
|
||||||
border: 1px solid var(--border);
|
flex-direction: column;
|
||||||
border-radius: var(--r-sm);
|
gap: 2px;
|
||||||
padding: 16px;
|
padding: var(--space-3) var(--space-4);
|
||||||
|
background: var(--surface-sunken);
|
||||||
|
border: 1px solid var(--border-subtle);
|
||||||
|
border-radius: var(--radius-md);
|
||||||
}
|
}
|
||||||
.srv-done { border-color: rgba(124, 212, 255, 0.35); }
|
.kv .k {
|
||||||
.srv-failed { border-color: rgba(255, 48, 80, 0.35); }
|
font-size: var(--text-xs);
|
||||||
.srv-pending { border-color: rgba(255, 176, 32, 0.35); }
|
text-transform: uppercase;
|
||||||
.srv-held { border-color: rgba(124, 192, 245, 0.3); }
|
letter-spacing: var(--tracking-label);
|
||||||
.srv-manual { border-color: var(--ink-500); }
|
color: var(--text-tertiary);
|
||||||
.name {
|
font-weight: var(--weight-semibold);
|
||||||
font-weight: 600;
|
}
|
||||||
margin-bottom: 8px;
|
.kv .v { font-size: var(--text-sm); color: var(--text-primary); }
|
||||||
color: var(--cream);
|
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
|
||||||
|
|
||||||
|
.section { display: flex; flex-direction: column; gap: var(--space-3); }
|
||||||
|
.section-head {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--space-3);
|
||||||
|
}
|
||||||
|
.section-head h2 {
|
||||||
|
margin: 0;
|
||||||
|
font-family: var(--font-body);
|
||||||
font-size: var(--text-md);
|
font-size: var(--text-md);
|
||||||
|
font-weight: var(--weight-semibold);
|
||||||
|
color: var(--text-primary);
|
||||||
}
|
}
|
||||||
.line { font-size: var(--text-mono); color: var(--ink-300); font-family: var(--font-mono); line-height: var(--leading-mono); }
|
|
||||||
.line.dim { color: var(--ink-500); }
|
.server-list { display: flex; flex-direction: column; gap: var(--space-2); }
|
||||||
.line.err { color: var(--danger-500); }
|
.srv-row {
|
||||||
.file-group { margin-bottom: 20px; }
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--space-4);
|
||||||
|
padding: var(--space-3) var(--space-4);
|
||||||
|
background: color-mix(in oklab, var(--surface) 88%, transparent);
|
||||||
|
border: 1px solid var(--border-subtle);
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
}
|
||||||
|
.srv-l { display: flex; align-items: baseline; gap: var(--space-3); min-width: 0; }
|
||||||
|
.srv-r { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
|
||||||
|
.srv-name {
|
||||||
|
font-family: var(--font-body);
|
||||||
|
font-weight: var(--weight-semibold);
|
||||||
|
font-size: var(--text-sm);
|
||||||
|
color: var(--text-primary);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.srv-name:hover { color: var(--accent-primary-hover); }
|
||||||
|
.err { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--state-danger); }
|
||||||
|
.players { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--state-online); }
|
||||||
|
.attempts, .when {
|
||||||
|
font-family: var(--font-mono);
|
||||||
|
font-size: var(--text-xs);
|
||||||
|
color: var(--text-tertiary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-group {
|
||||||
|
margin-top: var(--space-4);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: var(--space-2);
|
||||||
|
}
|
||||||
|
.file-group h3 {
|
||||||
|
margin: 0;
|
||||||
|
font-family: var(--font-mono);
|
||||||
|
font-size: var(--text-sm);
|
||||||
|
color: var(--text-secondary);
|
||||||
|
font-weight: var(--weight-medium);
|
||||||
|
}
|
||||||
|
.file-rows { display: flex; flex-direction: column; gap: 2px; }
|
||||||
.file-row {
|
.file-row {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 12px;
|
gap: var(--space-3);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background: var(--bg-nav);
|
text-align: left;
|
||||||
border: 1px solid var(--border);
|
padding: var(--space-2) var(--space-3);
|
||||||
border-radius: var(--r-sm);
|
background: transparent;
|
||||||
padding: 8px 12px;
|
border: 1px solid var(--border-subtle);
|
||||||
margin: 4px 0;
|
border-radius: var(--radius-md);
|
||||||
color: var(--ink-100);
|
color: var(--text-primary);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
font: inherit;
|
font: inherit;
|
||||||
text-align: left;
|
transition: background-color var(--dur-fast) var(--ease-standard);
|
||||||
transition: border-color 0.15s;
|
|
||||||
}
|
}
|
||||||
.file-row:hover { border-color: var(--accent); }
|
.file-row:hover { background: var(--surface-raised); }
|
||||||
.verb {
|
.file-row:focus-visible { outline: none; box-shadow: var(--focus-ring); }
|
||||||
padding: 3px 9px;
|
.path {
|
||||||
border-radius: var(--r-sm);
|
|
||||||
font-size: var(--text-xs);
|
|
||||||
font-family: var(--font-mono);
|
font-family: var(--font-mono);
|
||||||
text-transform: uppercase;
|
font-size: var(--text-sm);
|
||||||
letter-spacing: 0.8px;
|
color: var(--text-primary);
|
||||||
border: 1px solid transparent;
|
word-break: break-all;
|
||||||
}
|
|
||||||
.verb-added {
|
|
||||||
background: rgba(124, 212, 255, 0.10);
|
|
||||||
border-color: rgba(124, 212, 255, 0.3);
|
|
||||||
color: var(--spark-500);
|
|
||||||
}
|
|
||||||
.verb-updated {
|
|
||||||
background: rgba(124, 192, 245, 0.10);
|
|
||||||
border-color: rgba(124, 192, 245, 0.28);
|
|
||||||
color: var(--cream);
|
|
||||||
}
|
|
||||||
.verb-removed {
|
|
||||||
background: rgba(255, 48, 80, 0.1);
|
|
||||||
border-color: rgba(255, 48, 80, 0.3);
|
|
||||||
color: var(--danger-500);
|
|
||||||
}
|
|
||||||
.verb-held {
|
|
||||||
background: rgba(255, 176, 32, 0.1);
|
|
||||||
border-color: rgba(255, 176, 32, 0.3);
|
|
||||||
color: var(--amber-500);
|
|
||||||
}
|
}
|
||||||
.sizes {
|
.sizes {
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
color: var(--ink-500);
|
|
||||||
font-size: var(--text-mono-sm);
|
|
||||||
font-family: var(--font-mono);
|
font-family: var(--font-mono);
|
||||||
|
font-size: var(--text-xs);
|
||||||
|
color: var(--text-tertiary);
|
||||||
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
code { font-family: var(--font-mono); color: var(--ink-100); font-size: var(--text-mono); }
|
|
||||||
.empty {
|
/* Diff modal */
|
||||||
color: var(--ink-500);
|
|
||||||
font-family: var(--font-mono);
|
|
||||||
font-size: var(--text-base);
|
|
||||||
}
|
|
||||||
.diff-scrim {
|
.diff-scrim {
|
||||||
position: fixed; inset: 0;
|
position: fixed;
|
||||||
background: rgba(6, 11, 22, 0.85);
|
inset: 0;
|
||||||
|
background: rgba(0, 0, 0, 0.6);
|
||||||
z-index: 100;
|
z-index: 100;
|
||||||
display: grid;
|
display: grid;
|
||||||
place-items: center;
|
place-items: center;
|
||||||
backdrop-filter: blur(4px);
|
backdrop-filter: blur(8px);
|
||||||
|
-webkit-backdrop-filter: blur(8px);
|
||||||
}
|
}
|
||||||
.diff-modal {
|
.diff-modal {
|
||||||
max-width: 1000px;
|
width: min(1000px, 92vw);
|
||||||
width: 92%;
|
|
||||||
max-height: 92vh;
|
max-height: 92vh;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
background: var(--bg-nav);
|
background: var(--surface);
|
||||||
border: 1px solid var(--border);
|
border: 1px solid var(--border-strong);
|
||||||
border-radius: var(--r-md);
|
border-radius: var(--radius-lg);
|
||||||
padding: var(--pad-panel);
|
padding: var(--space-6);
|
||||||
box-shadow: var(--shadow-panel);
|
box-shadow: var(--shadow-raised);
|
||||||
}
|
}
|
||||||
.close {
|
.diff-head {
|
||||||
float: right;
|
display: flex;
|
||||||
background: var(--bg-card);
|
justify-content: space-between;
|
||||||
color: var(--ink-100);
|
align-items: center;
|
||||||
border: 1px solid var(--border);
|
gap: var(--space-3);
|
||||||
border-radius: var(--r-sm);
|
margin-bottom: var(--space-4);
|
||||||
padding: 6px 14px;
|
padding-bottom: var(--space-3);
|
||||||
font-family: var(--font-body);
|
border-bottom: 1px solid var(--border-subtle);
|
||||||
|
}
|
||||||
|
.diff-title {
|
||||||
|
font-family: var(--font-mono);
|
||||||
font-size: var(--text-sm);
|
font-size: var(--text-sm);
|
||||||
cursor: pointer;
|
color: var(--text-primary);
|
||||||
|
word-break: break-all;
|
||||||
}
|
}
|
||||||
.close:hover { border-color: var(--accent); box-shadow: var(--accent-glow); }
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
+145
-128
@@ -1,8 +1,15 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { onMount } from 'svelte';
|
import { onMount } from 'svelte';
|
||||||
|
import Card from '$ui/components/primitives/Card.svelte';
|
||||||
|
import Badge from '$ui/components/primitives/Badge.svelte';
|
||||||
|
import Button from '$ui/components/primitives/Button.svelte';
|
||||||
|
import SectionHeader from '$ui/components/primitives/SectionHeader.svelte';
|
||||||
|
import EmptyState from '$ui/components/primitives/EmptyState.svelte';
|
||||||
|
import Field from '$ui/components/primitives/Field.svelte';
|
||||||
|
import Input from '$ui/components/primitives/Input.svelte';
|
||||||
|
import Select from '$ui/components/primitives/Select.svelte';
|
||||||
|
|
||||||
type ArtifactKind = 'script' | 'config' | 'plugin' | 'baseline';
|
type ArtifactKind = 'script' | 'config' | 'plugin' | 'baseline';
|
||||||
|
|
||||||
interface ArtifactRow {
|
interface ArtifactRow {
|
||||||
id: number;
|
id: number;
|
||||||
name: string;
|
name: string;
|
||||||
@@ -12,22 +19,14 @@
|
|||||||
current_version_id: number | null;
|
current_version_id: number | null;
|
||||||
kind: ArtifactKind;
|
kind: ArtifactKind;
|
||||||
latestVersion: {
|
latestVersion: {
|
||||||
id: number;
|
id: number; version: number; sha256: string; size: number;
|
||||||
version: number;
|
state: 'untested' | 'tested' | 'test-failed'; uploaded_at: string;
|
||||||
sha256: string;
|
|
||||||
size: number;
|
|
||||||
state: 'untested' | 'tested' | 'test-failed';
|
|
||||||
uploaded_at: string;
|
|
||||||
} | null;
|
} | null;
|
||||||
versionCount: number;
|
versionCount: number;
|
||||||
servers: string[];
|
servers: string[];
|
||||||
runningBetaId: number | null;
|
runningBetaId: number | null;
|
||||||
}
|
}
|
||||||
|
interface ScopeOptions { games: string[]; mapsByGame: Record<string, string[]>; }
|
||||||
interface ScopeOptions {
|
|
||||||
games: string[];
|
|
||||||
mapsByGame: Record<string, string[]>;
|
|
||||||
}
|
|
||||||
|
|
||||||
let plugins = $state<ArtifactRow[]>([]);
|
let plugins = $state<ArtifactRow[]>([]);
|
||||||
let loading = $state(true);
|
let loading = $state(true);
|
||||||
@@ -56,7 +55,7 @@
|
|||||||
fetch('/api/scope-options')
|
fetch('/api/scope-options')
|
||||||
]);
|
]);
|
||||||
if (!pluginRes.ok) {
|
if (!pluginRes.ok) {
|
||||||
flash = `plugins API returned ${pluginRes.status}. If this is a dev environment, restart the server so the DB migration runs.`;
|
flash = `Plugins API returned ${pluginRes.status}. If this is a dev environment, restart the server so the DB migration runs.`;
|
||||||
plugins = [];
|
plugins = [];
|
||||||
} else {
|
} else {
|
||||||
plugins = ((await pluginRes.json()) as { scripts?: ArtifactRow[] }).scripts ?? [];
|
plugins = ((await pluginRes.json()) as { scripts?: ArtifactRow[] }).scripts ?? [];
|
||||||
@@ -65,12 +64,11 @@
|
|||||||
scopeOptions = ((await scopeRes.json()) as ScopeOptions | undefined) ?? { games: [], mapsByGame: {} };
|
scopeOptions = ((await scopeRes.json()) as ScopeOptions | undefined) ?? { games: [], mapsByGame: {} };
|
||||||
}
|
}
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
flash = `failed to load plugins: ${(err as Error).message}`;
|
flash = `Failed to load plugins: ${(err as Error).message}`;
|
||||||
} finally {
|
} finally {
|
||||||
loading = false;
|
loading = false;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
onMount(load);
|
onMount(load);
|
||||||
|
|
||||||
function pickFile(e: Event): void {
|
function pickFile(e: Event): void {
|
||||||
@@ -82,9 +80,8 @@
|
|||||||
async function createPlugin(e: Event): Promise<void> {
|
async function createPlugin(e: Event): Promise<void> {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
if (uploading || !newFile || !newName.trim()) return;
|
if (uploading || !newFile || !newName.trim()) return;
|
||||||
if (newScopeType !== 'none' && !scopeValue) { flash = `pick a ${newScopeType}`; return; }
|
if (newScopeType !== 'none' && !scopeValue) { flash = `Pick a ${newScopeType}`; return; }
|
||||||
uploading = true;
|
uploading = true; flash = null;
|
||||||
flash = null;
|
|
||||||
const form = new FormData();
|
const form = new FormData();
|
||||||
form.append('name', newName.trim());
|
form.append('name', newName.trim());
|
||||||
form.append('kind', 'plugin');
|
form.append('kind', 'plugin');
|
||||||
@@ -108,153 +105,173 @@
|
|||||||
|
|
||||||
function scopeLabel(a: ArtifactRow): string {
|
function scopeLabel(a: ArtifactRow): string {
|
||||||
if (!a.scope_type) return 'unscoped';
|
if (!a.scope_type) return 'unscoped';
|
||||||
return `${a.scope_type}=${a.scope_value ?? '?'}`;
|
return `${a.scope_type} · ${a.scope_value ?? '?'}`;
|
||||||
}
|
}
|
||||||
|
function stateVariantFor(a: ArtifactRow): 'online' | 'warning' | 'danger' | 'neutral' | null {
|
||||||
function stateTag(a: ArtifactRow): { label: string; cls: string } | null {
|
|
||||||
if (!a.latestVersion) return null;
|
if (!a.latestVersion) return null;
|
||||||
if (a.current_version_id === null) return { label: 'untested', cls: 'state-untested' };
|
if (a.current_version_id === null) return 'neutral';
|
||||||
if (a.latestVersion.id !== a.current_version_id) {
|
if (a.latestVersion.id !== a.current_version_id) {
|
||||||
return { label: `v${a.latestVersion.version} ${a.latestVersion.state}`, cls: `state-${a.latestVersion.state}` };
|
if (a.latestVersion.state === 'untested') return 'neutral';
|
||||||
|
if (a.latestVersion.state === 'tested') return 'online';
|
||||||
|
if (a.latestVersion.state === 'test-failed') return 'danger';
|
||||||
}
|
}
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
function stateLabel(a: ArtifactRow): string {
|
||||||
|
if (!a.latestVersion) return '';
|
||||||
|
if (a.current_version_id === null) return 'untested';
|
||||||
|
if (a.latestVersion.id !== a.current_version_id) {
|
||||||
|
return `v${a.latestVersion.version} ${a.latestVersion.state.replace('-', ' ')}`;
|
||||||
|
}
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
|
||||||
|
let gameOptions = $derived([
|
||||||
|
{ value: '', label: '— Pick a game —', disabled: true },
|
||||||
|
...scopeOptions.games.map((g) => ({ value: g, label: g }))
|
||||||
|
]);
|
||||||
|
let mapOptions = $derived([
|
||||||
|
{ value: '', label: '— Pick a map —', disabled: true },
|
||||||
|
...(scopeOptions.mapsByGame[newScopeGame] ?? []).map((m) => ({ value: m, label: m }))
|
||||||
|
]);
|
||||||
|
let scopeTypeOptions = [
|
||||||
|
{ value: 'none', label: 'Unscoped' },
|
||||||
|
{ value: 'game', label: 'Game' },
|
||||||
|
{ value: 'map', label: 'Map' }
|
||||||
|
];
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<h1>Plugins</h1>
|
<div class="page">
|
||||||
|
<SectionHeader title="Plugins" subtitle="Native game plugins deployed alongside scripts." />
|
||||||
|
|
||||||
<section class="panel">
|
<Card padding="lg">
|
||||||
<h2>Upload a plugin</h2>
|
<h2 class="panel-title">Upload a plugin</h2>
|
||||||
{#if successBanner}
|
{#if successBanner}
|
||||||
<div class="banner banner-info">
|
<div class="banner">
|
||||||
<strong>v{successBanner.version} of "{successBanner.name}" uploaded — untested.</strong>
|
<strong>v{successBanner.version} of "{successBanner.name}" uploaded — untested.</strong>
|
||||||
<span>Open a beta on <a href="/betas">the betas page</a> to test it before it can be promoted.</span>
|
<span>Open a beta on <a href="/betas">the betas page</a> to test it before promotion.</span>
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
<form onsubmit={createPlugin} class="upload-form">
|
<form onsubmit={createPlugin} class="upload-form">
|
||||||
<label>
|
<Field label="Name">
|
||||||
<span class="k">name</span>
|
<Input bind:value={newName} placeholder="my plugin" disabled={uploading} />
|
||||||
<input type="text" bind:value={newName} placeholder="my plugin" disabled={uploading} />
|
</Field>
|
||||||
</label>
|
<Field label="Notes" hint="Optional. What changed in this version.">
|
||||||
<label>
|
<Input bind:value={newNotes} placeholder="what changed" disabled={uploading} />
|
||||||
<span class="k">scope</span>
|
</Field>
|
||||||
|
<Field label="Scope" hint="Where this plugin deploys.">
|
||||||
<div class="scope-row">
|
<div class="scope-row">
|
||||||
<select bind:value={newScopeType} disabled={uploading}>
|
<Select bind:value={newScopeType} options={scopeTypeOptions} disabled={uploading} />
|
||||||
<option value="none">unscoped</option>
|
{#if newScopeType === 'game' || newScopeType === 'map'}
|
||||||
<option value="game">game</option>
|
<Select bind:value={newScopeGame} options={gameOptions} disabled={uploading} />
|
||||||
<option value="map">map</option>
|
{/if}
|
||||||
</select>
|
{#if newScopeType === 'map'}
|
||||||
{#if newScopeType === 'game'}
|
<Select bind:value={newScopeMap} options={mapOptions} disabled={uploading || !newScopeGame} />
|
||||||
<select bind:value={newScopeGame} disabled={uploading}>
|
|
||||||
<option value="">— pick a game —</option>
|
|
||||||
{#each scopeOptions.games as g (g)}
|
|
||||||
<option value={g}>{g}</option>
|
|
||||||
{/each}
|
|
||||||
</select>
|
|
||||||
{:else if newScopeType === 'map'}
|
|
||||||
<select bind:value={newScopeGame} disabled={uploading}>
|
|
||||||
<option value="">— pick a game —</option>
|
|
||||||
{#each scopeOptions.games as g (g)}
|
|
||||||
<option value={g}>{g}</option>
|
|
||||||
{/each}
|
|
||||||
</select>
|
|
||||||
<select bind:value={newScopeMap} disabled={uploading || !newScopeGame}>
|
|
||||||
<option value="">— pick a map —</option>
|
|
||||||
{#each (scopeOptions.mapsByGame[newScopeGame] ?? []) as m (m)}
|
|
||||||
<option value={m}>{m}</option>
|
|
||||||
{/each}
|
|
||||||
</select>
|
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
</label>
|
</Field>
|
||||||
<label>
|
<Field label="Plugin file (.dll)">
|
||||||
<span class="k">notes (optional)</span>
|
<Input type="file" accept=".dll" onchange={pickFile} disabled={uploading} />
|
||||||
<input type="text" bind:value={newNotes} placeholder="what changed" disabled={uploading} />
|
</Field>
|
||||||
</label>
|
<div class="form-actions">
|
||||||
<label>
|
<Button
|
||||||
<span class="k">plugin file (.dll)</span>
|
type="submit"
|
||||||
<input type="file" accept=".dll" onchange={pickFile} disabled={uploading} />
|
variant="primary"
|
||||||
</label>
|
disabled={uploading || !newFile || !newName}
|
||||||
<button type="submit" class="primary" disabled={uploading || !newFile || !newName}>
|
loading={uploading}
|
||||||
{uploading ? 'uploading…' : 'upload plugin'}
|
>
|
||||||
</button>
|
Upload plugin
|
||||||
|
</Button>
|
||||||
|
{#if flash}<span class="flash">{flash}</span>{/if}
|
||||||
|
</div>
|
||||||
</form>
|
</form>
|
||||||
{#if flash}<p class="flash">{flash}</p>{/if}
|
</Card>
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="panel">
|
<section class="section">
|
||||||
|
<div class="section-head">
|
||||||
<h2>All plugins</h2>
|
<h2>All plugins</h2>
|
||||||
|
<Badge variant="neutral" size="sm">{plugins.length}</Badge>
|
||||||
|
</div>
|
||||||
{#if loading}
|
{#if loading}
|
||||||
<p class="empty">loading…</p>
|
<div class="loading">Loading…</div>
|
||||||
{:else if plugins.length === 0}
|
{:else if plugins.length === 0}
|
||||||
<p class="empty">no plugins yet — upload one above</p>
|
<EmptyState title="No plugins yet" description="Upload one above to get started." />
|
||||||
{:else}
|
{:else}
|
||||||
<div class="artifacts">
|
<div class="rows">
|
||||||
{#each plugins as a (a.id)}
|
{#each plugins as a (a.id)}
|
||||||
<a class="artifact-row" href="/plugins/{a.id}">
|
<a class="row" href="/plugins/{a.id}">
|
||||||
<div class="row-top">
|
<div class="row-top">
|
||||||
<span class="artifact-name">{a.name}</span>
|
<span class="name">{a.name}</span>
|
||||||
<span class="scope tag scope-{a.scope_type ?? 'none'}">{scopeLabel(a)}</span>
|
<Badge
|
||||||
{#if stateTag(a)}
|
variant={a.scope_type === 'game' ? 'info' : a.scope_type === 'map' ? 'warning' : 'neutral'}
|
||||||
{@const t = stateTag(a)!}
|
size="sm"
|
||||||
<span class="tag {t.cls}">{t.label}</span>
|
>
|
||||||
|
{scopeLabel(a)}
|
||||||
|
</Badge>
|
||||||
|
{#if stateVariantFor(a)}
|
||||||
|
{@const v = stateVariantFor(a)!}
|
||||||
|
<Badge variant={v} size="sm">{stateLabel(a)}</Badge>
|
||||||
{/if}
|
{/if}
|
||||||
{#if a.runningBetaId}
|
{#if a.runningBetaId}
|
||||||
<span class="tag beta">beta {a.runningBetaId} running</span>
|
<Badge variant="warning" size="sm">β{a.runningBetaId} running</Badge>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
<div class="row-meta mono">
|
<div class="row-meta">
|
||||||
<span>{a.target_rel_path}</span>
|
<span class="path">{a.target_rel_path}</span>
|
||||||
<span>v{a.latestVersion?.version ?? '—'} · {a.versionCount} version{a.versionCount === 1 ? '' : 's'}</span>
|
<span>v{a.latestVersion?.version ?? '—'} · {a.versionCount} version{a.versionCount === 1 ? '' : 's'}</span>
|
||||||
<span>{a.servers.length ? `${a.servers.length} matching server${a.servers.length === 1 ? '' : 's'}` : ''}</span>
|
{#if a.servers.length}
|
||||||
|
<span>{a.servers.length} matching server{a.servers.length === 1 ? '' : 's'}</span>
|
||||||
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
{/each}
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
</section>
|
</section>
|
||||||
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
h1 { color: var(--cream); font-family: var(--font-display); font-size: var(--text-3xl); letter-spacing: var(--tracking-display); line-height: var(--leading-tight); margin: 0 0 28px; }
|
.page { display: flex; flex-direction: column; gap: var(--space-6); }
|
||||||
.panel { background: var(--bg-nav); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--pad-panel); margin-bottom: 20px; }
|
.loading { text-align: center; padding: var(--space-12); color: var(--text-tertiary); }
|
||||||
h2 { margin: 0 0 14px; font-family: var(--font-body); font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--ink-300); }
|
|
||||||
.empty { color: var(--ink-500); font-family: var(--font-mono); font-size: var(--text-mono); margin: 0; }
|
.panel-title { margin: 0 0 var(--space-4); font-family: var(--font-body); font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--text-primary); }
|
||||||
.upload-form { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
|
.banner {
|
||||||
.upload-form label { display: flex; flex-direction: column; gap: 6px; font-size: var(--text-xs); }
|
display: flex; flex-direction: column; gap: 4px;
|
||||||
.upload-form label .k { color: var(--ink-500); text-transform: uppercase; letter-spacing: 1px; }
|
padding: var(--space-3) var(--space-4);
|
||||||
.upload-form input[type=text], .upload-form select, .upload-form input[type=file] {
|
margin-bottom: var(--space-4);
|
||||||
background: var(--bg-page); color: var(--ink-100); border: 1px solid var(--border);
|
background: rgba(124, 212, 255, 0.06);
|
||||||
border-radius: var(--r-sm); padding: 10px 12px; font-family: var(--font-mono); font-size: var(--text-mono);
|
border: 1px solid rgba(124, 212, 255, 0.22);
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
font-size: var(--text-sm);
|
||||||
}
|
}
|
||||||
.upload-form input[type=text]:focus, .upload-form select:focus {
|
.banner a { color: var(--state-online); text-decoration: underline; }
|
||||||
outline: none; border-color: var(--accent); box-shadow: var(--accent-glow);
|
|
||||||
|
.upload-form { display: grid; gap: var(--space-4); grid-template-columns: 1fr 1fr; }
|
||||||
|
.scope-row { display: flex; gap: var(--space-2); flex-wrap: wrap; }
|
||||||
|
.scope-row :global(.wrap) { flex: 1 1 140px; min-width: 140px; }
|
||||||
|
.form-actions { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--space-4); }
|
||||||
|
.flash { color: var(--state-danger); font-family: var(--font-mono); font-size: var(--text-xs); }
|
||||||
|
|
||||||
|
.section { display: flex; flex-direction: column; gap: var(--space-3); }
|
||||||
|
.section-head { display: flex; align-items: center; gap: var(--space-3); }
|
||||||
|
.section-head h2 { margin: 0; font-family: var(--font-body); font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--text-primary); }
|
||||||
|
|
||||||
|
.rows { display: flex; flex-direction: column; gap: var(--space-2); }
|
||||||
|
.row {
|
||||||
|
display: flex; flex-direction: column; gap: var(--space-2);
|
||||||
|
padding: var(--space-4) var(--space-5);
|
||||||
|
background: color-mix(in oklab, var(--surface) 88%, transparent);
|
||||||
|
border: 1px solid var(--border-subtle);
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
color: var(--text-primary); text-decoration: none;
|
||||||
|
transition: background-color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
|
||||||
}
|
}
|
||||||
.scope-row { display: flex; gap: 8px; flex-wrap: wrap; }
|
.row:hover { background: var(--surface-raised); border-color: var(--border-strong); }
|
||||||
.scope-row select:nth-of-type(1) { flex: 0 0 120px; }
|
.row:focus-visible { outline: none; box-shadow: var(--focus-ring); }
|
||||||
.scope-row select:nth-of-type(2), .scope-row select:nth-of-type(3) { flex: 1; }
|
.row-top { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
|
||||||
.primary {
|
.name { font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--text-primary); letter-spacing: var(--tracking-tight); }
|
||||||
grid-column: 1 / -1; background: linear-gradient(180deg, var(--blue-500), var(--blue-600));
|
.row-meta { display: flex; gap: var(--space-5); color: var(--text-tertiary); font-family: var(--font-mono); font-size: var(--text-xs); flex-wrap: wrap; }
|
||||||
border: 1px solid var(--blue-400); border-radius: var(--r-sm); padding: 12px 18px;
|
.path { color: var(--text-secondary); }
|
||||||
color: var(--cream); font-family: var(--font-body); font-weight: 600; cursor: pointer;
|
|
||||||
}
|
@media (max-width: 720px) { .upload-form { grid-template-columns: 1fr; } }
|
||||||
.primary:disabled { opacity: 0.4; cursor: default; }
|
|
||||||
.flash { color: var(--danger-500); font-family: var(--font-mono); font-size: var(--text-mono); margin-top: 12px; }
|
|
||||||
.artifacts { display: flex; flex-direction: column; gap: 8px; }
|
|
||||||
.artifact-row { display: flex; flex-direction: column; gap: 6px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 14px 16px; text-decoration: none; color: var(--ink-100); }
|
|
||||||
.artifact-row:hover { border-color: var(--accent); box-shadow: var(--accent-glow); }
|
|
||||||
.row-top { display: flex; gap: 12px; align-items: center; }
|
|
||||||
.artifact-name { color: var(--cream); font-weight: 600; font-size: var(--text-md); }
|
|
||||||
.row-meta { display: flex; gap: 24px; color: var(--ink-500); font-size: var(--text-mono-sm); }
|
|
||||||
.mono { font-family: var(--font-mono); }
|
|
||||||
.tag { font-family: var(--font-mono); font-size: var(--text-xs); padding: 3px 9px; border-radius: var(--r-sm); border: 1px solid transparent; }
|
|
||||||
.scope-none { background: var(--bg-nav); border-color: var(--border); color: var(--ink-500); }
|
|
||||||
.scope-game { background: rgba(124, 212, 255, 0.10); border-color: rgba(124, 212, 255, 0.3); color: var(--spark-500); }
|
|
||||||
.scope-map { background: rgba(255, 176, 32, 0.10); border-color: rgba(255, 176, 32, 0.35); color: var(--amber-500); }
|
|
||||||
.beta { background: rgba(255, 176, 32, 0.10); border-color: rgba(255, 176, 32, 0.3); color: var(--amber-500); }
|
|
||||||
.state-untested { background: var(--bg-nav); border-color: var(--border); color: var(--ink-300); }
|
|
||||||
.state-tested { background: rgba(124, 212, 255, 0.10); border-color: rgba(124, 212, 255, 0.3); color: var(--spark-500); }
|
|
||||||
.state-test-failed { background: rgba(255, 92, 92, 0.10); border-color: rgba(255, 92, 92, 0.4); color: var(--danger-500); }
|
|
||||||
.banner { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 4px; border-radius: var(--r-sm); padding: 12px 14px; margin-bottom: 12px; font-size: var(--text-mono); }
|
|
||||||
.banner-info { background: rgba(124, 212, 255, 0.08); border: 1px solid rgba(124, 212, 255, 0.28); color: var(--ink-100); }
|
|
||||||
.banner-info a { color: var(--spark-500); text-decoration: underline; }
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
+228
-235
@@ -1,5 +1,13 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { onMount } from 'svelte';
|
import { onMount } from 'svelte';
|
||||||
|
import Card from '$ui/components/primitives/Card.svelte';
|
||||||
|
import Badge from '$ui/components/primitives/Badge.svelte';
|
||||||
|
import Button from '$ui/components/primitives/Button.svelte';
|
||||||
|
import SectionHeader from '$ui/components/primitives/SectionHeader.svelte';
|
||||||
|
import EmptyState from '$ui/components/primitives/EmptyState.svelte';
|
||||||
|
import Field from '$ui/components/primitives/Field.svelte';
|
||||||
|
import Input from '$ui/components/primitives/Input.svelte';
|
||||||
|
import Select from '$ui/components/primitives/Select.svelte';
|
||||||
|
|
||||||
interface ScriptRow {
|
interface ScriptRow {
|
||||||
id: number;
|
id: number;
|
||||||
@@ -10,22 +18,14 @@
|
|||||||
current_version_id: number | null;
|
current_version_id: number | null;
|
||||||
kind: 'script' | 'config' | 'plugin' | 'baseline';
|
kind: 'script' | 'config' | 'plugin' | 'baseline';
|
||||||
latestVersion: {
|
latestVersion: {
|
||||||
id: number;
|
id: number; version: number; sha256: string; size: number;
|
||||||
version: number;
|
state: 'untested' | 'tested' | 'test-failed'; uploaded_at: string;
|
||||||
sha256: string;
|
|
||||||
size: number;
|
|
||||||
state: 'untested' | 'tested' | 'test-failed';
|
|
||||||
uploaded_at: string;
|
|
||||||
} | null;
|
} | null;
|
||||||
versionCount: number;
|
versionCount: number;
|
||||||
servers: string[];
|
servers: string[];
|
||||||
runningBetaId: number | null;
|
runningBetaId: number | null;
|
||||||
}
|
}
|
||||||
|
interface ScopeOptions { games: string[]; mapsByGame: Record<string, string[]>; }
|
||||||
interface ScopeOptions {
|
|
||||||
games: string[];
|
|
||||||
mapsByGame: Record<string, string[]>;
|
|
||||||
}
|
|
||||||
|
|
||||||
let scripts = $state<ScriptRow[]>([]);
|
let scripts = $state<ScriptRow[]>([]);
|
||||||
let loading = $state(true);
|
let loading = $state(true);
|
||||||
@@ -34,7 +34,6 @@
|
|||||||
let scopeOptions = $state<ScopeOptions>({ games: [], mapsByGame: {} });
|
let scopeOptions = $state<ScopeOptions>({ games: [], mapsByGame: {} });
|
||||||
let successBanner = $state<{ name: string; scriptId: number; version: number } | null>(null);
|
let successBanner = $state<{ name: string; scriptId: number; version: number } | null>(null);
|
||||||
|
|
||||||
// Form state for creating a new script.
|
|
||||||
let newName = $state('');
|
let newName = $state('');
|
||||||
let newScopeType = $state<'none' | 'game' | 'map'>('none');
|
let newScopeType = $state<'none' | 'game' | 'map'>('none');
|
||||||
let newScopeGame = $state('');
|
let newScopeGame = $state('');
|
||||||
@@ -42,37 +41,20 @@
|
|||||||
let newFile = $state<File | null>(null);
|
let newFile = $state<File | null>(null);
|
||||||
let newNotes = $state('');
|
let newNotes = $state('');
|
||||||
|
|
||||||
// The scope value we send to the API — computed from the two selects so
|
|
||||||
// scope=map ships the map (game is just a filter narrowing the map list).
|
|
||||||
const scopeValue = $derived.by(() => {
|
const scopeValue = $derived.by(() => {
|
||||||
if (newScopeType === 'game') return newScopeGame;
|
if (newScopeType === 'game') return newScopeGame;
|
||||||
if (newScopeType === 'map') return newScopeMap;
|
if (newScopeType === 'map') return newScopeMap;
|
||||||
return '';
|
return '';
|
||||||
});
|
});
|
||||||
|
|
||||||
// Live preview: which servers would this script land on? Empty when the
|
let serverCache = $state<Array<{ name: string; game: string | null; map: string | null }>>([]);
|
||||||
// scope matches nothing OR when scope=none (unscoped scripts only push to
|
|
||||||
// explicitly-chosen beta targets, so there's no promotion audience yet).
|
|
||||||
const matchingServers = $derived.by(() => {
|
const matchingServers = $derived.by(() => {
|
||||||
if (newScopeType === 'none') return null;
|
if (newScopeType === 'none') return null;
|
||||||
if (!scopeValue) return null;
|
if (!scopeValue) return null;
|
||||||
// scope-options carries fleet distincts, but not the (server → game/map)
|
|
||||||
// mapping. We derive the count by checking every server in `scripts`
|
|
||||||
// list responses — instead, use the /api/servers list. For simplicity
|
|
||||||
// we call a scoped preview against the API on the fly. Cheaper: reuse
|
|
||||||
// scope options — but we don't have server names. Fetch servers once.
|
|
||||||
return matchingServersFromCache();
|
|
||||||
});
|
|
||||||
|
|
||||||
let serverCache = $state<Array<{ name: string; game: string | null; map: string | null }>>([]);
|
|
||||||
function matchingServersFromCache(): string[] {
|
|
||||||
return serverCache
|
return serverCache
|
||||||
.filter((s) => {
|
.filter((s) => (newScopeType === 'game' ? s.game : s.map) === scopeValue)
|
||||||
const field = newScopeType === 'game' ? s.game : s.map;
|
|
||||||
return field === scopeValue;
|
|
||||||
})
|
|
||||||
.map((s) => s.name);
|
.map((s) => s.name);
|
||||||
}
|
});
|
||||||
|
|
||||||
async function load(): Promise<void> {
|
async function load(): Promise<void> {
|
||||||
const [scriptsRes, scopeRes, serversRes] = await Promise.all([
|
const [scriptsRes, scopeRes, serversRes] = await Promise.all([
|
||||||
@@ -87,27 +69,22 @@
|
|||||||
serverCache = sBody.servers;
|
serverCache = sBody.servers;
|
||||||
loading = false;
|
loading = false;
|
||||||
}
|
}
|
||||||
|
|
||||||
onMount(load);
|
onMount(load);
|
||||||
|
|
||||||
function pickFile(e: Event): void {
|
function pickFile(e: Event): void {
|
||||||
const t = e.target as HTMLInputElement;
|
const t = e.target as HTMLInputElement;
|
||||||
newFile = t.files?.[0] ?? null;
|
newFile = t.files?.[0] ?? null;
|
||||||
// Every T5 script lands in a flat sp/ directory, so target rel path is
|
|
||||||
// just the filename — no need to ask the user.
|
|
||||||
if (!newName && newFile) newName = newFile.name.replace(/\.[^.]+$/, '');
|
if (!newName && newFile) newName = newFile.name.replace(/\.[^.]+$/, '');
|
||||||
}
|
}
|
||||||
|
|
||||||
async function createScript(e: Event): Promise<void> {
|
async function createScript(e: Event): Promise<void> {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
if (uploading || !newFile || !newName.trim()) return;
|
if (uploading || !newFile || !newName.trim()) return;
|
||||||
// Guard: scope was set but no value picked yet.
|
|
||||||
if (newScopeType !== 'none' && !scopeValue) {
|
if (newScopeType !== 'none' && !scopeValue) {
|
||||||
flash = `pick a ${newScopeType}`;
|
flash = `Pick a ${newScopeType}`;
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
uploading = true;
|
uploading = true; flash = null;
|
||||||
flash = null;
|
|
||||||
const form = new FormData();
|
const form = new FormData();
|
||||||
form.append('name', newName.trim());
|
form.append('name', newName.trim());
|
||||||
form.append('scopeType', newScopeType);
|
form.append('scopeType', newScopeType);
|
||||||
@@ -117,8 +94,7 @@
|
|||||||
try {
|
try {
|
||||||
const res = await fetch('/api/scripts', { method: 'POST', body: form });
|
const res = await fetch('/api/scripts', { method: 'POST', body: form });
|
||||||
const body = (await res.json()) as {
|
const body = (await res.json()) as {
|
||||||
ok: boolean;
|
ok: boolean; error?: string;
|
||||||
error?: string;
|
|
||||||
script?: { id: number; name: string };
|
script?: { id: number; name: string };
|
||||||
versionId?: number;
|
versionId?: number;
|
||||||
};
|
};
|
||||||
@@ -129,12 +105,9 @@
|
|||||||
successBanner = body.script
|
successBanner = body.script
|
||||||
? { name: body.script.name, scriptId: body.script.id, version: 1 }
|
? { name: body.script.name, scriptId: body.script.id, version: 1 }
|
||||||
: null;
|
: null;
|
||||||
newName = '';
|
newName = ''; newScopeType = 'none';
|
||||||
newScopeType = 'none';
|
newScopeGame = ''; newScopeMap = '';
|
||||||
newScopeGame = '';
|
newNotes = ''; newFile = null;
|
||||||
newScopeMap = '';
|
|
||||||
newNotes = '';
|
|
||||||
newFile = null;
|
|
||||||
await load();
|
await load();
|
||||||
} finally {
|
} finally {
|
||||||
uploading = false;
|
uploading = false;
|
||||||
@@ -143,251 +116,271 @@
|
|||||||
|
|
||||||
function scopeLabel(s: ScriptRow): string {
|
function scopeLabel(s: ScriptRow): string {
|
||||||
if (!s.scope_type) return 'unscoped';
|
if (!s.scope_type) return 'unscoped';
|
||||||
return `${s.scope_type}=${s.scope_value ?? '?'}`;
|
return `${s.scope_type} · ${s.scope_value ?? '?'}`;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Configs/baselines and plugins have their own detail routes; scripts fall
|
|
||||||
// through to /scripts/{id}. The "all scripts" list is still an everything
|
|
||||||
// view, but each row deep-links to the right family.
|
|
||||||
function detailHref(s: ScriptRow): string {
|
function detailHref(s: ScriptRow): string {
|
||||||
if (s.kind === 'config' || s.kind === 'baseline') return `/configs/${s.id}`;
|
if (s.kind === 'config' || s.kind === 'baseline') return `/configs/${s.id}`;
|
||||||
if (s.kind === 'plugin') return `/plugins/${s.id}`;
|
if (s.kind === 'plugin') return `/plugins/${s.id}`;
|
||||||
return `/scripts/${s.id}`;
|
return `/scripts/${s.id}`;
|
||||||
}
|
}
|
||||||
|
function stateVariantFor(s: ScriptRow): 'online' | 'warning' | 'danger' | 'neutral' | null {
|
||||||
// What state tag to show on a script row. Distinguishes "never promoted"
|
|
||||||
// (whole script is untested) from "promoted but has a newer untested
|
|
||||||
// version" (existing production is fine, but there's unreleased work).
|
|
||||||
function scriptStateTag(s: ScriptRow): { label: string; cls: string } | null {
|
|
||||||
if (!s.latestVersion) return null;
|
if (!s.latestVersion) return null;
|
||||||
if (s.current_version_id === null) return { label: 'untested', cls: 'state-untested' };
|
if (s.current_version_id === null) return 'neutral';
|
||||||
if (s.latestVersion.id !== s.current_version_id) {
|
if (s.latestVersion.id !== s.current_version_id) {
|
||||||
if (s.latestVersion.state === 'untested') return { label: `v${s.latestVersion.version} untested`, cls: 'state-untested' };
|
if (s.latestVersion.state === 'untested') return 'neutral';
|
||||||
if (s.latestVersion.state === 'tested') return { label: `v${s.latestVersion.version} tested`, cls: 'state-tested' };
|
if (s.latestVersion.state === 'tested') return 'online';
|
||||||
if (s.latestVersion.state === 'test-failed') return { label: `v${s.latestVersion.version} test-failed`, cls: 'state-test-failed' };
|
if (s.latestVersion.state === 'test-failed') return 'danger';
|
||||||
}
|
}
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
function stateLabel(s: ScriptRow): string {
|
||||||
|
if (!s.latestVersion) return '';
|
||||||
|
if (s.current_version_id === null) return 'untested';
|
||||||
|
if (s.latestVersion.id !== s.current_version_id) {
|
||||||
|
return `v${s.latestVersion.version} ${s.latestVersion.state.replace('-', ' ')}`;
|
||||||
|
}
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
|
||||||
|
let gameOptions = $derived([
|
||||||
|
{ value: '', label: '— Pick a game —', disabled: true },
|
||||||
|
...scopeOptions.games.map((g) => ({ value: g, label: g }))
|
||||||
|
]);
|
||||||
|
let mapOptions = $derived([
|
||||||
|
{ value: '', label: '— Pick a map —', disabled: true },
|
||||||
|
...(scopeOptions.mapsByGame[newScopeGame] ?? []).map((m) => ({ value: m, label: m }))
|
||||||
|
]);
|
||||||
|
let scopeTypeOptions = [
|
||||||
|
{ value: 'none', label: 'Unscoped' },
|
||||||
|
{ value: 'game', label: 'Game' },
|
||||||
|
{ value: 'map', label: 'Map' }
|
||||||
|
];
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<h1>Scripts</h1>
|
<div class="page">
|
||||||
|
<SectionHeader title="Scripts" subtitle="Upload a script, then open a beta to test it before promotion." />
|
||||||
|
|
||||||
|
<!-- Upload form -->
|
||||||
|
<Card padding="lg">
|
||||||
|
<h2 class="panel-title">Upload a script</h2>
|
||||||
|
|
||||||
<section class="panel">
|
|
||||||
<h2>Upload a script</h2>
|
|
||||||
{#if successBanner}
|
{#if successBanner}
|
||||||
<div class="banner banner-info">
|
<div class="banner">
|
||||||
<strong>v{successBanner.version} uploaded — untested.</strong>
|
<strong>v{successBanner.version} uploaded — untested.</strong>
|
||||||
<span>Open a beta on <a href="/scripts/{successBanner.scriptId}">{successBanner.name}</a> to test it before it can be promoted.</span>
|
<span>
|
||||||
|
Open a beta on <a href="/scripts/{successBanner.scriptId}">{successBanner.name}</a>
|
||||||
|
to test it before it can be promoted.
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
<form onsubmit={createScript} class="upload-form">
|
<form onsubmit={createScript} class="upload-form">
|
||||||
<label>
|
<Field label="Name">
|
||||||
<span class="k">name</span>
|
<Input bind:value={newName} placeholder="hud tweaks" disabled={uploading} />
|
||||||
<input type="text" bind:value={newName} placeholder="hud tweaks" disabled={uploading} />
|
</Field>
|
||||||
</label>
|
|
||||||
<label>
|
<Field label="Notes" hint="Optional. What changed in this version.">
|
||||||
<span class="k">scope</span>
|
<Input bind:value={newNotes} placeholder="what changed" disabled={uploading} />
|
||||||
|
</Field>
|
||||||
|
|
||||||
|
<Field label="Scope" hint="Where this script deploys. Unscoped ships wherever a beta targets it.">
|
||||||
<div class="scope-row">
|
<div class="scope-row">
|
||||||
<select bind:value={newScopeType} disabled={uploading}>
|
<Select bind:value={newScopeType} options={scopeTypeOptions} disabled={uploading} />
|
||||||
<option value="none">unscoped</option>
|
{#if newScopeType === 'game' || newScopeType === 'map'}
|
||||||
<option value="game">game</option>
|
<Select bind:value={newScopeGame} options={gameOptions} disabled={uploading} />
|
||||||
<option value="map">map</option>
|
{/if}
|
||||||
</select>
|
{#if newScopeType === 'map'}
|
||||||
{#if newScopeType === 'game'}
|
<Select bind:value={newScopeMap} options={mapOptions} disabled={uploading || !newScopeGame} />
|
||||||
<select bind:value={newScopeGame} disabled={uploading}>
|
|
||||||
<option value="">— pick a game —</option>
|
|
||||||
{#each scopeOptions.games as g (g)}
|
|
||||||
<option value={g}>{g}</option>
|
|
||||||
{/each}
|
|
||||||
</select>
|
|
||||||
{:else if newScopeType === 'map'}
|
|
||||||
<select bind:value={newScopeGame} disabled={uploading}>
|
|
||||||
<option value="">— pick a game —</option>
|
|
||||||
{#each scopeOptions.games as g (g)}
|
|
||||||
<option value={g}>{g}</option>
|
|
||||||
{/each}
|
|
||||||
</select>
|
|
||||||
<select bind:value={newScopeMap} disabled={uploading || !newScopeGame}>
|
|
||||||
<option value="">— pick a map —</option>
|
|
||||||
{#each (scopeOptions.mapsByGame[newScopeGame] ?? []) as m (m)}
|
|
||||||
<option value={m}>{m}</option>
|
|
||||||
{/each}
|
|
||||||
</select>
|
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
{#if newScopeType !== 'none' && scopeValue}
|
{#if newScopeType !== 'none' && scopeValue}
|
||||||
{@const matches = matchingServers ?? []}
|
{@const matches = matchingServers ?? []}
|
||||||
{#if matches.length === 0}
|
{#if matches.length === 0}
|
||||||
<p class="preview warn">⚠ no matching servers in the fleet — the promoted script will land nowhere</p>
|
<div class="preview warn">No matching servers — the promoted script will land nowhere.</div>
|
||||||
{:else}
|
{:else}
|
||||||
<p class="preview ok">{matches.length} matching server{matches.length === 1 ? '' : 's'}: {matches.join(', ')}</p>
|
<div class="preview ok">
|
||||||
|
{matches.length} matching server{matches.length === 1 ? '' : 's'}: {matches.join(', ')}
|
||||||
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
{/if}
|
{/if}
|
||||||
</label>
|
</Field>
|
||||||
<label>
|
|
||||||
<span class="k">notes (optional)</span>
|
|
||||||
<input type="text" bind:value={newNotes} placeholder="what changed" disabled={uploading} />
|
|
||||||
</label>
|
|
||||||
<label>
|
|
||||||
<span class="k">file</span>
|
|
||||||
<input type="file" onchange={pickFile} disabled={uploading} />
|
|
||||||
</label>
|
|
||||||
<button type="submit" class="primary" disabled={uploading || !newFile || !newName}>
|
|
||||||
{uploading ? 'uploading…' : 'upload script'}
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
{#if flash}<p class="flash">{flash}</p>{/if}
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="panel">
|
<Field label="File">
|
||||||
|
<Input type="file" onchange={pickFile} disabled={uploading} />
|
||||||
|
</Field>
|
||||||
|
|
||||||
|
<div class="form-actions">
|
||||||
|
<Button
|
||||||
|
type="submit"
|
||||||
|
variant="primary"
|
||||||
|
disabled={uploading || !newFile || !newName}
|
||||||
|
loading={uploading}
|
||||||
|
>
|
||||||
|
Upload script
|
||||||
|
</Button>
|
||||||
|
{#if flash}<span class="flash">{flash}</span>{/if}
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<!-- Script list -->
|
||||||
|
<section class="section">
|
||||||
|
<div class="section-head">
|
||||||
<h2>All scripts</h2>
|
<h2>All scripts</h2>
|
||||||
|
<Badge variant="neutral" size="sm">{scripts.length}</Badge>
|
||||||
|
</div>
|
||||||
|
|
||||||
{#if loading}
|
{#if loading}
|
||||||
<p class="empty">loading…</p>
|
<div class="loading">Loading…</div>
|
||||||
{:else if scripts.length === 0}
|
{:else if scripts.length === 0}
|
||||||
<p class="empty">no scripts yet — upload one above</p>
|
<EmptyState title="No scripts yet" description="Upload one above to get started." />
|
||||||
{:else}
|
{:else}
|
||||||
<div class="scripts">
|
<div class="rows">
|
||||||
{#each scripts as s (s.id)}
|
{#each scripts as s (s.id)}
|
||||||
<a class="script-row" href={detailHref(s)}>
|
<a class="row" href={detailHref(s)}>
|
||||||
<div class="row-top">
|
<div class="row-top">
|
||||||
<span class="script-name">{s.name}</span>
|
<span class="name">{s.name}</span>
|
||||||
<span class="scope tag scope-{s.scope_type ?? 'none'}">{scopeLabel(s)}</span>
|
<Badge
|
||||||
{#if scriptStateTag(s)}
|
variant={s.scope_type === 'game' ? 'info' :
|
||||||
{@const t = scriptStateTag(s)!}
|
s.scope_type === 'map' ? 'warning' : 'neutral'}
|
||||||
<span class="tag {t.cls}">{t.label}</span>
|
size="sm"
|
||||||
|
>
|
||||||
|
{scopeLabel(s)}
|
||||||
|
</Badge>
|
||||||
|
{#if stateVariantFor(s)}
|
||||||
|
{@const v = stateVariantFor(s)!}
|
||||||
|
<Badge variant={v} size="sm">{stateLabel(s)}</Badge>
|
||||||
{/if}
|
{/if}
|
||||||
{#if s.runningBetaId}
|
{#if s.runningBetaId}
|
||||||
<span class="tag beta">beta {s.runningBetaId} running</span>
|
<Badge variant="warning" size="sm">β{s.runningBetaId} running</Badge>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
<div class="row-meta mono">
|
<div class="row-meta">
|
||||||
<span>{s.target_rel_path}</span>
|
<span class="path">{s.target_rel_path}</span>
|
||||||
<span>v{s.latestVersion?.version ?? '—'} · {s.versionCount} version{s.versionCount === 1 ? '' : 's'}</span>
|
<span>v{s.latestVersion?.version ?? '—'} · {s.versionCount} version{s.versionCount === 1 ? '' : 's'}</span>
|
||||||
<span>{s.servers.length ? `${s.servers.length} matching server${s.servers.length === 1 ? '' : 's'}` : ''}</span>
|
{#if s.servers.length}
|
||||||
|
<span>{s.servers.length} matching server{s.servers.length === 1 ? '' : 's'}</span>
|
||||||
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
{/each}
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
</section>
|
</section>
|
||||||
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
h1 {
|
.page { display: flex; flex-direction: column; gap: var(--space-6); }
|
||||||
color: var(--cream);
|
.loading { text-align: center; padding: var(--space-12); color: var(--text-tertiary); }
|
||||||
font-family: var(--font-display);
|
|
||||||
font-size: var(--text-3xl);
|
.panel-title {
|
||||||
letter-spacing: var(--tracking-display);
|
margin: 0 0 var(--space-4);
|
||||||
line-height: var(--leading-tight);
|
|
||||||
margin: 0 0 28px;
|
|
||||||
}
|
|
||||||
.panel {
|
|
||||||
background: var(--bg-nav);
|
|
||||||
border: 1px solid var(--border);
|
|
||||||
border-radius: var(--r-md);
|
|
||||||
padding: var(--pad-panel);
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
h2 {
|
|
||||||
margin: 0 0 14px;
|
|
||||||
font-family: var(--font-body);
|
font-family: var(--font-body);
|
||||||
font-size: var(--text-xs);
|
font-size: var(--text-md);
|
||||||
font-weight: 700;
|
font-weight: var(--weight-semibold);
|
||||||
text-transform: uppercase;
|
color: var(--text-primary);
|
||||||
letter-spacing: 1.5px;
|
|
||||||
color: var(--ink-300);
|
|
||||||
}
|
}
|
||||||
.empty { color: var(--ink-500); font-family: var(--font-mono); font-size: var(--text-mono); margin: 0; }
|
|
||||||
|
|
||||||
.upload-form { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
|
|
||||||
.upload-form label { display: flex; flex-direction: column; gap: 6px; font-size: var(--text-xs); }
|
|
||||||
.upload-form label .k { color: var(--ink-500); text-transform: uppercase; letter-spacing: 1px; }
|
|
||||||
.upload-form input[type=text], .upload-form select, .upload-form input[type=file] {
|
|
||||||
background: var(--bg-page);
|
|
||||||
color: var(--ink-100);
|
|
||||||
border: 1px solid var(--border);
|
|
||||||
border-radius: var(--r-sm);
|
|
||||||
padding: 10px 12px;
|
|
||||||
font-family: var(--font-mono);
|
|
||||||
font-size: var(--text-mono);
|
|
||||||
}
|
|
||||||
.upload-form input[type=text]:focus, .upload-form select:focus {
|
|
||||||
outline: none;
|
|
||||||
border-color: var(--accent);
|
|
||||||
box-shadow: var(--accent-glow);
|
|
||||||
}
|
|
||||||
.scope-row { display: flex; gap: 8px; flex-wrap: wrap; }
|
|
||||||
.scope-row select:nth-of-type(1) { flex: 0 0 120px; }
|
|
||||||
.primary {
|
|
||||||
grid-column: 1 / -1;
|
|
||||||
background: linear-gradient(180deg, var(--blue-500), var(--blue-600));
|
|
||||||
border: 1px solid var(--blue-400);
|
|
||||||
border-radius: var(--r-sm);
|
|
||||||
padding: 12px 18px;
|
|
||||||
color: var(--cream);
|
|
||||||
font-family: var(--font-body);
|
|
||||||
font-weight: 600;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.primary:disabled { opacity: 0.4; cursor: default; }
|
|
||||||
.flash { color: var(--danger-500); font-family: var(--font-mono); font-size: var(--text-mono); margin-top: 12px; }
|
|
||||||
|
|
||||||
.scripts { display: flex; flex-direction: column; gap: 8px; }
|
|
||||||
.script-row {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 6px;
|
|
||||||
background: var(--bg-card);
|
|
||||||
border: 1px solid var(--border);
|
|
||||||
border-radius: var(--r-sm);
|
|
||||||
padding: 14px 16px;
|
|
||||||
text-decoration: none;
|
|
||||||
color: var(--ink-100);
|
|
||||||
}
|
|
||||||
.script-row:hover { border-color: var(--accent); box-shadow: var(--accent-glow); }
|
|
||||||
.row-top { display: flex; gap: 12px; align-items: center; }
|
|
||||||
.script-name { color: var(--cream); font-weight: 600; font-size: var(--text-md); }
|
|
||||||
.row-meta { display: flex; gap: 24px; color: var(--ink-500); font-size: var(--text-mono-sm); }
|
|
||||||
.mono { font-family: var(--font-mono); }
|
|
||||||
.tag {
|
|
||||||
font-family: var(--font-mono);
|
|
||||||
font-size: var(--text-xs);
|
|
||||||
padding: 3px 9px;
|
|
||||||
border-radius: var(--r-sm);
|
|
||||||
border: 1px solid transparent;
|
|
||||||
}
|
|
||||||
.scope-none { background: var(--bg-nav); border-color: var(--border); color: var(--ink-500); }
|
|
||||||
.scope-game { background: rgba(124, 212, 255, 0.10); border-color: rgba(124, 212, 255, 0.3); color: var(--spark-500); }
|
|
||||||
.scope-map { background: rgba(255, 176, 32, 0.10); border-color: rgba(255, 176, 32, 0.35); color: var(--amber-500); }
|
|
||||||
.beta { background: rgba(255, 176, 32, 0.10); border-color: rgba(255, 176, 32, 0.3); color: var(--amber-500); }
|
|
||||||
.state-untested { background: var(--bg-nav); border-color: var(--border); color: var(--ink-300); }
|
|
||||||
.state-tested { background: rgba(124, 212, 255, 0.10); border-color: rgba(124, 212, 255, 0.3); color: var(--spark-500); }
|
|
||||||
.state-test-failed { background: rgba(255, 92, 92, 0.10); border-color: rgba(255, 92, 92, 0.4); color: var(--danger-500); }
|
|
||||||
|
|
||||||
.banner {
|
.banner {
|
||||||
grid-column: 1 / -1;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 4px;
|
gap: 4px;
|
||||||
border-radius: var(--r-sm);
|
padding: var(--space-3) var(--space-4);
|
||||||
padding: 12px 14px;
|
margin-bottom: var(--space-4);
|
||||||
margin-bottom: 12px;
|
background: rgba(124, 212, 255, 0.06);
|
||||||
font-size: var(--text-mono);
|
border: 1px solid rgba(124, 212, 255, 0.22);
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
font-size: var(--text-sm);
|
||||||
|
color: var(--text-primary);
|
||||||
}
|
}
|
||||||
.banner-info {
|
.banner a { color: var(--state-online); text-decoration: underline; }
|
||||||
background: rgba(124, 212, 255, 0.08);
|
|
||||||
border: 1px solid rgba(124, 212, 255, 0.28);
|
|
||||||
color: var(--ink-100);
|
|
||||||
}
|
|
||||||
.banner-info a { color: var(--spark-500); text-decoration: underline; }
|
|
||||||
|
|
||||||
|
.upload-form {
|
||||||
|
display: grid;
|
||||||
|
gap: var(--space-4);
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
}
|
||||||
|
.scope-row {
|
||||||
|
display: flex;
|
||||||
|
gap: var(--space-2);
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
.scope-row :global(.wrap) { flex: 1 1 140px; min-width: 140px; }
|
||||||
.preview {
|
.preview {
|
||||||
grid-column: 1 / -1;
|
margin-top: var(--space-2);
|
||||||
margin: 4px 0 0;
|
padding: var(--space-2) var(--space-3);
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
font-size: var(--text-xs);
|
||||||
font-family: var(--font-mono);
|
font-family: var(--font-mono);
|
||||||
font-size: var(--text-mono-sm);
|
|
||||||
}
|
}
|
||||||
.preview.ok { color: var(--ink-300); }
|
.preview.ok { background: var(--surface-sunken); color: var(--text-secondary); }
|
||||||
.preview.warn { color: var(--amber-500); }
|
.preview.warn { background: rgba(255, 176, 32, 0.06); color: var(--state-warning); border: 1px solid rgba(255, 176, 32, 0.28); }
|
||||||
|
|
||||||
.scope-row select:nth-of-type(2), .scope-row select:nth-of-type(3) { flex: 1; }
|
.form-actions {
|
||||||
|
grid-column: 1 / -1;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--space-4);
|
||||||
|
}
|
||||||
|
.flash {
|
||||||
|
color: var(--state-danger);
|
||||||
|
font-family: var(--font-mono);
|
||||||
|
font-size: var(--text-xs);
|
||||||
|
}
|
||||||
|
|
||||||
|
.section { display: flex; flex-direction: column; gap: var(--space-3); }
|
||||||
|
.section-head {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--space-3);
|
||||||
|
}
|
||||||
|
.section-head h2 {
|
||||||
|
margin: 0;
|
||||||
|
font-family: var(--font-body);
|
||||||
|
font-size: var(--text-md);
|
||||||
|
font-weight: var(--weight-semibold);
|
||||||
|
color: var(--text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.rows { display: flex; flex-direction: column; gap: var(--space-2); }
|
||||||
|
.row {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: var(--space-2);
|
||||||
|
padding: var(--space-4) var(--space-5);
|
||||||
|
background: color-mix(in oklab, var(--surface) 88%, transparent);
|
||||||
|
border: 1px solid var(--border-subtle);
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
color: var(--text-primary);
|
||||||
|
text-decoration: none;
|
||||||
|
transition:
|
||||||
|
background-color var(--dur-fast) var(--ease-standard),
|
||||||
|
border-color var(--dur-fast) var(--ease-standard);
|
||||||
|
}
|
||||||
|
.row:hover { background: var(--surface-raised); border-color: var(--border-strong); }
|
||||||
|
.row:focus-visible { outline: none; box-shadow: var(--focus-ring); }
|
||||||
|
.row-top {
|
||||||
|
display: flex;
|
||||||
|
gap: var(--space-2);
|
||||||
|
align-items: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
.name {
|
||||||
|
font-size: var(--text-md);
|
||||||
|
font-weight: var(--weight-semibold);
|
||||||
|
color: var(--text-primary);
|
||||||
|
letter-spacing: var(--tracking-tight);
|
||||||
|
}
|
||||||
|
.row-meta {
|
||||||
|
display: flex;
|
||||||
|
gap: var(--space-5);
|
||||||
|
color: var(--text-tertiary);
|
||||||
|
font-family: var(--font-mono);
|
||||||
|
font-size: var(--text-xs);
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
.path { color: var(--text-secondary); }
|
||||||
|
|
||||||
|
@media (max-width: 720px) {
|
||||||
|
.upload-form { grid-template-columns: 1fr; }
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user