create-feedbax 0.2.0 → 0.2.1

package/template/src/components/portal-footer.tsx

@@ -0,0 +1,14 @@
+export function PortalFooter() {
+  return (
+    <footer className="mt-auto flex justify-end border-t px-6 py-4 text-xs text-muted-foreground lg:px-10">
+      <a
+        href="https://github.com/jessequartey/feedbax"
+        target="_blank"
+        rel="noopener noreferrer"
+        className="transition-colors hover:text-foreground"
+      >
+        Powered by Feedbax
+      </a>
+    </footer>
+  );
+}

package/template/src/components/profile-menu.tsx

@@ -1,3 +1,4 @@
+import { useConnectedIdentity } from "./connected-identity-provider";
 import { useTheme } from "next-themes";
 import { UserCircle } from "lucide-react";
 
@@ -20,8 +21,37 @@ import { useDeviceProfile } from "./device-profile-provider";
 export function ProfileMenu() {
   const { profile, openProfileSetup, clearProfile } = useDeviceProfile();
 
+  const identity = useConnectedIdentity();
+
   const initials = profile ? deriveDeviceProfileInitials(profile) : undefined;
 
+  if (identity.enabled)
+    return (
+      <div>
+        <Button variant="ghost" onClick={openProfileSetup}>
+          Contact profile
+        </Button>
+        {identity.displayName ? (
+          <>
+            <span>{identity.displayName}</span>
+            <Button variant="outline" onClick={() => void identity.signOut()}>
+              Sign out
+            </Button>
+          </>
+        ) : (
+          <Button
+            variant="outline"
+            disabled={!identity.ready}
+            onClick={() => {
+              window.location.href = "/internal/identity/start";
+            }}
+          >
+            Sign in
+          </Button>
+        )}
+        {identity.error ? <p role="alert">{identity.error}</p> : null}
+      </div>
+    );
   return profile ? (
     <DropdownMenu>
       <DropdownMenuTrigger

package/template/src/components/ui/components/command.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { Command as CommandPrimitive } from "cmdk";
-
 import { cn } from "@feedbax/ui/lib/utils";
+
 import {
   Dialog,
   DialogContent,
@@ -9,10 +9,6 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@feedbax/ui/components/dialog";
-import {
-  InputGroup,
-  InputGroupAddon,
-} from "@feedbax/ui/components/input-group";
 import { SearchIcon, CheckIcon } from "lucide-react";
 
 function Command({
@@ -47,17 +43,17 @@ function CommandDialog({
 }) {
   return (
     <Dialog {...props}>
-      <DialogHeader className="sr-only">
-        <DialogTitle>{title}</DialogTitle>
-        <DialogDescription>{description}</DialogDescription>
-      </DialogHeader>
       <DialogContent
         className={cn(
-          "top-1/3 translate-y-0 overflow-hidden rounded-none p-0",
+          "top-24 translate-y-0 overflow-hidden rounded-none p-0 sm:top-32",
           className,
         )}
         showCloseButton={showCloseButton}
       >
+        <DialogHeader className="sr-only">
+          <DialogTitle>{title}</DialogTitle>
+          <DialogDescription>{description}</DialogDescription>
+        </DialogHeader>
         {children}
       </DialogContent>
     </Dialog>
@@ -69,20 +65,22 @@ function CommandInput({
   ...props
 }: React.ComponentProps<typeof CommandPrimitive.Input>) {
   return (
-    <div data-slot="command-input-wrapper" className="border-b pb-0">
-      <InputGroup className="h-11 border-none border-input/30 bg-input/30 shadow-none! md:h-8 *:data-[slot=input-group-addon]:pl-2!">
-        <CommandPrimitive.Input
-          data-slot="command-input"
-          className={cn(
-            "w-full text-base outline-hidden disabled:cursor-not-allowed disabled:opacity-50 md:text-xs",
-            className,
-          )}
-          {...props}
-        />
-        <InputGroupAddon>
-          <SearchIcon className="size-4 shrink-0 opacity-50" />
-        </InputGroupAddon>
-      </InputGroup>
+    <div
+      data-slot="command-input-wrapper"
+      className="flex h-14 shrink-0 items-center gap-3 border-b px-4"
+    >
+      <SearchIcon
+        className="size-5 shrink-0 text-muted-foreground"
+        aria-hidden="true"
+      />
+      <CommandPrimitive.Input
+        data-slot="command-input"
+        className={cn(
+          "h-full w-full min-w-0 border-0 bg-transparent py-4 text-base text-foreground outline-none placeholder:text-muted-foreground focus-visible:ring-0 disabled:cursor-not-allowed disabled:opacity-50 sm:text-sm",
+          className,
+        )}
+        {...props}
+      />
     </div>
   );
 }
@@ -95,7 +93,7 @@ function CommandList({
     <CommandPrimitive.List
       data-slot="command-list"
       className={cn(
-        "no-scrollbar max-h-72 scroll-py-0 overflow-x-hidden overflow-y-auto outline-none",
+        "no-scrollbar max-h-80 scroll-py-2 overflow-x-hidden overflow-y-auto outline-none",
         className,
       )}
       {...props}
@@ -110,7 +108,10 @@ function CommandEmpty({
   return (
     <CommandPrimitive.Empty
       data-slot="command-empty"
-      className={cn("py-6 text-center text-xs", className)}
+      className={cn(
+        "px-6 py-10 text-center text-sm text-muted-foreground",
+        className,
+      )}
       {...props}
     />
   );
@@ -124,7 +125,7 @@ function CommandGroup({
     <CommandPrimitive.Group
       data-slot="command-group"
       className={cn(
-        "overflow-hidden text-foreground **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:text-muted-foreground",
+        "overflow-hidden text-foreground **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-2 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:text-muted-foreground",
         className,
       )}
       {...props}
@@ -139,7 +140,7 @@ function CommandSeparator({
   return (
     <CommandPrimitive.Separator
       data-slot="command-separator"
-      className={cn("-mx-1 h-px bg-border", className)}
+      className={cn("my-1 h-px bg-border", className)}
       {...props}
     />
   );
@@ -154,7 +155,7 @@ function CommandItem({
     <CommandPrimitive.Item
       data-slot="command-item"
       className={cn(
-        "group/command-item relative flex cursor-default items-center gap-2 rounded-none px-2 py-2 text-xs outline-hidden select-none in-data-[slot=dialog-content]:rounded-none! data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-selected:bg-muted data-selected:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-selected:*:[svg]:text-foreground",
+        "group/command-item relative flex cursor-default items-center gap-2 rounded-none px-3 py-3 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-none! data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-selected:bg-muted data-selected:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-selected:*:[svg]:text-foreground",
         className,
       )}
       {...props}

package/template/src/components/ui/components/message-scroller.tsx

@@ -5,8 +5,8 @@ import {
   useMessageScrollerScrollable,
   useMessageScrollerVisibility,
 } from "@shadcn/react/message-scroller";
-
 import { cn } from "@feedbax/ui/lib/utils";
+
 import { Button } from "@feedbax/ui/components/button";
 import { ArrowDownIcon } from "lucide-react";
 
@@ -40,7 +40,7 @@ function MessageScrollerViewport({
     <MessageScrollerPrimitive.Viewport
       data-slot="message-scroller-viewport"
       className={cn(
-        "size-full min-h-0 min-w-0 scroll-fade-b scrollbar-thin scrollbar-gutter-stable overflow-y-auto overscroll-contain contain-content data-autoscrolling:scrollbar-thumb-transparent data-autoscrolling:scrollbar-track-transparent",
+        "size-full min-h-0 min-w-0 scroll-fade-b scrollbar-thin scrollbar-gutter-stable overflow-y-auto overscroll-contain contain-content data-autoscrolling:scrollbar-thumb-transparent data-autoscrolling:scrollbar-track-transparent data-pending-scroll:invisible",
         className,
       )}
       {...props}

package/template/src/components/ui/components/scroll-area.tsx

@@ -1,5 +1,4 @@
 import { ScrollArea as ScrollAreaPrimitive } from "@base-ui/react/scroll-area";
-
 import { cn } from "@feedbax/ui/lib/utils";
 
 function ScrollArea({

package/template/src/components/ui/components/switch.tsx

@@ -0,0 +1,29 @@
+import { Switch as SwitchPrimitive } from "@base-ui/react/switch";
+import { cn } from "@feedbax/ui/lib/utils";
+
+function Switch({
+  className,
+  size = "default",
+  ...props
+}: SwitchPrimitive.Root.Props & {
+  size?: "sm" | "default";
+}) {
+  return (
+    <SwitchPrimitive.Root
+      data-slot="switch"
+      data-size={size}
+      className={cn(
+        "peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none group-has-[:focus-visible]/field-label:border-transparent group-has-[:focus-visible]/field-label:ring-0 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-1 aria-invalid:ring-destructive/20 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80 data-disabled:cursor-not-allowed data-disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        data-slot="switch-thumb"
+        className="pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] dark:data-checked:bg-primary-foreground group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 dark:data-unchecked:bg-foreground"
+      />
+    </SwitchPrimitive.Root>
+  );
+}
+
+export { Switch };

package/template/src/components/ui/styles/globals.css

@@ -2,7 +2,7 @@
 @import "tw-animate-css";
 @import "shadcn/tailwind.css";
 @import "@fontsource-variable/geist";
-@source "../../../apps/**/*.{ts,tsx}";
+@source "../../../**/*.{ts,tsx}";
 @source "../**/*.{ts,tsx}";
 
 @custom-variant dark (&:is(.dark *));

package/template/src/connected-identity.test.ts

@@ -0,0 +1,144 @@
+import { expect, it } from "vitest";
+import { createConnectedIdentityHandler } from "./connected-identity";
+
+it("starts sign-in with a secure browser challenge and never accepts a return URL", async () => {
+  const handler = createConnectedIdentityHandler({
+    siteUrl: "https://feedback.example",
+    loginUrl: "https://app.example/feedback-login",
+    issuer: "https://app.example",
+    secret: "identity-test-secret-at-least-32-characters",
+    store: undefined!,
+  });
+  const response = await handler(
+    new Request(
+      "https://feedback.example/internal/identity/start?returnTo=https://evil.example",
+    ),
+  );
+  expect(response.status).toBe(303);
+  const target = new URL(response.headers.get("location")!);
+  expect(target.origin).toBe("https://app.example");
+  expect(target.searchParams.get("state")?.length).toBeGreaterThan(30);
+  expect(target.searchParams.get("callback")).toBe(
+    "https://feedback.example/internal/identity/callback",
+  );
+  expect(response.headers.get("set-cookie")).toContain(
+    "HttpOnly; Secure; SameSite=None",
+  );
+  expect(response.headers.get("cache-control")).toBe("no-store");
+});
+
+it("exchanges a browser-bound handoff once, keeps identity private, and revokes sessions on logout", async () => {
+  const { Miniflare } = await import("miniflare");
+  const { readFile } = await import("node:fs/promises");
+  const { existsSync } = await import("node:fs");
+  const { createConnectedStore, signIdentityHandoff } =
+    await import("@feedbax/feedback");
+  const runtime = new Miniflare({
+    modules: true,
+    script: "export default {fetch(){return new Response('ok')}}",
+    compatibilityDate: "2026-07-30",
+    d1Databases: ["DB"],
+  });
+  try {
+    const db = await runtime.getD1Database("DB");
+    await db.exec(
+      (await readFile(
+        existsSync("apps/portal/migrations/0001_connected.sql")
+          ? "apps/portal/migrations/0001_connected.sql"
+          : "migrations/0001_connected.sql",
+        "utf8",
+      )) +
+        "\n" +
+        (await readFile(
+          existsSync("apps/portal/migrations/0002_participation.sql")
+            ? "apps/portal/migrations/0002_participation.sql"
+            : "migrations/0002_participation.sql",
+          "utf8",
+        )),
+    );
+    const secret = "identity-test-secret-at-least-32-characters";
+    const handler = createConnectedIdentityHandler({
+      siteUrl: "https://feedback.example",
+      loginUrl: "https://app.example/login",
+      issuer: "https://app.example",
+      secret,
+      store: createConnectedStore(db),
+      now: () => 1000000,
+    });
+    const started = await handler(
+      new Request("https://feedback.example/internal/identity/start"),
+    );
+    const challenge = started.headers.get("set-cookie")!.split(";")[0]!;
+    const state = new URL(started.headers.get("location")!).searchParams.get(
+      "state",
+    )!;
+    const token = signIdentityHandoff(
+      {
+        subject: "private-subject",
+        displayName: "Alice",
+        audience: "https://feedback.example",
+        issuer: "https://app.example",
+        state,
+        nonce: "nonce",
+        issuedAt: 1000,
+        expiresAt: 1100,
+      },
+      secret,
+    );
+    const callback = (cookie: string, origin = "https://app.example") =>
+      new Request("https://feedback.example/internal/identity/callback", {
+        method: "POST",
+        headers: {
+          Origin: origin,
+          Cookie: cookie,
+          "Content-Type": "application/x-www-form-urlencoded",
+        },
+        body: new URLSearchParams({ token }),
+      });
+    expect((await handler(callback(""))).status).toBe(401);
+    expect(
+      (await handler(callback(challenge, "https://evil.example"))).status,
+    ).toBe(403);
+    const signedIn = await handler(callback(challenge));
+    expect(signedIn.status).toBe(303);
+    expect((await handler(callback(challenge))).status).toBe(401);
+    const session = signedIn.headers
+      .getSetCookie()
+      .find((c) => c.startsWith("__Host-feedbax-session="))!
+      .split(";")[0]!;
+    const sessionRequest = () =>
+      new Request("https://feedback.example/internal/identity/session", {
+        headers: { Cookie: session },
+      });
+    const response = await handler(sessionRequest());
+    expect(response.headers.get("cache-control")).toBe("no-store");
+    expect(await response.json()).toEqual({
+      participant: { displayName: "Alice" },
+    });
+    expect(
+      (
+        await handler(
+          new Request("https://feedback.example/internal/identity/logout", {
+            method: "POST",
+            headers: { Cookie: session, Origin: "https://evil.example" },
+          }),
+        )
+      ).status,
+    ).toBe(403);
+    expect(
+      (
+        await handler(
+          new Request("https://feedback.example/internal/identity/logout", {
+            method: "POST",
+            headers: { Cookie: session, Origin: "https://feedback.example" },
+          }),
+        )
+      ).status,
+    ).toBe(200);
+    expect(await (await handler(sessionRequest())).json()).toEqual({
+      participant: null,
+    });
+  } finally {
+    await runtime.dispose();
+  }
+});

package/template/src/connected-identity.ts

@@ -0,0 +1,122 @@
+import { createHash, randomBytes } from "node:crypto";
+import { verifyIdentityHandoff, type ConnectedStore } from "@feedbax/feedback";
+
+const challengeCookie = "__Host-feedbax-handoff";
+const sessionCookie = "__Host-feedbax-session";
+export const sessionHash = (token: string) =>
+  createHash("sha256").update(token).digest("hex");
+export function readSessionToken(request: Request) {
+  return cookie(request, sessionCookie);
+}
+export function sameOrigin(request: Request, siteUrl: string) {
+  return request.headers.get("origin") === new URL(siteUrl).origin;
+}
+export function createConnectedIdentityHandler(options: {
+  siteUrl: string;
+  loginUrl: string;
+  issuer: string;
+  secret: string;
+  store: ConnectedStore;
+  now?: () => number;
+}) {
+  const origin = new URL(options.siteUrl).origin;
+  return async (request: Request): Promise<Response> => {
+    const path = new URL(request.url).pathname;
+    const headers = new Headers({
+      "Cache-Control": "no-store",
+      "Referrer-Policy": "no-referrer",
+    });
+    const json = (value: unknown, status = 200) =>
+      Response.json(value, { status, headers });
+    try {
+      if (path === "/internal/identity/start" && request.method === "GET") {
+        const state = randomBytes(32).toString("base64url");
+        const target = new URL(options.loginUrl);
+        target.searchParams.set("state", state);
+        target.searchParams.set(
+          "callback",
+          `${origin}/internal/identity/callback`,
+        );
+        headers.set(
+          "Set-Cookie",
+          `${challengeCookie}=${state}; Path=/; Max-Age=300; HttpOnly; Secure; SameSite=None`,
+        );
+        headers.set("Location", target.toString());
+        return new Response(null, { status: 303, headers });
+      }
+      if (path === "/internal/identity/callback" && request.method === "POST") {
+        if (request.headers.get("origin") !== new URL(options.loginUrl).origin)
+          return json({ error: "Sign-in origin is invalid." }, 403);
+        const body = await request.text();
+        if (body.length > 12000)
+          return json({ error: "Sign-in request is too large." }, 413);
+        const form = new URLSearchParams(body);
+        const now = options.now?.() ?? Date.now();
+        const identity = verifyIdentityHandoff(
+          form.get("token") ?? "",
+          options.secret,
+          {
+            audience: origin,
+            issuer: options.issuer,
+            state: cookie(request, challengeCookie) ?? "",
+            now: Math.floor(now / 1000),
+          },
+        );
+        const token = randomBytes(32).toString("base64url");
+        await options.store.acceptIdentity({
+          ...identity,
+          subject: JSON.stringify([identity.issuer, identity.subject]),
+          nonce: identity.nonce,
+          challenge: identity.state,
+          sessionHash: sessionHash(token),
+          expiresAt: now + 7 * 86400000,
+        });
+        headers.append(
+          "Set-Cookie",
+          `${sessionCookie}=${token}; Path=/; Max-Age=604800; HttpOnly; Secure; SameSite=Lax`,
+        );
+        headers.append(
+          "Set-Cookie",
+          `${challengeCookie}=; Path=/; Max-Age=0; HttpOnly; Secure; SameSite=None`,
+        );
+        headers.set("Location", origin);
+        return new Response(null, { status: 303, headers });
+      }
+      if (path === "/internal/identity/session" && request.method === "GET") {
+        const token = readSessionToken(request);
+        const participant = token
+          ? await options.store.session(sessionHash(token), options.now?.())
+          : undefined;
+        return json({
+          participant: participant
+            ? { displayName: participant.displayName }
+            : null,
+        });
+      }
+      if (path === "/internal/identity/logout" && request.method === "POST") {
+        if (!sameOrigin(request, origin))
+          return json({ error: "Request origin is invalid." }, 403);
+        const token = readSessionToken(request);
+        if (token) await options.store.logout(sessionHash(token));
+        headers.set(
+          "Set-Cookie",
+          `${sessionCookie}=; Path=/; Max-Age=0; HttpOnly; Secure; SameSite=Lax`,
+        );
+        return json({ signedOut: true });
+      }
+      return json({ error: "Not found." }, 404);
+    } catch {
+      return json(
+        { error: "Sign-in could not be completed. Start sign-in again." },
+        401,
+      );
+    }
+  };
+}
+function cookie(request: Request, name: string): string | undefined {
+  const pairs = (request.headers.get("cookie") ?? "")
+    .split(";")
+    .map((v) => v.trim())
+    .filter((v) => v.startsWith(`${name}=`));
+  return pairs.length === 1 ? pairs[0]!.slice(name.length + 1) : undefined;
+}

package/template/src/connected-participation.test.tsx

@@ -0,0 +1,67 @@
+// @vitest-environment jsdom
+import { afterEach, expect, it, vi } from "vitest";
+import {
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from "@testing-library/react";
+import { ConnectedIdentityProvider } from "./components/connected-identity-provider";
+import { VoteToggle } from "./vote-toggle";
+vi.mock("./feedbax", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("./feedbax")>();
+  return {
+    default: {
+      ...actual.default,
+      connected: {
+        issuer: "https://app.example",
+        loginUrl: "https://app.example/login",
+      },
+    },
+  };
+});
+afterEach(() => {
+  cleanup();
+  vi.unstubAllGlobals();
+  localStorage.clear();
+  sessionStorage.clear();
+});
+it("restores a signed-in Participant's Vote from the server instead of device storage", async () => {
+  const request = vi.fn<typeof fetch>().mockImplementation(async (input) => {
+    const url = String(input);
+    if (url === "/internal/identity/session")
+      return Response.json({ participant: { displayName: "Alice" } });
+    if (url.startsWith("/internal/connected/votes?"))
+      return Response.json({ voted: true, voteCount: 4 });
+    return Response.json({ slug: "post", voteCount: 3, voted: false });
+  });
+  vi.stubGlobal("fetch", request);
+  render(
+    <ConnectedIdentityProvider>
+      <VoteToggle
+        post={{
+          slug: "post",
+          title: "Post",
+          description: "Description",
+          type: "Feature Request",
+          status: "Planned",
+          createdAt: new Date(),
+          updatedAt: new Date(),
+          voteCount: 4,
+        }}
+      />
+    </ConnectedIdentityProvider>,
+  );
+  const button = await screen.findByRole("button", {
+    name: "Remove Vote, 4 Votes",
+  });
+  expect(button.getAttribute("aria-pressed")).toBe("true");
+  fireEvent.click(button);
+  await waitFor(() =>
+    expect(
+      screen.getByRole("button", { name: "Add Vote, 3 Votes" }),
+    ).toBeTruthy(),
+  );
+  expect(localStorage.length).toBe(0);
+});