create-feedbax 0.1.0 → 0.2.1

package/template/src/comment-creation.test.tsx

@@ -0,0 +1,311 @@
+// @vitest-environment jsdom
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { cleanup } from "@testing-library/react";
+import type { ComponentProps } from "react";
+
+import { saveDeviceProfile } from "./browser-post-state";
+import { PublicPostDetail } from "./public-post-detail";
+import { submitPublicComment } from "./public-post-route";
+import { DeviceProfileProvider } from "./components/device-profile-provider";
+
+const post = {
+  slug: "roadmap-search",
+  title: "Roadmap search",
+  description: "Search the roadmap.",
+  type: "Feature Request" as const,
+  status: "Planned" as const,
+  createdAt: new Date("2026-08-25T00:00:00.000Z"),
+  updatedAt: new Date("2026-08-25T00:00:00.000Z"),
+  voteCount: 1,
+};
+
+afterEach(() => {
+  cleanup();
+  localStorage.clear();
+  sessionStorage.clear();
+  vi.restoreAllMocks();
+  delete window.turnstile;
+});
+
+describe("Comment creation", () => {
+  it("renders a clearly identified Comment composer for a complete Device Profile", async () => {
+    saveDeviceProfile(localStorage, {
+      name: "Ari",
+      email: "private@example.com",
+    });
+    renderCommentDetail({ submitComment: vi.fn() });
+
+    const composer = await screen.findByRole("form", {
+      name: "Comment composer",
+    });
+    expect(composer.classList.contains("comment-composer")).toBe(true);
+    expect(screen.getByLabelText("Add a comment").getAttribute("rows")).toBe(
+      "3",
+    );
+    expect(
+      screen.getByPlaceholderText("Share context, an example, or a question…"),
+    ).toBeTruthy();
+  });
+
+  it("deserializes Notion confirmation and clears a rejected Participation Pass", async () => {
+    vi.spyOn(globalThis, "fetch").mockResolvedValueOnce(
+      Response.json({
+        comment: {
+          id: "notion-comment",
+          discussionId: "notion-discussion",
+          body: "Confirmed",
+          author: { kind: "participant", displayName: "Ari" },
+          createdAt: "2026-08-25T01:00:00.000Z",
+        },
+      }),
+    );
+    const confirmed = await submitPublicComment({
+      slug: "roadmap-search",
+      body: "Confirmed",
+      displayName: "Ari",
+      email: "private@example.com",
+    });
+    expect(confirmed.createdAt).toEqual(new Date("2026-08-25T01:00:00.000Z"));
+
+    sessionStorage.setItem("feedbax:participation-pass", "expired");
+    vi.mocked(fetch).mockResolvedValueOnce(
+      Response.json(
+        {
+          error: "Comment verification is required.",
+          code: "verification_required",
+        },
+        { status: 400 },
+      ),
+    );
+    await expect(
+      submitPublicComment({
+        slug: "roadmap-search",
+        body: "Retry",
+        displayName: "Ari",
+        email: "private@example.com",
+        participationPass: "expired",
+      }),
+    ).rejects.toThrow("verification is required");
+    expect(sessionStorage.getItem("feedbax:participation-pass")).toBeNull();
+  });
+  it("adds a Comment optimistically and replaces it with Notion's confirmation", async () => {
+    saveDeviceProfile(localStorage, {
+      name: "Ari",
+      email: "private@example.com",
+    });
+    let confirm!: (value: {
+      id: string;
+      discussionId: string;
+      body: string;
+      author: { kind: "participant"; displayName: string };
+      createdAt: Date;
+    }) => void;
+    const submitComment = vi.fn(
+      () => new Promise<never>((resolve) => (confirm = resolve as never)),
+    );
+    renderCommentDetail({ submitComment });
+
+    fireEvent.change(await screen.findByLabelText("Add a comment"), {
+      target: { value: "Please add shortcuts." },
+    });
+    fireEvent.click(screen.getByRole("button", { name: "Post comment" }));
+    expect(screen.getByText("Please add shortcuts.")).toBeTruthy();
+    expect(submitComment).toHaveBeenCalledWith({
+      slug: "roadmap-search",
+      body: "Please add shortcuts.",
+      displayName: "Ari",
+      email: "private@example.com",
+    });
+
+    confirm({
+      id: "notion-comment",
+      discussionId: "notion-discussion",
+      body: "Please add shortcuts.",
+      author: { kind: "participant", displayName: "Ari" },
+      createdAt: new Date("2026-08-25T01:00:00.000Z"),
+    });
+    await waitFor(() =>
+      expect(screen.getAllByText("Please add shortcuts.")).toHaveLength(1),
+    );
+  });
+
+  it("replaces the Comment composer with profile completion until name and email are present", async () => {
+    saveDeviceProfile(localStorage, { name: "Ari" });
+    const submitComment = vi.fn();
+    renderCommentDetail({ submitComment });
+
+    expect(await screen.findByText("Complete your profile")).toBeTruthy();
+    expect(screen.queryByLabelText("Add a comment")).toBeNull();
+    fireEvent.click(screen.getByRole("button", { name: "Complete profile" }));
+    fireEvent.change(await screen.findByLabelText("Email"), {
+      target: { value: "private@example.com" },
+    });
+    fireEvent.click(screen.getByRole("button", { name: "Save profile" }));
+
+    expect(submitComment).not.toHaveBeenCalled();
+    expect(await screen.findByLabelText("Add a comment")).toBeTruthy();
+  });
+
+  it("does not duplicate a native Comment that arrives before its submission confirmation", async () => {
+    saveDeviceProfile(localStorage, {
+      name: "Ari",
+      email: "private@example.com",
+    });
+    const confirmed = {
+      id: "native-comment",
+      discussionId: "native-thread",
+      body: "One comment",
+      author: { kind: "participant" as const, displayName: "Ari" },
+      createdAt: new Date(),
+    };
+    let finish!: (value: typeof confirmed) => void;
+    const submitComment = vi.fn(
+      () =>
+        new Promise<typeof confirmed>((resolve) => {
+          finish = resolve;
+        }),
+    );
+    const view = renderCommentDetail({ submitComment });
+    fireEvent.change(await screen.findByLabelText("Add a comment"), {
+      target: { value: confirmed.body },
+    });
+    fireEvent.click(screen.getByRole("button", { name: "Post comment" }));
+    view.rerender(
+      <DeviceProfileProvider>
+        <PublicPostDetail
+          post={post}
+          submitComment={submitComment}
+          comments={{
+            items: [{ id: confirmed.discussionId, comments: [confirmed] }],
+          }}
+        />
+      </DeviceProfileProvider>,
+    );
+    finish(confirmed);
+    await waitFor(() =>
+      expect(screen.getAllByText("One comment")).toHaveLength(1),
+    );
+  });
+
+  it("rolls back a rejected Comment and shows an actionable error", async () => {
+    saveDeviceProfile(localStorage, {
+      name: "Ari",
+      email: "private@example.com",
+    });
+    renderCommentDetail({
+      submitComment: () =>
+        Promise.reject(new Error("Notion timed out. Try again.")),
+    });
+    fireEvent.change(await screen.findByLabelText("Add a comment"), {
+      target: { value: "Temporary message" },
+    });
+    fireEvent.click(screen.getByRole("button", { name: "Post comment" }));
+    expect(screen.getByText("Temporary message")).toBeTruthy();
+    await screen.findByRole("alert");
+    expect(screen.queryByText("Temporary message")).toBeNull();
+    expect(screen.getByRole("alert").textContent).toContain("Try again");
+  });
+
+  it("renders a fresh Turnstile challenge after a stale Participation Pass is rejected", async () => {
+    saveDeviceProfile(localStorage, {
+      name: "Ari",
+      email: "private@example.com",
+    });
+    sessionStorage.setItem("feedbax:participation-pass", "expired");
+    const renderTurnstile = vi.fn().mockReturnValue("widget-1");
+    window.turnstile = { render: renderTurnstile, reset: vi.fn() };
+    renderCommentDetail({
+      turnstileSiteKey: "public-site-key",
+      submitComment: () => {
+        sessionStorage.removeItem("feedbax:participation-pass");
+        return Promise.reject(new Error("Comment verification is required."));
+      },
+    });
+    fireEvent.change(await screen.findByLabelText("Add a comment"), {
+      target: { value: "Retry with verification" },
+    });
+    fireEvent.click(screen.getByRole("button", { name: "Post comment" }));
+
+    await screen.findByRole("alert");
+    await waitFor(() => expect(renderTurnstile).toHaveBeenCalled());
+  });
+
+  it("rolls back an optimistic Comment edit when the server rejects it", async () => {
+    saveDeviceProfile(localStorage, {
+      name: "Ari",
+      email: "private@example.com",
+    });
+    localStorage.setItem(
+      "feedbax:comment-capabilities",
+      JSON.stringify({
+        "comment-1": {
+          capability: "signed-capability",
+          expiresAt: Date.now() + 60_000,
+        },
+      }),
+    );
+    vi.spyOn(window, "prompt").mockReturnValue("Corrected message");
+    let rejectMutation!: (reason: Error) => void;
+    const mutateComment = vi.fn(
+      () =>
+        new Promise<never>((_resolve, reject) => {
+          rejectMutation = reject;
+        }),
+    );
+    renderCommentDetail({
+      comments: {
+        items: [
+          {
+            id: "discussion-1",
+            comments: [
+              {
+                id: "comment-1",
+                body: "Original message",
+                author: { kind: "participant", displayName: "Ari" },
+                createdAt: new Date("2026-08-25T01:00:00.000Z"),
+              },
+            ],
+          },
+        ],
+      },
+      submitComment: vi.fn(),
+      mutateComment,
+    });
+
+    const actions = await screen.findByRole("group", {
+      name: "Comment actions by Ari",
+    });
+    expect(
+      Array.from(actions.querySelectorAll("button"), (button) =>
+        button.textContent?.trim(),
+      ),
+    ).toEqual(["Reply", "Edit", "Delete"]);
+    fireEvent.click(screen.getByRole("button", { name: "Edit" }));
+    fireEvent.change(screen.getByRole("textbox", { name: "Comment text" }), {
+      target: { value: "Corrected message" },
+    });
+    fireEvent.click(screen.getByRole("button", { name: "Save" }));
+    expect(screen.getByText("Corrected message")).toBeTruthy();
+    expect(mutateComment).toHaveBeenCalledWith({
+      action: "edit",
+      commentId: "comment-1",
+      commentCapability: "signed-capability",
+      body: "Corrected message",
+    });
+    rejectMutation(new Error("Notion rejected the update. Try again."));
+    await screen.findByRole("alert");
+    expect(screen.getByText("Original message")).toBeTruthy();
+    expect(screen.queryByText("Corrected message")).toBeNull();
+  });
+});
+
+function renderCommentDetail(
+  props: Omit<ComponentProps<typeof PublicPostDetail>, "post"> = {},
+) {
+  return render(
+    <DeviceProfileProvider>
+      <PublicPostDetail post={post} {...props} />
+    </DeviceProfileProvider>,
+  );
+}

