Add in-app edit UI for dashboard config
A web editor at /edit for managing pages and widgets without hand-editing YAML:
- Page list and per-page widget views with breadcrumb navigation
- Add/delete pages, add/delete/reorder widgets within a column
- Per-widget textarea editor with curated starter templates, widget-specific
help (example, full field reference, link to upstream docs), and inline
error rendering that preserves the user's edits on validation failure
- Pre-save validation via newConfigFromYAML; atomic temp+rename writes with
.bak backup; YAML edits go through yaml.Node so comments and unresolved
${env:X}/${secret:X} tokens survive round-trips
- Auth gate: editing requires auth.users to be configured, or
admin.allow-without-auth: true as an explicit opt-in for trusted networks
- Pencil button on the dashboard near the theme picker for quick access
- Admin views read fresh from disk so the list updates immediately after
saves rather than lagging the fsnotify watcher
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
uhlwoogi
co-authored by
Claude Opus 4.7
Claude Opus 4.7
parent
6c5b7a3f4c
commit
2e198a19b4
@@ -0,0 +1,79 @@
|
||||
{{- template "document.html" . }}
|
||||
|
||||
{{- define "document-title" }}Edit {{ .Page.Title }} - {{ .App.Config.Branding.AppName }}{{ end }}
|
||||
|
||||
{{- define "document-body" }}
|
||||
<div class="flex flex-column body-content">
|
||||
<main class="content-bounds" style="padding-block: 2rem;">
|
||||
<div class="margin-bottom-15">
|
||||
<a class="color-subdue" href="{{ .App.Config.Server.BaseURL }}/edit">← Edit</a>
|
||||
</div>
|
||||
<h1 class="size-h1">{{ .Page.Title }}</h1>
|
||||
<p class="color-subdue margin-bottom-25">/{{ .Page.Slug }}</p>
|
||||
|
||||
{{- if .Page.HeadWidgets }}
|
||||
<h2 class="size-h2 margin-bottom-10">Head widgets</h2>
|
||||
<ul class="list list-gap-10 margin-bottom-25">
|
||||
{{- range .Page.HeadWidgets }}
|
||||
<li>
|
||||
<a class="color-primary" href="{{ $.App.Config.Server.BaseURL }}/edit/pages/{{ $.Page.Slug }}/widgets/-1/{{ .WidgetIndex }}">
|
||||
{{ if .Title }}{{ .Title }}{{ else }}<em>(untitled)</em>{{ end }}
|
||||
</a>
|
||||
<span class="color-subdue"> — {{ .Type }}</span>
|
||||
</li>
|
||||
{{- end }}
|
||||
</ul>
|
||||
{{- end }}
|
||||
|
||||
<h2 class="size-h2 margin-bottom-10">Columns</h2>
|
||||
{{- if not .Page.Columns }}
|
||||
<p class="color-subdue">No columns configured on this page. Edit the YAML manually to add columns — column editing comes in a later phase.</p>
|
||||
{{- end }}
|
||||
{{- range $colIdx, $col := .Page.Columns }}
|
||||
<section class="margin-bottom-25">
|
||||
<h3 class="size-h3 margin-bottom-10">
|
||||
Column {{ $col.Index }}
|
||||
<span class="color-subdue size-h5">({{ if $col.Size }}{{ $col.Size }}{{ else }}default{{ end }})</span>
|
||||
</h3>
|
||||
{{- if not $col.Widgets }}
|
||||
<p class="color-subdue">No widgets in this column.</p>
|
||||
{{- else }}
|
||||
<ul class="list list-gap-10 margin-bottom-15">
|
||||
{{- range $col.Widgets }}
|
||||
<li class="flex items-center gap-10">
|
||||
<div class="grow">
|
||||
<a class="color-primary" href="{{ $.App.Config.Server.BaseURL }}/edit/pages/{{ $.Page.Slug }}/widgets/{{ .ColumnIndex }}/{{ .WidgetIndex }}">
|
||||
{{ if .Title }}{{ .Title }}{{ else }}<em>(untitled)</em>{{ end }}
|
||||
</a>
|
||||
<span class="color-subdue"> — {{ .Type }}</span>
|
||||
</div>
|
||||
<form method="post" action="{{ $.App.Config.Server.BaseURL }}/edit/api/pages/{{ $.Page.Slug }}/widgets/{{ .ColumnIndex }}/{{ .WidgetIndex }}/move?dir=up">
|
||||
<button type="submit" {{ if .IsFirst }}disabled{{ end }}>↑</button>
|
||||
</form>
|
||||
<form method="post" action="{{ $.App.Config.Server.BaseURL }}/edit/api/pages/{{ $.Page.Slug }}/widgets/{{ .ColumnIndex }}/{{ .WidgetIndex }}/move?dir=down">
|
||||
<button type="submit" {{ if .IsLast }}disabled{{ end }}>↓</button>
|
||||
</form>
|
||||
<form method="post" action="{{ $.App.Config.Server.BaseURL }}/edit/api/pages/{{ $.Page.Slug }}/widgets/{{ .ColumnIndex }}/{{ .WidgetIndex }}/delete"
|
||||
onsubmit="return confirm('Delete this widget?');">
|
||||
<button type="submit" class="color-negative">Delete</button>
|
||||
</form>
|
||||
</li>
|
||||
{{- end }}
|
||||
</ul>
|
||||
{{- end }}
|
||||
|
||||
<form method="get" action="{{ $.App.Config.Server.BaseURL }}/edit/pages/{{ $.Page.Slug }}/widgets/{{ $col.Index }}/new" class="flex gap-10 items-center">
|
||||
<select name="type" required>
|
||||
<option value="">— add widget —</option>
|
||||
{{- range $.WidgetTypes }}
|
||||
<option value="{{ . }}">{{ . }}</option>
|
||||
{{- end }}
|
||||
</select>
|
||||
<button type="submit">Configure & add</button>
|
||||
</form>
|
||||
</section>
|
||||
{{- end }}
|
||||
</main>
|
||||
{{ template "footer.html" . }}
|
||||
</div>
|
||||
{{- end }}
|
||||
@@ -0,0 +1,94 @@
|
||||
{{- template "document.html" . }}
|
||||
|
||||
{{- define "document-title" }}{{ if .IsNew }}Add {{ .Widget.Type }}{{ else }}Edit {{ if .Widget.Title }}{{ .Widget.Title }}{{ else }}{{ .Widget.Type }}{{ end }}{{ end }} - {{ .App.Config.Branding.AppName }}{{ end }}
|
||||
|
||||
{{- define "document-body" }}
|
||||
<div class="flex flex-column body-content">
|
||||
<main class="content-bounds" style="padding-block: 2rem;">
|
||||
<div class="margin-bottom-15">
|
||||
<a class="color-subdue" href="{{ .App.Config.Server.BaseURL }}/edit">← Edit</a>
|
||||
<span class="color-subdue"> / </span>
|
||||
<a class="color-subdue" href="{{ .App.Config.Server.BaseURL }}/edit/pages/{{ .Page.Slug }}">{{ .Page.Title }}</a>
|
||||
</div>
|
||||
<h1 class="size-h1">
|
||||
{{- if .IsNew -}}
|
||||
Add widget <span class="color-subdue size-h4">— {{ .Widget.Type }}</span>
|
||||
{{- else -}}
|
||||
{{ if .Widget.Title }}{{ .Widget.Title }}{{ else }}<em>(untitled)</em>{{ end }}
|
||||
<span class="color-subdue size-h4">— {{ .Widget.Type }}</span>
|
||||
{{- end }}
|
||||
</h1>
|
||||
<p class="color-subdue margin-bottom-25">
|
||||
{{- if .IsNew -}}
|
||||
New widget for column {{ .Widget.ColumnIndex }}
|
||||
{{- else if eq .Widget.ColumnIndex -1 -}}
|
||||
head widget #{{ .Widget.WidgetIndex }}
|
||||
{{- else -}}
|
||||
column {{ .Widget.ColumnIndex }}, widget #{{ .Widget.WidgetIndex }}
|
||||
{{- end }}
|
||||
</p>
|
||||
|
||||
{{- if .ErrorMessage }}
|
||||
<div class="margin-bottom-15" style="padding:1rem;background:#fee;border:1px solid #c00;border-radius:4px;color:#700;">
|
||||
<strong>Couldn't save:</strong>
|
||||
<pre style="white-space:pre-wrap;margin:0.5rem 0 0;">{{ .ErrorMessage }}</pre>
|
||||
</div>
|
||||
{{- end }}
|
||||
|
||||
{{- if .LoadError }}
|
||||
<div class="margin-bottom-15" style="padding:1rem;background:#fee;border:1px solid #c00;border-radius:4px;">
|
||||
<strong>Can't load YAML:</strong>
|
||||
<pre style="white-space:pre-wrap;margin-top:0.5rem;">{{ .LoadError }}</pre>
|
||||
</div>
|
||||
{{- end }}
|
||||
|
||||
{{- if or .WidgetYAML .IsNew }}
|
||||
<details class="margin-bottom-15" style="background:var(--color-widget-content-frame-background);border:1px solid var(--color-widget-content-border);border-radius:4px;padding:0.75rem;" {{ if .IsNew }}open{{ end }}>
|
||||
<summary style="cursor:pointer;font-weight:bold;">How to edit a {{ if .Widget.Type }}<code>{{ .Widget.Type }}</code>{{ else }}widget{{ end }}</summary>
|
||||
<div style="margin-top:0.75rem;line-height:1.6;">
|
||||
{{- if .WidgetExample }}
|
||||
<p style="margin-bottom:0.25rem;">A working example of a <code>{{ .Widget.Type }}</code> widget:</p>
|
||||
<pre style="margin:0 0 0.75rem;padding:0.5rem;background:rgba(0,0,0,0.15);border-radius:3px;font-size:0.85rem;overflow:auto;">{{- .WidgetExample -}}</pre>
|
||||
{{- end }}
|
||||
{{- if .FieldReference }}
|
||||
<p style="margin-bottom:0.25rem;">All fields supported by <code>{{ .Widget.Type }}</code> (defaults shown — fields with <code>yaml:"-"</code> tags or empty defaults still apply):</p>
|
||||
<pre style="margin:0 0 0.75rem;padding:0.5rem;background:rgba(0,0,0,0.15);border-radius:3px;font-size:0.85rem;overflow:auto;max-height:18rem;">{{- .FieldReference -}}</pre>
|
||||
{{- end }}
|
||||
<p style="margin-bottom:0.25rem;">YAML quick tips:</p>
|
||||
<ul style="padding-left:1.5rem;margin:0 0 0.75rem;">
|
||||
<li>Indentation matters — use two spaces per level, never tabs.</li>
|
||||
<li>Strings, numbers, booleans go inline: <code>limit: 10</code>, <code>hide-header: true</code>.</li>
|
||||
<li>List items start with <code>-</code> and align under the parent key.</li>
|
||||
<li>Pull secrets from the environment: <code>token: ${env:MY_TOKEN}</code>.</li>
|
||||
</ul>
|
||||
<p>Validation runs before saving — if the YAML is invalid, your file isn't touched and the error appears above.</p>
|
||||
{{- if .Widget.Type }}
|
||||
<p>Full upstream reference: <a href="{{ .DocsURL }}" target="_blank" rel="noreferrer">{{ .Widget.Type }} docs ↗</a></p>
|
||||
{{- end }}
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<form method="post"
|
||||
action="{{- if .IsNew -}}
|
||||
{{ .App.Config.Server.BaseURL }}/edit/api/pages/{{ .Page.Slug }}/widgets/{{ .Widget.ColumnIndex }}/new
|
||||
{{- else -}}
|
||||
{{ .App.Config.Server.BaseURL }}/edit/api/pages/{{ .Page.Slug }}/widgets/{{ .Widget.ColumnIndex }}/{{ .Widget.WidgetIndex }}
|
||||
{{- end }}">
|
||||
<label for="widget-yaml" class="form-label widget-header margin-bottom-10">Widget YAML</label>
|
||||
<textarea id="widget-yaml" name="yaml" rows="20" spellcheck="false"
|
||||
style="width:100%;font-family:monospace;font-size:0.9rem;padding:0.75rem;background:var(--color-widget-content-frame-background);color:var(--color-text-base);border:1px solid var(--color-widget-content-border);border-radius:4px;">{{- .WidgetYAML -}}</textarea>
|
||||
<div class="flex gap-10 margin-top-10">
|
||||
<button type="submit">{{ if .IsNew }}Create{{ else }}Save{{ end }}</button>
|
||||
<a href="{{ .App.Config.Server.BaseURL }}/edit/pages/{{ .Page.Slug }}" class="color-subdue" style="align-self:center;">Cancel</a>
|
||||
</div>
|
||||
{{- if not .IsNew }}
|
||||
<p class="color-subdue size-h5" style="margin-top:0.5rem;">
|
||||
You can change <code>type:</code> here to convert this widget to any type.
|
||||
</p>
|
||||
{{- end }}
|
||||
</form>
|
||||
{{- end }}
|
||||
</main>
|
||||
{{ template "footer.html" . }}
|
||||
</div>
|
||||
{{- end }}
|
||||
@@ -0,0 +1,40 @@
|
||||
{{- template "document.html" . }}
|
||||
|
||||
{{- define "document-title" }}Edit - {{ .App.Config.Branding.AppName }}{{ end }}
|
||||
|
||||
{{- define "document-body" }}
|
||||
<div class="flex flex-column body-content">
|
||||
<main class="content-bounds" style="padding-block: 2rem;">
|
||||
<h1 class="size-h1 margin-bottom-15">Edit</h1>
|
||||
<p class="color-subdue margin-bottom-25">
|
||||
Editing <code>{{ .App.ConfigPath }}</code>. Changes take effect via hot-reload.
|
||||
</p>
|
||||
|
||||
<h2 class="size-h2 margin-bottom-10">Pages</h2>
|
||||
<ul class="list list-gap-10 margin-bottom-25">
|
||||
{{- range .Pages }}
|
||||
<li class="flex items-center gap-10">
|
||||
<div class="grow">
|
||||
<a class="color-primary" href="{{ $.App.Config.Server.BaseURL }}/edit/pages/{{ .Slug }}">
|
||||
{{ .Title }}
|
||||
</a>
|
||||
<span class="color-subdue"> — {{ .WidgetCount }} widget{{ if ne .WidgetCount 1 }}s{{ end }}</span>
|
||||
<div class="color-subdue size-h5">/{{ .Slug }}</div>
|
||||
</div>
|
||||
<form method="post" action="{{ $.App.Config.Server.BaseURL }}/edit/api/pages/{{ .Slug }}/delete"
|
||||
onsubmit="return confirm('Delete page "{{ .Title }}" and all its widgets?');">
|
||||
<button type="submit" class="color-negative">Delete</button>
|
||||
</form>
|
||||
</li>
|
||||
{{- end }}
|
||||
</ul>
|
||||
|
||||
<h3 class="size-h3 margin-bottom-10">Add a page</h3>
|
||||
<form method="post" action="{{ .App.Config.Server.BaseURL }}/edit/api/pages" class="flex gap-10 items-center">
|
||||
<input type="text" name="title" required placeholder="Page title" class="input grow">
|
||||
<button type="submit">Add page</button>
|
||||
</form>
|
||||
</main>
|
||||
{{ template "footer.html" . }}
|
||||
</div>
|
||||
{{- end }}
|
||||
@@ -43,6 +43,13 @@
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
{{- if or .App.RequiresAuth .App.Config.Admin.AllowWithoutAuth }}
|
||||
<a class="block self-center" href="{{ .App.Config.Server.BaseURL }}/edit" title="Edit dashboard">
|
||||
<svg class="logout-button" stroke="var(--color-text-subdue)" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.832 19.82a4.5 4.5 0 0 1-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 0 1 1.13-1.897L16.863 4.487Zm0 0L19.5 7.125" />
|
||||
</svg>
|
||||
</a>
|
||||
{{- end }}
|
||||
{{- if .App.RequiresAuth }}
|
||||
<a class="block self-center" href="{{ .App.Config.Server.BaseURL }}/logout" title="Logout">
|
||||
<svg class="logout-button" stroke="var(--color-text-subdue)" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5">
|
||||
@@ -92,6 +99,15 @@
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
{{ if or .App.RequiresAuth .App.Config.Admin.AllowWithoutAuth }}
|
||||
<a href="{{ .App.Config.Server.BaseURL }}/edit" class="flex justify-between items-center">
|
||||
<div class="size-h3">Edit dashboard</div>
|
||||
<svg class="ui-icon" stroke="var(--color-text-subdue)" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.832 19.82a4.5 4.5 0 0 1-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 0 1 1.13-1.897L16.863 4.487Zm0 0L19.5 7.125" />
|
||||
</svg>
|
||||
</a>
|
||||
{{ end }}
|
||||
|
||||
{{ if .App.RequiresAuth }}
|
||||
<a href="{{ .App.Config.Server.BaseURL }}/logout" class="flex justify-between items-center">
|
||||
<div class="size-h3">Logout</div>
|
||||
|
||||
Reference in New Issue
Block a user