create-feedbax 0.2.0 → 0.2.2

package/template/src/post-detail-content.test.tsx

@@ -0,0 +1,233 @@
+// @vitest-environment jsdom
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import {
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from "@testing-library/react";
+import { afterEach, expect, it, vi } from "vitest";
+import { PostDetailContent } from "./post-detail-content";
+import { saveDeviceProfile } from "./browser-post-state";
+
+const post = {
+  slug: "comment-cache",
+  title: "Comment cache",
+  description: "Feedback",
+  type: "Feature Request" as const,
+  status: "Planned" as const,
+  createdAt: new Date(),
+  updatedAt: new Date(),
+};
+const author = { kind: "participant" as const, displayName: "Ama" };
+afterEach(() => {
+  cleanup();
+  localStorage.clear();
+  vi.restoreAllMocks();
+});
+
+it.each(["edit", "delete"] as const)(
+  "preserves a confirmed Comment %s when another page arrives",
+  async (action) => {
+    saveDeviceProfile(localStorage, { name: "Ama", email: "ama@example.com" });
+    localStorage.setItem(
+      "feedbax:comment-capabilities",
+      JSON.stringify({
+        "comment-1": {
+          capability: "capability",
+          expiresAt: Date.now() + 60000,
+        },
+      }),
+    );
+    let state: "original" | "edit" | "delete" = "original";
+    const loadComments = vi.fn(async (_slug: string, cursor?: string) =>
+      cursor
+        ? {
+            items: [
+              {
+                id: "thread-2",
+                comments: [
+                  {
+                    id: "comment-2",
+                    body: "Second page",
+                    author,
+                    createdAt: new Date(),
+                  },
+                ],
+              },
+            ],
+          }
+        : {
+            items:
+              state === "delete"
+                ? []
+                : [
+                    {
+                      id: "thread-1",
+                      comments: [
+                        {
+                          id: "comment-1",
+                          body:
+                            state === "edit"
+                              ? "Corrected message"
+                              : "Original message",
+                          author,
+                          createdAt: new Date(),
+                        },
+                      ],
+                    },
+                  ],
+            nextCursor: "next",
+          },
+    );
+    const mutateComment = vi.fn(async () => {
+      state = action;
+    });
+    vi.spyOn(window, "confirm").mockReturnValue(true);
+    const client = new QueryClient({
+      defaultOptions: { queries: { retry: false } },
+    });
+    render(
+      <QueryClientProvider client={client}>
+        <PostDetailContent
+          post={post}
+          loadComments={loadComments}
+          mutateComment={mutateComment}
+        />
+      </QueryClientProvider>,
+    );
+    expect(await screen.findByText("Original message")).toBeTruthy();
+    fireEvent.click(
+      await screen.findByRole("button", {
+        name: action === "edit" ? "Edit" : "Delete",
+      }),
+    );
+    if (action === "edit") {
+      fireEvent.change(screen.getByRole("textbox", { name: "Comment text" }), {
+        target: { value: "Corrected message" },
+      });
+      fireEvent.click(screen.getByRole("button", { name: "Save" }));
+    }
+    await waitFor(() => expect(mutateComment).toHaveBeenCalledOnce());
+    await waitFor(() =>
+      expect(screen.queryByText("Original message")).toBeNull(),
+    );
+    const more = await screen.findByRole("button", {
+      name: "Load more",
+    });
+    await waitFor(() => expect(more.hasAttribute("disabled")).toBe(false));
+    fireEvent.click(more);
+    expect(await screen.findByText("Second page")).toBeTruthy();
+    expect(screen.queryByText("Original message")).toBeNull();
+    expect(screen.queryAllByText("Corrected message")).toHaveLength(
+      action === "edit" ? 1 : 0,
+    );
+  },
+);
+
+it("removes a Comment resolved in Notion when the shared query refreshes", async () => {
+  let visible = true;
+  const loadComments = vi.fn(async () => ({
+    items: visible
+      ? [
+          {
+            id: "thread-1",
+            comments: [
+              {
+                id: "comment-1",
+                body: "Resolved in Notion",
+                author,
+                createdAt: new Date(),
+              },
+            ],
+          },
+        ]
+      : [],
+  }));
+  const client = new QueryClient({
+    defaultOptions: { queries: { retry: false } },
+  });
+  render(
+    <QueryClientProvider client={client}>
+      <PostDetailContent post={post} loadComments={loadComments} />
+    </QueryClientProvider>,
+  );
+  expect(await screen.findByText("Resolved in Notion")).toBeTruthy();
+  visible = false;
+  void client.invalidateQueries({
+    queryKey: ["public-post-comments", post.slug],
+  });
+  await waitFor(() =>
+    expect(screen.queryByText("Resolved in Notion")).toBeNull(),
+  );
+  expect(screen.getByText("No comments yet")).toBeTruthy();
+});
+
+it("keeps private edit capabilities out of the shared public Comment cache", async () => {
+  saveDeviceProfile(localStorage, { name: "Ama", email: "ama@example.com" });
+  const confirmed = {
+    id: "comment-1",
+    discussionId: "thread-1",
+    body: "Public message",
+    author,
+    createdAt: new Date(),
+    commentCapability: "private-edit-capability",
+    commentCapabilityExpiresAt: Date.now() + 60000,
+  };
+  let submitted = false;
+  const loadComments = vi.fn(async () => ({
+    items: submitted
+      ? [
+          {
+            id: "thread-1",
+            comments: [
+              {
+                id: confirmed.id,
+                body: confirmed.body,
+                author,
+                createdAt: confirmed.createdAt,
+              },
+            ],
+          },
+        ]
+      : [],
+  }));
+  const client = new QueryClient({
+    defaultOptions: { queries: { retry: false } },
+  });
+  const snapshots: string[] = [];
+  const unsubscribe = client.getQueryCache().subscribe((event) => {
+    snapshots.push(JSON.stringify(event.query.state.data));
+  });
+  render(
+    <QueryClientProvider client={client}>
+      <PostDetailContent
+        post={post}
+        loadComments={loadComments}
+        submitComment={async () => {
+          submitted = true;
+          return confirmed;
+        }}
+      />
+    </QueryClientProvider>,
+  );
+  fireEvent.change(await screen.findByLabelText("Add a comment"), {
+    target: { value: confirmed.body },
+  });
+  fireEvent.click(screen.getByRole("button", { name: "Post comment" }));
+  expect(await screen.findByText(confirmed.body)).toBeTruthy();
+  await waitFor(() =>
+    expect(localStorage.getItem("feedbax:comment-capabilities")).toContain(
+      confirmed.commentCapability,
+    ),
+  );
+  const cached = JSON.stringify(
+    client.getQueryData(["public-post-comments", post.slug]),
+  );
+  expect(cached).toContain(confirmed.body);
+  expect(cached).not.toContain("commentCapability");
+  expect(cached).not.toContain(confirmed.commentCapability);
+  expect(snapshots.join("\n")).not.toContain(confirmed.commentCapability);
+  unsubscribe();
+});

package/template/src/post-detail-content.tsx

@@ -0,0 +1,162 @@
+import type { CommentThreadPage, CreatedComment } from "@feedbax/feedback";
+import { type ComponentProps, useMemo } from "react";
+import {
+  type InfiniteData,
+  useInfiniteQuery,
+  useQueryClient,
+} from "@tanstack/react-query";
+import { mergeCommentThreads } from "./comment-thread-page";
+import { PublicPostDetail } from "./public-post-detail";
+import {
+  publicPostCommentsQuery,
+  type FetchPostComments,
+} from "./post-detail-query";
+import feedbax from "./feedbax";
+
+type Props = Omit<
+  ComponentProps<typeof PublicPostDetail>,
+  "comments" | "loadMore"
+> & { loadComments?: FetchPostComments };
+type Pages = InfiniteData<CommentThreadPage, string | undefined>;
+const emptyComments: FetchPostComments = async () => ({ items: [] });
+
+export function PostDetailContent(props: Props) {
+  return <PostDiscussion key={props.post.slug} {...props} />;
+}
+
+function PostDiscussion({ loadComments, ...props }: Props) {
+  const client = useQueryClient();
+  const options = publicPostCommentsQuery(
+    props.post.slug,
+    loadComments ?? emptyComments,
+  );
+  const query = useInfiniteQuery({
+    ...options,
+    enabled:
+      (props.features ?? feedbax.features).comments && Boolean(loadComments),
+  });
+  const comments = useMemo(
+    () => ({
+      items:
+        query.data?.pages.reduce(
+          (current, page) => mergeCommentThreads(current, page.items),
+          [] as CommentThreadPage["items"],
+        ) ?? [],
+    }),
+    [query.data],
+  );
+  function updatePages(update: (pages: Pages) => Pages) {
+    client.setQueryData<Pages>(options.queryKey, (current) =>
+      update(current ?? { pages: [{ items: [] }], pageParams: [undefined] }),
+    );
+  }
+  return (
+    <PublicPostDetail
+      {...props}
+      comments={comments}
+      commentsLoading={query.isFetching}
+      commentsLoadError={query.isError}
+      retryComments={() => {
+        if (query.isFetchNextPageError) void query.fetchNextPage();
+        else void query.refetch();
+      }}
+      loadMore={
+        query.hasNextPage && !query.isError
+          ? async () => {
+              await query.fetchNextPage();
+            }
+          : undefined
+      }
+      submitComment={
+        props.submitComment
+          ? async (input) => {
+              await client.cancelQueries({ queryKey: options.queryKey });
+              try {
+                const confirmed = await props.submitComment!(input);
+                updatePages((current) => upsertComment(current, confirmed));
+                return confirmed;
+              } finally {
+                void client.invalidateQueries({ queryKey: options.queryKey });
+              }
+            }
+          : undefined
+      }
+      mutateComment={
+        props.mutateComment
+          ? async (input) => {
+              await client.cancelQueries({ queryKey: options.queryKey });
+              try {
+                const result = await props.mutateComment!(input);
+                updatePages((current) => ({
+                  ...current,
+                  pages: current.pages.map((page) => ({
+                    ...page,
+                    items: page.items
+                      .map((thread) => ({
+                        ...thread,
+                        comments: thread.comments.flatMap((comment) =>
+                          comment.id !== input.commentId
+                            ? [comment]
+                            : input.action === "delete"
+                              ? []
+                              : [{ ...comment, body: input.body! }],
+                        ),
+                      }))
+                      .filter((thread) => thread.comments.length > 0),
+                  })),
+                }));
+                return result;
+              } finally {
+                void client.invalidateQueries({ queryKey: options.queryKey });
+              }
+            }
+          : undefined
+      }
+    />
+  );
+}
+
+function upsertComment(current: Pages, comment: CreatedComment): Pages {
+  // Cache only the public projection; browser edit capabilities stay outside it.
+  const publicComment = {
+    id: comment.id,
+    body: comment.body,
+    ...(comment.images?.length
+      ? {
+          images: comment.images.map((image) => ({
+            id: image.id,
+            src: image.src,
+            contentType: image.contentType,
+            bytes: image.bytes,
+          })),
+        }
+      : {}),
+    createdAt: comment.createdAt,
+    author:
+      comment.author.kind === "participant"
+        ? {
+            kind: "participant" as const,
+            displayName: comment.author.displayName,
+            ...(comment.author.verified ? { verified: true } : {}),
+          }
+        : {
+            kind: "product-team" as const,
+            displayName: comment.author.displayName,
+          },
+  };
+  const thread = { id: comment.discussionId, comments: [publicComment] };
+  const present = current.pages.some((page) =>
+    page.items.some((item) => item.id === thread.id),
+  );
+  return {
+    ...current,
+    pages: current.pages.map((page, index) => ({
+      ...page,
+      items:
+        (index === 0 && !present) ||
+        page.items.some((item) => item.id === thread.id)
+          ? mergeCommentThreads(page.items, [thread])
+          : page.items,
+    })),
+  };
+}

package/template/src/post-detail-query.ts

@@ -0,0 +1,34 @@
+import type { CommentThreadPage, PublicPost } from "@feedbax/feedback";
+import { infiniteQueryOptions, queryOptions } from "@tanstack/react-query";
+
+export const publicPostQueryKey = ["public-post"] as const;
+export type FetchPostComments = (
+  slug: string,
+  cursor?: string,
+) => Promise<CommentThreadPage>;
+
+export function publicPostQuery(
+  slug: string,
+  loadPost: (slug: string) => Promise<PublicPost | undefined>,
+) {
+  return queryOptions({
+    queryKey: [...publicPostQueryKey, slug],
+    queryFn: async () => (await loadPost(slug)) ?? null,
+    staleTime: 30_000,
+    retry: false,
+  });
+}
+
+export function publicPostCommentsQuery(
+  slug: string,
+  loadComments: FetchPostComments,
+) {
+  return infiniteQueryOptions({
+    queryKey: ["public-post-comments", slug],
+    initialPageParam: undefined as string | undefined,
+    queryFn: ({ pageParam }) => loadComments(slug, pageParam),
+    getNextPageParam: (page) => page.nextCursor,
+    staleTime: 0,
+    retry: false,
+  });
+}

package/template/src/post-results.tsx

@@ -142,7 +142,7 @@ function PostResultRow({
             <span className="block text-base font-medium text-foreground sm:text-lg">
               {post.title}
             </span>
-            <span className="mt-1 block text-sm leading-relaxed text-muted-foreground">
+            <span className="mt-1 line-clamp-2 break-words text-sm leading-relaxed text-muted-foreground">
               {post.description}
             </span>
             <span

package/template/src/public-cache-policy.test.ts

@@ -75,7 +75,7 @@ describe("public portal cache policy", () => {
     );
 
     expect(first?.url).toBe(
-      "https://feedback.example.com/?types=%5B%22Bug+Report%22%5D&statuses=%5B%22New%22%5D&pageSize=25&sort=top&schema=1",
+      "https://feedback.example.com/?types=%5B%22Bug+Report%22%5D&statuses=%5B%22New%22%5D&pageSize=25&sort=top&schema=2",
     );
     expect(second?.url).toBe(first?.url);
   });
@@ -94,12 +94,12 @@ describe("public portal cache policy", () => {
         new Request("https://feedback.example.com/roadmap"),
       )?.url,
     ).toBe(
-      "https://feedback.example.com/roadmap?sort=updated-at-desc&schema=1",
+      "https://feedback.example.com/roadmap?sort=updated-at-desc&schema=2",
     );
     expect(
       canonicalPublicRequest(new Request("https://feedback.example.com/p/slug"))
         ?.url,
-    ).toBe("https://feedback.example.com/p/slug?schema=1");
+    ).toBe("https://feedback.example.com/p/slug?schema=2");
   });
 });
 
