create-feedbax 0.1.0 → 0.2.1

package/template/src/authorized-draft-post.test.tsx

@@ -0,0 +1,212 @@
+// @vitest-environment jsdom
+
+import {
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+  within,
+} from "@testing-library/react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import {
+  RouterProvider,
+  createMemoryHistory,
+  createRootRoute,
+  createRouter,
+} from "@tanstack/react-router";
+import { afterEach, beforeEach, expect, it, vi } from "vitest";
+
+import userEvent from "@testing-library/user-event";
+
+import { capabilitiesKey } from "./browser-post-state";
+import { readCapabilities } from "./browser-post-state";
+import { AuthorizedDraftPost } from "./authorized-draft-post";
+import {
+  editPortalFeedbackDraft,
+  getPortalDraftPost,
+  withdrawPortalFeedbackDraft,
+} from "./portal-feedback-server-function";
+
+vi.mock("./portal-feedback-server-function", () => ({
+  getPortalDraftPost: vi.fn(),
+  editPortalFeedbackDraft: vi.fn(),
+  withdrawPortalFeedbackDraft: vi.fn(),
+  submitPortalPost: vi.fn(),
+}));
+
+beforeEach(() => {
+  localStorage.clear();
+  localStorage.setItem(
+    capabilitiesKey,
+    JSON.stringify({
+      draft: {
+        id: "draft",
+        slug: "editable-draft",
+        browserCapability: "secret",
+      },
+    }),
+  );
+  vi.mocked(getPortalDraftPost).mockResolvedValue(draft);
+});
+
+afterEach(() => {
+  cleanup();
+  vi.clearAllMocks();
+});
+
+it("shows an authorized Draft Post in the shared detail layout", async () => {
+  renderDraft();
+
+  const article = within(
+    await screen.findByRole("article", { name: "Original title" }),
+  );
+  expect(article.getByText("Draft")).toBeTruthy();
+  expect(article.queryByRole("button", { name: /vote/i })).toBeNull();
+  expect(article.queryByLabelText("Comments unavailable")).toBeNull();
+  expect(article.queryByRole("region", { name: "Comments" })).toBeNull();
+  const details = within(
+    article.getByRole("complementary", { name: "Details" }),
+  );
+  expect(details.getByText("New")).toBeTruthy();
+  expect(details.getByText("Feature Request")).toBeTruthy();
+  expect(details.queryByText("Author")).toBeNull();
+  expect(screen.getByRole("button", { name: "Edit" })).toBeTruthy();
+  expect(screen.getByRole("button", { name: "Draft actions" })).toBeTruthy();
+});
+
+it("edits in place, keeps Cancel unchanged, and reconciles the visible draft", async () => {
+  vi.mocked(editPortalFeedbackDraft).mockResolvedValue({
+    ...draft,
+    title: "Edited title",
+  } as never);
+  const client = new QueryClient();
+  client.setQueryData(["authorized-draft-posts", ["draft"]], [draft]);
+  renderDraft(client);
+
+  expect(
+    await screen.findByRole("heading", { name: "Original title" }),
+  ).toBeTruthy();
+  fireEvent.click(screen.getByRole("button", { name: "Edit" }));
+  fireEvent.change(screen.getByLabelText("Title"), {
+    target: { value: "Discarded title" },
+  });
+  fireEvent.click(screen.getByRole("button", { name: "Cancel" }));
+  expect(screen.getByRole("heading", { name: "Original title" })).toBeTruthy();
+
+  fireEvent.click(screen.getByRole("button", { name: "Edit" }));
+  fireEvent.change(screen.getByLabelText("Title"), {
+    target: { value: "Edited title" },
+  });
+  fireEvent.submit(screen.getByRole("button", { name: "Save changes" }));
+
+  expect(
+    await screen.findByRole("heading", { name: "Edited title" }),
+  ).toBeTruthy();
+  expect(
+    client.getQueryData<Array<{ title: string }>>([
+      "authorized-draft-posts",
+      ["draft"],
+    ])?.[0]?.title,
+  ).toBe("Edited title");
+});
+
+it("keeps edit mode open and reports a mutation failure", async () => {
+  vi.mocked(editPortalFeedbackDraft).mockRejectedValue(new Error("offline"));
+  renderDraft();
+  fireEvent.click(await screen.findByRole("button", { name: "Edit" }));
+  fireEvent.submit(screen.getByRole("button", { name: "Save changes" }));
+
+  expect(
+    await screen.findByText(
+      "The draft could not be changed. Please try again.",
+    ),
+  ).toBeTruthy();
+  expect(screen.getByRole("button", { name: "Save changes" })).toBeTruthy();
+});
+
+it("removes expired authority when Save proves the capability invalid", async () => {
+  vi.mocked(editPortalFeedbackDraft).mockRejectedValue(
+    new Error("Browser Capability did not authorize this draft."),
+  );
+  renderDraft();
+  fireEvent.click(await screen.findByRole("button", { name: "Edit" }));
+  fireEvent.submit(screen.getByRole("button", { name: "Save changes" }));
+
+  expect(
+    await screen.findByRole("heading", { name: "This Post isn’t available." }),
+  ).toBeTruthy();
+  expect(readCapabilities(localStorage)).toEqual({});
+});
+
+it("confirms withdrawal, removes visible state, and cleans up authority", async () => {
+  vi.mocked(withdrawPortalFeedbackDraft).mockResolvedValue(undefined);
+  const client = new QueryClient();
+  client.setQueryData(["authorized-draft-posts", ["draft"]], [draft]);
+  renderDraft(client);
+
+  const actions = await screen.findByRole("button", { name: "Draft actions" });
+  const user = userEvent.setup();
+  await user.click(actions);
+  await user.click(
+    await screen.findByRole("menuitem", { name: "Withdraw draft" }),
+  );
+  await user.click(
+    await screen.findByRole("button", { name: "Withdraw Draft Post" }),
+  );
+
+  await vi.waitFor(() => expect(readCapabilities(localStorage)).toEqual({}));
+  expect(
+    client.getQueryData<unknown[]>(["authorized-draft-posts", ["draft"]]),
+  ).toEqual([]);
+});
+
+it("keeps the draft visible and reports a withdrawal failure", async () => {
+  vi.mocked(withdrawPortalFeedbackDraft).mockRejectedValue(
+    new Error("offline"),
+  );
+  renderDraft();
+
+  const actions = await screen.findByRole("button", { name: "Draft actions" });
+  const user = userEvent.setup();
+  await user.click(actions);
+  await user.click(
+    await screen.findByRole("menuitem", { name: "Withdraw draft" }),
+  );
+  await user.click(
+    await screen.findByRole("button", { name: "Withdraw Draft Post" }),
+  );
+
+  const alert = await screen.findByRole("alert");
+  expect(alert.textContent).toBe(
+    "The draft could not be withdrawn. Please try again.",
+  );
+  expect(screen.getByRole("heading", { name: "Original title" })).toBeTruthy();
+  expect(Object.keys(readCapabilities(localStorage))).toEqual(["draft"]);
+});
+
+function renderDraft(client = new QueryClient()) {
+  const root = createRootRoute({
+    component: () => <AuthorizedDraftPost slug="editable-draft" />,
+  });
+  const router = createRouter({
+    history: createMemoryHistory({ initialEntries: ["/p/editable-draft"] }),
+    routeTree: root,
+  });
+  render(
+    <QueryClientProvider client={client}>
+      <RouterProvider router={router} />
+    </QueryClientProvider>,
+  );
+}
+
+const draft = {
+  id: "draft",
+  slug: "editable-draft",
+  title: "Original title",
+  description: "Original 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"),
+};

