Redesign frontend UI with Observatory theme
All checks were successful
Validate / Hassfest (push) Successful in 3s
All checks were successful
Validate / Hassfest (push) Successful in 3s
New teal-accent color system, DM Sans + JetBrains Mono typography, glow effects, animated gradient login page, animated dashboard counters with gradient-border stat cards, event timeline, sidebar with active glow indicators, and polished components (modals, cards, snackbar). Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -79,11 +79,14 @@
|
||||
|
||||
<PageHeader title={t('servers.title')} description={t('servers.description')}>
|
||||
<button onclick={() => { showForm ? (showForm = false, editing = null) : openNew(); }}
|
||||
class="px-3 py-1.5 bg-[var(--color-primary)] text-[var(--color-primary-foreground)] rounded-md text-sm font-medium hover:opacity-90">
|
||||
class="header-action-btn"
|
||||
style="background: {showForm ? 'var(--color-muted)' : 'var(--color-primary)'}; color: {showForm ? 'var(--color-foreground)' : 'var(--color-primary-foreground)'};">
|
||||
{#if showForm}
|
||||
<MdiIcon name="mdiClose" size={14} />
|
||||
{t('servers.cancel')}
|
||||
{:else}
|
||||
<span class="flex items-center gap-1"><MdiIcon name="mdiPlus" size={14} />{t('servers.addServer')}</span>
|
||||
<MdiIcon name="mdiPlus" size={14} />
|
||||
{t('servers.addServer')}
|
||||
{/if}
|
||||
</button>
|
||||
</PageHeader>
|
||||
@@ -94,14 +97,22 @@
|
||||
|
||||
{#if loadError}
|
||||
<Card class="mb-6">
|
||||
<div class="bg-[var(--color-error-bg)] text-[var(--color-error-fg)] text-sm rounded-md p-3">{loadError}</div>
|
||||
<div class="flex items-center gap-2 text-sm" style="color: var(--color-error-fg);">
|
||||
<MdiIcon name="mdiAlertCircle" size={18} />
|
||||
{loadError}
|
||||
</div>
|
||||
</Card>
|
||||
{/if}
|
||||
|
||||
{#if showForm}
|
||||
<div in:slide={{ duration: 200 }}>
|
||||
<Card class="mb-6">
|
||||
{#if error}<div class="bg-[var(--color-error-bg)] text-[var(--color-error-fg)] text-sm rounded-md p-3 mb-4">{error}</div>{/if}
|
||||
{#if error}
|
||||
<div class="flex items-center gap-2 text-sm rounded-lg p-3 mb-4" style="background: var(--color-error-bg); color: var(--color-error-fg);">
|
||||
<MdiIcon name="mdiAlertCircle" size={16} />
|
||||
{error}
|
||||
</div>
|
||||
{/if}
|
||||
<form onsubmit={save} class="space-y-3">
|
||||
<div>
|
||||
<div class="flex items-end gap-2">
|
||||
@@ -109,18 +120,22 @@
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<IconPicker value={form.icon} onselect={(v) => form.icon = v} />
|
||||
<input id="srv-name" bind:value={form.name} required class="flex-1 px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
|
||||
<input id="srv-name" bind:value={form.name} required class="flex-1 px-3 py-2 border border-[var(--color-border)] rounded-lg text-sm bg-[var(--color-background)]" />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label for="srv-url" class="block text-sm font-medium mb-1">{t('servers.url')}</label>
|
||||
<input id="srv-url" bind:value={form.url} required placeholder={t('servers.urlPlaceholder')} class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
|
||||
<input id="srv-url" bind:value={form.url} required placeholder={t('servers.urlPlaceholder')} class="w-full px-3 py-2 border border-[var(--color-border)] rounded-lg text-sm bg-[var(--color-background)]" />
|
||||
</div>
|
||||
<div>
|
||||
<label for="srv-key" class="block text-sm font-medium mb-1">{editing ? t('servers.apiKeyKeep') : t('servers.apiKey')}</label>
|
||||
<input id="srv-key" bind:value={form.api_key} type="password" required={!editing} class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
|
||||
<input id="srv-key" bind:value={form.api_key} type="password" required={!editing} class="w-full px-3 py-2 border border-[var(--color-border)] rounded-lg text-sm bg-[var(--color-background)]" />
|
||||
</div>
|
||||
<button type="submit" disabled={submitting} class="px-4 py-2 bg-[var(--color-primary)] text-[var(--color-primary-foreground)] rounded-md text-sm font-medium hover:opacity-90 disabled:opacity-50">
|
||||
<button type="submit" disabled={submitting}
|
||||
class="form-submit-btn">
|
||||
{#if submitting}
|
||||
<div class="w-4 h-4 rounded-full border-2 border-current border-t-transparent animate-spin"></div>
|
||||
{/if}
|
||||
{submitting ? t('servers.connecting') : (editing ? t('common.save') : t('servers.addServer'))}
|
||||
</button>
|
||||
</form>
|
||||
@@ -129,19 +144,25 @@
|
||||
{/if}
|
||||
|
||||
{#if servers.length === 0 && !showForm}
|
||||
<Card><p class="text-sm text-[var(--color-muted-foreground)]">{t('servers.noServers')}</p></Card>
|
||||
<Card>
|
||||
<div class="flex flex-col items-center py-8 gap-3" style="color: var(--color-muted-foreground);">
|
||||
<div style="opacity: 0.4;"><MdiIcon name="mdiServerOff" size={40} /></div>
|
||||
<p class="text-sm">{t('servers.noServers')}</p>
|
||||
</div>
|
||||
</Card>
|
||||
{:else}
|
||||
<div class="space-y-3">
|
||||
<div class="space-y-3 stagger-children">
|
||||
{#each servers as server}
|
||||
<Card hover>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="inline-block w-2.5 h-2.5 rounded-full {health[server.id] === true ? 'bg-green-500' : health[server.id] === false ? 'bg-red-500' : 'bg-yellow-400 animate-pulse'}"
|
||||
title={health[server.id] === true ? t('servers.online') : health[server.id] === false ? t('servers.offline') : t('servers.checking')}></span>
|
||||
{#if server.icon}<MdiIcon name={server.icon} />{/if}
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="health-dot {health[server.id] === true ? 'online' : health[server.id] === false ? 'offline' : 'checking'}"></div>
|
||||
{#if server.icon}
|
||||
<span style="color: var(--color-primary);"><MdiIcon name={server.icon} size={20} /></span>
|
||||
{/if}
|
||||
<div>
|
||||
<p class="font-medium">{server.name}</p>
|
||||
<p class="text-sm text-[var(--color-muted-foreground)]">{server.url}</p>
|
||||
<p class="text-sm font-mono" style="color: var(--color-muted-foreground); font-size: 0.75rem;">{server.url}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-1">
|
||||
@@ -158,3 +179,77 @@
|
||||
|
||||
<ConfirmModal open={!!confirmDelete} title={t('common.delete')} message={t('servers.confirmDelete')}
|
||||
onconfirm={doDelete} oncancel={() => confirmDelete = null} />
|
||||
|
||||
<style>
|
||||
.header-action-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.375rem;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 0.625rem;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 500;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.header-action-btn:hover {
|
||||
box-shadow: 0 0 16px var(--color-glow);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.form-submit-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.5rem 1.25rem;
|
||||
border-radius: 0.625rem;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
border: none;
|
||||
background: var(--color-primary);
|
||||
color: var(--color-primary-foreground);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.form-submit-btn:hover:not(:disabled) {
|
||||
box-shadow: 0 0 16px var(--color-glow-strong);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.form-submit-btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.health-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.health-dot.online {
|
||||
background: #059669;
|
||||
box-shadow: 0 0 8px rgba(5, 150, 105, 0.4);
|
||||
}
|
||||
|
||||
.health-dot.offline {
|
||||
background: #ef4444;
|
||||
box-shadow: 0 0 8px rgba(239, 68, 68, 0.3);
|
||||
}
|
||||
|
||||
.health-dot.checking {
|
||||
background: #f59e0b;
|
||||
animation: pulseCheck 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes pulseCheck {
|
||||
0%, 100% { box-shadow: 0 0 4px rgba(245, 158, 11, 0.3); }
|
||||
50% { box-shadow: 0 0 12px rgba(245, 158, 11, 0.6); }
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user