From 4a6f987bf7f9d73e9dd33d225fd2d73e9bf69a88 Mon Sep 17 00:00:00 2001
From: grm <grm@eyesin.space>
Date: Wed, 16 Sep 2026 19:10:13 +0300
Subject: Merge the Layout and Design tabs into one form with a single Save

The look and the layout of a blog were split over two tabs that cross-linked
each other, and the Layout tab saved every toggle, move and add straight
away through a dozen tiny forms. Now one Design tab holds it all, organised
by part of the blog (colours & fonts, header, menu, content, side columns,
footer, logo & icon) behind a sticky side index, and one Save stores the
theme, every module and the menu atomically (BlogStore.SaveDesign). Module
settings are edited inline; Discard changes throws the edits away; a
validation error shows the form again exactly as it was sent.

The image pickers no longer render the whole library four times over: a
select of the newest images, and a script-driven panel that fetches the
library page by page (GET /files as JSON) with lazy thumbnails.

New options: posts per page, site title size, footer alignment.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Sd8UPWrvyYCLj97JexNw3A
---
 internal/web/templates/dashboard/layout.html | 113 ---------------------------
 1 file changed, 113 deletions(-)
 delete mode 100644 internal/web/templates/dashboard/layout.html

(limited to 'internal/web/templates/dashboard/layout.html')

