codebay 0.0.1 → 0.2.1

package/src/components/CoinButton.svelte

@@ -0,0 +1,121 @@
+<script lang="ts">
+	// The theme bans border-radius globally, so "round" here means round in pixels.
+	import type { AvatarArt } from '../avatars/types.ts';
+	import Avatar from './Avatar.svelte';
+
+	let { href = '/avatars' }: { href?: string } = $props();
+
+	const coinArt: AvatarArt = {
+		name: 'coin',
+		pixels: [
+			'..####..',
+			'.#....#.',
+			'#..##..#',
+			'#.####.#',
+			'#.####.#',
+			'#..##..#',
+			'.#....#.',
+			'..####..'
+		]
+	};
+</script>
+
+<div class="coin-row">
+	<span class="pixel-line" aria-hidden="true"></span>
+	<a class="coin-btn" {href} aria-label="Draw your own avatar" title="Draw your own avatar">
+		<span class="new" aria-hidden="true">New</span>
+		<span class="coin" aria-hidden="true">
+			<Avatar art={coinArt} name="coin" scale={3} />
+		</span>
+	</a>
+	<span class="pixel-line" aria-hidden="true"></span>
+</div>
+
+<style>
+	.coin-row {
+		width: 100%;
+		max-width: 560px;
+		display: flex;
+		align-items: center;
+		gap: 16px;
+		padding: 8px 0;
+	}
+	/* Dotted LED rule: square dots, like a row of unlit pixels. */
+	.pixel-line {
+		flex: 1;
+		height: 2px;
+		background: repeating-linear-gradient(90deg, var(--rule) 0 2px, transparent 2px 6px);
+	}
+	.coin-btn {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 4px;
+		flex: none;
+		padding: 4px;
+		border: none;
+		background: none;
+		cursor: pointer;
+		text-decoration: none;
+	}
+	.new {
+		font-family: var(--font-mono);
+		font-weight: 700;
+		font-size: 8px;
+		text-transform: uppercase;
+		letter-spacing: 0.14em;
+		color: var(--ink-soft);
+		animation: coin-blink 2.6s steps(1, end) infinite;
+	}
+	.coin {
+		display: block;
+		box-shadow: 2px 2px 0 var(--ink);
+		animation: coin-spin 2.6s ease-in-out infinite;
+	}
+	/* The spin has to stop, or it would override the press transform. */
+	.coin-btn:hover .coin {
+		animation: none;
+		transform: translate(1px, 1px);
+		box-shadow: 1px 1px 0 var(--ink);
+	}
+	.coin-btn:focus-visible {
+		outline: 2px solid var(--ink);
+		outline-offset: 2px;
+	}
+	/* The sprite is symmetric, so the mirrored "back" reads as the same coin. */
+	@keyframes coin-spin {
+		0%,
+		55% {
+			transform: scaleX(1);
+		}
+		66% {
+			transform: scaleX(0.12);
+		}
+		78% {
+			transform: scaleX(-1);
+		}
+		89% {
+			transform: scaleX(0.12);
+		}
+		100% {
+			transform: scaleX(1);
+		}
+	}
+	@keyframes coin-blink {
+		0%,
+		55%,
+		100% {
+			opacity: 1;
+		}
+		66%,
+		89% {
+			opacity: 0.25;
+		}
+	}
+	@media (prefers-reduced-motion: reduce) {
+		.coin,
+		.new {
+			animation: none;
+		}
+	}
+</style>

package/src/components/CredMenu.svelte

