8zbhzr21j: Restyle post cards, comments and the own-post menu to the redesign spec

src/dev/FeedPreview.tsx

@@ -3,14 +3,16 @@
 // 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 { useEffect, 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 { toComments } from "@/lib/comment-model";
 import { toCardPosts, type CardPost } from "@/lib/feed-model";
 import {
   FIXTURE_CATEGORIES,
+  FIXTURE_COMMENTS,
   FIXTURE_DISCOVER,
   FIXTURE_FEED_ITEMS,
   FIXTURE_NOW,
@@ -24,6 +26,25 @@ export function FeedPreview() {
   const [query, setQuery] = useState("");
   const [category, setCategory] = useState<string | null>(null);
 
+  // The comments calls answer from the fixtures; the preview never reaches the network.
+  useEffect(() => {
+    const real = window.fetch;
+    const lists: Record<string, unknown[]> = { ...FIXTURE_COMMENTS };
+    window.fetch = async (input, init) => {
+      const m = /\/api\/posts\/([^/]+)\/comments/.exec(String(input));
+      if (!m) return real(input, init);
+      const id = decodeURIComponent(m[1]);
+      if (init?.method === "POST") {
+        const { content } = JSON.parse(String(init.body)) as { content: string };
+        const made = { id: `local-${Date.now()}`, content, createdAt: new Date(FIXTURE_NOW).toISOString(), author: { displayName: FIXTURE_PERSON.name } };
+        lists[id] = [...(lists[id] ?? []), made];
+        return Response.json({ comment: toComments([made])[0] });
+      }
+      return Response.json({ comments: toComments(lists[id] ?? []) });
+    };
+    return () => { window.fetch = real; };
+  }, []);
+
   // With no query or category, show every fixture result so the list scrolls.
   const results = useMemo(() => {
     const q = query.trim().toLowerCase();