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

- history/mine table column 'Language' -> 'Type' (data-sort key 'type')
- /api/public and /api/mine rows gain a 'type' field: file extension for
  attachment pastes, stored language otherwise (default 'text')
- paste page stats label 'Language' -> 'Type'; summary line uses the same
  label; get-paste JSON gains 'type'
- store list queries LEFT JOIN attachments to expose the filename
- table.js sorting accepts the 'type' key

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/api/attachments.go

@@ -91,6 +91,17 @@ func (l *limitReader) Read(p []byte) (int, error) {
 	return n, err
 }
 
+// isImageMime reports whether the sniffed mime is a raster image the viewer
+// can render inline (#221). SVG is excluded: it is forced to text/plain on
+// serving by the active-content rule and must never render as an image.
+func isImageMime(mime string) bool {
+	switch mime {
+	case "image/png", "image/jpeg", "image/gif", "image/webp":
+		return true
+	}
+	return false
+}
+
 // handleCreatePasteMultipart implements POST /api/pastes with
 // multipart/form-data (#38). Fields mirror the JSON create path; a 'file'
 // part makes the paste a file paste (1 file = 1 paste: if text content is

internal/api/issue235_type_test.go

@@ -0,0 +1,40 @@
+package api
+
+import "testing"
+
+// #235: Type column. Text pastes show the language, attachment pastes show
+// the file extension (lowercase, no dot).
+func TestDisplayType(t *testing.T) {
+	lang := "python"
+	cases := []struct {
+		lang *string
+		att  string
+		want string
+	}{
+		{nil, "", "text"},
+		{&lang, "", "python"},
+		{&lang, "report.pdf", "pdf"},
+		{nil, "photo.PNG", "png"},
+		{&lang, "archive.tar.gz", "gz"},
+		{&lang, "noext", "python"},     // no extension: fall back to language
+		{&lang, ".hidden", "python"},   // dotfile: no extension
+		{&lang, "dir/name.txt", "txt"}, // path component only
+	}
+	for _, c := range cases {
+		if got := displayType(c.lang, c.att); got != c.want {
+			t.Errorf("displayType(%v, %q) = %q, want %q", c.lang, c.att, got, c.want)
+		}
+	}
+}
+
+func TestAttachmentExtName(t *testing.T) {
+	cases := map[string]string{
+		"a.txt": "txt", "A.PNG": "png", "noext": "", ".hidden": "",
+		"x.": "", "dir/b.md": "md", "": "",
+	}
+	for in, want := range cases {
+		if got := attachmentExtName(in); got != want {
+			t.Errorf("attachmentExtName(%q) = %q, want %q", in, got, want)
+		}
+	}
+}

internal/api/server.go

@@ -315,11 +315,26 @@ func (a *apiServer) handleGetPaste(w http.ResponseWriter, r *http.Request) {
 	writeJSON(w, 200, map[string]any{
 		"id": row.ID, "content": row.Content, "content_type": row.ContentType,
 		"language": store.NullStrPtr(row.Language), "title": store.NullStrPtr(row.Title), "created_at": row.CreatedAt,
+		"type":     a.pasteTypeLabel(row),
 		"view_count": row.ViewCount, "visibility": row.Visibility,
 		"reads_remaining": rem,
 	})
 }
 
+// pasteTypeLabel computes the Type value for a single paste (#235): file
+// extension for attachment pastes, else the stored language, else "text".
+func (a *apiServer) pasteTypeLabel(row *store.PasteRow) string {
+	if att, err := a.store.GetAttachmentForPaste(row.ID); err == nil && att != nil {
+		if ext := attachmentExtName(att.Filename); ext != "" {
+			return ext
+		}
+	}
+	if !row.Language.Valid || row.Language.String == "" {
+		return "text"
+	}
+	return row.Language.String
+}
+
 func (a *apiServer) handleDeletePaste(w http.ResponseWriter, r *http.Request) {
 	id := chi.URLParam(r, "id")
 	row, err := a.store.GetPaste(id)
@@ -376,6 +391,33 @@ func (a *apiServer) deletionAuthorized(r *http.Request, row *store.PasteRow) boo
 		row.ViewerID.String != "" && row.ViewerID.String == vid
 }
 
