create-feedbax 0.2.0 → 0.2.1

package/template/src/public-post-route.test.tsx

@@ -13,7 +13,7 @@ import {
 } from "@testing-library/react";
 import {
   createMemoryHistory,
-  createRootRoute,
+  createRootRouteWithContext,
   createRouter,
   Outlet,
   RouterProvider,
@@ -28,6 +28,8 @@ import {
   vi,
 } from "vitest";
 
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
 import { loadPublicPost } from "./public-post-page";
 import { createPublicPostRoute } from "./public-post-route";
 import { PublicPostUnavailable } from "./public-post-unavailable";
@@ -76,7 +78,7 @@ describe("/p/$slug", () => {
     expect(details.getByText("Submitted")).toBeTruthy();
     expect(details.getByText("Updated")).toBeTruthy();
     expect(history.location.pathname).toBe("/p/keyboard-first-search");
-    expect(screen.getByText("Please add Vim bindings.")).toBeTruthy();
+    expect(await screen.findByText("Please add Vim bindings.")).toBeTruthy();
     expect(screen.getByText("Ari")).toBeTruthy();
     expect(document.body.textContent).not.toContain("secret-id");
   });
@@ -161,6 +163,30 @@ describe("/p/$slug", () => {
       "native-cursor",
     );
   });
