create-feedbax 0.1.0 → 0.2.0

package/template/src/post-feed-controls.tsx

@@ -0,0 +1,298 @@
+import type { PostStatus, PostType, PublicPostQuery } from "@feedbax/feedback";
+import type { PortalFeatures } from "@feedbax/config";
+import { Button } from "@feedbax/ui/components/button";
+import { ButtonGroup } from "@feedbax/ui/components/button-group";
+import { Card } from "@feedbax/ui/components/card";
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "@feedbax/ui/components/sheet";
+import { List, ListFilter } from "lucide-react";
+import { type ComponentType } from "react";
+
+import { CommandPaletteTrigger } from "./components/command-palette-context";
+import { CreatePostTrigger } from "./components/create-post-trigger";
+import { postStatuses, postTypes } from "./public-feedback-page";
+import {
+  postStatusPresentation,
+  postTypePresentation,
+} from "./post-presentation";
+import { useMediaQuery } from "./use-media-query";
+import feedbax from "./feedbax";
+
+type SearchChange = (search: PublicPostQuery) => void;
+
+const boards = [
+  { label: "All posts", type: undefined, icon: List },
+  ...postTypes.map((type) => ({
+    label: postTypePresentation[type].boardLabel,
+    type,
+    icon: postTypePresentation[type].Icon,
+  })),
+] as const satisfies readonly {
+  label: string;
+  type: PostType | undefined;
+  icon: ComponentType<{ className?: string; "aria-hidden"?: boolean }>;
+}[];
+
+const roadmapStatuses = [
+  "Planned",
+  "In Progress",
+  "Shipped",
+] as const satisfies readonly PostStatus[];
+
+const sortOptions = [
+  { label: "Top", value: "top" },
+  { label: "New", value: "new" },
+] as const satisfies readonly {
+  label: string;
+  value: NonNullable<PublicPostQuery["sort"]>;
+}[];
+
+const mobileMediaQuery = "(max-width: 1023px)";
+
+export function PostFeedControls({
+  search,
+  onSearchChange,
+  pending = false,
+  contextualCreatePost = false,
+  features = feedbax.features,
+}: {
+  search: PublicPostQuery;
+  onSearchChange?: SearchChange;
+  pending?: boolean;
+  contextualCreatePost?: boolean;
+  features?: PortalFeatures;
+}) {
+  const mobile = useMediaQuery(mobileMediaQuery);
+  const newPost = (
+    <CreatePostTrigger
+      className={
+        mobile
+          ? "order-2 h-12 w-full px-5 text-sm"
+          : "order-3 h-10 w-auto px-5 text-sm"
+      }
+      contextual={contextualCreatePost}
+    />
+  );
+
+  return (
+    <div
+      className="flex min-w-0 flex-1 flex-col gap-4 lg:flex-row lg:items-center lg:justify-between"
+      role="group"
+      aria-label="Post feed controls"
+      aria-busy={pending || undefined}
+    >
+      {pending ? <span className="sr-only">Updating Posts…</span> : null}
+      <ButtonGroup
+        aria-label="Sort Posts"
+        className={
+          mobile
+            ? `order-1 grid h-12 w-full ${features.voting ? "grid-cols-2" : "grid-cols-1"}`
+            : `order-1 grid h-10 ${features.voting ? "w-48 grid-cols-2" : "w-24 grid-cols-1"}`
+        }
+      >
+        {sortOptions
+          .filter(({ value }) => features.voting || value === "new")
+          .map(({ label, value }) => (
+            <Button
+              key={value}
+              type="button"
+              variant="outline"
+              aria-pressed={
+                (search.sort ?? (features.voting ? "top" : "new")) === value
+              }
+              className={`${mobile ? "h-12" : "h-10"} px-5 text-sm aria-pressed:bg-muted aria-pressed:text-foreground`}
+              onClick={() =>
+                onSearchChange?.({
+                  ...search,
+                  cursor: undefined,
+                  sort: value,
+                })
+              }
+            >
+              {label}
+            </Button>
+          ))}
+      </ButtonGroup>
+      {mobile ? (
+        <>
+          {newPost}
+          <div className="order-3 grid grid-cols-[minmax(0,1fr)_auto] gap-3">
+            <CommandPaletteTrigger className="h-12 w-full justify-start" />
+            <MobilePostFilters
+              search={search}
+              onSearchChange={onSearchChange}
+            />
+          </div>
+        </>
+      ) : (
+        <>
+          <CommandPaletteTrigger className="order-2 ml-auto justify-center" />
+          {newPost}
+        </>
+      )}
+    </div>
+  );
+}
+
+export function BoardNavigation({
+  search,
+  onSearchChange,
+  headingId = "boards-heading",
+  ariaLabel,
+}: {
+  search: PublicPostQuery;
+  onSearchChange?: SearchChange;
+  headingId?: string;
+  ariaLabel?: string;
+}) {
+  const activeType = search.types?.length === 1 ? search.types[0] : undefined;
+  const hasNoType = !search.types?.length;
+
+  return (
+    <nav
+      aria-labelledby={ariaLabel ? undefined : headingId}
+      aria-label={ariaLabel}
+    >
+      <h2 id={headingId} className="mb-3 text-sm font-medium">
+        Boards
+      </h2>
+      <Card className="gap-0 overflow-hidden py-0">
+        {boards.map(({ label, type, icon: Icon }) => {
+          const active = type ? activeType === type : hasNoType;
+          return (
+            <Button
+              key={label}
+              type="button"
+              variant="ghost"
+              aria-pressed={active}
+              className="h-12 w-full justify-start gap-3 border-b px-4 text-sm text-muted-foreground last:border-b-0 aria-pressed:bg-muted aria-pressed:text-foreground"
+              onClick={() =>
+                onSearchChange?.({
+                  ...search,
+                  cursor: undefined,
+                  types: !type || active ? undefined : [type],
+                })
+              }
+            >
+              <Icon className="size-4" aria-hidden="true" />
+              {label}
+            </Button>
+          );
+        })}
+      </Card>
+    </nav>
+  );
+}
+
+export function StatusNavigation({
+  search,
+  onSearchChange,
+  headingId = "status-filters-heading",
+  ariaLabel = "Status filters",
+  statuses = roadmapStatuses,
+}: {
+  search: PublicPostQuery;
+  onSearchChange?: SearchChange;
+  headingId?: string;
+  ariaLabel?: string;
+  statuses?: readonly PostStatus[];
+}) {
+  const selected = search.statuses ?? [];
+
+  return (
+    <section aria-labelledby={headingId}>
+      <h2 id={headingId} className="mb-3 text-sm font-medium">
+        Status
+      </h2>
+      <Card
+        className="gap-0 overflow-hidden py-0"
+        role="group"
+        aria-label={ariaLabel}
+      >
+        {statuses.map((status) => {
+          const { Icon, label } = postStatusPresentation[status];
+          const active = selected.includes(status);
+          const nextStatuses = active
+            ? selected.filter((candidate) => candidate !== status)
+            : [...selected, status];
+          return (
+            <Button
+              key={status}
+              type="button"
+              variant="ghost"
+              aria-pressed={active}
+              className="h-12 w-full justify-start gap-3 border-b px-4 text-sm text-muted-foreground last:border-b-0 aria-pressed:bg-muted aria-pressed:text-foreground"
+              onClick={() =>
+                onSearchChange?.({
+                  ...search,
+                  cursor: undefined,
+                  statuses: nextStatuses.length ? nextStatuses : undefined,
+                })
+              }
+            >
+              <Icon className="size-4" aria-hidden="true" />
+              {label}
+            </Button>
+          );
+        })}
+      </Card>
+    </section>
+  );
+}
+
+export function MobilePostFilters({
+  search,
+  onSearchChange,
+}: {
+  search: PublicPostQuery;
+  onSearchChange?: SearchChange;
+}) {
+  return (
+    <Sheet>
+      <SheetTrigger
+        render={
+          <Button
+            className="h-12 gap-2 px-4 text-sm lg:hidden"
+            type="button"
+            variant="outline"
+          />
+        }
+      >
+        <ListFilter aria-hidden="true" />
+        Filters
+      </SheetTrigger>
+      <SheetContent
+        className="w-[min(100%,24rem)] overflow-y-auto lg:hidden"
+        side="right"
+      >
+        <SheetHeader className="border-b p-6 pr-14">
+          <SheetTitle className="text-lg">Filter Posts</SheetTitle>
+          <SheetDescription>
+            Choose a Board and combine any Post Statuses.
+          </SheetDescription>
+        </SheetHeader>
+        <div className="space-y-8 p-6">
+          <BoardNavigation
+            search={search}
+            onSearchChange={onSearchChange}
+            headingId="mobile-boards-heading"
+            ariaLabel="Mobile Boards"
+          />
+          <StatusNavigation
+            search={search}
+            onSearchChange={onSearchChange}
+            headingId="mobile-status-filters-heading"
+            ariaLabel="Mobile Status filters"
+            statuses={postStatuses}
+          />
+        </div>
+      </SheetContent>
+    </Sheet>
+  );
+}