+// displayType returns the Type-column value for a list row (#235): the file
+// extension for attachment pastes, otherwise the detected language (default
+// "text").
+func displayType(lang *string, attFilename string) string {
+	if ext := attachmentExtName(attFilename); ext != "" {
+		return ext
+	}
+	if lang == nil || *lang == "" {
+		return "text"
+	}
+	return *lang
+}
+
+// attachmentExtName returns the lowercase extension (without dot) of a
+// filename, or "" when there is none.
+func attachmentExtName(filename string) string {
+	name := filename
+	if i := strings.LastIndexByte(name, '/'); i >= 0 {
+		name = name[i+1:]
+	}
+	i := strings.LastIndexByte(name, '.')
+	if i <= 0 || i == len(name)-1 {
+		return ""
+	}
+	return strings.ToLower(name[i+1:])
+}
+
 // handleListMine serves /api/mine: pastes created from this browser (#37).
 func (a *apiServer) handleListMine(w http.ResponseWriter, r *http.Request) {
 	vid := currentViewerID(r)
@@ -394,7 +436,7 @@ func (a *apiServer) handleListMine(w http.ResponseWriter, r *http.Request) {
 	for _, row := range rows {
 		lang, title := store.NullStrPtr(row.Language), store.NullStrPtr(row.Title)
 		items = append(items, map[string]any{
-			"id": row.ID, "title": title, "language": lang,
+			"id": row.ID, "title": title, "language": lang, "type": displayType(lang, row.AttFilename),
 			"created_at": row.CreatedAt, "view_count": row.ViewCount, "size": row.Size,
 			"custom_slug": store.NullStrPtr(row.CustomSlug), "visibility": row.Visibility,
 			"is_can": row.IsCan,
@@ -415,7 +457,7 @@ func (a *apiServer) handleListPublic(w http.ResponseWriter, r *http.Request) {
 	for _, row := range rows {
 		lang, title := store.NullStrPtr(row.Language), store.NullStrPtr(row.Title)
 		items = append(items, map[string]any{
-			"id": row.ID, "title": title, "language": lang,
+			"id": row.ID, "title": title, "language": lang, "type": displayType(lang, row.AttFilename),
 			"created_at": row.CreatedAt, "view_count": row.ViewCount, "size": row.Size,
 			"custom_slug": store.NullStrPtr(row.CustomSlug),
 			"is_can":      row.IsCan,
@@ -451,6 +493,22 @@ func (a *apiServer) handleRaw(w http.ResponseWriter, r *http.Request) {
 		http.Error(w, "not found", 404)
 		return
 	}
+	// #221: raw view of an image paste serves the image bytes themselves as
+	// an image, not the (empty) text content.
+	if att, err := a.store.GetAttachmentForPaste(row.ID); err == nil && att != nil && isImageMime(att.Mime) {
+		blobs := a.store.Blobs()
+		if blobs != nil {
+			if blob, err := blobs.Get(row.ID + "/" + att.SHA256); err == nil {
+				defer blob.Close()
+				a.store.IncrementViews(row.ID, "", 0) // raw views always count (#49/#95)
+				w.Header().Set("Content-Type", att.Mime)
+				w.Header().Set("X-Content-Type-Options", "nosniff")
+				w.Header().Set("Content-Length", fmt.Sprintf("%d", att.Size))
+				http.ServeContent(w, r, "", time.Unix(att.CreatedAt, 0), blob)
+				return
+			}
+		}
+	}
 	// #34: content_type is attacker-controlled via the create API. Serving it
 	// verbatim let a paste be stored with text/html (or image/svg+xml) and
 	// render as active content on this origin when fetched from /raw —

internal/store/store.go

@@ -63,6 +63,7 @@ type PasteRow struct {
 	DeletionToken sql.NullString
 	ViewerID      sql.NullString
 	IsCan         bool // set on list rows that are cans (#4)
+	AttFilename   string // attachment filename when the paste is a file paste (#235); empty otherwise
 }
 
 type CanRow struct {
@@ -304,11 +305,12 @@ func (s *Store) GetPaste(idOrSlug string) (*PasteRow, error) {
 // listed, and password-protected pastes are excluded at the query level
 // (#65) so their metadata (title, slug, existence) never leaks.
 func (s *Store) ListPublic(limit, offset int) ([]PasteRow, int, error) {
-	rows, err := s.db.Query(`SELECT id, custom_slug, content_type, language, title, visibility, created_at, view_count, LENGTH(content), 0
+	rows, err := s.db.Query(`SELECT p.id, p.custom_slug, p.content_type, p.language, p.title, p.visibility, p.created_at, p.view_count, LENGTH(p.content), 0, COALESCE(a.filename, '')
-		FROM pastes
+		FROM pastes p
-		WHERE visibility='public' AND deleted_at IS NULL AND can_id IS NULL AND password_hash IS NULL AND (expires_at IS NULL OR expires_at > ?)
+		LEFT JOIN attachments a ON a.paste_id = p.id
+		WHERE p.visibility='public' AND p.deleted_at IS NULL AND p.can_id IS NULL AND p.password_hash IS NULL AND (p.expires_at IS NULL OR p.expires_at > ?)
 		UNION ALL
-		SELECT id, NULL, 'text/plain', NULL, title, visibility, created_at, 0, 0, 1
+		SELECT id, NULL, 'text/plain', NULL, title, visibility, created_at, 0, 0, 1, ''
 		FROM paste_cans
 		WHERE visibility='public' AND deleted_at IS NULL AND (expires_at IS NULL OR expires_at > ?)
 		ORDER BY created_at DESC LIMIT ? OFFSET ?`, time.Now().Unix(), time.Now().Unix(), limit, offset)
@@ -321,7 +323,7 @@ func (s *Store) ListPublic(limit, offset int) ([]PasteRow, int, error) {
 		var r PasteRow
 		var cs, lang, title sql.NullString
 		var isCan int
-		if err := rows.Scan(&r.ID, &cs, &r.ContentType, &lang, &title, &r.Visibility, &r.CreatedAt, &r.ViewCount, &r.Size, &isCan); err != nil {
+		if err := rows.Scan(&r.ID, &cs, &r.ContentType, &lang, &title, &r.Visibility, &r.CreatedAt, &r.ViewCount, &r.Size, &isCan, &r.AttFilename); err != nil {
 			return nil, 0, err
 		}
 		r.CustomSlug = cs
@@ -339,11 +341,12 @@ func (s *Store) ListPublic(limit, offset int) ([]PasteRow, int, error) {
 
 // ListMine lists pastes created from the given viewer id (browser cookie), newest first.
 func (s *Store) ListMine(viewerID string, limit, offset int) ([]PasteRow, int, error) {
-	rows, err := s.db.Query(`SELECT id, custom_slug, language, title, visibility, created_at, view_count, LENGTH(content), 0
+	rows, err := s.db.Query(`SELECT p.id, p.custom_slug, p.language, p.title, p.visibility, p.created_at, p.view_count, LENGTH(p.content), 0, COALESCE(a.filename, '')
-		FROM pastes
+		FROM pastes p
-		WHERE viewer_id = ? AND deleted_at IS NULL AND can_id IS NULL AND (expires_at IS NULL OR expires_at > ?)
+		LEFT JOIN attachments a ON a.paste_id = p.id
+		WHERE p.viewer_id = ? AND p.deleted_at IS NULL AND p.can_id IS NULL AND (p.expires_at IS NULL OR p.expires_at > ?)
 		UNION ALL
-		SELECT id, NULL, NULL, title, visibility, created_at, 0, 0, 1
+		SELECT id, NULL, NULL, title, visibility, created_at, 0, 0, 1, ''
 		FROM paste_cans
 		WHERE viewer_id = ? AND deleted_at IS NULL AND (expires_at IS NULL OR expires_at > ?)
 		ORDER BY created_at DESC LIMIT ? OFFSET ?`, viewerID, time.Now().Unix(), viewerID, time.Now().Unix(), limit, offset)
@@ -356,7 +359,7 @@ func (s *Store) ListMine(viewerID string, limit, offset int) ([]PasteRow, int, e
 		var r PasteRow
 		var cs, lang, title sql.NullString
 		var isCan int
-		if err := rows.Scan(&r.ID, &cs, &lang, &title, &r.Visibility, &r.CreatedAt, &r.ViewCount, &r.Size, &isCan); err != nil {
+		if err := rows.Scan(&r.ID, &cs, &lang, &title, &r.Visibility, &r.CreatedAt, &r.ViewCount, &r.Size, &isCan, &r.AttFilename); err != nil {
 			return nil, 0, err
 		}
 		r.CustomSlug, r.Language, r.Title = cs, lang, title

internal/web/static/app.css

@@ -216,7 +216,10 @@ body {
 .tag { font-size: 19.8px; color: var(--muted-fg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 2px 9px; }
 .paste-title-bar { display: flex; align-items: center; gap: 12px; padding: 12px 18px; flex-wrap: wrap; }
 .paste-title-bar h1 { font-size: 29.2px; font-weight: 600; margin: 0; word-break: normal; overflow-wrap: anywhere; }
-.stats-pill { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
+/* #222: .float already draws the border + radius and clips corners; the pill's own
+   tighter border curve was getting clipped thin at the corners. Let .float be the
+   only border/paint surface for the details pill (collapsed and expanded). */
+.stats-pill { border: 0; border-radius: 0; overflow: hidden; }
 .stats-head { display: flex; align-items: center; gap: 16px; width: 100%; background: none; border: 0; border-bottom: 1px solid var(--border); color: var(--muted-fg); font: inherit; font-size: 21.6px; padding: 14px 18px; cursor: pointer; text-align: left; }
 .stats-head:hover { color: var(--fg); background: var(--surface-2); }
 .stats-chev { width: 18px; height: 18px; flex: none; transition: transform 0.15s ease; }
@@ -432,13 +435,15 @@ td a.slug.paste-name { background: none; padding: 0; border-radius: 0; font-fami
 
 /* protection section rhythm (#20) */
 .protect { display: flex; flex-direction: column; gap: 2px; }
-.protect .pw-row { padding: 2px 8px 4px; }
+.protect .pw-row:not(.submenu) { padding: 2px 8px 4px; }
 
 /* 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);
@@ -809,16 +814,54 @@ button[type="submit"]:focus-visible,
   font-size: 22px; padding: 0 4px; border-radius: var(--radius-sm);
 }
 .file-chip .file-chip-remove:hover { color: var(--danger, #c0392b); }
-.attachment-bar { display: flex; flex-direction: column; gap: 10px; }
+.attachment-bar { display: flex; flex-direction: column; gap: 10px; padding: 12px; }
-.attachment-chip {
+/* #221: the link pill under an image preview stays a small inline chip,
+   left-aligned under the image, not stretched above it. */
+.attachment-bar .attachment-chip {
   display: inline-flex; align-items: center; gap: 12px; align-self: flex-start;
   border: 1px solid var(--border); border-radius: var(--radius);
-  padding: 8px 16px; text-decoration: none; color: var(--fg);
+  padding: 6px 14px; text-decoration: none; color: var(--fg);
-  background: var(--surface-2); font-size: 21.6px;
+  background: var(--surface-2); font-size: 19px;
+}
+.attachment-bar .attachment-chip:hover { border-color: var(--accent); }
+.attachment-bar .attachment-chip .attachment-name {
+  min-width: 0;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+/* #232: long filenames are truncated but the pill stays a reasonable
+   width; on narrow viewports it shrinks to the container instead of
+   overflowing the card. */
+.attachment-bar .attachment-chip {
+  max-width: 100%;
+}
+.attachment-bar .attachment-chip .attachment-name:hover {
+  white-space: normal;
+  overflow-wrap: anywhere;
+}
+/* #221: images scale to fit the viewer box, aspect ratio preserved. */
+.attachment-preview {
+  max-width: 100%;
+  align-self: flex-start;
+  /* #229: no inner border/radius of its own; the .float wrapper already
+     frames the pill (inner borders get corner-clipped by overflow:hidden).
+     Padding on .attachment-bar gives the image breathing room from the
+     pill border. */
+  border: 0;
+  border-radius: 0;
+  background: var(--surface-2);
+  overflow: hidden;
+}
+.attachment-preview img {
+  display: block;
+  max-width: 100%;
+  max-height: 70vh;
+  width: auto;
+  height: auto;
+  object-fit: contain;
 }
-.attachment-chip:hover { border-color: var(--accent); }
-.attachment-chip .attachment-size { color: var(--muted-fg); font-size: 19px; }
-.attachment-preview img { max-width: 480px; max-height: 360px; border-radius: var(--radius); border: 1px solid var(--border); }
 
 /* #139: CSP-safe replacements for inline style attributes (style-src 'self') */
 .hidden { display: none; }

internal/web/static/history.js

@@ -9,7 +9,7 @@ const t = PaletteTable.init({
       ? `${t.esc(it.title)}${it.is_can ? ' <span class="badge" title="Can — bundle of items">can</span>' : ''}`
       : `<a class="slug paste-name" href="/${t.esc(it.id)}">${t.esc(it.id)}</a>${it.is_can ? ' <span class="badge" title="Can — bundle of items">can</span>' : ''}`) +
     `</td>` +
-    `<td><span class="badge">${t.esc(it.language || 'text')}</span></td>` +
+    `<td><span class="badge">${t.esc(it.type || it.language || 'text')}</span></td>` +
     `<td class="dim">${t.fmtSize(it.size)}</td><td class="dim">${it.view_count}</td><td class="dim" data-ts="${it.created_at}">${t.ago(it.created_at)}</td>` +
     (it.custom_slug ? `<td><a class="slug url-link" href="/${t.esc(it.custom_slug)}">/${t.esc(it.custom_slug)}</a></td>` : `<td class="dim">none</td>`) +
     `<td class="dim"><a class="id-link" href="/${t.esc(it.id)}">${t.esc(it.id)}</a></td></tr>`,

internal/web/static/mine.js

@@ -21,7 +21,7 @@ const t = PaletteTable.init({
       ? `${t.esc(it.title)}${it.is_can ? ' <span class="badge" title="Can — bundle of items">can</span>' : ''}`
       : `<a class="slug paste-name" href="/${t.esc(it.id)}">${t.esc(it.id)}</a>${it.is_can ? ' <span class="badge" title="Can — bundle of items">can</span>' : ''}`) +
     `</td>` +
-    `<td><span class="badge">${t.esc(it.language || 'text')}</span></td>` +
+    `<td><span class="badge">${t.esc(it.type || it.language || 'text')}</span></td>` +
     `<td class="dim">${t.fmtSize(it.size)}</td><td class="dim" data-ts="${it.created_at}">${t.ago(it.created_at)}</td>` +
     (it.custom_slug ? `<td><a class="slug url-link" href="/${t.esc(it.custom_slug)}">/${t.esc(it.custom_slug)}</a></td>` : `<td class="dim">none</td>`) +
     `<td class="dim"><a class="id-link" href="/${t.esc(it.id)}">${t.esc(it.id)}</a></td>` +

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/static/table.js

@@ -16,7 +16,7 @@ const PaletteTable = (() => {
   const sortVal = (it, k) => {
     let v = it[k];
     if (k === 'title' || k === 'custom_slug') v = (v == null || v === '') ? null : String(v).toLowerCase();
-    if (k === 'language') v = (v == null || v === '') ? 'text' : String(v).toLowerCase();
+    if (k === 'language' || k === 'type') v = (v == null || v === '') ? 'text' : String(v).toLowerCase();
     if (k === 'size' || k === 'view_count' || k === 'created_at') return v == null ? -1 : v;
     return v == null ? null : v;
   };
@@ -104,7 +104,7 @@ const PaletteTable = (() => {
             const btns = [];
             const add = (label, target, o={}) => btns.push(`<button ${o.on?'class="on"':''} ${o.dis?'disabled':''} data-p="${target}">${label}</button>`);
             add('‹', state.page-1, {dis: state.page===1});
-            const win = new Set([1, 2, state.page-1, state.page, state.page+1, filtPages]);
+            const win = new Set([1, state.page-1, state.page, state.page+1, filtPages]);
             let last = 0;
             for (let i = 1; i <= filtPages; i++) {
               if (win.has(i)) {
@@ -121,7 +121,7 @@ const PaletteTable = (() => {
             const btns = [];
             const add = (label, target, o={}) => btns.push(`<button ${o.on?'class="on"':''} ${o.dis?'disabled':''} data-p="${target}">${label}</button>`);
             add('‹', state.page-1, {dis: state.page===1});
-            const win = new Set([1, 2, state.page-1, state.page, state.page+1, pages]);
+            const win = new Set([1, state.page-1, state.page, state.page+1, pages]);
             let last = 0;
             for (let i = 1; i <= pages; i++) {
               if (win.has(i)) {

internal/web/templates/history.html

@@ -11,7 +11,7 @@
       <colgroup><col class="col-a"><col class="col-b"><col class="col-c"><col class="col-d"><col class="col-e"><col class="col-f"><col class="col-g"></colgroup>
       <thead><tr>
         <th data-sort="title" class="sortable">Paste<span class="sort-ind"></span></th>
-        <th data-sort="language" class="sortable">Language<span class="sort-ind"></span></th>
+        <th data-sort="type" class="sortable">Type<span class="sort-ind"></span></th>
         <th data-sort="size" class="sortable">Size<span class="sort-ind"></span></th>
         <th data-sort="view_count" class="sortable">Views<span class="sort-ind"></span></th>
         <th data-sort="created_at" class="sortable">Created<span class="sort-ind"></span></th>

internal/web/templates/mine.html

@@ -11,7 +11,7 @@
       <colgroup><col class="col-a"><col class="col-b"><col class="col-c"><col class="col-d2"><col class="col-e"><col class="col-f"><col class="col-del"></colgroup>
       <thead><tr>
         <th data-sort="title" class="sortable">Paste<span class="sort-ind"></span></th>
-        <th data-sort="language" class="sortable">Language<span class="sort-ind"></span></th>
+        <th data-sort="type" class="sortable">Type<span class="sort-ind"></span></th>
         <th data-sort="size" class="sortable">Size<span class="sort-ind"></span></th>
         <th data-sort="created_at" class="sortable">Created<span class="sort-ind"></span></th>
         <th data-sort="custom_slug" class="sortable">URL<span class="sort-ind"></span></th>

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">
@@ -20,7 +21,7 @@
       </button>
       <div class="stats-body" id="stats-body" hidden>
         <div class="stats-grid">
-          <span class="stats-k">Language</span><span class="stats-v">{{if .Language}}{{.Language}}{{else}}text{{end}}</span>
+          <span class="stats-k">Type</span><span class="stats-v">{{.TypeLabel}}</span>
           <span class="stats-k">Size</span><span class="stats-v">{{.SizeHuman}} ({{.LineCount}} lines)</span>
           <span class="stats-k">Views</span><span class="stats-v">{{.ViewCount}}</span>
           <span class="stats-k">Created</span><span class="stats-v" data-ts="{{.CreatedAtUnix}}">{{.CreatedAgo}}</span>
@@ -39,19 +40,21 @@
   {{if .Attachment}}
   <div class="float">
     <div class="attachment-bar">
+      {{if .AttachmentImage}}
+      <div class="attachment-preview"><img src="/f/{{.Attachment.ID}}/{{.Attachment.Filename}}" alt="{{.Attachment.Filename}}"></div>
+      {{end}}
       <a class="attachment-chip" href="/f/{{.Attachment.ID}}/{{.Attachment.Filename}}" data-mime="{{.Attachment.Mime}}">
         <span class="attachment-name">{{.Attachment.Filename}}</span>
         <span class="attachment-size">{{.Attachment.SizeHuman}}</span>
       </a>
-      {{if or (eq .Attachment.Mime "image/png") (eq .Attachment.Mime "image/jpeg") (eq .Attachment.Mime "image/gif") (eq .Attachment.Mime "image/webp")}}
-      <div class="attachment-preview"><img src="/f/{{.Attachment.ID}}/{{.Attachment.Filename}}" alt="{{.Attachment.Filename}}"></div>
-      {{end}}
     </div>
   </div>
   {{end}}
+  {{if not .AttachmentImage}}
   <div class="float">
     <div class="code" id="code"><div class="gutter" id="gutter">{{.Gutter}}</div><div class="codebody" id="codebody">{{.ContentHTML}}</div></div>
   </div>
+  {{end}}
 </div>
 <input type="hidden" id="raw-content" value="{{.ContentAttr}}">
 <script src="/static/paste.js" defer data-paste-id="{{.ID}}"></script>

internal/web/web.go

@@ -231,6 +231,20 @@ func (h *Handlers) renderPageStatus(w http.ResponseWriter, name string, status i
 	}
 }
 
+// attachmentExt returns the lowercase file extension (without dot) of a
+// filename, or "" when the name has none. Used by the Type display (#235).
+func attachmentExt(filename string) string {
+	name := filename
+	if i := strings.LastIndexByte(name, '/'); i >= 0 {
+		name = name[i+1:]
+	}
+	i := strings.LastIndexByte(name, '.')
+	if i <= 0 || i == len(name)-1 {
+		return ""
+	}
+	return strings.ToLower(name[i+1:])
+}
+
 func (h *Handlers) renderPaste(w http.ResponseWriter, row *store.PasteRow, justCreated bool, deletionToken string, readsRemaining *int) {
 	lines := strings.Count(row.Content, "\n") + 1
 	gutter := ""
@@ -245,27 +259,62 @@ func (h *Handlers) renderPaste(w http.ResponseWriter, row *store.PasteRow, justC
 	if lang == "" {
 		lang = "text"
 	}
-	summary := fmt.Sprintf("%s · %s · %d views · %s", lang, humanSize(len(row.Content)), row.ViewCount, agoString(row.CreatedAt))
 	// #38: one optional file attachment per paste; nil when none.
 	attachment, err := h.Store.GetAttachmentForPaste(row.ID)
 	if err != nil {
 		http.Error(w, "db error", 500)
 		return
 	}
+	// #221: for attachment pastes the stored text content is empty (the file
+	// replaced it), so the summary size must come from the attachment blob,
+	// not len(row.Content), or the summary shows "0 B".
+	summarySize := len(row.Content)
+	if attachment != nil {
+		summarySize = int(attachment.Size)
+	}
+	// #235: column renamed to "Type". Text pastes keep the detected
+	// language; attachment pastes show the file extension instead.
+	attExt := ""
+	typeLabel := lang
+	if attachment != nil {
+		if ext := attachmentExt(attachment.Filename); ext != "" {
+			attExt = ext
+			typeLabel = ext
+		}
+	}
+	summary := fmt.Sprintf("%s · %s · %d views · %s", typeLabel, humanSize(summarySize), row.ViewCount, agoString(row.CreatedAt))
+	// #221: image attachments render the image, not a text/code box. Size
+	// comes from the attachment's actual file size, not the text content.
+	attImage := false
+	if attachment != nil {
+		switch attachment.Mime {
+		case "image/png", "image/jpeg", "image/gif", "image/webp":
+			attImage = true
+		}
+	}
+	sizeHuman := humanSize(len(row.Content))
+	lineCount := lines
+	if attachment != nil {
+		sizeHuman = attachment.SizeHuman
+		lineCount = 1
+	}
 	data := map[string]any{
 		"Page":          "paste",
 		"ID":            row.ID,
 		"Title":         row.Title.String,
-		"Language":      row.Language.String,
+		"Language":      typeLabel,
+		"TypeLabel":     typeLabel,
+		"HasAttachment":  attachment != nil,
+		"AttachmentExt": attExt,
 		"StatsSummary":  summary,
-		"SizeHuman":     humanSize(len(row.Content)),
+		"SizeHuman":     sizeHuman,
 		"HasPassword":   row.PasswordHash.Valid,
 		"BurnAfterRead": row.BurnAfterRead,
 		"CustomSlug":    row.CustomSlug.String,
 		"ContentHTML":   template.HTML(langpkg.HighlightCode(row.Content, row.Language.String)), // safe: HighlightCode escapes all non-span text
 		"ContentAttr":   row.Content,
 		"Gutter":        strings.TrimSuffix(gutter, "\n"),
-		"LineCount":     lines,
+		"LineCount":     lineCount,
 		"SizeBytes":     len(row.Content),
 		"CreatedAgo":    agoString(row.CreatedAt),
 		"CreatedAtUnix": row.CreatedAt,
@@ -279,6 +328,7 @@ func (h *Handlers) renderPaste(w http.ResponseWriter, row *store.PasteRow, justC
 		"ReadsTotal":    int(row.ReadsLimit.Int64),
 		"JustCreated":   justCreated,
 		"Attachment":    attachment,
+		"AttachmentImage": attImage,
 		"Host":          "this host",
 	}
 	h.renderPage(w, "paste.html", data)