package/template/src/comment-profile.ts

@@ -0,0 +1,5 @@
+import { z } from "zod";
+
+export function isValidCommentEmail(value: unknown): value is string {
+  return typeof value === "string" && z.email().safeParse(value.trim()).success;
+}

package/template/src/comment-thread-page.ts

@@ -0,0 +1,28 @@
+import type { CommentThreadPage } from "@feedbax/feedback";
+
+export function mergeCommentThreads(
+  current: CommentThreadPage["items"],
+  next: CommentThreadPage["items"],
+): CommentThreadPage["items"] {
+  const merged = new Map(current.map((thread) => [thread.id, thread]));
+  for (const thread of next) {
+    const existing = merged.get(thread.id);
+    merged.set(
+      thread.id,
+      existing
+        ? {
+            ...existing,
+            comments: [
+              ...new Map(
+                [...existing.comments, ...thread.comments].map((comment) => [
+                  comment.id,
+                  comment,
+                ]),
+              ).values(),
+            ],
+          }
+        : thread,
+    );
+  }
+  return [...merged.values()];
+}

package/template/src/components/command-palette-context.tsx

@@ -0,0 +1,71 @@
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+  type ReactNode,
+} from "react";
+import { Search } from "lucide-react";
+
+import { Button } from "@feedbax/ui/components/button";
+import { cn } from "@feedbax/ui/lib/utils";
+
+const ignoreOpenChange = () => {};
+
+const CommandPaletteContext = createContext<{
+  open: boolean;
+  setOpen: (open: boolean) => void;
+} | null>(null);
+
+export function CommandPaletteProvider({ children }: { children: ReactNode }) {
+  const [open, setOpen] = useState(false);
+
+  useEffect(() => {
+    function onKeyDown(event: KeyboardEvent) {
+      if (event.key.toLowerCase() === "k" && (event.metaKey || event.ctrlKey)) {
+        event.preventDefault();
+        setOpen((current) => !current);
+      }
+    }
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, []);
+
+  const value = useMemo(() => ({ open, setOpen }), [open]);
+  return (
+    <CommandPaletteContext.Provider value={value}>
+      {children}
+    </CommandPaletteContext.Provider>
+  );
+}
+
+export function useCommandPalette() {
+  const context = useContext(CommandPaletteContext);
+  const setOpen = context?.setOpen ?? ignoreOpenChange;
+  const openPalette = useCallback(() => setOpen(true), [setOpen]);
+  return { open: context?.open ?? false, setOpen, openPalette };
+}
+
+export function CommandPaletteTrigger({
+  className,
+  compact = false,
+}: {
+  className?: string;
+  compact?: boolean;
+}) {
+  const { openPalette } = useCommandPalette();
+  return (
+    <Button
+      className={cn("h-10 gap-2 px-4 text-sm", className)}
+      variant="outline"
+      type="button"
+      aria-haspopup="dialog"
+      onClick={openPalette}
+    >
+      <Search aria-hidden="true" />
+      <span className={compact ? "sr-only" : undefined}>Search</span>
+    </Button>
+  );
+}

package/template/src/components/command-palette.tsx

@@ -0,0 +1,275 @@
+import { useEffect, useState } from "react";
+import { useInfiniteQuery, keepPreviousData } from "@tanstack/react-query";
+import { useRouter } from "@tanstack/react-router";
+import type { PublicPostPage } from "@feedbax/feedback";
+import type { PortalFeatures } from "@feedbax/config";
+
+import { Button } from "@feedbax/ui/components/button";
+import { Kbd, KbdGroup } from "@feedbax/ui/components/kbd";
+import { Spinner } from "@feedbax/ui/components/spinner";
+import {
+  Command,
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@feedbax/ui/components/command";
+import { FileText, LayoutList, Map, Newspaper, Plus } from "lucide-react";
+import { publicPostsQuery } from "../post-queries";
+import { useCommandPalette } from "./command-palette-context";
+import feedbax from "../feedbax";
+import { useDeviceProfile } from "./device-profile-provider";
+
+export {
+  CommandPaletteProvider,
+  CommandPaletteTrigger,
+  useCommandPalette,
+} from "./command-palette-context";
+
+type SearchPosts = (term: string) => Promise<PublicPostPage>;
+type NavigationTarget = "/" | "/roadmap" | "/changelog";
+
+export function CommandPalette({
+  searchPosts,
+  features = feedbax.features,
+}: {
+  searchPosts: SearchPosts;
+  features?: PortalFeatures;
+}) {
+  const router = useRouter();
+  const { open, setOpen } = useCommandPalette();
+  const [term, setTerm] = useState("");
+  const [selection, setSelection] = useState("go-feedback");
+  const deferredTerm = useDebouncedValue(term, 200);
+  const { completeProfile, openProfileSetup } = useDeviceProfile();
+
+  useEffect(() => {
+    if (!open) {
+      setTerm("");
+      setSelection("go-feedback");
+    }
+  }, [open]);
+
+  const query = useInfiniteQuery({
+    ...publicPostsQuery(
+      { search: deferredTerm, sort: features.voting ? "top" : "new" },
+      (search) => searchPosts(search.search ?? ""),
+    ),
+    enabled: open && deferredTerm.trim().length > 0,
+    placeholderData: keepPreviousData,
+  });
+  const posts = query.data?.pages.flatMap((page) => page.items) ?? [];
+  const hasTerm = term.trim().length > 0;
+  const settling = term.trim() !== deferredTerm.trim();
+  const showEmpty =
+    open &&
+    deferredTerm.trim().length > 0 &&
+    !query.isPending &&
+    !query.isError &&
+    !settling &&
+    posts.length === 0;
+  const searching = open && hasTerm && (settling || query.isFetching);
+  const searchStatus = searching
+    ? "Searching Posts…"
+    : showEmpty
+      ? "No Posts match this search."
+      : deferredTerm.trim().length > 0 && posts.length > 0
+        ? `${posts.length} ${posts.length === 1 ? "Post" : "Posts"} found.`
+        : "";
+
+  useEffect(() => {
+    const firstPost = posts[0];
+    if (firstPost) setSelection(`post-${firstPost.slug}`);
+  }, [posts[0]?.slug]);
+
+  function getCurrentRouteOptions() {
+    const currentRoute = router.state.matches.at(-1);
+    if (!currentRoute) return undefined;
+    return {
+      from: currentRoute.fullPath,
+      to: "." as const,
+      params: currentRoute.params,
+      search: currentRoute.search,
+    };
+  }
+
+  function openPost(slug: string) {
+    const currentRouteOptions = getCurrentRouteOptions();
+    if (!currentRouteOptions) return;
+    setOpen(false);
+    router.navigate({
+      ...currentRouteOptions,
+      state: { postDetailOverlay: { slug } },
+      mask: {
+        to: "/p/$slug",
+        params: { slug },
+        unmaskOnReload: true,
+      },
+    });
+  }
+
+  function navigate(to: NavigationTarget) {
+    setOpen(false);
+    router.navigate({ to });
+  }
+
+  return (
+    <CommandDialog
+      open={open}
+      onOpenChange={setOpen}
+      title="Search feedback"
+      description="Find Posts and navigate the portal."
+      className="sm:max-w-xl"
+    >
+      <Command
+        shouldFilter={false}
+        className="gap-0"
+        value={selection}
+        onValueChange={setSelection}
+      >
+        <CommandInput
+          aria-label="Search feedback"
+          value={term}
+          onValueChange={setTerm}
+          placeholder="Search feedback…"
+        />
+        <CommandList
+          aria-busy={searching || undefined}
+          className="min-h-28 max-h-96 p-2"
+        >
+          {showEmpty ? (
+            <CommandEmpty>No Posts match this search.</CommandEmpty>
+          ) : null}
+          {query.isError && hasTerm ? (
+            <div
+              role="alert"
+              className="space-y-3 px-4 py-8 text-center text-sm text-muted-foreground"
+            >
+              <p>Search is unavailable. Try again.</p>
+              <Button variant="outline" onClick={() => void query.refetch()}>
+                Retry search
+              </Button>
+            </div>
+          ) : null}
+          {searching ? (
+            <div
+              role="status"
+              className={
+                posts.length
+                  ? "flex items-center gap-2 px-3 py-2 text-xs text-muted-foreground"
+                  : "flex items-center justify-center gap-2 px-4 py-8 text-sm text-muted-foreground"
+              }
+            >
+              <Spinner aria-hidden="true" />
+              Searching Posts…
+            </div>
+          ) : null}
+          {hasTerm && !query.isError && posts.length > 0 ? (
+            <CommandGroup heading="Posts">
+              {posts.map((post) => (
+                <CommandItem
+                  key={post.slug}
+                  value={`post-${post.slug}`}
+                  onSelect={() => openPost(post.slug)}
+                  className="min-h-14 gap-3"
+                >
+                  <FileText aria-hidden="true" />
+                  <div className="min-w-0 flex-1">
+                    <div className="truncate text-sm font-medium">
+                      {post.title}
+                    </div>
+                    <div className="truncate text-xs text-muted-foreground">
+                      {post.description}
+                    </div>
+                  </div>
+                  <div className="shrink-0 text-right text-xs text-muted-foreground">
+                    <span className="block">{post.status}</span>
+                    <span className="mt-1 hidden sm:block">{post.type}</span>
+                  </div>
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          ) : null}
+          {!term.trim() ? (
+            <CommandGroup heading="Navigate">
+              <CommandItem
+                className="min-h-11"
+                value="go-feedback"
+                onSelect={() => navigate("/")}
+              >
+                <LayoutList aria-hidden="true" />
+                Feedback
+              </CommandItem>
+              <CommandItem
+                className="min-h-11"
+                value="go-roadmap"
+                onSelect={() => navigate("/roadmap")}
+              >
+                <Map aria-hidden="true" />
+                Roadmap
+              </CommandItem>
+              {features.changelog ? (
+                <CommandItem
+                  className="min-h-11"
+                  value="go-changelog"
+                  onSelect={() => navigate("/changelog")}
+                >
+                  <Newspaper aria-hidden="true" />
+                  Changelog
+                </CommandItem>
+              ) : null}
+              <CommandItem
+                className="min-h-11"
+                value="new-post"
+                onSelect={() => {
+                  if (!completeProfile) {
+                    setOpen(false);
+                    openProfileSetup();
+                    return;
+                  }
+                  const currentRouteOptions = getCurrentRouteOptions();
+                  if (!currentRouteOptions) return;
+                  setOpen(false);
+                  router.navigate({
+                    ...currentRouteOptions,
+                    state: { createPostOverlay: true },
+                    mask: { to: "/submit", unmaskOnReload: true },
+                  });
+                }}
+              >
+                <Plus aria-hidden="true" />
+                New post
+              </CommandItem>
+            </CommandGroup>
+          ) : null}
+        </CommandList>
+        <div className="flex items-center justify-between gap-4 border-t px-4 py-3 text-xs text-muted-foreground">
+          <span className="flex items-center gap-1.5">
+            <KbdGroup>
+              <Kbd>↑</Kbd>
+              <Kbd>↓</Kbd>
+            </KbdGroup>{" "}
+            to navigate <Kbd>↵</Kbd> to open
+          </span>
+          <span className="flex items-center gap-1.5">
+            <Kbd>Esc</Kbd> to close
+          </span>
+        </div>
+        <div aria-label="Search status" className="sr-only" role="status">
+          {searchStatus}
+        </div>
+      </Command>
+    </CommandDialog>
+  );
+}
+
+function useDebouncedValue<T>(value: T, delay: number): T {
+  const [debounced, setDebounced] = useState(value);
+  useEffect(() => {
+    const timeout = window.setTimeout(() => setDebounced(value), delay);
+    return () => window.clearTimeout(timeout);
+  }, [value, delay]);
+  return debounced;
+}