From 7dc70d62f6ac2bde8c70bcceda4ce72fbfb1195a Mon Sep 17 00:00:00 2001
From: fen <fen@archfox.org>
Date: Wed, 9 Sep 2026 22:56:53 -0500
Subject: [PATCH] Fix #146: render untitled paste ID fallback as plain text
 like titled pastes

The PASTE column fallback for untitled pastes used the .slug class, which
renders as a monospace chip with a background pill. Give it a dedicated
paste-name modifier that strips the chip styling (background, padding,
radius, mono font) so the fallback looks identical to a titled paste
(var(--fg) plain text). The dedicated ID column and URL column chips keep
their existing styling. Applied to both /history and /mine tables.
---
 internal/web/static/app.css         | 2 ++
 internal/web/templates/history.html | 2 +-
 internal/web/templates/mine.html    | 2 +-
 3 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/internal/web/static/app.css b/internal/web/static/app.css
index d8dff25..26449c4 100644
--- a/internal/web/static/app.css
+++ b/internal/web/static/app.css
@@ -285,6 +285,8 @@ tr.row:hover td { background: var(--surface-2); }
 tr.row:hover td a.slug { color: var(--accent); }
 td a.slug { font-family: var(--font-mono); font-size: 21.6px; color: var(--fg); text-decoration: none; }
 td a.slug:hover { color: var(--accent); }
+/* PASTE column fallback for untitled pastes: plain text, identical to a titled paste. URL/ID chips keep .slug styling. */
+td a.slug.paste-name { background: none; padding: 0; border-radius: 0; font-family: inherit; font-size: inherit; color: var(--fg); }
 .badge { font-size: 18.9px; border: 1px solid var(--border); color: var(--muted-fg); border-radius: var(--radius-sm); padding: 1px 8px; }
 .badge.lock { color: var(--accent); border-color: var(--accent); }
 .dim { color: var(--muted-fg); white-space: nowrap; }
diff --git a/internal/web/templates/history.html b/internal/web/templates/history.html
index b6018d0..fcb667f 100644
--- a/internal/web/templates/history.html
+++ b/internal/web/templates/history.html
@@ -37,7 +37,7 @@ const t = PaletteTable.init({
     `<tr class="row" data-href="/${t.esc(it.id)}"><td>` +
     (it.title
       ? `${t.esc(it.title)}${it.is_can ? ' <span class="badge" title="Can — bundle of items">can</span>' : ''}`
-      : `<a class="slug" href="/${t.esc(it.id)}">${t.esc(it.id)}</a>${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 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>` +
diff --git a/internal/web/templates/mine.html b/internal/web/templates/mine.html
index f5def5b..2d7ec02 100644
--- a/internal/web/templates/mine.html
+++ b/internal/web/templates/mine.html
@@ -48,7 +48,7 @@ const t = PaletteTable.init({
     `<tr class="row" data-href="/${t.esc(it.id)}"><td>` +
     (it.title
       ? `${t.esc(it.title)}${it.is_can ? ' <span class="badge" title="Can — bundle of items">can</span>' : ''}`
-      : `<a class="slug" href="/${t.esc(it.id)}">${t.esc(it.id)}</a>${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 class="dim">${t.fmtSize(it.size)}</td><td class="dim" data-ts="${it.created_at}">${t.ago(it.created_at)}</td>` +