create-feedbax 0.1.0 → 0.2.1

package/template/src/public-failure-state.test.tsx

@@ -0,0 +1,69 @@
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, it } from "vitest";
+
+import { PublicPortalError } from "./public-portal-error";
+import {
+  ActionablePortalFailure,
+  runSafePortalMutation,
+  runSafePublicRead,
+} from "./safe-public-failure";
+
+describe("public portal failure state", () => {
+  it("replaces private upstream diagnostics at the public read boundary", async () => {
+    const privateFailure = new Error(
+      "Notion token secret-token and property private-field",
+    );
+
+    const failure = await runSafePublicRead(async () =>
+      Promise.reject(privateFailure),
+    ).then(
+      () => undefined,
+      (error: unknown) => error,
+    );
+
+    expect(failure).toBeInstanceOf(Error);
+    expect((failure as Error).message).toBe(
+      "Public feedback is temporarily unavailable.",
+    );
+    expect((failure as Error).message).not.toContain("secret-token");
+  });
+
+  it("renders an explicit retry state without serializing private failure details", () => {
+    const privateFailure = new Error(
+      "Notion token secret-token, property private-field, Browser Capability private-capability",
+    );
+
+    const html = renderToStaticMarkup(
+      <PublicPortalError error={privateFailure} reset={() => undefined} />,
+    );
+
+    expect(html).toContain("Posts are temporarily unavailable");
+    expect(html).toContain("Try again");
+    expect(html).not.toContain("secret-token");
+    expect(html).not.toContain("private-field");
+    expect(html).not.toContain("private-capability");
+  });
+
+  it("preserves actionable portal failures while replacing private mutation diagnostics", async () => {
+    await expect(
+      runSafePortalMutation(async () => {
+        throw new ActionablePortalFailure(
+          "Feedback submission rate limit exceeded.",
+        );
+      }),
+    ).rejects.toThrow("Feedback submission rate limit exceeded.");
+
+    const failure = await runSafePortalMutation(async () => {
+      throw new Error("Notion private diagnostic secret-token");
+    }).then(
+      () => undefined,
+      (error: unknown) => error,
+    );
+
+    expect(failure).toBeInstanceOf(Error);
+    expect((failure as Error).message).toBe(
+      "Public feedback mutation is temporarily unavailable.",
+    );
+    expect((failure as Error).message).not.toContain("secret-token");
+  });
+});

package/template/src/public-feedback-index.tsx

@@ -0,0 +1,94 @@
+import type { PublicPostQuery, PublicPostPage } from "@feedbax/feedback";
+import type { PortalFeatures } from "@feedbax/config";
+import Loader from "./components/loader";
+import { useAuthorizedDraftPosts } from "./draft-post-list";
+import {
+  BoardNavigation,
+  PostFeedControls,
+  StatusNavigation,
+} from "./post-feed-controls";
+import { PostResults } from "./post-results";
+import feedbax from "./feedbax";
+
+export function PublicPostIndex({
+  page,
+  search,
+  loadMore,
+  loadingMore,
+  loadMoreError,
+  onSearchChange,
+  pending = false,
+  maskPostLinks = false,
+  features = feedbax.features,
+}: {
+  page: PublicPostPage;
+  search: PublicPostQuery;
+  loadMore?: () => void;
+  loadingMore?: boolean;
+  loadMoreError?: boolean;
+  onSearchChange?: (search: PublicPostQuery) => void;
+  pending?: boolean;
+  maskPostLinks?: boolean;
+  features?: PortalFeatures;
+}) {
+  const drafts = useAuthorizedDraftPosts(search);
+  return (
+    <main className="mx-auto w-full max-w-[96rem] px-6 py-10 lg:px-10">
+      <div className="grid gap-12 lg:grid-cols-[minmax(0,1fr)_22rem]">
+        <div className="min-w-0">
+          <section aria-labelledby="feedback-heading">
+            <h1
+              id="feedback-heading"
+              className="text-2xl font-semibold tracking-tight"
+            >
+              Feedback
+            </h1>
+            <p className="mt-2 text-sm text-muted-foreground">
+              {features.voting
+                ? "Share ideas and vote on what matters."
+                : "Share ideas and follow public progress."}
+            </p>
+          </section>
+          <div className="mt-8 flex flex-col gap-3 lg:flex-row lg:items-center">
+            <PostFeedControls
+              contextualCreatePost={maskPostLinks}
+              search={search}
+              onSearchChange={onSearchChange}
+              pending={pending}
+              features={features}
+            />
+          </div>
+          <section
+            className="mt-8"
+            aria-live="polite"
+            aria-label="Feedback posts"
+          >
+            <PostResults
+              drafts={drafts}
+              initialItems={page.items}
+              nextCursor={page.nextCursor}
+              loadMore={loadMore}
+              loadingMore={loadingMore}
+              loadMoreError={loadMoreError}
+              maskPostLinks={maskPostLinks}
+              features={features}
+            />
+          </section>
+        </div>
+        <aside
+          className="hidden border-l pl-8 pt-14 lg:block"
+          aria-label="Feedback navigation"
+        >
+          <BoardNavigation search={search} onSearchChange={onSearchChange} />
+          <div className="mt-8">
+            <StatusNavigation search={search} onSearchChange={onSearchChange} />
+          </div>
+        </aside>
+      </div>
+    </main>
+  );
+}
+
+export function PublicPostFeedSkeleton() {
+  return <Loader label="Loading Posts" />;
+}

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

