Skip to content

feat(gnoweb): consolidate built-in playground UI #5565

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
jeronimoalbi wants to merge 24 commits into
base: playground2
Choose a base branch
from
Open

feat(gnoweb): consolidate built-in playground UI #5565

Show file tree
Hide file tree
Changes from 20 commits
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
79bf488
chore(gnoweb): make editor corners rounded
jeronimoalbi Apr 21, 2026
726a72c
chore: increase playground tab font size
jeronimoalbi Apr 21, 2026
c2529fd
feat: change playground styles to be inline with gnoweb
jeronimoalbi Apr 21, 2026
6453e3f
chore: remove deprecated controller file
jeronimoalbi Apr 21, 2026
b6d19d0
ci: fix typescript issues (biome)
jeronimoalbi Apr 21, 2026
3c115b3
ci: gnoweb generate
jeronimoalbi Apr 21, 2026
4f456ec
chore: update package lock
jeronimoalbi Apr 21, 2026
27c3281
chore: remove redundant `min()` function
jeronimoalbi Apr 21, 2026
fef4668
ci: remove peer flag from package lock
jeronimoalbi Apr 21, 2026
d6a246b
feat: allow "gnomod.toml" file and disallow duplicated file names
jeronimoalbi Apr 22, 2026
1647363
feat: add function to set playground output and error
jeronimoalbi Apr 22, 2026
3a686a8
feat: add default "gnomod.toml" content when file is created
jeronimoalbi Apr 22, 2026
0c016d2
ci: fix formatting
jeronimoalbi Apr 22, 2026
48226c4
chore: make generate
jeronimoalbi Apr 22, 2026
f7f97f0
feat: change script run view styles to be inline with gnoweb
jeronimoalbi Apr 22, 2026
85e58cc
feat: fix script run to use the whole space
jeronimoalbi Apr 22, 2026
92de7db
chore: make generate
jeronimoalbi Apr 22, 2026
e6ff4fd
feat: change eval view styles to be inline with gnoweb
jeronimoalbi Apr 22, 2026
fec2e3e
chore: make generate
jeronimoalbi Apr 22, 2026
e8086af
ci: fix formatting
jeronimoalbi Apr 22, 2026
7d65338
chore: fix typo and improved view templates
jeronimoalbi Apr 23, 2026
c511d29
chore: regenerate main.css
jeronimoalbi Apr 23, 2026
27085e5
chore: remove unused variable
jeronimoalbi Apr 24, 2026
be76768
Merge branch 'playground2' into playground2-m0
jeronimoalbi Apr 24, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion gno.land/pkg/gnoweb/components/ui/icons.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -238,4 +238,4 @@
d="M4 22C4 17.5817 7.58172 14 12 14C16.4183 14 20 17.5817 20 22H18C18 18.6863 15.3137 16 12 16C8.68629 16 6 18.6863 6 22H4ZM12 13C8.685 13 6 10.315 6 7C6 3.685 8.685 1 12 1C15.315 1 18 3.685 18 7C18 10.315 15.315 13 12 13ZM12 11C14.21 11 16 9.21 16 7C16 4.79 14.21 3 12 3C9.79 3 8 4.79 8 7C8 9.21 9.79 11 12 11Z" />
</symbol>
</svg>
{{ end }}
{{ end }}
38 changes: 20 additions & 18 deletions gno.land/pkg/gnoweb/components/views/eval.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,11 @@
{{/* ===================================================================================
LAYOUT - Eval view wrapper
LAYOUT - Eval view
=================================================================================== */}}
{{ define "renderEval" }}
<header class="b-content-header u-gap-0 u-mb-0 u-lg-mb-4">
<h1 class="title b-content-h1">Gno Expression Evaluator</h1>
</header>

<!-- Aside - Function list -->
{{ with render .ComponentTOC }}
{{ template "layout/aside" . }}
Expand All @@ -22,10 +26,9 @@
data-eval-pkg-path-value="{{ .PkgPath }}"
data-eval-domain-value="{{ .Domain }}">

