The feed's post button is on screen the moment the feed is, while the page is still sliding in. "I'm still not seeing the Post button right away when I open the feed. It should be there from the start" (Adam, 2026-11-02): measured on his phone over DevTools, the button was in the page 87 ms after the Feed tap — 4109 px down, below an 809 px screen — and in place at 562 ms. It is position: fixed, and it was rendered inside the page, whose entrance animation puts a transform on it; a transform makes fixed descendants position within the page, so the button rode at the foot of the feed card until the slide ended. The feed now hands the button and the new-posts pill to the shell (a pageFloaters hook, taken once per render), which paints them beside the page, outside anything that animates; the pill's CSS no longer depends on sitting inside the page, and its phone-width rule stays after the base one so it still rides above the button. tools/feed-fab-anim-test.js taps Feed from the wallet and samples the button every frame of the slide: on screen from the first. The direct-mount harnesses (feed-new-posts, feed-streaming, feed-bottom-nav) paint the floaters as the shell doesHEADmaster

Co-Authored-By: Claude Fable 5.1 <[email protected]>
Claude-Session: https://claude.ai/code/session_01VMan6TFgisGKUDhdStLUvs

1 files changed, 25 insertions, 13 deletions

diff --git a/src/features/messages.js b/src/features/messages.js
index fb9a9d6..90bfaaf 100644
--- a/src/features/messages.js
+++ b/src/features/messages.js
@@ -16477,6 +16477,9 @@ export function messagesFeature(ctx) {
     window.addEventListener('popstate', () => setTimeout(syncMediaPager, 0));
   }
 
+  // what the feed floats over the page (post button, new-posts pill): the
+  // shell takes them each render, see pageFloaters in the hooks
+  let pageFloaters = [];
   function feedView() {
     syncFollowSets().catch(() => {}); // throttled inside
     syncReports().catch(() => {}); // likewise
@@ -16541,9 +16544,28 @@ export function messagesFeature(ctx) {
         }, '↑ ', h('span', { class: 'n', 'data-key': 'n:' + waiting }, String(waiting)), ' ',
           waiting === 1 ? t('feedOneNewWord') : t('feedNNewWord'))
       : null;
+    // The post button floats bottom right wherever the reader is in the
+    // feed; the composer opens at the top and takes the focus. It and the
+    // pill are position: fixed — and a page sliding in has a transform on
+    // it, which makes fixed descendants position within the page instead:
+    // the button rode at the foot of the feed card, below the screen, until
+    // the entrance animation ended ("not seeing the Post button right away",
+    // Adam, 2026-11-02; measured on his phone: 4109 px down at 87 ms, in
+    // place at 562 ms). So they're handed to the shell, which paints them
+    // beside the page, outside anything that animates.
+    const fab = visitor || ui.profCompose != null ? null : h('button', {
+      class: 'btn-primary feed-post-fab', 'data-key': 'feed-post-fab', type: 'button', title: t('profNewPost'), 'aria-label': t('profNewPost'),
+      onClick: () => {
+        ui.profCompose = draftFor(POST_DRAFT) || '';
+        render();
+        try { window.scrollTo({ top: 0, behavior: 'smooth' }); } catch { window.scrollTo(0, 0); }
+        setTimeout(() => document.querySelector('.post-input')?.focus(), 60);
+      },
+    }, h('span', { class: 'feed-compose-icon', 'aria-hidden': 'true', html:
+      '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path stroke="currentColor" d="M12 4H6a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-6"/><path stroke="currentColor" opacity=".5" d="M8 17h5"/><path class="compose-pen-fill" d="m16.5 3.5 3 3-8 8-4 1 1-4Z"/><path class="compose-pen" d="M16.5 3.5a2.1 2.1 0 0 1 3 3l-8 8-4 1 1-4Z"/><path class="compose-pen" d="m14.5 5.5 3 3"/></svg>' }), h('span', {}, t('feedPostFab')));
+    pageFloaters = [pill, fab].filter(Boolean);
     // the chat shell draws the brand header; this is just the page under it
     return h('div', { class: 'card col chat-page feed-page', style: 'gap:10px' },
-        h('div', { 'data-key': 'feed-notice', style: 'display:contents' }, pill),
         h('div', { class: 'row gap6', style: 'align-items:center' },
           backBtn(() => {
             stopFeedWatch();
@@ -16566,18 +16588,6 @@ export function messagesFeature(ctx) {
         ui.feedRelayEdit && ui.feedRelayEdit.id === def.id ? relayPanel(def) : null,
         visitor ? null : feedChips(),
         (refreshLive(), mediaModes()),
-        // floating bottom right, wherever the reader is in the feed: the
-        // composer opens at the top and takes the focus
-        visitor || ui.profCompose != null ? null : h('button', {
-          class: 'btn-primary feed-post-fab', 'data-key': 'feed-post-fab', type: 'button', title: t('profNewPost'), 'aria-label': t('profNewPost'),
-          onClick: () => {
-            ui.profCompose = draftFor(POST_DRAFT) || '';
-            render();
-            try { window.scrollTo({ top: 0, behavior: 'smooth' }); } catch { window.scrollTo(0, 0); }
-            setTimeout(() => document.querySelector('.post-input')?.focus(), 60);
-          },
-        }, h('span', { class: 'feed-compose-icon', 'aria-hidden': 'true', html:
-          '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path stroke="currentColor" d="M12 4H6a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-6"/><path stroke="currentColor" opacity=".5" d="M8 17h5"/><path class="compose-pen-fill" d="m16.5 3.5 3 3-8 8-4 1 1-4Z"/><path class="compose-pen" d="M16.5 3.5a2.1 2.1 0 0 1 3 3l-8 8-4 1 1-4Z"/><path class="compose-pen" d="m14.5 5.5 3 3"/></svg>' }), h('span', {}, t('feedPostFab'))),
         visitor ? null : postComposer(),
         def.of && !ofLoaded(def)
           ? h('div', { class: 'row gap6', style: 'justify-content:center;align-items:center;padding:12px 0' },
@@ -18743,6 +18753,8 @@ export function messagesFeature(ctx) {
       return unreadCount();
     },
     bottomNav: appBottomNav,
+    // taken once per render: a page that isn't the feed leaves none
+    pageFloaters() { const f = pageFloaters; pageFloaters = []; return f; },
     notifySettingsCards() { return [notifyCard()]; },
     screenView() {
       liveShown = false;