@@ -108,7 +108,7 @@ describe("feed URL normalization", () => {
     expect(
       canonicalPublicRequest(
         new Request(
-          "https://feedback.example.com/?pageSize=25&sort=new&schema=1",
+          "https://feedback.example.com/?pageSize=25&sort=new&schema=2",
         ),
       ),
     ).toBeUndefined();
@@ -139,3 +139,10 @@ describe("feed URL normalization", () => {
     expect(canonicalPublicRequest(first!)).toBeUndefined();
   });
 });
+
+it("moves pre-0.2.1 cached projections to a new schema identity", () => {
+  const request = canonicalPublicRequest(
+    new Request("https://feedback.example.com/?pageSize=25&sort=top&schema=1"),
+  );
+  expect(new URL(request!.url).searchParams.get("schema")).toBe("2");
+});

package/template/src/public-cache-policy.ts

@@ -15,7 +15,7 @@ const BROWSER_CACHE_CONTROL = "public, max-age=30";
 const EDGE_CACHE_CONTROL =
   "public, max-age=120, stale-while-revalidate=600, stale-if-error=86400";
 const CHANGELOG_EDGE_CACHE_CONTROL = "public, max-age=30";
-const PUBLIC_PROJECTION_SCHEMA_VERSION = "1";
+const PUBLIC_PROJECTION_SCHEMA_VERSION = "2";
 const PUBLIC_FEEDBACK_PAGE_SIZE = "25";
 const PUBLIC_ROADMAP_SORT = "updated-at-desc";
 