package/template/src/post-presentation.ts

@@ -0,0 +1,37 @@
+import type { PostStatus, PostType } from "@feedbax/feedback";
+import {
+  Bug,
+  CalendarDays,
+  CheckCircle2,
+  Circle,
+  CircleDot,
+  Lightbulb,
+  MessageCircle,
+  Search,
+  XCircle,
+  type LucideIcon,
+} from "lucide-react";
+
+export const postTypePresentation = {
+  "Feature Request": {
+    Icon: Lightbulb,
+    boardLabel: "Feature requests",
+  },
+  "Bug Report": {
+    Icon: Bug,
+    boardLabel: "Bug reports",
+  },
+  "General Feedback": {
+    Icon: MessageCircle,
+    boardLabel: "General feedback",
+  },
+} satisfies Record<PostType, { Icon: LucideIcon; boardLabel: string }>;
+
+export const postStatusPresentation = {
+  New: { Icon: Circle, label: "New" },
+  Reviewing: { Icon: Search, label: "Reviewing" },
+  Planned: { Icon: CalendarDays, label: "Planned" },
+  "In Progress": { Icon: CircleDot, label: "In progress" },
+  Shipped: { Icon: CheckCircle2, label: "Shipped" },
+  Closed: { Icon: XCircle, label: "Closed" },
+} satisfies Record<PostStatus, { Icon: LucideIcon; label: string }>;