<div class="b-eval-header">
<h2 class="b-content-h2">Expression Evaluator</h2>
<p class="u-color-muted">Evaluate read-only expressions against <code class="u-font-mono">{{ .PkgPath }}</code></p>
</div>
<p class="u-color-muted">
Evaluate read-only expressions against <code class="u-font-mono">{{ .PkgPath }}</code>
</p>

<!-- Quick eval input -->
<div class="b-eval-input">
Expand All @@ -36,7 +39,7 @@ <h2 class="b-content-h2">Expression Evaluator</h2>
placeholder='Render("")' class="u-font-mono"
autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" />
</div>
<button type="submit" class="b-btn b-btn--primary">
<button type="submit" class="b-btn b-btn--primary c-with-icon">
<svg class="c-icon"><use href="#ico-tx-link"></use></svg>
<span>Eval</span>
</button>
Expand All @@ -46,36 +49,35 @@ <h2 class="b-content-h2">Expression Evaluator</h2>
<!-- Result area -->
<div class="b-eval-result">
<div class="b-eval-result-header">
<span>Result</span>
<h3 class="b-eval-result-title">Result</h3>
Copy link
Copy Markdown
Member

@alexiscolin alexiscolin Apr 23, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

NIT: "Result" went from <span> to <h3>, so DOM order now reads h1 → h3 Result → h2 Quick Call → h2 History, which is backwards for screen readers.
WDYT about keeping it as a span (or a panel-title class if we factor the shared panel primitive later)?

Copy link
Copy Markdown
Member Author

@jeronimoalbi jeronimoalbi Apr 23, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done 7d65338

<button class="b-eval-result-clear" data-action="click->eval#clearResult">Clear</button>
</div>
<pre class="b-eval-result-content" data-eval-target="result"><span class="u-color-muted">// Enter an expression above</span></pre>
</div>

<!-- Function quick-call buttons -->
{{ if .Functions }}
<div class="b-eval-functions">
<h3 class="b-content-h3">Quick Call</h3>
<div class="c-stack">
<div class="b-eval-quick-call">
<h2 class="b-content-h2">Quick Call</h2>
<ul class="b-eval-functions">
{{ range .Functions }}
<div class="b-eval-func">
<button class="b-btn b-btn--secondary" data-action="click->eval#quickCall"
<li id="func-{{ .Name }}">
<button class="b-inline-btn" data-action="click->eval#quickCall"
data-eval-func-name-param="{{ .Name }}"
data-eval-func-sig-param="{{ .Signature }}">
{{ .Name }}({{ range $i, $p := .Params }}{{ if gt $i 0 }}, {{ end }}{{ $p.Name }}{{ end }})
</button>
{{ if .Doc }}<span class="u-color-muted">{{ .Doc }}</span>{{ end }}
</div>
{{ if .Doc }}<div class="u-color-muted">{{ .Doc }}</div>{{ end }}
</li>
{{ end }}
</div>
</ul>
</div>
{{ end }}

<!-- History (hidden until first eval) -->
<div class="b-eval-history" data-eval-target="history" hidden>
<h3 class="b-content-h3">History</h3>
<div class="c-stack" data-eval-target="history-list">
</div>
<h2 class="b-content-h2">History</h2>
<div class="b-eval-history-list" data-eval-target="history-list" />
Copy link
Copy Markdown
Member

@alexiscolin alexiscolin Apr 23, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nit: <div ... /> self-closing syntax isn't valid HTML5 for non-void elements (the / is ignored by the parser). It renders fine here because the </div> on the next line balances it, but the syntax is confusing for readers used to JSX/XHTML.

Copy link
Copy Markdown
Member Author

@jeronimoalbi jeronimoalbi Apr 23, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done 7d65338

