slhx agent
5ab5846b01
Make the SaaS tutorial's settings route render a distinct full-page fallback while the enhanced handler still swaps the generated page panel and pushes history. This proves page-swap shape without relying only on the enhanced interaction path. req: examples/001 req: page_swap/002
47 lines
1.9 KiB
Plaintext
47 lines
1.9 KiB
Plaintext
<section class="dashboard" data-hemx-root="dashboard" data-hemx-sse="/events">
|
|
<header class="hero">
|
|
<p class="eyebrow">Production-shaped SaaS path</p>
|
|
<h1>Projects</h1>
|
|
<p class="lede">Auth-gated mutations, CSRF checks, local persistence, typed forms, generated swaps, page swaps, live status, plain CSS, and one explicit island.</p>
|
|
</header>
|
|
|
|
<nav class="tabs" data-hemx-slot="nav">
|
|
<a href="/" data-hemx-nav="">Projects</a>
|
|
<button type="button" data-hemx-handle="open_settings">Settings</button>
|
|
</nav>
|
|
|
|
<section class="panel" data-hemx-slot="page_panel">
|
|
<div h-if="self.show_projects">
|
|
<form class="project-form" data-hemx-handle="create_project" data-hemx-form="new_project" data-hemx-disable-while-pending>
|
|
<input type="hidden" name="csrf" +value="self.csrf">
|
|
<label>Project name
|
|
<input name="name" required="required" maxlength="64" value="Launch checklist">
|
|
</label>
|
|
<button type="submit">Create project</button>
|
|
<p class="field-error" data-hemx-error-for="name"></p>
|
|
</form>
|
|
|
|
<p class="flash" data-hemx-slot="flash">{+ self.flash +}</p>
|
|
<p class="summary" data-hemx-slot="summary">{+ self.summary +}</p>
|
|
|
|
<ul class="project-list" data-hemx-slot="project_row">
|
|
<template h-for="row in &self.rows" h-key="row.id">
|
|
{+ row +}
|
|
</template>
|
|
</ul>
|
|
</div>
|
|
<div h-if="!self.show_projects">
|
|
{+ self.settings +}
|
|
</div>
|
|
</section>
|
|
|
|
<section class="status-row">
|
|
<p data-hemx-slot="live_status">Waiting for status…</p>
|
|
<article class="metrics-island" data-hemx-island="metrics" +data-project-count="self.project_count">
|
|
<h2>Metrics island</h2>
|
|
<canvas width="320" height="140" aria-label="Project metrics chart"></canvas>
|
|
<p data-island-readout="">Waiting for island script…</p>
|
|
</article>
|
|
</section>
|
|
</section>
|