@@ -0,0 +1,355 @@
+// @vitest-environment jsdom
+
+import { createFeedbackModule } from "@feedbax/feedback";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { cleanup, render, screen, within } from "@testing-library/react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { afterEach, describe, expect, it } from "vitest";
+
+import {
+  PublicPostFeedSkeleton,
+  PublicPostIndex,
+} from "./public-feedback-index";
+import { loadPublicPostPage } from "./public-feedback-page";
+import { authorizedDraftPostsQueryKey } from "./authorized-draft-query";
+
+afterEach(cleanup);
+
+describe("public feedback home page", () => {
+  it("keeps Shipped Posts out of default Top before pagination while preserving explicit discovery", async () => {
+    const feedback = createFeedbackModule({
+      initialItems: [
+        ...Array.from({ length: 26 }, (_, index) => ({
+          id: `active-${index}`,
+          slug: `active-${index}`,
+          title: `Active ${index}`,
+          description: "Feedback",
+          type: "Feature Request" as const,
+          status: "Planned" as const,
+          published: true,
+          voteCount: index,
+          createdAt: new Date(index * 1000),
+          updatedAt: new Date(index * 1000),
+        })),
+        ...Array.from({ length: 27 }, (_, index) => ({
+          id: `shipped-${index}`,
+          slug: `shipped-${index}`,
+          title: `Shipped ${index}`,
+          description: "Feedback",
+          type: "Feature Request" as const,
+          status: "Shipped" as const,
+          published: true,
+          voteCount: 1000,
+          createdAt: new Date(100000 + index * 1000),
+          updatedAt: new Date(100000 + index * 1000),
+        })),
+      ],
+    });
+    const first = await loadPublicPostPage({
+      feedback,
+      search: { sort: "top" },
+    });
+    expect(first.items).toHaveLength(25);
+    expect(first.items.every((post) => post.status !== "Shipped")).toBe(true);
+    const second = await loadPublicPostPage({
+      feedback,
+      search: { sort: "top", cursor: first.nextCursor },
+    });
+    expect(second.items).toHaveLength(1);
+    const legacy = await loadPublicPostPage({
+      feedback,
+      search: { sort: "trending" },
+    });
+    expect(legacy.items.map((post) => post.slug)).toEqual(
+      first.items.map((post) => post.slug),
+    );
+    const shipped = await loadPublicPostPage({
+      feedback,
+      search: { sort: "top", statuses: ["Shipped"] },
+    });
+    expect(shipped.items).toHaveLength(25);
+    expect(shipped.items.every((post) => post.status === "Shipped")).toBe(true);
+    const search = await loadPublicPostPage({
+      feedback,
+      search: { sort: "top", search: "Shipped" },
+    });
+    expect(search.items[0]?.status).toBe("Shipped");
+    const newest = await loadPublicPostPage({
+      feedback,
+      search: { sort: "new" },
+    });
+    expect(newest.items[0]?.status).toBe("Shipped");
+  });
+
+  it("loads 25 Published Posts and an opaque next-page cursor", async () => {
+    const feedback = createFeedbackModule({
+      initialItems: Array.from({ length: 26 }, (_, index) => ({
+        id: `feedback-${index + 1}`,
+        slug: `feedback-${index + 1}`,
+        title: `Feedback ${index + 1}`,
+        description: `Description ${index + 1}`,
+        type: "Feature Request" as const,
+        status: "New" as const,
+        published: true,
+        createdAt: new Date(Date.UTC(2026, 6, index + 1)),
+        updatedAt: new Date(Date.UTC(2026, 6, index + 1)),
+      })),
+    });
+
+    const page = await loadPublicPostPage({
+      feedback,
+      search: {},
+    });
+
+    expect(page.items).toHaveLength(25);
+    expect(page.items.map((item) => item.title)).toEqual([
+      "Feedback 26",
+      ...Array.from({ length: 24 }, (_, index) => `Feedback ${25 - index}`),
+    ]);
+    expect(page.nextCursor).toEqual(expect.any(String));
+    expect(page.nextCursor).not.toContain("feedback-");
+  });
+
+  it("keeps each public feed ordering deterministic across route pages", async () => {
+    const feedback = createFeedbackModule({
+      initialItems: Array.from({ length: 27 }, (_, index) => ({
+        id: `post-${index}`,
+        slug: `post-${index}`,
+        title: `Post ${index}`,
+        description: "Visible.",
+        type: "Feature Request" as const,
+        status: "Planned" as const,
+        published: true,
+        voteCount: index < 2 ? 100 : index,
+        createdAt: new Date(Date.UTC(2026, 7, index + 1)),
+        updatedAt: new Date(Date.UTC(2026, 7, index + 1)),
+      })),
+    });
+
+    const top = await loadPublicPostPage({
+      feedback,
+      search: { sort: "top" },
+    });
+    const trending = await loadPublicPostPage({
+      feedback,
+      search: { sort: "trending" },
+    });
+    const newest = await loadPublicPostPage({
+      feedback,
+      search: { sort: "new" },
+    });
+    const topNext = await loadPublicPostPage({
+      feedback,
+      search: { sort: "top", cursor: top.nextCursor },
+    });
+
+    expect(top.items.map(({ slug }) => slug)).toEqual(
+      trending.items.map(({ slug }) => slug),
+    );
+    expect(top.items.slice(0, 2).map(({ slug }) => slug)).toEqual([
+      "post-1",
+      "post-0",
+    ]);
+    expect(newest.items[0]?.slug).toBe("post-26");
+    expect([...top.items, ...topNext.items]).toHaveLength(27);
+  });
+
+  it("applies Feedback Type and Feedback Status filters from the page URL", async () => {
+    const feedback = createFeedbackModule({
+      initialItems: [
+        {
+          id: "matching-feedback",
+          slug: "matching-feedback",
+          title: "Matching feedback",
+          description: "A planned feature request.",
+          type: "Feature Request",
+          status: "Planned",
+          published: true,
+          createdAt: new Date("2026-08-20T10:00:00.000Z"),
+          updatedAt: new Date("2026-08-20T10:00:00.000Z"),
+        },
+        {
+          id: "wrong-status",
+          slug: "wrong-status",
+          title: "New feature request",
+          description: "This should be filtered out.",
+          type: "Feature Request",
+          status: "New",
+          published: true,
+          createdAt: new Date("2026-08-19T10:00:00.000Z"),
+          updatedAt: new Date("2026-08-19T10:00:00.000Z"),
+        },
+        {
+          id: "wrong-type",
+          slug: "wrong-type",
+          title: "Planned bug report",
+          description: "This should also be filtered out.",
+          type: "Bug Report",
+          status: "Planned",
+          published: true,
+          createdAt: new Date("2026-08-18T10:00:00.000Z"),
+          updatedAt: new Date("2026-08-18T10:00:00.000Z"),
+        },
+      ],
+    });
+
+    const page = await loadPublicPostPage({
+      feedback,
+      search: { types: ["Feature Request"], statuses: ["Planned"] },
+    });
+
+    expect(page.items.map((item) => item.title)).toEqual(["Matching feedback"]);
+  });
+
+  it("renders the registry empty state with a clear reset action", () => {
+    const html = renderIndex(
+      <PublicPostIndex
+        page={{ items: [], nextCursor: "opaque-next-page" }}
+        search={{ types: ["Bug Report"], statuses: ["Reviewing"] }}
+      />,
+    );
+
+    expect(html).toContain("No Posts match this view");
+    expect(html).toContain("Clear filters");
+  });
+
+  it("renders the feedback workspace described by the visual brief", () => {
+    const html = renderIndex(
+      <PublicPostIndex page={{ items: [publishedPost] }} search={{}} />,
+    );
+
+    expect(html).toContain("Share ideas and vote on what matters.");
+    expect(html).toContain("Boards");
+    expect(html).toContain("All posts");
+    expect(html).toContain("Status");
+    expect(html).not.toContain("Trending");
+    expect(html).toContain("Top");
+    expect(html).toContain("Top");
+    expect(html).toContain("New post");
+  });
+
+  it("renders the working Vote toggle on eligible public feed cards", () => {
+    renderIndexIntoDocument(
+      <PublicPostIndex page={{ items: [publishedPost] }} search={{}} />,
+    );
+
+    const post = screen.getByRole("link", { name: /Keyboard-first search!/ });
+    const metadata = within(post).getByRole("group", {
+      name: "Post metadata",
+    });
+    expect(within(metadata).getByText("Feature Request")).toBeTruthy();
+    expect(within(metadata).getByText("Planned")).toBeTruthy();
+    expect(
+      screen.getByRole("button", { name: "Add Vote, 7 Votes" }),
+    ).toBeTruthy();
+    expect(within(metadata).queryByText(/comment/i)).toBeNull();
+  });
+
+  it("links each Published Post by immutable slug", () => {
+    const html = renderIndex(
+      <PublicPostIndex
+        page={{
+          items: [
+            {
+              slug: "keyboard-first-search",
+              title: "Keyboard-first search!",
+              description: "Open search without reaching for the mouse.",
+              type: "Feature Request",
+              status: "Planned",
+              createdAt: new Date("2026-08-20T10:00:00.000Z"),
+              updatedAt: new Date("2026-08-20T12:00:00.000Z"),
+            },
+          ],
+        }}
+        search={{}}
+      />,
+    );
+
+    expect(html).toContain('href="/p/keyboard-first-search"');
+  });
+
+  it("keeps visible Posts and offers retry when Load More fails", () => {
+    const html = renderIndex(
+      <PublicPostIndex
+        page={{ items: [publishedPost], nextCursor: "opaque-next-page" }}
+        search={{}}
+        loadMore={() => undefined}
+        loadMoreError
+      />,
+    );
+
+    expect(html).toContain("Keyboard-first search!");
+    expect(html).toContain("Couldn’t load more Posts");
+    expect(html).toContain("Try again");
+  });
+
+  it("renders a contextual feed skeleton while the route is loading", () => {
+    const html = renderToStaticMarkup(<PublicPostFeedSkeleton />);
+
+    expect(html).toContain('aria-label="Loading Posts"');
+    expect(html).toContain('aria-busy="true"');
+    expect(html.match(/data-post-skeleton-row/g)).toHaveLength(3);
+    expect(html).toContain("Loading Posts…");
+  });
+
+  it("pins recognizable matching Draft Posts above Published Posts", () => {
+    const draft = {
+      id: "draft-id",
+      slug: "keyboard-draft",
+      title: "Keyboard draft",
+      description: "Keyboard access still being drafted.",
+      type: "Feature Request" as const,
+      status: "New" as const,
+      submitter: {},
+      createdAt: new Date("2026-08-22T10:00:00.000Z"),
+      updatedAt: new Date("2026-08-22T10:00:00.000Z"),
+    };
+    const html = renderIndex(
+      <PublicPostIndex
+        page={{ items: [publishedPost] }}
+        search={{ search: "keyboard", types: ["Feature Request"] }}
+      />,
+      [draft],
+    );
+
+    expect(html.indexOf("Keyboard draft")).toBeLessThan(
+      html.indexOf("Keyboard-first search!"),
+    );
+    expect(html.match(/<ol class="divide-y/g)).toHaveLength(1);
+    expect(html).toContain("draft-post-link");
+    expect(html).toContain(">Draft</span>");
+  });
+});
+
+function renderIndex(
+  element: React.ReactElement,
+  drafts: unknown[] = [],
+): string {
+  return renderToStaticMarkup(withIndexQueryClient(element, drafts));
+}
+
+function renderIndexIntoDocument(element: React.ReactElement) {
+  render(withIndexQueryClient(element));
+}
+
+function withIndexQueryClient(
+  element: React.ReactElement,
+  drafts: unknown[] = [],
+) {
+  const queryClient = new QueryClient();
+  queryClient.setQueryData(authorizedDraftPostsQueryKey({}), drafts);
+  return (
+    <QueryClientProvider client={queryClient}>{element}</QueryClientProvider>
+  );
+}
+
+const publishedPost = {
+  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: 7,
+  createdAt: new Date("2026-08-20T10:00:00.000Z"),
+  updatedAt: new Date("2026-08-20T12:00:00.000Z"),
+};

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

@@ -0,0 +1,86 @@
+import type {
+  FeedbackModule,
+  PostStatus,
+  PostType,
+  PublicPostQuery,
+  PublicPostPage,
+} from "@feedbax/feedback";
+import type { PortalFeatures } from "@feedbax/config";
+import feedbax from "./feedbax";
+
+export const postTypes = [
+  "Feature Request",
+  "Bug Report",
+  "General Feedback",
+] as const satisfies readonly PostType[];
+export const postStatuses = [
+  "New",
+  "Reviewing",
+  "Planned",
+  "In Progress",
+  "Shipped",
+  "Closed",
+] as const satisfies readonly PostStatus[];
+export const postSorts = ["top", "new"] as const;
+
+export async function loadPublicPostPage({
+  feedback,
+  search,
+}: {
+  feedback: Pick<FeedbackModule, "listPublicPosts">;
+  search: Record<string, unknown>;
+}): Promise<PublicPostPage> {
+  const query = publicPostSearch(search);
+  const defaultTop =
+    query.sort !== "new" &&
+    !query.search &&
+    !query.status &&
+    !query.statuses?.length;
+  return feedback.listPublicPosts({
+    ...query,
+    ...(defaultTop
+      ? { statuses: postStatuses.filter((status) => status !== "Shipped") }
+      : {}),
+  });
+}
+
+export function publicPostSearch(
+  search: Record<string, unknown>,
+  features: PortalFeatures = feedbax.features,
+): PublicPostQuery & { pageSize?: string; schema?: string } {
+  const cursor = text(search.cursor);
+  const query = text(search.search);
+  const sortValue = text(search.sort);
+  const types = values(search.types).filter((value): value is PostType =>
+    postTypes.includes(value as PostType),
+  );
+  const statuses = values(search.statuses).filter(
+    (value): value is PostStatus => postStatuses.includes(value as PostStatus),
+  );
+  return {
+    ...(text(search.pageSize) ? { pageSize: text(search.pageSize) } : {}),
+    ...(text(search.schema) ? { schema: text(search.schema) } : {}),
+    ...(cursor ? { cursor } : {}),
+    ...(query ? { search: query } : {}),
+    sort: !features.voting
+      ? "new"
+      : sortValue === "trending"
+        ? "top"
+        : postSorts.includes(sortValue as (typeof postSorts)[number])
+          ? (sortValue as PublicPostQuery["sort"])
+          : "top",
+    ...(types.length ? { types } : {}),
+    ...(statuses.length ? { statuses } : {}),
+  };
+}
+
+function text(value: unknown) {
+  return typeof value === "string" && value ? value : undefined;
+}
+function values(value: unknown): string[] {
+  return Array.isArray(value)
+    ? value.filter((entry): entry is string => typeof entry === "string")
+    : typeof value === "string"
+      ? value.split(",").filter(Boolean)
+      : [];
+}

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

@@ -0,0 +1,22 @@
+import { createServerFn } from "@tanstack/react-start";
+
+import { createConfiguredFeedbackModule } from "./feedback-runtime";
+import { loadPublicPostPage, publicPostSearch } from "./public-feedback-page";
+import { runSafePublicRead } from "./safe-public-failure";
+
+export const getPublicPostPage = createServerFn({ method: "GET" })
+  .validator((input: unknown) =>
+    publicPostSearch(
+      typeof input === "object" && input !== null
+        ? (input as Record<string, unknown>)
+        : {},
+    ),
+  )
+  .handler(({ data }) =>
+    runSafePublicRead(() =>
+      loadPublicPostPage({
+        feedback: createConfiguredFeedbackModule(),
+        search: data,
+      }),
+    ),
+  );

package/template/src/public-portal-error.tsx

@@ -0,0 +1,27 @@
+import { Button } from "@feedbax/ui/components/button";
+
+export function PublicPortalError({
+  reset,
+}: {
+  error: Error;
+  reset: () => void;
+}) {
+  return (
+    <main className="public-error">
+      <p className="feedback-eyebrow">Temporary interruption</p>
+      <h1>Posts are temporarily unavailable.</h1>
+      <p>
+        We couldn’t reach the Post service after several attempts. Your private
+        information has not been displayed.
+      </p>
+      <div className="public-error-actions">
+        <Button type="button" onClick={reset}>
+          Try again
+        </Button>
+        <Button render={<a href="/" />} variant="outline">
+          Return to the portal
+        </Button>
+      </div>
+    </main>
+  );
+}