forked from wrenn/wrenn
Frontend consistency pass: delight, audit, and normalization
Delight (keys page): - Animated checkmark draw + circle pop on key reveal dialog open - Key display area pulses accent glow on open to draw eye to "copy this" - Copy button spring-bounces on successful copy (re-triggers on repeat) - Empty state key icon floats (iconFloat, now global) - Row hover uses scaleY left-accent stripe (matches capsules pattern) - New key row flashes accent on reveal dialog dismiss (matches capsule-born) Audit fixes (all dashboard pages): - Page titles standardized to em dash: "Wrenn — X" across all four pages - formatDate/timeAgo extracted to src/lib/utils/format.ts (string | undefined signatures); keys and snapshots now import from there instead of duplicating - team formatDate gains undefined guard (kept local, date-only format differs) - spin-once and iconFloat keyframes moved to app.css as globals; scoped copies removed from capsules and keys - Snapshots empty state icon was referencing undefined @keyframes float; fixed to iconFloat Normalization: - Snapshots table rows: replaced ::before pseudo-element accent (opacity-only, single color) with DOM row-stripe element using scaleY transition, type-keyed color (green for snapshots, blue for images) — matches capsules pattern - Create Key dialog: max-w-[400px] → max-w-[420px] to align with form dialogs - Snapshots count and empty-state heading are now terminology-aware: shows "templates/snapshots/images" based on active filter; empty heading for all filter reads "No templates yet" instead of "No snapshots yet" Not done (documented in audit, deferred): - Sidebar nav items pointing to unimplemented routes (audit, usage, billing, notifications, settings) — left as-is, needs product decision - Dialog max-widths fully normalized beyond Create Key — minor, deferred - capsules timeAgo not imported from shared util (formatTime differs intentionally) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@ -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}
|
||||
<span class="font-mono text-ui text-[var(--color-text-bright)]">{capsule.id}</span>
|
||||
{#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
|
||||
|
||||
@ -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,31 +337,34 @@
|
||||
</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>
|
||||
<button
|
||||
onclick={copyKey}
|
||||
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)]'
|
||||
: 'border-[var(--color-border-mid)] text-[var(--color-text-secondary)] hover:border-[var(--color-border-mid)] hover:text-[var(--color-text-primary)]'}"
|
||||
>
|
||||
{#if copied}
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<polyline points="20 6 9 17 4 12" />
|
||||
</svg>
|
||||
Copied
|
||||
{:else}
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
|
||||
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
|
||||
</svg>
|
||||
Copy
|
||||
{/if}
|
||||
</button>
|
||||
{#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)]'
|
||||
: 'border-[var(--color-border-mid)] text-[var(--color-text-secondary)] hover:border-[var(--color-border-mid)] hover:text-[var(--color-text-primary)]'}"
|
||||
>
|
||||
{#if copied}
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<polyline points="20 6 9 17 4 12" />
|
||||
</svg>
|
||||
Copied
|
||||
{:else}
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
|
||||
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
|
||||
</svg>
|
||||
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>
|
||||
|
||||
@ -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,18 +263,29 @@
|
||||
</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)]">
|
||||
<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 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)}
|
||||
@ -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>
|
||||
|
||||
@ -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 -->
|
||||
|
||||
Reference in New Issue
Block a user