+
+  it("renders the full-page Post before a slow Comment request completes", async () => {
+    const feedback = createFeedbackModule({ initialItems: [publishedPost] });
+    let finish!: (page: CommentThreadPage) => void;
+    const loadComments = vi.fn(
+      () =>
+        new Promise<CommentThreadPage>((resolve) => {
+          finish = resolve;
+        }),
+    );
+    const history = createMemoryHistory({
+      initialEntries: ["/p/keyboard-first-search"],
+    });
+    const router = createPostRouter({ feedback, history, loadComments });
+    render(<RouterProvider router={router} />);
+    expect(
+      await screen.findByRole("heading", { name: "Keyboard-first search" }),
+    ).toBeTruthy();
+    expect(
+      screen.getByRole("status", { name: "Loading Comments" }),
+    ).toBeTruthy();
+    finish({ items: [] });
+    expect(await screen.findByText("No comments yet")).toBeTruthy();
+  });
 });
 
 function createPostRouter({
@@ -172,7 +198,16 @@ function createPostRouter({
   history: ReturnType<typeof createMemoryHistory>;
   loadComments?: (slug: string, cursor?: string) => Promise<CommentThreadPage>;
 }) {
-  const rootRoute = createRootRoute({ component: () => <Outlet /> });
+  const queryClient = new QueryClient({
+    defaultOptions: { queries: { retry: false } },
+  });
+  const rootRoute = createRootRouteWithContext<{ queryClient: QueryClient }>()({
+    component: () => (
+      <QueryClientProvider client={queryClient}>
+        <Outlet />
+      </QueryClientProvider>
+    ),
+  });
   const postRoute = createPublicPostRoute({
     loadPost: (slug) => loadPublicPost({ feedback, slug }),
     loadComments:
@@ -185,6 +220,7 @@ function createPostRouter({
     getParentRoute: () => rootRoute,
   } as never);
   return createRouter({
+    context: { queryClient },
     history,
     routeTree: rootRoute.addChildren([postRoute]),
   });

package/template/src/public-post-route.tsx

@@ -1,15 +1,14 @@
 import type { CommentThreadPage, PublicPost } from "@feedbax/feedback";
 import { createFileRoute } from "@tanstack/react-router";
-import { type ReactNode, useState } from "react";
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { type ReactNode } from "react";
 import type { PortalCommentRequest } from "./portal-comments";
-import { mergeCommentThreads } from "./comment-thread-page";
+import { PostDetailContent } from "./post-detail-content";
 import feedbax from "./feedbax";
 import { createRouteHead } from "./portal-head";
 
-import {
-  PublicPostDetail,
-  PublicPostDetailSkeleton,
-} from "./public-post-detail";
+import { PublicPostDetailSkeleton } from "./public-post-detail-skeleton";
+import { publicPostQuery } from "./post-detail-query";
 
 export function createPublicPostRoute({
   loadPost,
@@ -21,11 +20,11 @@ export function createPublicPostRoute({
   renderUnavailable: (slug: string) => ReactNode;
 }) {
   const route = createFileRoute("/p/$slug")({
-    loader: async ({ params }) => {
-      const post = await loadPost(params.slug);
-      const comments =
-        post && loadComments ? await loadComments(params.slug) : { items: [] };
-      return { post, comments };
+    loader: async ({ params, context }) => {
+      const post = await context.queryClient.ensureQueryData(
+        publicPostQuery(params.slug, loadPost),
+      );
+      return { post };
     },
     head: ({ loaderData, params }) =>
       loaderData?.post
@@ -45,26 +44,14 @@ export function createPublicPostRoute({
   });
 
   function PostRoute() {
-    const data = route.useLoaderData();
     const { slug } = route.useParams();
-    const [comments, setComments] = useState(data.comments);
-    return data.post ? (
-      <PublicPostDetail
-        post={data.post}
-        comments={comments}
+    const { data: post } = useSuspenseQuery(publicPostQuery(slug, loadPost));
+    return post ? (
+      <PostDetailContent
+        post={post}
+        loadComments={loadComments}
         submitComment={submitPublicComment}
         mutateComment={mutatePublicComment}
-        loadMore={
-          loadComments && comments.nextCursor
-            ? async () => {
-                const next = await loadComments(slug, comments.nextCursor);
-                setComments({
-                  items: mergeCommentThreads(comments.items, next.items),
-                  ...(next.nextCursor ? { nextCursor: next.nextCursor } : {}),
-                });
-              }
-            : undefined
-        }
       />
     ) : (
       renderUnavailable(slug)

package/template/src/public-roadmap-route.test.tsx

@@ -128,7 +128,7 @@ describe("/roadmap route", () => {
     render(<RouterProvider router={router} />);
 
     const loadMore = await screen.findByRole("button", {
-      name: "Load more Planned Posts",
+      name: "View more Planned Posts",
     });
     fireEvent.click(loadMore);
 
@@ -152,7 +152,7 @@ describe("/roadmap route", () => {
     ).toBeTruthy();
     await waitFor(() =>
       expect(
-        screen.queryByRole("button", { name: "Load more Planned Posts" }),
+        screen.queryByRole("button", { name: "View more Planned Posts" }),
       ).toBeNull(),
     );
     expect(
@@ -163,6 +163,42 @@ describe("/roadmap route", () => {
     ).toBe("1 more Planned Post loaded.");
   });
 
+  it("reveals five cards at a time before requesting another server page", async () => {
+    const items = Array.from({ length: 12 }, (_, index) =>
+      post(`planned-${index}`, "Planned"),
+    );
+    const loadMore = vi.fn().mockResolvedValue({
+      items: [post("planned-12", "Planned")],
+      totalCount: 13,
+    });
+    render(
+      <PublicRoadmapView
+        roadmap={{
+          Planned: { items, totalCount: 13, nextCursor: "next-page" },
+          "In Progress": { items: [], totalCount: 0 },
+          Shipped: { items: [], totalCount: 0 },
+        }}
+        loadMore={loadMore}
+      />,
+    );
+    expect(screen.getAllByRole("link")).toHaveLength(5);
+    const button = screen.getByRole("button", {
+      name: "View more Planned Posts",
+    });
+    fireEvent.click(button);
+    expect(screen.getAllByRole("link")).toHaveLength(10);
+    expect(loadMore).not.toHaveBeenCalled();
+    fireEvent.click(button);
+    expect(
+      await screen.findByRole("link", { name: /planned-12 / }),
+    ).toBeTruthy();
+    expect(screen.getAllByRole("link")).toHaveLength(13);
+    expect(loadMore).toHaveBeenCalledOnce();
+    expect(
+      screen.queryByRole("button", { name: "View more Planned Posts" }),
+    ).toBeNull();
+  });
+
   it("shows one status column at a time behind mobile status tabs", async () => {
     Object.defineProperty(window, "matchMedia", {
       configurable: true,

package/template/src/public-roadmap-view.tsx

@@ -50,6 +50,12 @@ const roadmapGroups = [
 ] as const;
 
 const mobileMediaQuery = "(max-width: 1023px)";
+const previewSize = 5;
+const initialVisible = {
+  Planned: previewSize,
+  "In Progress": previewSize,
+  Shipped: previewSize,
+};
 
 export function PublicRoadmapView({
   roadmap,
@@ -63,6 +69,7 @@ export function PublicRoadmapView({
   const mobile = useMediaQuery(mobileMediaQuery);
   const [activeStatus, setActiveStatus] = useState<RoadmapStatus>("Planned");
   const [columns, setColumns] = useState(roadmap);
+  const [visible, setVisible] = useState(initialVisible);
   const [loading, setLoading] = useState<Partial<Record<RoadmapStatus, true>>>(
     {},
   );
@@ -71,7 +78,10 @@ export function PublicRoadmapView({
   );
   const [loadStatusMessage, setLoadStatusMessage] = useState("");
 
-  useEffect(() => setColumns(roadmap), [roadmap]);
+  useEffect(() => {
+    setColumns(roadmap);
+    setVisible(initialVisible);
+  }, [roadmap]);
 
   const visibleGroups = mobile
     ? roadmapGroups.filter(({ status }) => status === activeStatus)
@@ -89,13 +99,26 @@ export function PublicRoadmapView({
       return next;
     });
     try {
-      const nextPage = await loadMore(query);
-      setColumns((current) => ({
-        ...current,
-        [query.status]: appendRoadmapPage(current[query.status], nextPage),
-      }));
+      const before = Math.min(
+        visible[query.status],
+        columns[query.status].items.length,
+      );
+      const target = before + previewSize;
+      let combined = columns[query.status];
+      const cursors = new Set<string>();
+      do {
+        if (!combined.nextCursor || cursors.has(combined.nextCursor)) break;
+        cursors.add(combined.nextCursor);
+        combined = appendRoadmapPage(
+          combined,
+          await loadMore({ status: query.status, cursor: combined.nextCursor }),
+        );
+      } while (combined.items.length < target && combined.nextCursor);
+      setColumns((current) => ({ ...current, [query.status]: combined }));
+      const count = Math.min(target, combined.items.length) - before;
+      setVisible((current) => ({ ...current, [query.status]: before + count }));
       setLoadStatusMessage(
-        `${nextPage.items.length} more ${group.heading} ${nextPage.items.length === 1 ? "Post" : "Posts"} loaded.`,
+        `${count} more ${group.heading} ${count === 1 ? "Post" : "Posts"} loaded.`,
       );
     } catch {
       setErrors((current) => ({ ...current, [query.status]: true }));
@@ -168,7 +191,7 @@ export function PublicRoadmapView({
                 <RoadmapEmptyState heading={heading} />
               ) : (
                 <ol className="grid gap-3">
-                  {column.items.map((item) => (
+                  {column.items.slice(0, visible[status]).map((item) => (
                     <RoadmapItem
                       item={item}
                       key={item.slug}
@@ -200,26 +223,36 @@ export function PublicRoadmapView({
                   </Button>
                 </div>
               ) : null}
-              {column.nextCursor && !errors[status] && loadMore ? (
+              {(column.items.length > visible[status] ||
+                (column.nextCursor && loadMore)) &&
+              !errors[status] ? (
                 <Button
-                  aria-label={`Load more ${heading} Posts`}
+                  aria-label={`View more ${heading} Posts`}
                   className="mt-4 h-10 w-full gap-2"
                   disabled={loading[status] === true}
                   type="button"
                   variant="ghost"
-                  onClick={() =>
-                    void loadNextPage({
-                      status,
-                      cursor: column.nextCursor,
-                    })
-                  }
+                  onClick={() => {
+                    if (
+                      column.items.length - visible[status] >= previewSize ||
+                      !column.nextCursor ||
+                      !loadMore
+                    ) {
+                      setVisible((current) => ({
+                        ...current,
+                        [status]: current[status] + previewSize,
+                      }));
+                    } else if (column.nextCursor) {
+                      void loadNextPage({ status, cursor: column.nextCursor });
+                    }
+                  }}
                 >
                   {loading[status] ? (
                     <>
                       <Spinner aria-hidden="true" /> Loading…
                     </>
                   ) : (
-                    "Load more"
+                    "View more"
                   )}
                 </Button>
               ) : null}
@@ -306,12 +339,12 @@ function RoadmapIntro() {
   return (
     <section aria-labelledby="roadmap-heading">
       <h1
-        className="text-3xl font-semibold tracking-tight"
+        className="text-2xl font-semibold tracking-tight"
         id="roadmap-heading"
       >
         Roadmap
       </h1>
-      <p className="mt-2 text-base text-muted-foreground">
+      <p className="mt-2 text-sm text-muted-foreground">
         What we’re planning, building, and shipping.
       </p>
     </section>
@@ -342,15 +375,15 @@ function RoadmapItem({ item, masked }: { item: PublicPost; masked: boolean }) {
         contextual={masked}
         className="group block border bg-background/30 transition-colors duration-150 hover:bg-muted/30"
       >
-        <article className="p-5">
-          <h3 className="text-base font-medium group-hover:text-foreground">
+        <article className="flex h-40 flex-col p-4">
+          <h3 className="line-clamp-2 min-h-10 text-sm font-medium leading-5 group-hover:text-foreground">
             {item.title}
           </h3>
-          <p className="mt-2 text-sm leading-relaxed text-muted-foreground">
+          <p className="mt-2 line-clamp-2 min-h-10 text-sm leading-5 text-muted-foreground">
             {item.description}
           </p>
           <div
-            className="mt-4 flex flex-wrap items-center gap-3 text-xs text-muted-foreground"
+            className="mt-auto flex items-center gap-3 pt-3 text-xs text-muted-foreground"
             role="group"
             aria-label="Post metadata"
           >

package/template/src/public-shell.test.tsx

@@ -365,6 +365,32 @@ describe("command palette", () => {
     await waitFor(() => expect(history.location.pathname).toBe("/roadmap"));
   });
 
+  it("keeps previous search results visible while a new term is loading", async () => {
+    let finish: ((page: PublicPostPage) => void) | undefined;
+    renderShell("/", {
+      searchPosts: (term) =>
+        term === "keyboard"
+          ? Promise.resolve({ items: [palettePost()] })
+          : new Promise((resolve) => {
+              finish = resolve;
+            }),
+    });
+    await screen.findByRole("link", { name: "Feedback" });
+    fireEvent.keyDown(window, { key: "k", metaKey: true });
+    const input = await screen.findByPlaceholderText("Search feedback…");
+    fireEvent.change(input, { target: { value: "keyboard" } });
+    await screen.findByText("Keyboard-first search");
+    fireEvent.change(input, { target: { value: "next search" } });
+    await waitFor(() => expect(finish).toBeTypeOf("function"));
+    expect(screen.getByText("Keyboard-first search")).toBeTruthy();
+    finish?.({ items: [] });
+    await waitFor(() =>
+      expect(
+        screen.getByRole("status", { name: "Search status" }).textContent,
+      ).toBe("No Posts match this search."),
+    );
+  });
+
   it("shows an empty state when no Posts match", async () => {
     renderShell("/");
 

package/template/src/routeTree.gen.ts

@@ -11,6 +11,7 @@
 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 RoadmapRouteImport } from './routes/roadmap'
 import { Route as SubmitRouteImport } from './routes/submit'
 import { Route as PSlugRouteImport } from './routes/p.$slug'
@@ -25,6 +26,11 @@ 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 RoadmapRoute = RoadmapRouteImport.update({
   id: '/roadmap',
   path: '/roadmap',
@@ -44,6 +50,7 @@ const PSlugRoute = PSlugRouteImport.update({
 export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
   '/changelog': typeof ChangelogRoute
+  '/email-preferences': typeof EmailPreferencesRoute
   '/roadmap': typeof RoadmapRoute
   '/submit': typeof SubmitRoute
   '/p/$slug': typeof PSlugRoute
@@ -51,6 +58,7 @@ export interface FileRoutesByFullPath {
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
   '/changelog': typeof ChangelogRoute
+  '/email-preferences': typeof EmailPreferencesRoute
   '/roadmap': typeof RoadmapRoute
   '/submit': typeof SubmitRoute
   '/p/$slug': typeof PSlugRoute
@@ -59,21 +67,42 @@ export interface FileRoutesById {
   __root__: typeof rootRouteImport
   '/': typeof IndexRoute
   '/changelog': typeof ChangelogRoute
+  '/email-preferences': typeof EmailPreferencesRoute
   '/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'
+    | '/roadmap'
+    | '/submit'
+    | '/p/$slug'
   fileRoutesByTo: FileRoutesByTo
-  to: '/' | '/changelog' | '/roadmap' | '/submit' | '/p/$slug'
-  id: '__root__' | '/' | '/changelog' | '/roadmap' | '/submit' | '/p/$slug'
+  to:
+    | '/'
+    | '/changelog'
+    | '/email-preferences'
+    | '/roadmap'
+    | '/submit'
+    | '/p/$slug'
+  id:
+    | '__root__'
+    | '/'
+    | '/changelog'
+    | '/email-preferences'
+    | '/roadmap'
+    | '/submit'
+    | '/p/$slug'
   fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
   IndexRoute: typeof IndexRoute
   ChangelogRoute: typeof ChangelogRoute
+  EmailPreferencesRoute: typeof EmailPreferencesRoute
   RoadmapRoute: typeof RoadmapRoute
   SubmitRoute: typeof SubmitRoute
   PSlugRoute: typeof PSlugRoute
@@ -95,6 +124,13 @@ 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
+    }
     '/roadmap': {
       id: '/roadmap'
       path: '/roadmap'
@@ -122,6 +158,7 @@ declare module '@tanstack/react-router' {
 const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
   ChangelogRoute: ChangelogRoute,
+  EmailPreferencesRoute: EmailPreferencesRoute,
   RoadmapRoute: RoadmapRoute,
   SubmitRoute: SubmitRoute,
   PSlugRoute: PSlugRoute,
@@ -129,3 +166,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/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;
     }