PiCloud/dashboard/src/routes/+page.svelte

<script lang="ts">
	import { base } from '$app/paths';
	import { api, ApiError, type Script } from '$lib/api';
	import CodeEditor from '$lib/CodeEditor.svelte';

	const SAMPLE_SOURCE = '#{\n  statusCode: 200,\n  body: #{ ok: true, echo: ctx.request.body }\n}';

	let scripts = $state<Script[] | null>(null);
	let listError = $state<string | null>(null);
	let loading = $state(true);

	let showCreate = $state(false);
	let createName = $state('');
	let createDescription = $state('');
	let createSource = $state(SAMPLE_SOURCE);
	let creating = $state(false);
	let createError = $state<string | null>(null);

	async function load() {
		loading = true;
		listError = null;
		try {
			scripts = await api.scripts.list();
		} catch (e) {
			listError = e instanceof Error ? e.message : String(e);
			scripts = null;
		} finally {
			loading = false;
		}
	}

	async function submitCreate(event: Event) {
		event.preventDefault();
		creating = true;
		createError = null;
		try {
			await api.scripts.create({
				name: createName.trim(),
				description: createDescription.trim() || null,
				source: createSource
			});
			showCreate = false;
			createName = '';
			createDescription = '';
			createSource = SAMPLE_SOURCE;
			await load();
		} catch (e) {
			createError = e instanceof Error ? e.message : String(e);
			if (e instanceof ApiError && e.status === 422) {
				createError = `Syntax error: ${createError}`;
			}
		} finally {
			creating = false;
		}
	}

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

<section>
	<header class="page-header">
		<h1>Scripts</h1>
		<button type="button" onclick={() => (showCreate = !showCreate)}>
			{showCreate ? 'Cancel' : 'New script'}
		</button>
	</header>

	{#if showCreate}
		<form class="create-form" onsubmit={submitCreate}>
			<div class="row">
				<label>
					<span>Name</span>
					<input bind:value={createName} required minlength="1" placeholder="echo" />
				</label>
				<label>
					<span>Description</span>
					<input bind:value={createDescription} placeholder="optional" />
				</label>
			</div>
			<label class="full">
				<span>Source (Rhai)</span>
				<CodeEditor bind:value={createSource} language="rhai" minHeight="14rem" />
			</label>
			{#if createError}
				<div class="error">{createError}</div>
			{/if}
			<div class="actions">
				<button type="submit" disabled={creating}>
					{creating ? 'Creating…' : 'Create script'}
				</button>
			</div>
		</form>
	{/if}

	{#if loading}
		<p class="muted">Loading…</p>
	{:else if listError}
		<div class="error">
			<strong>Could not load scripts.</strong>
			<p>{listError}</p>
			<button type="button" onclick={() => void load()}>Retry</button>
		</div>
	{:else if scripts && scripts.length === 0}
		<p class="muted">No scripts yet. Create one above to get started.</p>
	{:else if scripts}
		<ul class="list">
			{#each scripts as script (script.id)}
				<li>
					<a href="{base}/scripts/{script.id}">
						<div class="primary">
							<strong>{script.name}</strong>
							<span class="muted">v{script.version}</span>
						</div>
						<div class="secondary muted">
							{script.description ?? '—'}
						</div>
					</a>
				</li>
			{/each}
		</ul>
	{/if}
</section>

<style>
	.page-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 1.5rem;
	}

	h1 {
		margin: 0;
		font-size: 1.5rem;
	}

	button {
		background: #38bdf8;
		color: #0b1220;
		border: none;
		padding: 0.5rem 1rem;
		border-radius: 0.375rem;
		font-weight: 600;
		cursor: pointer;
	}

	button:disabled {
		opacity: 0.5;
		cursor: not-allowed;
	}

	.muted {
		color: #64748b;
	}

	.error {
		border: 1px solid #b91c1c;
		background: #450a0a;
		color: #fecaca;
		padding: 1rem;
		border-radius: 0.5rem;
		margin: 1rem 0;
	}

	.create-form {
		background: #1e293b;
		border-radius: 0.5rem;
		padding: 1.25rem;
		margin-bottom: 1.5rem;
		display: flex;
		flex-direction: column;
		gap: 0.75rem;
	}

	.create-form .row {
		display: grid;
		grid-template-columns: 1fr 2fr;
		gap: 0.75rem;
	}

	.create-form label {
		display: flex;
		flex-direction: column;
		gap: 0.25rem;
		font-size: 0.85rem;
		color: #cbd5e1;
	}

	.create-form label.full {
		grid-column: 1 / -1;
	}

	.create-form input {
		background: #0b1220;
		color: #e2e8f0;
		border: 1px solid #334155;
		border-radius: 0.375rem;
		padding: 0.5rem 0.75rem;
		font: inherit;
	}

	.actions {
		display: flex;
		justify-content: flex-end;
	}

	.list {
		list-style: none;
		padding: 0;
		margin: 0;
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
	}

	.list a {
		display: flex;
		flex-direction: column;
		gap: 0.25rem;
		padding: 0.85rem 1rem;
		background: #1e293b;
		border-radius: 0.375rem;
		text-decoration: none;
		color: inherit;
	}

	.list a:hover {
		background: #283549;
	}

	.primary {
		display: flex;
		gap: 0.5rem;
		align-items: baseline;
	}

	.secondary {
		font-size: 0.875rem;
	}
</style>