create-feedbax 0.1.0 → 0.2.0

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

@@ -0,0 +1,204 @@
+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}
+          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),
+  };
+}

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

@@ -0,0 +1,134 @@
+import { isValidCommentEmail } from "./comment-profile";
+
+export const capabilitiesKey = "feedbax:post-capabilities";
+export const deviceProfileKey = "feedbax:device-profile";
+export interface DeviceProfile {
+  name: string;
+  email?: string;
+}
+
+export interface CompleteDeviceProfile extends DeviceProfile {
+  email: string;
+}
+
+type DeviceProfileStorage = Pick<Storage, "getItem" | "setItem" | "removeItem">;
+export interface StoredPostCapability {
+  id: string;
+  slug: string;
+  browserCapability: string;
+}
+
+export function readDeviceProfile(
+  storage: Pick<Storage, "getItem">,
+): DeviceProfile | undefined {
+  try {
+    const value = JSON.parse(
+      storage.getItem(deviceProfileKey) ?? "null",
+    ) as unknown;
+    if (!value || typeof value !== "object" || Array.isArray(value)) {
+      return undefined;
+    }
+    const entries = Object.keys(value);
+    const name = Reflect.get(value, "name");
+    const email = Reflect.get(value, "email");
+    if (
+      entries.some((key) => key !== "name" && key !== "email") ||
+      typeof name !== "string" ||
+      name.trim().length === 0 ||
+      (email !== undefined && typeof email !== "string")
+    ) {
+      return undefined;
+    }
+    return {
+      name: name.trim(),
+      ...(typeof email === "string" && email.trim()
+        ? { email: email.trim() }
+        : {}),
+    };
+  } catch {
+    return undefined;
+  }
+}
+
+export function saveDeviceProfile(
+  storage: Pick<DeviceProfileStorage, "setItem">,
+  profile: DeviceProfile,
+) {
+  const name = profile.name.trim();
+  if (!name) throw new Error("Device Profile display name is required.");
+  const email = profile.email?.trim();
+  storage.setItem(
+    deviceProfileKey,
+    JSON.stringify({ name, ...(email ? { email } : {}) }),
+  );
+}
+
+export function isCompleteDeviceProfile(
+  profile: DeviceProfile | undefined,
+): profile is CompleteDeviceProfile {
+  return Boolean(profile?.name.trim() && isValidCommentEmail(profile.email));
+}
+
+export function clearDeviceProfile(
+  storage: Pick<DeviceProfileStorage, "removeItem">,
+) {
+  storage.removeItem(deviceProfileKey);
+}
+
+export function deriveDeviceProfileInitials(profile: DeviceProfile): string {
+  return profile.name
+    .trim()
+    .split(/\s+/)
+    .slice(0, 2)
+    .map((part) => part[0]?.toLocaleUpperCase())
+    .join("");
+}
+export function readCapabilities(
+  storage: Pick<Storage, "getItem">,
+): Record<string, StoredPostCapability> {
+  try {
+    const value = JSON.parse(
+      storage.getItem(capabilitiesKey) ?? "{}",
+    ) as unknown;
+    if (!value || typeof value !== "object" || Array.isArray(value)) return {};
+    return Object.fromEntries(
+      Object.entries(value).filter(
+        (entry): entry is [string, StoredPostCapability] => {
+          const [key, capability] = entry;
+          return (
+            capability !== null &&
+            typeof capability === "object" &&
+            !Array.isArray(capability) &&
+            Reflect.get(capability, "id") === key &&
+            typeof Reflect.get(capability, "slug") === "string" &&
+            Reflect.get(capability, "slug").length > 0 &&
+            typeof Reflect.get(capability, "browserCapability") === "string" &&
+            Reflect.get(capability, "browserCapability").length > 0
+          );
+        },
+      ),
+    );
+  } catch {
+    return {};
+  }
+}
+export function retainCapability(
+  storage: Pick<Storage, "getItem" | "setItem">,
+  capability: StoredPostCapability,
+) {
+  storage.setItem(
+    capabilitiesKey,
+    JSON.stringify({
+      ...readCapabilities(storage),
+      [capability.id]: capability,
+    }),
+  );
+}
+export function removeCapability(
+  storage: Pick<Storage, "getItem" | "setItem">,
+  id: string,
+) {
+  const capabilities = readCapabilities(storage);
+  delete capabilities[id];
+  storage.setItem(capabilitiesKey, JSON.stringify(capabilities));
+}

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

@@ -0,0 +1,14 @@
+import { expect, it } from "vitest";
+import { persistVotedPost, readVotedPostSlugs } from "./browser-vote-state";
+
+it("remembers and removes voted Post identifiers in browser storage", () => {
+  const values = new Map<string, string>();
+  const storage = {
+    getItem: (key: string) => values.get(key) ?? null,
+    setItem: (key: string, value: string) => void values.set(key, value),
+  };
+  persistVotedPost(storage, "keyboard-navigation", true);
+  expect(readVotedPostSlugs(storage)).toEqual(new Set(["keyboard-navigation"]));
+  persistVotedPost(storage, "keyboard-navigation", false);
+  expect(readVotedPostSlugs(storage)).toEqual(new Set());
+});

package/template/src/browser-vote-state.ts

@@ -0,0 +1,27 @@
+const votedPostsKey = "feedbax:voted-posts";
+
+export function readVotedPostSlugs(
+  storage: Pick<Storage, "getItem">,
+): Set<string> {
+  try {
+    const value: unknown = JSON.parse(storage.getItem(votedPostsKey) ?? "[]");
+    return new Set(
+      Array.isArray(value)
+        ? value.filter((item): item is string => typeof item === "string")
+        : [],
+    );
+  } catch {
+    return new Set();
+  }
+}
+
+export function persistVotedPost(
+  storage: Pick<Storage, "getItem" | "setItem">,
+  slug: string,
+  voted: boolean,
+): void {
+  const slugs = readVotedPostSlugs(storage);
+  if (voted) slugs.add(slug);
+  else slugs.delete(slug);
+  storage.setItem(votedPostsKey, JSON.stringify([...slugs]));
+}

package/template/src/capability-authorization-error.ts

@@ -0,0 +1,3 @@
+export function isCapabilityAuthorizationFailure(error: unknown) {
+  return error instanceof Error && error.message.includes("did not authorize");
+}