create-feedbax 0.1.0 → 0.2.0

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

@@ -0,0 +1,173 @@
+// @vitest-environment jsdom
+
+import { createFeedbackModule } from "@feedbax/feedback";
+import {
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+  within,
+} from "@testing-library/react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { loadPublicPost, postPath } from "./public-post-page";
+import {
+  PublicPostDetail,
+  PublicPostDetailSkeleton,
+} from "./public-post-detail";
+
+afterEach(cleanup);
+
+describe("canonical Post page", () => {
+  it("uses only the immutable slug as public identity", async () => {
+    const feedback = createFeedbackModule({
+      initialItems: [
+        {
+          id: "secret-id",
+          slug: "clean-post",
+          title: "Clean Post",
+          description: "Body",
+          type: "Feature Request",
+          status: "New",
+          published: true,
+          createdAt: new Date("2026-01-01"),
+          updatedAt: new Date("2026-01-01"),
+        },
+      ],
+    });
+    const post = await loadPublicPost({ feedback, slug: "clean-post" });
+    expect(postPath(post!)).toBe("/p/clean-post");
+    expect(post).not.toHaveProperty("id");
+  });
+
+  it("gives missing and unpublished Posts the same safe unavailable state", async () => {
+    const feedback = createFeedbackModule({
+      initialItems: [
+        {
+          id: "private-id",
+          slug: "private-post",
+          title: "Private title",
+          description: "Private description",
+          type: "General Feedback",
+          status: "Reviewing",
+          published: false,
+          createdAt: new Date("2026-08-20T10:00:00.000Z"),
+          updatedAt: new Date("2026-08-20T12:00:00.000Z"),
+          submitter: { email: "private@example.com" },
+          pageBody: "Private Product Team notes",
+        },
+      ],
+    });
+
+    await expect(
+      loadPublicPost({ feedback, slug: "private-post" }),
+    ).resolves.toBeUndefined();
+    await expect(
+      loadPublicPost({ feedback, slug: "missing-post" }),
+    ).resolves.toBeUndefined();
+  });
+
+  it("renders a contextual Post detail skeleton", () => {
+    const html = renderToStaticMarkup(<PublicPostDetailSkeleton />);
+
+    expect(html).toContain('aria-label="Loading Post details"');
+    expect(html).toContain('aria-busy="true"');
+    expect(html).toContain("Loading Post details…");
+  });
+
+  it("shows the Post summary with a Vote toggle", () => {
+    render(<PublicPostDetail post={publicPost} />);
+
+    expect(
+      screen.getByRole("heading", { name: "Keyboard-first search" }),
+    ).toBeTruthy();
+    expect(screen.getAllByText("Feature Request").length).toBeGreaterThan(0);
+    expect(screen.getAllByText("Planned").length).toBeGreaterThan(0);
+    expect(
+      screen.getByRole("button", { name: "Add Vote, 0 Votes" }),
+    ).toBeTruthy();
+    expect(screen.queryByLabelText("Comments unavailable")).toBeNull();
+  });
+
+  it("persists voted state only after confirmation and rolls back a failed optimistic Vote", async () => {
+    localStorage.clear();
+    const fetchMock = vi
+      .spyOn(globalThis, "fetch")
+      .mockResolvedValueOnce(Response.json({ voteCount: 1 }))
+      .mockResolvedValueOnce(
+        Response.json(
+          {
+            error: "Vote verification is required.",
+            code: "verification_required",
+          },
+          { status: 400 },
+        ),
+      );
+    render(<PublicPostDetail post={publicPost} />);
+    const button = screen.getByRole("button", { name: "Add Vote, 0 Votes" });
+
+    fireEvent.click(button);
+    expect(button.getAttribute("aria-pressed")).toBe("true");
+    await waitFor(() => expect(button.textContent).toContain("1"));
+    expect(localStorage.getItem("feedbax:voted-posts")).toContain(
+      publicPost.slug,
+    );
+
+    sessionStorage.setItem("feedbax:participation-pass", "expired-pass");
+    fireEvent.click(button);
+    expect(button.getAttribute("aria-pressed")).toBe("false");
+    await waitFor(() =>
+      expect(screen.getByRole("alert").textContent).toContain(
+        "verification is required",
+      ),
+    );
+    expect(button.getAttribute("aria-pressed")).toBe("true");
+    expect(button.textContent).toContain("1");
+    expect(localStorage.getItem("feedbax:voted-posts")).toContain(
+      publicPost.slug,
+    );
+    expect(sessionStorage.getItem("feedbax:participation-pass")).toBeNull();
+    fetchMock.mockRestore();
+  });
+
+  it("shows only public metadata in the Details sidebar", () => {
+    render(<PublicPostDetail post={publicPost} />);
+
+    const details = within(
+      screen.getByRole("complementary", { name: "Details" }),
+    );
+    expect(details.getByText("Status")).toBeTruthy();
+    expect(details.getByText("Planned")).toBeTruthy();
+    expect(details.getByText("Post type")).toBeTruthy();
+    expect(details.getByText("Feature Request")).toBeTruthy();
+    expect(details.getByText("Submitted")).toBeTruthy();
+    expect(details.getByText("August 20, 2026")).toBeTruthy();
+    expect(details.getByText("Updated")).toBeTruthy();
+    expect(details.getByText("August 22, 2026")).toBeTruthy();
+    expect(details.queryByText("Author")).toBeNull();
+  });
+
+  it("renders an honest empty Comments state without unavailable controls", () => {
+    render(<PublicPostDetail post={publicPost} />);
+
+    const comments = within(screen.getByRole("region", { name: "Comments" }));
+    expect(comments.getByText("No comments yet")).toBeTruthy();
+    expect(comments.queryByText(/isn’t available/)).toBeNull();
+    expect(screen.queryByRole("textbox")).toBeNull();
+    expect(
+      screen.queryByRole("button", { name: /comment|follow/i }),
+    ).toBeNull();
+  });
+});
+
+const publicPost = {
+  slug: "keyboard-first-search",
+  title: "Keyboard-first search",
+  description: "Open search without reaching for the mouse.",
+  type: "Feature Request" as const,
+  status: "Planned" as const,
+  voteCount: 0,
+  createdAt: new Date("2026-08-20T10:00:00.000Z"),
+  updatedAt: new Date("2026-08-22T10:00:00.000Z"),
+};

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

