feat(dashboard): always-visible Tour button — replay welcome modal any time
The 10-step welcome tour was first-run-only (persisted in IndexedDB).
After dismissing, users had no clear path back to it.
Fix:
- Topbar gets a '★ Tour' ghost button next to '?' that fires
CustomEvent('nv-show-tour') any time.
- Help-center Quickstart adds a primary 'Take the interactive 10-step
tour' button that closes help and launches the tour.
- nv-help listens for 'nv-show-help-close' to support the help→tour
hand-off cleanly.
Settings drawer already has 'Replay welcome tour' (added earlier);
this just makes the same action one-click from the always-visible
topbar.
Co-Authored-By: claude-flow <ruv@ruv.net>
This commit is contained in:
parent
cedb28db83
commit
f25b82ddb5
|
|
@ -290,13 +290,16 @@ export class NvHelp extends LitElement {
|
||||||
override connectedCallback(): void {
|
override connectedCallback(): void {
|
||||||
super.connectedCallback();
|
super.connectedCallback();
|
||||||
window.addEventListener('nv-show-help', this.show as EventListener);
|
window.addEventListener('nv-show-help', this.show as EventListener);
|
||||||
|
window.addEventListener('nv-show-help-close', this.closeListener);
|
||||||
window.addEventListener('keydown', this.onKey);
|
window.addEventListener('keydown', this.onKey);
|
||||||
}
|
}
|
||||||
override disconnectedCallback(): void {
|
override disconnectedCallback(): void {
|
||||||
super.disconnectedCallback();
|
super.disconnectedCallback();
|
||||||
window.removeEventListener('nv-show-help', this.show as EventListener);
|
window.removeEventListener('nv-show-help', this.show as EventListener);
|
||||||
|
window.removeEventListener('nv-show-help-close', this.closeListener);
|
||||||
window.removeEventListener('keydown', this.onKey);
|
window.removeEventListener('keydown', this.onKey);
|
||||||
}
|
}
|
||||||
|
private closeListener = (): void => this.close();
|
||||||
|
|
||||||
private show = (e: Event): void => {
|
private show = (e: Event): void => {
|
||||||
const detail = (e as CustomEvent).detail as { section?: Section } | undefined;
|
const detail = (e as CustomEvent).detail as { section?: Section } | undefined;
|
||||||
|
|
@ -331,6 +334,11 @@ export class NvHelp extends LitElement {
|
||||||
return html`
|
return html`
|
||||||
<h2>Quickstart</h2>
|
<h2>Quickstart</h2>
|
||||||
<p class="lead">Seven taps to get from "I just opened the dashboard" to "I'm running my own scene with verified determinism."</p>
|
<p class="lead">Seven taps to get from "I just opened the dashboard" to "I'm running my own scene with verified determinism."</p>
|
||||||
|
<button
|
||||||
|
style="display:inline-flex; align-items:center; gap:8px; padding:10px 16px; margin-bottom:14px; background:var(--accent); color:#1a0f00; border:none; border-radius:8px; font-size:13px; font-weight:600; cursor:pointer; font-family:inherit;"
|
||||||
|
@click=${() => { window.dispatchEvent(new CustomEvent('nv-show-help-close')); window.dispatchEvent(new CustomEvent('nv-show-tour')); }}>
|
||||||
|
★ Take the interactive 10-step tour
|
||||||
|
</button>
|
||||||
${QUICKSTART.map((s) => html`
|
${QUICKSTART.map((s) => html`
|
||||||
<div class="step">
|
<div class="step">
|
||||||
<div class="num">${s.step}</div>
|
<div class="num">${s.step}</div>
|
||||||
|
|
|
||||||
|
|
@ -117,6 +117,11 @@ export class NvTopbar extends LitElement {
|
||||||
@click=${this.openSeedModal}>
|
@click=${this.openSeedModal}>
|
||||||
seed: <b>0x${seedHex}</b>
|
seed: <b>0x${seedHex}</b>
|
||||||
</span>
|
</span>
|
||||||
|
<button class="ghost" id="tour-btn" title="Replay the 10-step welcome tour"
|
||||||
|
aria-label="Replay welcome tour"
|
||||||
|
@click=${() => window.dispatchEvent(new CustomEvent('nv-show-tour'))}>
|
||||||
|
★ Tour
|
||||||
|
</button>
|
||||||
<button class="ghost" id="help-btn" title="Help (press ? any time)" aria-label="Open help"
|
<button class="ghost" id="help-btn" title="Help (press ? any time)" aria-label="Open help"
|
||||||
@click=${() => window.dispatchEvent(new CustomEvent('nv-show-help'))}>
|
@click=${() => window.dispatchEvent(new CustomEvent('nv-show-help'))}>
|
||||||
?
|
?
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue