create-feedbax 0.1.0 → 0.2.0

package/template/src/lazy-create-post-overlay.tsx

@@ -0,0 +1,6 @@
+import { CreatePostOverlay } from "./create-post-overlay";
+import { portalFeedbackMutations } from "./routed-post-creation-form";
+
+export function LazyCreatePostOverlay() {
+  return <CreatePostOverlay mutations={portalFeedbackMutations} />;
+}

package/template/src/lazy-post-detail-overlay.tsx

@@ -0,0 +1,10 @@
+import { OverlayPostDetail } from "./overlay-post-detail";
+import { PostDetailOverlay } from "./post-detail-overlay";
+
+export function LazyPostDetailOverlay() {
+  return (
+    <PostDetailOverlay
+      renderDetail={(slug) => <OverlayPostDetail slug={slug} />}
+    />
+  );
+}

package/template/src/masked-post-link.tsx

@@ -0,0 +1,27 @@
+import { Link } from "@tanstack/react-router";
+import type { AnchorHTMLAttributes } from "react";
+
+export function PostLink({
+  slug,
+  contextual = false,
+  ...props
+}: AnchorHTMLAttributes<HTMLAnchorElement> & {
+  slug: string;
+  contextual?: boolean;
+}) {
+  if (!contextual) {
+    return <a {...props} href={`/p/${encodeURIComponent(slug)}`} />;
+  }
+  return (
+    <Link
+      {...props}
+      to="."
+      state={{ postDetailOverlay: { slug } }}
+      mask={{
+        to: "/p/$slug",
+        params: { slug },
+        unmaskOnReload: true,
+      }}
+    />
+  );
+}

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

@@ -0,0 +1,130 @@
+// @vitest-environment jsdom
+
+import { cleanup, render, screen, within } from "@testing-library/react";
+import { afterEach, beforeEach, expect, it, vi } from "vitest";
+
+import { OverlayPostDetail } from "./overlay-post-detail";
+import {
+  getPublicPost,
+  getPublicPostComments,
+} from "./public-post-server-function";
+import { saveDeviceProfile } from "./browser-post-state";
+
+vi.mock("./public-post-server-function", () => ({
+  getPublicPost: vi.fn(),
+  getPublicPostComments: vi.fn().mockResolvedValue({ items: [] }),
+}));
+vi.mock("./authorized-draft-post", () => ({
+  AuthorizedDraftPost: () => <p>Draft fallback</p>,
+}));
+
+beforeEach(() => {
+  saveDeviceProfile(localStorage, {
+    name: "Ari",
+    email: "ari@example.com",
+  });
+});
+
+afterEach(() => {
+  cleanup();
+  localStorage.clear();
+  vi.clearAllMocks();
+});
+
+it("shows loading instead of stale content when the requested slug changes", async () => {
+  let resolveSecond!: (post: typeof firstPost) => void;
+  vi.mocked(getPublicPost)
+    .mockResolvedValueOnce(firstPost)
+    .mockReturnValueOnce(
+      new Promise((resolve) => {
+        resolveSecond = resolve;
+      }),
+    );
+
+  const view = render(<OverlayPostDetail slug="first-post" />);
+  expect(
+    await screen.findByRole("heading", { name: "First Post" }),
+  ).toBeTruthy();
+
+  view.rerender(<OverlayPostDetail slug="second-post" />);
+  expect(
+    screen
+      .getByRole("main", { name: "Loading Post details" })
+      .getAttribute("aria-busy"),
+  ).toBe("true");
+  expect(screen.queryByRole("heading", { name: "First Post" })).toBeNull();
+
+  resolveSecond({ ...firstPost, slug: "second-post", title: "Second Post" });
+  expect(
+    await screen.findByRole("heading", { name: "Second Post" }),
+  ).toBeTruthy();
+});
+
+it("shows the designed Post detail with a canonical full-page link", async () => {
+  vi.mocked(getPublicPost).mockResolvedValue(firstPost);
+  vi.mocked(getPublicPostComments).mockResolvedValue({
+    items: [
+      {
+        id: "discussion-1",
+        comments: [
+          {
+            id: "comment-1",
+            body: "Visible in the dialog",
+            author: { kind: "participant", displayName: "Ari" },
+            createdAt: new Date("2026-08-25T01:00:00.000Z"),
+          },
+        ],
+      },
+    ],
+  });
+
+  render(<OverlayPostDetail slug="first-post" />);
+
+  expect(
+    await screen.findByRole("heading", { name: "First Post" }),
+  ).toBeTruthy();
+  expect(
+    screen.getByRole("link", { name: "Open full page" }).getAttribute("href"),
+  ).toBe("/p/first-post");
+  expect(screen.getByRole("complementary", { name: "Details" })).toBeTruthy();
+  expect(
+    within(screen.getByRole("region", { name: "Comments" })).getByText(
+      "Visible in the dialog",
+    ),
+  ).toBeTruthy();
+  expect(
+    await screen.findByRole("form", { name: "Comment composer" }),
+  ).toBeTruthy();
+  expect(getPublicPostComments).toHaveBeenCalledWith({
+    data: { slug: "first-post" },
+  });
+  expect(screen.queryByRole("link", { name: "Back to Feedback" })).toBeNull();
+});
+
+it("keeps the Post and Comment composer available when Comment loading fails", async () => {
+  vi.mocked(getPublicPost).mockResolvedValue(firstPost);
+  vi.mocked(getPublicPostComments).mockRejectedValue(
+    new Error("Comments temporarily unavailable"),
+  );
+
+  render(<OverlayPostDetail slug="first-post" />);
+
+  expect(
+    await screen.findByRole("heading", { name: "First Post" }),
+  ).toBeTruthy();
+  expect(
+    await screen.findByRole("form", { name: "Comment composer" }),
+  ).toBeTruthy();
+  expect(screen.getByText("No comments yet")).toBeTruthy();
+  expect(screen.queryByText("Draft fallback")).toBeNull();
+});
+
+const firstPost = {
+  slug: "first-post",
+  title: "First Post",
+  description: "First description",
+  type: "Feature Request" as const,
+  status: "New" as const,
+  createdAt: new Date("2026-08-22T10:00:00.000Z"),
+  updatedAt: new Date("2026-08-22T10:00:00.000Z"),
+};

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

