v0.4.0 release prep: README refresh + new wiki screenshots (Ref #160)

README.md

@@ -1,7 +1,7 @@
 # Palette
 
 Palette is a fast, self-hosted pastebin. One Go binary, a SQLite database, and
-a web UI for sharing text and small files
+a web UI for sharing text and small files.
 
 > [!NOTE]
 > <table><tr><td>
@@ -10,22 +10,27 @@ a web UI for sharing text and small files
 
 ## Features
 
-- Multiple files in one paste
+- Text pastes and cans (multiple items in one share)
+- File attachments (one file per paste, up to 25 MB)
 - Password protected pastes
-- Expir after a specified time
+- Expire after a specified time
 - Burn after a number of views
 - Custom URLs
 - Syntax highlighting with language auto-detection (go-enry)
-- Local cookie based submission history
+- Public paste listing with search, sort and pagination
-- Cookie based settings
+- Cookie based saved pastes and settings
-- Themes!
+- Five base themes (midnight, smooth, pastel-lavender, pastel-peach, pastel-cloud), each with a dark and light variant
+- Dark mode toggle in the topbar and settings, with a configurable default
 
 ## Screenshots
 
 | | |
 |---|---|
-| ![Editor in midnight](https://git.archfox.org/poslop/palette/wiki/raw/palette-previews%2Fmidnight-new.png) | ![Paste view in pastel-peach](https://git.archfox.org/poslop/palette/wiki/raw/palette-previews%2Fpastel-peach-paste.png) |
+| ![Editor in midnight (dark)](https://git.archfox.org/poslop/palette/wiki/raw/palette-previews%2Fdesktop-editor-new.png) | ![Paste view in pastel-peach (light)](https://git.archfox.org/poslop/palette/wiki/raw/palette-previews%2Fdesktop-paste-pastel-peach-light.png) |
-| ![History in pastel-lavender](https://git.archfox.org/poslop/palette/wiki/raw/palette-previews%2Fpastel-lavender-history.png) | ![Saved in pastel-cloud](https://git.archfox.org/poslop/palette/wiki/raw/palette-previews%2Fpastel-cloud-mine.png) |
+| ![Paste view in midnight (dark)](https://git.archfox.org/poslop/palette/wiki/raw/palette-previews%2Fdesktop-paste-midnight-dark.png) | ![Settings and theme picker](https://git.archfox.org/poslop/palette/wiki/raw/palette-previews%2Fdesktop-settings-themes.png) |
+| ![Public pastes list](https://git.archfox.org/poslop/palette/wiki/raw/palette-previews%2Fdesktop-public.png) | ![Editor at mobile width](https://git.archfox.org/poslop/palette/wiki/raw/palette-previews%2Fmobile-editor-new.png) |
+
+Mobile previews (375x812): [paste view](https://git.archfox.org/poslop/palette/wiki/raw/palette-previews%2Fmobile-paste-midnight-dark.png), [public list](https://git.archfox.org/poslop/palette/wiki/raw/palette-previews%2Fmobile-public.png), [settings](https://git.archfox.org/poslop/palette/wiki/raw/palette-previews%2Fmobile-settings.png).
 
 ## Get Started
 
@@ -64,9 +69,10 @@ go build -o palette ./cmd/palette
 | `PALETTE_MAX_ITEM` | `26214400` | Max can item size in bytes (25 MB) |
 | `PALETTE_ADMIN_KEY` | generated | Admin key; if unset a 32-char hex key is generated and persisted to `<db-dir>/admin-key` (0600) |
 | `PALETTE_DEFAULT_DARK` | dark on | Default dark mode for new visitors. Set `false`, `0`, or `off` to default to light mode. Visitors who toggle dark mode keep their choice in their browser. |
+| `PALETTE_UNLOCK_SECRET` | random per start | HMAC secret for password-unlock cookies. Set a fixed value to keep unlock sessions across restarts or across replicas. |
 
 An `/admin` page exists for runtime settings, protected by a key set at
-install (`PALETTE_ADMIN_KEY` env var) and resettable locally — see
+install (`PALETTE_ADMIN_KEY` env var) and resettable locally. See
 [API](https://git.archfox.org/poslop/palette/wiki/API) and the [design docs](https://git.archfox.org/poslop/palette/wiki/Home) in the wiki for details.
 
 ## API

internal/web/static/app.css

@@ -440,8 +440,10 @@ td a.slug.paste-name { background: none; padding: 0; border-radius: 0; font-fami
 /* submenu number boxes (#157): styled number inputs + unit selects,
    padded + indented to line up with parent option labels */
 .submenu {
-  margin: 6px 0 4px 8px;
+  /* #240: indent the box under the parent option LABEL text (8px row padding
-  padding: 8px 10px;
+     + 16px control + 8px gap = 32px), and match the row control padding rhythm */
+  margin: 4px 0 4px 32px;
+  padding: 6px 10px;
   background: var(--bg);
   border: 1px solid var(--border);
   border-radius: var(--radius);

internal/web/static/new.js

@@ -307,21 +307,19 @@ function setAttachedFile(file) {
   attachedFile = file;
   renderFileChip();
   setHidden('file-text-note', false);
-  // #171/#184: title auto-fill — images take the file name; text files
+  // #233: title auto-fill — the file's own name always wins when the
-  // use the language-placeholder convention (e.g. Python.py, fallback
+  // title is still blank; fallback is date.fileextension (e.g.
-  // Text.txt). Only when the title is still blank; never overwrite a
+  // 2026-09-10.txt) when the name is missing or unusable. Never
-  // typed title.
+  // overwrite a typed title.
   if (!$('title').value.trim()) {
-    if (IMAGE_RE.test(file.type)) {
+    const raw = (file.name || '').trim();
-      $('title').value = file.name;
+    if (raw) {
+      $('title').value = raw;
     } else {
-      const lang = LANG_BY_EXT[extOf(file.name)];
+      const d = new Date();
-      if (lang) {
+      const iso = d.getFullYear() + '-' + String(d.getMonth() + 1).padStart(2, '0') + '-' + String(d.getDate()).padStart(2, '0');
-        const fn = defaultFilename(lang);
+      const ext = extOf(raw || file.name);
-        if (fn) $('title').value = fn;
+      $('title').value = ext ? iso + '.' + ext : iso;
-      } else if (TEXT_EXTS.has(extOf(file.name))) {
-        $('title').value = defaultFilename('text') || 'Text.txt';
-      }
     }
   }
   showFileInEditor(file);

internal/web/static/paste.js

@@ -16,17 +16,25 @@ function toggleStats() {
   pill.classList.toggle('open', open);
   btn.setAttribute('aria-expanded', open ? 'true' : 'false');
 }
-function copyContent(btn) {
+function copyFeedback(btn) {
-  navigator.clipboard.writeText(document.getElementById('raw-content').value);
+  if (!btn) return;
-  // in-place success feedback (#53)
+  if (!btn.dataset.label) btn.dataset.label = btn.textContent; // remember the original label (Copy/Link)
-  if (btn) {
   btn.classList.add('ok');
   btn.textContent = 'Success!';
   clearTimeout(btn._okh);
-    btn._okh = setTimeout(() => { btn.classList.remove('ok'); btn.textContent = 'copy'; }, 2000);
+  btn._okh = setTimeout(() => { btn.classList.remove('ok'); btn.textContent = btn.dataset.label; }, 2000);
-  } else {
+}
-    toast('Link Copied', 'success');
+function copyContent(btn) {
-  }
+  navigator.clipboard.writeText(document.getElementById('raw-content').value)
+    .then(() => copyFeedback(btn))
+    .catch(() => toast('Copy failed'));
+}
+// #243: copy the paste LINK (full URL), not the paste id or content
+function copyLink(btn) {
+  const url = location.origin + location.pathname;
+  navigator.clipboard.writeText(url)
+    .then(() => copyFeedback(btn))
+    .catch(() => toast('Copy failed'));
 }
 function redeem() {
   if (!confirm('Hard delete this paste immediately?')) return;
@@ -41,6 +49,8 @@ function redeem() {
 var PASTE_ID = document.currentScript.getAttribute('data-paste-id');
 var copyBtn = document.getElementById('copy-btn');
 if (copyBtn) copyBtn.addEventListener('click', function (e) { e.preventDefault(); copyContent(copyBtn); });
+var copyLinkBtn = document.getElementById('copy-link-btn');
+if (copyLinkBtn) copyLinkBtn.addEventListener('click', function (e) { e.preventDefault(); copyLink(copyLinkBtn); });
 var delBtn = document.getElementById('delete-btn');
 
 // #168: show the compact paste-created pill in the bottom corner, then fade it out

internal/web/templates/new.html

@@ -19,7 +19,7 @@
           <option>markdown</option><option>text</option>
         </select>
         <button class="btn btn-icon" id="reguess" title="Re-detect language" type="button"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 12a9 9 0 1 1-2.64-6.36"/><polyline points="21 3 21 9 15 9"/></svg></button>
-        <button type="button" class="btn btn-icon wrap-toggle" id="wrap-toggle" title="Toggle line wrap" aria-pressed="false">wrap</button>
+        <button type="button" class="btn btn-icon wrap-toggle" id="wrap-toggle" title="Toggle line wrap" aria-pressed="false">Wrap</button>
         </div>
       </div>
     </div>

internal/web/templates/paste.html

@@ -6,10 +6,11 @@
       <h1>{{if .Title}}{{.Title}}{{else}}Untitled paste{{end}}</h1>
       {{if .CustomSlug}}<span class="slug">/{{.CustomSlug}}</span>{{end}}
       <div class="spacer"></div>
-      <button type="button" class="iconbtn wrap-toggle" title="Toggle line wrap" aria-pressed="false">wrap</button>
+      <button type="button" class="iconbtn wrap-toggle" title="Toggle line wrap" aria-pressed="false">Wrap</button>
-      <a class="iconbtn" href="/raw/{{.ID}}">raw</a>
+      <a class="iconbtn" href="/raw/{{.ID}}">Raw</a>
-      <a class="iconbtn" href="#" id="copy-btn">copy</a>
+      <a class="iconbtn" href="#" id="copy-link-btn">Link</a>
-      {{if .DeletionToken}}<a class="iconbtn danger" href="#" id="delete-btn">delete</a>{{end}}
+      <a class="iconbtn" href="#" id="copy-btn">Copy</a>
+      {{if .DeletionToken}}<a class="iconbtn danger" href="#" id="delete-btn">Delete</a>{{end}}
     </div>
   </div>
   <div class="float">