new: split editor into title bar card, body card, standalone create button

web/static/app.css

@@ -46,16 +46,16 @@ body {
 /* new paste page */
 .deck {
   display: grid; grid-template-columns: 1fr 300px; gap: 16px;
-  padding: 16px 20px; height: calc(100vh - 52px);
+  padding: 16px 20px 20px; height: calc(100vh - 76px);
   max-width: 1400px; margin: 0 auto;
 }
 .pane-r { display: flex; flex-direction: column; gap: 16px; overflow-y: auto; padding-bottom: 4px; }
 .side-section { padding: 14px 16px; flex-shrink: 0; }
 .side-section h3 { font-size: 18.9px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted-fg); margin-bottom: 10px; }
-.pane-l { display: flex; flex-direction: column; }
+.pane-l-col { display: flex; flex-direction: column; gap: 14px; min-height: 0; }
+.pane-l-head { flex-shrink: 0; }
 .editor-head {
-  display: flex; align-items: center; gap: 12px; padding: 10px 16px;
+  display: flex; align-items: center; gap: 12px; padding: 12px 16px;
-  border-bottom: 1px solid var(--border);
 }
 .editor-head input {
   border: none; outline: none; background: transparent; color: var(--fg); font: inherit; font-size: 23.2px; flex: 1;
@@ -77,9 +77,10 @@ body {
 }
 .editor::placeholder { color: var(--muted); }
 .actionbar {
-  display: flex; align-items: center; gap: 14px; padding: 12px 16px;
+  display: flex; align-items: center; gap: 14px;
-  border-top: 1px solid var(--border);
+  padding: 10px 4px;
 }
+.actionbar .btn { padding: 10px 26px; }
 .btn {
   background: var(--accent); color: var(--bg); border: none; cursor: pointer;
   padding: 8px 18px; border-radius: 8px; font: inherit; font-size: 22.4px; font-weight: 600;

web/templates/new.html

@@ -1,7 +1,8 @@
 {{template "head" .}}
 {{template "topbar" .}}
 <div class="deck">
-  <div class="float pane-l">
+  <div class="pane-l-col">
+    <div class="float pane-l-head">
       <div class="editor-head">
         <input id="title" placeholder="title (optional)">
         <select id="language">
@@ -13,7 +14,8 @@
         </select>
         <button class="btn btn-icon" id="reguess" title="Re-detect language" type="button">⟳</button>
       </div>
-    <div class="editor-wrap">
+    </div>
+    <div class="float editor-wrap">
       <div class="gutter" id="gutter">1</div>
       <textarea class="editor" id="content" placeholder="paste your code, text, or notes here…" spellcheck="false"></textarea>
     </div>