create-feedbax 0.2.0 → 0.2.1

package/template/package.json

@@ -1,6 +1,6 @@
 {
   "name": "feedbax-installation",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "private": true,
   "type": "module",
   "scripts": {
@@ -27,18 +27,20 @@
     "sonner": "2.0.8",
     "tailwindcss": "4.3.3",
     "zod": "4.4.3",
-    "@base-ui/react": "1.7.0",
+    "@base-ui/react": "1.9.0",
     "@fontsource-variable/geist": "5.3.0",
-    "@shadcn/react": "0.3.0",
+    "@shadcn/react": "0.3.1",
     "class-variance-authority": "0.7.1",
     "clsx": "2.1.1",
     "cmdk": "^1.1.1",
     "shadcn": "latest",
     "tailwind-merge": "3.6.0",
-    "tw-animate-css": "1.4.0"
+    "tw-animate-css": "1.4.0",
+    "drizzle-orm": "0.45.2"
   },
   "devDependencies": {
     "@cloudflare/vite-plugin": "1.53.0",
+    "@cloudflare/workers-types": "^5.20261014.1",
     "@tanstack/react-router-devtools": "1.167.1",
     "@tanstack/router-cli": "1.167.32",
     "@testing-library/dom": "10.4.1",
@@ -48,6 +50,7 @@
     "@types/react-dom": "19.2.4",
     "@vitejs/plugin-react": "6.1.0",
     "jsdom": "29.1.1",
+    "miniflare": "4.20260730.0",
     "typescript": "6.0.3",
     "vite": "8.2.2",
     "web-vitals": "5.3.0",
@@ -56,8 +59,9 @@
     "tailwindcss": "4.3.3",
     "vitest": "4.1.11",
     "@eslint/js": "10.0.1",
+    "@shadcn/lint": "0.2.1",
     "@types/node": "22.20.1",
-    "feedbax": "0.2.0",
+    "feedbax": "0.2.1",
     "eslint": "10.8.1",
     "globals": "17.11.0",
     "prettier": "3.9.6",

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

@@ -146,6 +146,7 @@ export function AuthorizedDraftPost({ slug }: { slug: string }) {
       ) : (
         <PublicPostDetail
           post={post}
+          published={false}
           display={overlaid ? "overlay" : "page"}
           features={{ voting: false, comments: false, changelog: true }}
           summaryMarker={<Badge variant="outline">Draft</Badge>}

package/template/src/changelog-page.tsx

@@ -3,9 +3,8 @@ import type {
   PublicChangelogEntry,
 } from "@feedbax/changelog";
 import { Badge } from "@feedbax/ui/components/badge";
-import { Button } from "@feedbax/ui/components/button";
+import { Button, buttonVariants } from "@feedbax/ui/components/button";
 import { ButtonGroup } from "@feedbax/ui/components/button-group";
-import { cn } from "@feedbax/ui/lib/utils";
 import { useRouterState } from "@tanstack/react-router";
 import { ChevronDown, Link2 } from "lucide-react";
 import { useEffect, useMemo, useState } from "react";
@@ -80,21 +79,24 @@ export function ChangelogPage({
   ]);
 
   return (
-    <main className="changelog-page">
-      <header className="changelog-heading">
+    <main className="mx-auto w-full max-w-[96rem] px-6 py-10 lg:px-10">
+      <header className="flex flex-wrap items-start justify-between gap-5">
         <div>
-          <h1>Changelog</h1>
-          <p>Product updates, fixes, and improvements.</p>
+          <h1 className="text-2xl font-semibold tracking-tight">Changelog</h1>
+          <p className="mt-2 text-sm text-muted-foreground">
+            Product updates, fixes, and improvements.
+          </p>
         </div>
+        <CommandPaletteTrigger className="h-10" />
       </header>
-      <div className="changelog-toolbar">
-        <ButtonGroup className="changelog-filters" aria-label="Filter updates">
+      {labels.length ? (
+        <ButtonGroup className="mt-6 flex-wrap" aria-label="Filter updates">
           {[undefined, ...labels].map((label) => (
             <Button
-              className="h-11 md:h-8"
               key={label ?? "all"}
               type="button"
-              variant="outline"
+              size="sm"
+              variant={selectedLabel === label ? "secondary" : "outline"}
               aria-pressed={selectedLabel === label}
               disabled={loading}
               onClick={() => void replaceForLabel(label)}
@@ -103,23 +105,30 @@ export function ChangelogPage({
             </Button>
           ))}
         </ButtonGroup>
-        <CommandPaletteTrigger className="h-11 md:h-10" />
-      </div>
-      <ol className="changelog-timeline" aria-label="Product updates">
+      ) : null}
+      <ol
+        className="changelog-timeline"
+        aria-label="Product updates"
+        aria-busy={loading}
+      >
         {page.items.map((entry) => (
           <TimelineEntry entry={entry} key={entry.slug} />
         ))}
       </ol>
+      {!page.items.length && !loading ? (
+        <p className="py-12 text-sm text-muted-foreground">
+          No updates published yet.
+        </p>
+      ) : null}
       {page.nextCursor ? (
-        <div className="changelog-load-more">
+        <div className="mx-auto mt-8 flex max-w-5xl justify-center">
           <Button
-            className="h-11 min-w-64 gap-2 text-sm md:h-10"
             type="button"
             variant="outline"
             disabled={loading}
             onClick={() => void loadMore()}
           >
-            Load more updates
+            {loading ? "Loading updates…" : "Load more updates"}
             <ChevronDown aria-hidden="true" />
           </Button>
         </div>
@@ -135,28 +144,46 @@ function TimelineEntry({ entry }: { entry: PublicChangelogEntry }) {
       <time dateTime={entry.date}>{formatDate(entry.date)}</time>
       <span className="changelog-timeline-marker" aria-hidden="true" />
       <article id={entry.slug} tabIndex={-1}>
-        <div className={cn("changelog-entry-layout", image && "has-image")}>
-          <div className="changelog-entry-copy">
-            <div className="changelog-labels" aria-label="Labels">
-              {entry.labels.map((label) => (
-                <Label key={label} label={label} />
-              ))}
-            </div>
-            <div className="changelog-entry-title">
-              <h2>{entry.title}</h2>
-              <a href={`#${entry.slug}`} aria-label={`Link to ${entry.title}`}>
-                <Link2 aria-hidden="true" />
-              </a>
-            </div>
-            <p className="changelog-entry-summary">{entry.summary}</p>
-            <div className="changelog-entry-body">
-              <p>{entry.body}</p>
-            </div>
+        {entry.labels.length ? (
+          <div className="mb-3 flex flex-wrap gap-2" aria-label="Labels">
+            {entry.labels.map((label) => (
+              <Badge key={label} variant="outline">
+                {label}
+              </Badge>
+            ))}
           </div>
-          {image ? (
-            <img src={image.src} alt={image.alt} width={760} height={420} />
-          ) : null}
+        ) : null}
+        <div className="flex items-start justify-between gap-3">
+          <h2 className="text-lg font-semibold tracking-tight">
+            {entry.title}
+          </h2>
+          <a
+            className={buttonVariants({ variant: "ghost", size: "icon-sm" })}
+            href={`#${entry.slug}`}
+            aria-label={`Link to ${entry.title}`}
+          >
+            <Link2 aria-hidden="true" />
+          </a>
+        </div>
+        <p className="mt-3 text-sm leading-relaxed">{entry.summary}</p>
+        <div className="changelog-entry-body">
+          {entry.body
+            .trim()
+            .split(/\n\s*\n/)
+            .filter(Boolean)
+            .map((paragraph, index) => (
+              <p key={index}>{paragraph}</p>
+            ))}
         </div>
+        {image ? (
+          <img
+            className="mt-6 w-full border"
+            src={image.src}
+            alt={image.alt}
+            width={760}
+            height={420}
+          />
+        ) : null}
       </article>
     </li>
   );
@@ -190,24 +217,6 @@ function useUnexpiredImage(image: PublicChangelogEntry["image"]) {
     : undefined;
 }
 
-function Label({ label }: { label: string }) {
-  const tone = label.toLowerCase();
-  return (
-    <Badge
-      className={cn(
-        "changelog-label",
-        tone === "new feature" && "is-new",
-        tone === "improved" && "is-improved",
-        tone === "fixed" && "is-fixed",
-      )}
-      variant="outline"
-    >
-      <span aria-hidden="true" />
-      {label}
-    </Badge>
-  );
-}
-
 function formatDate(date: string) {
   const [year, month, day] = date.split("-").map(Number);
   return new Intl.DateTimeFormat("en-US", {

package/template/src/cloudflare-workers.d.ts

@@ -6,6 +6,12 @@ declare module "cloudflare:workers" {
     }>;
   };
   export const env: {
+    FEEDBAX_UPDATES?: import("@cloudflare/workers-types").Queue<string>;
+    FEEDBAX_EMAIL?: import("@feedbax/feedback").CloudflareEmailBinding;
+    EMAIL_PROVIDER_SECRET?: string;
+    FEEDBAX_IMAGES?: import("@cloudflare/workers-types").R2Bucket;
+    FEEDBAX_DB?: import("@feedbax/feedback").ConnectedDatabase;
+    IDENTITY_HANDOFF_SECRET?: string;
     TRUSTED_SUBMISSIONS_RATE_LIMITER: {
       limit(options: { key: string }): Promise<{ success: boolean }>;
     };

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

@@ -41,7 +41,7 @@ describe("Comment creation", () => {
     });
     expect(composer.classList.contains("comment-composer")).toBe(true);
     expect(screen.getByLabelText("Add a comment").getAttribute("rows")).toBe(
-      "4",
+      "3",
     );
     expect(
       screen.getByPlaceholderText("Share context, an example, or a question…"),
@@ -147,6 +147,47 @@ describe("Comment creation", () => {
     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",

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

@@ -10,7 +10,17 @@ export function mergeCommentThreads(
     merged.set(
       thread.id,
       existing
-        ? { ...existing, comments: [...existing.comments, ...thread.comments] }
+        ? {
+            ...existing,
+            comments: [
+              ...new Map(
+                [...existing.comments, ...thread.comments].map((comment) => [
+                  comment.id,
+                  comment,
+                ]),
+              ).values(),
+            ],
+          }
         : thread,
     );
   }

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

@@ -1,10 +1,12 @@
 import { useEffect, useState } from "react";
-import { useInfiniteQuery } from "@tanstack/react-query";
+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 { Badge } from "@feedbax/ui/components/badge";
+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,
@@ -13,16 +15,8 @@ import {
   CommandInput,
   CommandItem,
   CommandList,
-  CommandSeparator,
 } from "@feedbax/ui/components/command";
-import {
-  FileText,
-  LayoutList,
-  LoaderCircle,
-  Map,
-  Newspaper,
-  Plus,
-} from "lucide-react";
+import { FileText, LayoutList, Map, Newspaper, Plus } from "lucide-react";
 import { publicPostsQuery } from "../post-queries";
 import { useCommandPalette } from "./command-palette-context";
 import feedbax from "../feedbax";
@@ -64,14 +58,19 @@ export function CommandPalette({
       (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 && deferredTerm.trim().length > 0 && query.isFetching;
+  const searching = open && hasTerm && (settling || query.isFetching);
   const searchStatus = searching
     ? "Searching Posts…"
     : showEmpty
@@ -83,7 +82,7 @@ export function CommandPalette({
   useEffect(() => {
     const firstPost = posts[0];
     if (firstPost) setSelection(`post-${firstPost.slug}`);
-  }, [posts]);
+  }, [posts[0]?.slug]);
 
   function getCurrentRouteOptions() {
     const currentRoute = router.state.matches.at(-1);
@@ -136,24 +135,45 @@ export function CommandPalette({
           onValueChange={setTerm}
           placeholder="Search feedback…"
         />
-        <CommandList aria-busy={searching || undefined} className="max-h-96">
-          <CommandEmpty>No Posts match this search.</CommandEmpty>
-          {searching && posts.length === 0 ? (
-            <CommandGroup heading="Posts">
-              <CommandItem disabled value="searching-posts">
-                <LoaderCircle className="animate-spin" aria-hidden="true" />
-                Searching Posts…
-              </CommandItem>
-            </CommandGroup>
+        <CommandList
+          aria-busy={searching || undefined}
+          className="min-h-28 max-h-96 p-2"
+        >
+          {showEmpty ? (
+            <CommandEmpty>No Posts match this search.</CommandEmpty>
           ) : null}
-          {posts.length > 0 ? (
+          {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-11 gap-3 py-2.5"
+                  className="min-h-14 gap-3"
                 >
                   <FileText aria-hidden="true" />
                   <div className="min-w-0 flex-1">
@@ -164,17 +184,14 @@ export function CommandPalette({
                       {post.description}
                     </div>
                   </div>
-                  <div className="flex shrink-0 items-center gap-1.5">
-                    <Badge variant="outline">{post.type}</Badge>
-                    <Badge className="hidden sm:inline-flex" variant="outline">
-                      {post.status}
-                    </Badge>
+                  <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() ? <CommandSeparator /> : null}
           {!term.trim() ? (
             <CommandGroup heading="Navigate">
               <CommandItem
@@ -228,6 +245,18 @@ export function CommandPalette({
             </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>

package/template/src/components/connected-identity-provider.tsx

@@ -0,0 +1,108 @@
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useState,
+  type ReactNode,
+} from "react";
+import feedbax from "../feedbax";
+import { Button } from "@feedbax/ui/components/button";
+import {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemTitle,
+} from "@feedbax/ui/components/item";
+
+type IdentityState = {
+  enabled: boolean;
+  ready: boolean;
+  displayName?: string;
+  error?: string;
+  signOut: () => Promise<void>;
+};
+const IdentityContext = createContext<IdentityState>({
+  enabled: Boolean(feedbax.connected),
+  ready: !feedbax.connected,
+  signOut: async () => {},
+});
+export function useConnectedIdentity() {
+  return useContext(IdentityContext);
+}
+export function ConnectedIdentityProvider({
+  children,
+}: {
+  children: ReactNode;
+}) {
+  const [state, setState] = useState<{
+    ready: boolean;
+    displayName?: string;
+    error?: string;
+  }>({ ready: !feedbax.connected });
+  useEffect(() => {
+    if (!feedbax.connected) return;
+    const controller = new AbortController();
+    fetch("/internal/identity/session", {
+      signal: controller.signal,
+      cache: "no-store",
+    })
+      .then(async (response) => {
+        if (!response.ok) throw new Error();
+        const value = await response.json();
+        setState({ ready: true, displayName: value.participant?.displayName });
+      })
+      .catch(() => {
+        if (!controller.signal.aborted)
+          setState({
+            ready: true,
+            error: "Sign-in is temporarily unavailable.",
+          });
+      });
+    return () => controller.abort();
+  }, []);
+  async function signOut() {
+    const response = await fetch("/internal/identity/logout", {
+      method: "POST",
+    });
+    if (!response.ok) {
+      setState((current) => ({
+        ...current,
+        error: "Sign-out failed. Try again.",
+      }));
+      return;
+    }
+    window.location.reload();
+  }
+  return (
+    <IdentityContext.Provider
+      value={{ enabled: Boolean(feedbax.connected), ...state, signOut }}
+    >
+      {children}
+    </IdentityContext.Provider>
+  );
+}
+export function ConnectedSignInPrompt() {
+  const identity = useConnectedIdentity();
+  return (
+    <Item variant="muted" size="sm" className="my-4">
+      <ItemContent className="min-w-36">
+        <ItemTitle>Join the conversation</ItemTitle>
+        <ItemDescription className="line-clamp-none">
+          {identity.error ?? "Sign in with your product account to comment."}
+        </ItemDescription>
+      </ItemContent>
+      <ItemActions>
+        <Button
+          nativeButton={false}
+          render={<a href="/internal/identity/start" />}
+          variant="outline"
+          size="sm"
+          disabled={!identity.ready}
+        >
+          Sign in
+        </Button>
+      </ItemActions>
+    </Item>
+  );
+}