@@ -0,0 +1,92 @@
+import { useEffect, useState } from "react";
+import type { CommentThreadPage, PublicPost } from "@feedbax/feedback";
+import { ExternalLink } from "lucide-react";
+
+import {
+  getPublicPost,
+  getPublicPostComments,
+} from "./public-post-server-function";
+import {
+  PublicPostDetail,
+  PublicPostDetailSkeleton,
+} from "./public-post-detail";
+import { AuthorizedDraftPost } from "./authorized-draft-post";
+import { mutatePublicComment, submitPublicComment } from "./public-post-route";
+import { mergeCommentThreads } from "./comment-thread-page";
+
+type OverlayDetail = {
+  post: PublicPost | null;
+  comments: CommentThreadPage;
+};
+
+export function OverlayPostDetail({ slug }: { slug: string }) {
+  const [detail, setDetail] = useState<OverlayDetail>();
+  useEffect(() => {
+    let current = true;
+    setDetail(undefined);
+    getPublicPost({ data: { slug } })
+      .then(async (post) => ({
+        post: post ?? null,
+        comments: post
+          ? await getPublicPostComments({ data: { slug } }).catch(() => ({
+              items: [],
+            }))
+          : { items: [] },
+      }))
+      .then((value) => current && setDetail(value))
+      .catch(
+        () => current && setDetail({ post: null, comments: { items: [] } }),
+      );
+    return () => {
+      current = false;
+    };
+  }, [slug]);
+
+  if (detail === undefined) return <PublicPostDetailSkeleton />;
+  return (
+    <div className="overlay-post-detail">
+      <a
+        className="post-full-page-link"
+        href={`/p/${encodeURIComponent(slug)}`}
+      >
+        Open full page <ExternalLink aria-hidden="true" />
+      </a>
+      {detail.post ? (
+        <PublicPostDetail
+          post={detail.post}
+          display="overlay"
+          comments={detail.comments}
+          submitComment={submitPublicComment}
+          mutateComment={mutatePublicComment}
+          loadMore={
+            detail.comments.nextCursor
+              ? async () => {
+                  const next = await getPublicPostComments({
+                    data: { slug, cursor: detail.comments.nextCursor },
+                  });
+                  setDetail((current) =>
+                    current
+                      ? {
+                          ...current,
+                          comments: {
+                            items: mergeCommentThreads(
+                              current.comments.items,
+                              next.items,
+                            ),
+                            ...(next.nextCursor
+                              ? { nextCursor: next.nextCursor }
+                              : {}),
+                          },
+                        }
+                      : current,
+                  );
+                }
+              : undefined
+          }
+        />
+      ) : (
+        <AuthorizedDraftPost slug={slug} />
+      )}
+    </div>
+  );
+}

