create-feedbax 0.2.0 → 0.2.2

package/template/src/routeTree.gen.ts

@@ -11,6 +11,8 @@
 import { Route as rootRouteImport } from './routes/__root'
 import { Route as IndexRouteImport } from './routes/index'
 import { Route as ChangelogRouteImport } from './routes/changelog'
+import { Route as EmailPreferencesRouteImport } from './routes/email-preferences'
+import { Route as MyFeedbackRouteImport } from './routes/my-feedback'
 import { Route as RoadmapRouteImport } from './routes/roadmap'
 import { Route as SubmitRouteImport } from './routes/submit'
 import { Route as PSlugRouteImport } from './routes/p.$slug'
@@ -25,6 +27,16 @@ const ChangelogRoute = ChangelogRouteImport.update({
   path: '/changelog',
   getParentRoute: () => rootRouteImport,
 } as any)
+const EmailPreferencesRoute = EmailPreferencesRouteImport.update({
+  id: '/email-preferences',
+  path: '/email-preferences',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const MyFeedbackRoute = MyFeedbackRouteImport.update({
+  id: '/my-feedback',
+  path: '/my-feedback',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const RoadmapRoute = RoadmapRouteImport.update({
   id: '/roadmap',
   path: '/roadmap',
@@ -44,6 +56,8 @@ const PSlugRoute = PSlugRouteImport.update({
 export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
   '/changelog': typeof ChangelogRoute
+  '/email-preferences': typeof EmailPreferencesRoute
+  '/my-feedback': typeof MyFeedbackRoute
   '/roadmap': typeof RoadmapRoute
   '/submit': typeof SubmitRoute
   '/p/$slug': typeof PSlugRoute
@@ -51,6 +65,8 @@ export interface FileRoutesByFullPath {
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
   '/changelog': typeof ChangelogRoute
+  '/email-preferences': typeof EmailPreferencesRoute
+  '/my-feedback': typeof MyFeedbackRoute
   '/roadmap': typeof RoadmapRoute
   '/submit': typeof SubmitRoute
   '/p/$slug': typeof PSlugRoute
@@ -59,21 +75,47 @@ export interface FileRoutesById {
   __root__: typeof rootRouteImport
   '/': typeof IndexRoute
   '/changelog': typeof ChangelogRoute
+  '/email-preferences': typeof EmailPreferencesRoute
+  '/my-feedback': typeof MyFeedbackRoute
   '/roadmap': typeof RoadmapRoute
   '/submit': typeof SubmitRoute
   '/p/$slug': typeof PSlugRoute
 }
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
-  fullPaths: '/' | '/changelog' | '/roadmap' | '/submit' | '/p/$slug'
+  fullPaths:
+    | '/'
+    | '/changelog'
+    | '/email-preferences'
+    | '/my-feedback'
+    | '/roadmap'
+    | '/submit'
+    | '/p/$slug'
   fileRoutesByTo: FileRoutesByTo
-  to: '/' | '/changelog' | '/roadmap' | '/submit' | '/p/$slug'
-  id: '__root__' | '/' | '/changelog' | '/roadmap' | '/submit' | '/p/$slug'
+  to:
+    | '/'
+    | '/changelog'
+    | '/email-preferences'
+    | '/my-feedback'
+    | '/roadmap'
+    | '/submit'
+    | '/p/$slug'
+  id:
+    | '__root__'
+    | '/'
+    | '/changelog'
+    | '/email-preferences'
+    | '/my-feedback'
+    | '/roadmap'
+    | '/submit'
+    | '/p/$slug'
   fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
   IndexRoute: typeof IndexRoute
   ChangelogRoute: typeof ChangelogRoute
+  EmailPreferencesRoute: typeof EmailPreferencesRoute
+  MyFeedbackRoute: typeof MyFeedbackRoute
   RoadmapRoute: typeof RoadmapRoute
   SubmitRoute: typeof SubmitRoute
   PSlugRoute: typeof PSlugRoute
@@ -95,6 +137,20 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof ChangelogRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/email-preferences': {
+      id: '/email-preferences'
+      path: '/email-preferences'
+      fullPath: '/email-preferences'
+      preLoaderRoute: typeof EmailPreferencesRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/my-feedback': {
+      id: '/my-feedback'
+      path: '/my-feedback'
+      fullPath: '/my-feedback'
+      preLoaderRoute: typeof MyFeedbackRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/roadmap': {
       id: '/roadmap'
       path: '/roadmap'
@@ -122,6 +178,8 @@ declare module '@tanstack/react-router' {
 const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
   ChangelogRoute: ChangelogRoute,
+  EmailPreferencesRoute: EmailPreferencesRoute,
+  MyFeedbackRoute: MyFeedbackRoute,
   RoadmapRoute: RoadmapRoute,
   SubmitRoute: SubmitRoute,
   PSlugRoute: PSlugRoute,
@@ -129,3 +187,12 @@ const rootRouteChildren: RootRouteChildren = {
 export const routeTree = rootRouteImport
   ._addFileChildren(rootRouteChildren)
   ._addFileTypes<FileRouteTypes>()
+
+import type { getRouter } from './router.tsx'
+import type { createStart } from '@tanstack/react-start'
+declare module '@tanstack/react-start' {
+  interface Register {
+    ssr: true
+    router: Awaited<ReturnType<typeof getRouter>>
+  }
+}

package/template/src/router.tsx

@@ -11,6 +11,8 @@ export const getRouter = () => {
     scrollRestoration: true,
     defaultPreloadStaleTime: 0,
     context: { queryClient },
+    defaultPendingMs: 250,
+    defaultPendingMinMs: 200,
     defaultPendingComponent: () => <Loader />,
     defaultNotFoundComponent: () => <div>Not Found</div>,
   });

package/template/src/routes/__root.tsx

@@ -11,6 +11,8 @@ import { ThemeProvider } from "next-themes";
 import { QueryClientProvider } from "@tanstack/react-query";
 
 import Header from "../components/header";
+import { PortalFooter } from "../components/portal-footer";
+import { LazyPostDetailOverlay as PostDetailOverlay } from "../lazy-post-detail-overlay";
 import { DeviceProfileProvider } from "../components/device-profile-provider";
 import {
   CommandPaletteProvider,
@@ -39,11 +41,6 @@ const CreatePostOverlay = lazy(() =>
     default: module.LazyCreatePostOverlay,
   })),
 );
-const PostDetailOverlay = lazy(() =>
-  import("../lazy-post-detail-overlay").then((module) => ({
-    default: module.LazyPostDetailOverlay,
-  })),
-);
 
 export type RouterAppContext = {
   queryClient: import("@tanstack/react-query").QueryClient;
@@ -97,6 +94,7 @@ function RootDocument() {
                   <div id="main-content" tabIndex={-1}>
                     <Outlet />
                   </div>
+                  <PortalFooter />
                   <OptionalPortalSurfaces />
                 </div>
               </CommandPaletteProvider>

package/template/src/routes/email-preferences.tsx

@@ -0,0 +1,77 @@
+import { createFileRoute, notFound } from "@tanstack/react-router";
+import { useState } from "react";
+import { Button } from "@feedbax/ui/components/button";
+import feedbax from "../feedbax";
+export const Route = createFileRoute("/email-preferences")({
+  validateSearch: (search: Record<string, unknown>) => ({
+    token: typeof search.token === "string" ? search.token : "",
+  }),
+  beforeLoad: () => {
+    if (!feedbax.connected?.email) throw notFound();
+  },
+  head: () => ({
+    meta: [
+      { name: "robots", content: "noindex,nofollow" },
+      { name: "referrer", content: "no-referrer" },
+    ],
+  }),
+  component: EmailPreferencesPage,
+});
+function EmailPreferencesPage() {
+  const { token } = Route.useSearch();
+  const [pending, setPending] = useState(false);
+  const [done, setDone] = useState(false);
+  const [error, setError] = useState<string>();
+  async function unsubscribe() {
+    setPending(true);
+    setError(undefined);
+    try {
+      const response = await fetch(
+        `/internal/connected/unsubscribe?token=${encodeURIComponent(token)}`,
+        { method: "POST" },
+      );
+      if (!response.ok)
+        throw new Error(
+          "This link could not be used. Try again or change email preferences in your notification inbox.",
+        );
+      setDone(true);
+    } catch (cause) {
+      setError(
+        cause instanceof Error
+          ? cause.message
+          : "Couldn’t update email preferences.",
+      );
+    } finally {
+      setPending(false);
+    }
+  }
+  return (
+    <main className="mx-auto max-w-lg space-y-5 px-6 py-16">
+      <h1 className="text-2xl font-semibold tracking-tight">
+        {done ? "Email notifications are off" : "Stop email notifications"}
+      </h1>
+      <p className="text-sm leading-relaxed text-muted-foreground">
+        {done
+          ? "You can turn them on again in your notification inbox."
+          : "You will keep receiving updates inside Feedbax."}
+      </p>
+      {done ? (
+        <Button nativeButton={false} render={<a href="/" />} variant="outline">
+          Back to feedback
+        </Button>
+      ) : (
+        <Button
+          onClick={unsubscribe}
+          disabled={pending || !/^[a-f0-9]{32}\.[A-Za-z0-9_-]{43}$/.test(token)}
+        >
+          {pending ? "Updating…" : "Stop email notifications"}
+        </Button>
+      )}
+      {error ? (
+        <p role="alert" className="text-sm text-destructive">
+          {error}
+        </p>
+      ) : null}
+    </main>
+  );
+}

package/template/src/routes/my-feedback.tsx

@@ -0,0 +1,16 @@
+import { createFileRoute, notFound } from "@tanstack/react-router";
+import feedbax from "../feedbax";
+import { MyFeedbackPage } from "../my-feedback-page";
+export const Route = createFileRoute("/my-feedback")({
+  beforeLoad: () => {
+    if (!feedbax.connected) throw notFound();
+  },
+  head: () => ({
+    meta: [
+      { title: "My feedback" },
+      { name: "robots", content: "noindex,nofollow" },
+      { name: "referrer", content: "no-referrer" },
+    ],
+  }),
+  component: MyFeedbackPage,
+});

package/template/src/routes/submit.tsx

@@ -21,7 +21,7 @@ export const Route = createFileRoute("/submit")({
 
 function SubmitComponent() {
   return (
-    <main className="feedback-index submission-page">
+    <main className="feedback-index">
       <RoutedPostCreationForm />
     </main>
   );

package/template/src/safe-public-failure.ts

@@ -1,6 +1,7 @@
 import {
   BrowserCapabilityAuthorizationError,
   VoteEligibilityError,
+  ImageAttachmentError,
 } from "@feedbax/feedback";
 
 export async function runSafePublicRead<Value>(
@@ -32,7 +33,8 @@ export async function runSafePortalMutation<Value>(
     if (
       error instanceof ActionablePortalFailure ||
       error instanceof BrowserCapabilityAuthorizationError ||
-      error instanceof VoteEligibilityError
+      error instanceof VoteEligibilityError ||
+      error instanceof ImageAttachmentError
     ) {
       throw error;
     }

package/template/src/server.ts

@@ -1,8 +1,22 @@
+import { createMyFeedbackRequestHandler } from "./my-feedback-runtime";
+import { createPublicHistoryRequestHandler } from "./history-runtime";
+import { handleImageRequest } from "./images-runtime";
+import {
+  handleParticipationRequest,
+  synchronizeConnectedUpdates,
+} from "./participation-runtime";
+import { handleConnectedRequest } from "./connected-runtime";
 import { configuredTurnstileSecret } from "./turnstile-configuration";
 import { createPortalServerEntry } from "./portal-server-entry";
 import { createConfiguredTrustedFeedbackHandler } from "./trusted-feedback-runtime";
 import { env } from "cloudflare:workers";
-import { createConfiguredFeedbackModule } from "./feedback-runtime";
+import {
+  configuredIntegration,
+  configuredHistory,
+  createConfiguredContentFeedbackModule,
+  createConfiguredFeedbackModule,
+  requestParticipant,
+} from "./feedback-runtime";
 import { createPortalVoteHandler } from "./portal-voting";
 import { createCloudflareTurnstileVerifier } from "./cloudflare-turnstile";
 import feedbax from "./feedbax";
@@ -13,7 +27,43 @@ import {
   createPortalCommentRequestHandler,
 } from "./portal-comments";
 
-export default createPortalServerEntry({
+const application = createPortalServerEntry({
+  cachePublicReads: feedbax.provider !== "github" && !feedbax.history,
+  connectedHandler: async (request) =>
+    (await createPublicHistoryRequestHandler({
+      enabled: Boolean(feedbax.history),
+      history: feedbax.history ? configuredHistory() : undefined,
+      rateLimit: async (input) =>
+        (
+          await env.TRUSTED_SUBMISSIONS_RATE_LIMITER.limit({
+            key: `history:${input.headers.get("CF-Connecting-IP") ?? "unknown"}`,
+          })
+        ).success,
+    })(request)) ??
+    (feedbax.connected &&
+    env.FEEDBAX_DB &&
+    request.url.includes("/internal/my-feedback")
+      ? await createMyFeedbackRequestHandler({
+          enabled: true,
+          siteUrl: feedbax.product.siteUrl!,
+          database: env.FEEDBAX_DB,
+          getParticipant: requestParticipant,
+          getFeedback: createConfiguredFeedbackModule,
+          rateLimit: async (input) =>
+            (
+              await env.TRUSTED_SUBMISSIONS_RATE_LIMITER.limit({
+                key: `my-feedback:${input.headers.get("CF-Connecting-IP") ?? "unknown"}`,
+              })
+            ).success,
+          limits: feedbax.submissions,
+        })(request)
+      : undefined) ??
+    (feedbax.provider === "github"
+      ? await configuredIntegration().handle(request)
+      : undefined) ??
+    (await handleImageRequest(request)) ??
+    (await handleParticipationRequest(request)) ??
+    handleConnectedRequest(request),
   commentHandler: (request) => {
     const turnstileSecret = configuredTurnstileSecret(env.TURNSTILE_SECRET_KEY);
     return createPortalCommentRequestHandler({
@@ -109,3 +159,38 @@ export default createPortalServerEntry({
     }
   },
 });
+
+export default {
+  ...application,
+  async scheduled() {
+    if (feedbax.history) await configuredHistory().synchronize();
+    if (feedbax.provider === "github")
+      await configuredIntegration().reconcile(
+        createConfiguredContentFeedbackModule(),
+      );
+    if (!feedbax.connected) return;
+    if (feedbax.connected.processing === "standard") {
+      await synchronizeConnectedUpdates();
+      return;
+    }
+    if (!env.FEEDBAX_UPDATES)
+      throw new Error(
+        "Bind the Connected processing queue as FEEDBAX_UPDATES.",
+      );
+    await env.FEEDBAX_UPDATES.send("feedbax-connected-tick-v1");
+  },
+  async queue(
+    batch: import("@cloudflare/workers-types").MessageBatch<unknown>,
+  ) {
+    if (!feedbax.connected || feedbax.connected.processing === "standard")
+      throw new Error("Queue delivery requires small Connected processing.");
+    for (const message of batch.messages) {
+      if (message.body !== "feedbax-connected-tick-v1") {
+        message.ack();
+        continue;
+      }
+      await synchronizeConnectedUpdates();
+      message.ack();
+    }
+  },
+};

package/template/src/submission-intent.ts

@@ -0,0 +1,26 @@
+// Session storage is tab-scoped. A failed request reuses the same secret intent
+// across a retry/reload; successful completion makes a later submission distinct.
+export async function submissionIntent(
+  storage: Pick<Storage, "getItem" | "setItem" | "removeItem">,
+  input: unknown,
+) {
+  const bytes = await crypto.subtle.digest(
+    "SHA-256",
+    new TextEncoder().encode(JSON.stringify(input)),
+  );
+  const digest = Array.from(new Uint8Array(bytes), (value) =>
+    value.toString(16).padStart(2, "0"),
+  ).join("");
+  const slot = `feedbax:pending-submission:${digest}`;
+  let key = storage.getItem(slot);
+  if (!key || !/^[A-Za-z0-9_-]{43}$/.test(key)) {
+    key = btoa(
+      String.fromCharCode(...crypto.getRandomValues(new Uint8Array(32))),
+    )
+      .replaceAll("+", "-")
+      .replaceAll("/", "_")
+      .replace(/=+$/, "");
+    storage.setItem(slot, key);
+  }
+  return { key, complete: () => storage.removeItem(slot) };
+}

package/template/src/trusted-feedback-handler.test.ts

@@ -43,7 +43,7 @@ describe("trusted feedback Worker handler", () => {
 
     expect(response.status).toBe(308);
     expect(response.headers.get("location")).toBe(
-      "https://feedback.example.com/?types=%5B%22Bug+Report%22%5D&statuses=%5B%22New%22%5D&pageSize=25&sort=top&schema=1",
+      "https://feedback.example.com/?types=%5B%22Bug+Report%22%5D&statuses=%5B%22New%22%5D&pageSize=25&sort=top&schema=2",
     );
     expect(applicationHandler).not.toHaveBeenCalled();
   });

package/template/src/vote-toggle.tsx

@@ -1,3 +1,5 @@
+import { publicPostQueryKey } from "./post-detail-query";
+import { useConnectedIdentity } from "./components/connected-identity-provider";
 import { configuredTurnstileSiteKey } from "./turnstile-configuration";
 import type { PublicPost } from "@feedbax/feedback";
 import { ChevronUp } from "lucide-react";
@@ -27,10 +29,12 @@ export function VoteToggle({
   turnstileSiteKey?: string;
   requestTimeoutMs?: number;
 }) {
+  const identity = useConnectedIdentity();
   const queryClient = useContext(QueryClientContext);
   const [voted, setVoted] = useState(false);
   const [count, setCount] = useState(post.voteCount ?? 0);
   const [pending, setPending] = useState(false);
+  const [voteStateReady, setVoteStateReady] = useState(!identity.enabled);
   const [error, setError] = useState<string>();
   const [participationPass, setParticipationPass] = useState<string>();
   const form = useRef<HTMLFormElement>(null);
@@ -38,12 +42,34 @@ export function VoteToggle({
   const turnstileWidget = useRef<string | undefined>(undefined);
 
   useEffect(() => {
-    setVoted(readVotedPostSlugs(localStorage).has(post.slug));
+    if (!identity.enabled)
+      setVoted(readVotedPostSlugs(localStorage).has(post.slug));
     setCount(post.voteCount ?? 0);
     setParticipationPass(
       sessionStorage.getItem("feedbax:participation-pass") ?? undefined,
     );
-  }, [post.slug, post.voteCount]);
+  }, [post.slug, post.voteCount, identity.enabled]);
+  useEffect(() => {
+    if (!identity.enabled || !identity.displayName) return;
+    const controller = new AbortController();
+    setVoteStateReady(false);
+    fetch(`/internal/connected/votes?slug=${encodeURIComponent(post.slug)}`, {
+      signal: controller.signal,
+      cache: "no-store",
+    })
+      .then(async (response) => {
+        if (!response.ok)
+          throw new Error("Could not load your Vote. Refresh and try again.");
+        const state = await response.json();
+        setVoteStateReady(true);
+        setVoted(state.voted);
+        setCount(state.voteCount);
+      })
+      .catch((cause) => {
+        if (!controller.signal.aborted) setError(cause.message);
+      });
+    return () => controller.abort();
+  }, [identity.enabled, identity.displayName, post.slug]);
   useEffect(() => {
     const reconcile = (event: Event) => {
       const detail = (
@@ -95,6 +121,10 @@ export function VoteToggle({
   }, [participationPass, turnstileSiteKey]);
 
   async function toggle() {
+    if (identity.enabled && !identity.displayName) {
+      window.location.href = "/internal/identity/start";
+      return;
+    }
     const previous = { voted, count };
     const nextVoted = !voted;
     setVoted(nextVoted);
@@ -138,7 +168,8 @@ export function VoteToggle({
         throw new Error(result.error ?? "Vote failed. Try again.");
       }
       setCount(result.voteCount);
-      persistVotedPost(localStorage, post.slug, nextVoted);
+      if (!identity.enabled)
+        persistVotedPost(localStorage, post.slug, nextVoted);
       window.dispatchEvent(
         new CustomEvent(voteConfirmedEvent, {
           detail: {
@@ -151,6 +182,7 @@ export function VoteToggle({
       if (queryClient) {
         void Promise.all([
           queryClient.invalidateQueries({ queryKey: publicPostsQueryKey }),
+          queryClient.invalidateQueries({ queryKey: publicPostQueryKey }),
           queryClient.invalidateQueries({ queryKey: publicRoadmapQueryKey }),
         ]);
       }
@@ -177,17 +209,18 @@ export function VoteToggle({
   }
 
   return (
-    <form
-      ref={form}
-      className="vote-toggle"
-      onSubmit={(event) => event.preventDefault()}
-    >
+    <form ref={form} onSubmit={(event) => event.preventDefault()}>
       <button
         className="vote-toggle-button"
         type="button"
         aria-pressed={voted}
         aria-label={`${voted ? "Remove Vote" : "Add Vote"}, ${count} Votes`}
-        disabled={pending}
+        disabled={
+          pending ||
+          (identity.enabled &&
+            (!identity.ready ||
+              (Boolean(identity.displayName) && !voteStateReady)))
+        }
         onClick={toggle}
       >
         <ChevronUp aria-hidden="true" /> {count}

package/template/vite.config.ts

@@ -3,6 +3,7 @@ import tailwindcss from "@tailwindcss/vite";
 import { tanstackStart } from "@tanstack/react-start/plugin/vite";
 import viteReact from "@vitejs/plugin-react";
 import { defineConfig } from "vite";
+import { publicFeedbaxConfiguration } from "./feedbax-vite";
 
 export default defineConfig({
   server: {
@@ -12,6 +13,7 @@ export default defineConfig({
     tsconfigPaths: true,
   },
   plugins: [
+    publicFeedbaxConfiguration(),
     cloudflare({ viteEnvironment: { name: "ssr" } }),
     tailwindcss(),
     tanstackStart({ server: { entry: "./server.ts" } }),