package/template/src/authorized-draft-post.tsx

@@ -0,0 +1,205 @@
+import type { DraftPost } from "@feedbax/feedback";
+import { MoreHorizontal } from "lucide-react";
+import { useEffect, useState } from "react";
+import { useQueryClient } from "@tanstack/react-query";
+import { useNavigate, useRouter, useRouterState } from "@tanstack/react-router";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@feedbax/ui/components/alert-dialog";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@feedbax/ui/components/dropdown-menu";
+import { Badge } from "@feedbax/ui/components/badge";
+import { Button } from "@feedbax/ui/components/button";
+import { toast } from "sonner";
+
+import {
+  PortalFeedbackForm,
+  type PortalFeedbackMutations,
+} from "./portal-feedback-form";
+import { readCapabilities, removeCapability } from "./browser-post-state";
+import {
+  editPortalFeedbackDraft,
+  getPortalDraftPost,
+  submitPortalPost,
+  withdrawPortalFeedbackDraft,
+} from "./portal-feedback-server-function";
+import { PublicPostUnavailable } from "./public-post-unavailable";
+import { isCapabilityAuthorizationFailure } from "./capability-authorization-error";
+import { PublicPostDetail } from "./public-post-detail";
+
+export function AuthorizedDraftPost({ slug }: { slug: string }) {
+  const [post, setPost] = useState<DraftPost | null>();
+  const [editing, setEditing] = useState(false);
+  const [confirmingWithdrawal, setConfirmingWithdrawal] = useState(false);
+  const [withdrawalError, setWithdrawalError] = useState<string>();
+  const queryClient = useQueryClient();
+  const router = useRouter();
+  const navigate = useNavigate();
+  const overlaid = useRouterState({
+    select: (state) => Boolean(state.location.state.postDetailOverlay),
+  });
+  const capability = Object.values(readCapabilities(localStorage)).find(
+    (item) => item.slug === slug,
+  );
+
+  useEffect(() => {
+    setPost(undefined);
+    if (!capability) {
+      setPost(null);
+      return;
+    }
+    getPortalDraftPost({ data: capability })
+      .then(setPost)
+      .catch((error: unknown) => {
+        if (isCapabilityAuthorizationFailure(error)) {
+          removeCapability(localStorage, capability.id);
+        }
+        setPost(null);
+      });
+  }, [capability?.browserCapability, capability?.id, slug]);
+
+  if (post === undefined)
+    return (
+      <main className="feedback-detail">
+        <p>Loading Draft Post…</p>
+      </main>
+    );
+  if (post === null || !capability) return <PublicPostUnavailable />;
+
+  const updateVisibleDraft = (
+    edited: Awaited<ReturnType<PortalFeedbackMutations["editDraftPost"]>>,
+  ) => {
+    const next = { ...post, ...edited, slug: post.slug };
+    setPost(next);
+    setEditing(false);
+    queryClient.setQueriesData<DraftPost[]>(
+      { queryKey: ["authorized-draft-posts"] },
+      (current) => current?.map((item) => (item.id === next.id ? next : item)),
+    );
+    toast.success("Draft updated.");
+  };
+
+  const withdraw = async () => {
+    setWithdrawalError(undefined);
+    try {
+      await withdrawPortalFeedbackDraft({ data: capability });
+      removeCapability(localStorage, post.id);
+      queryClient.setQueriesData<DraftPost[]>(
+        { queryKey: ["authorized-draft-posts"] },
+        (current) => current?.filter((item) => item.id !== post.id),
+      );
+      await queryClient.invalidateQueries({ queryKey: ["public-posts"] });
+      if (overlaid) router.history.back();
+      else await navigate({ to: "/" });
+    } catch (error) {
+      if (isCapabilityAuthorizationFailure(error)) {
+        removeCapability(localStorage, post.id);
+        setPost(null);
+      } else {
+        setWithdrawalError(
+          "The draft could not be withdrawn. Please try again.",
+        );
+      }
+    } finally {
+      setConfirmingWithdrawal(false);
+    }
+  };
+
+  return (
+    <>
+      {editing ? (
+        <main className="feedback-detail">
+          <PortalFeedbackForm
+            display="overlay"
+            onCancel={() => setEditing(false)}
+            onEdited={updateVisibleDraft}
+            onAuthorizationLost={() => {
+              removeCapability(localStorage, post.id);
+              setPost(null);
+            }}
+            showWithdrawal={false}
+            mutations={{
+              submitPost: submitPortalPost,
+              editDraftPost: editPortalFeedbackDraft,
+              withdrawDraftPost: withdrawPortalFeedbackDraft,
+            }}
+            initialDraft={{
+              id: post.id,
+              browserCapability: capability.browserCapability,
+              title: post.title,
+              description: post.description,
+              type: post.type,
+            }}
+          />
+        </main>
+      ) : (
+        <PublicPostDetail
+          post={post}
+          published={false}
+          display={overlaid ? "overlay" : "page"}
+          features={{ voting: false, comments: false, changelog: true }}
+          summaryMarker={<Badge variant="outline">Draft</Badge>}
+          summaryActions={
+            <>
+              <div className="draft-detail-actions">
+                <Button type="button" onClick={() => setEditing(true)}>
+                  Edit
+                </Button>
+                <DropdownMenu>
+                  <DropdownMenuTrigger
+                    aria-label="Draft actions"
+                    render={
+                      <Button type="button" variant="ghost" size="icon" />
+                    }
+                  >
+                    <MoreHorizontal aria-hidden="true" />
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="end">
+                    <DropdownMenuItem
+                      onClick={() => setConfirmingWithdrawal(true)}
+                    >
+                      Withdraw draft
+                    </DropdownMenuItem>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              </div>
+              {withdrawalError ? <p role="alert">{withdrawalError}</p> : null}
+            </>
+          }
+        />
+      )}
+      <AlertDialog
+        open={confirmingWithdrawal}
+        onOpenChange={setConfirmingWithdrawal}
+      >
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>
+              Withdraw this Draft Post permanently?
+            </AlertDialogTitle>
+            <AlertDialogDescription>
+              This cannot be undone.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction onClick={withdraw}>
+              Withdraw Draft Post
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
+  );
+}

