From fda681331ae3de5abee04042caed994954e1b705 Mon Sep 17 00:00:00 2001 From: Adam Soltys Date: Sun, 13 Sep 2026 09:53:45 -0700 Subject: See the post before you post it. MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit A draft is written as plain text but doesn't arrive as plain text: a URL ending in .jpg becomes a picture, a youtu.be link becomes a player, a nostr: reference becomes the note it points at, an npub becomes a name. The only way to find out how yours would land was to send it. The eye beside the paperclip — on the composer and on a reply — opens a preview. It runs the draft through noteBody, the very renderer the feed uses, so this isn't a lookalike of the real thing: it IS the real thing, in a dashed frame with a PREVIEW label so it can never be mistaken for the post itself. It follows the draft live while it's open (and only while it's open — a render per keystroke is not free). Attaching a picture opens it by itself. Showing you what you attached is the answer to the question attaching it raises, and it costs no tap. tools/compose-preview-test.js covers both the composer and a reply: the picture renders rather than sitting there as a URL, the YouTube link becomes a player, the preview tracks typing, and it puts itself away. Co-Authored-By: Claude Opus 5 (1M context) Claude-Session: https://claude.ai/code/session_019mrt228Upn9nNCwGixzSLx --- src/style.css | 13 +++++++++++++ 1 file changed, 13 insertions(+) (limited to 'src/style.css') diff --git a/src/style.css b/src/style.css index c9b4368..fc25801 100644 --- a/src/style.css +++ b/src/style.css @@ -598,6 +598,19 @@ html.no-scroll { overflow: hidden; scrollbar-gutter: auto; } .quote-card.clickable { cursor: pointer; } .quote-card.clickable:hover { border-color: var(--line-strong); } .quote-loading { flex-direction: row; align-items: center; gap: 8px; } +/* What a draft will look like once it's out there. Framed and labelled, so + it can hold real post content — pictures, players, quoted notes — without + ever being mistaken for the post itself. */ +.draft-preview { + border: 1px dashed var(--line-strong); border-radius: 10px; + padding: 10px 12px; background: var(--surface2); + display: flex; flex-direction: column; gap: 6px; +} +.draft-preview-tag { + font-size: 11px; font-weight: 650; letter-spacing: .04em; + text-transform: uppercase; color: var(--faint); +} +.attach-btn.on { color: var(--accent-ink); border-color: var(--accent); } .quote-card .note-text { font-size: 14px; } .quote-name { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .quote-card .note-img { max-height: 220px; } -- cgit v1.2.3