@@ -0,0 +1,15 @@
+import type { FeedbackModule, PublicPost } from "@feedbax/feedback";
+
+export async function loadPublicPost({
+  feedback,
+  slug,
+}: {
+  feedback: Pick<FeedbackModule, "getPublicPost">;
+  slug: string;
+}): Promise<PublicPost | undefined> {
+  return feedback.getPublicPost(slug);
+}
+
+export function postPath(post: Pick<PublicPost, "slug">): string {
+  return `/p/${encodeURIComponent(post.slug)}`;
+}

package/template/src/public-post-route.test.tsx

@@ -0,0 +1,214 @@
+// @vitest-environment jsdom
+
+import {
+  createFeedbackModule,
+  type CommentThreadPage,
+} from "@feedbax/feedback";
+import {
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+  within,
+} from "@testing-library/react";
+import {
+  createMemoryHistory,
+  createRootRoute,
+  createRouter,
+  Outlet,
+  RouterProvider,
+} from "@tanstack/react-router";
+import {
+  afterAll,
+  afterEach,
+  beforeAll,
+  describe,
+  expect,
+  it,
+  vi,
+} from "vitest";
+
+import { loadPublicPost } from "./public-post-page";
+import { createPublicPostRoute } from "./public-post-route";
+import { PublicPostUnavailable } from "./public-post-unavailable";
+
+beforeAll(() => {
+  vi.spyOn(window, "scrollTo").mockImplementation(() => undefined);
+});
+
+afterAll(() => {
+  vi.restoreAllMocks();
+});
+
+afterEach(cleanup);
+
+describe("/p/$slug", () => {
+  it("retrieves and renders a complete Post from its clean canonical URL", async () => {
+    const feedback = createFeedbackModule({
+      initialItems: [publishedPost],
+      initialComments: [
+        {
+          id: "comment-1",
+          postId: "secret-id",
+          discussionId: "discussion-1",
+          body: "Please add Vim bindings.",
+          author: { kind: "participant", displayName: "Ari" },
+          createdAt: new Date("2026-08-20T13:00:00.000Z"),
+          resolved: false,
+        },
+      ],
+    });
+    const history = createMemoryHistory({
+      initialEntries: ["/p/keyboard-first-search"],
+    });
+    const router = createPostRouter({ feedback, history });
+
+    render(<RouterProvider router={router} />);
+
+    expect(
+      await screen.findByRole("heading", { name: "Keyboard-first search" }),
+    ).toBeTruthy();
+    const details = within(
+      screen.getByRole("complementary", { name: "Details" }),
+    );
+    expect(details.getByText("Feature Request")).toBeTruthy();
+    expect(details.getByText("Planned")).toBeTruthy();
+    expect(details.getByText("Submitted")).toBeTruthy();
+    expect(details.getByText("Updated")).toBeTruthy();
+    expect(history.location.pathname).toBe("/p/keyboard-first-search");
+    expect(screen.getByText("Please add Vim bindings.")).toBeTruthy();
+    expect(screen.getByText("Ari")).toBeTruthy();
+    expect(document.body.textContent).not.toContain("secret-id");
+  });
+
+  it.each(["missing-post", "unpublished-post"])(
+    "renders the same safe unavailable state for %s",
+    async (slug) => {
+      const feedback = createFeedbackModule({
+        initialItems: [unpublishedPost],
+      });
+      const history = createMemoryHistory({
+        initialEntries: [`/p/${slug}`],
+      });
+      const router = createPostRouter({ feedback, history });
+
+      render(<RouterProvider router={router} />);
+
+      expect(
+        await screen.findByRole("heading", {
+          name: "This Post isn’t available.",
+        }),
+      ).toBeTruthy();
+      expect(document.body.textContent).toContain(
+        "It may not exist, or it may not be published yet.",
+      );
+      expect(document.body.textContent).not.toContain("Private title");
+      expect(document.body.textContent).not.toContain("private@example.com");
+      expect(document.body.textContent).not.toContain(
+        "Private Product Team notes",
+      );
+    },
+  );
+
+  it("loads and merges the next stable Comment page only after Load more", async () => {
+    const feedback = createFeedbackModule({ initialItems: [publishedPost] });
+    const loadComments = vi
+      .fn()
+      .mockResolvedValueOnce({
+        items: [
+          {
+            id: "discussion-1",
+            comments: [
+              {
+                id: "comment-1",
+                body: "First page",
+                author: { kind: "participant", displayName: "Ari" },
+                createdAt: new Date("2026-08-20T13:00:00.000Z"),
+              },
+            ],
+          },
+        ],
+        nextCursor: "native-cursor",
+      })
+      .mockResolvedValueOnce({
+        items: [
+          {
+            id: "discussion-1",
+            comments: [
+              {
+                id: "comment-2",
+                body: "Second page",
+                author: { kind: "product-team", displayName: "Product Team" },
+                createdAt: new Date("2026-08-20T14:00:00.000Z"),
+              },
+            ],
+          },
+        ],
+      });
+    const history = createMemoryHistory({
+      initialEntries: ["/p/keyboard-first-search"],
+    });
+    const router = createPostRouter({ feedback, history, loadComments });
+    render(<RouterProvider router={router} />);
+
+    expect(await screen.findByText("First page")).toBeTruthy();
+    expect(loadComments).toHaveBeenCalledTimes(1);
+    fireEvent.click(screen.getByRole("button", { name: "Load more" }));
+    expect(await screen.findByText("Second page")).toBeTruthy();
+    expect(screen.getByText("First page")).toBeTruthy();
+    expect(loadComments).toHaveBeenLastCalledWith(
+      "keyboard-first-search",
+      "native-cursor",
+    );
+  });
+});
+
+function createPostRouter({
+  feedback,
+  history,
+  loadComments,
+}: {
+  feedback: ReturnType<typeof createFeedbackModule>;
+  history: ReturnType<typeof createMemoryHistory>;
+  loadComments?: (slug: string, cursor?: string) => Promise<CommentThreadPage>;
+}) {
+  const rootRoute = createRootRoute({ component: () => <Outlet /> });
+  const postRoute = createPublicPostRoute({
+    loadPost: (slug) => loadPublicPost({ feedback, slug }),
+    loadComments:
+      loadComments ??
+      ((slug, cursor) => feedback.listCommentThreads({ slug, cursor })),
+    renderUnavailable: () => <PublicPostUnavailable />,
+  }).update({
+    id: "/p/$slug",
+    path: "/p/$slug",
+    getParentRoute: () => rootRoute,
+  } as never);
+  return createRouter({
+    history,
+    routeTree: rootRoute.addChildren([postRoute]),
+  });
+}
+
+const publishedPost = {
+  id: "secret-id",
+  slug: "keyboard-first-search",
+  title: "Keyboard-first search",
+  description: "Open search without reaching for the mouse.",
+  type: "Feature Request" as const,
+  status: "Planned" as const,
+  published: true,
+  createdAt: new Date("2026-08-20T10:00:00.000Z"),
+  updatedAt: new Date("2026-08-20T12:00:00.000Z"),
+};
+
+const unpublishedPost = {
+  ...publishedPost,
+  id: "private-id",
+  slug: "unpublished-post",
+  title: "Private title",
+  description: "Private description",
+  published: false,
+  submitter: { email: "private@example.com" },
+  pageBody: "Private Product Team notes",
+};

