h8r4npp3p: Add the new-posts pill, feed list motion and app-wide reduced-motion switch-off

src/dev/FeedPreview.tsx

@@ -3,7 +3,7 @@
 // Dev-only: the real signed-in shell with fixture data and no network calls.
 // Likes, search and the composer work on local state so the panels can be
 // checked by hand. Used by src/app/dev/feed/page.tsx.
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { AppShell } from "@/components/AppShell";
 import { DiscoverRailsView } from "@/components/DiscoverRails";
 import { ExpertSearchView } from "@/components/ExpertSearch";
@@ -26,6 +26,10 @@ export function FeedPreview() {
   const [file, setFile] = useState<File | null>(null);
   const [query, setQuery] = useState("");
   const [category, setCategory] = useState<string | null>(null);
+  // Fixture switches for the new-posts pill and the loading-more skeleton.
+  const [newCount, setNewCount] = useState(0);
+  const [loadingMore, setLoadingMore] = useState(false);
+  const list = useRef<HTMLDivElement | null>(null);
 
   // The comments calls answer from the fixtures; the preview never reaches the network.
   useEffect(() => {
@@ -60,6 +64,15 @@ export function FeedPreview() {
     );
 
   return (
+    <>
+    <div style={{ position: "fixed", left: "50%", bottom: 8, zIndex: 50, display: "flex", gap: 12, padding: "6px 10px", font: "12px sans-serif", background: "var(--tile-2)", color: "var(--ink)", border: "1px solid var(--line-2)", borderRadius: 8 }}>
+      <label style={{ margin: 0, fontSize: 12 }}>
+        <input type="checkbox" data-testid="fx-new" checked={newCount > 0} onChange={(e) => setNewCount(e.target.checked ? 3 : 0)} style={{ padding: 0 }} /> New posts (3)
+      </label>
+      <label style={{ margin: 0, fontSize: 12 }}>
+        <input type="checkbox" data-testid="fx-more" checked={loadingMore} onChange={(e) => setLoadingMore(e.target.checked)} style={{ padding: 0 }} /> Loading more
+      </label>
+    </div>
     <AppShell
       person={FIXTURE_PERSON}
       search={
@@ -77,11 +90,15 @@ export function FeedPreview() {
         <FeedView
           posts={posts}
           status="ready"
-          loadingMore={false}
+          loadingMore={loadingMore}
+          listRef={list}
           loadMoreFailed={false}
-          newCount={0}
+          newCount={newCount}
           onRetry={() => {}}
-          onShowNew={() => {}}
+          onShowNew={() => {
+            setNewCount(0);
+            list.current?.scrollTo({ top: 0, behavior: "smooth" });
+          }}
           onToggleLike={toggleLike}
           feedUserId={FIXTURE_PERSON.feedUserId}
           onDelete={(post) => setPosts((cur) => cur.filter((p) => p.key !== post.key))}
@@ -104,5 +121,6 @@ export function FeedPreview() {
       }
       discover={<DiscoverRailsView data={FIXTURE_DISCOVER} />}
     />
+    </>
   );
 }