248 lines
14 KiB
Svelte
248 lines
14 KiB
Svelte
<script lang="ts">
|
|
import { onMount } from 'svelte';
|
|
import { startTimeZonePreference } from '$ui/stores/time-zone.js';
|
|
import { afterNavigate, beforeNavigate, onNavigate, goto } from '$app/navigation';
|
|
import { startPipelineStream } from '$ui/stores/pipeline.js';
|
|
import { startServerStream } from '$ui/stores/servers.js';
|
|
import { startFleetMonitor, hydrateFleet } from '$ui/stores/fleet.js';
|
|
import { page } from '$app/stores';
|
|
import Navigation from '$ui/components/Navigation.svelte';
|
|
import { visibleNavigation } from '$lib/navigation.js';
|
|
import BrandMark from '$ui/components/BrandMark.svelte';
|
|
import Confirmation from '$ui/components/Confirmation.svelte';
|
|
import Dialog from '$ui/components/primitives/Dialog.svelte';
|
|
import { resolveConfirmation } from '$ui/confirm.js';
|
|
import '$ui/styles/components.css';
|
|
import { enableViewTransitions } from '$ui/motion/viewTransition.js';
|
|
import type { AuthUser } from '$lib/auth.js';
|
|
// Side-effect import — puts @fontsource CSS on Vite's module graph so
|
|
// the referenced woff/woff2 files get emitted into the build.
|
|
import '$ui/styles/fonts.js';
|
|
|
|
interface Props { children: import('svelte').Snippet; data: { user: AuthUser | null; setupRequired: boolean } }
|
|
let { children, data }: Props = $props();
|
|
const publicPage = $derived(['/login', '/setup'].includes($page.url.pathname));
|
|
const sessionReady = $derived(!!data.user && !data.user.mustChangePassword && !publicPage);
|
|
let accountOpen = $state(false);
|
|
let signingOut = $state(false);
|
|
let signOutError = $state('');
|
|
let helpOpen = $state(false);
|
|
let accountButton = $state<HTMLButtonElement>();
|
|
const accountName = $derived(data.user?.displayName || data.user?.username || 'Account');
|
|
const accountInitial = $derived(Array.from(accountName.trim())[0]?.toLocaleUpperCase() || '?');
|
|
|
|
function dismissAccount(event: MouseEvent) {
|
|
if (event.target instanceof Element && !event.target.closest('.account-menu')) accountOpen = false;
|
|
}
|
|
|
|
function openHelp() {
|
|
helpOpen = true;
|
|
}
|
|
|
|
beforeNavigate(() => performance.mark('ec:navigation-start'));
|
|
afterNavigate(() => { if (performance.getEntriesByName('ec:navigation-start').length) { performance.measure('ec:navigation', 'ec:navigation-start'); performance.clearMarks('ec:navigation-start'); } });
|
|
afterNavigate(() => { accountOpen = false; resolveConfirmation(false); });
|
|
|
|
function closeMenu(event: KeyboardEvent) {
|
|
if (event.key === 'Escape' && accountOpen) { accountOpen = false; accountButton?.focus(); }
|
|
}
|
|
|
|
async function signOut() {
|
|
if (signingOut) return;
|
|
signingOut = true; signOutError = '';
|
|
try {
|
|
const response = await fetch('/api/auth/logout', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: '{}' });
|
|
if (!response.ok) { const body = await response.json(); throw new Error(body.error ?? 'Could not sign out. Try again.'); }
|
|
window.location.assign('/login');
|
|
} catch (cause) { signOutError = (cause as Error).message; signingOut = false; }
|
|
}
|
|
|
|
$effect(() => {
|
|
if (!sessionReady) return;
|
|
const stopPipeline = startPipelineStream();
|
|
const stopServers = startServerStream();
|
|
return () => { stopPipeline?.(); stopServers?.(); };
|
|
});
|
|
|
|
$effect(() => {
|
|
if (!sessionReady) return;
|
|
const path = $page.url.pathname;
|
|
if (!(path === '/' || /^\/(scripts|configs|plugins)\//.test(path) || path === '/betas/new')) return;
|
|
if ('fleetSnapshot' in $page.data && $page.data.fleetSnapshot) hydrateFleet($page.data.fleetSnapshot);
|
|
return startFleetMonitor();
|
|
});
|
|
|
|
onMount(() => {
|
|
const stopTimeZone = startTimeZonePreference();
|
|
|
|
const shortcuts = Object.fromEntries(visibleNavigation(data.user?.role ?? 'viewer').flatMap(group => group.items).filter(item => item.shortcut).map(item => [item.shortcut!, item.href]));
|
|
let armed = false;
|
|
let armTimer: ReturnType<typeof setTimeout> | null = null;
|
|
|
|
const onKey = (e: KeyboardEvent) => {
|
|
if (!sessionReady) return;
|
|
const target = e.target as HTMLElement;
|
|
if (target && (['INPUT', 'TEXTAREA', 'SELECT'].includes(target.tagName) || target.isContentEditable || target.closest('dialog'))) return;
|
|
if (e.metaKey || e.ctrlKey || e.altKey) return;
|
|
if (e.key === '?') { e.preventDefault(); openHelp(); return; }
|
|
|
|
if (!armed && e.key === 'g') {
|
|
armed = true;
|
|
if (armTimer) clearTimeout(armTimer);
|
|
armTimer = setTimeout(() => { armed = false; }, 1000);
|
|
return;
|
|
}
|
|
if (armed) {
|
|
armed = false;
|
|
if (armTimer) { clearTimeout(armTimer); armTimer = null; }
|
|
const dest = shortcuts[e.key];
|
|
if ((e.key === 'h' || e.key === 'k') && data.user?.role !== 'admin') return;
|
|
if (dest) {
|
|
e.preventDefault();
|
|
goto(dest);
|
|
}
|
|
}
|
|
};
|
|
window.addEventListener('keydown', onKey);
|
|
return () => {
|
|
stopTimeZone();
|
|
window.removeEventListener('keydown', onKey);
|
|
if (armTimer) clearTimeout(armTimer);
|
|
};
|
|
});
|
|
|
|
// Route changes cross-fade via the browser's View Transitions API.
|
|
// Non-Chromium browsers fall through to plain navigation.
|
|
onNavigate(enableViewTransitions);
|
|
|
|
const shortcuts = $derived(visibleNavigation(data.user?.role ?? 'viewer').flatMap(group => group.items).filter(item => item.shortcut));
|
|
</script>
|
|
|
|
<svelte:window onkeydown={closeMenu} onclick={dismissAccount} />
|
|
|
|
<div class="shell">
|
|
<a class="skip-link" href="#main-content">Skip to content</a>
|
|
{#if publicPage}
|
|
<header class="auth-brand"><BrandMark size="md" /></header>
|
|
{:else}
|
|
<header class="app-header">
|
|
<a class="brand-link" href={sessionReady ? '/' : '/account'} aria-label="Electric Cherry home">
|
|
<BrandMark size="sm" />
|
|
</a>
|
|
{#if sessionReady && data.user}<div class="primary-navigation"><Navigation role={data.user.role} /></div>{/if}
|
|
<div class="header-actions">
|
|
{#if data.user}
|
|
<div class="account-menu">
|
|
<button bind:this={accountButton} class="account-button" type="button"
|
|
aria-label={`Account: ${accountName}`} title={accountName}
|
|
aria-expanded={accountOpen} aria-controls="account-links"
|
|
onclick={() => accountOpen = !accountOpen}>
|
|
<span aria-hidden="true">{accountInitial}</span>
|
|
</button>
|
|
{#if accountOpen}
|
|
<div class="account-links" id="account-links">
|
|
<div class="account-name">{accountName}</div>
|
|
<a href="/account">My account</a>
|
|
{#if data.user.role === 'admin' && sessionReady}<a href="/settings/users">Manage users</a>{/if}
|
|
<button disabled={signingOut} onclick={signOut}>{signingOut ? 'Signing out…' : 'Sign out'}</button>
|
|
{#if signOutError}<p role="alert">{signOutError}</p>{/if}
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
</header>
|
|
{/if}
|
|
<main id="main-content" tabindex="-1" class:auth-main={publicPage}>
|
|
{#if sessionReady && data.user}<Navigation role={data.user.role} variant="secondary" />{/if}
|
|
{#if sessionReady && data.user?.role === 'viewer'}<aside class="viewer-note"><strong>Viewer access</strong><span>You can read fleet status and summaries. Operating servers or viewing raw configs, file changes, logs, and telemetry requires an operator account.</span></aside>{/if}
|
|
{@render children()}
|
|
</main>
|
|
<Confirmation />
|
|
<Dialog bind:open={helpOpen} title="Keyboard shortcuts" description="Press g, then the destination key. Shortcuts are inactive while typing or using a dialog.">
|
|
<dl class="shortcuts">{#each shortcuts as item}<div><dt><kbd>g {item.shortcut}</kbd></dt><dd>{item.href === '/' ? 'Fleet' : item.label}</dd></div>{/each}<div><dt><kbd>?</kbd></dt><dd>This help</dd></div></dl>
|
|
</Dialog>
|
|
</div>
|
|
|
|
<style>
|
|
@import '$ui/styles/tokens.css';
|
|
|
|
:global(html, body) {
|
|
margin: 0;
|
|
background: var(--surface-sunken);
|
|
color: var(--text-primary);
|
|
font-family: var(--font-body);
|
|
font-size: var(--text-base);
|
|
line-height: var(--leading-body);
|
|
min-height: 100vh;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
text-rendering: optimizeLegibility;
|
|
}
|
|
:global(*) { box-sizing: border-box; }
|
|
:global(a) { color: var(--accent-primary-hover); }
|
|
:global(::selection) {
|
|
background: var(--accent-primary);
|
|
color: var(--text-on-accent);
|
|
}
|
|
:global(:focus-visible) {
|
|
outline: 2px solid var(--accent-primary-hover);
|
|
outline-offset: 3px;
|
|
}
|
|
|
|
/* Ambient background — a faint radial gradient hints at depth without
|
|
any lines. Fixed to the viewport so scrolling stays quiet. */
|
|
:global(body::before) {
|
|
content: '';
|
|
position: fixed;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
background:
|
|
radial-gradient(1200px 700px at 20% -10%, rgba(46, 134, 209, 0.10), transparent 60%),
|
|
radial-gradient(900px 600px at 90% 100%, rgba(124, 192, 245, 0.05), transparent 60%);
|
|
z-index: -1;
|
|
}
|
|
|
|
.shell { min-height: 100vh; }
|
|
.auth-brand { display:flex; justify-content:center; padding:48px 20px 20px; }
|
|
main { min-width:0; overflow-wrap:anywhere; padding:var(--space-6) var(--space-8) var(--space-16); max-width:1600px; margin:0 auto; view-transition-name:main; }
|
|
main.auth-main { max-width:520px; padding-top:16px; }
|
|
.viewer-note { display:flex; gap:8px 16px; flex-wrap:wrap; padding:14px 18px; margin-bottom:24px; border:1px solid var(--border-subtle); border-radius:var(--radius-md); background:var(--surface); font-size:var(--text-sm); color:var(--text-secondary); }
|
|
.viewer-note strong { color:var(--text-primary); }
|
|
.app-header { position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:24px; min-height:60px; padding:0 20px; border-bottom:1px solid var(--border-subtle); background:var(--surface); }
|
|
.brand-link { flex-shrink:0; display:flex; align-items:center; text-decoration:none; }
|
|
.primary-navigation { flex:1; min-width:0; }
|
|
.header-actions { display:flex; align-items:center; gap:8px; margin-left:auto; }
|
|
.account-menu { position:relative; }
|
|
.account-button { display:inline-flex; align-items:center; justify-content:center; min-width:44px; height:44px; padding:8px 12px; border:1px solid var(--border-strong); border-radius:var(--radius-md); background:var(--surface); color:var(--text-primary); font:inherit; cursor:pointer; }
|
|
.account-button { border-radius:50%; color:var(--accent-primary-hover); background:color-mix(in oklab,var(--accent-primary) 12%,var(--surface)); font-weight:600; }
|
|
.account-links { position:absolute; right:0; top:calc(100% + 8px); width:220px; max-width:calc(100vw - 32px); max-height:calc(100dvh - 84px); overflow-y:auto; z-index:30; display:grid; padding:8px; background:var(--surface); border:1px solid var(--border-strong); border-radius:var(--radius-md); box-shadow:0 12px 32px #0005; }
|
|
.account-name { padding:8px 12px 12px; margin-bottom:4px; border-bottom:1px solid var(--border-subtle); color:var(--text-secondary); font-size:var(--text-sm); overflow-wrap:anywhere; }
|
|
.account-links a,.account-links button { text-align:left; padding:10px 12px; color:var(--text-primary); background:none; border:0; border-radius:var(--radius-sm); font:inherit; font-size:var(--text-sm); cursor:pointer; text-decoration:none; }
|
|
.account-links a:hover,.account-links button:hover { background:var(--surface-raised); }
|
|
.account-links p { padding:0 12px; font-size:var(--text-xs); color:var(--state-danger); }
|
|
.shortcuts { display:grid; gap:12px; margin:0; }
|
|
.shortcuts > div { display:flex; gap:20px; align-items:center; }
|
|
.shortcuts dt { min-width:55px; }
|
|
.shortcuts dd { margin:0; font-size:var(--text-sm); }
|
|
kbd { font-family:var(--font-mono); padding:3px 8px; border:1px solid var(--border-strong); border-radius:5px; }
|
|
.skip-link { position:fixed; left:16px; top:-80px; z-index:300; padding:12px 16px; background:var(--surface-raised); border-radius:var(--radius-md); }
|
|
.skip-link:focus { top:12px; }
|
|
:global(input),:global(select),:global(textarea) { min-width:0; max-width:100%; }
|
|
:global(input),:global(select),:global(textarea),:global(button),:global(a) { scroll-margin-block:90px 100px; }
|
|
:global(dialog) { max-height:calc(100dvh - 32px); overflow-y:auto; overscroll-behavior:contain; }
|
|
@media (max-width:999px) {
|
|
.app-header { flex-wrap:wrap; gap:0 16px; padding-top:8px; }
|
|
.primary-navigation { order:3; flex-basis:100%; }
|
|
}
|
|
@media (max-width:720px) {
|
|
.app-header { padding-inline:12px; gap:8px; }
|
|
.brand-link :global(.mark-sm .word) { font-size:12px; letter-spacing:1px; }
|
|
main { padding:var(--space-5) max(var(--space-4),env(safe-area-inset-right)) calc(var(--space-16) + env(safe-area-inset-bottom)) max(var(--space-4),env(safe-area-inset-left)); }
|
|
:global(input:not([type='checkbox']):not([type='radio'])),:global(select),:global(textarea) { font-size:16px !important; min-height:44px; }
|
|
:global(button),:global(.btn) { min-height:44px; }
|
|
}
|
|
@media (max-width:360px) { .brand-link :global(.mark-sm .word) { font-size:10px; letter-spacing:0; } .header-actions { gap:4px; } }
|
|
:global(::view-transition-old(root)),:global(::view-transition-new(root)),:global(::view-transition-old(main)),:global(::view-transition-new(main)) { animation-duration:var(--dur-base); animation-timing-function:var(--ease-standard); }
|
|
</style>
|