package/template/src/public-post-route.tsx

@@ -0,0 +1,171 @@
+import type { CommentThreadPage, PublicPost } from "@feedbax/feedback";
+import { createFileRoute } from "@tanstack/react-router";
+import { type ReactNode, useState } from "react";
+import type { PortalCommentRequest } from "./portal-comments";
+import { mergeCommentThreads } from "./comment-thread-page";
+import feedbax from "./feedbax";
+import { createRouteHead } from "./portal-head";
+
+import {
+  PublicPostDetail,
+  PublicPostDetailSkeleton,
+} from "./public-post-detail";
+
+export function createPublicPostRoute({
+  loadPost,
+  loadComments,
+  renderUnavailable,
+}: {
+  loadPost: (slug: string) => Promise<PublicPost | undefined>;
+  loadComments?: (slug: string, cursor?: string) => Promise<CommentThreadPage>;
+  renderUnavailable: (slug: string) => ReactNode;
+}) {
+  const route = createFileRoute("/p/$slug")({
+    loader: async ({ params }) => {
+      const post = await loadPost(params.slug);
+      const comments =
+        post && loadComments ? await loadComments(params.slug) : { items: [] };
+      return { post, comments };
+    },
+    head: ({ loaderData, params }) =>
+      loaderData?.post
+        ? createRouteHead(feedbax.product, {
+            title: loaderData.post.title,
+            description: loaderData.post.description,
+            path: `/p/${encodeURIComponent(loaderData.post.slug)}`,
+          })
+        : createRouteHead(feedbax.product, {
+            title: "Post unavailable",
+            description: feedbax.product.description,
+            path: `/p/${encodeURIComponent(params.slug)}`,
+            noIndex: true,
+          }),
+    component: PostRoute,
+    pendingComponent: PublicPostDetailSkeleton,
+  });
+
+  function PostRoute() {
+    const data = route.useLoaderData();
+    const { slug } = route.useParams();
+    const [comments, setComments] = useState(data.comments);
+    return data.post ? (
+      <PublicPostDetail
+        post={data.post}
+        comments={comments}
+        submitComment={submitPublicComment}
+        mutateComment={mutatePublicComment}
+        loadMore={
+          loadComments && comments.nextCursor
+            ? async () => {
+                const next = await loadComments(slug, comments.nextCursor);
+                setComments({
+                  items: mergeCommentThreads(comments.items, next.items),
+                  ...(next.nextCursor ? { nextCursor: next.nextCursor } : {}),
+                });
+              }
+            : undefined
+        }
+      />
+    ) : (
+      renderUnavailable(slug)
+    );
+  }
+
+  return route;
+}
+
+export async function submitPublicComment(input: PortalCommentRequest) {
+  const controller = new AbortController();
+  const timeout = setTimeout(() => controller.abort(), 10_000);
+  let response: Response;
+  try {
+    response = await fetch("/internal/comments", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      signal: controller.signal,
+      body: JSON.stringify(input),
+    });
+  } catch (error) {
+    throw error instanceof DOMException && error.name === "AbortError"
+      ? new Error("Comment timed out. Check your connection and try again.")
+      : error;
+  } finally {
+    clearTimeout(timeout);
+  }
+  const result: unknown = await response.json();
+  if (!response.ok) {
+    const code =
+      result && typeof result === "object"
+        ? Reflect.get(result, "code")
+        : undefined;
+    if (code === "verification_required" || code === "verification_failed")
+      sessionStorage.removeItem("feedbax:participation-pass");
+    const message =
+      result &&
+      typeof result === "object" &&
+      typeof Reflect.get(result, "error") === "string"
+        ? Reflect.get(result, "error")
+        : "Comment could not be saved. Try again.";
+    throw new Error(message as string);
+  }
+  if (!result || typeof result !== "object" || !Reflect.get(result, "comment"))
+    throw new Error("Comment could not be confirmed. Try again.");
+  const participationPass = Reflect.get(result, "participationPass");
+  if (typeof participationPass === "string")
+    sessionStorage.setItem("feedbax:participation-pass", participationPass);
+  const comment = Reflect.get(result, "comment");
+  if (!comment || typeof comment !== "object")
+    throw new Error("Comment could not be confirmed. Try again.");
+  const createdAt = new Date(String(Reflect.get(comment, "createdAt")));
+  if (Number.isNaN(createdAt.getTime()))
+    throw new Error("Comment could not be confirmed. Try again.");
+  const commentCapability = Reflect.get(result, "commentCapability");
+  const commentCapabilityExpiresAt = Reflect.get(
+    result,
+    "commentCapabilityExpiresAt",
+  );
+  return {
+    ...comment,
+    createdAt,
+    ...(typeof commentCapability === "string" &&
+    typeof commentCapabilityExpiresAt === "number"
+      ? { commentCapability, commentCapabilityExpiresAt }
+      : {}),
+  } as import("./public-post-detail").ConfirmedPortalComment;
+}
+
+export async function mutatePublicComment(input: {
+  action: "edit" | "delete";
+  commentId: string;
+  commentCapability: string;
+  body?: string;
+}) {
+  const participationPass = sessionStorage.getItem(
+    "feedbax:participation-pass",
+  );
+  const response = await fetch("/internal/comments", {
+    method: input.action === "edit" ? "PATCH" : "DELETE",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({
+      ...input,
+      ...(participationPass ? { participationPass } : {}),
+    }),
+  });
+  const result: unknown = await response.json();
+  if (!response.ok) {
+    const code =
+      result && typeof result === "object"
+        ? Reflect.get(result, "code")
+        : undefined;
+    if (code === "verification_required")
+      sessionStorage.removeItem("feedbax:participation-pass");
+    const message =
+      result &&
+      typeof result === "object" &&
+      typeof Reflect.get(result, "error") === "string"
+        ? Reflect.get(result, "error")
+        : "Comment could not be changed. Try again.";
+    throw new Error(message as string);
+  }
+  return result;
+}