package/template/src/post-queries.test.ts

@@ -0,0 +1,158 @@
+import { InfiniteQueryObserver, QueryClient } from "@tanstack/react-query";
+import type { PublicPostPage } from "@feedbax/feedback";
+import { describe, expect, it, vi } from "vitest";
+
+import { publicPostsQuery } from "./post-queries";
+import { authorizedDraftPostsQuery } from "./authorized-draft-query";
+import { capabilitiesKey, readCapabilities } from "./browser-post-state";
+
+vi.mock("./public-feedback-server-function", () => ({
+  getPublicPostPage: vi.fn(),
+}));
+
+describe("public Posts query", () => {
+  it("reuses the loader page and retains it when another cursor page loads", async () => {
+    const pages: Record<string, PublicPostPage> = {
+      first: {
+        items: [post("first-post")],
+        nextCursor: "opaque-cursor",
+      },
+      "opaque-cursor": { items: [post("second-post")] },
+    };
+    const fetchPage = vi.fn(async ({ cursor }: { cursor?: string }) =>
+      cursor ? pages[cursor]! : pages.first!,
+    );
+    const client = new QueryClient();
+    const options = publicPostsQuery({ sort: "trending" }, fetchPage);
+
+    await client.ensureInfiniteQueryData(options);
+    expect(fetchPage).toHaveBeenCalledTimes(1);
+
+    const observer = new InfiniteQueryObserver(client, options);
+    await observer.fetchNextPage();
+
+    expect(fetchPage).toHaveBeenCalledTimes(2);
+    expect(client.getQueryData(options.queryKey)).toMatchObject({
+      pages: [pages.first, pages["opaque-cursor"]],
+      pageParams: [undefined, "opaque-cursor"],
+    });
+  });
+});
+
+describe("authorized Draft Posts query", () => {
+  it("keeps Browser Capability secrets out of its key and cached result", async () => {
+    const secret = "private-browser-capability";
+    const capabilities = {
+      "draft-id": {
+        id: "draft-id",
+        slug: "private-draft",
+        browserCapability: secret,
+      },
+    };
+    const fetchDraft = vi.fn(async () => draft("draft-id"));
+    const client = new QueryClient();
+    const options = authorizedDraftPostsQuery(capabilities, fetchDraft);
+
+    await client.ensureQueryData(options);
+
+    expect(fetchDraft).toHaveBeenCalledWith({
+      data: {
+        id: "draft-id",
+        slug: "private-draft",
+        browserCapability: secret,
+      },
+    });
+    expect(JSON.stringify(options.queryKey)).not.toContain(secret);
+    expect(JSON.stringify(client.getQueryData(options.queryKey))).not.toContain(
+      secret,
+    );
+  });
+
+  it("removes only capabilities proven invalid while retaining valid drafts", async () => {
+    const storage = memoryStorage({
+      [capabilitiesKey]: JSON.stringify({
+        valid: {
+          id: "valid",
+          slug: "valid-draft",
+          browserCapability: "valid-secret",
+        },
+        expired: {
+          id: "expired",
+          slug: "expired-draft",
+          browserCapability: "expired-secret",
+        },
+      }),
+    });
+    const fetchDraft = vi.fn(async ({ data }: { data: { id: string } }) => {
+      if (data.id === "expired") {
+        throw new Error("Browser Capability did not authorize this draft.");
+      }
+      return draft(data.id);
+    });
+    const client = new QueryClient();
+
+    const drafts = await client.ensureQueryData(
+      authorizedDraftPostsQuery(readCapabilities(storage), fetchDraft, storage),
+    );
+
+    expect(drafts.map((item) => item.id)).toEqual(["valid"]);
+    expect(Object.keys(readCapabilities(storage))).toEqual(["valid"]);
+  });
+
+  it("keeps cached drafts visible when a private retrieval fails transiently", async () => {
+    const capabilities = {
+      valid: {
+        id: "valid",
+        slug: "valid-draft",
+        browserCapability: "valid-secret",
+      },
+    };
+    const options = authorizedDraftPostsQuery(capabilities, async () => {
+      throw new Error("Post service unavailable");
+    });
+    const cached = [draft("valid")];
+    const client = new QueryClient();
+    client.setQueryData(options.queryKey, cached);
+    await client.invalidateQueries({ queryKey: options.queryKey });
+
+    await expect(client.fetchQuery(options)).rejects.toThrow(
+      "Post service unavailable",
+    );
+
+    expect(client.getQueryData(options.queryKey)).toEqual(cached);
+  });
+});
+
+function post(slug: string) {
+  return {
+    slug,
+    title: slug,
+    description: `${slug} 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"),
+  };
+}
+
+function draft(id: string) {
+  return {
+    id,
+    slug: `${id}-draft`,
+    title: `${id} draft`,
+    description: `${id} description`,
+    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"),
+  };
+}
+
+function memoryStorage(initial: Record<string, string>) {
+  const values = new Map(Object.entries(initial));
+  return {
+    getItem: (key: string) => values.get(key) ?? null,
+    setItem: (key: string, value: string) => values.set(key, value),
+  };
+}

package/template/src/post-queries.ts

@@ -0,0 +1,26 @@
+import { infiniteQueryOptions } from "@tanstack/react-query";
+import type { PublicPostQuery, PublicPostPage } from "@feedbax/feedback";
+
+export type FetchPublicPostsPage = (
+  search: PublicPostQuery,
+) => Promise<PublicPostPage>;
+
+export const publicPostsQueryKey = ["public-posts"] as const;
+
+export function publicPostsQuery(
+  search: PublicPostQuery,
+  fetchPage: FetchPublicPostsPage,
+) {
+  const querySearch = { ...search, cursor: undefined };
+  return infiniteQueryOptions({
+    queryKey: [...publicPostsQueryKey, querySearch] as const,
+    initialPageParam: undefined as string | undefined,
+    queryFn: ({ pageParam }) =>
+      fetchPage({
+        ...querySearch,
+        ...(pageParam ? { cursor: pageParam } : {}),
+      }),
+    getNextPageParam: (page) => page.nextCursor,
+    staleTime: 30_000,
+  });
+}

package/template/src/post-results.tsx

@@ -0,0 +1,165 @@
+import type { DraftPost, PublicPost } from "@feedbax/feedback";
+import type { PortalFeatures } from "@feedbax/config";
+import { Badge } from "@feedbax/ui/components/badge";
+import { Button } from "@feedbax/ui/components/button";
+import {
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+} from "@feedbax/ui/components/empty";
+import { SearchX } from "lucide-react";
+
+import { PostLink } from "./masked-post-link";
+import { PostStatusBadge, PostTypeBadge } from "./post-badges";
+import feedbax from "./feedbax";
+import { VoteToggle } from "./vote-toggle";
+
+export function PostResults({
+  drafts = [],
+  initialItems,
+  nextCursor,
+  loadMore,
+  loadingMore = false,
+  loadMoreError = false,
+  maskPostLinks = false,
+  features = feedbax.features,
+}: {
+  drafts?: DraftPost[];
+  initialItems: PublicPost[];
+  nextCursor?: string;
+  loadMore?: () => void;
+  loadingMore?: boolean;
+  loadMoreError?: boolean;
+  maskPostLinks?: boolean;
+  features?: PortalFeatures;
+}) {
+  if (!drafts.length && !initialItems.length) {
+    return (
+      <Empty className="min-h-72 border">
+        <EmptyHeader>
+          <EmptyMedia variant="icon">
+            <SearchX aria-hidden="true" />
+          </EmptyMedia>
+          <EmptyTitle>No Posts match this view.</EmptyTitle>
+          <EmptyDescription>
+            Try another Board or remove a Status filter.
+          </EmptyDescription>
+        </EmptyHeader>
+        <EmptyContent>
+          <Button
+            render={<a href="/" />}
+            nativeButton={false}
+            variant="outline"
+          >
+            Clear filters
+          </Button>
+        </EmptyContent>
+      </Empty>
+    );
+  }
+
+  return (
+    <>
+      <ol className="divide-y overflow-hidden border bg-card/30">
+        {drafts.map((post) => (
+          <PostResultRow
+            key={post.id}
+            post={post}
+            draft
+            maskPostLinks={maskPostLinks}
+            features={features}
+          />
+        ))}
+        {initialItems.map((post) => (
+          <PostResultRow
+            key={post.slug}
+            post={post}
+            maskPostLinks={maskPostLinks}
+            features={features}
+          />
+        ))}
+      </ol>
+      {loadMoreError ? (
+        <div role="alert" className="mt-6 flex items-center gap-3 border p-4">
+          <p className="mr-auto text-sm">Couldn’t load more Posts.</p>
+          <Button type="button" onClick={loadMore}>
+            Try again
+          </Button>
+        </div>
+      ) : null}
+      {nextCursor ? (
+        <Button
+          className="mt-6"
+          type="button"
+          onClick={loadMore}
+          disabled={loadingMore || loadMoreError || !loadMore}
+        >
+          {loadingMore ? "Loading…" : "Load More"}
+        </Button>
+      ) : null}
+    </>
+  );
+}
+
+function PostResultRow({
+  post,
+  draft = false,
+  maskPostLinks,
+  features,
+}: {
+  post: DraftPost | PublicPost;
+  draft?: boolean;
+  maskPostLinks: boolean;
+  features: PortalFeatures;
+}) {
+  const votingEligible =
+    features.voting &&
+    !draft &&
+    "voteCount" in post &&
+    post.voteCount !== undefined;
+  return (
+    <li className="relative">
+      {votingEligible ? (
+        <div className="absolute top-5 left-5 z-10 flex h-[4.75rem] w-16 items-center justify-center sm:w-[4.75rem]">
+          <VoteToggle post={post} />
+        </div>
+      ) : null}
+      <PostLink
+        className={draft ? "post-link draft-post-link" : "post-link"}
+        slug={post.slug}
+        contextual={maskPostLinks}
+      >
+        <article
+          className={`relative grid ${features.voting ? "grid-cols-[4rem_minmax(0,1fr)] sm:grid-cols-[4.75rem_minmax(0,1fr)]" : "grid-cols-1"} items-start gap-4 p-5 transition-colors duration-150 hover:bg-muted/30 sm:items-center`}
+        >
+          {features.voting ? (
+            <span className="h-[4.75rem]" aria-hidden="true" />
+          ) : null}
+          <span className="min-w-0 sm:pr-16">
+            <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">
+              {post.description}
+            </span>
+            <span
+              className="mt-3 flex flex-wrap items-center gap-2 text-xs text-muted-foreground"
+              role="group"
+              aria-label="Post metadata"
+            >
+              <PostTypeBadge type={post.type} />
+              {draft ? (
+                <Badge variant="outline">Draft</Badge>
+              ) : (
+                <PostStatusBadge status={post.status} />
+              )}
+            </span>
+          </span>
+        </article>
+      </PostLink>
+    </li>
+  );
+}