create-feedbax 0.2.0 → 0.2.2

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

@@ -0,0 +1,154 @@
+import {
+  boundedBody,
+  BrowserCapabilityAuthorizationError,
+  createMyFeedbackModule,
+  type ConnectedDatabase,
+  type FeedbackModule,
+  type VerifiedParticipant,
+} from "@feedbax/feedback";
+import { sameOrigin } from "./connected-identity";
+import { createPortalDraftManagement } from "./portal-feedback-submission";
+
+export function createMyFeedbackRequestHandler(options: {
+  enabled: boolean;
+  siteUrl: string;
+  database: ConnectedDatabase;
+  getParticipant(request: Request): Promise<VerifiedParticipant | undefined>;
+  getFeedback(participant: VerifiedParticipant): FeedbackModule;
+  rateLimit(request: Request): Promise<boolean>;
+  limits?: { maxTitleLength: number; maxDescriptionLength: number };
+}) {
+  const json = (body: unknown, status = 200) =>
+    Response.json(body, {
+      status,
+      headers: {
+        "Cache-Control": "no-store",
+        "Referrer-Policy": "no-referrer",
+        Vary: "Cookie",
+      },
+    });
+  return async (request: Request): Promise<Response | undefined> => {
+    const url = new URL(request.url);
+    if (!url.pathname.startsWith("/internal/my-feedback")) return;
+    if (!options.enabled) return json({ error: "Not found." }, 404);
+    if (request.method !== "GET" && !sameOrigin(request, options.siteUrl))
+      return json({ error: "Request origin is invalid." }, 403);
+    try {
+      const participant = await options.getParticipant(request);
+      if (!participant)
+        return json(
+          { error: "Sign in through the product to view My feedback." },
+          401,
+        );
+      if (!(await options.rateLimit(request)))
+        return json({ error: "Too many requests. Try again shortly." }, 429);
+      const feedback = options.getFeedback(participant);
+      if (
+        url.pathname === "/internal/my-feedback" &&
+        request.method === "GET"
+      ) {
+        const filter = url.searchParams.get("filter") ?? "submitted";
+        if (
+          filter !== "submitted" &&
+          filter !== "supported" &&
+          filter !== "following"
+        )
+          return json({ error: "Invalid My feedback filter." }, 400);
+        return json(
+          await createMyFeedbackModule({
+            database: options.database,
+            feedback,
+            participant,
+          }).list({
+            filter,
+            cursor: url.searchParams.get("cursor") ?? undefined,
+          }),
+        );
+      }
+      if (
+        url.pathname !== "/internal/my-feedback/post" ||
+        request.method !== "POST"
+      )
+        return json({ error: "Not found." }, 404);
+      const value = JSON.parse(await boundedBody(request, 16_384)) as Record<
+        string,
+        unknown
+      >;
+      if (
+        !value ||
+        typeof value !== "object" ||
+        typeof value.id !== "string" ||
+        value.id.length > 128
+      )
+        return json({ error: "Invalid submission request." }, 400);
+      if (value.action === "claim") {
+        if (
+          typeof value.browserCapability !== "string" ||
+          value.browserCapability.length > 512
+        )
+          return json(
+            {
+              error:
+                "A valid Browser Capability is required to link this draft.",
+            },
+            400,
+          );
+        const draft = await feedback.claimDraftPost({
+          id: value.id,
+          browserCapability:
+            value.browserCapability as import("@feedbax/feedback").BrowserCapability,
+        });
+        return draft
+          ? json(draft)
+          : json({ error: "Submission unavailable." }, 404);
+      }
+      const post = await feedback.getParticipantPost(value.id);
+      if (!post) return json({ error: "Submission unavailable." }, 404);
+      if (value.action === "read") return json(post);
+      if (!post.editable)
+        return json(
+          { error: "Only New, unpublished drafts may be changed." },
+          409,
+        );
+      const drafts = createPortalDraftManagement({
+        feedback,
+        limits: options.limits ?? {
+          maxTitleLength: 160,
+          maxDescriptionLength: 5000,
+        },
+      });
+      if (value.action === "edit") {
+        const updated = await drafts.edit({
+          ...value,
+          browserCapability: "participant-owner",
+        });
+        return json({
+          id: updated.id,
+          slug: updated.slug,
+          title: updated.title,
+          description: updated.description,
+          type: updated.type,
+          status: updated.status,
+          published: updated.published,
+          createdAt: updated.createdAt,
+          updatedAt: updated.updatedAt,
+        });
+      }
+      if (value.action === "withdraw") {
+        await drafts.withdraw({
+          id: value.id,
+          browserCapability: "participant-owner",
+        });
+        return json({ withdrawn: true });
+      }
+      return json({ error: "Invalid submission action." }, 400);
+    } catch (error) {
+      if (error instanceof BrowserCapabilityAuthorizationError)
+        return json({ error: "Submission unavailable." }, 404);
+      return json(
+        { error: "My feedback is unavailable. Refresh and try again." },
+        503,
+      );
+    }
+  };
+}

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

