tksadik92/wrenn-releases
1
0
Fork 0
forked from wrenn/wrenn
Code Pull Requests Activity

Merge pull request 'Frontend consistency and improvements' (#5) from frontend-enhancement into dev

Browse Source 
Reviewed-on: wrenn/sandbox#5
This commit is contained in:
Rafeed M. Bhuiyan
2026-03-24 10:00:27 +00:00
parent 336080bb6d 915d934c26
commit aaeccd32ce
6 changed files with 310 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
frontend/src/app.css
View File

@ -143,6 +143,18 @@ body {
}
}
/* Refresh icon spin — one full rotation */
@keyframes spin-once {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* Floating icon — used on empty-state icon containers */
@keyframes iconFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}
/* Respect user motion preferences — covers both CSS class animations and inline style animations */
@media (prefers-reduced-motion: reduce) {
*,

25
frontend/src/lib/utils/format.ts Normal file
View File

@ -0,0 +1,25 @@
/**
* Shared date/time formatting utilities.
* All functions accept `string | undefined` and return a safe fallback.
*/
export function formatDate(iso: string | undefined): string {
if (!iso) return '—';
return new Date(iso).toLocaleString('en-US', {
month: 'short',
day: 'numeric',
year: 'numeric',
hour: '2-digit',
minute: '2-digit',
hour12: false
});
}
export function timeAgo(iso: string | undefined): string {
if (!iso) return '';
const seconds = Math.floor((Date.now() - new Date(iso).getTime()) / 1000);
if (seconds < 60) return `${seconds}s ago`;
if (seconds < 3600) return `${Math.floor(seconds / 60)}m ago`;
if (seconds < 86400) return `${Math.floor(seconds / 3600)}h ago`;
return `${Math.floor(seconds / 86400)}d ago`;
}

58
frontend/src/routes/dashboard/capsules/+page.svelte
View File

@ -57,6 +57,9 @@
let destroying = $state(false);
let destroyError = $state<string | null>(null);
// Delight: briefly highlight a newly created capsule row
let newCapsuleId = $state<string | null>(null);
let filteredCapsules = $derived.by(() => {
let list = searchQuery
? capsules.filter((c) => c.id.toLowerCase().includes(searchQuery.toLowerCase()))
@ -217,6 +220,9 @@
capsules = [result.data, ...capsules];
showCreateDialog = false;
createForm = { template: 'minimal', vcpus: 1, memory_mb: 512, timeout_sec: 0 };
// Flash the new row briefly
newCapsuleId = result.data.id;
setTimeout(() => { newCapsuleId = null; }, 1600);
} else {
createError = result.error;
}
@ -260,20 +266,35 @@
</script>
<style>
@keyframes spin-once {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.refresh-spin {
animation: spin-once 0.6s ease-in-out;
}
/* Row born flash — new capsule appears with a brief accent glow */
@keyframes capsule-born {
0%, 25% { background-color: rgba(94, 140, 88, 0.1); }
100% { background-color: transparent; }
}
.capsule-born {
animation: capsule-born 1.6s ease-out forwards;
}
/* Left accent stripe — slides in on row hover */
.row-stripe {
transform: scaleY(0);
transform-origin: center;
transition: transform 0.18s cubic-bezier(0.25, 1, 0.5, 1);
}
.capsule-row:hover .row-stripe {
transform: scaleY(1);
}
</style>
<!-- svelte-ignore a11y_no_static_element_interactions -->
<svelte:window onclick={handleClickOutside} onkeydown={(e) => { if (e.key === 'Escape') openMenuId = null; }} />
<svelte:head>
<title>Wrenn - Capsules</title>
<title>Wrenn — Capsules</title>
</svelte:head>
<div class="flex h-screen overflow-hidden">
@ -397,6 +418,20 @@
title={autoRefresh ? 'Click to disable auto-refresh' : 'Click to enable auto-refresh (30s)'}
>
{#if autoRefresh}
<!-- Radial progress ring — drains as countdown ticks down -->
<svg width="14" height="14" viewBox="0 0 16 16" fill="none" aria-hidden="true">
<circle cx="8" cy="8" r="5" stroke="var(--color-accent-glow-mid)" stroke-width="1.5" />
<circle
cx="8" cy="8" r="5"
stroke="var(--color-accent)"
stroke-width="1.5"
stroke-linecap="round"
stroke-dasharray="31.416"
stroke-dashoffset={31.416 * (1 - countdown / REFRESH_INTERVAL)}
transform="rotate(-90 8 8)"
style="transition: stroke-dashoffset 1s linear"
/>
</svg>
{countdown}s
{:else}
Off
@ -469,10 +504,14 @@
</div>
{:else}
{#each filteredCapsules as capsule, i (capsule.id)}
{@const stripeColor = capsule.status === 'running' ? 'bg-[var(--color-accent)]' : capsule.status === 'paused' ? 'bg-[var(--color-amber)]' : 'bg-[var(--color-text-muted)]'}
<div
class="grid grid-cols-[1.6fr_0.8fr_0.5fr_0.5fr_0.6fr_1fr_0.9fr] items-center border-b border-[var(--color-border)] transition-colors duration-150 hover:bg-[var(--color-bg-3)] last:border-b-0"
class="capsule-row relative grid grid-cols-[1.6fr_0.8fr_0.5fr_0.5fr_0.6fr_1fr_0.9fr] items-center overflow-hidden border-b border-[var(--color-border)] transition-colors duration-150 hover:bg-[var(--color-bg-3)] last:border-b-0 {newCapsuleId === capsule.id ? 'capsule-born' : ''}"
style="animation: fadeUp 0.35s ease both; animation-delay: {i * 40}ms"
>
<!-- Left accent stripe — slides in on hover, color-keyed to status -->
<div class="row-stripe pointer-events-none absolute left-0 top-0 h-full w-0.5 {stripeColor}"></div>
<!-- ID with status dot -->
<div class="flex items-center gap-2.5 px-5 py-4">
{#if capsule.status === 'running'}
@ -485,7 +524,12 @@
{:else}
<span class="inline-flex h-[6px] w-[6px] shrink-0 rounded-full bg-[var(--color-text-muted)]"></span>
{/if}
{#if searchQuery && capsule.id.toLowerCase().includes(searchQuery.toLowerCase())}
{@const matchIdx = capsule.id.toLowerCase().indexOf(searchQuery.toLowerCase())}
<span class="font-mono text-ui text-[var(--color-text-bright)]">{capsule.id.slice(0, matchIdx)}<mark class="rounded-[2px] bg-[var(--color-accent-glow-mid)] px-0.5 text-[var(--color-accent-bright)] not-italic">{capsule.id.slice(matchIdx, matchIdx + searchQuery.length)}</mark>{capsule.id.slice(matchIdx + searchQuery.length)}</span>
{:else}
<span class="font-mono text-ui text-[var(--color-text-bright)]">{capsule.id}</span>
{/if}
</div>
<!-- Template -->
@ -536,7 +580,7 @@
openMenuId = capsule.id;
}
}}
class="inline-flex items-center gap-1.5 rounded-[var(--radius-button)] border border-[var(--color-border)] bg-[var(--color-bg-2)] px-2.5 py-1 text-label font-semibold uppercase tracking-[0.04em] text-[var(--color-text-secondary)] transition-colors duration-150 hover:border-[var(--color-border-mid)] hover:text-[var(--color-text-primary)]"
class="inline-flex items-center gap-1.5 rounded-[var(--radius-button)] border px-2.5 py-1 text-label font-semibold uppercase tracking-[0.04em] transition-colors duration-150 {capsule.status === 'running' ? 'border-[var(--color-accent)]/40 bg-[var(--color-accent-glow)] text-[var(--color-accent-mid)] hover:border-[var(--color-accent)]/70 hover:text-[var(--color-accent-bright)]' : capsule.status === 'paused' ? 'border-[var(--color-amber)]/30 bg-[var(--color-amber)]/5 text-[var(--color-amber)] hover:border-[var(--color-amber)]/60' : 'border-[var(--color-border)] bg-[var(--color-bg-2)] text-[var(--color-text-secondary)] hover:border-[var(--color-border-mid)] hover:text-[var(--color-text-primary)]'}"
>
{capsule.status}
<svg

120
frontend/src/routes/dashboard/keys/+page.svelte
View File

@ -3,6 +3,7 @@
import { onMount } from 'svelte';
import { listKeys, createKey, revokeKey, type APIKey } from '$lib/api/keys';
import { toast } from '$lib/toast.svelte';
import { formatDate, timeAgo } from '$lib/utils/format';
let collapsed = $state(
typeof window !== 'undefined'
@ -24,6 +25,10 @@
// Reveal state — shown immediately after creation
let newKey = $state<APIKey | null>(null);
let copied = $state(false);
let copyCount = $state(0); // increment to re-trigger bounce animation
// Delight: flash the row for a key once its reveal dialog is dismissed
let flashKeyId = $state<string | null>(null);
// Revoke state
let revokeTarget = $state<APIKey | null>(null);
@ -53,6 +58,7 @@
showCreate = false;
createName = '';
copied = false;
copyCount = 0;
} else {
createError = result.error;
}
@ -74,44 +80,32 @@
revoking = false;
}
function dismissReveal() {
const id = newKey?.id ?? null;
newKey = null;
if (id) {
flashKeyId = id;
setTimeout(() => { flashKeyId = null; }, 1600);
}
}
async function copyKey() {
if (!newKey?.key) return;
try {
await navigator.clipboard.writeText(newKey.key);
copied = true;
copyCount += 1;
setTimeout(() => (copied = false), 2000);
} catch {
toast.error('Copy failed — select the key text and copy it manually.');
}
}
function formatDate(iso: string | undefined): string {
if (!iso) return '—';
return new Date(iso).toLocaleString('en-US', {
month: 'short',
day: 'numeric',
year: 'numeric',
hour: '2-digit',
minute: '2-digit',
hour12: false
});
}
function timeAgo(iso: string | undefined): string {
if (!iso) return '';
const seconds = Math.floor((Date.now() - new Date(iso).getTime()) / 1000);
if (seconds < 60) return `${seconds}s ago`;
if (seconds < 3600) return `${Math.floor(seconds / 60)}m ago`;
if (seconds < 86400) return `${Math.floor(seconds / 3600)}h ago`;
return `${Math.floor(seconds / 86400)}d ago`;
}
onMount(fetchKeys);
</script>
<svelte:head>
<title>Wrenn - API Keys</title>
<title>Wrenn — API Keys</title>
</svelte:head>
<div class="flex h-screen overflow-hidden">
@ -170,7 +164,7 @@
</div>
{:else if keys.length === 0}
<div class="flex flex-col items-center justify-center py-[72px]">
<div class="mb-5 flex h-14 w-14 items-center justify-center rounded-[var(--radius-card)] border border-[var(--color-border-mid)] bg-[var(--color-bg-3)]">
<div class="mb-5 flex h-14 w-14 items-center justify-center rounded-[var(--radius-card)] border border-[var(--color-border-mid)] bg-[var(--color-bg-3)]" style="animation: iconFloat 4s ease-in-out infinite">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="var(--color-text-secondary)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4" />
</svg>
@ -191,7 +185,7 @@
<div class="rounded-[var(--radius-card)] border border-[var(--color-border)] overflow-hidden">
<!-- Table header -->
<div class="grid grid-cols-[2fr_1.2fr_1.4fr_1.4fr_80px] border-b border-[var(--color-border)] bg-[var(--color-bg-3)]">
<div class="px-5 py-3 text-label font-semibold uppercase tracking-[0.05em] text-[var(--color-text-muted)]">Name / Key</div>
<div class="px-5 py-3 text-label font-semibold uppercase tracking-[0.05em] text-[var(--color-text-muted)]">Key</div>
<div class="px-5 py-3 text-label font-semibold uppercase tracking-[0.05em] text-[var(--color-text-muted)]">Created By</div>
<div class="px-5 py-3 text-label font-semibold uppercase tracking-[0.05em] text-[var(--color-text-muted)]">Created</div>
<div class="px-5 py-3 text-label font-semibold uppercase tracking-[0.05em] text-[var(--color-text-muted)]">Last Used</div>
@ -200,13 +194,14 @@
{#each keys as key, i (key.id)}
<div
class="grid grid-cols-[2fr_1.2fr_1.4fr_1.4fr_80px] items-center border-b border-[var(--color-border)] transition-colors duration-150 hover:bg-[var(--color-bg-3)] last:border-b-0"
class="key-row relative grid grid-cols-[2fr_1.2fr_1.4fr_1.4fr_80px] items-center overflow-hidden border-b border-[var(--color-border)] transition-colors duration-150 hover:bg-[var(--color-bg-3)] last:border-b-0 {flashKeyId === key.id ? 'key-born' : ''}"
style="animation: fadeUp 0.35s ease both; animation-delay: {i * 40}ms"
>
<div class="row-stripe pointer-events-none absolute left-0 top-0 h-full w-0.5 bg-[var(--color-accent)]"></div>
<!-- Name + prefix -->
<div class="min-w-0 flex flex-col gap-0.5 px-5 py-4">
<div class="min-w-0 flex flex-col gap-1 px-5 py-4">
<span class="truncate text-ui font-medium text-[var(--color-text-bright)]">{key.name || '—'}</span>
<span class="font-mono text-meta text-[var(--color-text-muted)]">{key.key_prefix}…</span>
<span class="inline-flex w-fit items-center rounded-sm border border-[var(--color-border-mid)] bg-[var(--color-bg-4)] px-1.5 py-0.5 font-mono text-badge text-[var(--color-text-muted)]">{key.key_prefix}…</span>
</div>
<!-- Created by -->
@ -264,7 +259,7 @@
onkeydown={(e) => { if (e.key === 'Escape' && !creating) showCreate = false; }}
></div>
<div class="relative w-full max-w-[400px] rounded-[var(--radius-card)] border border-[var(--color-border-mid)] bg-[var(--color-bg-2)] p-6" style="animation: fadeUp 0.2s ease both">
<div class="relative w-full max-w-[420px] rounded-[var(--radius-card)] border border-[var(--color-border-mid)] bg-[var(--color-bg-2)] p-6" style="animation: fadeUp 0.2s ease both">
<h2 class="font-serif text-heading tracking-[-0.02em] text-[var(--color-text-bright)]">New API Key</h2>
<p class="mt-1 text-ui text-[var(--color-text-tertiary)]">Give your key a name to identify it later.</p>
@ -321,19 +316,19 @@
<!-- svelte-ignore a11y_no_static_element_interactions -->
<div
class="absolute inset-0 bg-black/60"
onclick={() => { newKey = null; }}
onkeydown={(e) => { if (e.key === 'Escape') newKey = null; }}
onclick={dismissReveal}
onkeydown={(e) => { if (e.key === 'Escape') dismissReveal(); }}
></div>
<div class="relative w-full max-w-[480px] rounded-[var(--radius-card)] border border-[var(--color-border-mid)] bg-[var(--color-bg-2)] p-6" style="animation: fadeUp 0.2s ease both">
<!-- Success indicator -->
<div class="mb-4 flex items-center gap-2.5">
<span class="flex h-5 w-5 items-center justify-center rounded-full bg-[var(--color-accent-glow-mid)]">
<span class="flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-[var(--color-accent-glow-mid)]" style="animation: circlePop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both">
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="var(--color-accent-bright)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
<polyline points="20 6 9 17 4 12" />
<polyline points="20 6 9 17 4 12" style="stroke-dasharray: 24; animation: checkDraw 0.35s 0.2s ease both" />
</svg>
</span>
<span class="text-meta font-semibold text-[var(--color-accent-mid)]">Key created successfully</span>
<span class="text-meta font-semibold text-[var(--color-accent-mid)]" style="animation: fadeUp 0.3s 0.15s ease both">Key created successfully</span>
</div>
<h2 class="font-serif text-heading tracking-[-0.02em] text-[var(--color-text-bright)]">{newKey.name || 'API Key'}</h2>
@ -342,13 +337,15 @@
</p>
<!-- Key display -->
<div class="mt-5 rounded-[var(--radius-input)] border border-[var(--color-border-mid)] bg-[var(--color-bg-0)] p-4">
<div class="mt-5 rounded-[var(--radius-input)] border bg-[var(--color-bg-0)] p-4" style="animation: keyRevealGlow 1.4s 0.1s ease-out both">
<div class="flex items-center gap-3">
<span class="min-w-0 flex-1 break-all font-mono text-ui leading-relaxed text-[var(--color-text-bright)]">
{newKey.key ?? ''}
</span>
{#key copyCount}
<button
onclick={copyKey}
style={copied ? 'animation: copyBounce 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both' : ''}
class="shrink-0 flex items-center gap-1.5 rounded-[var(--radius-button)] border px-3 py-1.5 text-meta font-semibold transition-all duration-150
{copied
? 'border-[var(--color-accent)]/40 bg-[var(--color-accent-glow-mid)] text-[var(--color-accent-mid)]'
@ -367,6 +364,7 @@
Copy
{/if}
</button>
{/key}
</div>
</div>
@ -383,7 +381,7 @@
<div class="mt-6 flex justify-end">
<button
onclick={() => { newKey = null; }}
onclick={dismissReveal}
class="rounded-[var(--radius-button)] bg-[var(--color-bg-4)] border border-[var(--color-border-mid)] px-5 py-2 text-ui font-semibold text-[var(--color-text-primary)] transition-colors duration-150 hover:border-[var(--color-border-mid)] hover:bg-[var(--color-bg-5)]"
>
Done
@ -409,7 +407,7 @@
Revoke <span class="font-medium text-[var(--color-text-secondary)]">{revokeTarget.name || revokeTarget.id}</span>?
Any request using it will stop working immediately.
</p>
<p class="mt-1.5 font-mono text-meta text-[var(--color-text-muted)]">{revokeTarget.key_prefix}…</p>
<span class="mt-2 inline-flex items-center rounded-sm border border-[var(--color-border-mid)] bg-[var(--color-bg-4)] px-1.5 py-0.5 font-mono text-badge text-[var(--color-text-muted)]">{revokeTarget.key_prefix}…</span>
{#if revokeError}
<div class="mt-4 rounded-[var(--radius-input)] border border-[var(--color-red)]/30 bg-[var(--color-red)]/5 px-3 py-2 text-meta text-[var(--color-red)]">
@ -443,3 +441,51 @@
</div>
</div>
{/if}
<style>
/* Checkmark stroke draw — plays on reveal dialog open */
@keyframes checkDraw {
from { stroke-dashoffset: 24; }
to { stroke-dashoffset: 0; }
}
/* Success circle scales in with a spring overshoot */
@keyframes circlePop {
from { transform: scale(0); opacity: 0; }
60% { transform: scale(1.18); opacity: 1; }
to { transform: scale(1); opacity: 1; }
}
/* Key display area pulses accent border on dialog open — draws eye to "copy this" */
@keyframes keyRevealGlow {
0% { border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(94,140,88,0.16); }
60% { border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(94,140,88,0.08); }
100% { border-color: var(--color-border-mid); box-shadow: none; }
}
/* Copy button spring bounce on successful copy */
@keyframes copyBounce {
0% { transform: scale(1); }
40% { transform: scale(1.12); }
100% { transform: scale(1); }
}
/* Row born flash — matches capsule-born pattern */
@keyframes key-born {
0%, 25% { background-color: rgba(94, 140, 88, 0.1); }
100% { background-color: transparent; }
}
.key-born {
animation: key-born 1.6s ease-out forwards;
}
/* Left accent stripe — slides in on row hover */
.row-stripe {
transform: scaleY(0);
transform-origin: center;
transition: transform 0.18s cubic-bezier(0.25, 1, 0.5, 1);
}
.key-row:hover .row-stripe {
transform: scaleY(1);
}
</style>

154
frontend/src/routes/dashboard/snapshots/+page.svelte
View File

@ -2,12 +2,15 @@
import Sidebar from '$lib/components/Sidebar.svelte';
import { onMount } from 'svelte';
import { goto } from '$app/navigation';
import { fly } from 'svelte/transition';
import { cubicIn, cubicOut } from 'svelte/easing';
import {
listSnapshots,
deleteSnapshot,
createCapsule,
type Snapshot
} from '$lib/api/capsules';
import { formatDate, timeAgo } from '$lib/utils/format';
let collapsed = $state(
typeof window !== 'undefined'
@ -110,29 +113,10 @@
return `${(bytes / 1024 ** 3).toFixed(2)} GB`;
}
function formatDate(iso: string): string {
return new Date(iso).toLocaleString('en-US', {
month: 'short',
day: 'numeric',
year: 'numeric',
hour: '2-digit',
minute: '2-digit',
hour12: false
});
}
function timeAgo(iso: string): string {
const seconds = Math.floor((Date.now() - new Date(iso).getTime()) / 1000);
if (seconds < 60) return `${seconds}s ago`;
if (seconds < 3600) return `${Math.floor(seconds / 60)}m ago`;
if (seconds < 86400) return `${Math.floor(seconds / 3600)}h ago`;
return `${Math.floor(seconds / 86400)}d ago`;
}
function emptyHeading(f: TypeFilter): string {
if (f === 'snapshot') return 'No snapshots';
if (f === 'base') return 'No images';
return 'No snapshots yet';
return 'No templates yet';
}
function emptyDescription(f: TypeFilter): string {
@ -145,7 +129,7 @@
</script>
<svelte:head>
<title>Wrenn - Templates</title>
<title>Wrenn — Templates</title>
</svelte:head>
<!-- svelte-ignore a11y_no_static_element_interactions -->
@ -228,13 +212,39 @@
{/if}
{#if loading}
<div class="flex items-center justify-center py-24">
<div class="flex items-center gap-3 text-ui text-[var(--color-text-secondary)]">
<svg class="animate-spin" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M21 12a9 9 0 1 1-6.219-8.56" />
</svg>
Loading snapshots...
<!-- Skeleton loading — matches table layout -->
<div class="mb-4 flex items-center justify-between">
<div class="flex gap-1.5">
{#each Array(3) as _, i}
<div class="skeleton h-6 rounded-full px-3" style="width: {[36, 80, 60][i]}px; animation-delay: {i * 80}ms"></div>
{/each}
</div>
<div class="skeleton h-4 w-20 rounded-sm"></div>
</div>
<div class="overflow-hidden rounded-[var(--radius-card)] border border-[var(--color-border)]">
<div class="grid border-b border-[var(--color-border)] bg-[var(--color-bg-3)]" style="grid-template-columns: 2fr 1fr 0.7fr 0.9fr 0.8fr 1.3fr 140px">
<div class="px-5 py-3 text-label font-semibold uppercase tracking-[0.05em] text-[var(--color-text-muted)]">Name</div>
<div class="px-5 py-3 text-label font-semibold uppercase tracking-[0.05em] text-[var(--color-text-muted)]">Type</div>
<div class="px-5 py-3 text-label font-semibold uppercase tracking-[0.05em] text-[var(--color-text-muted)]">vCPUs</div>
<div class="px-5 py-3 text-label font-semibold uppercase tracking-[0.05em] text-[var(--color-text-muted)]">Memory</div>
<div class="px-5 py-3 text-label font-semibold uppercase tracking-[0.05em] text-[var(--color-text-muted)]">Size</div>
<div class="px-5 py-3 text-label font-semibold uppercase tracking-[0.05em] text-[var(--color-text-muted)]">Created</div>
<div class="px-5 py-3 text-right text-label font-semibold uppercase tracking-[0.05em] text-[var(--color-text-muted)]">Actions</div>
</div>
{#each Array(4) as _, i}
<div
class="grid items-center border-b border-[var(--color-border)] last:border-b-0"
style="grid-template-columns: 2fr 1fr 0.7fr 0.9fr 0.8fr 1.3fr 140px"
>
<div class="px-5 py-4"><div class="skeleton h-3 rounded-sm" style="width: {[160, 120, 180, 140][i]}px; animation-delay: {i * 60}ms"></div></div>
<div class="px-5 py-4"><div class="skeleton h-[18px] w-16 rounded-[3px]" style="animation-delay: {i * 60 + 20}ms"></div></div>
<div class="px-5 py-4"><div class="skeleton h-3 w-5 rounded-sm" style="animation-delay: {i * 60 + 40}ms"></div></div>
<div class="px-5 py-4"><div class="skeleton h-3 w-14 rounded-sm" style="animation-delay: {i * 60 + 60}ms"></div></div>
<div class="px-5 py-4"><div class="skeleton h-3 w-12 rounded-sm" style="animation-delay: {i * 60 + 80}ms"></div></div>
<div class="px-5 py-4"><div class="skeleton h-3 w-20 rounded-sm" style="animation-delay: {i * 60 + 100}ms"></div></div>
<div class="flex items-center justify-end px-3 py-3"><div class="skeleton h-7 w-[100px] rounded-[var(--radius-button)]" style="animation-delay: {i * 60 + 120}ms"></div></div>
</div>
{/each}
</div>
{:else}
<!-- Filter row -->
@ -243,7 +253,7 @@
{#each ([['all', 'All'], ['snapshot', 'Snapshots'], ['base', 'Images']] as const) as [val, label]}
<button
onclick={() => (typeFilter = val)}
class="rounded-full border px-3 py-1 text-meta font-medium transition-colors duration-150 {typeFilter === val
class="rounded-full border px-3 py-1 text-meta font-medium transition-all duration-150 active:scale-95 {typeFilter === val
? 'border-[var(--color-border-mid)] bg-[var(--color-bg-5)] text-[var(--color-text-bright)]'
: 'border-[var(--color-border)] bg-[var(--color-bg-3)] text-[var(--color-text-secondary)] hover:border-[var(--color-border-mid)] hover:text-[var(--color-text-primary)]'}"
>
@ -253,19 +263,30 @@
</div>
<span class="text-meta text-[var(--color-text-muted)]">
{filteredSnapshots.length}
{filteredSnapshots.length === 1 ? 'snapshot' : 'snapshots'}
{typeFilter === 'all'
? filteredSnapshots.length === 1 ? 'template' : 'templates'
: typeFilter === 'snapshot'
? filteredSnapshots.length === 1 ? 'snapshot' : 'snapshots'
: filteredSnapshots.length === 1 ? 'image' : 'images'}
</span>
</div>
{#if filteredSnapshots.length === 0}
<!-- Empty state -->
<div class="flex flex-col items-center justify-center py-[72px]">
<div class="mb-5 flex h-14 w-14 items-center justify-center rounded-[var(--radius-card)] border border-[var(--color-border-mid)] bg-[var(--color-bg-3)]">
<div class="relative mb-5">
<!-- Radial glow behind icon -->
<div class="absolute inset-0 -m-4 rounded-full" style="background: radial-gradient(circle, rgba(94,140,88,0.08) 0%, transparent 70%)"></div>
<div
class="relative flex h-14 w-14 items-center justify-center rounded-[var(--radius-card)] border border-[var(--color-border-mid)] bg-[var(--color-bg-3)]"
style="animation: iconFloat 4s ease-in-out infinite"
>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="var(--color-text-secondary)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z" />
<polyline points="3.27 6.96 12 12.01 20.73 6.96" /><line x1="12" y1="22.08" x2="12" y2="12" />
</svg>
</div>
</div>
<p class="font-serif text-heading tracking-[-0.02em] text-[var(--color-text-bright)]">
{emptyHeading(typeFilter)}
</p>
@ -275,7 +296,7 @@
{#if typeFilter === 'all' || typeFilter === 'snapshot'}
<a
href="/dashboard/capsules"
class="mt-6 flex items-center gap-2 rounded-[var(--radius-button)] border border-[var(--color-border-mid)] bg-[var(--color-bg-3)] px-4 py-2 text-ui font-medium text-[var(--color-text-secondary)] transition-colors duration-150 hover:border-[var(--color-border-mid)] hover:bg-[var(--color-bg-4)] hover:text-[var(--color-text-primary)]"
class="mt-6 flex items-center gap-2 rounded-[var(--radius-button)] border border-[var(--color-border-mid)] bg-[var(--color-bg-3)] px-4 py-2 text-ui font-medium text-[var(--color-text-secondary)] transition-all duration-150 hover:border-[var(--color-border-mid)] hover:bg-[var(--color-bg-4)] hover:text-[var(--color-text-primary)] active:scale-95"
>
Go to Capsules
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
@ -301,10 +322,14 @@
<!-- Rows -->
{#each filteredSnapshots as snapshot, i (snapshot.name)}
{@const stripeColor = snapshot.type === 'snapshot' ? 'bg-[var(--color-accent)]' : 'bg-[var(--color-blue)]'}
<div
class="grid items-center border-b border-[var(--color-border)] transition-colors duration-150 hover:bg-[var(--color-bg-3)] last:border-b-0"
style="grid-template-columns: 2fr 1fr 0.7fr 0.9fr 0.8fr 1.3fr 140px; animation: fadeUp 0.35s ease both; animation-delay: {i * 40}ms"
class="snapshot-row row-item relative grid items-center overflow-hidden border-b border-[var(--color-border)] transition-colors duration-150 hover:bg-[var(--color-bg-3)] last:border-b-0"
style="grid-template-columns: 2fr 1fr 0.7fr 0.9fr 0.8fr 1.3fr 140px"
in:fly={{ y: 6, duration: 350, delay: i * 40, easing: cubicOut }}
out:fly={{ x: -12, duration: 180, easing: cubicIn }}
>
<div class="row-stripe pointer-events-none absolute left-0 top-0 h-full w-0.5 {stripeColor}"></div>
<!-- Name -->
<div class="min-w-0 px-5 py-4">
<span class="block truncate font-mono text-ui text-[var(--color-text-bright)]">{snapshot.name}</span>
@ -314,12 +339,15 @@
<div class="px-5 py-4">
{#if snapshot.type === 'snapshot'}
<span class="inline-flex items-center gap-1.5 rounded-[3px] border border-[var(--color-accent)]/20 bg-[var(--color-accent-glow-mid)] px-2 py-0.5 text-badge font-semibold uppercase tracking-[0.04em] text-[var(--color-accent-mid)]">
<span class="inline-block h-[5px] w-[5px] rounded-full bg-[var(--color-accent)]" style="box-shadow: 0 0 6px rgba(94,140,88,0.5)"></span>
<span
class="inline-block h-[5px] w-[5px] shrink-0 rounded-full bg-[var(--color-accent)]"
style="box-shadow: 0 0 6px rgba(94,140,88,0.5); animation: wrenn-glow 1.8s ease-in-out infinite"
></span>
Snapshot
</span>
{:else}
<span class="inline-flex items-center gap-1.5 rounded-[3px] border border-[var(--color-blue)]/20 bg-[var(--color-blue)]/10 px-2 py-0.5 text-badge font-semibold uppercase tracking-[0.04em] text-[var(--color-blue)]">
<span class="inline-block h-[5px] w-[5px] rounded-full bg-[var(--color-blue)]"></span>
<span class="inline-block h-[5px] w-[5px] shrink-0 rounded-full bg-[var(--color-blue)]"></span>
Image
</span>
{/if}
@ -355,11 +383,11 @@
<!-- Actions: split button -->
<div class="flex items-center justify-end px-3 py-3">
<div class="split-btn-container relative flex items-stretch overflow-hidden rounded-[var(--radius-button)] border border-[var(--color-border-mid)] bg-[var(--color-bg-3)]">
<div class="split-btn-container relative flex items-stretch overflow-hidden rounded-[var(--radius-button)] border border-[var(--color-border-mid)] bg-[var(--color-bg-3)] transition-shadow duration-200 hover:shadow-[0_0_0_1px_var(--color-border-mid),0_0_8px_rgba(94,140,88,0.06)]">
<!-- Launch part -->
<button
onclick={() => openLaunch(snapshot)}
class="flex items-center px-3 py-1.5 text-meta font-medium text-[var(--color-text-primary)] transition-colors duration-150 hover:bg-[var(--color-bg-4)] hover:text-[var(--color-text-bright)]"
class="flex items-center px-3 py-1.5 text-meta font-medium text-[var(--color-text-primary)] transition-all duration-150 hover:bg-[var(--color-bg-4)] hover:text-[var(--color-text-bright)] active:scale-95"
>
Launch
</button>
@ -393,8 +421,13 @@
</div>
<p class="mt-3 text-meta text-[var(--color-text-muted)]">
{filteredSnapshots.length} {filteredSnapshots.length === 1 ? 'snapshot' : 'snapshots'}
{typeFilter !== 'all' ? `· filtered` : '· total'}
{filteredSnapshots.length}
{typeFilter === 'all'
? filteredSnapshots.length === 1 ? 'template' : 'templates'
: typeFilter === 'snapshot'
? filteredSnapshots.length === 1 ? 'snapshot' : 'snapshots'
: filteredSnapshots.length === 1 ? 'image' : 'images'}
{typeFilter !== 'all' ? '· filtered' : '· total'}
</p>
{/if}
{/if}
@ -405,7 +438,10 @@
<!-- Status bar -->
<footer class="flex h-7 shrink-0 items-center justify-end border-t border-[var(--color-border)] bg-[var(--color-bg-1)] px-7">
<div class="flex items-center gap-1.5">
<span class="inline-flex h-[5px] w-[5px] rounded-full bg-[var(--color-accent)]"></span>
<span
class="inline-flex h-[5px] w-[5px] rounded-full bg-[var(--color-accent)]"
style="animation: wrenn-glow 2.4s ease-in-out infinite"
></span>
<span class="font-mono text-label uppercase tracking-[0.04em] text-[var(--color-text-secondary)]">All systems operational</span>
</div>
</footer>
@ -487,7 +523,7 @@
<button
onclick={handleDelete}
disabled={deleting}
class="flex items-center gap-2 rounded-[var(--radius-button)] bg-[var(--color-red)] px-5 py-2 text-ui font-semibold text-white transition-all duration-150 hover:brightness-115 hover:-translate-y-px active:translate-y-0 disabled:opacity-50 disabled:hover:translate-y-0"
class="flex items-center gap-2 rounded-[var(--radius-button)] bg-[var(--color-red)] px-5 py-2 text-ui font-semibold text-white transition-all duration-150 hover:brightness-115 hover:-translate-y-px active:translate-y-0 active:scale-95 disabled:opacity-50 disabled:hover:translate-y-0"
>
{#if deleting}
<svg class="animate-spin" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
@ -535,7 +571,10 @@
</label>
<div class="flex items-center gap-2 rounded-[var(--radius-input)] border border-[var(--color-border)] bg-[var(--color-bg-0)] px-3 py-2">
{#if launchTarget.type === 'snapshot'}
<span class="inline-block h-[6px] w-[6px] shrink-0 rounded-full bg-[var(--color-accent)]" style="box-shadow: 0 0 6px rgba(94,140,88,0.5)"></span>
<span
class="inline-block h-[6px] w-[6px] shrink-0 rounded-full bg-[var(--color-accent)]"
style="box-shadow: 0 0 6px rgba(94,140,88,0.5); animation: wrenn-glow 1.8s ease-in-out infinite"
></span>
{:else}
<span class="inline-block h-[6px] w-[6px] shrink-0 rounded-full bg-[var(--color-blue)]"></span>
{/if}
@ -612,7 +651,7 @@
<button
onclick={handleLaunch}
disabled={launching}
class="flex items-center gap-2 rounded-[var(--radius-button)] bg-[var(--color-accent)] px-5 py-2 text-ui font-semibold text-white transition-all duration-150 hover:brightness-115 hover:-translate-y-px active:translate-y-0 disabled:opacity-50 disabled:hover:translate-y-0"
class="flex items-center gap-2 rounded-[var(--radius-button)] bg-[var(--color-accent)] px-5 py-2 text-ui font-semibold text-white transition-all duration-150 hover:brightness-115 hover:-translate-y-px active:translate-y-0 active:scale-95 disabled:opacity-50 disabled:hover:translate-y-0"
>
{#if launching}
<svg class="animate-spin" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
@ -627,3 +666,32 @@
</div>
</div>
{/if}
<style>
/* Skeleton shimmer — GPU-composited, no paint cost */
.skeleton {
background: linear-gradient(
90deg,
var(--color-bg-4) 0%,
var(--color-bg-5) 50%,
var(--color-bg-4) 100%
);
background-size: 200% 100%;
animation: shimmer 1.6s ease-in-out infinite;
}
@keyframes shimmer {
0% { background-position: 200% center; }
100% { background-position: -200% center; }
}
/* Left accent stripe — slides in on hover, color-keyed to snapshot type */
.row-stripe {
transform: scaleY(0);
transform-origin: center;
transition: transform 0.18s cubic-bezier(0.25, 1, 0.5, 1);
}
.snapshot-row:hover .row-stripe {
transform: scaleY(1);
}
</style>

5
frontend/src/routes/dashboard/team/+page.svelte
View File

@ -266,7 +266,8 @@
return palette[email.charCodeAt(0) % palette.length];
}
function formatDate(iso: string): string {
function formatDate(iso: string | undefined): string {
if (!iso) return '—';
return new Date(iso).toLocaleDateString('en-US', {
month: 'short',
day: 'numeric',
@ -292,7 +293,7 @@
</script>
<svelte:head>
<title>Wrenn - Team</title>
<title>Wrenn — Team</title>
</svelte:head>
<!-- svelte-ignore a11y_no_static_element_interactions -->