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();

src/dev/fixtures.ts

@@ -22,6 +22,19 @@ export function placeholderImage(hue: number, label = ""): string {
   return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`;
 }
 
+/** Not a real file: preload is off, so the preview video shows only its poster, play button and length. */
+const FIXTURE_VIDEO_URL = "https://cdn.feed.sharedservices.vt.com/dev-fixture.mp4";
+
+/** Comments for the preview, in the shape /api/posts/[id]/comments returns. p2 holds a removed one; p4 has none. */
+export const FIXTURE_COMMENTS: Record<string, unknown[]> = {
+  p1: [{ id: "c1", content: "Congratulations, the flow reads well.", createdAt: "2026-10-19T11:50:00Z", author: { displayName: "Priya Natarajan" } }],
+  p2: [
+    { id: "c2", content: "Number two changed how I price renewals.", createdAt: "2026-10-19T10:40:00Z", author: { displayName: "Marcus Bell" } },
+    { id: "c3", content: "removed text", deletedAt: "2026-10-19T11:00:00Z", createdAt: "2026-10-19T10:55:00Z", author: { displayName: "Elena Kovac" } },
+    { id: "c4", content: "Saving this for the next pricing review.", createdAt: "2026-10-19T11:30:00Z", author: { displayName: "Samuel Okafor" } },
+  ],
+};
+
 export const FIXTURE_FEED_USER_ID = "dev-user-1";
 
 export const FIXTURE_PERSON: Person = {
@@ -73,7 +86,7 @@ export const FIXTURE_FEED_ITEMS: unknown[] = [
       id: "p3",
       content: "A short walkthrough of how we run weekly reviews with a remote team.",
       author: author("a3", "Marcus Bell"),
-      mediaItems: [{ mediaType: "video", thumbnailUrl: placeholderImage(210, "Weekly reviews"), order: 0 }],
+      mediaItems: [{ mediaType: "video", thumbnailUrl: placeholderImage(210, "Weekly reviews"), mp4Url: FIXTURE_VIDEO_URL, durationSeconds: 154, order: 0 }],
     },
   },
   {