@@ -1,7 +1,15 @@
 // @vitest-environment jsdom
 
-import { cleanup, render, screen, within } from "@testing-library/react";
+import {
+  cleanup,
+  fireEvent,
+  render as renderView,
+  screen,
+  within,
+} from "@testing-library/react";
 import { afterEach, beforeEach, expect, it, vi } from "vitest";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import type { ReactNode } from "react";
 
 import { OverlayPostDetail } from "./overlay-post-detail";
 import {
@@ -60,7 +68,7 @@ it("shows loading instead of stale content when the requested slug changes", asy
   ).toBeTruthy();
 });
 
-it("shows the designed Post detail with a canonical full-page link", async () => {
+it("shows Post details without the redundant full-page toolbar", async () => {
   vi.mocked(getPublicPost).mockResolvedValue(firstPost);
   vi.mocked(getPublicPostComments).mockResolvedValue({
     items: [
@@ -83,25 +91,50 @@ it("shows the designed Post detail with a canonical full-page link", async () =>
   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.queryByRole("link", { name: "Open full page" })).toBeNull();
   expect(screen.getByRole("complementary", { name: "Details" })).toBeTruthy();
   expect(
-    within(screen.getByRole("region", { name: "Comments" })).getByText(
+    await within(screen.getByRole("region", { name: "Comments" })).findByText(
       "Visible in the dialog",
     ),
   ).toBeTruthy();
   expect(
     await screen.findByRole("form", { name: "Comment composer" }),
   ).toBeTruthy();
+  const composer = screen.getByRole("form", { name: "Comment composer" });
+  const threads = screen.getByRole("region", { name: "Comment threads" });
+  expect(
+    composer.compareDocumentPosition(threads) &
+      Node.DOCUMENT_POSITION_FOLLOWING,
+  ).toBeTruthy();
+  expect(
+    within(threads).queryByRole("form", { name: "Comment composer" }),
+  ).toBeNull();
   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 () => {
+it("shows the Post while Comments are still loading", async () => {
+  vi.mocked(getPublicPost).mockResolvedValue(firstPost);
+  let finish!: (page: { items: [] }) => void;
+  vi.mocked(getPublicPostComments).mockReturnValue(
+    new Promise((resolve) => {
+      finish = resolve;
+    }),
+  );
+  render(<OverlayPostDetail slug="first-post" />);
+  expect(
+    await screen.findByRole("heading", { name: "First Post" }),
+  ).toBeTruthy();
+  expect(screen.getByRole("status", { name: "Loading Comments" })).toBeTruthy();
+  expect(screen.queryByText("No comments yet")).toBeNull();
+  finish({ items: [] });
+  expect(await screen.findByText("No comments yet")).toBeTruthy();
+});
+
+it("keeps the Post available and retries a failed Comment load", async () => {
   vi.mocked(getPublicPost).mockResolvedValue(firstPost);
   vi.mocked(getPublicPostComments).mockRejectedValue(
     new Error("Comments temporarily unavailable"),
@@ -115,7 +148,14 @@ it("keeps the Post and Comment composer available when Comment loading fails", a
   expect(
     await screen.findByRole("form", { name: "Comment composer" }),
   ).toBeTruthy();
-  expect(screen.getByText("No comments yet")).toBeTruthy();
+  expect(await screen.findByRole("alert")).toHaveProperty(
+    "textContent",
+    "Comments could not be loaded.",
+  );
+  expect(screen.queryByText("No comments yet")).toBeNull();
+  vi.mocked(getPublicPostComments).mockResolvedValue({ items: [] });
+  fireEvent.click(screen.getByRole("button", { name: "Retry Comments" }));
+  expect(await screen.findByText("No comments yet")).toBeTruthy();
   expect(screen.queryByText("Draft fallback")).toBeNull();
 });
 
@@ -128,3 +168,14 @@ const firstPost = {
   createdAt: new Date("2026-08-22T10:00:00.000Z"),
   updatedAt: new Date("2026-08-22T10:00:00.000Z"),
 };
+
+function render(ui: ReactNode) {
+  const client = new QueryClient({
+    defaultOptions: { queries: { retry: false } },
+  });
+  return renderView(ui, {
+    wrapper: ({ children }) => (
+      <QueryClientProvider client={client}>{children}</QueryClientProvider>
+    ),
+  });
+}

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

@@ -1,88 +1,39 @@
-import { useEffect, useState } from "react";
-import type { CommentThreadPage, PublicPost } from "@feedbax/feedback";
-import { ExternalLink } from "lucide-react";
+import { useQuery } from "@tanstack/react-query";
 
 import {
   getPublicPost,
   getPublicPostComments,
 } from "./public-post-server-function";
-import {
-  PublicPostDetail,
-  PublicPostDetailSkeleton,
-} from "./public-post-detail";
+import { PublicPostDetailSkeleton } from "./public-post-detail-skeleton";
+import { publicPostQuery } from "./post-detail-query";
+import { PostDetailContent } from "./post-detail-content";
 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;
-};
+const loadComments = (slug: string, cursor?: string) =>
+  getPublicPostComments({ data: { slug, ...(cursor ? { cursor } : {}) } });
 
 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]);
+  return <OverlayPost key={slug} slug={slug} />;
+}
+
+function OverlayPost({ slug }: { slug: string }) {
+  const query = useQuery(
+    publicPostQuery(slug, (value) => getPublicPost({ data: { slug: value } })),
+  );
+  const post = query.data;
 
-  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}
+      {query.isPending ? (
+        <PublicPostDetailSkeleton display="overlay" />
+      ) : post ? (
+        <PostDetailContent
+          post={post}
           display="overlay"
-          comments={detail.comments}
+          loadComments={loadComments}
           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} />

package/template/src/participation-client.ts

@@ -0,0 +1,63 @@
+import { queryOptions } from "@tanstack/react-query";
+import type { ParticipantNotification, FollowState } from "@feedbax/feedback";
+export interface NotificationPage {
+  items: ParticipantNotification[];
+  unreadCount: number;
+  nextCursor?: string;
+}
+export interface EmailPreferences {
+  emailAvailable: boolean;
+  emailEnabled: boolean;
+}
+export async function participationRequest<T>(
+  path: string,
+  body?: unknown,
+): Promise<T> {
+  const response = await fetch(`/internal/connected/${path}`, {
+    cache: "no-store",
+    ...(body === undefined
+      ? {}
+      : {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify(body),
+        }),
+  });
+  const value = await response.json();
+  if (!response.ok)
+    throw new Error(
+      value && typeof value === "object" && "error" in value
+        ? String(value.error)
+        : "Updates are temporarily unavailable.",
+    );
+  return value as T;
+}
+export const followQuery = (slug: string) =>
+  queryOptions({
+    queryKey: ["participant-follow", slug],
+    queryFn: () =>
+      participationRequest<FollowState>(
+        `follow?slug=${encodeURIComponent(slug)}`,
+      ),
+    staleTime: 0,
+    retry: false,
+    refetchInterval: (query) =>
+      query.state.data?.initializing ? 15000 : false,
+  });
+export const preferencesQuery = () =>
+  queryOptions({
+    queryKey: ["participant-email-preferences"],
+    queryFn: () => participationRequest<EmailPreferences>("preferences"),
+    staleTime: 0,
+    retry: false,
+  });
+export const notificationQuery = {
+  queryKey: ["participant-notifications"],
+  initialPageParam: undefined as string | undefined,
+  queryFn: ({ pageParam }: { pageParam: string | undefined }) =>
+    participationRequest<NotificationPage>(
+      `notifications${pageParam ? `?cursor=${encodeURIComponent(pageParam)}` : ""}`,
+    ),
+  getNextPageParam: (last: NotificationPage) => last.nextCursor,
+  retry: false as const,
+};

package/template/src/participation-runtime.test.ts

@@ -0,0 +1,35 @@
+import { expect, it } from "vitest";
+import { createParticipationRequestHandler } from "./participation-runtime";
+
+it("keeps social routes private and rejects cross-origin mutations before touching participation", async () => {
+  let read = false;
+  const handler = createParticipationRequestHandler({
+    siteUrl: "https://feedback.example.com",
+    enabled: true,
+    getParticipant: async () => undefined,
+    getModule: () => {
+      read = true;
+      throw new Error();
+    },
+    rateLimit: async () => true,
+  });
+  const privateRead = await handler(
+    new Request(
+      "https://feedback.example.com/internal/connected/notifications",
+    ),
+  );
+  expect(privateRead?.status).toBe(401);
+  expect(privateRead?.headers.get("Cache-Control")).toBe("no-store");
+  const mutation = await handler(
+    new Request("https://feedback.example.com/internal/connected/follow", {
+      method: "POST",
+      headers: { Origin: "https://evil.example.com" },
+      body: JSON.stringify({ slug: "public", following: true }),
+    }),
+  );
+  expect(mutation?.status).toBe(403);
+  expect(read).toBe(false);
+  expect(
+    await handler(new Request("https://feedback.example.com/roadmap")),
+  ).toBeUndefined();
+});