rnxcmkidd: Add the viewport-fit bento shell and a dev feed preview with fixtures

src/dev/FeedPreview.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+// 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 { useMemo, useState } from "react";
+import { AppShell } from "@/components/AppShell";
+import { DiscoverRailsView } from "@/components/DiscoverRails";
+import { ExpertSearchView } from "@/components/ExpertSearch";
+import { FeedView } from "@/components/FeedView";
+import { toCardPosts, type CardPost } from "@/lib/feed-model";
+import {
+  FIXTURE_CATEGORIES,
+  FIXTURE_DISCOVER,
+  FIXTURE_FEED_ITEMS,
+  FIXTURE_NOW,
+  FIXTURE_PERSON,
+  FIXTURE_SEARCH_RESULTS,
+} from "./fixtures";
+
+export function FeedPreview() {
+  const [posts, setPosts] = useState<CardPost[]>(() => toCardPosts(FIXTURE_FEED_ITEMS));
+  const [draft, setDraft] = useState("");
+  const [query, setQuery] = useState("");
+  const [category, setCategory] = useState<string | null>(null);
+
+  // With no query or category, show every fixture result so the list scrolls.
+  const results = useMemo(() => {
+    const q = query.trim().toLowerCase();
+    return q ? FIXTURE_SEARCH_RESULTS.filter((e) => e.displayName.toLowerCase().includes(q)) : FIXTURE_SEARCH_RESULTS;
+  }, [query]);
+
+  const toggleLike = (post: CardPost) =>
+    setPosts((cur) =>
+      cur.map((p) =>
+        p.key === post.key ? { ...p, isLiked: !p.isLiked, likesCount: p.likesCount + (p.isLiked ? -1 : 1) } : p,
+      ),
+    );
+
+  return (
+    <AppShell
+      person={FIXTURE_PERSON}
+      search={
+        <ExpertSearchView
+          query={query}
+          onQuery={setQuery}
+          categories={FIXTURE_CATEGORIES}
+          activeCategory={category}
+          onCategory={setCategory}
+          status="ready"
+          results={results}
+        />
+      }
+      feed={
+        <FeedView
+          posts={posts}
+          status="ready"
+          loadingMore={false}
+          loadMoreFailed={false}
+          newCount={0}
+          onRetry={() => {}}
+          onShowNew={() => {}}
+          onToggleLike={toggleLike}
+          feedUserId={FIXTURE_PERSON.feedUserId}
+          onDelete={(post) => setPosts((cur) => cur.filter((p) => p.key !== post.key))}
+          composer={{ value: draft, busy: false, error: false, onChange: setDraft, onSubmit: () => setDraft("") }}
+          now={FIXTURE_NOW}
+        />
+      }
+      discover={<DiscoverRailsView data={FIXTURE_DISCOVER} />}
+    />
+  );
+}