create-feedbax 0.2.0 → 0.2.2

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

@@ -13,7 +13,7 @@ import {
 } from "@testing-library/react";
 import {
   createMemoryHistory,
-  createRootRoute,
+  createRootRouteWithContext,
   createRouter,
   Outlet,
   RouterProvider,
@@ -28,6 +28,8 @@ import {
   vi,
 } from "vitest";
 
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
 import { loadPublicPost } from "./public-post-page";
 import { createPublicPostRoute } from "./public-post-route";
 import { PublicPostUnavailable } from "./public-post-unavailable";
@@ -76,7 +78,7 @@ describe("/p/$slug", () => {
     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(await screen.findByText("Please add Vim bindings.")).toBeTruthy();
     expect(screen.getByText("Ari")).toBeTruthy();
     expect(document.body.textContent).not.toContain("secret-id");
   });
@@ -161,6 +163,30 @@ describe("/p/$slug", () => {
       "native-cursor",
     );
   });
+
+  it("renders the full-page Post before a slow Comment request completes", async () => {
+    const feedback = createFeedbackModule({ initialItems: [publishedPost] });
+    let finish!: (page: CommentThreadPage) => void;
+    const loadComments = vi.fn(
+      () =>
+        new Promise<CommentThreadPage>((resolve) => {
+          finish = resolve;
+        }),
+    );
+    const history = createMemoryHistory({
+      initialEntries: ["/p/keyboard-first-search"],
+    });
+    const router = createPostRouter({ feedback, history, loadComments });
+    render(<RouterProvider router={router} />);
+    expect(
+      await screen.findByRole("heading", { name: "Keyboard-first search" }),
+    ).toBeTruthy();
+    expect(
+      screen.getByRole("status", { name: "Loading Comments" }),
+    ).toBeTruthy();
+    finish({ items: [] });
+    expect(await screen.findByText("No comments yet")).toBeTruthy();
+  });
 });
 
 function createPostRouter({
@@ -172,7 +198,16 @@ function createPostRouter({
   history: ReturnType<typeof createMemoryHistory>;
   loadComments?: (slug: string, cursor?: string) => Promise<CommentThreadPage>;
 }) {
-  const rootRoute = createRootRoute({ component: () => <Outlet /> });
+  const queryClient = new QueryClient({
+    defaultOptions: { queries: { retry: false } },
+  });
+  const rootRoute = createRootRouteWithContext<{ queryClient: QueryClient }>()({
+    component: () => (
+      <QueryClientProvider client={queryClient}>
+        <Outlet />
+      </QueryClientProvider>
+    ),
+  });
   const postRoute = createPublicPostRoute({
     loadPost: (slug) => loadPublicPost({ feedback, slug }),
     loadComments:
@@ -185,6 +220,7 @@ function createPostRouter({
     getParentRoute: () => rootRoute,
   } as never);
   return createRouter({
+    context: { queryClient },
     history,
     routeTree: rootRoute.addChildren([postRoute]),
   });

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

@@ -1,15 +1,14 @@
 import type { CommentThreadPage, PublicPost } from "@feedbax/feedback";
 import { createFileRoute } from "@tanstack/react-router";
-import { type ReactNode, useState } from "react";
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { type ReactNode } from "react";
 import type { PortalCommentRequest } from "./portal-comments";
-import { mergeCommentThreads } from "./comment-thread-page";
+import { PostDetailContent } from "./post-detail-content";
 import feedbax from "./feedbax";
 import { createRouteHead } from "./portal-head";
 
-import {
-  PublicPostDetail,
-  PublicPostDetailSkeleton,
-} from "./public-post-detail";
+import { PublicPostDetailSkeleton } from "./public-post-detail-skeleton";
+import { publicPostQuery } from "./post-detail-query";
 
 export function createPublicPostRoute({
   loadPost,
@@ -21,11 +20,11 @@ export function createPublicPostRoute({
   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 };
+    loader: async ({ params, context }) => {
+      const post = await context.queryClient.ensureQueryData(
+        publicPostQuery(params.slug, loadPost),
+      );
+      return { post };
     },
     head: ({ loaderData, params }) =>
       loaderData?.post
@@ -45,26 +44,14 @@ export function createPublicPostRoute({
   });
 
   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}
+    const { data: post } = useSuspenseQuery(publicPostQuery(slug, loadPost));
+    return post ? (
+      <PostDetailContent
+        post={post}
+        loadComments={loadComments}
         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)

package/template/src/public-release-links.test.ts

@@ -0,0 +1,120 @@
+import { expect, it } from "vitest";
+import { createFeedbackModule } from "@feedbax/feedback";
+import {
+  createChangelogModule,
+  createInMemoryChangelogStorage,
+} from "@feedbax/changelog";
+import { createPublicReleaseFeedbackModule } from "./public-release-links";
+
+it("links only published local Changelog Entries or safe explicit external release notes", async () => {
+  const entry = {
+    id: "entry",
+    slug: "released-export",
+    title: "Export",
+    summary: "Public",
+    body: "Public",
+    date: "2026-10-15" as const,
+    labels: [],
+    images: [],
+    published: true,
+    createdAt: new Date(1000),
+    updatedAt: new Date(1000),
+  };
+  const changelog = createChangelogModule({
+    storage: createInMemoryChangelogStorage([
+      entry,
+      { ...entry, id: "draft", slug: "private-release", published: false },
+    ]),
+  });
+  const post = {
+    id: "p",
+    slug: "export",
+    title: "Export",
+    description: "Public",
+    type: "Feature Request" as const,
+    status: "Shipped" as const,
+    published: true,
+    createdAt: new Date(1000),
+    updatedAt: new Date(1000),
+  };
+  const module = (url: string) =>
+    createPublicReleaseFeedbackModule({
+      feedback: createFeedbackModule({
+        initialItems: [{ ...post, releaseNotesUrl: url }],
+      }),
+      siteUrl: "https://portal.example",
+      changelog,
+    });
+  expect(
+    (await module("/changelog#released-export").getPublicPost(post.slug))
+      ?.releaseNotesUrl,
+  ).toBe("/changelog#released-export");
+  for (const url of [
+    "/changelog#private-release",
+    "/internal/private",
+    "//evil.example",
+    "https://user:password@release.example",
+    "javascript:alert(1)",
+    "https://portal.example/changelog#private-release",
+    "https://github.com/private-team/private-repo/issues/1",
+    "https://github.com/private-team/private-repo/pull/2",
+    "https://github.com/private-team/private-repo/%69ssues/1",
+    "https://github.com./private-team/private-repo/issues/1",
+  ])
+    expect(
+      (await module(url).getPublicPost(post.slug))?.releaseNotesUrl,
+    ).toBeUndefined();
+  expect(
+    (
+      await module("https://example.com/releases/export").getPublicPost(
+        post.slug,
+      )
+    )?.releaseNotesUrl,
+  ).toBe("https://example.com/releases/export");
+  expect(
+    (await module("/changelog#private-release").listPublicPosts()).items[0]
+      ?.releaseNotesUrl,
+  ).toBeUndefined();
+});
+
+it("checks current public visibility before exposing a GitHub release URL", async () => {
+  const post = {
+    id: "p",
+    slug: "export",
+    title: "Export",
+    description: "Public",
+    type: "Feature Request" as const,
+    status: "Shipped" as const,
+    published: true,
+    createdAt: new Date(1000),
+    updatedAt: new Date(1000),
+  };
+  const module = (owner: string) =>
+    createPublicReleaseFeedbackModule({
+      feedback: createFeedbackModule({
+        initialItems: [
+          {
+            ...post,
+            releaseNotesUrl: `https://github.com/${owner}/feedback/releases/tag/v1`,
+          },
+        ],
+      }),
+      siteUrl: "https://portal.example",
+      request: async (input, init) => {
+        expect(String(input)).toBe(
+          `https://api.github.com/repos/${owner}/feedback`,
+        );
+        expect(init?.redirect).toBe("manual");
+        expect(new Headers(init?.headers).has("Authorization")).toBe(false);
+        return owner === "public-team"
+          ? Response.json({ id: 123, private: false })
+          : new Response(null, { status: 404 });
+      },
+    });
+  expect(
+    (await module("public-team").getPublicPost(post.slug))?.releaseNotesUrl,
+  ).toBe("https://github.com/public-team/feedback/releases/tag/v1");
+  expect(
+    (await module("private-team").getPublicPost(post.slug))?.releaseNotesUrl,
+  ).toBeUndefined();
+});

package/template/src/public-release-links.ts

@@ -0,0 +1,130 @@
+import type { FeedbackModule, PublicPost } from "@feedbax/feedback";
+import type { ChangelogModule } from "@feedbax/changelog";
+
+export function createPublicReleaseFeedbackModule(options: {
+  feedback: FeedbackModule;
+  siteUrl?: string;
+  changelog?: ChangelogModule;
+  request?: typeof fetch;
+}): FeedbackModule {
+  const { feedback } = options;
+  let published: Promise<Set<string>> | undefined;
+  const publishedSlugs = () =>
+    (published ??= (async () => {
+      const slugs = new Set<string>();
+      if (!options.changelog) return slugs;
+      let cursor: string | undefined;
+      for (let page = 0; page < 10; page++) {
+        const result = await options.changelog.listPublishedEntries({ cursor });
+        for (const entry of result.items) slugs.add(entry.slug);
+        cursor = result.nextCursor;
+        if (!cursor) break;
+      }
+      return slugs;
+    })());
+  const resolve = async (value: string) => {
+    if (
+      /[\\\s]/u.test(value) ||
+      Array.from(value).some(
+        (character) =>
+          character.charCodeAt(0) < 32 || character.charCodeAt(0) === 127,
+      )
+    )
+      return;
+    try {
+      const url = new URL(value, options.siteUrl ?? "https://feedbax.invalid");
+      if (
+        url.protocol !== "https:" ||
+        url.username ||
+        url.password ||
+        value.startsWith("//")
+      )
+        return;
+      const local =
+        value.startsWith("/") ||
+        (options.siteUrl && url.origin === new URL(options.siteUrl).origin);
+      if (!local) {
+        const host = url.hostname.toLowerCase().replace(/\.+$/, "");
+        if (
+          [
+            "api.github.com",
+            "gist.github.com",
+            "raw.githubusercontent.com",
+          ].includes(host)
+        )
+          return;
+        if (host === "github.com" || host === "www.github.com") {
+          const path = decodeURIComponent(url.pathname);
+          const release = path.match(
+            /^\/([A-Za-z0-9-]+)\/([A-Za-z0-9_.-]+)\/releases(?:\/|$)/,
+          );
+          if (!release || path.includes("%")) return;
+          const response = await (options.request ?? fetch)(
+            `https://api.github.com/repos/${release[1]}/${release[2]}`,
+            {
+              redirect: "manual",
+              signal: AbortSignal.timeout(5000),
+              headers: {
+                Accept: "application/vnd.github+json",
+                "User-Agent": "Feedbax",
+                "X-GitHub-Api-Version": "2026-03-10",
+              },
+            },
+          );
+          if (!response.ok) return;
+          const repository: unknown = await response.json();
+          if (
+            !repository ||
+            typeof repository !== "object" ||
+            Reflect.get(repository, "private") !== false
+          )
+            return;
+        }
+        return value;
+      }
+      if (
+        url.pathname !== "/changelog" ||
+        url.search ||
+        !/^#[a-z0-9]+(?:-[a-z0-9]+)*$/.test(url.hash)
+      )
+        return;
+      return (await publishedSlugs()).has(url.hash.slice(1))
+        ? value
+        : undefined;
+    } catch {
+      return;
+    }
+  };
+  const project = async <T extends PublicPost>(post: T): Promise<T> => {
+    if (!post.releaseNotesUrl) return post;
+    const url = await resolve(post.releaseNotesUrl);
+    const result = { ...post };
+    if (url) result.releaseNotesUrl = url;
+    else delete result.releaseNotesUrl;
+    return result;
+  };
+  const roadmap: FeedbackModule["listPublicRoadmapPosts"] = async (query) => {
+    const page = await feedback.listPublicRoadmapPosts(query);
+    return { ...page, items: await Promise.all(page.items.map(project)) };
+  };
+  return {
+    ...feedback,
+    async getPublicPost(slug) {
+      const post = await feedback.getPublicPost(slug);
+      return post ? project(post) : undefined;
+    },
+    async listPublicPosts(query) {
+      const page = await feedback.listPublicPosts(query);
+      return { ...page, items: await Promise.all(page.items.map(project)) };
+    },
+    listPublicRoadmapPosts: roadmap,
+    async getPublicPostRoadmap() {
+      const [planned, progress, shipped] = await Promise.all([
+        roadmap({ status: "Planned" }),
+        roadmap({ status: "In Progress" }),
+        roadmap({ status: "Shipped" }),
+      ]);
+      return { Planned: planned, "In Progress": progress, Shipped: shipped };
+    },
+  };
+}

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

@@ -128,7 +128,7 @@ describe("/roadmap route", () => {
     render(<RouterProvider router={router} />);
 
     const loadMore = await screen.findByRole("button", {
-      name: "Load more Planned Posts",
+      name: "View more Planned Posts",
     });
     fireEvent.click(loadMore);
 
@@ -152,7 +152,7 @@ describe("/roadmap route", () => {
     ).toBeTruthy();
     await waitFor(() =>
       expect(
-        screen.queryByRole("button", { name: "Load more Planned Posts" }),
+        screen.queryByRole("button", { name: "View more Planned Posts" }),
       ).toBeNull(),
     );
     expect(
@@ -163,6 +163,42 @@ describe("/roadmap route", () => {
     ).toBe("1 more Planned Post loaded.");
   });
 
+  it("reveals five cards at a time before requesting another server page", async () => {
+    const items = Array.from({ length: 12 }, (_, index) =>
+      post(`planned-${index}`, "Planned"),
+    );
+    const loadMore = vi.fn().mockResolvedValue({
+      items: [post("planned-12", "Planned")],
+      totalCount: 13,
+    });
+    render(
+      <PublicRoadmapView
+        roadmap={{
+          Planned: { items, totalCount: 13, nextCursor: "next-page" },
+          "In Progress": { items: [], totalCount: 0 },
+          Shipped: { items: [], totalCount: 0 },
+        }}
+        loadMore={loadMore}
+      />,
+    );
+    expect(screen.getAllByRole("link")).toHaveLength(5);
+    const button = screen.getByRole("button", {
+      name: "View more Planned Posts",
+    });
+    fireEvent.click(button);
+    expect(screen.getAllByRole("link")).toHaveLength(10);
+    expect(loadMore).not.toHaveBeenCalled();
+    fireEvent.click(button);
+    expect(
+      await screen.findByRole("link", { name: /planned-12 / }),
+    ).toBeTruthy();
+    expect(screen.getAllByRole("link")).toHaveLength(13);
+    expect(loadMore).toHaveBeenCalledOnce();
+    expect(
+      screen.queryByRole("button", { name: "View more Planned Posts" }),
+    ).toBeNull();
+  });
+
   it("shows one status column at a time behind mobile status tabs", async () => {
     Object.defineProperty(window, "matchMedia", {
       configurable: true,

package/template/src/public-roadmap-view.tsx

@@ -50,6 +50,12 @@ const roadmapGroups = [
 ] as const;
 
 const mobileMediaQuery = "(max-width: 1023px)";
+const previewSize = 5;
+const initialVisible = {
+  Planned: previewSize,
+  "In Progress": previewSize,
+  Shipped: previewSize,
+};
 
 export function PublicRoadmapView({
   roadmap,
@@ -63,6 +69,7 @@ export function PublicRoadmapView({
   const mobile = useMediaQuery(mobileMediaQuery);
   const [activeStatus, setActiveStatus] = useState<RoadmapStatus>("Planned");
   const [columns, setColumns] = useState(roadmap);
+  const [visible, setVisible] = useState(initialVisible);
   const [loading, setLoading] = useState<Partial<Record<RoadmapStatus, true>>>(
     {},
   );
@@ -71,7 +78,10 @@ export function PublicRoadmapView({
   );
   const [loadStatusMessage, setLoadStatusMessage] = useState("");
 
-  useEffect(() => setColumns(roadmap), [roadmap]);
+  useEffect(() => {
+    setColumns(roadmap);
+    setVisible(initialVisible);
+  }, [roadmap]);
 
   const visibleGroups = mobile
     ? roadmapGroups.filter(({ status }) => status === activeStatus)
@@ -89,13 +99,26 @@ export function PublicRoadmapView({
       return next;
     });
     try {
-      const nextPage = await loadMore(query);
-      setColumns((current) => ({
-        ...current,
-        [query.status]: appendRoadmapPage(current[query.status], nextPage),
-      }));
+      const before = Math.min(
+        visible[query.status],
+        columns[query.status].items.length,
+      );
+      const target = before + previewSize;
+      let combined = columns[query.status];
+      const cursors = new Set<string>();
+      do {
+        if (!combined.nextCursor || cursors.has(combined.nextCursor)) break;
+        cursors.add(combined.nextCursor);
+        combined = appendRoadmapPage(
+          combined,
+          await loadMore({ status: query.status, cursor: combined.nextCursor }),
+        );
+      } while (combined.items.length < target && combined.nextCursor);
+      setColumns((current) => ({ ...current, [query.status]: combined }));
+      const count = Math.min(target, combined.items.length) - before;
+      setVisible((current) => ({ ...current, [query.status]: before + count }));
       setLoadStatusMessage(
-        `${nextPage.items.length} more ${group.heading} ${nextPage.items.length === 1 ? "Post" : "Posts"} loaded.`,
+        `${count} more ${group.heading} ${count === 1 ? "Post" : "Posts"} loaded.`,
       );
     } catch {
       setErrors((current) => ({ ...current, [query.status]: true }));
@@ -168,7 +191,7 @@ export function PublicRoadmapView({
                 <RoadmapEmptyState heading={heading} />
               ) : (
                 <ol className="grid gap-3">
-                  {column.items.map((item) => (
+                  {column.items.slice(0, visible[status]).map((item) => (
                     <RoadmapItem
                       item={item}
                       key={item.slug}
@@ -200,26 +223,36 @@ export function PublicRoadmapView({
                   </Button>
                 </div>
               ) : null}
-              {column.nextCursor && !errors[status] && loadMore ? (
+              {(column.items.length > visible[status] ||
+                (column.nextCursor && loadMore)) &&
+              !errors[status] ? (
                 <Button
-                  aria-label={`Load more ${heading} Posts`}
+                  aria-label={`View more ${heading} Posts`}
                   className="mt-4 h-10 w-full gap-2"
                   disabled={loading[status] === true}
                   type="button"
                   variant="ghost"
-                  onClick={() =>
-                    void loadNextPage({
-                      status,
-                      cursor: column.nextCursor,
-                    })
-                  }
+                  onClick={() => {
+                    if (
+                      column.items.length - visible[status] >= previewSize ||
+                      !column.nextCursor ||
+                      !loadMore
+                    ) {
+                      setVisible((current) => ({
+                        ...current,
+                        [status]: current[status] + previewSize,
+                      }));
+                    } else if (column.nextCursor) {
+                      void loadNextPage({ status, cursor: column.nextCursor });
+                    }
+                  }}
                 >
                   {loading[status] ? (
                     <>
                       <Spinner aria-hidden="true" /> Loading…
                     </>
                   ) : (
-                    "Load more"
+                    "View more"
                   )}
                 </Button>
               ) : null}
@@ -306,12 +339,12 @@ function RoadmapIntro() {
   return (
     <section aria-labelledby="roadmap-heading">
       <h1
-        className="text-3xl font-semibold tracking-tight"
+        className="text-2xl font-semibold tracking-tight"
         id="roadmap-heading"
       >
         Roadmap
       </h1>
-      <p className="mt-2 text-base text-muted-foreground">
+      <p className="mt-2 text-sm text-muted-foreground">
         What we’re planning, building, and shipping.
       </p>
     </section>
@@ -342,15 +375,15 @@ function RoadmapItem({ item, masked }: { item: PublicPost; masked: boolean }) {
         contextual={masked}
         className="group block border bg-background/30 transition-colors duration-150 hover:bg-muted/30"
       >
-        <article className="p-5">
-          <h3 className="text-base font-medium group-hover:text-foreground">
+        <article className="flex h-40 flex-col p-4">
+          <h3 className="line-clamp-2 min-h-10 text-sm font-medium leading-5 group-hover:text-foreground">
             {item.title}
           </h3>
-          <p className="mt-2 text-sm leading-relaxed text-muted-foreground">
+          <p className="mt-2 line-clamp-2 min-h-10 text-sm leading-5 text-muted-foreground">
             {item.description}
           </p>
           <div
-            className="mt-4 flex flex-wrap items-center gap-3 text-xs text-muted-foreground"
+            className="mt-auto flex items-center gap-3 pt-3 text-xs text-muted-foreground"
             role="group"
             aria-label="Post metadata"
           >

package/template/src/public-shell.test.tsx

@@ -365,6 +365,32 @@ describe("command palette", () => {
     await waitFor(() => expect(history.location.pathname).toBe("/roadmap"));
   });
 
+  it("keeps previous search results visible while a new term is loading", async () => {
+    let finish: ((page: PublicPostPage) => void) | undefined;
+    renderShell("/", {
+      searchPosts: (term) =>
+        term === "keyboard"
+          ? Promise.resolve({ items: [palettePost()] })
+          : new Promise((resolve) => {
+              finish = resolve;
+            }),
+    });
+    await screen.findByRole("link", { name: "Feedback" });
+    fireEvent.keyDown(window, { key: "k", metaKey: true });
+    const input = await screen.findByPlaceholderText("Search feedback…");
+    fireEvent.change(input, { target: { value: "keyboard" } });
+    await screen.findByText("Keyboard-first search");
+    fireEvent.change(input, { target: { value: "next search" } });
+    await waitFor(() => expect(finish).toBeTypeOf("function"));
+    expect(screen.getByText("Keyboard-first search")).toBeTruthy();
+    finish?.({ items: [] });
+    await waitFor(() =>
+      expect(
+        screen.getByRole("status", { name: "Search status" }).textContent,
+      ).toBe("No Posts match this search."),
+    );
+  });
+
   it("shows an empty state when no Posts match", async () => {
     renderShell("/");