diff --git a/internal/web/templates/dashboard/layout.html b/internal/web/templates/dashboard/layout.html
deleted file mode 100644
index 5c9332a..0000000
--- a/internal/web/templates/dashboard/layout.html
+++ /dev/null
@@ -1,113 +0,0 @@
-{{define "title"}}{{t "Layout"}} · {{.Blog.Title}}{{end}}
-{{define "content"}}
-{{$t := .Data.theme}}
-{{$u := print "/b/" .Blog.Subdomain "/layout"}}
-<div class="pagehead">
-  <h1>{{t "Layout"}}</h1>
-  <p class="lead muted">{{t "Decide what goes where on your blog. Every change here is saved straight away; refresh"}} <a href="{{.BlogURL}}" target="_blank">{{t "your blog"}} &#8599;</a> {{t "to see it."}} {{t "Colours and fonts are on the"}} <a href="/b/{{.Blog.Subdomain}}/design">{{t "Design"}}</a> {{t "tab."}}</p>
-</div>
-<p class="jumps"><a href="#columns">{{t "Columns"}}</a><a href="#header">{{t "Header"}}</a><a href="#left">{{t "Left column"}}</a><a href="#main">{{t "Main content"}}</a><a href="#right">{{t "Right column"}}</a><a href="#footer">{{t "Footer"}}</a><a href="#menu">{{t "Menu"}}</a></p>
-
-<div class="card" id="columns">
-  <h2>{{t "Columns"}}</h2>
-  <div class="lay">
-    <div class="lay-row lay-header{{if not $t.HeaderOn}} off{{end}}">{{t "Header"}}{{if not $t.HeaderOn}} ({{t "hidden"}}){{end}}</div>
-    <div class="lay-cols">
-      <div class="lay-col lay-side{{if not $t.LeftOn}} off{{end}}{{if not (index .Data.areas "left")}} empty{{end}}" style="width:{{$t.LeftWidth}}%">{{t "Left"}} {{$t.LeftWidth}}%</div>
-      <div class="lay-col lay-main" style="width:{{$t.MainWidth}}%">{{t "Main content"}} {{$t.MainWidth}}%</div>
-      <div class="lay-col lay-side{{if not $t.RightOn}} off{{end}}{{if not (index .Data.areas "right")}} empty{{end}}" style="width:{{$t.RightWidth}}%">{{t "Right"}} {{$t.RightWidth}}%</div>
-    </div>
-    <div class="lay-row lay-footer{{if not $t.FooterOn}} off{{end}}">{{t "Footer"}}{{if not $t.FooterOn}} ({{t "hidden"}}){{end}}</div>
-  </div>
-  <form method="post" action="{{$u}}/widths">
-    <input type="hidden" name="_csrf" value="{{.CSRF}}">
-    <div class="row">
-      <label>{{t "Left column width"}}<br><input type="number" name="left_width" value="{{$t.LeftWidth}}" min="15" max="40" step="5"> %</label>
-      <label>{{t "Right column width"}}<br><input type="number" name="right_width" value="{{$t.RightWidth}}" min="15" max="40" step="5"> %</label>
-    </div>
-    <p class="muted small">{{t "Between 15% and 40% each; the main content takes the rest. A column only appears when it has at least one module; without columns the posts take the whole width. On phones the columns stack: main content first, then the left and right columns, then the footer."}}</p>
-    <label class="check"><input type="checkbox" name="keep_columns"{{if $t.KeepColumns}} checked{{end}}> {{t "Always keep the columns' space, even when a column is empty or hidden"}} <span class="muted">({{t "the main content then keeps its width and stays centred"}})</span></label>
-    <p class="actionrow"><button type="submit">{{t "Save columns"}}</button></p>
-  </form>
-</div>
-
-{{template "area" (dict "area" "header" "root" . "hint" (t "The top of every page. Stack the title, a logo and the menu in the order you like. A banner image can be chosen on the Design tab."))}}
-{{template "area" (dict "area" "left" "root" . "hint" (t "A narrow column beside your posts. Good for the menu, an archive or recent posts."))}}
-
-<div class="card" id="main">
-  <div class="cardhead"><h2>{{t "Main content"}}</h2></div>
-  <p class="muted small">{{t "Your posts and pages always show here. You can add your own HTML before and after them — an intro box, a newsletter form, a badge…"}}</p>
-  <table class="modules">
-    {{range $area := .Data.areaOrder}}{{$mods := index $.Data.areas $area}}
-    <tr><th>{{t (index $.Data.areaNames $area)}}</th>
-      {{if $mods}}{{$m := index $mods 0}}
-      <td>{{t (index $.Data.names $m.Kind)}}{{with modsummary $m}} <span class="muted">— {{.}}</span>{{end}}</td>
-      <td class="nowrap actions"><a href="{{$u}}/modules/{{$m.ID}}/edit">{{t "edit"}}</a> <a class="danger" href="{{$u}}/modules/{{$m.ID}}/delete">{{t "remove"}}</a></td>
-      {{else}}
-      <td class="muted">{{t "Nothing extra."}}</td>
-      <td class="nowrap actions"><form method="post" action="{{$u}}/areas/{{$area}}/add" class="inline"><input type="hidden" name="_csrf" value="{{$.CSRF}}"><input type="hidden" name="kind" value="html"><button class="mini">+ {{t "Add custom HTML"}}</button></form></td>
-      {{end}}
-    </tr>{{end}}
-  </table>
-</div>
-
-{{template "area" (dict "area" "right" "root" . "hint" (t "A narrow column on the other side of your posts. Same choices as the left one."))}}
-{{template "area" (dict "area" "footer" "root" . "hint" (t "The bottom of every page: a copyright line, the RSS link, a list of your pages."))}}
-
-<div class="card" id="menu">
-  <h2>{{t "Menu"}}</h2>
-  <p class="muted small">{{t "The links the Menu module shows, wherever you place it. Pages and outside links can be mixed in any order. Ticking “Show in menu” on a page does the same as adding it here."}}</p>
-  {{if .Data.menu}}<table class="modules">
-    {{range .Data.menu}}<tr>
-      <td class="nowrap order">
-        <form method="post" action="{{$u}}/menu/{{.ID}}/move" class="inline"><input type="hidden" name="_csrf" value="{{$.CSRF}}"><input type="hidden" name="dir" value="up"><button class="mini" title="{{t "Move up"}}">&#9650;</button></form>
-        <form method="post" action="{{$u}}/menu/{{.ID}}/move" class="inline"><input type="hidden" name="_csrf" value="{{$.CSRF}}"><input type="hidden" name="dir" value="down"><button class="mini" title="{{t "Move down"}}">&#9660;</button></form>
-      </td>
-      <td>{{.Text}} {{if .PageID}}<span class="tag">{{t "page"}}</span>{{else}}<span class="tag">{{t "link"}}</span> <span class="muted small">{{.URL}}</span>{{end}}</td>
-      <td class="nowrap actions"><form method="post" action="{{$u}}/menu/{{.ID}}/delete" class="inline"><input type="hidden" name="_csrf" value="{{$.CSRF}}"><button class="mini danger">{{t "Remove"}}</button></form></td>
-    </tr>{{end}}
-  </table>{{else}}<p class="muted">{{t "The menu is empty."}}</p>{{end}}
-  <div class="cols addrow">
-    <form method="post" action="{{$u}}/menu/add-page" class="add">
-      <input type="hidden" name="_csrf" value="{{.CSRF}}">
-      <h3>{{t "Add a page"}}</h3>
-      {{if .Data.freePages}}<label>{{t "Page"}}<br><select name="page">{{range .Data.freePages}}<option value="{{.ID}}">{{.Title}}</option>{{end}}</select></label>
-      <button type="submit" class="secondary">{{t "Add page"}}</button>
-      {{else}}<p class="muted small">{{t "Every page is already in the menu."}}</p>{{end}}
-    </form>
-    <form method="post" action="{{$u}}/menu/add-link" class="add">
-      <input type="hidden" name="_csrf" value="{{.CSRF}}">
-      <h3>{{t "Add a link"}}</h3>
-      <label>{{t "Text"}}<br><input name="label" maxlength="60" placeholder="{{t "My photos"}}"></label>
-      <label>{{t "Address"}}<br><input name="url" maxlength="500" placeholder="https://example.org"></label>
-      <button type="submit" class="secondary">{{t "Add link"}}</button>
-    </form>
-  </div>
-</div>
-{{end}}
-
-{{/* One area card: on/off switch, its modules in order, and an "add" form. */}}
-{{define "area"}}{{$r := .root}}{{$area := .area}}{{$u := print "/b/" $r.Blog.Subdomain "/layout"}}{{$on := $r.Data.theme.AreaOn $area}}{{$mods := index $r.Data.areas $area}}
-<div class="card{{if not $on}} area-off{{end}}" id="{{$area}}">
-  <div class="cardhead">
-    <h2>{{t (index $r.Data.areaNames $area)}}{{if not $on}} <span class="tag off">{{t "hidden"}}</span>{{end}}</h2>
-    <form method="post" action="{{$u}}/areas/{{$area}}/toggle" class="inline switch"><input type="hidden" name="_csrf" value="{{$r.CSRF}}"><button class="mini">{{if $on}}{{t "Hide this area"}}{{else}}{{t "Show this area"}}{{end}}</button></form>
-  </div>
-  <p class="muted small">{{.hint}}</p>
-  {{if $mods}}<table class="modules">
-    {{range $mods}}<tr>
-      <td class="nowrap order">
-        <form method="post" action="{{$u}}/modules/{{.ID}}/move" class="inline"><input type="hidden" name="_csrf" value="{{$r.CSRF}}"><input type="hidden" name="dir" value="up"><button class="mini" title="{{t "Move up"}}">&#9650;</button></form>
-        <form method="post" action="{{$u}}/modules/{{.ID}}/move" class="inline"><input type="hidden" name="_csrf" value="{{$r.CSRF}}"><input type="hidden" name="dir" value="down"><button class="mini" title="{{t "Move down"}}">&#9660;</button></form>
-      </td>
-      <td>{{t (index $r.Data.names .Kind)}}{{with modsummary .}} <span class="muted">— {{.}}</span>{{end}}
-        {{if and (eq .Kind "logo") (not $r.Data.theme.Logo)}}<span class="tag off">{{t "no logo chosen"}}</span> <span class="muted small">{{t "pick one on the"}} <a href="/b/{{$r.Blog.Subdomain}}/design#logo">{{t "Design"}}</a> {{t "tab."}}</span>{{end}}</td>
-      <td class="nowrap actions">{{if modsettings .}}<a href="{{$u}}/modules/{{.ID}}/edit">{{t "edit"}}</a> {{end}}<a class="danger" href="{{$u}}/modules/{{.ID}}/delete">{{t "remove"}}</a></td>
-    </tr>{{end}}
-  </table>{{else}}<p class="muted">{{if ne $area "header"}}{{t "Nothing here yet — this area is not shown until you add a module."}}{{else}}{{t "Nothing here yet."}}{{end}}</p>{{end}}
-  <form method="post" action="{{$u}}/areas/{{$area}}/add" class="addmod">
-    <input type="hidden" name="_csrf" value="{{$r.CSRF}}">
-    <label>{{t "Add a module"}}<br><select name="kind">{{range index $r.Data.kinds $area}}<option value="{{.}}">{{t (index $r.Data.names .)}}</option>{{end}}</select></label>
-    <button type="submit" class="secondary">{{t "Add"}}</button>
-  </form>
-</div>{{end}}
-- 
cgit v1.2.3