</div>
</div>
{{ end }}
23 changes: 12 additions & 11 deletions gno.land/pkg/gnoweb/components/views/playground.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,42 +3,43 @@
=================================================================================== */}}
{{ define "renderPlayground" }}
<!-- Playground Content -->
<div class="b-playground u-grid-full" data-controller="playground"
<div class="b-playground" data-controller="playground"
data-playground-remote-value="{{ .Remote }}"
data-playground-chain-id-value="{{ .ChainId }}"
data-playground-domain-value="{{ .Domain }}"
{{ with .ForkFrom }}data-playground-fork-from-value="{{ . }}"{{ end }}>

<!-- Toolbar -->
<div class="b-playground-toolbar">
<!-- Header Toolbar -->
<header class="b-content-header">
<div class="b-playground-toolbar-left">
<h1 class="b-playground-title">
<h1 class="title b-content-h1">
{{ if .ForkFrom }}
<span class="u-font-mono">Fork of {{ .ForkFrom }}</span>
<span>Fork</span>
<span class="b-tag">{{ .ForkFrom }}</span>
{{ else }}
Playground
{{ end }}
</h1>
</div>
<div class="b-playground-toolbar-right">
<button class="b-btn b-btn--secondary" data-action="click->playground#formatCode" title="Format code (Ctrl+Shift+F)">
<button class="b-btn b-btn--secondary c-with-icon" data-action="click->playground#formatCode" title="Format code (Ctrl+Shift+F)">
<svg class="c-icon"><use href="#ico-code"></use></svg>
<span>Format</span>
</button>
<button class="b-btn b-btn--secondary" data-action="click->playground#runTests" title="Run tests (Ctrl+Shift+T)">
<button class="b-btn b-btn--secondary c-with-icon" data-action="click->playground#runTests" title="Run tests (Ctrl+Shift+T)">
<svg class="c-icon"><use href="#ico-helper"></use></svg>
<span>Test</span>
</button>
<button class="b-btn b-btn--primary" data-action="click->playground#runCode" title="Run code (Ctrl+Enter)">
<button class="b-btn b-btn--primary c-with-icon" data-action="click->playground#runCode" title="Run code (Ctrl+Enter)">
<svg class="c-icon"><use href="#ico-tx-link"></use></svg>
<span>Run</span>
</button>
<button class="b-btn b-btn--secondary" data-action="click->playground#shareCode" title="Share">
<button class="b-btn b-btn--secondary c-with-icon" data-action="click->playground#shareCode" title="Share">
<svg class="c-icon"><use href="#ico-link"></use></svg>
<span>Share</span>
</button>
</div>
</div>
</header>

<!-- Editor Area -->
<div class="b-playground-editor-area">
Expand All @@ -59,7 +60,7 @@ <h1 class="b-playground-title">
<!-- Output Area -->
<div class="b-playground-output">
<div class="b-playground-output-header">
<span class="b-playground-output-title">Output</span>
<h3 class="b-playground-output-title">Output</h3>
Copy link
Copy Markdown
Member

@alexiscolin alexiscolin Apr 23, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same thought as on eval: "Output" feels more like a pane label than a section heading. Span rather than <h3>?

Copy link
Copy Markdown
Member Author

@jeronimoalbi jeronimoalbi Apr 23, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done 7d65338

<button class="b-playground-output-clear" data-action="click->playground#clearOutput" title="Clear output">Clear</button>
</div>
<pre class="b-playground-output-content" data-playground-target="output"><span class="u-color-muted">// Run code to see output here</span></pre>
Expand Down
70 changes: 29 additions & 41 deletions gno.land/pkg/gnoweb/components/views/run.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,59 +1,47 @@
{{/* ===================================================================================
LAYOUT - Run view wrapper
=================================================================================== */}}
{{ define "renderRun" }}
{{ template "layout/article" .Article }}
{{ end }}


{{/* ===================================================================================
UI - Run (maketx run) scratchpad
=================================================================================== */}}
{{ define "renderRunContent" }}
{{ define "renderRun" }}
<div class="b-run"
data-controller="run"
data-run-pkg-path-value="{{ .PkgPath }}"
data-run-pkg-alias-value="{{ .PkgAlias }}"
data-run-remote-value="{{ .Remote }}"
data-run-chain-id-value="{{ .ChainId }}">