package/template/src/authorized-draft-query.ts

@@ -0,0 +1,74 @@
+import { queryOptions } from "@tanstack/react-query";
+import type { DraftPost } from "@feedbax/feedback";
+
+import {
+  removeCapability,
+  type StoredPostCapability,
+} from "./browser-post-state";
+
+type FetchAuthorizedDraft = (input: {
+  data: StoredPostCapability;
+}) => Promise<DraftPost>;
+
+type CapabilityStorage = Pick<Storage, "getItem" | "setItem">;
+
+export const authorizedDraftPostsQueryRoot = [
+  "authorized-draft-posts",
+] as const;
+
+export function authorizedDraftPostsQueryKey(
+  capabilities: Record<string, StoredPostCapability>,
+) {
+  return [
+    ...authorizedDraftPostsQueryRoot,
+    Object.keys(capabilities).sort(),
+  ] as const;
+}
+
+export function authorizedDraftPostsQuery(
+  capabilities: Record<string, StoredPostCapability>,
+  fetchDraft: FetchAuthorizedDraft,
+  storage?: CapabilityStorage,
+) {
+  const entries = Object.values(capabilities);
+  return queryOptions({
+    queryKey: authorizedDraftPostsQueryKey(capabilities),
+    queryFn: async () => {
+      const results = await Promise.allSettled(
+        entries.map(async (capability) => ({
+          post: await fetchDraft({ data: capability }),
+        })),
+      );
+      const drafts: DraftPost[] = [];
+      let transientFailure: unknown;
+      for (const [index, result] of results.entries()) {
+        if (result.status === "fulfilled") {
+          drafts.push(result.value.post);
+          continue;
+        }
+        const capability = entries[index];
+        if (storage && capability && isAuthorizationFailure(result.reason)) {
+          removeCapability(storage, capability.id);
+        } else {
+          transientFailure = result.reason;
+        }
+      }
+      if (transientFailure) throw transientFailure;
+      return drafts.sort(
+        (left, right) =>
+          new Date(right.updatedAt).getTime() -
+            new Date(left.updatedAt).getTime() ||
+          right.id.localeCompare(left.id),
+      );
+    },
+    staleTime: 30_000,
+  });
+}
+
+function isAuthorizationFailure(error: unknown): boolean {
+  return (
+    error instanceof Error &&
+    (error.name === "BrowserCapabilityAuthorizationError" ||
+      error.message.includes("did not authorize"))
+  );
+}