package/template/src/portal-comments.test.ts

@@ -0,0 +1,375 @@
+import { createFeedbackModule } from "@feedbax/feedback";
+import { createHmac } from "node:crypto";
+import { describe, expect, it, vi } from "vitest";
+
+import {
+  createPortalCommentHandler,
+  createPortalCommentMutationHandler,
+  createPortalCommentRequestHandler,
+} from "./portal-comments";
+
+const signingSecret = "a-high-entropy-secret-with-at-least-32-characters";
+
+function publishedFeedback() {
+  const now = new Date("2026-08-25T00:00:00.000Z");
+  return createFeedbackModule({
+    initialItems: [
+      {
+        id: "post",
+        slug: "post",
+        title: "Post",
+        description: "Visible.",
+        type: "Feature Request",
+        status: "Planned",
+        published: true,
+        createdAt: now,
+        updatedAt: now,
+      },
+    ],
+  });
+}
+
+describe("portal Comment handler", () => {
+  it("requires an unverified Device Profile name and valid email while omitting email from the command", async () => {
+    const feedback = publishedFeedback();
+    const comment = createPortalCommentRequestHandler({
+      feedback,
+      commentsEnabled: true,
+      rateLimiter: { limit: vi.fn().mockResolvedValue({ success: true }) },
+      rateLimitKey: "participant-ip",
+      participationSigningSecret: signingSecret,
+    });
+
+    const response = await comment(
+      new Request("https://portal.test/internal/comments", {
+        method: "POST",
+        body: JSON.stringify({
+          slug: "post",
+          body: "Hello",
+          displayName: "Ari",
+          email: "private@example.com",
+        }),
+      }),
+    );
+    const serialized = await response.text();
+    expect(response.status).toBe(200);
+    expect(serialized).not.toContain("private@example.com");
+    await expect(
+      feedback.listCommentThreads({ slug: "post" }),
+    ).resolves.toMatchObject({
+      items: [
+        {
+          comments: [
+            {
+              body: "Hello",
+              author: { kind: "participant", displayName: "Ari" },
+            },
+          ],
+        },
+      ],
+    });
+
+    const missingProfile = await comment(
+      new Request("https://portal.test/internal/comments", {
+        method: "POST",
+        body: JSON.stringify({ slug: "post", body: "Hello", displayName: " " }),
+      }),
+    );
+    await expect(missingProfile.json()).resolves.toMatchObject({
+      error: expect.stringContaining("display name is required"),
+    });
+
+    for (const email of [undefined, "not-an-email"]) {
+      const response = await comment(
+        new Request("https://portal.test/internal/comments", {
+          method: "POST",
+          body: JSON.stringify({
+            slug: "post",
+            body: "Hello",
+            displayName: "Ari",
+            email,
+          }),
+        }),
+      );
+      expect(response.status).toBe(400);
+      await expect(response.json()).resolves.toMatchObject({
+        error: expect.stringContaining("valid email is required"),
+      });
+    }
+  });
+
+  it("creates replies, rate-limits writes, and reuses a thirty-minute Participation Pass", async () => {
+    let now = 1_000;
+    const verify = vi.fn().mockResolvedValue(true);
+    const rateLimit = vi.fn().mockResolvedValue({ success: true });
+    const comment = createPortalCommentHandler({
+      feedback: publishedFeedback(),
+      commentsEnabled: true,
+      rateLimiter: { limit: rateLimit },
+      rateLimitKey: "participant-ip",
+      turnstileVerifier: { verify },
+      participationSigningSecret: signingSecret,
+      now: () => now,
+    });
+    const first = await comment({
+      slug: "post",
+      body: "Top level",
+      displayName: "Ari",
+      email: "private@example.com",
+      turnstileToken: "verified",
+    });
+    now += 29 * 60 * 1_000;
+    const reply = await comment({
+      slug: "post",
+      discussionId: first.comment.discussionId,
+      body: "Reply",
+      displayName: "Ari",
+      email: "private@example.com",
+      participationPass: first.participationPass,
+    });
+
+    expect(reply.comment.discussionId).toBe(first.comment.discussionId);
+    expect(verify).toHaveBeenCalledTimes(1);
+    expect(rateLimit).toHaveBeenCalledWith({ key: "comment:participant-ip" });
+  });
+
+  it("returns an actionable failure when the Comment rate limit is exceeded", async () => {
+    const comment = createPortalCommentHandler({
+      feedback: publishedFeedback(),
+      commentsEnabled: true,
+      rateLimiter: { limit: vi.fn().mockResolvedValue({ success: false }) },
+      rateLimitKey: "participant-ip",
+      participationSigningSecret: signingSecret,
+    });
+    await expect(
+      comment({
+        slug: "post",
+        body: "Hello",
+        displayName: "Ari",
+        email: "private@example.com",
+      }),
+    ).rejects.toThrow("Comment rate limit exceeded");
+  });
+
+  it("issues a scoped fifteen-minute capability after creation and authorizes edit and delete", async () => {
+    const now = Date.now();
+    const feedback = publishedFeedback();
+    const secret = "a-high-entropy-secret-with-at-least-32-characters";
+    const create = createPortalCommentHandler({
+      feedback,
+      commentsEnabled: true,
+      rateLimiter: { limit: vi.fn().mockResolvedValue({ success: true }) },
+      rateLimitKey: "participant-ip",
+      participationSigningSecret: secret,
+      now: () => now,
+    });
+    const created = await create({
+      slug: "post",
+      body: "Original",
+      displayName: "Ari",
+      email: "private@example.com",
+    });
+    expect(created.commentCapability).toEqual(expect.any(String));
+
+    const mutate = createPortalCommentMutationHandler({
+      feedback,
+      commentsEnabled: true,
+      rateLimiter: { limit: vi.fn().mockResolvedValue({ success: true }) },
+      rateLimitKey: "participant-ip",
+      participationSigningSecret: secret,
+      now: () => now,
+    });
+    await expect(
+      mutate({
+        action: "edit",
+        commentId: created.comment.id,
+        commentCapability: created.commentCapability,
+        body: "Corrected",
+      }),
+    ).resolves.toMatchObject({ comment: { body: "Corrected" } });
+    await expect(
+      mutate({
+        action: "delete",
+        commentId: created.comment.id,
+        commentCapability: created.commentCapability,
+      }),
+    ).resolves.toEqual({ deleted: true });
+  });
+
+  it("rejects tampered, cross-Comment, expired, and Product Team Comment capabilities uniformly", async () => {
+    let now = Date.now();
+    const feedback = publishedFeedback();
+    const secret = "a-high-entropy-secret-with-at-least-32-characters";
+    const create = createPortalCommentHandler({
+      feedback,
+      commentsEnabled: true,
+      rateLimiter: { limit: vi.fn().mockResolvedValue({ success: true }) },
+      rateLimitKey: "participant-ip",
+      participationSigningSecret: secret,
+      now: () => now,
+    });
+    const first = await create({
+      slug: "post",
+      body: "First",
+      displayName: "Ari",
+      email: "private@example.com",
+    });
+    const second = await create({
+      slug: "post",
+      body: "Second",
+      displayName: "Ari",
+      email: "private@example.com",
+    });
+    const mutate = createPortalCommentMutationHandler({
+      feedback,
+      commentsEnabled: true,
+      rateLimiter: { limit: vi.fn().mockResolvedValue({ success: true }) },
+      rateLimitKey: "participant-ip",
+      participationSigningSecret: secret,
+      now: () => now,
+    });
+    const rejected = "Comment could not be changed with this capability.";
+
+    await expect(
+      mutate({
+        action: "delete",
+        commentId: second.comment.id,
+        commentCapability: first.commentCapability,
+      }),
+    ).rejects.toThrow(rejected);
+    await expect(
+      mutate({
+        action: "delete",
+        commentId: first.comment.id,
+        commentCapability: `${first.commentCapability}x`,
+      }),
+    ).rejects.toThrow(rejected);
+    now = first.commentCapabilityExpiresAt;
+    await expect(
+      mutate({
+        action: "delete",
+        commentId: first.comment.id,
+        commentCapability: first.commentCapability,
+      }),
+    ).rejects.toThrow(rejected);
+  });
+
+  it("enforces the exact expiry boundary and cannot mutate Product Team Comments", async () => {
+    const createdAt = new Date();
+    let now = createdAt.getTime() + 15 * 60 * 1_000 - 1;
+    const feedback = createFeedbackModule({
+      initialItems: [
+        {
+          id: "post",
+          slug: "post",
+          title: "Post",
+          description: "Visible.",
+          type: "Feature Request",
+          status: "Planned",
+          published: true,
+          createdAt,
+          updatedAt: createdAt,
+        },
+      ],
+      initialComments: [
+        {
+          id: "team-comment",
+          postId: "post",
+          discussionId: "discussion",
+          body: "Official response",
+          author: { kind: "product-team", displayName: "Product Team" },
+          createdAt,
+          resolved: false,
+        },
+      ],
+    });
+    const capability = commentCapabilityFor(
+      "team-comment",
+      createdAt.getTime() + 15 * 60 * 1_000,
+      signingSecret,
+    );
+    const mutate = createPortalCommentMutationHandler({
+      feedback,
+      commentsEnabled: true,
+      rateLimiter: { limit: vi.fn().mockResolvedValue({ success: true }) },
+      rateLimitKey: "participant-ip",
+      participationSigningSecret: signingSecret,
+      now: () => now,
+    });
+
+    await expect(
+      mutate({
+        action: "delete",
+        commentId: "team-comment",
+        commentCapability: capability,
+      }),
+    ).rejects.toThrow("no longer available");
+    now += 1;
+    await expect(
+      mutate({
+        action: "delete",
+        commentId: "team-comment",
+        commentCapability: capability,
+      }),
+    ).rejects.toThrow("could not be changed with this capability");
+  });
+
+  it("rate-limits Comment mutations and requires a current Participation Pass when verification is enabled", async () => {
+    const feedback = publishedFeedback();
+    const createdAt = Date.now();
+    const blocked = createPortalCommentMutationHandler({
+      feedback,
+      commentsEnabled: true,
+      rateLimiter: { limit: vi.fn().mockResolvedValue({ success: false }) },
+      rateLimitKey: "participant-ip",
+      participationSigningSecret: signingSecret,
+      now: () => createdAt,
+    });
+    await expect(
+      blocked({
+        action: "delete",
+        commentId: "comment",
+        commentCapability: commentCapabilityFor(
+          "comment",
+          createdAt + 60_000,
+          signingSecret,
+        ),
+      }),
+    ).rejects.toThrow("rate limit exceeded");
+
+    const verificationRequired = createPortalCommentMutationHandler({
+      feedback,
+      commentsEnabled: true,
+      rateLimiter: { limit: vi.fn().mockResolvedValue({ success: true }) },
+      rateLimitKey: "participant-ip",
+      turnstileVerifier: { verify: vi.fn() },
+      participationSigningSecret: signingSecret,
+      now: () => createdAt,
+    });
+    await expect(
+      verificationRequired({
+        action: "delete",
+        commentId: "comment",
+        commentCapability: commentCapabilityFor(
+          "comment",
+          createdAt + 60_000,
+          signingSecret,
+        ),
+      }),
+    ).rejects.toThrow("verification is required");
+  });
+});
+
+function commentCapabilityFor(
+  commentId: string,
+  expiresAt: number,
+  secret: string,
+) {
+  const payload = Buffer.from(
+    JSON.stringify({ commentId, actions: ["edit", "delete"], expiresAt }),
+  ).toString("base64url");
+  const signature = createHmac("sha256", secret)
+    .update(payload)
+    .digest("base64url");
+  return `${payload}.${signature}`;
+}