create-feedbax 0.2.0 → 0.2.1

package/template/src/portal-feedback-form.tsx

@@ -1,3 +1,4 @@
+import { ImageAttachments } from "./components/image-attachments";
 import { configuredTurnstileSiteKey } from "./turnstile-configuration";
 import type { Post, PostType, SubmittedPost } from "@feedbax/feedback";
 import { useForm } from "@tanstack/react-form";
@@ -120,6 +121,10 @@ export function PortalFeedbackForm({
 }) {
   const [draft, setDraft] = useState<StoredDraft | undefined>(initialDraft);
   const [pending, setPending] = useState(false);
+  const [images, setImages] = useState<
+    import("@feedbax/feedback").ImageAttachment[]
+  >([]);
+  const [uploading, setUploading] = useState(false);
   const [message, setMessage] = useState<string>();
   const [confirmingWithdrawal, setConfirmingWithdrawal] = useState(false);
   const turnstileToken = useRef<string | undefined>(undefined);
@@ -161,6 +166,9 @@ export function PortalFeedbackForm({
       const result = await mutations.submitPost({
         data: {
           ...values,
+          ...(images.length
+            ? { imageIds: images.map((image) => image.id) }
+            : {}),
           ...(turnstileToken.current
             ? { turnstileToken: turnstileToken.current }
             : {}),
@@ -408,9 +416,16 @@ export function PortalFeedbackForm({
               );
             }}
           />
+          {!draft ? (
+            <ImageAttachments
+              value={images}
+              onChange={setImages}
+              onUploadingChange={setUploading}
+            />
+          ) : null}
         </FieldGroup>
         <div className="feedback-submit-actions">
-          <Button type="submit" disabled={pending}>
+          <Button type="submit" disabled={pending || uploading}>
             {pending ? "Working…" : draft ? "Save changes" : "Create Post"}
           </Button>
           {display === "overlay" ? (
@@ -419,7 +434,7 @@ export function PortalFeedbackForm({
               variant="ghost"
               className="feedback-cancel"
               onClick={onCancel}
-              disabled={pending}
+              disabled={pending || uploading}
             >
               Cancel
             </Button>
@@ -430,7 +445,7 @@ export function PortalFeedbackForm({
               variant="destructive"
               className="feedback-withdraw"
               onClick={() => setConfirmingWithdrawal(true)}
-              disabled={pending}
+              disabled={pending || uploading}
             >
               Withdraw draft
             </Button>

package/template/src/portal-feedback-runtime.ts

@@ -10,6 +10,7 @@ interface PortalSubmissionEnvironment {
 }
 
 interface PortalSubmissionSecurityOptions {
+  turnstile?: FeedbaxConfig["turnstile"];
   environment: PortalSubmissionEnvironment;
   rateLimitKey: string;
 }
@@ -22,11 +23,13 @@ interface TurnstileWarningOptions {
 }
 
 export function createPortalSubmissionSecurity({
+  turnstile = feedbax.turnstile,
   environment,
   rateLimitKey,
 }: PortalSubmissionSecurityOptions) {
   const turnstileSecretKey = configuredTurnstileSecret(
     environment.TURNSTILE_SECRET_KEY,
+    turnstile,
   );
 
   return {

package/template/src/portal-feedback-server-function.ts

@@ -1,7 +1,8 @@
 import { createServerFn } from "@tanstack/react-start";
-import { getRequestIP } from "@tanstack/react-start/server";
+import { getRequest, getRequestIP } from "@tanstack/react-start/server";
 
 import {
+  requestParticipant,
   createConfiguredFeedbackModule,
   feedbackSubmissionLimits,
 } from "./feedback-runtime";
@@ -24,9 +25,10 @@ export const submitPortalFeedback = createServerFn({ method: "POST" })
       environment: env,
       nodeEnv: import.meta.env.PROD ? "production" : "development",
     });
+    const participant = await requestParticipant(getRequest());
     return runSafePortalMutation(() =>
       createPortalFeedbackSubmission({
-        feedback: createConfiguredFeedbackModule(),
+        feedback: createConfiguredFeedbackModule(participant),
         limits: feedbackSubmissionLimits,
         ...createPortalSubmissionSecurity({
           environment: env,
@@ -40,9 +42,10 @@ export const submitPortalPost = createServerFn({ method: "POST" })
   .validator((input: unknown) => input)
   .handler(async ({ data }) => {
     const { env } = await import("cloudflare:workers");
+    const participant = await requestParticipant(getRequest());
     return runSafePortalMutation(() =>
       createPortalPostSubmission({
-        feedback: createConfiguredFeedbackModule(),
+        feedback: createConfiguredFeedbackModule(participant),
         limits: feedbackSubmissionLimits,
         ...createPortalSubmissionSecurity({
           environment: env,

package/template/src/portal-feedback-submission.ts

@@ -147,8 +147,18 @@ function validateInput(
     throw invalidSubmission();
   }
   if (!isValidSubmitter(value.submitter)) throw invalidSubmission();
+  if (
+    value.imageIds !== undefined &&
+    (!Array.isArray(value.imageIds) ||
+      value.imageIds.length > 4 ||
+      value.imageIds.some(
+        (id) => typeof id !== "string" || !/^[-a-f0-9]{36}$/.test(id),
+      ))
+  )
+    throw invalidSubmission();
 
   return {
+    ...(value.imageIds ? { imageIds: value.imageIds as string[] } : {}),
     title: value.title,
     description: value.description,
     type: value.type,

package/template/src/portal-server-entry.ts

@@ -8,12 +8,14 @@ import {
 } from "./public-cache-policy";
 
 export function createPortalServerEntry({
+  connectedHandler,
   trustedFeedbackHandler,
   voteHandler,
   commentHandler,
   commentMutationHandler,
   applicationHandler = startHandler.fetch,
 }: {
+  connectedHandler?: (request: Request) => Promise<Response | undefined>;
   trustedFeedbackHandler: (request: Request) => Promise<Response>;
   voteHandler?: (request: Request) => Promise<Response>;
   commentHandler?: (request: Request) => Promise<Response>;
@@ -23,6 +25,8 @@ export function createPortalServerEntry({
   return createServerEntry({
     async fetch(request, options) {
       const url = new URL(request.url);
+      const connectedResponse = await connectedHandler?.(request);
+      if (connectedResponse) return connectedResponse;
       if (request.method === "GET" && url.pathname === "/health") {
         return Response.json(
           { status: "ok" },

package/template/src/post-creation-flow.tsx

@@ -65,11 +65,11 @@ export function PostCreationFlow({
 export function PostCreationSkeleton() {
   return (
     <main
-      className="feedback-index submission-page"
+      className="feedback-index"
       aria-label="Loading Post creation"
       aria-busy="true"
     >
-      <section className="feedback-submit creation-skeleton" aria-hidden="true">
+      <section className="feedback-submit" aria-hidden="true">
         <div className="feedback-submit-copy">
           <Skeleton className="creation-skeleton-eyebrow" />
           <Skeleton className="creation-skeleton-heading" />

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";