woogi/modern-glance
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add in-place dashboard edit mode

Browse Source 
A toggle on the dashboard flips into edit mode where widgets get
drag/edit/delete handles and a "+ Add widget" button per column. Most
edits no longer require touching YAML.

- Drag-drop reorder via SortableJS, persisted through a bulk-layout
  endpoint that rebuilds each column's widgets sequence in the
  yaml.Node tree.
- Inline form dialog driven by per-widget field schemas
  (admin-schemas.go) covering 25 widget types. Surgical updates apply
  changed fields to the widget node so untouched keys and comments
  survive. Falls back to the existing YAML editor for group and
  split-column (those need a recursive nested-widget UI).
- Per-column "+ Add widget" picker that opens the dialog pre-filled
  with sensible defaults for the chosen type.
- Field validation and autocomplete for weather location (Open-Meteo
  geocoding), market symbol (Yahoo Finance), and RSS feed URL
  (gofeed). Network failures soft-pass for weather/markets so the
  save isn't blocked when external APIs are unreachable.
- Picking a market suggestion auto-fills the company name field via
  per-suggestion `extra` fields.
- Edit mode persists across reloads via localStorage so saves don't
  drop the user back into view mode.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
uhlwoogi
2026-04-30 16:51:52 +00:00
co-authored by Claude Opus 4.7
parent 2e198a19b4
commit 4b8a34a2ae
10 changed files with 2347 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
internal/glance/templates/page.html
+17 -2
View File
@@ -4,6 +4,10 @@
{{ define "document-head-after" }}
<script type="module" src='{{ .App.StaticAssetPath "js/page.js" }}'></script>
{{ if or .App.RequiresAuth .App.Config.Admin.AllowWithoutAuth }}
<script src='{{ .App.StaticAssetPath "js/vendor/Sortable.min.js" }}'></script>
<script src='{{ .App.StaticAssetPath "js/edit-mode.js" }}'></script>
{{ end }}
{{ end }}
{{ define "navigation-links" }}
@@ -44,7 +48,12 @@
</div>
{{ end }}
{{- if or .App.RequiresAuth .App.Config.Admin.AllowWithoutAuth }}
<a class="block self-center" href="{{ .App.Config.Server.BaseURL }}/edit" title="Edit dashboard">
<button id="edit-mode-toggle" class="block self-center" title="Toggle edit mode" aria-label="Toggle edit mode">
<svg class="logout-button" stroke="currentColor" 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="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
</svg>
</button>
<a class="block self-center" href="{{ .App.Config.Server.BaseURL }}/edit" title="Open advanced editor">
<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>
@@ -100,8 +109,14 @@
{{ end }}
{{ if or .App.RequiresAuth .App.Config.Admin.AllowWithoutAuth }}
<button id="edit-mode-toggle" class="flex justify-between items-center" style="background:none;border:none;padding:0;width:100%;cursor:pointer;color:inherit;font:inherit;">
<div class="size-h3">Edit mode</div>
<svg class="ui-icon" stroke="currentColor" 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="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
</svg>
</button>
<a href="{{ .App.Config.Server.BaseURL }}/edit" class="flex justify-between items-center">
<div class="size-h3">Edit dashboard</div>
<div class="size-h3">Advanced editor</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>