@@ -0,0 +1,171 @@
+<script lang="ts">
+	import Link from '@lucide/svelte/icons/link';
+	import TriangleAlert from '@lucide/svelte/icons/triangle-alert';
+	import X from '@lucide/svelte/icons/x';
+	import toast from 'svelte-french-toast';
+	import type { AuthProvider } from '../types.ts';
+
+	let { auth }: { auth: AuthProvider[] } = $props();
+
+	let credOpen = $state(false);
+
+	const authedCount = $derived(auth.filter((a) => a.available).length);
+	const credState = $derived(
+		authedCount === auth.length ? 'ok' : authedCount === 0 ? 'error' : 'warn'
+	);
+	const credIcon = { ok: Link, warn: TriangleAlert, error: X } as const;
+	const CredIcon = $derived(credIcon[credState]);
+
+	function explainProvider(provider: AuthProvider) {
+		if (provider.available) {
+			toast.success(`${provider.label} credentials come from ${provider.source}.`);
+		} else {
+			const hint = provider.hint ? ` — ${provider.hint}` : '';
+			toast.error(`No ${provider.label} credentials found${hint}.`);
+		}
+	}
+
+	$effect(() => {
+		if (!credOpen) return;
+		const onClick = (e: MouseEvent) => {
+			if (!(e.target as Element)?.closest('.cred-menu')) credOpen = false;
+		};
+		const onKey = (e: KeyboardEvent) => {
+			if (e.key === 'Escape') credOpen = false;
+		};
+		// Defer registration so the click that opened the menu doesn't immediately close it.
+		window.addEventListener('click', onClick);
+		window.addEventListener('keydown', onKey);
+		return () => {
+			window.removeEventListener('click', onClick);
+			window.removeEventListener('keydown', onKey);
+		};
+	});
+</script>
+
+<div class="cred-menu">
+	<button
+		class="cred {credState}"
+		onclick={() => (credOpen = !credOpen)}
+		aria-expanded={credOpen}
+		aria-haspopup="menu"
+		aria-label="Credentials"
+		title="Credentials"
+	>
+		<CredIcon size={16} />
+	</button>
+	{#if credOpen}
+		<div class="cred-dropdown panel" role="menu">
+			{#each auth as provider (provider.id)}
+				<button
+					type="button"
+					class="cred-row"
+					role="menuitem"
+					onclick={() => explainProvider(provider)}
+					title={provider.available
+						? `Credentials from ${provider.source}, copied into each new instance.`
+						: `No credentials found on this computer${provider.hint ? ` — ${provider.hint}` : ''}.`}
+				>
+					<span class="dot {provider.available ? 'on' : 'off'}"></span>
+					<span class="cred-label">{provider.label}</span>
+					<span class="cred-state">{provider.available ? 'Authorized' : 'Not found'}</span>
+				</button>
+			{/each}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.cred-menu {
+		position: relative;
+		display: inline-flex;
+	}
+	.cred {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: 32px;
+		height: 32px;
+		font-size: 14px;
+		line-height: 1;
+		border: 1px solid var(--ink);
+		background: var(--ink);
+		color: var(--bg);
+		cursor: pointer;
+	}
+	.cred:hover {
+		background: var(--bg);
+		color: var(--ink);
+	}
+	/* Auth states: ok = muted green, warn = tasteful yellow, error = outline-only. */
+	.cred.ok {
+		background: var(--ok-bg);
+		border-color: var(--ok-line);
+		color: var(--ok-ink);
+	}
+	.cred.ok:hover {
+		background: var(--ok-ink);
+		border-color: var(--ok-ink);
+		color: var(--ok-bg);
+	}
+	.cred.warn {
+		background: var(--warn-bg);
+		border-color: var(--warn-line);
+		color: var(--warn-ink);
+	}
+	.cred.warn:hover {
+		background: var(--warn-ink);
+		border-color: var(--warn-ink);
+		color: var(--warn-bg);
+	}
+	.cred.error {
+		background: var(--bg);
+		color: var(--ink);
+	}
+	.cred-dropdown {
+		position: absolute;
+		right: 0;
+		top: calc(100% + 6px);
+		z-index: 20;
+		min-width: 220px;
+		padding: 6px;
+		background: var(--bg-card);
+	}
+	.cred-row {
+		display: flex;
+		align-items: center;
+		gap: 9px;
+		width: 100%;
+		padding: 7px 9px;
+		border: 0;
+		background: transparent;
+		color: var(--ink);
+		text-align: left;
+		font-family: var(--font-mono);
+		font-size: 12px;
+		cursor: pointer;
+	}
+	.cred-row:hover {
+		background: var(--ink);
+		color: var(--bg);
+	}
+	.cred-row:hover .cred-state {
+		color: var(--bg);
+	}
+	.dot {
+		flex: none;
+		width: 9px;
+		height: 9px;
+		border: 1px solid currentColor;
+	}
+	.dot.on {
+		background: currentColor;
+	}
+	.dot.off {
+		background: transparent;
+	}
+	.cred-state {
+		margin-left: auto;
+		color: var(--ink-soft);
+	}
+</style>

package/src/components/DashboardView.svelte

@@ -0,0 +1,198 @@
+<script lang="ts">
+	import { type Instance, type Preflight } from '../types.ts';
+	import FolderBrowser from './FolderBrowser.svelte';
+	import InstanceCard from './InstanceCard.svelte';
+	import TopBar from './TopBar.svelte';
+	import Button from './Button.svelte';
+	import Plus from '@lucide/svelte/icons/plus';
+	import { apiPost } from '../api.ts';
+
+	// Presentational: AppShell owns the single live subscription both views share.
+	let {
+		preflight,
+		instances,
+		loaded
+	}: { preflight: Preflight; instances: Instance[]; loaded: boolean } = $props();
+
+	let browserOpen = $state(false);
+	let creating = $state(false);
+	let actionError = $state<string | null>(null);
+	let editingId = $state<string | null>(null);
+	let editingName = $state('');
+
+	const ready = $derived(preflight.docker && preflight.cli);
+
+	async function createFrom(sourcePath: string, opts?: { branch?: string }) {
+		browserOpen = false;
+		creating = true;
+		actionError = null;
+		try {
+			await apiPost(
+				'/api/instances',
+				{ sourcePath, branch: opts?.branch },
+				'Failed to create instance'
+			);
+			// The live stream delivers the new instance.
+		} catch (err) {
+			actionError = (err as Error).message;
+		} finally {
+			creating = false;
+		}
+	}
+
+	async function act(id: string, action: 'start' | 'stop' | 'delete' | 'rebuild') {
+		actionError = null;
+		if (action === 'delete' && !confirm('Delete this instance and its copied files?')) return;
+		// Rebuild discards the container; the workspace copy lives on the host and survives.
+		if (
+			action === 'rebuild' &&
+			!confirm('Recreate this container and re-run setup? The workspace is kept.')
+		)
+			return;
+		try {
+			await apiPost(`/api/instances/${id}/${action}`, undefined, `Failed to ${action}`);
+			// The live stream reflects the resulting state.
+		} catch (err) {
+			actionError = (err as Error).message;
+		}
+	}
+
+	function startRename(instance: Instance) {
+		editingId = instance.id;
+		editingName = instance.name;
+	}
+
+	function cancelRename() {
+		editingId = null;
+		editingName = '';
+	}
+
+	async function commitRename(id: string) {
+		const name = editingName.trim();
+		const original = instances.find((i) => i.id === id)?.name;
+		// Nothing to do on an empty or unchanged name — just close the editor.
+		if (!name || name === original) {
+			cancelRename();
+			return;
+		}
+		cancelRename();
+		actionError = null;
+		try {
+			await apiPost(`/api/instances/${id}/rename`, { name }, 'Failed to rename');
+			// The live stream reflects the new name.
+		} catch (err) {
+			actionError = (err as Error).message;
+		}
+	}
+
+	async function deleteAll() {
+		actionError = null;
+		if (!confirm(`Delete all ${instances.length} instances and their copied files?`)) return;
+		try {
+			await apiPost('/api/instances/delete-all', undefined, 'Failed to delete all');
+			// The live stream reflects the resulting empty state.
+		} catch (err) {
+			actionError = (err as Error).message;
+		}
+	}
+</script>
+
+<TopBar
+	auth={preflight.auth}
+	canDelete={instances.length > 0}
+	{ready}
+	{creating}
+	onNew={() => (browserOpen = true)}
+	onDeleteAll={deleteAll}
+/>
+
+<main class="stage">
+	{#if !ready}
+		<div class="banner error">
+			<strong>Setup needed.</strong>
+			{#if !preflight.docker}<span>Docker daemon is not reachable.</span>{/if}
+			{#if !preflight.cli}<span>The devcontainer CLI is not available.</span>{/if}
+		</div>
+	{/if}
+
+	{#if actionError}
+		<div class="banner error"><strong>Error.</strong> <span>{actionError}</span></div>
+	{/if}
+
+	{#if !loaded}
+		<div class="empty"><p class="empty-sub">Loading…</p></div>
+	{:else if instances.length === 0}
+		<div class="empty">
+			<p class="empty-title">No instances yet</p>
+			<p class="empty-sub">Pick a project folder to spin up an isolated devcontainer.</p>
+			<Button variant="primary" icon={Plus} onclick={() => (browserOpen = true)} disabled={!ready}>
+				New instance
+			</Button>
+		</div>
+	{:else}
+		<ul class="grid">
+			{#each instances as instance (instance.id)}
+				<InstanceCard
+					{instance}
+					editing={editingId === instance.id}
+					bind:editingName
+					onact={(action) => act(instance.id, action)}
+					onstartrename={() => startRename(instance)}
+					oncommitrename={() => commitRename(instance.id)}
+					oncancelrename={cancelRename}
+				/>
+			{/each}
+		</ul>
+	{/if}
+</main>
+
+{#if browserOpen}
+	<FolderBrowser onpick={createFrom} onclose={() => (browserOpen = false)} />
+{/if}
+
+<style>
+	.stage {
+		max-width: 1080px;
+		margin: 0 auto;
+		padding: 28px 24px 80px;
+	}
+	.banner {
+		padding: 12px 16px;
+		margin-bottom: 20px;
+		display: flex;
+		gap: 8px;
+		flex-wrap: wrap;
+		font-family: var(--font-mono);
+		font-size: 13px;
+	}
+	.banner.error {
+		background: var(--bg-card);
+		color: var(--ink);
+		border: 2px solid var(--ink);
+		box-shadow: 4px 4px 0 var(--ink);
+	}
+	.empty {
+		text-align: center;
+		padding: 80px 20px;
+	}
+	.empty-title {
+		font-family: var(--font-display);
+		font-size: 26px;
+		font-weight: 700;
+		text-transform: uppercase;
+		letter-spacing: 0.06em;
+		margin: 0 0 8px;
+	}
+	.empty-sub {
+		color: var(--ink-soft);
+		margin: 0 0 22px;
+	}
+	.grid {
+		list-style: none;
+		margin: 0;
+		padding: 0;
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+		gap: 18px;
+	}
+</style>