Rework UI to match typst-desktop's design system
This commit is contained in:
+14
-14
@@ -4,29 +4,29 @@
|
||||
</script>
|
||||
|
||||
<div class="min-h-[80vh] flex flex-col items-center justify-center p-4">
|
||||
<div class="text-center max-w-md bg-white dark:bg-zinc-900 rounded-2xl shadow-xl border border-gray-200 dark:border-zinc-800 p-8">
|
||||
<div class="inline-flex items-center justify-center w-20 h-20 rounded-full bg-red-100 dark:bg-red-500/10 mb-6">
|
||||
<Icon icon="mdi:alert-circle-outline" class="h-10 w-10 text-red-600 dark:text-red-500" />
|
||||
<div class="text-center max-w-md bg-[var(--color-surface)] rounded-2xl shadow-xl border border-[var(--color-line)] p-8">
|
||||
<div class="inline-flex items-center justify-center w-20 h-20 rounded-full bg-[var(--color-danger)]/10 mb-6">
|
||||
<Icon icon="mdi:alert-circle-outline" class="h-10 w-10 text-[var(--color-danger)]" />
|
||||
</div>
|
||||
|
||||
<h1 class="text-6xl font-bold text-gray-900 dark:text-white mb-2 tracking-tight">
|
||||
|
||||
<h1 class="text-6xl font-bold text-[var(--color-ink)] mb-2 tracking-tight">
|
||||
{$page.status}
|
||||
</h1>
|
||||
|
||||
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4">
|
||||
|
||||
<h2 class="text-xl font-semibold text-[var(--color-ink)] mb-4">
|
||||
Something went wrong
|
||||
</h2>
|
||||
|
||||
<p class="text-base text-gray-600 dark:text-gray-400 mb-8 leading-relaxed">
|
||||
|
||||
<p class="text-base text-[var(--color-ink-muted)] mb-8 leading-relaxed">
|
||||
{$page.error?.message || 'We experienced an unexpected error processing your request.'}
|
||||
</p>
|
||||
|
||||
<a
|
||||
href="/"
|
||||
class="inline-flex items-center justify-center gap-2 px-6 py-3 border border-transparent text-sm font-semibold rounded-xl shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-zinc-900 transition-colors w-full"
|
||||
|
||||
<a
|
||||
href="/"
|
||||
class="inline-flex items-center justify-center gap-2 px-6 py-3 text-sm font-semibold rounded-xl shadow-sm text-white bg-[var(--color-accent)] hover:opacity-90 focus:outline-none transition w-full"
|
||||
>
|
||||
<Icon icon="mdi:home" class="text-lg" />
|
||||
Return to Dashboard
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -40,21 +40,11 @@
|
||||
</svelte:head>
|
||||
|
||||
{#if loaded}
|
||||
<div
|
||||
class="min-h-screen w-full flex flex-col font-sans transition-colors duration-200"
|
||||
style="
|
||||
background-color: {currentColors.background};
|
||||
color: {currentColors.text};
|
||||
--theme-bg: {currentColors.background};
|
||||
--theme-text: {currentColors.text};
|
||||
--theme-border: {currentColors.selection};
|
||||
--theme-cursor: {currentColors.cursor};
|
||||
"
|
||||
>
|
||||
<div class="min-h-screen w-full flex flex-col bg-[var(--color-surface-muted)] text-[var(--color-ink)] font-sans transition-colors duration-200">
|
||||
{@render children()}
|
||||
</div>
|
||||
{:else}
|
||||
<div class="min-h-screen w-full flex items-center justify-center bg-gray-50 dark:bg-zinc-950">
|
||||
<div class="text-gray-500 dark:text-gray-400 font-medium animate-pulse">Loading TypstDrive...</div>
|
||||
<div class="min-h-screen w-full flex items-center justify-center bg-[var(--color-surface-muted)]">
|
||||
<div class="text-[var(--color-ink-muted)] font-medium animate-pulse">Loading TypstDrive...</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
@@ -17,6 +17,6 @@
|
||||
<meta name="description" content="Collaborative Typst Editor." />
|
||||
</svelte:head>
|
||||
|
||||
<div class="h-full flex items-center justify-center text-gray-500">
|
||||
<div class="h-full flex items-center justify-center text-[var(--color-ink-muted)]">
|
||||
Redirecting...
|
||||
</div>
|
||||
|
||||
@@ -170,12 +170,12 @@ with open("output.png", "wb") as f:
|
||||
</style>
|
||||
|
||||
<div class="min-h-screen flex flex-col">
|
||||
<nav class="bg-[var(--theme-bg)] shadow-sm border-b border-gray-200 dark:border-white/10 px-6 py-4 flex justify-between items-center sticky top-0 z-10 transition-colors duration-200 flex-shrink-0">
|
||||
<h1 class="text-2xl font-bold text-gray-900 dark:text-white flex items-center gap-3">
|
||||
<Icon icon="mdi:api" class="text-blue-600 dark:text-blue-400 text-3xl" />
|
||||
<nav class="bg-[var(--color-surface)] shadow-sm border-b border-[var(--color-line)] px-6 py-4 flex justify-between items-center sticky top-0 z-10 transition-colors duration-200 flex-shrink-0">
|
||||
<h1 class="text-2xl font-bold text-[var(--color-ink)] flex items-center gap-3">
|
||||
<Icon icon="mdi:api" class="text-[var(--color-accent)] text-3xl" />
|
||||
API Reference
|
||||
</h1>
|
||||
<button onclick={() => goto('/dashboard')} class="text-sm font-medium text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white transition-colors bg-gray-100 hover:bg-gray-200 dark:bg-white/5 dark:hover:bg-white/10 px-4 py-2 rounded-lg flex items-center gap-2">
|
||||
<button onclick={() => goto('/dashboard')} class="text-sm font-medium text-[var(--color-ink-muted)] hover:text-[var(--color-ink)] transition-colors bg-[var(--color-surface-muted)] hover:bg-[var(--color-surface-sunken)] px-4 py-2 rounded-md flex items-center gap-2">
|
||||
<Icon icon="mdi:arrow-left" class="text-lg" />
|
||||
Back to Dashboard
|
||||
</button>
|
||||
@@ -187,16 +187,16 @@ with open("output.png", "wb") as f:
|
||||
{#each navSections as section}
|
||||
<button
|
||||
onclick={() => activeSection = section.id}
|
||||
class="w-full flex items-center gap-3 px-4 py-2.5 rounded-xl text-sm font-medium transition-all duration-150 {activeSection === section.id
|
||||
? 'bg-blue-600 text-white shadow-sm'
|
||||
: 'text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-white/5'}"
|
||||
class="w-full flex items-center gap-3 px-4 py-2.5 rounded-md text-sm font-medium transition-colors {activeSection === section.id
|
||||
? 'bg-[var(--color-accent)] text-white shadow-sm'
|
||||
: 'text-[var(--color-ink-muted)] hover:bg-[var(--color-surface-muted)]'}"
|
||||
>
|
||||
<Icon icon={section.icon} class="text-lg flex-shrink-0" />
|
||||
{section.label}
|
||||
</button>
|
||||
{/each}
|
||||
<div class="pt-4 mt-4 border-t border-gray-200 dark:border-white/10">
|
||||
<a href="/settings" class="w-full flex items-center gap-3 px-4 py-2.5 rounded-xl text-sm font-medium text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-white/5 transition-all duration-150">
|
||||
<div class="pt-4 mt-4 border-t border-[var(--color-line)]">
|
||||
<a href="/settings" class="w-full flex items-center gap-3 px-4 py-2.5 rounded-md text-sm font-medium text-[var(--color-ink-muted)] hover:bg-[var(--color-surface-muted)] transition-colors">
|
||||
<Icon icon="mdi:key-plus" class="text-lg flex-shrink-0" />
|
||||
Manage API Keys
|
||||
</a>
|
||||
@@ -210,7 +210,7 @@ with open("output.png", "wb") as f:
|
||||
{#each navSections as section}
|
||||
<button
|
||||
onclick={() => activeSection = section.id}
|
||||
class="px-3 py-1.5 rounded-lg text-xs font-medium transition-colors {activeSection === section.id ? 'bg-blue-600 text-white' : 'bg-gray-100 dark:bg-white/10 text-gray-600 dark:text-gray-300'}"
|
||||
class="px-3 py-1.5 rounded-md text-xs font-medium transition-colors {activeSection === section.id ? 'bg-[var(--color-accent)] text-white' : 'bg-[var(--color-surface-sunken)] text-[var(--color-ink-muted)]'}"
|
||||
>
|
||||
{section.label}
|
||||
</button>
|
||||
@@ -218,51 +218,51 @@ with open("output.png", "wb") as f:
|
||||
</div>
|
||||
|
||||
{#if activeSection === 'overview'}
|
||||
<div class="bg-white dark:bg-black/20 rounded-xl shadow-sm border border-gray-200 dark:border-white/10 p-6 sm:p-8">
|
||||
<h2 class="text-xl font-bold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
|
||||
<Icon icon="mdi:book-open-outline" class="text-2xl text-blue-500" />
|
||||
<div class="bg-[var(--color-surface)] rounded-xl shadow-sm border border-[var(--color-line)] p-6 sm:p-8">
|
||||
<h2 class="text-xl font-bold text-[var(--color-ink)] mb-4 flex items-center gap-2">
|
||||
<Icon icon="mdi:book-open-outline" class="text-2xl text-[var(--color-accent)]" />
|
||||
Overview
|
||||
</h2>
|
||||
<p class="text-gray-600 dark:text-gray-300 mb-6">
|
||||
<p class="text-[var(--color-ink-muted)] mb-6">
|
||||
The TypstDrive Render API lets you compile Typst markup into PNG images or PDF documents programmatically.
|
||||
Authenticate with an API key and POST Typst code — get back binary output.
|
||||
</p>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-6">
|
||||
<div class="p-4 rounded-xl bg-blue-50 dark:bg-blue-900/10 border border-blue-100 dark:border-blue-800/30">
|
||||
<Icon icon="mdi:image-outline" class="text-2xl text-blue-500 mb-2" />
|
||||
<p class="text-sm font-semibold text-gray-800 dark:text-gray-200">PNG output</p>
|
||||
<p class="text-xs text-gray-500 dark:text-gray-400 mt-1">First page rendered at 2× scale</p>
|
||||
<Icon icon="mdi:image-outline" class="text-2xl text-[var(--color-accent)] mb-2" />
|
||||
<p class="text-sm font-semibold text-[var(--color-ink)]">PNG output</p>
|
||||
<p class="text-xs text-[var(--color-ink-muted)] mt-1">First page rendered at 2× scale</p>
|
||||
</div>
|
||||
<div class="p-4 rounded-xl bg-purple-50 dark:bg-purple-900/10 border border-purple-100 dark:border-purple-800/30">
|
||||
<Icon icon="mdi:file-pdf-box" class="text-2xl text-purple-500 mb-2" />
|
||||
<p class="text-sm font-semibold text-gray-800 dark:text-gray-200">PDF output</p>
|
||||
<p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Full multi-page PDF document</p>
|
||||
<p class="text-sm font-semibold text-[var(--color-ink)]">PDF output</p>
|
||||
<p class="text-xs text-[var(--color-ink-muted)] mt-1">Full multi-page PDF document</p>
|
||||
</div>
|
||||
<div class="p-4 rounded-xl bg-green-50 dark:bg-green-900/10 border border-green-100 dark:border-green-800/30">
|
||||
<div class="p-4 rounded-xl bg-[var(--color-success)]/10 border border-[var(--color-success)]/20">
|
||||
<Icon icon="mdi:lightning-bolt" class="text-2xl text-green-500 mb-2" />
|
||||
<p class="text-sm font-semibold text-gray-800 dark:text-gray-200">Cached results</p>
|
||||
<p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Identical inputs skip recompilation</p>
|
||||
<p class="text-sm font-semibold text-[var(--color-ink)]">Cached results</p>
|
||||
<p class="text-xs text-[var(--color-ink-muted)] mt-1">Identical inputs skip recompilation</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-gray-50 dark:bg-black/30 rounded-xl p-4 border border-gray-200 dark:border-white/10">
|
||||
<p class="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400 mb-1">Base URL</p>
|
||||
<code class="font-mono text-sm text-blue-600 dark:text-blue-400">{baseUrl}</code>
|
||||
<div class="bg-[var(--color-surface-muted)] rounded-xl p-4 border border-[var(--color-line)]">
|
||||
<p class="text-xs font-semibold uppercase tracking-wide text-[var(--color-ink-muted)] mb-1">Base URL</p>
|
||||
<code class="font-mono text-sm text-[var(--color-accent)]">{baseUrl}</code>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if activeSection === 'auth'}
|
||||
<div class="bg-white dark:bg-black/20 rounded-xl shadow-sm border border-gray-200 dark:border-white/10 p-6 sm:p-8">
|
||||
<h2 class="text-xl font-bold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
|
||||
<Icon icon="mdi:key-outline" class="text-2xl text-blue-500" />
|
||||
<div class="bg-[var(--color-surface)] rounded-xl shadow-sm border border-[var(--color-line)] p-6 sm:p-8">
|
||||
<h2 class="text-xl font-bold text-[var(--color-ink)] mb-4 flex items-center gap-2">
|
||||
<Icon icon="mdi:key-outline" class="text-2xl text-[var(--color-accent)]" />
|
||||
Authentication
|
||||
</h2>
|
||||
<p class="text-gray-600 dark:text-gray-300 mb-6">
|
||||
All requests must include an API key in the <code class="font-mono text-xs bg-gray-100 dark:bg-white/10 px-1.5 py-0.5 rounded">Authorization</code> header.
|
||||
<p class="text-[var(--color-ink-muted)] mb-6">
|
||||
All requests must include an API key in the <code class="font-mono text-xs bg-[var(--color-surface-sunken)] px-1.5 py-0.5 rounded">Authorization</code> header.
|
||||
</p>
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<p class="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">Header format</p>
|
||||
<p class="text-sm font-semibold text-[var(--color-ink-muted)] mb-2">Header format</p>
|
||||
<pre class="rounded-xl border border-gray-700 overflow-x-auto"><code class="hljs block px-4 py-3 text-xs font-mono leading-relaxed rounded-xl">{@html hljs.highlight('Authorization: Bearer td_your_api_key_here', { language: 'bash' }).value}</code></pre>
|
||||
</div>
|
||||
<div class="p-4 rounded-xl bg-amber-50 dark:bg-amber-900/10 border border-amber-200 dark:border-amber-700/30 flex gap-3">
|
||||
@@ -273,10 +273,10 @@ with open("output.png", "wb") as f:
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1">Managing keys</p>
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400">
|
||||
<p class="text-sm font-semibold text-[var(--color-ink-muted)] mb-1">Managing keys</p>
|
||||
<p class="text-sm text-[var(--color-ink-muted)]">
|
||||
Create, regenerate, and revoke keys in
|
||||
<a href="/settings" class="text-blue-600 dark:text-blue-400 hover:underline">Settings → API Keys</a>.
|
||||
<a href="/settings" class="text-[var(--color-accent)] hover:underline">Settings → API Keys</a>.
|
||||
The full key is shown only once at creation time.
|
||||
</p>
|
||||
</div>
|
||||
@@ -285,43 +285,43 @@ with open("output.png", "wb") as f:
|
||||
{/if}
|
||||
|
||||
{#if activeSection === 'endpoint'}
|
||||
<div class="bg-white dark:bg-black/20 rounded-xl shadow-sm border border-gray-200 dark:border-white/10 p-6 sm:p-8 space-y-6">
|
||||
<h2 class="text-xl font-bold text-gray-900 dark:text-white flex items-center gap-2">
|
||||
<Icon icon="mdi:api" class="text-2xl text-blue-500" />
|
||||
<div class="bg-[var(--color-surface)] rounded-xl shadow-sm border border-[var(--color-line)] p-6 sm:p-8 space-y-6">
|
||||
<h2 class="text-xl font-bold text-[var(--color-ink)] flex items-center gap-2">
|
||||
<Icon icon="mdi:api" class="text-2xl text-[var(--color-accent)]" />
|
||||
POST /v1/render
|
||||
</h2>
|
||||
|
||||
<div>
|
||||
<div class="flex items-center gap-2 mb-3">
|
||||
<span class="px-2 py-0.5 text-xs font-bold bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 rounded-md">POST</span>
|
||||
<code class="font-mono text-sm text-gray-800 dark:text-gray-200">/v1/render</code>
|
||||
<span class="px-2 py-0.5 text-xs font-bold bg-green-100 dark:bg-green-900/30 text-[var(--color-success)] rounded-md">POST</span>
|
||||
<code class="font-mono text-sm text-[var(--color-ink)]">/v1/render</code>
|
||||
</div>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400">
|
||||
<p class="text-sm text-[var(--color-ink-muted)]">
|
||||
Compile Typst markup and return rendered output as PNG, PDF, or HTML.
|
||||
Results are cached for 1 hour — identical inputs return the cached result without recompiling.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="h-px bg-gray-200 dark:bg-white/10"></div>
|
||||
<div class="h-px bg-[var(--color-line)]"></div>
|
||||
|
||||
<div>
|
||||
<p class="text-sm font-bold text-gray-800 dark:text-gray-200 mb-3">Request headers</p>
|
||||
<p class="text-sm font-bold text-[var(--color-ink)] mb-3">Request headers</p>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full text-sm">
|
||||
<thead>
|
||||
<tr class="border-b border-gray-200 dark:border-white/10">
|
||||
<th class="text-left py-2 pr-4 font-semibold text-gray-700 dark:text-gray-300 w-40">Header</th>
|
||||
<th class="text-left py-2 font-semibold text-gray-700 dark:text-gray-300">Value</th>
|
||||
<tr class="border-b border-[var(--color-line)]">
|
||||
<th class="text-left py-2 pr-4 font-semibold text-[var(--color-ink-muted)] w-40">Header</th>
|
||||
<th class="text-left py-2 font-semibold text-[var(--color-ink-muted)]">Value</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="text-gray-600 dark:text-gray-400">
|
||||
<tr class="border-b border-gray-100 dark:border-white/5">
|
||||
<tbody class="text-[var(--color-ink-muted)]">
|
||||
<tr class="border-b border-[var(--color-line)]">
|
||||
<td class="py-2 pr-4 font-mono text-xs">Authorization</td>
|
||||
<td class="py-2"><code class="font-mono text-xs bg-gray-100 dark:bg-white/10 px-1.5 py-0.5 rounded">Bearer <api-key></code> — required</td>
|
||||
<td class="py-2"><code class="font-mono text-xs bg-[var(--color-surface-sunken)] px-1.5 py-0.5 rounded">Bearer <api-key></code> — required</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-2 pr-4 font-mono text-xs">Content-Type</td>
|
||||
<td class="py-2"><code class="font-mono text-xs bg-gray-100 dark:bg-white/10 px-1.5 py-0.5 rounded">application/json</code> — required</td>
|
||||
<td class="py-2"><code class="font-mono text-xs bg-[var(--color-surface-sunken)] px-1.5 py-0.5 rounded">application/json</code> — required</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@@ -329,23 +329,23 @@ with open("output.png", "wb") as f:
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p class="text-sm font-bold text-gray-800 dark:text-gray-200 mb-3">Request body</p>
|
||||
<p class="text-sm font-bold text-[var(--color-ink)] mb-3">Request body</p>
|
||||
<pre class="rounded-xl border border-gray-700 overflow-x-auto"><code class="hljs block px-4 py-4 text-xs font-mono leading-relaxed rounded-xl">{@html hSchema}</code></pre>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p class="text-sm font-bold text-gray-800 dark:text-gray-200 mb-3">Response</p>
|
||||
<div class="p-3 rounded-lg bg-green-50 dark:bg-green-900/10 border border-green-100 dark:border-green-800/30 text-sm">
|
||||
<span class="font-mono text-xs font-bold text-green-700 dark:text-green-400">200 OK</span>
|
||||
<span class="text-gray-600 dark:text-gray-400 ml-2">Response body with <code class="font-mono text-xs bg-gray-100 dark:bg-white/10 px-2 rounded">Content-Type: image/png</code>, <code class="font-mono text-xs bg-gray-100 dark:bg-white/10 px-2 rounded">application/pdf</code>, or <code class="font-mono text-xs bg-gray-100 dark:bg-white/10 px-2 rounded">text/html</code></span>
|
||||
<p class="text-sm font-bold text-[var(--color-ink)] mb-3">Response</p>
|
||||
<div class="p-3 rounded-lg bg-[var(--color-success)]/10 border border-[var(--color-success)]/20 text-sm">
|
||||
<span class="font-mono text-xs font-bold text-[var(--color-success)]">200 OK</span>
|
||||
<span class="text-[var(--color-ink-muted)] ml-2">Response body with <code class="font-mono text-xs bg-[var(--color-surface-sunken)] px-2 rounded">Content-Type: image/png</code>, <code class="font-mono text-xs bg-[var(--color-surface-sunken)] px-2 rounded">application/pdf</code>, or <code class="font-mono text-xs bg-[var(--color-surface-sunken)] px-2 rounded">text/html</code></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p class="text-sm font-bold text-gray-800 dark:text-gray-200 mb-3">Compilation errors</p>
|
||||
<div class="p-3 mb-3 rounded-lg bg-red-50 dark:bg-red-900/10 border border-red-100 dark:border-red-800/30 text-sm">
|
||||
<span class="font-mono text-xs font-bold text-red-700 dark:text-red-400">422 Unprocessable Entity</span>
|
||||
<span class="text-gray-600 dark:text-gray-400 ml-2">JSON body describing every Typst error. <code class="font-mono text-xs bg-gray-100 dark:bg-white/10 px-2 rounded">error</code> is a readable summary; <code class="font-mono text-xs bg-gray-100 dark:bg-white/10 px-2 rounded">details</code> lists each diagnostic with its message, severity, and source line and column.</span>
|
||||
<p class="text-sm font-bold text-[var(--color-ink)] mb-3">Compilation errors</p>
|
||||
<div class="p-3 mb-3 rounded-lg bg-[var(--color-danger)]/10 border border-[var(--color-danger)]/20 text-sm">
|
||||
<span class="font-mono text-xs font-bold text-[var(--color-danger)]">422 Unprocessable Entity</span>
|
||||
<span class="text-[var(--color-ink-muted)] ml-2">JSON body describing every Typst error. <code class="font-mono text-xs bg-[var(--color-surface-sunken)] px-2 rounded">error</code> is a readable summary; <code class="font-mono text-xs bg-[var(--color-surface-sunken)] px-2 rounded">details</code> lists each diagnostic with its message, severity, and source line and column.</span>
|
||||
</div>
|
||||
<pre class="rounded-xl border border-gray-700 overflow-x-auto"><code class="hljs block px-4 py-4 text-xs font-mono leading-relaxed rounded-xl">{@html hCompileErr}</code></pre>
|
||||
</div>
|
||||
@@ -358,9 +358,9 @@ with open("output.png", "wb") as f:
|
||||
{/if}
|
||||
|
||||
{#if activeSection === 'examples'}
|
||||
<div class="bg-white dark:bg-black/20 rounded-xl shadow-sm border border-gray-200 dark:border-white/10 p-6 sm:p-8 space-y-8">
|
||||
<h2 class="text-xl font-bold text-gray-900 dark:text-white flex items-center gap-2">
|
||||
<Icon icon="mdi:code-braces" class="text-2xl text-blue-500" />
|
||||
<div class="bg-[var(--color-surface)] rounded-xl shadow-sm border border-[var(--color-line)] p-6 sm:p-8 space-y-8">
|
||||
<h2 class="text-xl font-bold text-[var(--color-ink)] flex items-center gap-2">
|
||||
<Icon icon="mdi:code-braces" class="text-2xl text-[var(--color-accent)]" />
|
||||
Examples
|
||||
</h2>
|
||||
|
||||
@@ -374,11 +374,11 @@ with open("output.png", "wb") as f:
|
||||
] as ex}
|
||||
<div>
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<p class="text-sm font-bold text-gray-800 dark:text-gray-200 flex items-center gap-2">
|
||||
<p class="text-sm font-bold text-[var(--color-ink)] flex items-center gap-2">
|
||||
<Icon icon={ex.icon} class="text-lg {ex.iconColor}" />
|
||||
{ex.label}
|
||||
</p>
|
||||
<button onclick={() => copy(ex.id, ex.raw)} class="flex items-center gap-1 text-xs text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors px-2 py-1 rounded-md hover:bg-gray-100 dark:hover:bg-white/10">
|
||||
<button onclick={() => copy(ex.id, ex.raw)} class="flex items-center gap-1 text-xs text-[var(--color-ink-muted)] hover:text-[var(--color-accent)] transition-colors px-2 py-1 rounded-md hover:bg-[var(--color-surface-sunken)]">
|
||||
<Icon icon={copiedSnippet === ex.id ? 'mdi:check' : 'mdi:content-copy'} class="text-sm" />
|
||||
{copiedSnippet === ex.id ? 'Copied!' : 'Copy'}
|
||||
</button>
|
||||
@@ -390,19 +390,19 @@ with open("output.png", "wb") as f:
|
||||
{/if}
|
||||
|
||||
{#if activeSection === 'rate-limits'}
|
||||
<div class="bg-white dark:bg-black/20 rounded-xl shadow-sm border border-gray-200 dark:border-white/10 p-6 sm:p-8">
|
||||
<h2 class="text-xl font-bold text-gray-900 dark:text-white mb-6 flex items-center gap-2">
|
||||
<Icon icon="mdi:speedometer" class="text-2xl text-blue-500" />
|
||||
<div class="bg-[var(--color-surface)] rounded-xl shadow-sm border border-[var(--color-line)] p-6 sm:p-8">
|
||||
<h2 class="text-xl font-bold text-[var(--color-ink)] mb-6 flex items-center gap-2">
|
||||
<Icon icon="mdi:speedometer" class="text-2xl text-[var(--color-accent)]" />
|
||||
Rate Limits
|
||||
</h2>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-6">
|
||||
<div class="p-4 rounded-xl bg-gray-50 dark:bg-black/30 border border-gray-200 dark:border-white/10">
|
||||
<p class="text-2xl font-bold text-gray-900 dark:text-white">60</p>
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400 mt-1">requests / minute per key</p>
|
||||
<div class="p-4 rounded-xl bg-[var(--color-surface-muted)] border border-[var(--color-line)]">
|
||||
<p class="text-2xl font-bold text-[var(--color-ink)]">60</p>
|
||||
<p class="text-sm text-[var(--color-ink-muted)] mt-1">requests / minute per key</p>
|
||||
</div>
|
||||
<div class="p-4 rounded-xl bg-gray-50 dark:bg-black/30 border border-gray-200 dark:border-white/10">
|
||||
<p class="text-2xl font-bold text-gray-900 dark:text-white">10</p>
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400 mt-1">API keys per account</p>
|
||||
<div class="p-4 rounded-xl bg-[var(--color-surface-muted)] border border-[var(--color-line)]">
|
||||
<p class="text-2xl font-bold text-[var(--color-ink)]">10</p>
|
||||
<p class="text-sm text-[var(--color-ink-muted)] mt-1">API keys per account</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4 rounded-xl bg-amber-50 dark:bg-amber-900/10 border border-amber-200 dark:border-amber-700/30 text-sm text-amber-800 dark:text-amber-300 mb-4">
|
||||
@@ -410,19 +410,19 @@ with open("output.png", "wb") as f:
|
||||
<p>Identical inputs (same code + files) skip recompilation and are served from cache for up to 1 hour. Cached responses return instantly and do not consume your rate limit.</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">When exceeded</p>
|
||||
<div class="p-3 rounded-lg bg-red-50 dark:bg-red-900/10 border border-red-100 dark:border-red-800/30 text-sm">
|
||||
<code class="font-mono text-xs font-bold text-red-700 dark:text-red-400">429 Too Many Requests</code>
|
||||
<span class="text-gray-600 dark:text-gray-400 ml-2">— wait for the current 60-second window to reset.</span>
|
||||
<p class="text-sm font-semibold text-[var(--color-ink-muted)] mb-2">When exceeded</p>
|
||||
<div class="p-3 rounded-lg bg-[var(--color-danger)]/10 border border-[var(--color-danger)]/20 text-sm">
|
||||
<code class="font-mono text-xs font-bold text-[var(--color-danger)]">429 Too Many Requests</code>
|
||||
<span class="text-[var(--color-ink-muted)] ml-2">— wait for the current 60-second window to reset.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if activeSection === 'errors'}
|
||||
<div class="bg-white dark:bg-black/20 rounded-xl shadow-sm border border-gray-200 dark:border-white/10 p-6 sm:p-8">
|
||||
<h2 class="text-xl font-bold text-gray-900 dark:text-white mb-6 flex items-center gap-2">
|
||||
<Icon icon="mdi:alert-circle-outline" class="text-2xl text-blue-500" />
|
||||
<div class="bg-[var(--color-surface)] rounded-xl shadow-sm border border-[var(--color-line)] p-6 sm:p-8">
|
||||
<h2 class="text-xl font-bold text-[var(--color-ink)] mb-6 flex items-center gap-2">
|
||||
<Icon icon="mdi:alert-circle-outline" class="text-2xl text-[var(--color-accent)]" />
|
||||
Error Reference
|
||||
</h2>
|
||||
<div class="space-y-3">
|
||||
@@ -433,18 +433,18 @@ with open("output.png", "wb") as f:
|
||||
{ code: '429', name: 'Too Many Requests', desc: 'Rate limit exceeded. Wait for the current 60-second window to reset.' },
|
||||
{ code: '500', name: 'Internal Server Error', desc: 'Unexpected server error. Try again after a short delay.' },
|
||||
] as err}
|
||||
<div class="flex items-start gap-4 p-4 rounded-xl border border-gray-100 dark:border-white/10 bg-gray-50 dark:bg-black/20">
|
||||
<code class="font-mono text-sm font-bold text-gray-800 dark:text-gray-200 flex-shrink-0 w-8">{err.code}</code>
|
||||
<div class="flex items-start gap-4 p-4 rounded-xl border border-[var(--color-line)] bg-[var(--color-surface-muted)]">
|
||||
<code class="font-mono text-sm font-bold text-[var(--color-ink)] flex-shrink-0 w-8">{err.code}</code>
|
||||
<div>
|
||||
<p class="text-sm font-semibold text-gray-800 dark:text-gray-200">{err.name}</p>
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400 mt-0.5">{err.desc}</p>
|
||||
<p class="text-sm font-semibold text-[var(--color-ink)]">{err.name}</p>
|
||||
<p class="text-sm text-[var(--color-ink-muted)] mt-0.5">{err.desc}</p>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
<div class="mt-6 p-4 rounded-xl bg-gray-50 dark:bg-black/30 border border-gray-200 dark:border-white/10">
|
||||
<p class="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1">Error body</p>
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400">Compilation failures (<code class="font-mono text-xs bg-gray-100 dark:bg-white/10 px-1.5 py-0.5 rounded">422</code>) return a JSON body with an <code class="font-mono text-xs bg-gray-100 dark:bg-white/10 px-1.5 py-0.5 rounded">error</code> summary and a <code class="font-mono text-xs bg-gray-100 dark:bg-white/10 px-1.5 py-0.5 rounded">details</code> array. All other errors return plain text describing the issue.</p>
|
||||
<div class="mt-6 p-4 rounded-xl bg-[var(--color-surface-muted)] border border-[var(--color-line)]">
|
||||
<p class="text-sm font-semibold text-[var(--color-ink-muted)] mb-1">Error body</p>
|
||||
<p class="text-sm text-[var(--color-ink-muted)]">Compilation failures (<code class="font-mono text-xs bg-[var(--color-surface-sunken)] px-1.5 py-0.5 rounded">422</code>) return a JSON body with an <code class="font-mono text-xs bg-[var(--color-surface-sunken)] px-1.5 py-0.5 rounded">error</code> summary and a <code class="font-mono text-xs bg-[var(--color-surface-sunken)] px-1.5 py-0.5 rounded">details</code> array. All other errors return plain text describing the issue.</p>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
@@ -10,12 +10,9 @@
|
||||
import DocCard from '$lib/components/dashboard/DocCard.svelte';
|
||||
import FileCard from '$lib/components/dashboard/FileCard.svelte';
|
||||
import ShareModal from '$lib/components/ShareModal.svelte';
|
||||
import DeleteModal from '$lib/components/dashboard/DeleteModal.svelte';
|
||||
import PromptModal from '$lib/components/PromptModal.svelte';
|
||||
import ConfirmModal from '$lib/components/ConfirmModal.svelte';
|
||||
import InfoModal from '$lib/components/dashboard/InfoModal.svelte';
|
||||
import RenameModal from '$lib/components/dashboard/RenameModal.svelte';
|
||||
import CreateDocModal from '$lib/components/dashboard/CreateDocModal.svelte';
|
||||
import CreateProjectModal from '$lib/components/dashboard/CreateProjectModal.svelte';
|
||||
import CreateFolderModal from '$lib/components/dashboard/CreateFolderModal.svelte';
|
||||
import Footer from '$lib/components/Footer.svelte';
|
||||
|
||||
let documents = $state<any[]>([]);
|
||||
@@ -424,33 +421,33 @@
|
||||
|
||||
<main class="max-w-7xl w-full mx-auto py-10 px-4 sm:px-6 lg:px-8 grow block">
|
||||
<div class="flex justify-between items-center mb-6">
|
||||
<h2 class="text-3xl font-bold text-gray-900 dark:text-white tracking-tight">My Documents</h2>
|
||||
|
||||
<h2 class="text-3xl font-bold text-[var(--color-ink)] tracking-tight">My Documents</h2>
|
||||
|
||||
<div class="relative plus-dropdown-container">
|
||||
<button onclick={() => showPlusDropdown = !showPlusDropdown} class="flex items-center justify-center text-[var(--theme-text)] bg-[var(--theme-border)] opacity-90 hover:opacity-100 w-10 h-10 rounded-full shadow-md hover:shadow-lg transition-all duration-200 transform hover:-translate-y-0.5 border border-white/10 dark:border-black/20">
|
||||
<button onclick={() => showPlusDropdown = !showPlusDropdown} class="flex items-center justify-center text-white bg-[var(--color-accent)] hover:opacity-90 w-10 h-10 rounded-full shadow-md transition">
|
||||
<Icon icon="mdi:plus" class="text-2xl" />
|
||||
</button>
|
||||
|
||||
{#if showPlusDropdown}
|
||||
<div class="absolute right-0 mt-2 w-48 bg-[var(--theme-bg)] rounded-lg shadow-xl border border-gray-200 dark:border-white/10 py-1 z-20">
|
||||
<button onclick={openCreateModal} class="w-full text-left px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-black/5 dark:hover:bg-white/5 flex items-center gap-2">
|
||||
<div class="absolute right-0 mt-2 w-48 bg-[var(--color-surface)] rounded-md shadow-xl border border-[var(--color-line)] py-1 z-20">
|
||||
<button onclick={openCreateModal} class="w-full text-left px-4 py-2 text-sm text-[var(--color-ink-muted)] hover:bg-[var(--color-surface-sunken)] hover:text-[var(--color-ink)] flex items-center gap-2">
|
||||
<Icon icon="mdi:file-document-plus" class="text-lg text-blue-500" />
|
||||
New Document
|
||||
</button>
|
||||
<button onclick={openCreateProjectModal} class="w-full text-left px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-black/5 dark:hover:bg-white/5 flex items-center gap-2">
|
||||
<button onclick={openCreateProjectModal} class="w-full text-left px-4 py-2 text-sm text-[var(--color-ink-muted)] hover:bg-[var(--color-surface-sunken)] hover:text-[var(--color-ink)] flex items-center gap-2">
|
||||
<Icon icon="mdi:folder-multiple-plus" class="text-lg text-indigo-500" />
|
||||
New Project
|
||||
</button>
|
||||
<button onclick={openCreateFolderModal} class="w-full text-left px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-black/5 dark:hover:bg-white/5 flex items-center gap-2">
|
||||
<button onclick={openCreateFolderModal} class="w-full text-left px-4 py-2 text-sm text-[var(--color-ink-muted)] hover:bg-[var(--color-surface-sunken)] hover:text-[var(--color-ink)] flex items-center gap-2">
|
||||
<Icon icon="mdi:folder-plus" class="text-lg text-yellow-500" />
|
||||
New Folder
|
||||
</button>
|
||||
<button onclick={() => { showPlusDropdown = false; fileInput?.click(); }} class="w-full text-left px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-black/5 dark:hover:bg-white/5 flex items-center gap-2">
|
||||
<button onclick={() => { showPlusDropdown = false; fileInput?.click(); }} class="w-full text-left px-4 py-2 text-sm text-[var(--color-ink-muted)] hover:bg-[var(--color-surface-sunken)] hover:text-[var(--color-ink)] flex items-center gap-2">
|
||||
<Icon icon="mdi:upload" class="text-lg text-green-500" />
|
||||
Upload File
|
||||
</button>
|
||||
<div class="h-px bg-gray-200 dark:bg-white/10 my-1"></div>
|
||||
<button onclick={() => { showPlusDropdown = false; importFileInput?.click(); }} class="w-full text-left px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-black/5 dark:hover:bg-white/5 flex items-center gap-2" disabled={isImporting}>
|
||||
<div class="h-px bg-[var(--color-line)] my-1"></div>
|
||||
<button onclick={() => { showPlusDropdown = false; importFileInput?.click(); }} class="w-full text-left px-4 py-2 text-sm text-[var(--color-ink-muted)] hover:bg-[var(--color-surface-sunken)] hover:text-[var(--color-ink)] flex items-center gap-2" disabled={isImporting}>
|
||||
{#if isImporting}
|
||||
<Icon icon="mdi:loading" class="text-lg text-purple-500 animate-spin" />
|
||||
Importing...
|
||||
@@ -467,29 +464,29 @@
|
||||
</div>
|
||||
|
||||
|
||||
<div class="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400 mb-6 bg-white/50 dark:bg-black/20 p-3 rounded-lg border border-gray-200 dark:border-white/10">
|
||||
<div class="flex items-center gap-2 text-sm text-[var(--color-ink-muted)] mb-6 bg-[var(--color-surface)] p-3 rounded-md border border-[var(--color-line)]">
|
||||
<button
|
||||
onclick={() => navigateToBreadcrumb(-1)}
|
||||
ondragover={(e) => { e.preventDefault(); dragOverBreadcrumbIndex = -1; }}
|
||||
ondragleave={() => dragOverBreadcrumbIndex = null}
|
||||
ondrop={(e) => handleDrop(e, null)}
|
||||
class="hover:text-blue-600 dark:hover:text-blue-400 font-medium transition-colors px-2 py-1 rounded {dragOverBreadcrumbIndex === -1 ? 'bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300' : ''}">
|
||||
class="hover:text-[var(--color-accent)] font-medium transition-colors px-2 py-1 rounded {dragOverBreadcrumbIndex === -1 ? 'bg-[var(--color-accent-soft)] text-[var(--color-accent)]' : ''}">
|
||||
<Icon icon="mdi:home" class="text-lg inline-block pb-0.5" /> Home
|
||||
</button>
|
||||
{#if inSharedDrive}
|
||||
<Icon icon="mdi:chevron-right" class="text-lg text-gray-400" />
|
||||
<span class="font-medium text-purple-600 dark:text-purple-400 flex items-center gap-1 px-2 py-1">
|
||||
<Icon icon="mdi:chevron-right" class="text-lg text-[var(--color-ink-muted)]" />
|
||||
<span class="font-medium text-[var(--color-accent)] flex items-center gap-1 px-2 py-1">
|
||||
<Icon icon="mdi:folder-account" class="text-base" /> Shared with me
|
||||
</span>
|
||||
{:else}
|
||||
{#each folderPath as folder, index}
|
||||
<Icon icon="mdi:chevron-right" class="text-lg text-gray-400" />
|
||||
<Icon icon="mdi:chevron-right" class="text-lg text-[var(--color-ink-muted)]" />
|
||||
<button
|
||||
onclick={() => navigateToBreadcrumb(index)}
|
||||
ondragover={(e) => { e.preventDefault(); dragOverBreadcrumbIndex = index; }}
|
||||
ondragleave={() => dragOverBreadcrumbIndex = null}
|
||||
ondrop={(e) => handleDrop(e, folder.id)}
|
||||
class="hover:text-blue-600 dark:hover:text-blue-400 font-medium transition-colors px-2 py-1 rounded {dragOverBreadcrumbIndex === index ? 'bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300' : ''}">
|
||||
class="hover:text-[var(--color-accent)] font-medium transition-colors px-2 py-1 rounded {dragOverBreadcrumbIndex === index ? 'bg-[var(--color-accent-soft)] text-[var(--color-accent)]' : ''}">
|
||||
{folder.name}
|
||||
</button>
|
||||
{/each}
|
||||
@@ -499,19 +496,19 @@
|
||||
{#if inSharedDrive}
|
||||
{#if sharedDocsLoading}
|
||||
<div class="min-h-[50vh] flex items-center justify-center">
|
||||
<div class="flex flex-col items-center gap-4 text-gray-500 dark:text-gray-400 animate-pulse">
|
||||
<div class="flex flex-col items-center gap-4 text-[var(--color-ink-muted)] animate-pulse">
|
||||
<Icon icon="mdi:loading" class="text-4xl animate-spin" />
|
||||
<p class="text-lg font-medium">Loading shared documents...</p>
|
||||
</div>
|
||||
</div>
|
||||
{:else if sharedDocs.length === 0}
|
||||
<div class="min-h-[50vh] flex items-center justify-center">
|
||||
<div class="text-center p-12 bg-white/50 dark:bg-black/20 rounded-2xl shadow-sm border border-gray-200 dark:border-white/10 max-w-md w-full">
|
||||
<div class="inline-flex items-center justify-center w-20 h-20 rounded-full bg-purple-100/50 dark:bg-purple-900/20 text-purple-600 dark:text-purple-400 mb-6">
|
||||
<div class="text-center p-12 bg-[var(--color-surface)] rounded-xl shadow-sm border border-[var(--color-line)] max-w-md w-full">
|
||||
<div class="inline-flex items-center justify-center w-20 h-20 rounded-full bg-[var(--color-accent-soft)] text-[var(--color-accent)] mb-6">
|
||||
<Icon icon="mdi:folder-account-outline" class="text-4xl" />
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">No shared documents</h3>
|
||||
<p class="text-gray-500 dark:text-gray-400">Documents shared with you by other users will appear here.</p>
|
||||
<h3 class="text-xl font-bold text-[var(--color-ink)] mb-2">No shared documents</h3>
|
||||
<p class="text-[var(--color-ink-muted)]">Documents shared with you by other users will appear here.</p>
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
@@ -532,7 +529,7 @@
|
||||
|
||||
{:else if loading}
|
||||
<div class="min-h-[50vh] flex items-center justify-center">
|
||||
<div class="flex flex-col items-center gap-4 text-gray-500 dark:text-gray-400 animate-pulse">
|
||||
<div class="flex flex-col items-center gap-4 text-[var(--color-ink-muted)] animate-pulse">
|
||||
<Icon icon="mdi:loading" class="text-4xl animate-spin" />
|
||||
<p class="text-lg font-medium">Loading your workspace...</p>
|
||||
</div>
|
||||
@@ -540,20 +537,20 @@
|
||||
{:else}
|
||||
{#if currentFolderId === null || folders.length > 0}
|
||||
<div class="mb-8">
|
||||
<div class="px-2 py-3 text-sm font-semibold text-gray-700 dark:text-gray-300">Folders</div>
|
||||
<div class="px-2 py-3 text-sm font-semibold text-[var(--color-ink-muted)]">Folders</div>
|
||||
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
|
||||
{#if currentFolderId === null}
|
||||
<div
|
||||
class="flex flex-row items-center p-3 bg-white/50 dark:bg-black/20 border border-gray-200 dark:border-white/10 rounded-xl shadow-sm hover:shadow-md cursor-pointer group transition-all duration-200 hover:-translate-y-0.5 hover:border-purple-300 dark:hover:border-purple-500/30"
|
||||
class="flex flex-row items-center p-3 bg-[var(--color-surface)] border border-[var(--color-line)] rounded-lg shadow-sm hover:border-[var(--color-accent)] cursor-pointer group transition"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
onclick={enterSharedDrive}
|
||||
onkeydown={(e) => e.key === 'Enter' && enterSharedDrive()}
|
||||
>
|
||||
<div class="flex items-center justify-center w-10 h-10 bg-purple-50 dark:bg-purple-500/10 rounded-lg group-hover:scale-105 transition-transform pointer-events-none shrink-0 mr-3">
|
||||
<Icon icon="mdi:folder-account" class="text-2xl text-purple-500" />
|
||||
<div class="flex items-center justify-center w-10 h-10 bg-[var(--color-accent-soft)] rounded-md group-hover:scale-105 transition-transform pointer-events-none shrink-0 mr-3">
|
||||
<Icon icon="mdi:folder-account" class="text-2xl text-[var(--color-accent)]" />
|
||||
</div>
|
||||
<span class="font-medium text-gray-900 dark:text-white text-sm truncate w-full pointer-events-none">Shared with me</span>
|
||||
<span class="font-medium text-[var(--color-ink)] text-sm truncate w-full pointer-events-none">Shared with me</span>
|
||||
</div>
|
||||
{/if}
|
||||
{#each folders as folder}
|
||||
@@ -591,16 +588,16 @@
|
||||
|
||||
{#if documents.length === 0 && files.length === 0 && currentFolderId !== null && folders.length === 0}
|
||||
<div class="min-h-[30vh] flex items-center justify-center">
|
||||
<p class="text-gray-500 dark:text-gray-400">This folder is empty.</p>
|
||||
<p class="text-[var(--color-ink-muted)]">This folder is empty.</p>
|
||||
</div>
|
||||
{:else if documents.length === 0 && files.length === 0 && folders.length === 0 && currentFolderId === null}
|
||||
<div class="text-center py-12">
|
||||
<div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-blue-100/50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400 mb-4">
|
||||
<div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-[var(--color-accent-soft)] text-[var(--color-accent)] mb-4">
|
||||
<Icon icon="mdi:file-document-outline" class="text-3xl" />
|
||||
</div>
|
||||
<h3 class="text-lg font-bold text-gray-900 dark:text-white mb-1">No documents yet</h3>
|
||||
<p class="text-gray-500 dark:text-gray-400 mb-6 text-sm">Create your first Typst document to get started.</p>
|
||||
<button onclick={openCreateModal} class="inline-flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white px-5 py-2.5 rounded-lg shadow-sm text-sm font-medium transition-colors">
|
||||
<h3 class="text-lg font-bold text-[var(--color-ink)] mb-1">No documents yet</h3>
|
||||
<p class="text-[var(--color-ink-muted)] mb-6 text-sm">Create your first Typst document to get started.</p>
|
||||
<button onclick={openCreateModal} class="inline-flex items-center gap-2 bg-[var(--color-accent)] hover:opacity-90 text-white px-5 py-2.5 rounded-md shadow-sm text-sm font-medium transition">
|
||||
<Icon icon="mdi:plus" class="text-lg" />
|
||||
Create Document
|
||||
</button>
|
||||
@@ -614,7 +611,13 @@
|
||||
{/if}
|
||||
|
||||
{#if showDeleteModal && deleteTarget}
|
||||
<DeleteModal {deleteTarget} {confirmDelete} onClose={() => showDeleteModal = false} />
|
||||
<ConfirmModal
|
||||
title={`Delete ${deleteTarget.type}`}
|
||||
message={`Are you sure you want to delete '${deleteTarget.name}'? ${deleteTarget.type === 'folder' ? 'This will also delete all of its contents. ' : ''}This action cannot be undone.`}
|
||||
confirmLabel="Delete"
|
||||
onconfirm={confirmDelete}
|
||||
onclose={() => showDeleteModal = false}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
{#if showInfoModal && selectedInfo}
|
||||
@@ -622,19 +625,51 @@
|
||||
{/if}
|
||||
|
||||
{#if showRenameModal}
|
||||
<RenameModal initialTitle={renameTitle} {handleRename} onClose={() => showRenameModal = false} />
|
||||
<PromptModal
|
||||
title="Rename"
|
||||
label="New name"
|
||||
icon="ph:pencil-simple"
|
||||
value={renameTitle}
|
||||
confirmLabel="Save"
|
||||
onsubmit={handleRename}
|
||||
onclose={() => showRenameModal = false}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
{#if showCreateModal}
|
||||
<CreateDocModal {createDoc} onClose={() => showCreateModal = false} />
|
||||
<PromptModal
|
||||
title="Create document"
|
||||
label="Document title"
|
||||
icon="ph:file-plus"
|
||||
value="Untitled Document"
|
||||
confirmLabel="Create"
|
||||
onsubmit={createDoc}
|
||||
onclose={() => showCreateModal = false}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
{#if showCreateProjectModal}
|
||||
<CreateProjectModal {createProject} onClose={() => showCreateProjectModal = false} />
|
||||
<PromptModal
|
||||
title="Create project"
|
||||
label="Project name"
|
||||
icon="ph:folder-star"
|
||||
value="Untitled Project"
|
||||
confirmLabel="Create"
|
||||
onsubmit={createProject}
|
||||
onclose={() => showCreateProjectModal = false}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
{#if showCreateFolderModal}
|
||||
<CreateFolderModal {createFolder} onClose={() => showCreateFolderModal = false} />
|
||||
<PromptModal
|
||||
title="Create folder"
|
||||
label="Folder name"
|
||||
icon="ph:folder-plus"
|
||||
value="New Folder"
|
||||
confirmLabel="Create"
|
||||
onsubmit={createFolder}
|
||||
onclose={() => showCreateFolderModal = false}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
</main>
|
||||
|
||||
@@ -129,7 +129,7 @@
|
||||
<main class="flex-1 flex flex-col md:flex-row overflow-hidden relative" oncontextmenu={handleContextMenu}>
|
||||
|
||||
{#if !isViewer}
|
||||
<div class="flex flex-col relative min-h-[50%] md:min-h-0 bg-transparent z-10 shadow-[1px_0_10px_rgba(0,0,0,0.05)] dark:shadow-[1px_0_10px_rgba(0,0,0,0.2)] {$previewOpenStore ? 'w-full md:w-1/2 border-r border-gray-200 dark:border-white/10' : 'w-full'}">
|
||||
<div class="flex flex-col relative min-h-[50%] md:min-h-0 bg-transparent z-10 {$previewOpenStore ? 'w-full md:w-1/2 border-r border-[var(--color-line)]' : 'w-full'}">
|
||||
{#if initialized}
|
||||
<Editor />
|
||||
{/if}
|
||||
@@ -137,7 +137,7 @@
|
||||
{/if}
|
||||
|
||||
{#if $previewOpenStore || isViewer}
|
||||
<div class="{isViewer ? 'w-full' : 'w-full md:w-1/2'} relative bg-white/50 dark:bg-black/20 min-h-[50%] md:min-h-0 flex flex-col">
|
||||
<div class="{isViewer ? 'w-full' : 'w-full md:w-1/2'} relative bg-[var(--color-surface)] min-h-[50%] md:min-h-0 flex flex-col">
|
||||
<Preview {svgs} />
|
||||
<ErrorBanner {errors} />
|
||||
</div>
|
||||
@@ -158,7 +158,7 @@
|
||||
</button>
|
||||
<div class="h-px bg-[var(--theme-border)] my-1"></div>
|
||||
<button onclick={() => { navigator.clipboard.writeText(contextMenu.text); closeContextMenu(); }} class="w-full text-left px-4 py-2 text-sm hover:bg-[var(--theme-border)] flex items-center gap-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-gray-500"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-[var(--color-ink-muted)]"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>
|
||||
Copy Text
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -51,65 +51,60 @@
|
||||
<meta name="description" content="Sign in to TypstDrive." />
|
||||
</svelte:head>
|
||||
|
||||
<div class="min-h-screen flex flex-col relative overflow-hidden">
|
||||
<div class="flex-grow flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
|
||||
<div class="absolute -top-40 -left-40 w-96 h-96 bg-blue-400/20 dark:bg-blue-600/10 rounded-full blur-3xl mix-blend-multiply z-0"></div>
|
||||
<div class="absolute top-40 -right-40 w-96 h-96 bg-purple-400/20 dark:bg-purple-600/10 rounded-full blur-3xl mix-blend-multiply z-0"></div>
|
||||
<div class="absolute -bottom-40 left-20 w-96 h-96 bg-indigo-400/20 dark:bg-indigo-600/10 rounded-full blur-3xl mix-blend-multiply z-0"></div>
|
||||
|
||||
<div class="max-w-md w-full space-y-8 bg-white/80 dark:bg-black/40 backdrop-blur-xl p-10 rounded-2xl shadow-2xl border border-gray-200/50 dark:border-white/10 relative z-10">
|
||||
<div class="min-h-screen flex flex-col bg-[var(--color-surface-muted)]">
|
||||
<div class="flex-grow flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
|
||||
<div class="max-w-md w-full space-y-8 rounded-xl border border-[var(--color-line)] bg-[var(--color-surface)] p-10 shadow-2xl">
|
||||
<div class="text-center">
|
||||
<div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-blue-100/50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-500 mb-6 mx-auto shadow-sm">
|
||||
<Icon icon="mdi:script-text" class="text-3xl" />
|
||||
<div class="inline-flex items-center justify-center w-24 h-24 rounded-full bg-[var(--color-accent)] mb-6 mx-auto shadow-sm">
|
||||
<img src="/favicon.png" alt="TypstDrive" class="h-14 w-14" />
|
||||
</div>
|
||||
<h2 class="text-3xl font-extrabold tracking-tight text-gray-900 dark:text-white">
|
||||
<h2 class="text-3xl font-extrabold tracking-tight text-[var(--color-ink)]">
|
||||
Welcome back
|
||||
</h2>
|
||||
<p class="mt-2 text-sm text-gray-600 dark:text-gray-400 font-medium">
|
||||
<p class="mt-2 text-sm text-[var(--color-ink-muted)] font-medium">
|
||||
Sign in to your TypstDrive workspace
|
||||
</p>
|
||||
</div>
|
||||
<form class="mt-8 space-y-6" onsubmit={login}>
|
||||
<div class="space-y-5">
|
||||
<div>
|
||||
<label for="email" class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1.5">Email Address</label>
|
||||
<label for="email" class="block text-sm font-semibold text-[var(--color-ink-muted)] mb-1.5">Email address</label>
|
||||
<div class="relative">
|
||||
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||||
<Icon icon="mdi:email" class="text-gray-400 dark:text-gray-500" />
|
||||
<Icon icon="mdi:email" class="text-[var(--color-ink-muted)]" />
|
||||
</div>
|
||||
<input id="email" name="email" type="email" required bind:value={email} class="block w-full rounded-xl border border-gray-300 dark:border-white/20 pl-10 pr-3 py-2.5 bg-white/50 dark:bg-black/40 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 sm:text-sm transition-all duration-200" placeholder="[email protected]">
|
||||
<input id="email" name="email" type="email" required bind:value={email} class="block w-full rounded-md border border-[var(--color-line)] pl-10 pr-3 py-2.5 bg-[var(--color-surface)] text-[var(--color-ink)] placeholder-[var(--color-ink-muted)] focus:border-[var(--color-accent)] focus:outline-none sm:text-sm transition-colors" placeholder="[email protected]">
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label for="password" class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1.5">Password</label>
|
||||
<label for="password" class="block text-sm font-semibold text-[var(--color-ink-muted)] mb-1.5">Password</label>
|
||||
<div class="relative">
|
||||
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||||
<Icon icon="mdi:lock" class="text-gray-400 dark:text-gray-500" />
|
||||
<Icon icon="mdi:lock" class="text-[var(--color-ink-muted)]" />
|
||||
</div>
|
||||
<input id="password" name="password" type="password" required bind:value={password} class="block w-full rounded-xl border border-gray-300 dark:border-white/20 pl-10 pr-3 py-2.5 bg-white/50 dark:bg-black/40 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 sm:text-sm transition-all duration-200" placeholder="••••••••">
|
||||
<input id="password" name="password" type="password" required bind:value={password} class="block w-full rounded-md border border-[var(--color-line)] pl-10 pr-3 py-2.5 bg-[var(--color-surface)] text-[var(--color-ink)] placeholder-[var(--color-ink-muted)] focus:border-[var(--color-accent)] focus:outline-none sm:text-sm transition-colors" placeholder="••••••••">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if errorMsg}
|
||||
<div class="flex items-center gap-2 text-red-600 bg-red-50 dark:bg-red-500/10 dark:text-red-400 p-3 rounded-lg text-sm border border-red-200 dark:border-red-500/20 shadow-sm animate-in slide-in-from-top-1 fade-in duration-200">
|
||||
<div class="flex items-center gap-2 text-[var(--color-danger)] bg-[var(--color-danger)]/10 p-3 rounded-md text-sm border border-[var(--color-danger)]/20">
|
||||
<Icon icon="mdi:alert-circle" class="text-lg flex-shrink-0" />
|
||||
<span class="font-medium">{errorMsg}</span>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="pt-2">
|
||||
<button type="submit" class="group w-full flex justify-center items-center gap-2 py-3 px-4 border border-transparent text-sm font-bold rounded-xl text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-zinc-900 focus:ring-blue-500 transition-all duration-200 shadow-md hover:shadow-lg transform hover:-translate-y-0.5">
|
||||
Sign In
|
||||
<button type="submit" class="group w-full flex justify-center items-center gap-2 py-3 px-4 text-sm font-bold rounded-md text-white bg-[var(--color-accent)] hover:opacity-90 focus:outline-none transition">
|
||||
Sign in
|
||||
<Icon icon="mdi:arrow-right" class="text-lg group-hover:translate-x-1 transition-transform" />
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
{#if registrationEnabled}
|
||||
<div class="text-sm text-center mt-6 pt-4 border-t border-gray-200 dark:border-white/10">
|
||||
<span class="text-gray-500 dark:text-gray-400">New to TypstDrive? </span>
|
||||
<a href="/register" class="font-bold text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300 transition-colors hover:underline">
|
||||
<div class="text-sm text-center mt-6 pt-4 border-t border-[var(--color-line)]">
|
||||
<span class="text-[var(--color-ink-muted)]">New to TypstDrive? </span>
|
||||
<a href="/register" class="font-bold text-[var(--color-accent)] hover:underline transition-colors">
|
||||
Create an account
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -46,55 +46,55 @@
|
||||
<title>Packages - TypstDrive</title>
|
||||
</svelte:head>
|
||||
|
||||
<div class="min-h-screen bg-gray-50 dark:bg-[var(--theme-bg)]">
|
||||
<div class="min-h-screen bg-[var(--color-surface-muted)]">
|
||||
<Navbar />
|
||||
|
||||
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||
<div class="mb-6">
|
||||
<button onclick={() => goto('/dashboard')} class="text-sm font-medium text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white transition-colors mb-2 flex items-center gap-1.5">
|
||||
<button onclick={() => goto('/dashboard')} class="text-sm font-medium text-[var(--color-ink-muted)] hover:text-[var(--color-ink)] transition-colors mb-2 flex items-center gap-1.5">
|
||||
<Icon icon="mdi:arrow-left" class="text-lg" />
|
||||
Back to Dashboard
|
||||
</button>
|
||||
<h2 class="text-2xl font-bold text-gray-900 dark:text-white flex items-center gap-2">
|
||||
<h2 class="text-2xl font-bold text-[var(--color-ink)] flex items-center gap-2">
|
||||
<Icon icon="mdi:package-variant-closed" class="text-purple-500" />
|
||||
Packages
|
||||
</h2>
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
|
||||
<p class="text-sm text-[var(--color-ink-muted)] mt-1">
|
||||
Instance-local Typst packages, published from Projects and importable as
|
||||
<code class="font-mono text-xs bg-gray-100 dark:bg-white/10 px-1.5 py-0.5 rounded">@typstdrive/<name>:<version></code>.
|
||||
<code class="font-mono text-xs bg-[var(--color-surface-sunken)] px-1.5 py-0.5 rounded">@typstdrive/<name>:<version></code>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{#if loading}
|
||||
<p class="text-gray-500 dark:text-gray-400">Loading…</p>
|
||||
<p class="text-[var(--color-ink-muted)]">Loading…</p>
|
||||
{:else if packages.length === 0}
|
||||
<div class="text-center py-16 text-gray-500 dark:text-gray-400">
|
||||
<div class="text-center py-16 text-[var(--color-ink-muted)]">
|
||||
<Icon icon="mdi:package-variant" class="text-5xl mx-auto mb-3 opacity-50" />
|
||||
<p>No packages published yet. Open a Project and use “Publish” to create one.</p>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="space-y-3">
|
||||
{#each packages as pkg (pkg.id)}
|
||||
<div class="bg-white dark:bg-black/20 rounded-xl border border-gray-200 dark:border-white/10 p-4 flex items-start justify-between gap-4">
|
||||
<div class="bg-[var(--color-surface)] rounded-xl border border-[var(--color-line)] p-4 flex items-start justify-between gap-4">
|
||||
<div class="min-w-0">
|
||||
<div class="flex items-center gap-2">
|
||||
<p class="font-semibold text-gray-900 dark:text-white truncate">@typstdrive/{pkg.name}</p>
|
||||
<p class="font-semibold text-[var(--color-ink)] truncate">@typstdrive/{pkg.name}</p>
|
||||
{#if pkg.latest_version}
|
||||
<span class="text-xs font-mono bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300 px-1.5 py-0.5 rounded">v{pkg.latest_version}</span>
|
||||
{/if}
|
||||
</div>
|
||||
{#if pkg.description}
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400 mt-1 truncate">{pkg.description}</p>
|
||||
<p class="text-sm text-[var(--color-ink-muted)] mt-1 truncate">{pkg.description}</p>
|
||||
{/if}
|
||||
<p class="text-xs text-gray-400 mt-1">by {pkg.owner_name ?? 'unknown'}</p>
|
||||
<pre class="mt-2 text-xs font-mono bg-gray-50 dark:bg-black/30 border border-gray-100 dark:border-white/5 rounded px-2 py-1 overflow-x-auto">{importSnippet(pkg)}</pre>
|
||||
<p class="text-xs text-[var(--color-ink-muted)] mt-1">by {pkg.owner_name ?? 'unknown'}</p>
|
||||
<pre class="mt-2 text-xs font-mono bg-[var(--color-surface-muted)] border border-[var(--color-line)] rounded px-2 py-1 overflow-x-auto">{importSnippet(pkg)}</pre>
|
||||
</div>
|
||||
<div class="flex flex-col items-end gap-2 flex-shrink-0">
|
||||
<button onclick={() => copy(pkg)} class="text-xs px-2 py-1 rounded-md bg-gray-100 dark:bg-white/5 hover:bg-gray-200 dark:hover:bg-white/10 flex items-center gap-1">
|
||||
<button onclick={() => copy(pkg)} class="text-xs px-2 py-1 rounded-md bg-[var(--color-surface-muted)] hover:bg-[var(--color-surface-sunken)] flex items-center gap-1">
|
||||
<Icon icon={copied === pkg.id ? 'mdi:check' : 'mdi:content-copy'} class="text-sm" />
|
||||
{copied === pkg.id ? 'Copied' : 'Copy'}
|
||||
</button>
|
||||
<button onclick={() => remove(pkg)} title="Delete" class="text-xs px-2 py-1 rounded-md text-gray-500 hover:text-red-600 hover:bg-red-50 dark:hover:bg-red-900/20 flex items-center gap-1">
|
||||
<button onclick={() => remove(pkg)} title="Delete" class="text-xs px-2 py-1 rounded-md text-[var(--color-ink-muted)] hover:text-[var(--color-danger)] hover:bg-[var(--color-danger)]/10 flex items-center gap-1">
|
||||
<Icon icon="mdi:trash-can-outline" class="text-sm" /> Delete
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -224,7 +224,7 @@
|
||||
</aside>
|
||||
|
||||
{#if !readOnly}
|
||||
<div class="flex flex-col min-h-0 {$previewOpenStore ? 'w-full md:w-1/2 border-r border-gray-200 dark:border-white/10' : 'flex-1'}">
|
||||
<div class="flex flex-col min-h-0 {$previewOpenStore ? 'w-full md:w-1/2 border-r border-[var(--color-line)]' : 'flex-1'}">
|
||||
{#if ready && activeEntry}
|
||||
{#key activeFileId}
|
||||
<Editor ytext={activeEntry.text} awarenessProvider={activeEntry.provider} filePath={activePath} enableLsp={false} />
|
||||
@@ -234,7 +234,7 @@
|
||||
{/if}
|
||||
|
||||
{#if $previewOpenStore || readOnly}
|
||||
<div class="{readOnly ? 'flex-1' : 'w-full md:w-1/2'} relative bg-white/50 dark:bg-black/20 flex flex-col">
|
||||
<div class="{readOnly ? 'flex-1' : 'w-full md:w-1/2'} relative bg-[var(--color-surface)] flex flex-col">
|
||||
<Preview {svgs} />
|
||||
<ErrorBanner {errors} />
|
||||
</div>
|
||||
@@ -247,7 +247,7 @@
|
||||
{#if contextMenu.show}
|
||||
<div class="fixed z-[9999] bg-[var(--theme-bg)] text-[var(--theme-text)] rounded-lg shadow-xl border border-[var(--theme-border)] py-1 min-w-[180px] overflow-hidden" style="left: {contextMenu.x}px; top: {contextMenu.y}px;">
|
||||
<button onclick={() => { navigator.clipboard.writeText(contextMenu.text); closeContextMenu(); }} class="w-full text-left px-4 py-2 text-sm hover:bg-[var(--theme-border)] flex items-center gap-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-gray-500"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-[var(--color-ink-muted)]"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>
|
||||
Copy Text
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -4,6 +4,9 @@
|
||||
import Icon from '@iconify/svelte';
|
||||
import Navbar from '$lib/components/dashboard/Navbar.svelte';
|
||||
import ProjectCard from '$lib/components/dashboard/ProjectCard.svelte';
|
||||
import PromptModal from '$lib/components/PromptModal.svelte';
|
||||
import ConfirmModal from '$lib/components/ConfirmModal.svelte';
|
||||
import Modal from '$lib/components/Modal.svelte';
|
||||
|
||||
interface Project {
|
||||
id: string;
|
||||
@@ -18,7 +21,6 @@
|
||||
let shared = $state<Project[]>([]);
|
||||
let loading = $state(true);
|
||||
let showCreate = $state(false);
|
||||
let newName = $state('');
|
||||
let creating = $state(false);
|
||||
|
||||
let activeMenu = $state<string | null>(null);
|
||||
@@ -27,21 +29,20 @@
|
||||
let renameName = $state('');
|
||||
let showInfo = $state(false);
|
||||
let infoProject = $state<Project | null>(null);
|
||||
let deleteTarget = $state<{ id: string; name: string } | null>(null);
|
||||
|
||||
function setActiveMenu(id: string | null) { activeMenu = id; }
|
||||
function openInfo(project: Project) { activeMenu = null; infoProject = project; showInfo = true; }
|
||||
function openRename(id: string, name: string) { activeMenu = null; renameId = id; renameName = name; showRename = true; }
|
||||
|
||||
async function submitRename(e: Event) {
|
||||
e.preventDefault();
|
||||
if (!renameName.trim()) return;
|
||||
async function submitRename(name: string) {
|
||||
const res = await fetch(`/api/projects/${renameId}`, {
|
||||
method: 'PATCH',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ name: renameName.trim() })
|
||||
body: JSON.stringify({ name })
|
||||
});
|
||||
if (res.ok) {
|
||||
projects = projects.map((p) => (p.id === renameId ? { ...p, name: renameName.trim() } : p));
|
||||
projects = projects.map((p) => (p.id === renameId ? { ...p, name } : p));
|
||||
}
|
||||
showRename = false;
|
||||
}
|
||||
@@ -62,13 +63,12 @@
|
||||
loading = false;
|
||||
}
|
||||
|
||||
async function create() {
|
||||
if (!newName.trim()) return;
|
||||
async function create(name: string) {
|
||||
creating = true;
|
||||
const res = await fetch('/api/projects', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ name: newName.trim() })
|
||||
body: JSON.stringify({ name })
|
||||
});
|
||||
creating = false;
|
||||
if (res.ok) {
|
||||
@@ -77,10 +77,16 @@
|
||||
}
|
||||
}
|
||||
|
||||
async function remove(id: string, name: string) {
|
||||
if (!confirm(`Delete project "${name}"? This cannot be undone.`)) return;
|
||||
const res = await fetch(`/api/projects/${id}`, { method: 'DELETE' });
|
||||
if (res.ok) projects = projects.filter((p) => p.id !== id);
|
||||
function requestDelete(id: string, name: string) {
|
||||
activeMenu = null;
|
||||
deleteTarget = { id, name };
|
||||
}
|
||||
|
||||
async function confirmDeleteProject() {
|
||||
if (!deleteTarget) return;
|
||||
const res = await fetch(`/api/projects/${deleteTarget.id}`, { method: 'DELETE' });
|
||||
if (res.ok) projects = projects.filter((p) => p.id !== deleteTarget!.id);
|
||||
deleteTarget = null;
|
||||
}
|
||||
|
||||
onMount(load);
|
||||
@@ -92,32 +98,32 @@
|
||||
|
||||
<svelte:window onclick={handleWindowClick} />
|
||||
|
||||
<div class="min-h-screen bg-gray-50 dark:bg-[var(--theme-bg)]">
|
||||
<div class="min-h-screen bg-[var(--color-surface-muted)]">
|
||||
<Navbar />
|
||||
|
||||
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<div>
|
||||
<button onclick={() => goto('/dashboard')} class="text-sm font-medium text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white transition-colors mb-2 flex items-center gap-1.5">
|
||||
<button onclick={() => goto('/dashboard')} class="text-sm font-medium text-[var(--color-ink-muted)] hover:text-[var(--color-ink)] transition-colors mb-2 flex items-center gap-1.5">
|
||||
<Icon icon="mdi:arrow-left" class="text-lg" />
|
||||
Back to Dashboard
|
||||
</button>
|
||||
<h2 class="text-2xl font-bold text-gray-900 dark:text-white flex items-center gap-2">
|
||||
<Icon icon="mdi:folder-multiple-outline" class="text-blue-500" />
|
||||
<h2 class="text-2xl font-bold text-[var(--color-ink)] flex items-center gap-2">
|
||||
<Icon icon="mdi:folder-multiple-outline" class="text-[var(--color-accent)]" />
|
||||
Projects
|
||||
</h2>
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Multi-file Typst workspaces with their own <code class="font-mono text-xs">typst.toml</code>.</p>
|
||||
<p class="text-sm text-[var(--color-ink-muted)] mt-1">Multi-file Typst workspaces with their own <code class="font-mono text-xs">typst.toml</code>.</p>
|
||||
</div>
|
||||
<button onclick={() => { showCreate = true; newName = ''; }} class="px-4 py-2 text-sm rounded-lg bg-blue-600 text-white hover:bg-blue-700 flex items-center gap-2">
|
||||
<button onclick={() => (showCreate = true)} class="px-4 py-2 text-sm rounded-md bg-[var(--color-accent)] text-white hover:opacity-90 transition flex items-center gap-2">
|
||||
<Icon icon="mdi:plus" class="text-lg" /> New Project
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{#if loading}
|
||||
<p class="text-gray-500 dark:text-gray-400">Loading…</p>
|
||||
<p class="text-[var(--color-ink-muted)]">Loading…</p>
|
||||
{:else}
|
||||
{#if projects.length === 0}
|
||||
<div class="text-center py-16 text-gray-500 dark:text-gray-400">
|
||||
<div class="text-center py-16 text-[var(--color-ink-muted)]">
|
||||
<Icon icon="mdi:folder-multiple-outline" class="text-5xl mx-auto mb-3 opacity-50" />
|
||||
<p>No projects yet. Create one to start a multi-file project.</p>
|
||||
</div>
|
||||
@@ -130,29 +136,29 @@
|
||||
{setActiveMenu}
|
||||
{openInfo}
|
||||
{openRename}
|
||||
deleteProject={remove}
|
||||
deleteProject={requestDelete}
|
||||
/>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if shared.length > 0}
|
||||
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mt-10 mb-4 flex items-center gap-2">
|
||||
<Icon icon="mdi:account-group-outline" class="text-blue-500" /> Shared with me
|
||||
<h3 class="text-lg font-semibold text-[var(--color-ink)] mt-10 mb-4 flex items-center gap-2">
|
||||
<Icon icon="mdi:account-group-outline" class="text-[var(--color-accent)]" /> Shared with me
|
||||
</h3>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{#each shared as project (project.id)}
|
||||
<button onclick={() => goto(`/project/${project.id}`)} class="text-left bg-white dark:bg-black/20 rounded-xl border border-gray-200 dark:border-white/10 overflow-hidden hover:shadow-md transition-shadow">
|
||||
<div class="h-32 bg-gray-50 dark:bg-black/30 flex items-center justify-center overflow-hidden border-b border-gray-100 dark:border-white/5">
|
||||
<button onclick={() => goto(`/project/${project.id}`)} class="text-left bg-[var(--color-surface)] rounded-lg border border-[var(--color-line)] overflow-hidden hover:border-[var(--color-accent)] transition">
|
||||
<div class="h-32 bg-[var(--color-surface-muted)] flex items-center justify-center overflow-hidden border-b border-[var(--color-line)]">
|
||||
{#if project.thumbnail_svg}
|
||||
{@html project.thumbnail_svg}
|
||||
{:else}
|
||||
<Icon icon="mdi:folder-multiple-outline" class="text-4xl text-gray-300 dark:text-gray-600" />
|
||||
<Icon icon="mdi:folder-multiple-outline" class="text-4xl text-[var(--color-ink-muted)]" />
|
||||
{/if}
|
||||
</div>
|
||||
<div class="p-3">
|
||||
<p class="font-medium text-gray-900 dark:text-white truncate">{project.name}</p>
|
||||
<p class="text-xs text-gray-400 mt-0.5">{project.effective_role}</p>
|
||||
<p class="font-medium text-[var(--color-ink)] truncate">{project.name}</p>
|
||||
<p class="text-xs text-[var(--color-ink-muted)] mt-0.5">{project.effective_role}</p>
|
||||
</div>
|
||||
</button>
|
||||
{/each}
|
||||
@@ -163,45 +169,59 @@
|
||||
</div>
|
||||
|
||||
{#if showCreate}
|
||||
<div class="fixed inset-0 z-[9999] flex items-center justify-center bg-black/50" onclick={() => (showCreate = false)} role="presentation">
|
||||
<div class="bg-[var(--theme-bg)] text-[var(--theme-text)] rounded-xl shadow-2xl border border-gray-200 dark:border-white/10 w-full max-w-md p-6" onclick={(e) => e.stopPropagation()} role="presentation">
|
||||
<h2 class="text-lg font-bold mb-4 flex items-center gap-2"><Icon icon="mdi:folder-plus-outline" class="text-blue-500" /> New Project</h2>
|
||||
<input bind:value={newName} placeholder="Project name" onkeydown={(e) => e.key === 'Enter' && create()} class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-white/10 bg-transparent text-sm mb-4 focus:outline-none focus:ring-2 focus:ring-blue-500/40" />
|
||||
<div class="flex justify-end gap-2">
|
||||
<button onclick={() => (showCreate = false)} class="px-4 py-2 text-sm rounded-lg bg-gray-100 dark:bg-white/5 hover:bg-gray-200 dark:hover:bg-white/10">Cancel</button>
|
||||
<button onclick={create} disabled={creating} class="px-4 py-2 text-sm rounded-lg bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50">Create</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<PromptModal
|
||||
title="New project"
|
||||
label="Project name"
|
||||
icon="ph:folder-star"
|
||||
placeholder="Untitled Project"
|
||||
confirmLabel="Create"
|
||||
onsubmit={create}
|
||||
onclose={() => (showCreate = false)}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
{#if showRename}
|
||||
<div class="fixed inset-0 z-[9999] flex items-center justify-center bg-black/50" onclick={() => (showRename = false)} role="presentation">
|
||||
<form onsubmit={submitRename} class="bg-[var(--theme-bg)] text-[var(--theme-text)] rounded-xl shadow-2xl border border-gray-200 dark:border-white/10 w-full max-w-md p-6" onclick={(e) => e.stopPropagation()}>
|
||||
<h2 class="text-lg font-bold mb-4 flex items-center gap-2"><Icon icon="mdi:pencil-outline" class="text-yellow-500" /> Rename Project</h2>
|
||||
<input bind:value={renameName} class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-white/10 bg-transparent text-sm mb-4 focus:outline-none focus:ring-2 focus:ring-blue-500/40" />
|
||||
<div class="flex justify-end gap-2">
|
||||
<button type="button" onclick={() => (showRename = false)} class="px-4 py-2 text-sm rounded-lg bg-gray-100 dark:bg-white/5 hover:bg-gray-200 dark:hover:bg-white/10">Cancel</button>
|
||||
<button type="submit" class="px-4 py-2 text-sm rounded-lg bg-blue-600 text-white hover:bg-blue-700">Save</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<PromptModal
|
||||
title="Rename project"
|
||||
label="Project name"
|
||||
icon="ph:pencil-simple"
|
||||
value={renameName}
|
||||
confirmLabel="Save"
|
||||
onsubmit={submitRename}
|
||||
onclose={() => (showRename = false)}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
{#if showInfo && infoProject}
|
||||
<div class="fixed inset-0 z-[9999] flex items-center justify-center bg-black/50" onclick={() => (showInfo = false)} role="presentation">
|
||||
<div class="bg-[var(--theme-bg)] text-[var(--theme-text)] rounded-xl shadow-2xl border border-gray-200 dark:border-white/10 w-full max-w-sm overflow-hidden" onclick={(e) => e.stopPropagation()} role="presentation">
|
||||
<div class="p-6 border-b border-gray-100 dark:border-white/10 flex items-center gap-3">
|
||||
<Icon icon="mdi:folder-multiple-outline" class="text-xl text-blue-500" />
|
||||
<h3 class="text-lg font-semibold flex-grow truncate">{infoProject.name}</h3>
|
||||
<Modal title={infoProject.name} icon="ph:folder-star" onclose={() => (showInfo = false)}>
|
||||
<div class="flex flex-col gap-4 text-xs">
|
||||
<div>
|
||||
<p class="mb-1 font-medium text-[var(--color-ink-muted)]">Entrypoint</p>
|
||||
<p class="font-mono text-sm text-[var(--color-ink)]">{infoProject.entrypoint}</p>
|
||||
</div>
|
||||
<div class="p-6 space-y-4 text-sm">
|
||||
<div><p class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-1">Entrypoint</p><p class="font-mono">{infoProject.entrypoint}</p></div>
|
||||
<div><p class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-1">Last Modified</p><p>{new Date(infoProject.updated_at.endsWith('Z') ? infoProject.updated_at : infoProject.updated_at + 'Z').toLocaleString()}</p></div>
|
||||
</div>
|
||||
<div class="p-4 bg-gray-50 dark:bg-white/5 border-t border-gray-100 dark:border-white/10 flex justify-end">
|
||||
<button onclick={() => (showInfo = false)} class="px-5 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-lg">Close</button>
|
||||
<div>
|
||||
<p class="mb-1 font-medium text-[var(--color-ink-muted)]">Last modified</p>
|
||||
<p class="text-sm text-[var(--color-ink)]">{new Date(infoProject.updated_at.endsWith('Z') ? infoProject.updated_at : infoProject.updated_at + 'Z').toLocaleString()}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#snippet footer()}
|
||||
<button
|
||||
onclick={() => (showInfo = false)}
|
||||
class="rounded-md bg-[var(--color-accent)] px-3 py-1.5 text-xs font-medium text-white transition hover:opacity-90"
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
{/snippet}
|
||||
</Modal>
|
||||
{/if}
|
||||
|
||||
{#if deleteTarget}
|
||||
<ConfirmModal
|
||||
title="Delete project"
|
||||
message={`'${deleteTarget.name}' will be permanently deleted. This cannot be undone.`}
|
||||
confirmLabel="Delete"
|
||||
onconfirm={confirmDeleteProject}
|
||||
onclose={() => (deleteTarget = null)}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
@@ -35,7 +35,7 @@
|
||||
errorMsg = text || 'Registration failed';
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
const loginRes = await fetch('/api/auth/login', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
@@ -62,30 +62,26 @@
|
||||
<meta name="description" content="Create a new TypstDrive account." />
|
||||
</svelte:head>
|
||||
|
||||
<div class="min-h-screen flex flex-col relative overflow-hidden">
|
||||
<div class="flex-grow flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
<div class="absolute -top-40 right-20 w-96 h-96 bg-emerald-400/20 dark:bg-emerald-600/10 rounded-full blur-3xl mix-blend-multiply z-0"></div>
|
||||
<div class="absolute top-40 -left-20 w-96 h-96 bg-teal-400/20 dark:bg-teal-600/10 rounded-full blur-3xl mix-blend-multiply z-0"></div>
|
||||
<div class="absolute -bottom-40 right-40 w-96 h-96 bg-blue-400/20 dark:bg-blue-600/10 rounded-full blur-3xl mix-blend-multiply z-0"></div>
|
||||
|
||||
<div class="max-w-md w-full space-y-8 bg-white/80 dark:bg-black/40 backdrop-blur-xl p-10 rounded-2xl shadow-2xl border border-gray-200/50 dark:border-white/10 relative z-10">
|
||||
<div class="min-h-screen flex flex-col bg-[var(--color-surface-muted)]">
|
||||
<div class="flex-grow flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
|
||||
<div class="max-w-md w-full space-y-8 rounded-xl border border-[var(--color-line)] bg-[var(--color-surface)] p-10 shadow-2xl">
|
||||
<div class="text-center">
|
||||
<div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-blue-100/50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-500 mb-6 mx-auto shadow-sm">
|
||||
<div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-[var(--color-accent-soft)] text-[var(--color-accent)] mb-6 mx-auto shadow-sm">
|
||||
<Icon icon="mdi:account-plus" class="text-3xl" />
|
||||
</div>
|
||||
<h2 class="text-3xl font-extrabold tracking-tight text-gray-900 dark:text-white">
|
||||
<h2 class="text-3xl font-extrabold tracking-tight text-[var(--color-ink)]">
|
||||
Create an account
|
||||
</h2>
|
||||
<p class="mt-2 text-sm text-gray-600 dark:text-gray-400 font-medium">
|
||||
<p class="mt-2 text-sm text-[var(--color-ink-muted)] font-medium">
|
||||
Join TypstDrive to start collaborating
|
||||
</p>
|
||||
</div>
|
||||
{#if registrationDisabled}
|
||||
<div class="flex flex-col items-center gap-4 py-4">
|
||||
<div class="flex items-center gap-3 w-full bg-amber-50 dark:bg-amber-500/10 text-amber-700 dark:text-amber-400 p-4 rounded-xl border border-amber-200 dark:border-amber-500/20">
|
||||
<div class="flex items-center gap-3 w-full bg-amber-50 dark:bg-amber-500/10 text-amber-700 dark:text-amber-400 p-4 rounded-md border border-amber-200 dark:border-amber-500/20">
|
||||
<Icon icon="mdi:lock-outline" class="text-2xl flex-shrink-0" />
|
||||
<div>
|
||||
<p class="font-semibold text-sm">Registration Disabled</p>
|
||||
<p class="font-semibold text-sm">Registration disabled</p>
|
||||
<p class="text-xs mt-0.5 text-amber-600 dark:text-amber-500">New account creation has been disabled by the administrator. Please contact your administrator to get an account.</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -94,52 +90,52 @@
|
||||
<form class="mt-8 space-y-6" onsubmit={register}>
|
||||
<div class="space-y-5">
|
||||
<div>
|
||||
<label for="username" class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1.5">Username</label>
|
||||
<label for="username" class="block text-sm font-semibold text-[var(--color-ink-muted)] mb-1.5">Username</label>
|
||||
<div class="relative">
|
||||
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||||
<Icon icon="mdi:account" class="text-gray-400 dark:text-gray-500" />
|
||||
<Icon icon="mdi:account" class="text-[var(--color-ink-muted)]" />
|
||||
</div>
|
||||
<input id="username" name="username" type="text" required bind:value={username} class="block w-full rounded-xl border border-gray-300 dark:border-white/20 pl-10 pr-3 py-2.5 bg-white/50 dark:bg-black/40 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 sm:text-sm transition-all duration-200" placeholder="Choose a username">
|
||||
<input id="username" name="username" type="text" required bind:value={username} class="block w-full rounded-md border border-[var(--color-line)] pl-10 pr-3 py-2.5 bg-[var(--color-surface)] text-[var(--color-ink)] placeholder-[var(--color-ink-muted)] focus:border-[var(--color-accent)] focus:outline-none sm:text-sm transition-colors" placeholder="Choose a username">
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label for="email" class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1.5">Email Address</label>
|
||||
<label for="email" class="block text-sm font-semibold text-[var(--color-ink-muted)] mb-1.5">Email address</label>
|
||||
<div class="relative">
|
||||
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||||
<Icon icon="mdi:email" class="text-gray-400 dark:text-gray-500" />
|
||||
<Icon icon="mdi:email" class="text-[var(--color-ink-muted)]" />
|
||||
</div>
|
||||
<input id="email" name="email" type="email" required bind:value={email} class="block w-full rounded-xl border border-gray-300 dark:border-white/20 pl-10 pr-3 py-2.5 bg-white/50 dark:bg-black/40 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 sm:text-sm transition-all duration-200" placeholder="[email protected]">
|
||||
<input id="email" name="email" type="email" required bind:value={email} class="block w-full rounded-md border border-[var(--color-line)] pl-10 pr-3 py-2.5 bg-[var(--color-surface)] text-[var(--color-ink)] placeholder-[var(--color-ink-muted)] focus:border-[var(--color-accent)] focus:outline-none sm:text-sm transition-colors" placeholder="[email protected]">
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label for="password" class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1.5">Password</label>
|
||||
<label for="password" class="block text-sm font-semibold text-[var(--color-ink-muted)] mb-1.5">Password</label>
|
||||
<div class="relative">
|
||||
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||||
<Icon icon="mdi:lock" class="text-gray-400 dark:text-gray-500" />
|
||||
<Icon icon="mdi:lock" class="text-[var(--color-ink-muted)]" />
|
||||
</div>
|
||||
<input id="password" name="password" type="password" required bind:value={password} class="block w-full rounded-xl border border-gray-300 dark:border-white/20 pl-10 pr-3 py-2.5 bg-white/50 dark:bg-black/40 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 sm:text-sm transition-all duration-200" placeholder="••••••••">
|
||||
<input id="password" name="password" type="password" required bind:value={password} class="block w-full rounded-md border border-[var(--color-line)] pl-10 pr-3 py-2.5 bg-[var(--color-surface)] text-[var(--color-ink)] placeholder-[var(--color-ink-muted)] focus:border-[var(--color-accent)] focus:outline-none sm:text-sm transition-colors" placeholder="••••••••">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if errorMsg}
|
||||
<div class="flex items-center gap-2 text-red-600 bg-red-50 dark:bg-red-500/10 dark:text-red-400 p-3 rounded-lg text-sm border border-red-200 dark:border-red-500/20 shadow-sm animate-in slide-in-from-top-1 fade-in duration-200">
|
||||
<div class="flex items-center gap-2 text-[var(--color-danger)] bg-[var(--color-danger)]/10 p-3 rounded-md text-sm border border-[var(--color-danger)]/20">
|
||||
<Icon icon="mdi:alert-circle" class="text-lg flex-shrink-0" />
|
||||
<span class="font-medium">{errorMsg}</span>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="pt-2">
|
||||
<button type="submit" class="group w-full flex justify-center items-center gap-2 py-3 px-4 border border-transparent text-sm font-bold rounded-xl text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-zinc-900 focus:ring-blue-500 transition-all duration-200 shadow-md hover:shadow-lg transform hover:-translate-y-0.5">
|
||||
<button type="submit" class="group w-full flex justify-center items-center gap-2 py-3 px-4 text-sm font-bold rounded-md text-white bg-[var(--color-accent)] hover:opacity-90 focus:outline-none transition">
|
||||
Register
|
||||
<Icon icon="mdi:arrow-right" class="text-lg group-hover:translate-x-1 transition-transform" />
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
{/if}
|
||||
<div class="text-sm text-center mt-6 pt-4 border-t border-gray-200 dark:border-white/10">
|
||||
<span class="text-gray-500 dark:text-gray-400">Already have an account? </span>
|
||||
<a href="/login" class="font-bold text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300 transition-colors hover:underline">
|
||||
<div class="text-sm text-center mt-6 pt-4 border-t border-[var(--color-line)]">
|
||||
<span class="text-[var(--color-ink-muted)]">Already have an account? </span>
|
||||
<a href="/login" class="font-bold text-[var(--color-accent)] hover:underline transition-colors">
|
||||
Sign in
|
||||
</a>
|
||||
</div>
|
||||
|
||||
+126
-122
@@ -418,12 +418,12 @@
|
||||
</svelte:head>
|
||||
|
||||
<div class="min-h-screen flex flex-col">
|
||||
<nav class="bg-[var(--theme-bg)] shadow-sm border-b border-gray-200 dark:border-white/10 px-6 py-4 flex justify-between items-center sticky top-0 z-10 transition-colors duration-200 flex-shrink-0">
|
||||
<h1 class="text-2xl font-bold text-gray-900 dark:text-white flex items-center gap-3">
|
||||
<Icon icon="mdi:cog" class="text-blue-600 dark:text-blue-400 text-3xl" />
|
||||
<nav class="bg-[var(--color-surface)] shadow-sm border-b border-[var(--color-line)] px-6 py-4 flex justify-between items-center sticky top-0 z-10 transition-colors duration-200 flex-shrink-0">
|
||||
<h1 class="text-2xl font-bold text-[var(--color-ink)] flex items-center gap-3">
|
||||
<Icon icon="mdi:cog" class="text-[var(--color-accent)] text-3xl" />
|
||||
Settings
|
||||
</h1>
|
||||
<button onclick={() => goto('/dashboard')} class="text-sm font-medium text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white transition-colors bg-gray-100 hover:bg-gray-200 dark:bg-white/5 dark:hover:bg-white/10 px-4 py-2 rounded-lg flex items-center gap-2">
|
||||
<button onclick={() => goto('/dashboard')} class="text-sm font-medium text-[var(--color-ink-muted)] hover:text-[var(--color-ink)] transition-colors bg-[var(--color-surface-muted)] hover:bg-[var(--color-surface-sunken)] px-4 py-2 rounded-md flex items-center gap-2">
|
||||
<Icon icon="mdi:arrow-left" class="text-lg" />
|
||||
Back to Dashboard
|
||||
</button>
|
||||
@@ -435,9 +435,9 @@
|
||||
{#each navItems as item}
|
||||
<button
|
||||
onclick={() => activeSection = item.id}
|
||||
class="w-full flex items-center gap-3 px-4 py-2.5 rounded-xl text-sm font-medium transition-all duration-150 {activeSection === item.id
|
||||
? 'bg-blue-600 text-white shadow-sm'
|
||||
: 'text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-white/5'}"
|
||||
class="w-full flex items-center gap-3 px-4 py-2.5 rounded-md text-sm font-medium transition-colors {activeSection === item.id
|
||||
? 'bg-[var(--color-accent)] text-white shadow-sm'
|
||||
: 'text-[var(--color-ink-muted)] hover:bg-[var(--color-surface-muted)]'}"
|
||||
>
|
||||
<Icon icon={item.icon} class="text-lg flex-shrink-0" />
|
||||
{item.label}
|
||||
@@ -447,8 +447,8 @@
|
||||
</button>
|
||||
{/each}
|
||||
|
||||
<div class="pt-4 mt-4 border-t border-gray-200 dark:border-white/10">
|
||||
<button onclick={logout} class="w-full flex items-center gap-3 px-4 py-2.5 rounded-xl text-sm font-medium text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-500/10 transition-all duration-150">
|
||||
<div class="pt-4 mt-4 border-t border-[var(--color-line)]">
|
||||
<button onclick={logout} class="w-full flex items-center gap-3 px-4 py-2.5 rounded-md text-sm font-medium text-[var(--color-danger)] hover:bg-[var(--color-danger)]/10 transition-colors">
|
||||
<Icon icon="mdi:logout" class="text-lg flex-shrink-0" />
|
||||
Sign Out
|
||||
</button>
|
||||
@@ -459,20 +459,20 @@
|
||||
<main class="flex-1 min-w-0 space-y-6 pb-16">
|
||||
|
||||
{#if activeSection === 'account'}
|
||||
<div class="bg-white dark:bg-black/20 rounded-xl shadow-sm border border-gray-200 dark:border-white/10 overflow-hidden">
|
||||
<div class="bg-[var(--color-surface)] rounded-xl shadow-sm border border-[var(--color-line)] overflow-hidden">
|
||||
<div class="p-6 sm:p-8">
|
||||
<h2 class="text-xl font-bold text-gray-900 dark:text-white mb-6 flex items-center gap-2">
|
||||
<Icon icon="mdi:account-outline" class="text-2xl text-blue-500 dark:text-blue-400" />
|
||||
<h2 class="text-xl font-bold text-[var(--color-ink)] mb-6 flex items-center gap-2">
|
||||
<Icon icon="mdi:account-outline" class="text-2xl text-[var(--color-accent)]" />
|
||||
Account Settings
|
||||
</h2>
|
||||
|
||||
<div class="flex items-center gap-4 mb-6">
|
||||
<div class="h-14 w-14 rounded-full bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center text-blue-600 dark:text-blue-400 text-2xl font-bold border border-blue-500/20 flex-shrink-0">
|
||||
<div class="h-14 w-14 rounded-full bg-[var(--color-accent-soft)] flex items-center justify-center text-[var(--color-accent)] text-2xl font-bold flex-shrink-0">
|
||||
{$userStore?.username?.[0]?.toUpperCase() || '?'}
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-base font-bold text-gray-900 dark:text-white">{$userStore?.username}</p>
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400">{$userStore?.email}</p>
|
||||
<p class="text-base font-bold text-[var(--color-ink)]">{$userStore?.username}</p>
|
||||
<p class="text-sm text-[var(--color-ink-muted)]">{$userStore?.email}</p>
|
||||
{#if $userStore?.is_admin}
|
||||
<span class="inline-flex items-center gap-1 text-xs font-semibold px-2 py-0.5 rounded-full bg-amber-100 dark:bg-amber-500/20 text-amber-700 dark:text-amber-400 mt-1">
|
||||
<Icon icon="mdi:shield-crown-outline" class="text-sm" />
|
||||
@@ -482,27 +482,27 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="h-px bg-gray-200 dark:bg-white/10 mb-6"></div>
|
||||
<div class="h-px bg-[var(--color-line)] mb-6"></div>
|
||||
|
||||
<h3 class="text-sm font-bold text-gray-900 dark:text-white mb-4">Profile</h3>
|
||||
<h3 class="text-sm font-bold text-[var(--color-ink)] mb-4">Profile</h3>
|
||||
|
||||
{#if profileError}
|
||||
<div class="bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400 p-3 rounded-lg text-sm mb-4">{profileError}</div>
|
||||
<div class="bg-[var(--color-danger)]/10 text-[var(--color-danger)] p-3 rounded-md text-sm mb-4">{profileError}</div>
|
||||
{/if}
|
||||
{#if profileSuccess}
|
||||
<div class="bg-green-50 dark:bg-green-900/20 text-green-600 dark:text-green-400 p-3 rounded-lg text-sm mb-4">Profile updated successfully.</div>
|
||||
<div class="bg-[var(--color-success)]/10 text-[var(--color-success)] p-3 rounded-md text-sm mb-4">Profile updated successfully.</div>
|
||||
{/if}
|
||||
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<label for="username-input" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Username</label>
|
||||
<input id="username-input" type="text" bind:value={username} class="w-full bg-white dark:bg-black/40 border border-gray-300 dark:border-white/20 text-gray-900 dark:text-white rounded-lg px-4 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors" />
|
||||
<label for="username-input" class="block text-sm font-medium text-[var(--color-ink-muted)] mb-1">Username</label>
|
||||
<input id="username-input" type="text" bind:value={username} class="w-full bg-[var(--color-surface)] border border-[var(--color-line)] text-[var(--color-ink)] rounded-md px-4 py-2 focus:border-[var(--color-accent)] focus:outline-none transition-colors" />
|
||||
</div>
|
||||
<div>
|
||||
<label for="email-input" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Email Address</label>
|
||||
<input id="email-input" type="email" bind:value={email} class="w-full bg-white dark:bg-black/40 border border-gray-300 dark:border-white/20 text-gray-900 dark:text-white rounded-lg px-4 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors" />
|
||||
<label for="email-input" class="block text-sm font-medium text-[var(--color-ink-muted)] mb-1">Email address</label>
|
||||
<input id="email-input" type="email" bind:value={email} class="w-full bg-[var(--color-surface)] border border-[var(--color-line)] text-[var(--color-ink)] rounded-md px-4 py-2 focus:border-[var(--color-accent)] focus:outline-none transition-colors" />
|
||||
</div>
|
||||
<button onclick={saveProfile} disabled={isSaving || (username === $userStore?.username && email === $userStore?.email)} class="bg-blue-600 hover:bg-blue-700 text-white px-5 py-2 rounded-lg text-sm font-semibold transition-colors disabled:opacity-50 flex items-center gap-2 shadow-sm">
|
||||
<button onclick={saveProfile} disabled={isSaving || (username === $userStore?.username && email === $userStore?.email)} class="bg-[var(--color-accent)] hover:opacity-90 text-white px-5 py-2 rounded-md text-sm font-semibold transition disabled:opacity-50 flex items-center gap-2 shadow-sm">
|
||||
{#if isSaving}
|
||||
<Icon icon="mdi:loading" class="animate-spin text-lg" />
|
||||
Saving...
|
||||
@@ -513,31 +513,31 @@
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="h-px bg-gray-200 dark:bg-white/10 my-6"></div>
|
||||
<div class="h-px bg-[var(--color-line)] my-6"></div>
|
||||
|
||||
<h3 class="text-sm font-bold text-gray-900 dark:text-white mb-4">Change Password</h3>
|
||||
<h3 class="text-sm font-bold text-[var(--color-ink)] mb-4">Change Password</h3>
|
||||
|
||||
{#if passwordError}
|
||||
<div class="bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400 p-3 rounded-lg text-sm mb-4">{passwordError}</div>
|
||||
<div class="bg-[var(--color-danger)]/10 text-[var(--color-danger)] p-3 rounded-md text-sm mb-4">{passwordError}</div>
|
||||
{/if}
|
||||
{#if passwordSuccess}
|
||||
<div class="bg-green-50 dark:bg-green-900/20 text-green-600 dark:text-green-400 p-3 rounded-lg text-sm mb-4">Password changed successfully.</div>
|
||||
<div class="bg-[var(--color-success)]/10 text-[var(--color-success)] p-3 rounded-md text-sm mb-4">Password changed successfully.</div>
|
||||
{/if}
|
||||
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<label for="current-password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Current Password</label>
|
||||
<input id="current-password" type="password" bind:value={currentPassword} class="w-full bg-white dark:bg-black/40 border border-gray-300 dark:border-white/20 text-gray-900 dark:text-white rounded-lg px-4 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors" />
|
||||
<label for="current-password" class="block text-sm font-medium text-[var(--color-ink-muted)] mb-1">Current password</label>
|
||||
<input id="current-password" type="password" bind:value={currentPassword} class="w-full bg-[var(--color-surface)] border border-[var(--color-line)] text-[var(--color-ink)] rounded-md px-4 py-2 focus:border-[var(--color-accent)] focus:outline-none transition-colors" />
|
||||
</div>
|
||||
<div>
|
||||
<label for="new-password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">New Password</label>
|
||||
<input id="new-password" type="password" bind:value={newPassword} class="w-full bg-white dark:bg-black/40 border border-gray-300 dark:border-white/20 text-gray-900 dark:text-white rounded-lg px-4 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors" />
|
||||
<label for="new-password" class="block text-sm font-medium text-[var(--color-ink-muted)] mb-1">New password</label>
|
||||
<input id="new-password" type="password" bind:value={newPassword} class="w-full bg-[var(--color-surface)] border border-[var(--color-line)] text-[var(--color-ink)] rounded-md px-4 py-2 focus:border-[var(--color-accent)] focus:outline-none transition-colors" />
|
||||
</div>
|
||||
<div>
|
||||
<label for="confirm-password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Confirm New Password</label>
|
||||
<input id="confirm-password" type="password" bind:value={confirmPassword} class="w-full bg-white dark:bg-black/40 border border-gray-300 dark:border-white/20 text-gray-900 dark:text-white rounded-lg px-4 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors" />
|
||||
<label for="confirm-password" class="block text-sm font-medium text-[var(--color-ink-muted)] mb-1">Confirm new password</label>
|
||||
<input id="confirm-password" type="password" bind:value={confirmPassword} class="w-full bg-[var(--color-surface)] border border-[var(--color-line)] text-[var(--color-ink)] rounded-md px-4 py-2 focus:border-[var(--color-accent)] focus:outline-none transition-colors" />
|
||||
</div>
|
||||
<button onclick={changePassword} disabled={isSavingPassword || !currentPassword || !newPassword || !confirmPassword} class="bg-gray-200 hover:bg-gray-300 text-gray-800 dark:bg-white/10 dark:hover:bg-white/20 dark:text-white px-5 py-2 rounded-lg text-sm font-semibold transition-colors disabled:opacity-50 flex items-center gap-2">
|
||||
<button onclick={changePassword} disabled={isSavingPassword || !currentPassword || !newPassword || !confirmPassword} class="bg-[var(--color-surface-sunken)] hover:opacity-90 text-[var(--color-ink)] px-5 py-2 rounded-md text-sm font-semibold transition disabled:opacity-50 flex items-center gap-2">
|
||||
{#if isSavingPassword}
|
||||
<Icon icon="mdi:loading" class="animate-spin text-lg" />
|
||||
Updating...
|
||||
@@ -552,46 +552,46 @@
|
||||
{/if}
|
||||
|
||||
{#if activeSection === 'theme'}
|
||||
<div class="bg-white dark:bg-black/20 rounded-xl shadow-sm border border-gray-200 dark:border-white/10 overflow-hidden">
|
||||
<div class="bg-[var(--color-surface)] rounded-xl shadow-sm border border-[var(--color-line)] overflow-hidden">
|
||||
<div class="p-6 sm:p-8">
|
||||
<h2 class="text-xl font-bold text-gray-900 dark:text-white mb-2 flex items-center gap-2">
|
||||
<Icon icon="mdi:palette-outline" class="text-2xl text-blue-500 dark:text-blue-400" />
|
||||
<h2 class="text-xl font-bold text-[var(--color-ink)] mb-2 flex items-center gap-2">
|
||||
<Icon icon="mdi:palette-outline" class="text-2xl text-[var(--color-accent)]" />
|
||||
Theme Settings
|
||||
</h2>
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400 mb-6">Customize the appearance of your editor and dashboard. These settings are saved to your browser.</p>
|
||||
<p class="text-sm text-[var(--color-ink-muted)] mb-6">Customize the appearance of your editor and dashboard. These settings are saved to your browser.</p>
|
||||
<ThemePicker />
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if activeSection === 'storage'}
|
||||
<div class="bg-white dark:bg-black/20 rounded-xl shadow-sm border border-gray-200 dark:border-white/10 overflow-hidden">
|
||||
<div class="bg-[var(--color-surface)] rounded-xl shadow-sm border border-[var(--color-line)] overflow-hidden">
|
||||
<div class="p-6 sm:p-8">
|
||||
<h2 class="text-xl font-bold text-gray-900 dark:text-white mb-6 flex items-center gap-2">
|
||||
<Icon icon="mdi:harddisk" class="text-2xl text-blue-500 dark:text-blue-400" />
|
||||
<h2 class="text-xl font-bold text-[var(--color-ink)] mb-6 flex items-center gap-2">
|
||||
<Icon icon="mdi:harddisk" class="text-2xl text-[var(--color-accent)]" />
|
||||
Storage
|
||||
</h2>
|
||||
<div class="mb-4 flex justify-between items-end">
|
||||
<span class="text-sm font-medium text-gray-700 dark:text-gray-300">Total Space Used</span>
|
||||
<span class="text-sm font-bold text-gray-900 dark:text-white">
|
||||
<span class="text-sm font-medium text-[var(--color-ink-muted)]">Total space used</span>
|
||||
<span class="text-sm font-bold text-[var(--color-ink)]">
|
||||
{storageStats ? formatBytes(storageStats.total_size_bytes) : 'Loading...'}
|
||||
</span>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-4 text-sm">
|
||||
<div class="bg-gray-50 dark:bg-black/30 p-4 rounded-xl border border-gray-200 dark:border-white/10 flex items-center gap-3">
|
||||
<div class="w-3 h-3 rounded-full bg-blue-500 flex-shrink-0"></div>
|
||||
<div class="bg-[var(--color-surface-muted)] p-4 rounded-lg border border-[var(--color-line)] flex items-center gap-3">
|
||||
<div class="w-3 h-3 rounded-full bg-[var(--color-accent)] flex-shrink-0"></div>
|
||||
<div>
|
||||
<p class="text-gray-500 dark:text-gray-400 text-xs">Documents</p>
|
||||
<p class="font-semibold text-gray-900 dark:text-white">
|
||||
<p class="text-[var(--color-ink-muted)] text-xs">Documents</p>
|
||||
<p class="font-semibold text-[var(--color-ink)]">
|
||||
{storageStats ? formatBytes(storageStats.documents_size_bytes) : '...'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-gray-50 dark:bg-black/30 p-4 rounded-xl border border-gray-200 dark:border-white/10 flex items-center gap-3">
|
||||
<div class="bg-[var(--color-surface-muted)] p-4 rounded-lg border border-[var(--color-line)] flex items-center gap-3">
|
||||
<div class="w-3 h-3 rounded-full bg-purple-500 flex-shrink-0"></div>
|
||||
<div>
|
||||
<p class="text-gray-500 dark:text-gray-400 text-xs">Images & Assets</p>
|
||||
<p class="font-semibold text-gray-900 dark:text-white">
|
||||
<p class="text-[var(--color-ink-muted)] text-xs">Images & assets</p>
|
||||
<p class="font-semibold text-[var(--color-ink)]">
|
||||
{storageStats ? formatBytes(storageStats.files_size_bytes) : '...'}
|
||||
</p>
|
||||
</div>
|
||||
@@ -602,33 +602,33 @@
|
||||
{/if}
|
||||
|
||||
{#if activeSection === 'api-keys'}
|
||||
<div class="bg-white dark:bg-black/20 rounded-xl shadow-sm border border-gray-200 dark:border-white/10 overflow-hidden">
|
||||
<div class="bg-[var(--color-surface)] rounded-xl shadow-sm border border-[var(--color-line)] overflow-hidden">
|
||||
<div class="p-6 sm:p-8">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<h2 class="text-xl font-bold text-gray-900 dark:text-white flex items-center gap-2">
|
||||
<Icon icon="mdi:key-outline" class="text-2xl text-blue-500 dark:text-blue-400" />
|
||||
<h2 class="text-xl font-bold text-[var(--color-ink)] flex items-center gap-2">
|
||||
<Icon icon="mdi:key-outline" class="text-2xl text-[var(--color-accent)]" />
|
||||
API Keys
|
||||
</h2>
|
||||
<button
|
||||
onclick={() => { showCreateKeyForm = !showCreateKeyForm; createKeyError = ''; newlyCreatedKey = null; }}
|
||||
class="flex items-center gap-1.5 px-3 py-1.5 text-sm font-semibold rounded-lg transition-colors {showCreateKeyForm ? 'bg-gray-200 dark:bg-white/10 text-gray-700 dark:text-gray-300' : 'bg-blue-600 hover:bg-blue-700 text-white shadow-sm'}"
|
||||
class="flex items-center gap-1.5 px-3 py-1.5 text-sm font-semibold rounded-md transition-colors {showCreateKeyForm ? 'bg-[var(--color-surface-sunken)] text-[var(--color-ink-muted)]' : 'bg-[var(--color-accent)] hover:opacity-90 text-white shadow-sm'}"
|
||||
>
|
||||
<Icon icon={showCreateKeyForm ? 'mdi:close' : 'mdi:plus'} class="text-base" />
|
||||
{showCreateKeyForm ? 'Cancel' : 'New Key'}
|
||||
</button>
|
||||
</div>
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400 mb-4">
|
||||
Use API keys to render Typst documents programmatically via <code class="font-mono text-xs bg-gray-100 dark:bg-white/10 px-1.5 py-0.5 rounded">POST /v1/render</code>.
|
||||
<p class="text-sm text-[var(--color-ink-muted)] mb-4">
|
||||
Use API keys to render Typst documents programmatically via <code class="font-mono text-xs bg-[var(--color-surface-sunken)] px-1.5 py-0.5 rounded">POST /v1/render</code>.
|
||||
Each key allows up to 60 requests/minute.
|
||||
<a href="/api-docs" class="text-blue-600 dark:text-blue-400 hover:underline ml-1">View API docs →</a>
|
||||
<a href="/api-docs" class="text-[var(--color-accent)] hover:underline ml-1">View API docs →</a>
|
||||
</p>
|
||||
|
||||
<div class="mb-6 p-4 rounded-xl border border-gray-200 dark:border-white/10 bg-gray-50 dark:bg-black/30">
|
||||
<div class="mb-6 p-4 rounded-lg border border-[var(--color-line)] bg-[var(--color-surface-muted)]">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<p class="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
|
||||
<p class="text-xs font-semibold uppercase tracking-wide text-[var(--color-ink-muted)]">
|
||||
Requests — {usagePeriod === '1hr' ? 'Last 60 Min' : usagePeriod === '1day' ? 'Last 24 Hours' : 'Last 7 Days'}
|
||||
{#if usageData.length > 0}
|
||||
<span class="ml-2 normal-case font-normal text-gray-400 dark:text-gray-500">
|
||||
<span class="ml-2 normal-case font-normal text-[var(--color-ink-muted)]">
|
||||
({usageData.reduce((s, p) => s + p.count, 0)} total)
|
||||
</span>
|
||||
{/if}
|
||||
@@ -637,18 +637,18 @@
|
||||
{#each ([['1hr', '1 hr'], ['1day', '1 day'], ['1week', '1 week']] as const) as [val, label]}
|
||||
<button
|
||||
onclick={() => usagePeriod = val}
|
||||
class="px-2 py-0.5 text-xs font-semibold rounded-md transition-colors {usagePeriod === val ? 'bg-blue-600 text-white' : 'text-gray-500 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-white/10'}"
|
||||
class="px-2 py-0.5 text-xs font-semibold rounded-md transition-colors {usagePeriod === val ? 'bg-[var(--color-accent)] text-white' : 'text-[var(--color-ink-muted)] hover:bg-[var(--color-surface-sunken)]'}"
|
||||
>{label}</button>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
<div class="h-32">
|
||||
{#if usageLoading}
|
||||
<div class="h-full flex items-center justify-center text-gray-400 dark:text-gray-500 text-sm">
|
||||
<div class="h-full flex items-center justify-center text-[var(--color-ink-muted)] text-sm">
|
||||
<Icon icon="mdi:loading" class="animate-spin mr-2" /> Loading...
|
||||
</div>
|
||||
{:else if usageData.length === 0}
|
||||
<div class="h-full flex items-center justify-center text-gray-400 dark:text-gray-500 text-sm">
|
||||
<div class="h-full flex items-center justify-center text-[var(--color-ink-muted)] text-sm">
|
||||
No usage yet — make your first API call to see data here.
|
||||
</div>
|
||||
{:else}
|
||||
@@ -658,24 +658,24 @@
|
||||
</div>
|
||||
|
||||
{#if newlyCreatedKey}
|
||||
<div class="mb-6 p-4 rounded-xl border border-green-200 dark:border-green-700/50 bg-green-50 dark:bg-green-900/10">
|
||||
<div class="mb-6 p-4 rounded-lg border border-[var(--color-success)]/30 bg-[var(--color-success)]/10">
|
||||
<div class="flex items-start justify-between gap-4 mb-2">
|
||||
<div>
|
||||
<p class="text-sm font-bold text-green-800 dark:text-green-300 flex items-center gap-2">
|
||||
<p class="text-sm font-bold text-[var(--color-success)] flex items-center gap-2">
|
||||
<Icon icon="mdi:check-circle" class="text-lg" />
|
||||
Key created: {newlyCreatedKey.name}
|
||||
</p>
|
||||
<p class="text-xs text-green-700 dark:text-green-400 mt-0.5">Copy this key now — it will not be shown again.</p>
|
||||
<p class="text-xs text-[var(--color-success)] mt-0.5 opacity-90">Copy this key now — it will not be shown again.</p>
|
||||
</div>
|
||||
<button onclick={() => newlyCreatedKey = null} class="text-green-600 dark:text-green-400 hover:text-green-800 dark:hover:text-green-200 flex-shrink-0">
|
||||
<button onclick={() => newlyCreatedKey = null} class="text-[var(--color-success)] hover:opacity-70 flex-shrink-0">
|
||||
<Icon icon="mdi:close" class="text-lg" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 mt-3">
|
||||
<code class="flex-1 font-mono text-xs bg-white dark:bg-black/40 border border-green-200 dark:border-green-700/50 text-gray-800 dark:text-gray-200 px-3 py-2 rounded-lg break-all">{newlyCreatedKey.key}</code>
|
||||
<code class="flex-1 font-mono text-xs bg-[var(--color-surface)] border border-[var(--color-success)]/30 text-[var(--color-ink)] px-3 py-2 rounded-md break-all">{newlyCreatedKey.key}</code>
|
||||
<button
|
||||
onclick={() => copyKey(newlyCreatedKey!.key)}
|
||||
class="flex-shrink-0 flex items-center gap-1.5 px-3 py-2 text-sm font-semibold rounded-lg transition-colors {copiedKey ? 'bg-green-600 text-white' : 'bg-gray-200 dark:bg-white/10 hover:bg-gray-300 dark:hover:bg-white/20 text-gray-700 dark:text-gray-300'}"
|
||||
class="flex-shrink-0 flex items-center gap-1.5 px-3 py-2 text-sm font-semibold rounded-md transition-colors {copiedKey ? 'bg-[var(--color-success)] text-white' : 'bg-[var(--color-surface-sunken)] hover:opacity-90 text-[var(--color-ink-muted)]'}"
|
||||
>
|
||||
<Icon icon={copiedKey ? 'mdi:check' : 'mdi:content-copy'} class="text-base" />
|
||||
{copiedKey ? 'Copied!' : 'Copy'}
|
||||
@@ -685,29 +685,30 @@
|
||||
{/if}
|
||||
|
||||
{#if showCreateKeyForm}
|
||||
<form onsubmit={createApiKey} class="mb-6 p-4 rounded-xl border border-blue-200 dark:border-blue-800/50 bg-blue-50/50 dark:bg-blue-900/10 space-y-3">
|
||||
<h3 class="text-sm font-bold text-gray-900 dark:text-white flex items-center gap-2">
|
||||
<Icon icon="mdi:key-plus" class="text-blue-500" />
|
||||
<form onsubmit={createApiKey} class="mb-6 p-4 rounded-lg border border-[var(--color-accent)]/30 bg-[var(--color-accent-soft)] space-y-3">
|
||||
<h3 class="text-sm font-bold text-[var(--color-ink)] flex items-center gap-2">
|
||||
<Icon icon="mdi:key-plus" class="text-[var(--color-accent)]" />
|
||||
Create API Key
|
||||
</h3>
|
||||
{#if createKeyError}
|
||||
<div class="bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400 px-3 py-2 rounded-lg text-sm">{createKeyError}</div>
|
||||
<div class="bg-[var(--color-danger)]/10 text-[var(--color-danger)] px-3 py-2 rounded-md text-sm">{createKeyError}</div>
|
||||
{/if}
|
||||
<div class="flex items-end gap-3">
|
||||
<div class="flex-1">
|
||||
<label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">Key Name</label>
|
||||
<label for="create-key-name" class="block text-xs font-medium text-[var(--color-ink-muted)] mb-1">Key name</label>
|
||||
<input
|
||||
id="create-key-name"
|
||||
type="text"
|
||||
required
|
||||
bind:value={createKeyName}
|
||||
placeholder="e.g. My App, CI Pipeline"
|
||||
class="w-full bg-white dark:bg-black/40 border border-gray-300 dark:border-white/20 text-gray-900 dark:text-white rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
|
||||
class="w-full bg-[var(--color-surface)] border border-[var(--color-line)] text-[var(--color-ink)] rounded-md px-3 py-2 text-sm focus:border-[var(--color-accent)] focus:outline-none transition-colors"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={createKeyLoading || !createKeyName.trim()}
|
||||
class="flex items-center gap-2 px-4 py-2 bg-blue-600 hover:bg-blue-700 disabled:opacity-50 text-white text-sm font-semibold rounded-lg transition-colors shadow-sm"
|
||||
class="flex items-center gap-2 px-4 py-2 bg-[var(--color-accent)] hover:opacity-90 disabled:opacity-50 text-white text-sm font-semibold rounded-md transition shadow-sm"
|
||||
>
|
||||
{#if createKeyLoading}
|
||||
<Icon icon="mdi:loading" class="animate-spin text-base" />
|
||||
@@ -722,38 +723,38 @@
|
||||
{/if}
|
||||
|
||||
{#if apiKeysError}
|
||||
<div class="bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400 p-3 rounded-lg text-sm mb-4">{apiKeysError}</div>
|
||||
<div class="bg-[var(--color-danger)]/10 text-[var(--color-danger)] p-3 rounded-md text-sm mb-4">{apiKeysError}</div>
|
||||
{/if}
|
||||
|
||||
{#if apiKeysLoading}
|
||||
<div class="flex items-center justify-center py-12 text-gray-400 dark:text-gray-500">
|
||||
<div class="flex items-center justify-center py-12 text-[var(--color-ink-muted)]">
|
||||
<Icon icon="mdi:loading" class="animate-spin text-2xl mr-2" />
|
||||
Loading keys...
|
||||
</div>
|
||||
{:else if apiKeys.length === 0}
|
||||
<div class="text-center py-12 text-gray-400 dark:text-gray-500">
|
||||
<div class="text-center py-12 text-[var(--color-ink-muted)]">
|
||||
<Icon icon="mdi:key-outline" class="text-4xl mb-2 opacity-40" />
|
||||
<p class="text-sm">No API keys yet. Create one to get started.</p>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="space-y-2">
|
||||
{#each apiKeys as key (key.id)}
|
||||
<div class="flex items-center gap-4 px-4 py-3 rounded-xl border border-gray-200 dark:border-white/10 bg-gray-50 dark:bg-black/20">
|
||||
<div class="h-9 w-9 rounded-full bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center text-blue-600 dark:text-blue-400 flex-shrink-0">
|
||||
<div class="flex items-center gap-4 px-4 py-3 rounded-lg border border-[var(--color-line)] bg-[var(--color-surface-muted)]">
|
||||
<div class="h-9 w-9 rounded-full bg-[var(--color-accent-soft)] flex items-center justify-center text-[var(--color-accent)] flex-shrink-0">
|
||||
<Icon icon="mdi:key" class="text-lg" />
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<p class="text-sm font-semibold text-gray-900 dark:text-white truncate">{key.name}</p>
|
||||
<p class="text-xs font-mono text-gray-500 dark:text-gray-400">{key.key_prefix}... · {key.rate_limit}/min</p>
|
||||
<p class="text-sm font-semibold text-[var(--color-ink)] truncate">{key.name}</p>
|
||||
<p class="text-xs font-mono text-[var(--color-ink-muted)]">{key.key_prefix}... · {key.rate_limit}/min</p>
|
||||
</div>
|
||||
<div class="text-right flex-shrink-0 hidden sm:block">
|
||||
<p class="text-xs text-gray-400 dark:text-gray-500">Created {formatDate(key.created_at)}</p>
|
||||
<p class="text-xs text-gray-400 dark:text-gray-500">{key.last_used_at ? `Last used ${formatDate(key.last_used_at)}` : 'Never used'}</p>
|
||||
<p class="text-xs text-[var(--color-ink-muted)]">Created {formatDate(key.created_at)}</p>
|
||||
<p class="text-xs text-[var(--color-ink-muted)]">{key.last_used_at ? `Last used ${formatDate(key.last_used_at)}` : 'Never used'}</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-1 flex-shrink-0">
|
||||
{#if confirmRegenerateId === key.id}
|
||||
<div class="flex items-center gap-1">
|
||||
<span class="text-xs text-gray-500 dark:text-gray-400">Regenerate?</span>
|
||||
<span class="text-xs text-[var(--color-ink-muted)]">Regenerate?</span>
|
||||
<button
|
||||
onclick={() => regenerateApiKey(key.id)}
|
||||
disabled={regeneratingKeyId === key.id}
|
||||
@@ -763,24 +764,24 @@
|
||||
</button>
|
||||
<button
|
||||
onclick={() => confirmRegenerateId = null}
|
||||
class="text-xs px-2 py-1 rounded-md bg-gray-200 hover:bg-gray-300 dark:bg-white/10 dark:hover:bg-white/20 text-gray-700 dark:text-gray-300 font-semibold transition-colors"
|
||||
class="text-xs px-2 py-1 rounded-md bg-[var(--color-surface-sunken)] hover:opacity-90 text-[var(--color-ink-muted)] font-semibold transition-colors"
|
||||
>
|
||||
No
|
||||
</button>
|
||||
</div>
|
||||
{:else if confirmDeleteKeyId === key.id}
|
||||
<div class="flex items-center gap-1">
|
||||
<span class="text-xs text-gray-500 dark:text-gray-400">Delete?</span>
|
||||
<span class="text-xs text-[var(--color-ink-muted)]">Delete?</span>
|
||||
<button
|
||||
onclick={() => deleteApiKey(key.id)}
|
||||
disabled={deletingKeyId === key.id}
|
||||
class="text-xs px-2 py-1 rounded-md bg-red-600 hover:bg-red-700 text-white font-semibold transition-colors disabled:opacity-50"
|
||||
class="text-xs px-2 py-1 rounded-md bg-[var(--color-danger)] hover:opacity-90 text-white font-semibold transition-colors disabled:opacity-50"
|
||||
>
|
||||
{deletingKeyId === key.id ? '...' : 'Yes'}
|
||||
</button>
|
||||
<button
|
||||
onclick={() => confirmDeleteKeyId = null}
|
||||
class="text-xs px-2 py-1 rounded-md bg-gray-200 hover:bg-gray-300 dark:bg-white/10 dark:hover:bg-white/20 text-gray-700 dark:text-gray-300 font-semibold transition-colors"
|
||||
class="text-xs px-2 py-1 rounded-md bg-[var(--color-surface-sunken)] hover:opacity-90 text-[var(--color-ink-muted)] font-semibold transition-colors"
|
||||
>
|
||||
No
|
||||
</button>
|
||||
@@ -789,14 +790,14 @@
|
||||
<button
|
||||
onclick={() => { confirmRegenerateId = key.id; confirmDeleteKeyId = null; }}
|
||||
title="Regenerate key"
|
||||
class="p-1.5 rounded-lg text-gray-400 hover:text-amber-600 dark:hover:text-amber-400 hover:bg-amber-50 dark:hover:bg-amber-500/10 transition-colors"
|
||||
class="p-1.5 rounded-md text-[var(--color-ink-muted)] hover:text-amber-600 dark:hover:text-amber-400 hover:bg-amber-50 dark:hover:bg-amber-500/10 transition-colors"
|
||||
>
|
||||
<Icon icon="mdi:refresh" class="text-lg" />
|
||||
</button>
|
||||
<button
|
||||
onclick={() => { confirmDeleteKeyId = key.id; confirmRegenerateId = null; }}
|
||||
title="Revoke key"
|
||||
class="p-1.5 rounded-lg text-gray-400 hover:text-red-600 dark:hover:text-red-400 hover:bg-red-50 dark:hover:bg-red-500/10 transition-colors"
|
||||
class="p-1.5 rounded-md text-[var(--color-ink-muted)] hover:text-[var(--color-danger)] hover:bg-[var(--color-danger)]/10 transition-colors"
|
||||
>
|
||||
<Icon icon="mdi:delete-outline" class="text-lg" />
|
||||
</button>
|
||||
@@ -811,18 +812,18 @@
|
||||
{/if}
|
||||
|
||||
{#if activeSection === 'admin' && $userStore?.is_admin}
|
||||
<div class="bg-white dark:bg-black/20 rounded-xl shadow-sm border border-gray-200 dark:border-white/10 overflow-hidden">
|
||||
<div class="bg-[var(--color-surface)] rounded-xl shadow-sm border border-[var(--color-line)] overflow-hidden">
|
||||
<div class="p-6 sm:p-8">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h2 class="text-xl font-bold text-gray-900 dark:text-white flex items-center gap-2">
|
||||
<h2 class="text-xl font-bold text-[var(--color-ink)] flex items-center gap-2">
|
||||
<Icon icon="mdi:shield-crown-outline" class="text-2xl text-amber-500 dark:text-amber-400" />
|
||||
User Management
|
||||
</h2>
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="text-sm text-gray-500 dark:text-gray-400">{adminUsers.length} user{adminUsers.length !== 1 ? 's' : ''}</span>
|
||||
<span class="text-sm text-[var(--color-ink-muted)]">{adminUsers.length} user{adminUsers.length !== 1 ? 's' : ''}</span>
|
||||
<button
|
||||
onclick={() => { showCreateForm = !showCreateForm; createError = ''; }}
|
||||
class="flex items-center gap-1.5 px-3 py-1.5 text-sm font-semibold rounded-lg transition-colors {showCreateForm ? 'bg-gray-200 dark:bg-white/10 text-gray-700 dark:text-gray-300' : 'bg-blue-600 hover:bg-blue-700 text-white shadow-sm'}"
|
||||
class="flex items-center gap-1.5 px-3 py-1.5 text-sm font-semibold rounded-md transition-colors {showCreateForm ? 'bg-[var(--color-surface-sunken)] text-[var(--color-ink-muted)]' : 'bg-[var(--color-accent)] hover:opacity-90 text-white shadow-sm'}"
|
||||
>
|
||||
<Icon icon={showCreateForm ? 'mdi:close' : 'mdi:account-plus-outline'} class="text-base" />
|
||||
{showCreateForm ? 'Cancel' : 'New User'}
|
||||
@@ -831,52 +832,55 @@
|
||||
</div>
|
||||
|
||||
{#if showCreateForm}
|
||||
<form onsubmit={createUser} class="mb-6 p-4 rounded-xl border border-blue-200 dark:border-blue-800/50 bg-blue-50/50 dark:bg-blue-900/10 space-y-3">
|
||||
<h3 class="text-sm font-bold text-gray-900 dark:text-white mb-3 flex items-center gap-2">
|
||||
<Icon icon="mdi:account-plus-outline" class="text-blue-500" />
|
||||
<form onsubmit={createUser} class="mb-6 p-4 rounded-lg border border-[var(--color-accent)]/30 bg-[var(--color-accent-soft)] space-y-3">
|
||||
<h3 class="text-sm font-bold text-[var(--color-ink)] mb-3 flex items-center gap-2">
|
||||
<Icon icon="mdi:account-plus-outline" class="text-[var(--color-accent)]" />
|
||||
Create New User
|
||||
</h3>
|
||||
|
||||
{#if createError}
|
||||
<div class="bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400 px-3 py-2 rounded-lg text-sm">{createError}</div>
|
||||
<div class="bg-[var(--color-danger)]/10 text-[var(--color-danger)] px-3 py-2 rounded-md text-sm">{createError}</div>
|
||||
{/if}
|
||||
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
|
||||
<div>
|
||||
<label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">Username</label>
|
||||
<label for="create-username" class="block text-xs font-medium text-[var(--color-ink-muted)] mb-1">Username</label>
|
||||
<input
|
||||
id="create-username"
|
||||
type="text"
|
||||
required
|
||||
bind:value={createUsername}
|
||||
placeholder="username"
|
||||
class="w-full bg-white dark:bg-black/40 border border-gray-300 dark:border-white/20 text-gray-900 dark:text-white rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
|
||||
class="w-full bg-[var(--color-surface)] border border-[var(--color-line)] text-[var(--color-ink)] rounded-md px-3 py-2 text-sm focus:border-[var(--color-accent)] focus:outline-none transition-colors"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">Email</label>
|
||||
<label for="create-email" class="block text-xs font-medium text-[var(--color-ink-muted)] mb-1">Email</label>
|
||||
<input
|
||||
id="create-email"
|
||||
type="email"
|
||||
required
|
||||
bind:value={createEmail}
|
||||
placeholder="[email protected]"
|
||||
class="w-full bg-white dark:bg-black/40 border border-gray-300 dark:border-white/20 text-gray-900 dark:text-white rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
|
||||
class="w-full bg-[var(--color-surface)] border border-[var(--color-line)] text-[var(--color-ink)] rounded-md px-3 py-2 text-sm focus:border-[var(--color-accent)] focus:outline-none transition-colors"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">Temporary Password</label>
|
||||
<label for="create-password" class="block text-xs font-medium text-[var(--color-ink-muted)] mb-1">Temporary password</label>
|
||||
<input
|
||||
id="create-password"
|
||||
type="text"
|
||||
required
|
||||
bind:value={createPassword}
|
||||
placeholder="Set a password the user can change later"
|
||||
class="w-full bg-white dark:bg-black/40 border border-gray-300 dark:border-white/20 text-gray-900 dark:text-white rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors font-mono"
|
||||
class="w-full bg-[var(--color-surface)] border border-[var(--color-line)] text-[var(--color-ink)] rounded-md px-3 py-2 text-sm focus:border-[var(--color-accent)] focus:outline-none transition-colors font-mono"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex items-center justify-between pt-1">
|
||||
<label class="flex items-center gap-2 cursor-pointer select-none">
|
||||
<input type="checkbox" bind:checked={createIsAdmin} class="w-4 h-4 rounded accent-amber-500" />
|
||||
<span class="text-sm text-gray-700 dark:text-gray-300 flex items-center gap-1">
|
||||
<span class="text-sm text-[var(--color-ink-muted)] flex items-center gap-1">
|
||||
<Icon icon="mdi:shield-crown-outline" class="text-amber-500 text-base" />
|
||||
Grant admin privileges
|
||||
</span>
|
||||
@@ -884,7 +888,7 @@
|
||||
<button
|
||||
type="submit"
|
||||
disabled={createLoading}
|
||||
class="flex items-center gap-2 px-4 py-2 bg-blue-600 hover:bg-blue-700 disabled:opacity-50 text-white text-sm font-semibold rounded-lg transition-colors shadow-sm"
|
||||
class="flex items-center gap-2 px-4 py-2 bg-[var(--color-accent)] hover:opacity-90 disabled:opacity-50 text-white text-sm font-semibold rounded-md transition shadow-sm"
|
||||
>
|
||||
{#if createLoading}
|
||||
<Icon icon="mdi:loading" class="animate-spin text-base" />
|
||||
@@ -899,56 +903,56 @@
|
||||
{/if}
|
||||
|
||||
{#if adminError}
|
||||
<div class="bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400 p-3 rounded-lg text-sm mb-4">{adminError}</div>
|
||||
<div class="bg-[var(--color-danger)]/10 text-[var(--color-danger)] p-3 rounded-md text-sm mb-4">{adminError}</div>
|
||||
{/if}
|
||||
|
||||
{#if adminLoading}
|
||||
<div class="flex items-center justify-center py-12 text-gray-400 dark:text-gray-500">
|
||||
<div class="flex items-center justify-center py-12 text-[var(--color-ink-muted)]">
|
||||
<Icon icon="mdi:loading" class="animate-spin text-2xl mr-2" />
|
||||
Loading users...
|
||||
</div>
|
||||
{:else}
|
||||
<div class="space-y-2">
|
||||
{#each adminUsers as user (user.id)}
|
||||
<div class="flex items-center gap-4 px-4 py-3 rounded-xl border border-gray-200 dark:border-white/10 bg-gray-50 dark:bg-black/20 group">
|
||||
<div class="h-9 w-9 rounded-full bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center text-blue-600 dark:text-blue-400 font-bold text-sm flex-shrink-0">
|
||||
<div class="flex items-center gap-4 px-4 py-3 rounded-lg border border-[var(--color-line)] bg-[var(--color-surface-muted)] group">
|
||||
<div class="h-9 w-9 rounded-full bg-[var(--color-accent-soft)] flex items-center justify-center text-[var(--color-accent)] font-bold text-sm flex-shrink-0">
|
||||
{user.username[0].toUpperCase()}
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center gap-2">
|
||||
<p class="text-sm font-semibold text-gray-900 dark:text-white truncate">{user.username}</p>
|
||||
<p class="text-sm font-semibold text-[var(--color-ink)] truncate">{user.username}</p>
|
||||
{#if user.is_admin}
|
||||
<span class="text-xs font-bold px-1.5 py-0.5 rounded-md bg-amber-100 dark:bg-amber-500/20 text-amber-700 dark:text-amber-400 flex-shrink-0">Admin</span>
|
||||
{/if}
|
||||
{#if user.id === $userStore?.id}
|
||||
<span class="text-xs px-1.5 py-0.5 rounded-md bg-blue-100 dark:bg-blue-500/20 text-blue-700 dark:text-blue-400 flex-shrink-0">You</span>
|
||||
<span class="text-xs px-1.5 py-0.5 rounded-md bg-[var(--color-accent-soft)] text-[var(--color-accent)] flex-shrink-0">You</span>
|
||||
{/if}
|
||||
</div>
|
||||
<p class="text-xs text-gray-500 dark:text-gray-400 truncate">{user.email}</p>
|
||||
<p class="text-xs text-[var(--color-ink-muted)] truncate">{user.email}</p>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 dark:text-gray-500 flex-shrink-0 hidden sm:block">{formatDate(user.created_at)}</p>
|
||||
<p class="text-xs text-[var(--color-ink-muted)] flex-shrink-0 hidden sm:block">{formatDate(user.created_at)}</p>
|
||||
<div class="flex items-center gap-2 flex-shrink-0">
|
||||
{#if user.id !== $userStore?.id}
|
||||
<button
|
||||
onclick={() => toggleAdmin(user)}
|
||||
title={user.is_admin ? 'Revoke admin' : 'Grant admin'}
|
||||
class="p-1.5 rounded-lg transition-colors {user.is_admin ? 'text-amber-600 dark:text-amber-400 hover:bg-amber-50 dark:hover:bg-amber-500/10' : 'text-gray-400 hover:text-amber-600 dark:hover:text-amber-400 hover:bg-amber-50 dark:hover:bg-amber-500/10'}"
|
||||
class="p-1.5 rounded-md transition-colors {user.is_admin ? 'text-amber-600 dark:text-amber-400 hover:bg-amber-50 dark:hover:bg-amber-500/10' : 'text-[var(--color-ink-muted)] hover:text-amber-600 dark:hover:text-amber-400 hover:bg-amber-50 dark:hover:bg-amber-500/10'}"
|
||||
>
|
||||
<Icon icon={user.is_admin ? 'mdi:shield-crown' : 'mdi:shield-crown-outline'} class="text-lg" />
|
||||
</button>
|
||||
{#if confirmDeleteId === user.id}
|
||||
<div class="flex items-center gap-1">
|
||||
<span class="text-xs text-gray-500 dark:text-gray-400">Delete?</span>
|
||||
<span class="text-xs text-[var(--color-ink-muted)]">Delete?</span>
|
||||
<button
|
||||
onclick={() => deleteUser(user.id)}
|
||||
disabled={deletingUserId === user.id}
|
||||
class="text-xs px-2 py-1 rounded-md bg-red-600 hover:bg-red-700 text-white font-semibold transition-colors disabled:opacity-50"
|
||||
class="text-xs px-2 py-1 rounded-md bg-[var(--color-danger)] hover:opacity-90 text-white font-semibold transition-colors disabled:opacity-50"
|
||||
>
|
||||
{deletingUserId === user.id ? '...' : 'Yes'}
|
||||
</button>
|
||||
<button
|
||||
onclick={() => confirmDeleteId = null}
|
||||
class="text-xs px-2 py-1 rounded-md bg-gray-200 hover:bg-gray-300 dark:bg-white/10 dark:hover:bg-white/20 text-gray-700 dark:text-gray-300 font-semibold transition-colors"
|
||||
class="text-xs px-2 py-1 rounded-md bg-[var(--color-surface-sunken)] hover:opacity-90 text-[var(--color-ink-muted)] font-semibold transition-colors"
|
||||
>
|
||||
No
|
||||
</button>
|
||||
@@ -957,7 +961,7 @@
|
||||
<button
|
||||
onclick={() => confirmDeleteId = user.id}
|
||||
title="Delete user"
|
||||
class="p-1.5 rounded-lg text-gray-400 hover:text-red-600 dark:hover:text-red-400 hover:bg-red-50 dark:hover:bg-red-500/10 transition-colors"
|
||||
class="p-1.5 rounded-md text-[var(--color-ink-muted)] hover:text-[var(--color-danger)] hover:bg-[var(--color-danger)]/10 transition-colors"
|
||||
>
|
||||
<Icon icon="mdi:delete-outline" class="text-lg" />
|
||||
</button>
|
||||
|
||||
@@ -51,84 +51,84 @@
|
||||
<title>Setup - TypstDrive</title>
|
||||
</svelte:head>
|
||||
|
||||
<div class="min-h-screen flex items-center justify-center px-4 py-16">
|
||||
<div class="min-h-screen flex items-center justify-center px-4 py-16 bg-[var(--color-surface-muted)]">
|
||||
<div class="w-full max-w-md">
|
||||
<div class="text-center mb-8">
|
||||
<div class="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-blue-600 text-white mb-4 shadow-lg">
|
||||
<Icon icon="mdi:shield-crown-outline" class="text-3xl" />
|
||||
<div class="inline-flex items-center justify-center w-24 h-24 rounded-2xl bg-[var(--color-accent)] text-white mb-4 shadow-lg">
|
||||
<img src="/favicon.png" alt="TypstDrive" class="h-14 w-14" />
|
||||
</div>
|
||||
<h1 class="text-3xl font-bold text-gray-900 dark:text-white">Welcome to TypstDrive</h1>
|
||||
<p class="mt-2 text-gray-500 dark:text-gray-400">Create your admin account to get started.</p>
|
||||
<h1 class="text-3xl font-bold text-[var(--color-ink)]">Welcome to TypstDrive</h1>
|
||||
<p class="mt-2 text-[var(--color-ink-muted)]">Create your admin account to get started.</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white dark:bg-black/20 rounded-2xl shadow-xl border border-gray-200 dark:border-white/10 p-8">
|
||||
<div class="flex items-center gap-2 bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-300 text-sm px-4 py-3 rounded-lg mb-6 border border-blue-200 dark:border-blue-800/50">
|
||||
<div class="rounded-xl border border-[var(--color-line)] bg-[var(--color-surface)] p-8 shadow-xl">
|
||||
<div class="flex items-center gap-2 bg-[var(--color-accent-soft)] text-[var(--color-accent)] text-sm px-4 py-3 rounded-md mb-6">
|
||||
<Icon icon="mdi:information-outline" class="text-lg flex-shrink-0" />
|
||||
<span>This is a one-time setup. The account you create here will have full admin privileges.</span>
|
||||
</div>
|
||||
|
||||
{#if errorMsg}
|
||||
<div class="bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400 px-4 py-3 rounded-lg text-sm mb-5 border border-red-200 dark:border-red-800/50">
|
||||
<div class="bg-[var(--color-danger)]/10 text-[var(--color-danger)] px-4 py-3 rounded-md text-sm mb-5 border border-[var(--color-danger)]/20">
|
||||
{errorMsg}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<form onsubmit={handleSetup} class="space-y-4">
|
||||
<div>
|
||||
<label for="username" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Username</label>
|
||||
<label for="username" class="block text-sm font-medium text-[var(--color-ink-muted)] mb-1">Username</label>
|
||||
<input
|
||||
id="username"
|
||||
type="text"
|
||||
required
|
||||
bind:value={username}
|
||||
class="w-full bg-white dark:bg-black/40 border border-gray-300 dark:border-white/20 text-gray-900 dark:text-white rounded-lg px-4 py-2.5 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
|
||||
class="w-full bg-[var(--color-surface)] border border-[var(--color-line)] text-[var(--color-ink)] rounded-md px-4 py-2.5 focus:border-[var(--color-accent)] focus:outline-none transition-colors"
|
||||
placeholder="admin"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Email</label>
|
||||
<label for="email" class="block text-sm font-medium text-[var(--color-ink-muted)] mb-1">Email</label>
|
||||
<input
|
||||
id="email"
|
||||
type="email"
|
||||
required
|
||||
bind:value={email}
|
||||
class="w-full bg-white dark:bg-black/40 border border-gray-300 dark:border-white/20 text-gray-900 dark:text-white rounded-lg px-4 py-2.5 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
|
||||
class="w-full bg-[var(--color-surface)] border border-[var(--color-line)] text-[var(--color-ink)] rounded-md px-4 py-2.5 focus:border-[var(--color-accent)] focus:outline-none transition-colors"
|
||||
placeholder="[email protected]"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Password</label>
|
||||
<label for="password" class="block text-sm font-medium text-[var(--color-ink-muted)] mb-1">Password</label>
|
||||
<input
|
||||
id="password"
|
||||
type="password"
|
||||
required
|
||||
bind:value={password}
|
||||
class="w-full bg-white dark:bg-black/40 border border-gray-300 dark:border-white/20 text-gray-900 dark:text-white rounded-lg px-4 py-2.5 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
|
||||
class="w-full bg-[var(--color-surface)] border border-[var(--color-line)] text-[var(--color-ink)] rounded-md px-4 py-2.5 focus:border-[var(--color-accent)] focus:outline-none transition-colors"
|
||||
placeholder="Min. 8 characters"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label for="confirm-password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Confirm Password</label>
|
||||
<label for="confirm-password" class="block text-sm font-medium text-[var(--color-ink-muted)] mb-1">Confirm password</label>
|
||||
<input
|
||||
id="confirm-password"
|
||||
type="password"
|
||||
required
|
||||
bind:value={confirmPassword}
|
||||
class="w-full bg-white dark:bg-black/40 border border-gray-300 dark:border-white/20 text-gray-900 dark:text-white rounded-lg px-4 py-2.5 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
|
||||
class="w-full bg-[var(--color-surface)] border border-[var(--color-line)] text-[var(--color-ink)] rounded-md px-4 py-2.5 focus:border-[var(--color-accent)] focus:outline-none transition-colors"
|
||||
placeholder="Repeat password"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
class="w-full flex items-center justify-center gap-2 bg-blue-600 hover:bg-blue-700 disabled:opacity-60 text-white font-semibold py-2.5 rounded-lg transition-colors mt-2 shadow-sm"
|
||||
class="w-full flex items-center justify-center gap-2 bg-[var(--color-accent)] hover:opacity-90 disabled:opacity-60 text-white font-semibold py-2.5 rounded-md transition mt-2"
|
||||
>
|
||||
{#if loading}
|
||||
<Icon icon="mdi:loading" class="animate-spin text-lg" />
|
||||
Creating account...
|
||||
{:else}
|
||||
<Icon icon="mdi:shield-check-outline" class="text-lg" />
|
||||
Create Admin Account
|
||||
Create admin account
|
||||
{/if}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
Reference in New Issue
Block a user