<div class="b-run-header">
<h2 class="b-content-h2">Run Script</h2>
<p class="u-color-muted">
Write a <code class="u-font-mono">package main</code> script that imports
<code class="u-font-mono">{{ .PkgPath }}</code> and runs it with
<code class="u-font-mono">gnokey maketx run</code>.
</p>
</div>

<!-- Code editor -->
<div class="b-run-editor-area">
<div class="b-run-editor-toolbar">
<div class="b-run-tabs" data-run-target="tabs"></div>
<div class="b-run-toolbar-actions">
<button class="b-btn b-btn--ghost" data-action="click->run#resetCode" title="Reset to template">
<svg class="c-icon"><use href="#ico-refresh"></use></svg>
<header class="b-content-header u-gap-0 u-mb-0 u-lg-mb-4">
<h1 class="title b-content-h1">Run Script</h1>
<div class="header-info">
<div class="b-btns">
<button class="b-inline-btn c-with-icon" data-action="click->run#resetCode" title="Reset to initial script template">
<svg class="c-icon"><use href="#ico-code"></use></svg>
<span>Reset</span>
</button>
<button class="b-btn b-btn--ghost" data-action="click->run#downloadCode" title="Download as .gno file">
<svg class="c-icon"><use href="#ico-download"></use></svg>
<span>Download .gno</span>
<button class="b-inline-btn c-with-icon" data-action="click->run#downloadCode" title="Download script as .gno file">
<svg class="c-icon"><use href="#ico-ddl"></use></svg>
<span>Download</span>
</button>
</div>
</div>
<textarea
data-run-target="code"
class="b-run-code u-font-mono"
spellcheck="false"
autocomplete="off"
autocorrect="off"
autocapitalize="off"
></textarea>
</header>

<!-- Code editor -->
<div class="b-playground-editor-area">
<div class="b-playground-editor">
<textarea
data-run-target="code"
class="b-playground-code"
spellcheck="false"
autocomplete="off"
autocorrect="off"
autocapitalize="off"
></textarea>
</div>
</div>

<!-- Command settings -->
<div class="b-run-settings">
<h3 class="b-content-h3">Command Settings</h3>
<h2 class="b-content-h2">Command Settings</h2>
<div class="b-run-settings-grid">
<div class="b-input">
<label for="run-key">Key name or address</label>
Expand Down Expand Up @@ -86,14 +74,14 @@ <h3 class="b-content-h3">Command Settings</h3>
<div class="b-run-commands">
<h3 class="b-content-h3">Generated Commands</h3>
<p class="u-color-muted">
Save the code above as <code class="u-font-mono">script.gno</code> (use
<strong>Download .gno</strong> above), then run one of these commands:
Save the code above as <code class="u-font-mono">script.gno</code> using
the <strong>Download</strong> link above, then run one of these commands:
</p>

<!-- Dry run -->
<div class="b-run-command-block">
<div class="b-run-command-header">
<span class="b-run-command-label">Dry Run</span>
<h4 class="b-run-command-label">Dry Run</h4>
<span class="u-color-muted u-text-sm">simulates without broadcasting</span>
<button class="b-btn b-btn--ghost b-run-copy-btn"
data-action="click->run#copyDryRun" title="Copy to clipboard">
Expand All @@ -107,7 +95,7 @@ <h3 class="b-content-h3">Generated Commands</h3>
<!-- Execute -->
<div class="b-run-command-block">
<div class="b-run-command-header">
<span class="b-run-command-label">Execute</span>
<h4 class="b-run-command-label">Execute</h4>
<span class="u-color-muted u-text-sm">broadcasts and runs on-chain</span>
<button class="b-btn b-btn--ghost b-run-copy-btn"
data-action="click->run#copyExecute" title="Copy to clipboard">
Expand Down
Loading
Loading