package/template/src/public-feedback-index.tsx

@@ -1,6 +1,6 @@
 import type { PublicPostQuery, PublicPostPage } from "@feedbax/feedback";
 import type { PortalFeatures } from "@feedbax/config";
-import { Skeleton } from "@feedbax/ui/components/skeleton";
+import Loader from "./components/loader";
 import { useAuthorizedDraftPosts } from "./draft-post-list";
 import {
   BoardNavigation,
@@ -39,11 +39,11 @@ export function PublicPostIndex({
           <section aria-labelledby="feedback-heading">
             <h1
               id="feedback-heading"
-              className="text-3xl font-semibold tracking-tight"
+              className="text-2xl font-semibold tracking-tight"
             >
               Feedback
             </h1>
-            <p className="mt-2 text-base text-muted-foreground">
+            <p className="mt-2 text-sm text-muted-foreground">
               {features.voting
                 ? "Share ideas and vote on what matters."
                 : "Share ideas and follow public progress."}
@@ -58,10 +58,11 @@ export function PublicPostIndex({
               features={features}
             />
           </div>
-          <section className="mt-8" aria-live="polite">
-            <div className="mb-4">
-              <h2 className="text-lg font-medium">Posts</h2>
-            </div>
+          <section
+            className="mt-8"
+            aria-live="polite"
+            aria-label="Feedback posts"
+          >
             <PostResults
               drafts={drafts}
               initialItems={page.items}
@@ -89,36 +90,5 @@ export function PublicPostIndex({
 }
 
 export function PublicPostFeedSkeleton() {
-  return (
-    <main
-      className="feedback-index feedback-feed-skeleton"
-      aria-label="Loading Posts"
-      aria-busy="true"
-    >
-      <section className="feedback-intro" aria-hidden="true">
-        <Skeleton className="feedback-skeleton-heading" />
-        <Skeleton className="feedback-skeleton-deck" />
-      </section>
-      <div className="post-controls" aria-hidden="true">
-        <Skeleton className="feedback-skeleton-control" />
-        <Skeleton className="feedback-skeleton-control" />
-        <Skeleton className="feedback-skeleton-control" />
-      </div>
-      <section className="feedback-results" aria-hidden="true">
-        <Skeleton className="feedback-skeleton-section-heading" />
-        <ol className="feedback-list">
-          {Array.from({ length: 3 }, (_, index) => (
-            <li key={index} data-post-skeleton-row>
-              <div className="feedback-skeleton-row">
-                <Skeleton className="feedback-skeleton-meta" />
-                <Skeleton className="feedback-skeleton-title" />
-                <Skeleton className="feedback-skeleton-copy" />
-              </div>
-            </li>
-          ))}
-        </ol>
-      </section>
-      <span className="sr-only">Loading Posts…</span>
-    </main>
-  );
+  return <Loader label="Loading Posts" />;
 }

package/template/src/public-feedback-page.test.tsx

@@ -16,6 +16,71 @@ import { authorizedDraftPostsQueryKey } from "./authorized-draft-query";
 afterEach(cleanup);
 
 describe("public feedback home page", () => {
+  it("keeps Shipped Posts out of default Top before pagination while preserving explicit discovery", async () => {
+    const feedback = createFeedbackModule({
+      initialItems: [
+        ...Array.from({ length: 26 }, (_, index) => ({
+          id: `active-${index}`,
+          slug: `active-${index}`,
+          title: `Active ${index}`,
+          description: "Feedback",
+          type: "Feature Request" as const,
+          status: "Planned" as const,
+          published: true,
+          voteCount: index,
+          createdAt: new Date(index * 1000),
+          updatedAt: new Date(index * 1000),
+        })),
+        ...Array.from({ length: 27 }, (_, index) => ({
+          id: `shipped-${index}`,
+          slug: `shipped-${index}`,
+          title: `Shipped ${index}`,
+          description: "Feedback",
+          type: "Feature Request" as const,
+          status: "Shipped" as const,
+          published: true,
+          voteCount: 1000,
+          createdAt: new Date(100000 + index * 1000),
+          updatedAt: new Date(100000 + index * 1000),
+        })),
+      ],
+    });
+    const first = await loadPublicPostPage({
+      feedback,
+      search: { sort: "top" },
+    });
+    expect(first.items).toHaveLength(25);
+    expect(first.items.every((post) => post.status !== "Shipped")).toBe(true);
+    const second = await loadPublicPostPage({
+      feedback,
+      search: { sort: "top", cursor: first.nextCursor },
+    });
+    expect(second.items).toHaveLength(1);
+    const legacy = await loadPublicPostPage({
+      feedback,
+      search: { sort: "trending" },
+    });
+    expect(legacy.items.map((post) => post.slug)).toEqual(
+      first.items.map((post) => post.slug),
+    );
+    const shipped = await loadPublicPostPage({
+      feedback,
+      search: { sort: "top", statuses: ["Shipped"] },
+    });
+    expect(shipped.items).toHaveLength(25);
+    expect(shipped.items.every((post) => post.status === "Shipped")).toBe(true);
+    const search = await loadPublicPostPage({
+      feedback,
+      search: { sort: "top", search: "Shipped" },
+    });
+    expect(search.items[0]?.status).toBe("Shipped");
+    const newest = await loadPublicPostPage({
+      feedback,
+      search: { sort: "new" },
+    });
+    expect(newest.items[0]?.status).toBe("Shipped");
+  });
+
   it("loads 25 Published Posts and an opaque next-page cursor", async () => {
     const feedback = createFeedbackModule({
       initialItems: Array.from({ length: 26 }, (_, index) => ({

package/template/src/public-feedback-page.ts

@@ -30,7 +30,18 @@ export async function loadPublicPostPage({
   feedback: Pick<FeedbackModule, "listPublicPosts">;
   search: Record<string, unknown>;
 }): Promise<PublicPostPage> {
-  return feedback.listPublicPosts(publicPostSearch(search));
+  const query = publicPostSearch(search);
+  const defaultTop =
+    query.sort !== "new" &&
+    !query.search &&
+    !query.status &&
+    !query.statuses?.length;
+  return feedback.listPublicPosts({
+    ...query,
+    ...(defaultTop
+      ? { statuses: postStatuses.filter((status) => status !== "Shipped") }
+      : {}),
+  });
 }
 
 export function publicPostSearch(

package/template/src/public-portal-error.tsx

@@ -3,7 +3,7 @@ import { Button } from "@feedbax/ui/components/button";
 export function PublicPortalError({
   reset,
 }: {
-  error: Error;
+  error: unknown;
   reset: () => void;
 }) {
   return (