From 5fc5ae8aadabb61c025b71d899c9d3c433071c0e Mon Sep 17 00:00:00 2001
From: fen <fen@archfox.org>
Date: Thu, 10 Sep 2026 10:13:42 -0500
Subject: [PATCH 1/2] editor head: wrap toggle state and pill highlight (#166)

wrap button on the new paste page looked identical whether wrap was on
or off because the btn base is already accent filled. give the toggle a
neutral off state so the accent on state is visible, matching the icon
button toggles on the paste view.

also remove the accent border on the whole language settings pill when
any child has focus. individual controls already show their own focus
rings, so the pill highlight made no sense.
---
 internal/web/static/app.css | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/internal/web/static/app.css b/internal/web/static/app.css
index 98b9b7e..2c5b7fe 100644
--- a/internal/web/static/app.css
+++ b/internal/web/static/app.css
@@ -150,8 +150,7 @@ body {
 }
 .editor-head-title { flex: 1; min-width: 0; }
 .editor-head-settings { flex: 0 0 fit-content; }
-.editor-head-title:focus-within,
-.editor-head-settings:focus-within { border-color: var(--accent); }
+.editor-head-title:focus-within { border-color: var(--accent); }
 .editor-head input {
   border: none; outline: none; background: transparent; color: var(--fg); font: inherit; font-size: 23.2px; flex: 1;
 }
@@ -266,6 +265,10 @@ body {
 .theme-name { font-weight: 600; }
 .iconbtn:hover { color: var(--fg); border-color: var(--muted); }
 /* #130: line wrap toggle, accent when active like other toggles */
+/* #166: wrap toggle must show its state: neutral when off, accent when on.
+   The .btn base is accent filled, which made on and off look identical. */
+.btn-icon.wrap-toggle { background: var(--surface-2); color: var(--muted-fg); font-size: 21.6px; font-weight: inherit; border: 1px solid var(--border); }
+.btn-icon.wrap-toggle:hover { color: var(--fg); border-color: var(--muted-fg); filter: none; }
 .iconbtn.wrap-toggle[aria-pressed="true"],
 .btn-icon.wrap-toggle[aria-pressed="true"] { background: var(--accent); color: var(--bg); border-color: var(--accent); }
 /* #152: wrap ON must break long unbroken tokens mid-word and allow no horizontal scrolling */

From 3fa2c93e2260ae57122aa680041d91116ff96e5c Mon Sep 17 00:00:00 2001
From: fen <fen@archfox.org>
Date: Thu, 10 Sep 2026 11:18:57 -0500
Subject: [PATCH 2/2] clean up notification pill wording, size, and placement
 (#168)

---
 internal/web/static/app.css       | 8 ++++----
 internal/web/templates/paste.html | 4 ++--
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/internal/web/static/app.css b/internal/web/static/app.css
index ca6e412..6f7b1ae 100644
--- a/internal/web/static/app.css
+++ b/internal/web/static/app.css
@@ -383,15 +383,15 @@ td a.slug.paste-name { background: none; padding: 0; border-radius: 0; font-fami
 }
 .seg input, .toggle input { accent-color: var(--accent); width: 16px; height: 16px; margin: 0; }
 
-/* toast (#19) */
+/* toast (#19, #168): small pill anchored to the corner, out of content flow */
 .toast {
-  position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%) translateY(8px);
+  position: fixed; right: 16px; bottom: 16px;
   background: var(--surface-2); color: var(--fg); border: 1px solid var(--border);
-  border-radius: var(--radius-sm); padding: 6px 18px; font-size: 20.7px;
+  border-radius: var(--radius-sm); padding: 6px 12px; font-size: 13px;
   opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s ease; z-index: 200;
   box-shadow: 0 4px 16px rgba(0,0,0,.25);
 }
-.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
+.toast.show { opacity: 1; transform: translateY(0); }
 /* status variants (#16) */
 .toast.success { border-color: var(--ok); color: var(--ok); }
 .toast.error { border-color: var(--err); color: var(--err); }
diff --git a/internal/web/templates/paste.html b/internal/web/templates/paste.html
index 6040efb..48fc6ad 100644
--- a/internal/web/templates/paste.html
+++ b/internal/web/templates/paste.html
@@ -36,8 +36,8 @@
   {{if .JustCreated}}
   <div class="float">
     <div class="created-banner">
-      Paste created. Link copied to clipboard: <a href="/{{.ID}}">{{.Host}}/{{.ID}}</a>
-      {{if .DeletionToken}} · deletion token: <code>{{.DeletionToken}}</code>{{end}}
+      Paste Created. Link Copied.
+      {{if .DeletionToken}} · deletion token: <code class="created-token">{{.DeletionToken}}</code>{{end}}
     </div>
   </div>
   {{end}}