package/template/src/public-post-server-function.ts

@@ -0,0 +1,48 @@
+import { createServerFn } from "@tanstack/react-start";
+
+import { createConfiguredFeedbackModule } from "./feedback-runtime";
+import { loadPublicPost } from "./public-post-page";
+import { runSafePublicRead } from "./safe-public-failure";
+
+export const getPublicPost = createServerFn({ method: "GET" })
+  .validator((input: unknown) => {
+    const slug =
+      input && typeof input === "object"
+        ? Reflect.get(input, "slug")
+        : undefined;
+    if (typeof slug !== "string" || !slug)
+      throw new Error("Post route is invalid.");
+    return { slug };
+  })
+  .handler(({ data }) =>
+    runSafePublicRead(() =>
+      loadPublicPost({
+        feedback: createConfiguredFeedbackModule(),
+        slug: data.slug,
+      }),
+    ),
+  );
+
+export const getPublicPostComments = createServerFn({ method: "GET" })
+  .validator((input: unknown) => {
+    const slug =
+      input && typeof input === "object"
+        ? Reflect.get(input, "slug")
+        : undefined;
+    const cursor =
+      input && typeof input === "object"
+        ? Reflect.get(input, "cursor")
+        : undefined;
+    if (
+      typeof slug !== "string" ||
+      !slug ||
+      (cursor !== undefined && typeof cursor !== "string")
+    )
+      throw new Error("Comment request is invalid.");
+    return { slug, ...(cursor ? { cursor } : {}) };
+  })
+  .handler(({ data }) =>
+    runSafePublicRead(() =>
+      createConfiguredFeedbackModule().listCommentThreads(data),
+    ),
+  );

package/template/src/public-post-unavailable.tsx

@@ -0,0 +1,10 @@
+export function PublicPostUnavailable() {
+  return (
+    <main className="feedback-detail feedback-detail-missing">
+      <p className="feedback-eyebrow">Post unavailable</p>
+      <h1>This Post isn’t available.</h1>
+      <p>It may not exist, or it may not be published yet.</p>
+      <a href="/">Browse Posts</a>
+    </main>
+  );
+}