315 lines
20 KiB
Svelte
315 lines
20 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 CommandPalette from '$ui/components/CommandPalette.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 paletteOpen = $state(false);
|
|
let drawerOpen = $state(false);
|
|
let sidebarCollapsed = $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() {
|
|
if (accountOpen) accountButton?.focus();
|
|
accountOpen = false;
|
|
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; drawerOpen = false; paletteOpen = 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;
|
|
if ('fleetSnapshot' in $page.data && $page.data.fleetSnapshot) hydrateFleet($page.data.fleetSnapshot);
|
|
});
|
|
|
|
$effect(() => {
|
|
if (!sessionReady) return;
|
|
// Navigation badges need fresh host evidence on every signed-in page.
|
|
return startFleetMonitor();
|
|
});
|
|
|
|
onMount(() => {
|
|
const stopTimeZone = startTimeZonePreference();
|
|
const desktop = window.matchMedia('(min-width: 961px)');
|
|
const closeDrawer = () => { if (desktop.matches) drawerOpen = false; };
|
|
desktop.addEventListener('change', closeDrawer);
|
|
|
|
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;
|
|
// Global search also works while focus is in a page's search field.
|
|
if ((e.metaKey || e.ctrlKey) && !e.altKey && e.key.toLowerCase() === 'k') {
|
|
e.preventDefault();
|
|
accountOpen = false; drawerOpen = false; helpOpen = false;
|
|
paletteOpen = !paletteOpen;
|
|
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();
|
|
desktop.removeEventListener('change', closeDrawer);
|
|
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" class:with-sidebar={sessionReady} class:sidebar-collapsed={sidebarCollapsed}>
|
|
<a class="skip-link" href="#main-content">Skip to content</a>
|
|
{#if sessionReady && data.user}
|
|
<aside class="sidebar" id="desktop-navigation" hidden={sidebarCollapsed}>
|
|
<a class="sidebar-brand" href="/" aria-label="Electric Cherry home"><BrandMark size="sm" /></a>
|
|
<div class="sidebar-scroll"><Navigation role={data.user.role} /></div>
|
|
</aside>
|
|
<div class="navigation-drawer">
|
|
<Dialog bind:open={drawerOpen} title="Navigation" drawer>
|
|
<div id="mobile-navigation"><Navigation role={data.user.role} onNavigate={() => drawerOpen = false} /></div>
|
|
</Dialog>
|
|
</div>
|
|
{/if}
|
|
{#if publicPage}
|
|
<header class="auth-brand"><BrandMark size="md" /></header>
|
|
{:else}
|
|
<header class="app-header">
|
|
{#if sessionReady}
|
|
<button class="icon-button desktop-toggle" type="button" aria-label={sidebarCollapsed ? 'Expand navigation' : 'Collapse navigation'} aria-controls="desktop-navigation" aria-expanded={!sidebarCollapsed} onclick={() => sidebarCollapsed = !sidebarCollapsed}>
|
|
<svg viewBox="0 0 20 20" aria-hidden="true"><rect x="2" y="3" width="16" height="14" rx="2" /><path d="M7 3v14" /></svg>
|
|
</button>
|
|
<button class="icon-button mobile-toggle" type="button" aria-label="Open navigation" aria-controls="mobile-navigation" aria-expanded={drawerOpen} onclick={() => drawerOpen = true}>
|
|
<svg viewBox="0 0 20 20" aria-hidden="true"><path d="M3 5h14M3 10h14M3 15h14" /></svg>
|
|
</button>
|
|
{/if}
|
|
<a class="brand-link" href={sessionReady ? '/' : '/account'} aria-label="Electric Cherry home">
|
|
<BrandMark size="sm" />
|
|
</a>
|
|
{#if sessionReady}<button class="search-button" type="button" aria-label="Search pages, servers, hosts, and players" aria-keyshortcuts="Meta+k Control+k" onclick={() => paletteOpen = true}>
|
|
<svg viewBox="0 0 20 20" aria-hidden="true"><circle cx="8" cy="8" r="5" /><path d="m12 12 5 5" /></svg>
|
|
<span class="search-label">Search pages, servers, players…</span><kbd>⌘K / Ctrl K</kbd>
|
|
</button>{/if}
|
|
<div class="header-actions">
|
|
{#if sessionReady}<button class="icon-button help-button" type="button" aria-label="Keyboard shortcuts" title="Keyboard shortcuts (?)" onclick={openHelp}>?</button>{/if}
|
|
{#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 sessionReady}<button onclick={openHelp}>Keyboard shortcuts <span aria-hidden="true">?</span></button>{/if}
|
|
{#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?.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 />
|
|
{#if sessionReady && data.user}<CommandPalette bind:open={paletteOpen} role={data.user.role} />{/if}
|
|
<Dialog bind:open={helpOpen} title="Keyboard shortcuts" description="Press g, then a destination key. Page shortcuts are inactive while typing or using a dialog; search works from any field.">
|
|
<dl class="shortcuts"><div><dt><kbd>⌘K / Ctrl K</kbd></dt><dd>Search pages, servers, hosts, and players</dd></div>{#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; }
|
|
.shell.with-sidebar { padding-left: 224px; }
|
|
.shell.sidebar-collapsed { padding-left: 0; }
|
|
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 25; display: flex; flex-direction: column; width: 224px; border-right: 1px solid var(--border-subtle); background: var(--surface); }
|
|
.sidebar[hidden] { display: none; }
|
|
.sidebar-brand { display: flex; align-items: center; min-height: 60px; padding: 0 var(--space-4); text-decoration: none; }
|
|
.sidebar-scroll { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--space-2) var(--space-2) var(--space-6); scrollbar-width: thin; }
|
|
.navigation-drawer :global(dialog.drawer) { inset: 0 auto 0 0; width: min(320px, 100vw); border-left: 0; border-right: 1px solid var(--border-subtle); }
|
|
.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:var(--space-3); min-height:60px; padding:0 var(--space-5); border-bottom:1px solid var(--border-subtle); background:var(--surface-sunken); }
|
|
.brand-link { flex-shrink:0; display:flex; align-items:center; text-decoration:none; }
|
|
.with-sidebar:not(.sidebar-collapsed) .app-header .brand-link { display: none; }
|
|
.icon-button { display: inline-grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-secondary); font-size: var(--text-lg); cursor: pointer; }
|
|
.icon-button:hover { color: var(--text-primary); background: var(--surface-raised); }
|
|
.icon-button svg, .search-button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; flex-shrink: 0; }
|
|
.mobile-toggle { display: none; }
|
|
.search-button { min-width: 0; display: flex; align-items: center; gap: var(--space-2); flex: 1; max-width: 440px; height: 36px; padding: 0 var(--space-3); border: 1px solid var(--border-control); border-radius: var(--radius-sm); background: var(--surface-sunken); color: var(--text-secondary); cursor: pointer; text-align: left; font-size: var(--text-xs); }
|
|
.search-button:hover { border-color: var(--border-control-hover); color: var(--text-primary); }
|
|
.search-label { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
|
|
.search-button kbd { padding: 1px 4px; white-space: nowrap; }
|
|
.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:120px; }
|
|
.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:960px) {
|
|
.shell.with-sidebar { padding-left: 0; }
|
|
.sidebar, .desktop-toggle { display: none; }
|
|
.mobile-toggle { display: inline-grid; }
|
|
.with-sidebar:not(.sidebar-collapsed) .app-header .brand-link { display: flex; }
|
|
.app-header { min-height: 56px; gap: var(--space-2); padding: 0 var(--space-3); }
|
|
.search-button { margin-left: auto; max-width: 300px; }
|
|
.search-button kbd { display: none; }
|
|
.header-actions { margin-left: 0; }
|
|
}
|
|
@media (max-width:720px) {
|
|
.app-header { padding-inline: var(--space-2); gap: var(--space-1); }
|
|
.brand-link :global(.mark-sm .word) { font-size: var(--text-xs); letter-spacing:1px; }
|
|
.search-button { flex: 0 0 44px; width: 44px; height: 44px; padding: 0; justify-content: center; border: 0; }
|
|
.search-label, .help-button { display: none; }
|
|
main { padding:var(--space-4) 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: var(--text-input) !important; min-height:44px; }
|
|
:global(button),:global(.btn) { min-height:44px; }
|
|
}
|
|
@media (max-width:360px) { .brand-link :global(.mark-sm .word) { display: none; } .brand-link::after { content: 'EC'; margin-left: var(--space-2); color: var(--text-primary); font-size: var(--text-base); font-weight: var(--weight-semibold); } .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>
|