package/template/src/browser-post-state.test.ts

@@ -0,0 +1,120 @@
+import { describe, expect, it } from "vitest";
+
+import {
+  capabilitiesKey,
+  clearDeviceProfile,
+  deriveDeviceProfileInitials,
+  deviceProfileKey,
+  isCompleteDeviceProfile,
+  readCapabilities,
+  readDeviceProfile,
+  retainCapability,
+  saveDeviceProfile,
+} from "./browser-post-state";
+
+describe("device-local Participant state", () => {
+  it("persists a valid Device Profile and derives its initials", () => {
+    const storage = memoryStorage();
+
+    saveDeviceProfile(storage, {
+      name: "  Ama Mensah  ",
+      email: "  ama@example.com  ",
+    });
+
+    expect(readDeviceProfile(storage)).toEqual({
+      name: "Ama Mensah",
+      email: "ama@example.com",
+    });
+    expect(deriveDeviceProfileInitials(readDeviceProfile(storage)!)).toBe("AM");
+    expect(isCompleteDeviceProfile(readDeviceProfile(storage))).toBe(true);
+  });
+
+  it("preserves a legacy name-only profile but treats it as incomplete", () => {
+    const storage = memoryStorage({
+      [deviceProfileKey]: JSON.stringify({ name: "Ama" }),
+    });
+
+    expect(readDeviceProfile(storage)).toEqual({ name: "Ama" });
+    expect(isCompleteDeviceProfile(readDeviceProfile(storage))).toBe(false);
+  });
+
+  it("treats malformed email addresses as incomplete", () => {
+    const storage = memoryStorage({
+      [deviceProfileKey]: JSON.stringify({
+        name: "Ama",
+        email: "not-an-email",
+      }),
+    });
+
+    expect(isCompleteDeviceProfile(readDeviceProfile(storage))).toBe(false);
+  });
+
+  it("rejects malformed saved profiles", () => {
+    const malformedProfiles = [
+      null,
+      {},
+      { name: "" },
+      { name: "Ama", email: 42 },
+      { name: "Ama", extra: "unexpected" },
+    ];
+
+    for (const profile of malformedProfiles) {
+      const storage = memoryStorage({
+        [deviceProfileKey]: JSON.stringify(profile),
+      });
+      expect(readDeviceProfile(storage)).toBeUndefined();
+    }
+  });
+
+  it("clears only the Device Profile and preserves Browser Capabilities", () => {
+    const capability = {
+      id: "post-id",
+      slug: "keyboard-navigation",
+      browserCapability: "secret-capability",
+    };
+    const storage = memoryStorage({
+      [deviceProfileKey]: JSON.stringify({ name: "Ama" }),
+      [capabilitiesKey]: JSON.stringify({ [capability.id]: capability }),
+    });
+
+    clearDeviceProfile(storage);
+
+    expect(readDeviceProfile(storage)).toBeUndefined();
+    expect(readCapabilities(storage)).toEqual({ [capability.id]: capability });
+  });
+
+  it("retains several valid Browser Capabilities and ignores malformed saved entries", () => {
+    const storage = memoryStorage({
+      [capabilitiesKey]: JSON.stringify({
+        malformed: { id: "malformed", slug: "missing-secret" },
+      }),
+    });
+    const first = {
+      id: "post-1",
+      slug: "keyboard-navigation",
+      browserCapability: "first-secret",
+    };
+    const second = {
+      id: "post-2",
+      slug: "dark-mode",
+      browserCapability: "second-secret",
+    };
+
+    retainCapability(storage, first);
+    retainCapability(storage, second);
+
+    expect(readCapabilities(storage)).toEqual({
+      [first.id]: first,
+      [second.id]: second,
+    });
+  });
+});
+
+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),
+    removeItem: (key: string) => values.delete(key),
+  };
+}